GD-ML/AndroidCode
13.4k
1<html>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 /* Status bar */16 .status-bar {17 height: 110px;18 padding: 0 40px;19 display: flex;20 align-items: center;21 justify-content: space-between;22 color: #333;23 font-weight: 600;24 font-size: 42px;25 }26 .status-right {27 display: flex;28 align-items: center;29 gap: 24px;30 }31 .status-icon {32 width: 42px; height: 42px;33 opacity: 0.7;34 }35 .battery {36 display: flex; align-items: center; gap: 10px; font-size: 36px;37 }38 .battery-shape {39 width: 72px; height: 36px; border: 3px solid #333; border-radius: 6px; position: relative;40 }41 .battery-shape:after {42 content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 20px; background: #333; border-radius: 2px;43 }44 .battery-level {45 position: absolute; left: 3px; top: 3px; height: 28px; width: 52px; background: #4caf50; border-radius: 3px;46 }47 48 /* Search section */49 .search-section { padding: 20px 40px 10px; }50 .search-pill {51 background: #fff;52 border-radius: 60px;53 box-shadow: 0 6px 20px rgba(0,0,0,0.12);54 display: flex;55 align-items: center;56 gap: 28px;57 padding: 26px 34px;58 }59 .search-icon { width: 52px; height: 52px; color: #222; }60 .search-text .title { font-size: 44px; font-weight: 700; line-height: 1.2; }61 .search-text .subtitle { font-size: 32px; color: #6f6f6f; margin-top: 4px; }62 .filter-circle {63 margin-left: auto;64 width: 94px; height: 94px; background: #f6f6f6; border-radius: 50%;65 display: flex; align-items: center; justify-content: center;66 border: 1px solid #e0e0e0;67 }68 .filter-icon { width: 46px; height: 46px; color: #444; }69 70 /* Categories */71 .categories {72 display: flex;73 align-items: center;74 gap: 50px;75 padding: 24px 40px 10px;76 border-bottom: 1px solid #eee;77 }78 .cat {79 display: flex; flex-direction: column; align-items: center; justify-content: center;80 gap: 12px;81 color: #777;82 }83 .cat svg { width: 64px; height: 64px; }84 .cat span { font-size: 30px; }85 .cat.active { color: #222; }86 .cat.active span { font-weight: 700; }87 .cat.active:after {88 content: ""; width: 80px; height: 8px; background: #222; border-radius: 6px; margin-top: 14px;89 }90 91 /* Toggle row */92 .toggle-row {93 margin: 24px 40px 20px;94 padding: 24px 30px;95 border: 1px solid #e5e5e5;96 border-radius: 26px;97 display: flex; align-items: center; justify-content: space-between;98 }99 .toggle-row span { font-size: 40px; font-weight: 700; }100 .switch {101 width: 170px; height: 90px;102 border-radius: 45px;103 background: #cfcfcf;104 position: relative;105 }106 .switch.off .knob {107 position: absolute; left: 8px; top: 8px; width: 74px; height: 74px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.2);108 }109 110 /* Listing card */111 .listing-card { padding: 24px 40px; }112 .card-image {113 position: relative;114 width: 100%;115 height: 860px;116 background: #E0E0E0;117 border: 1px solid #BDBDBD;118 border-radius: 28px;119 display: flex; align-items: center; justify-content: center;120 color: #757575; font-size: 36px; text-align: center;121 }122 .heart-btn {123 position: absolute; right: 28px; top: 28px;124 width: 90px; height: 90px; border-radius: 50%;125 background: rgba(255,255,255,0.95);126 display: flex; align-items: center; justify-content: center;127 box-shadow: 0 4px 14px rgba(0,0,0,0.12);128 }129 .heart-btn svg { width: 48px; height: 48px; color: #333; }130 .dots {131 display: flex; align-items: center; justify-content: center; gap: 14px;132 margin-top: -40px; /* overlay near bottom of image */133 position: relative;134 }135 .dot { width: 18px; height: 18px; border-radius: 50%; background: #ddd; }136 .dot.active { background: #999; }137 138 .listing-info { margin-top: 30px; }139 .listing-title { font-size: 48px; font-weight: 800; }140 .listing-meta { font-size: 34px; color: #6f6f6f; margin-top: 8px; }141 .listing-meta + .listing-meta { margin-top: 6px; }142 .price { margin-top: 18px; font-size: 46px; font-weight: 800; }143 .price .night { font-weight: 500; color: #444; }144 145 /* Floating map pill */146 .map-pill {147 position: absolute;148 left: 50%;149 transform: translateX(-50%);150 top: 1530px;151 background: #222;152 color: #fff;153 padding: 26px 40px;154 border-radius: 60px;155 display: flex; align-items: center; gap: 20px;156 box-shadow: 0 6px 16px rgba(0,0,0,0.25);157 font-size: 42px; font-weight: 700;158 }159 .map-icon { width: 48px; height: 48px; color: #fff; }160 161 /* Next card preview */162 .next-card {163 margin: 24px 40px 260px;164 }165 .next-card .card-image {166 height: 320px; border-radius: 28px;167 }168 169 /* Bottom navigation */170 .bottom-nav {171 position: absolute; bottom: 0; left: 0; right: 0;172 height: 180px;173 border-top: 1px solid #eaeaea;174 background: #fff;175 display: flex; align-items: center; justify-content: space-around;176 }177 .nav-item {178 display: flex; flex-direction: column; align-items: center; gap: 12px;179 color: #777;180 font-size: 28px;181 }182 .nav-item svg { width: 64px; height: 64px; }183 .nav-item.active { color: #E31837; font-weight: 800; }184 .inbox-dot {185 position: absolute; top: 24px; right: 90px;186 width: 22px; height: 22px; background: #E31837; border-radius: 50%;187 }188</style>189</head>190<body>191<div id="render-target">192 193 <!-- Status Bar -->194 <div class="status-bar">195 <div class="status-left">3:37</div>196 <div class="status-right">197 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#777"/></svg>198 <svg class="status-icon" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" fill="#999"/></svg>199 <svg class="status-icon" viewBox="0 0 24 24"><path d="M4 12h16" stroke="#777" stroke-width="3"/><path d="M12 4v16" stroke="#777" stroke-width="3"/></svg>200 <div class="battery">201 <div class="battery-shape"><div class="battery-level"></div></div>202 <div>97%</div>203 </div>204 </div>205 </div>206 207 <!-- Search Section -->208 <div class="search-section">209 <div class="search-pill">210 <svg class="search-icon" viewBox="0 0 24 24">211 <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" fill="none"/>212 <path d="M20 20l-4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>213 </svg>214 <div class="search-text">215 <div class="title">Where to?</div>216 <div class="subtitle">Anywhere · Any week · Add guests</div>217 </div>218 <div class="filter-circle">219 <svg class="filter-icon" viewBox="0 0 24 24">220 <path d="M4 6h16M7 12h10M9 18h6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>221 </svg>222 </div>223 </div>224 </div>225 226 <!-- Categories Row -->227 <div class="categories">228 <div class="cat active">229 <svg viewBox="0 0 24 24">230 <path d="M12 5c4 0 7 2 7 5H5c0-3 3-5 7-5z" fill="currentColor"/>231 <path d="M12 10v7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>232 </svg>233 <span>Beach</span>234 </div>235 <div class="cat">236 <svg viewBox="0 0 24 24">237 <path d="M6 10l6-5 6 5v8H6z" stroke="currentColor" stroke-width="2" fill="none"/>238 <path d="M3 20c2-1 4-1 6 0s4 1 6 0 4-1 6 0" stroke="currentColor" stroke-width="2" fill="none"/>239 </svg>240 <span>Lakefront</span>241 </div>242 <div class="cat">243 <svg viewBox="0 0 24 24">244 <path d="M5 18c2-1 4-1 6 0s4 1 6 0" stroke="currentColor" stroke-width="2" fill="none"/>245 <path d="M8 12l2-6 2 4 3-2 1 4" stroke="currentColor" stroke-width="2" fill="none"/>246 </svg>247 <span>Beachfront</span>248 </div>249 <div class="cat">250 <svg viewBox="0 0 24 24">251 <path d="M3 18l7-10 5 7 6-4-3 7H3z" fill="none" stroke="currentColor" stroke-width="2"/>252 </svg>253 <span>Amazing views</span>254 </div>255 <div class="cat">256 <svg viewBox="0 0 24 24">257 <rect x="4" y="8" width="16" height="10" rx="2" ry="2" stroke="currentColor" stroke-width="2" fill="none"/>258 <path d="M12 4v4" stroke="currentColor" stroke-width="2"/>259 </svg>260 <span>Historical</span>261 </div>262 </div>263 264 <!-- Toggle Row -->265 <div class="toggle-row">266 <span>Display total before taxes</span>267 <div class="switch off"><div class="knob"></div></div>268 </div>269 270 <!-- Listing Card -->271 <div class="listing-card">272 <div class="card-image">273 [IMG: Aerial coastal fort and sea view]274 <div class="heart-btn">275 <svg viewBox="0 0 24 24">276 <path d="M12 21s-7-4.6-9-8.4C1 9.2 3.2 6 6.5 6c2 0 3.3 1.2 5.5 3.2C14.2 7.2 15.5 6 17.5 6 20.8 6 23 9.2 21 12.6 19 16.4 12 21 12 21z" fill="currentColor"/>277 </svg>278 </div>279 </div>280 <div class="dots">281 <div class="dot"></div>282 <div class="dot active"></div>283 <div class="dot"></div>284 <div class="dot"></div>285 <div class="dot"></div>286 </div>287 <div class="listing-info">288 <div class="listing-title">Tiracol, India</div>289 <div class="listing-meta">374 kilometers away</div>290 <div class="listing-meta">Nov 1 – 6</div>291 <div class="price">$168 <span class="night">night</span></div>292 </div>293 </div>294 295 <!-- Floating Map Button -->296 <div class="map-pill">297 <svg class="map-icon" viewBox="0 0 24 24">298 <path d="M4 6l6-2 6 2 4-1v13l-6 2-6-2-4 1V6z" fill="none" stroke="currentColor" stroke-width="2"/>299 </svg>300 Map301 </div>302 303 <!-- Next Card Preview (partial) -->304 <div class="next-card">305 <div class="card-image">306 [IMG: Tropical trees preview]307 <div class="heart-btn">308 <svg viewBox="0 0 24 24">309 <path d="M12 21s-7-4.6-9-8.4C1 9.2 3.2 6 6.5 6c2 0 3.3 1.2 5.5 3.2C14.2 7.2 15.5 6 17.5 6 20.8 6 23 9.2 21 12.6 19 16.4 12 21 12 21z" fill="currentColor"/>310 </svg>311 </div>312 </div>313 </div>314 315 <!-- Bottom Navigation -->316 <div class="bottom-nav">317 <div class="nav-item active">318 <svg viewBox="0 0 24 24">319 <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" fill="none"/>320 <path d="M20 20l-4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>321 </svg>322 <div>Explore</div>323 </div>324 <div class="nav-item">325 <svg viewBox="0 0 24 24">326 <path d="M12 21s-7-4.6-9-8.4C1 9.2 3.2 6 6.5 6c2 0 3.3 1.2 5.5 3.2C14.2 7.2 15.5 6 17.5 6 20.8 6 23 9.2 21 12.6 19 16.4 12 21 12 21z" fill="currentColor"/>327 </svg>328 <div>Wishlists</div>329 </div>330 <div class="nav-item">331 <svg viewBox="0 0 24 24">332 <path d="M12 3l5 5-5 5-5-5 5-5z" fill="none" stroke="currentColor" stroke-width="2"/>333 <path d="M5 20h14" stroke="currentColor" stroke-width="2"/>334 </svg>335 <div>Trips</div>336 </div>337 <div class="nav-item" style="position: relative;">338 <svg viewBox="0 0 24 24">339 <path d="M4 5h16v10H13l-3 4v-4H4z" fill="none" stroke="currentColor" stroke-width="2"/>340 </svg>341 <div>Inbox</div>342 <div class="inbox-dot"></div>343 </div>344 <div class="nav-item">345 <svg viewBox="0 0 24 24">346 <circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="2" fill="none"/>347 <path d="M4 20c2-4 6-6 8-6s6 2 8 6" stroke="currentColor" stroke-width="2" fill="none"/>348 </svg>349 <div>Profile</div>350 </div>351 </div>352 353</div>354</body>355</html>