GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Honolulu Listings UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FFFFFF;15 }16 17 /* Top header */18 .safe-area { height: 80px; }19 .header {20 height: 120px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 padding: 0 36px;25 }26 .header-title {27 font-size: 46px;28 font-weight: 600;29 color: #111;30 }31 .icon-btn {32 width: 72px;33 height: 72px;34 border-radius: 36px;35 display: flex;36 align-items: center;37 justify-content: center;38 color: #111;39 }40 .icon {41 width: 48px; height: 48px;42 }43 44 /* Filter chips */45 .filters {46 display: flex;47 gap: 24px;48 padding: 20px 36px 26px 36px;49 }50 .chip {51 border: 2px solid #DADADA;52 border-radius: 48px;53 padding: 20px 34px;54 font-size: 34px;55 color: #222;56 background: #fff;57 display: inline-flex;58 align-items: center;59 gap: 18px;60 box-shadow: 0 1px 0 rgba(0,0,0,0.05);61 }62 .chip.black {63 background: #000;64 color: #fff;65 border-color: #000;66 padding: 20px 34px;67 font-weight: 600;68 }69 .chip .small-icon { width: 40px; height: 40px; }70 .chip.light {71 background: #f8f8f8;72 }73 74 /* Hero image */75 .hero-img {76 width: 1080px;77 height: 520px;78 background: #E0E0E0;79 border: 1px solid #BDBDBD;80 display: flex;81 align-items: center;82 justify-content: center;83 color: #757575;84 font-size: 34px;85 position: relative;86 }87 .carousel-dots {88 position: absolute;89 bottom: 26px;90 left: 0; right: 0;91 display: flex;92 justify-content: center;93 gap: 16px;94 }95 .carousel-dots span {96 width: 18px; height: 18px; border-radius: 9px;97 background: rgba(255,255,255,0.85);98 border: 1px solid rgba(0,0,0,0.1);99 }100 .carousel-dots span.inactive {101 background: rgba(255,255,255,0.6);102 }103 104 /* Card details */105 .card {106 padding: 34px 36px;107 }108 .tag {109 display: inline-block;110 padding: 12px 18px;111 border: 2px solid #111;112 border-radius: 14px;113 font-size: 28px;114 font-weight: 700;115 margin-bottom: 24px;116 }117 .title {118 font-size: 46px;119 font-weight: 700;120 color: #111;121 line-height: 1.25;122 margin-bottom: 22px;123 }124 .rating-row {125 display: flex;126 align-items: center;127 gap: 14px;128 margin-bottom: 12px;129 }130 .dot {131 width: 26px; height: 26px; border-radius: 13px; background: #17B77F;132 box-shadow: inset 0 0 0 2px rgba(0,0,0,0.08);133 }134 .rating-count {135 font-size: 30px; color: #333; margin-left: 10px;136 }137 .location { font-size: 32px; color: #555; margin-top: 6px; }138 .link-row {139 margin-top: 24px; font-size: 34px; color: #2E2E2E;140 }141 .link-row a { color: #2E2E2E; text-decoration: underline; }142 .price { font-size: 48px; font-weight: 700; margin-top: 26px; color: #111; }143 .provider { font-size: 32px; color: #555; margin-top: 8px; }144 145 .cta {146 position: absolute;147 right: 36px;148 bottom: 80px;149 background: #E1B400;150 color: #111;151 border-radius: 40px;152 padding: 24px 40px;153 font-size: 34px;154 font-weight: 700;155 box-shadow: 0 2px 0 rgba(0,0,0,0.1);156 }157 158 .divider { height: 18px; background: #EFEFEF; margin: 10px 0 0 0; }159 160 /* Second card */161 .second-img {162 width: 1080px;163 height: 500px;164 background: #E0E0E0;165 border: 1px solid #BDBDBD;166 display: flex; align-items: center; justify-content: center;167 color: #757575; font-size: 34px; position: relative;168 }169 .favorite {170 position: absolute; right: 26px; top: 26px;171 width: 90px; height: 90px; border-radius: 45px; background: #fff;172 box-shadow: 0 2px 8px rgba(0,0,0,0.15);173 display: flex; align-items: center; justify-content: center;174 }175 .award {176 position: absolute; left: 26px; bottom: 26px;177 background: #17B77F; color: #072; font-weight: 800;178 font-size: 26px; padding: 14px 18px; border-radius: 16px;179 }180 .second-title {181 padding: 24px 36px;182 font-size: 44px; font-weight: 700; color: #111;183 }184 185 /* Bottom nav */186 .bottom-nav {187 position: absolute;188 left: 0; right: 0; bottom: 0;189 height: 240px; background: #fff; border-top: 1px solid #E5E5E5;190 display: flex; align-items: flex-start; justify-content: space-around;191 padding-top: 24px;192 }193 .nav-item {194 display: flex; flex-direction: column; align-items: center; gap: 12px;195 color: #777; font-size: 30px;196 }197 .nav-item .nav-icon { width: 56px; height: 56px; }198 .nav-item.active { color: #111; }199 .nav-item.active .underline {200 width: 200px; height: 8px; background: #17B77F; border-radius: 4px; margin-top: 6px;201 }202 .home-indicator {203 position: absolute; left: 50%; transform: translateX(-50%);204 bottom: 20px; width: 380px; height: 10px; background: #BDBDBD; border-radius: 5px;205 }206</style>207</head>208<body>209<div id="render-target">210 211 <div class="safe-area"></div>212 213 <div class="header">214 <div class="icon-btn">215 <svg class="icon" viewBox="0 0 24 24">216 <path d="M15 3 L6 12 L15 21" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>217 </svg>218 </div>219 <div class="header-title">Honolulu</div>220 <div class="icon-btn">221 <svg class="icon" viewBox="0 0 24 24">222 <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2.5" fill="none"/>223 <line x1="18" y1="18" x2="22" y2="22" stroke="#111" stroke-width="2.5" stroke-linecap="round"/>224 </svg>225 </div>226 </div>227 228 <div class="filters">229 <div class="chip black">Map</div>230 <div class="chip">231 Jan 24232 <svg class="small-icon" viewBox="0 0 24 24">233 <path d="M3 12 H21 M14 7 L21 12 L14 17" stroke="#111" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>234 </svg>235 29236 </div>237 <div class="chip">238 <svg class="small-icon" viewBox="0 0 24 24">239 <circle cx="12" cy="8" r="4" stroke="#111" stroke-width="2.2" fill="none"/>240 <path d="M4 22 C4 16 20 16 20 22" stroke="#111" stroke-width="2.2" fill="none" stroke-linecap="round"/>241 </svg>242 1243 </div>244 <div class="chip light">245 <svg class="small-icon" viewBox="0 0 24 24">246 <line x1="4" y1="6" x2="20" y2="6" stroke="#111" stroke-width="2"/>247 <circle cx="10" cy="6" r="2.5" fill="#111"/>248 <line x1="4" y1="12" x2="20" y2="12" stroke="#111" stroke-width="2"/>249 <circle cx="15" cy="12" r="2.5" fill="#111"/>250 <line x1="4" y1="18" x2="20" y2="18" stroke="#111" stroke-width="2"/>251 <circle cx="7" cy="18" r="2.5" fill="#111"/>252 </svg>253 Filters254 </div>255 </div>256 257 <div class="hero-img">258 [IMG: Waikiki beachfront resort photo]259 <div class="carousel-dots">260 <span></span><span class="inactive"></span><span class="inactive"></span><span class="inactive"></span>261 </div>262 </div>263 264 <div class="card" style="position: relative;">265 <div class="tag">BEST SELLER</div>266 <div class="title">1. Hilton Hawaiian Village Waikiki Beach Resort</div>267 268 <div class="rating-row">269 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>270 <div class="rating-count">19,836</div>271 </div>272 <div class="location">Waikiki</div>273 274 <div class="link-row"><a href="#">Visit website ↗</a></div>275 <div class="price">$313</div>276 <div class="provider">Booking.com ↗</div>277 278 <div class="cta">View deal</div>279 </div>280 281 <div class="divider"></div>282 283 <div class="second-img">284 [IMG: Waikiki beach with hotels and ocean]285 <div class="favorite">286 <svg viewBox="0 0 24 24" class="icon">287 <path d="M12 21 C-2 12 6 4 12 9 C18 4 26 12 12 21" stroke="#111" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>288 </svg>289 </div>290 <div class="award">2023</div>291 <div class="carousel-dots">292 <span></span><span class="inactive"></span><span class="inactive"></span><span class="inactive"></span>293 </div>294 </div>295 296 <div class="second-title">2. OUTRIGGER Waikiki Beach Resort</div>297 298 <div class="bottom-nav">299 <div class="nav-item">300 <svg class="nav-icon" viewBox="0 0 24 24">301 <path d="M3 11 L12 4 L21 11 V21 H3 Z" stroke="#666" stroke-width="2" fill="none" stroke-linejoin="round"/>302 </svg>303 <div>Explore</div>304 </div>305 <div class="nav-item">306 <svg class="nav-icon" viewBox="0 0 24 24">307 <circle cx="11" cy="11" r="7" stroke="#666" stroke-width="2" fill="none"/>308 <line x1="18" y1="18" x2="22" y2="22" stroke="#666" stroke-width="2" stroke-linecap="round"/>309 </svg>310 <div>Search</div>311 </div>312 <div class="nav-item active">313 <svg class="nav-icon" viewBox="0 0 24 24">314 <path d="M12 21 C-2 12 6 4 12 9 C18 4 26 12 12 21" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>315 </svg>316 <div>Plan</div>317 <div class="underline"></div>318 </div>319 <div class="nav-item">320 <svg class="nav-icon" viewBox="0 0 24 24">321 <path d="M5 4 H19 V6 H5 Z M7 10 H17 V20 H7 Z" stroke="#666" stroke-width="2" fill="none" stroke-linejoin="round"/>322 </svg>323 <div>Review</div>324 </div>325 <div class="nav-item">326 <svg class="nav-icon" viewBox="0 0 24 24">327 <circle cx="12" cy="8" r="4" stroke="#666" stroke-width="2" fill="none"/>328 <path d="M4 22 C4 16 20 16 20 22" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>329 </svg>330 <div>Account</div>331 </div>332 <div class="home-indicator"></div>333 </div>334 335</div>336</body>337</html>