GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Honolulu - Hotels</title>7<style>8 body { margin:0; padding:0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:#111; }9 #render-target {10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background:#ffffff;13 }14 15 .statusbar {16 height:86px; padding:0 32px;17 display:flex; align-items:center; justify-content:space-between;18 font-size:38px; color:#000;19 }20 .status-icons { display:flex; align-items:center; gap:20px; }21 .dot { width:18px; height:18px; background:#777; border-radius:50%; opacity:.6; }22 .battery { width:42px; height:22px; border:3px solid #000; border-radius:6px; position:relative; }23 .battery::after { content:""; position:absolute; right:-8px; top:6px; width:6px; height:10px; background:#000; border-radius:2px; }24 .battery .level { position:absolute; left:3px; top:3px; height:14px; width:26px; background:#000; border-radius:3px; }25 26 .header {27 height:120px; padding:0 32px; position:relative;28 display:flex; align-items:center; justify-content:space-between;29 }30 .header .title {31 position:absolute; left:50%; transform:translateX(-50%);32 font-size:48px; font-weight:700;33 }34 .icon-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; }35 .icon { width:48px; height:48px; }36 37 .tabs { display:flex; gap:60px; padding:8px 32px 0 32px; align-items:flex-end; }38 .tab { font-size:40px; color:#333; }39 .tab.active { font-weight:700; color:#000; position:relative; }40 .tab.active::after {41 content:""; position:absolute; left:0; right:0; bottom:-26px; height:8px;42 background:#000; border-radius:4px;43 }44 45 .filters { display:flex; gap:22px; padding:40px 32px 18px; }46 .chip {47 height:90px; padding:0 34px; border-radius:45px; border:2px solid #222;48 display:flex; align-items:center; gap:14px; font-size:36px; font-weight:600; color:#111; background:#fff;49 }50 .chip.black { background:#000; color:#fff; border-color:#000; }51 .chip.light { background:#f2f2f2; border-color:#ddd; font-weight:500; color:#444; }52 53 .infoRow {54 display:flex; align-items:flex-start; justify-content:space-between;55 padding:20px 32px 0;56 font-size:34px; color:#222;57 }58 .infoRow a { color:#111; text-decoration:underline; }59 .info-circle {60 width:44px; height:44px; border:2px solid #444; border-radius:50%;61 display:flex; align-items:center; justify-content:center; font-weight:700; font-size:28px; color:#444;62 }63 64 .card { margin-top:22px; }65 .image-wrap { position:relative; margin:0 0 0 0; }66 .img-placeholder {67 width:100%; height:720px;68 background:#E0E0E0; border:1px solid #BDBDBD;69 display:flex; align-items:center; justify-content:center; color:#757575; font-size:40px; font-weight:600;70 }71 .heart-circle {72 position:absolute; right:22px; top:22px;73 width:92px; height:92px; background:#fff; border-radius:46px;74 box-shadow:0 2px 8px rgba(0,0,0,.15);75 display:flex; align-items:center; justify-content:center;76 }77 .badge {78 position:absolute; left:22px; bottom:22px;79 background:#00c1a6; color:#000; font-weight:800; font-size:28px;80 padding:16px 22px; border-radius:18px;81 }82 .carousel-dots {83 position:absolute; left:50%; transform:translateX(-50%);84 bottom:28px; display:flex; gap:14px;85 }86 .carousel-dots .dot {87 width:16px; height:16px; background:#fff; opacity:.9; border-radius:8px; border:1px solid #ccc;88 }89 .carousel-dots .dot.active { background:#666; border-color:#666; }90 91 .cardContent { padding:28px 32px 12px; }92 .sponsored {93 display:inline-block; background:#efefef; color:#666; border-radius:22px;94 padding:10px 18px; font-size:30px; font-weight:700;95 margin-bottom:14px;96 }97 .hotel-title { font-size:46px; font-weight:800; margin:14px 0 18px; }98 .rating { display:flex; align-items:center; gap:16px; margin-bottom:18px; }99 .rating .bubble { width:28px; height:28px; background:#11aa58; border-radius:50%; }100 .rating .count { font-size:32px; color:#444; }101 .desc { font-size:34px; color:#333; line-height:1.4; margin-bottom:16px; }102 .link { font-size:36px; color:#1a1a1a; text-decoration:underline; font-weight:700; margin:18px 0; }103 .priceRow { display:flex; align-items:center; justify-content:space-between; margin:16px 0 8px; }104 .price { font-size:58px; font-weight:800; }105 .deal-btn {106 background:#d7a600; color:#000; font-weight:800; font-size:36px;107 border:none; border-radius:40px; padding:24px 44px;108 box-shadow:0 2px 8px rgba(0,0,0,.1);109 }110 .vendor { font-size:34px; color:#444; }111 .vendor .brand { font-weight:600; }112 .muted { color:#777; }113 114 .divider { height:22px; background:#f5f5f5; margin:12px 0; }115 116 .banner-wrap { position:relative; }117 .banner {118 width:100%; height:260px;119 background:#E0E0E0; border:1px solid #BDBDBD;120 display:flex; align-items:center; justify-content:center; color:#757575; font-size:34px; font-weight:600;121 }122 .banner .heart-circle { right:22px; top:22px; width:84px; height:84px; }123 124 .nav {125 position:absolute; left:0; bottom:0;126 width:100%; height:220px; background:#fff; border-top:1px solid #e6e6e6;127 display:flex; align-items:center; justify-content:space-around;128 }129 .nav-item { display:flex; flex-direction:column; align-items:center; gap:16px; color:#666; font-size:34px; }130 .nav-item.active { color:#111; font-weight:700; }131 .nav-icon { width:52px; height:52px; }132 .active-bar {133 position:absolute; bottom:150px; left:50%; transform:translateX(-50%);134 width:140px; height:8px; background:#0ead7e; border-radius:4px;135 }136 .gesture {137 position:absolute; bottom:230px; left:50%; transform:translateX(-50%);138 width:320px; height:16px; background:#bdbdbd; border-radius:10px; opacity:.7;139 }140</style>141</head>142<body>143<div id="render-target">144 145 <!-- Status bar -->146 <div class="statusbar">147 <div>1:01</div>148 <div class="status-icons">149 <div class="dot"></div>150 <div class="dot"></div>151 <div class="dot"></div>152 <div class="battery"><div class="level"></div></div>153 </div>154 </div>155 156 <!-- Header -->157 <div class="header">158 <div class="icon-btn">159 <svg class="icon" viewBox="0 0 48 48">160 <path d="M30 10 L14 24 L30 38" fill="none" stroke="#000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>161 </svg>162 </div>163 <div class="title">Honolulu</div>164 <div class="icon-btn">165 <svg class="icon" viewBox="0 0 48 48">166 <circle cx="21" cy="21" r="14" fill="none" stroke="#000" stroke-width="4"/>167 <line x1="33" y1="33" x2="44" y2="44" stroke="#000" stroke-width="4" stroke-linecap="round"/>168 </svg>169 </div>170 </div>171 172 <!-- Tabs -->173 <div class="tabs">174 <div class="tab">Overview</div>175 <div class="tab active">Hotels</div>176 <div class="tab">Things to do</div>177 <div class="tab">Restaurants</div>178 </div>179 180 <!-- Filter chips -->181 <div class="filters">182 <div class="chip black">183 <svg class="icon" viewBox="0 0 48 48">184 <path d="M24 6c7 0 12 5 12 12 0 9-12 24-12 24S12 27 12 18c0-7 5-12 12-12z" fill="#fff"/>185 <circle cx="24" cy="18" r="5" fill="#000"/>186 </svg>187 <span>Map</span>188 </div>189 <div class="chip">190 <span>Jan 24 → 29</span>191 </div>192 <div class="chip">193 <svg class="icon" viewBox="0 0 48 48">194 <circle cx="18" cy="18" r="6" fill="#000"/>195 <circle cx="30" cy="24" r="5" fill="#000" opacity=".8"/>196 <path d="M10 34c4-8 16-8 20 0" stroke="#000" stroke-width="4" fill="none" stroke-linecap="round"/>197 </svg>198 <span>1</span>199 </div>200 <div class="chip light">201 <svg class="icon" viewBox="0 0 48 48">202 <line x1="10" y1="14" x2="38" y2="14" stroke="#666" stroke-width="4" stroke-linecap="round"/>203 <circle cx="20" cy="14" r="4" fill="#666"/>204 <line x1="10" y1="24" x2="38" y2="24" stroke="#666" stroke-width="4" stroke-linecap="round"/>205 <circle cx="30" cy="24" r="4" fill="#666"/>206 <line x1="10" y1="34" x2="38" y2="34" stroke="#666" stroke-width="4" stroke-linecap="round"/>207 <circle cx="16" cy="34" r="4" fill="#666"/>208 </svg>209 <span>Filters</span>210 </div>211 </div>212 213 <!-- Availability info -->214 <div class="infoRow">215 <div>167 of 190 places are available, sorted by <a href="#">best value</a></div>216 <div class="info-circle">i</div>217 </div>218 219 <!-- Hotel card -->220 <div class="card">221 <div class="image-wrap">222 <div class="img-placeholder">[IMG: Hotel interior with yellow wall and plants]</div>223 <div class="heart-circle">224 <svg class="icon" viewBox="0 0 48 48">225 <path d="M24 40s-14-9-14-18c0-6 6-10 12-6 6-4 12 0 12 6 0 9-10 18-10 18z" fill="none" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>226 </svg>227 </div>228 <div class="badge">2023</div>229 <div class="carousel-dots">230 <div class="dot active"></div>231 <div class="dot"></div>232 <div class="dot"></div>233 </div>234 </div>235 236 <div class="cardContent">237 <div class="sponsored">Sponsored</div>238 <div class="hotel-title">Vive Hotel Waikiki</div>239 240 <div class="rating">241 <div class="bubble"></div>242 <div class="bubble"></div>243 <div class="bubble"></div>244 <div class="bubble"></div>245 <div class="bubble"></div>246 <div class="count">5,048</div>247 </div>248 249 <div class="desc">Free breakfast included<br>Waikiki</div>250 251 <div class="link">Visit website ↗</div>252 253 <div class="priceRow">254 <div class="price">$264</div>255 <button class="deal-btn">View deal</button>256 </div>257 258 <div class="vendor"><span class="brand">Expedia.com</span> ↗</div>259 <div class="vendor muted">Free cancellation</div>260 </div>261 </div>262 263 <div class="divider"></div>264 265 <!-- Next card preview -->266 <div class="banner-wrap">267 <div class="banner">[IMG: Honolulu skyline at sunset]</div>268 <div class="heart-circle" style="box-shadow:0 2px 8px rgba(0,0,0,.15);">269 <svg class="icon" viewBox="0 0 48 48">270 <path d="M24 40s-14-9-14-18c0-6 6-10 12-6 6-4 12 0 12 6 0 9-10 18-10 18z" fill="none" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>271 </svg>272 </div>273 </div>274 275 <!-- Active underline indicator for "Plan" -->276 <div class="active-bar"></div>277 278 <!-- Bottom gesture bar -->279 <div class="gesture"></div>280 281 <!-- Bottom navigation -->282 <div class="nav">283 <div class="nav-item">284 <svg class="nav-icon" viewBox="0 0 52 52">285 <path d="M8 28 L26 12 L44 28 V44 H32 V32 H20 V44 H8z" fill="none" stroke="#666" stroke-width="3" stroke-linejoin="round"/>286 </svg>287 <div>Explore</div>288 </div>289 <div class="nav-item">290 <svg class="nav-icon" viewBox="0 0 52 52">291 <circle cx="22" cy="22" r="12" fill="none" stroke="#666" stroke-width="3"/>292 <line x1="32" y1="32" x2="46" y2="46" stroke="#666" stroke-width="3" stroke-linecap="round"/>293 </svg>294 <div>Search</div>295 </div>296 <div class="nav-item active">297 <svg class="nav-icon" viewBox="0 0 52 52">298 <path d="M26 44s-16-10-16-20c0-7 7-12 13-7 6-5 13 0 13 7 0 10-10 20-10 20z" fill="none" stroke="#111" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>299 </svg>300 <div>Plan</div>301 </div>302 <div class="nav-item">303 <svg class="nav-icon" viewBox="0 0 52 52">304 <path d="M10 40 L42 40" stroke="#666" stroke-width="3" stroke-linecap="round"/>305 <path d="M14 34 L38 34" stroke="#666" stroke-width="3" stroke-linecap="round"/>306 <path d="M18 12 L34 12 L32 28 H20 L18 12z" fill="none" stroke="#666" stroke-width="3" stroke-linejoin="round"/>307 </svg>308 <div>Review</div>309 </div>310 <div class="nav-item">311 <svg class="nav-icon" viewBox="0 0 52 52">312 <circle cx="26" cy="18" r="10" fill="none" stroke="#666" stroke-width="3"/>313 <path d="M8 46c2-10 16-10 18-10s16 0 18 10" stroke="#666" stroke-width="3" fill="none" stroke-linecap="round"/>314 </svg>315 <div>Account</div>316 </div>317 </div>318 319</div>320</body>321</html>