GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI Render</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 color: #222;14 }15 16 /* Top status bar */17 .status-bar {18 height: 110px;19 padding: 0 32px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 font-weight: 600;24 color: #1f1f1f;25 }26 .status-icons {27 display: flex;28 align-items: center;29 gap: 28px;30 }31 .status-icons svg { width: 40px; height: 40px; fill: none; stroke: #333; stroke-width: 3; }32 33 /* Search header */34 .search-wrap {35 padding: 0 32px 16px;36 }37 .search-bar {38 background: #f5f5f7;39 border: 1px solid #e0e0e0;40 border-radius: 64px;41 padding: 28px 34px;42 display: flex;43 align-items: center;44 gap: 24px;45 }46 .search-icon {47 width: 52px; height: 52px; border-radius: 26px; background: #fff; border: 1px solid #ddd;48 display:flex; align-items:center; justify-content:center;49 }50 .search-text { flex: 1; }51 .search-text .title { font-size: 44px; font-weight: 700; margin-bottom: 6px; }52 .search-text .subtitle { font-size: 32px; color: #666; }53 .filter-btn {54 width: 96px; height: 96px; border-radius: 48px; background: #fff;55 border: 1px solid #ddd; display:flex; align-items:center; justify-content:center;56 }57 .chip-row {58 display: flex; gap: 40px; padding: 26px 32px 14px;59 border-bottom: 1px solid #eee;60 }61 .chip {62 display:flex; flex-direction:column; align-items:center; gap: 12px;63 color:#6b6b6b;64 }65 .chip svg { width: 48px; height: 48px; stroke:#444; }66 .chip .label { font-size: 28px; }67 .chip.active .label { color:#111; font-weight:700; }68 .chip.active { border-bottom: 4px solid #111; padding-bottom: 20px; }69 70 /* Info card */71 .info-card {72 margin: 28px 32px 0;73 border: 1px solid #e5e5e5;74 border-radius: 28px;75 padding: 32px;76 display:flex; align-items:center; justify-content:space-between;77 background:#fff;78 }79 .info-card .title { font-size: 44px; font-weight: 800; }80 .info-card .sub { font-size: 32px; color:#666; margin-top: 8px; }81 .toggle {82 width: 200px; height: 100px; background:#ddd; border-radius: 50px; position: relative;83 }84 .toggle::after {85 content:'';86 position:absolute; width:86px; height:86px; background:#fff; border:1px solid #ccc;87 border-radius: 43px; top:7px; left:9px;88 box-shadow:0 1px 3px rgba(0,0,0,0.1);89 }90 91 /* Listing card */92 .listing {93 margin: 28px 32px;94 border-radius: 36px;95 overflow: hidden;96 background:#fff;97 }98 .listing .img {99 position: relative;100 width: 100%;101 height: 890px;102 background:#E0E0E0;103 border: 1px solid #BDBDBD;104 display:flex; align-items:center; justify-content:center; color:#757575; font-size: 36px;105 border-radius: 36px;106 }107 .fav-btn {108 position:absolute; right:24px; top:24px; width:72px; height:72px;109 background:#fff; border-radius:36px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,0.15);110 }111 .fav-btn svg { width:40px; height:40px; fill:none; stroke:#222; stroke-width:3; }112 .avatar-tile {113 position:absolute; left:24px; bottom:24px; width:170px; height:140px;114 background:#fff; border-radius:22px; box-shadow:0 2px 8px rgba(0,0,0,0.15);115 display:flex; align-items:center; justify-content:center;116 }117 .avatar-tile .avatar {118 width:110px; height:110px; border-radius:55px; background:#E0E0E0; border:1px solid #BDBDBD;119 display:flex; align-items:center; justify-content:center; color:#757575; font-size:24px;120 }121 .carousel-dots {122 position: absolute; bottom:24px; left:50%; transform:translateX(-50%);123 display:flex; gap:18px;124 }125 .carousel-dots span {126 width:18px; height:18px; background:#fff; border:1px solid #bbb; border-radius:9px;127 }128 .listing .meta {129 display:flex; align-items:center; justify-content:space-between;130 margin-top: 22px;131 }132 .listing h2 { margin: 16px 0 8px; font-size: 44px; font-weight: 800; }133 .listing .details { font-size: 32px; color:#666; }134 .rating { display:flex; align-items:center; gap:12px; font-size: 34px; font-weight:700; }135 .rating svg { width:38px; height:38px; fill:#111; }136 .price { margin-top: 18px; font-size: 40px; font-weight: 800; }137 .per { font-size: 32px; color:#666; font-weight: 500; margin-left: 12px; }138 139 /* Map pill button */140 .map-pill {141 position: absolute;142 left: 50%; transform: translateX(-50%);143 bottom: 580px;144 width: 300px; height: 110px; border-radius: 56px; background:#111; color:#fff;145 display:flex; align-items:center; justify-content:center; gap:20px;146 box-shadow: 0 6px 20px rgba(0,0,0,0.25);147 }148 .map-pill svg { width:42px; height:42px; stroke:#fff; }149 150 /* Bottom nav */151 .bottom-nav {152 position: absolute; bottom: 0; left: 0; right: 0;153 height: 180px; border-top: 1px solid #eee; background: #fff;154 display:flex; align-items:center; justify-content:space-around;155 }156 .nav-item {157 display:flex; flex-direction:column; align-items:center; gap: 12px;158 color:#666;159 }160 .nav-item svg { width:52px; height:52px; stroke:#666; }161 .nav-item.active { color:#e51e53; }162 .nav-item.active svg { stroke:#e51e53; }163</style>164</head>165<body>166<div id="render-target">167 168 <!-- Status bar -->169 <div class="status-bar">170 <div class="time">12:45</div>171 <div class="status-icons">172 <!-- cloud icon -->173 <svg viewBox="0 0 24 24">174 <path d="M7 14h10a4 4 0 0 0 0-8 5 5 0 0 0-9-2A4 4 0 0 0 7 14z" fill="#333" stroke="none"></path>175 </svg>176 <!-- wifi -->177 <svg viewBox="0 0 24 24">178 <path d="M2 8c8-6 12-6 20 0M5 11c6-4 8-4 14 0M9 14c3-2 3-2 6 0M12 18h0" stroke-linecap="round"/>179 </svg>180 <!-- battery -->181 <svg viewBox="0 0 24 24">182 <rect x="2" y="6" width="18" height="12" rx="2"></rect>183 <rect x="20" y="9" width="2" height="6"></rect>184 <rect x="4" y="8" width="12" height="8" fill="#333" stroke="none"></rect>185 </svg>186 </div>187 </div>188 189 <!-- Search bar -->190 <div class="search-wrap">191 <div class="search-bar">192 <div class="search-icon">193 <svg viewBox="0 0 24 24">194 <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2" fill="none"></circle>195 <path d="M16 16l6 6" stroke="#111" stroke-width="2" stroke-linecap="round"></path>196 </svg>197 </div>198 <div class="search-text">199 <div class="title">Where to?</div>200 <div class="subtitle">Anywhere · Any week · Add guests</div>201 </div>202 <div class="filter-btn">203 <svg viewBox="0 0 24 24">204 <path d="M4 6h16M8 6v8M16 10v8M4 18h16" stroke="#111" stroke-width="2" stroke-linecap="round"></path>205 </svg>206 </div>207 </div>208 </div>209 210 <!-- Category chips -->211 <div class="chip-row">212 <div class="chip active">213 <svg viewBox="0 0 24 24">214 <path d="M3 11h18v7H3zM6 11V8a4 4 0 0 1 8 0v3" fill="none" stroke-width="2" stroke-linejoin="round"></path>215 </svg>216 <div class="label">Rooms</div>217 </div>218 <div class="chip">219 <svg viewBox="0 0 24 24">220 <path d="M4 12l8-7 8 7v7H4z" fill="none" stroke-width="2"></path>221 </svg>222 <div class="label">Farms</div>223 </div>224 <div class="chip">225 <svg viewBox="0 0 24 24">226 <path d="M3 16c4-3 14-3 18 0M6 13c2-2 10-2 12 0" fill="none" stroke-width="2"></path>227 </svg>228 <div class="label">Amazing pools</div>229 </div>230 <div class="chip">231 <svg viewBox="0 0 24 24">232 <path d="M12 2l2 5 5 2-5 2-2 5-2-5-5-2 5-2z" fill="none" stroke-width="2"></path>233 </svg>234 <div class="label">Arctic</div>235 </div>236 <div class="chip">237 <svg viewBox="0 0 24 24">238 <path d="M3 18l9-7 9 7H3zM6 18l6-4 6 4" fill="none" stroke-width="2"></path>239 </svg>240 <div class="label">Camping</div>241 </div>242 </div>243 244 <!-- Info card -->245 <div class="info-card">246 <div>247 <div class="title">Display total price</div>248 <div class="sub">Includes all fees, before taxes</div>249 </div>250 <div class="toggle"></div>251 </div>252 253 <!-- Listing -->254 <div class="listing">255 <div class="img">256 [IMG: Colorful bedroom interior with bed, desk, curtains]257 <div class="fav-btn">258 <svg viewBox="0 0 24 24">259 <path d="M12 21s-7-4.5-9-7.5C1 10 3 6 7 6c3 0 5 3 5 3s2-3 5-3c4 0 6 4 4 7.5S12 21 12 21z"></path>260 </svg>261 </div>262 <div class="avatar-tile">263 <div class="avatar">[IMG: Host avatar]</div>264 </div>265 <div class="carousel-dots">266 <span></span><span></span><span></span><span></span><span></span>267 </div>268 </div>269 270 <div class="meta" style="padding: 0 8px;">271 <h2 style="margin:16px 0;">Valencia, Spain</h2>272 <div class="rating">273 <svg viewBox="0 0 24 24">274 <path d="M12 2l3.1 6.5L22 9.2l-5 4.9L18.2 22 12 18.6 5.8 22 7 14.1 2 9.2l6.9-0.7L12 2z"></path>275 </svg>276 <span>4.87</span>277 </div>278 </div>279 <div class="details" style="padding: 0 8px;">280 Stay with Sagrario · Coach<br>Nov 13 – 18281 </div>282 <div style="padding: 12px 8px 0;">283 <span class="price">$48</span><span class="per">night</span>284 </div>285 </div>286 287 <!-- Map pill -->288 <div class="map-pill">289 <svg viewBox="0 0 24 24">290 <path d="M9 3l-6 3v15l6-3 6 3 6-3V3l-6 3-6-3zM9 3v15m6-12v15" fill="none" stroke-width="2"></path>291 </svg>292 <div style="font-size: 38px; font-weight:700;">Map</div>293 </div>294 295 <!-- Second card preview at bottom (partial) -->296 <div style="margin: 0 32px; height: 360px; border-radius: 28px; overflow: hidden;">297 <div style="width: 100%; height: 360px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:32px; border-radius:28px;">298 [IMG: Interior room thumbnail]299 </div>300 </div>301 302 <!-- Bottom Navigation -->303 <div class="bottom-nav">304 <div class="nav-item active">305 <svg viewBox="0 0 24 24">306 <circle cx="11" cy="11" r="7" fill="none" stroke-width="2"></circle>307 <path d="M16 16l6 6" stroke-width="2" stroke-linecap="round"></path>308 </svg>309 <div>Explore</div>310 </div>311 <div class="nav-item">312 <svg viewBox="0 0 24 24">313 <path d="M12 21s-7-4.5-9-7.5C1 10 3 6 7 6c3 0 5 3 5 3s2-3 5-3c4 0 6 4 4 7.5S12 21 12 21z" fill="none" stroke-width="2"></path>314 </svg>315 <div>Wishlists</div>316 </div>317 <div class="nav-item">318 <svg viewBox="0 0 24 24">319 <path d="M12 2l8 20-8-4-8 4 8-20z" fill="none" stroke-width="2"></path>320 </svg>321 <div>Trips</div>322 </div>323 <div class="nav-item">324 <svg viewBox="0 0 24 24">325 <rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke-width="2"></rect>326 <path d="M3 8l9 6 9-6" fill="none" stroke-width="2"></path>327 </svg>328 <div>Inbox</div>329 </div>330 <div class="nav-item">331 <svg viewBox="0 0 24 24">332 <circle cx="12" cy="8" r="4" fill="none" stroke-width="2"></circle>333 <path d="M4 22c0-5 4-8 8-8s8 3 8 8" fill="none" stroke-width="2"></path>334 </svg>335 <div>Profile</div>336 </div>337 </div>338 339</div>340</body>341</html>