GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Hotel Listings - HNL</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #F6F7F9; color: #202124;11 }12 13 /* Top app bar */14 .appbar {15 padding: 28px 32px 16px 24px;16 background: #FFFFFF;17 box-shadow: 0 1px 0 rgba(0,0,0,0.06);18 }19 .appbar-row {20 display: flex; align-items: center; justify-content: space-between;21 }22 .left-row { display: flex; align-items: center; gap: 20px; }23 .title { font-size: 44px; font-weight: 700; }24 .subtitle { color: #5f6368; font-size: 30px; margin-top: 6px; }25 .r-icons { display: flex; align-items: center; gap: 28px; color:#5f6368; }26 .icon-btn { width: 52px; height: 52px; display:flex; align-items:center; justify-content:center; }27 28 /* Filter chips */29 .chip-row {30 background: #FFFFFF; padding: 22px 16px 26px; display: flex; gap: 18px; overflow: hidden;31 border-bottom: 1px solid rgba(0,0,0,0.06);32 }33 .chip {34 background:#fff; padding: 22px 28px; border-radius: 18px; border: 3px solid #E0E0E0; min-width: 240px;35 line-height: 1.1;36 }37 .chip strong { display:block; font-size:36px; }38 .chip span { display:block; color:#5f6368; font-size:26px; margin-top:6px; }39 .chip.active { border-color:#202124; box-shadow: 0 2px 0 #202124 inset; }40 41 /* Cards */42 .list { padding-top: 14px; }43 .card {44 width: 1004px; margin: 18px auto; border-radius: 28px; background:#fff;45 box-shadow: 0 8px 24px rgba(0,0,0,0.08); display:flex; overflow:hidden;46 }47 .card-img {48 width: 360px; height: 540px; position: relative; background:#E0E0E0; border-right:1px solid #BDBDBD;49 display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px; text-align:center;50 }51 .img-overlay-heart {52 position:absolute; top:16px; left:16px; width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,0.85);53 display:flex; align-items:center; justify-content:center;54 }55 .img-dots {56 position:absolute; left:22px; bottom:18px; display:flex; gap:10px;57 }58 .img-dot { width:22px; height:22px; border-radius:50%; background:#FFFFFF; opacity:0.9; }59 .img-dot.dim { background:#D0D0D0; }60 61 .card-body { flex:1; padding:28px 28px 24px; position: relative; }62 .badge {63 display:inline-block; padding:10px 16px; background:#EEF1F4; color:#202124; border-radius:10px; font-weight:600; font-size:26px;64 margin-bottom:14px;65 }66 .hotel-title { font-size:40px; font-weight:800; line-height:1.2; margin: 6px 0 8px; }67 .rating-row { display:flex; align-items:center; gap:14px; color:#202124; margin: 4px 0 6px; }68 .rating-row .label { color:#5f6368; font-size:28px; }69 .location { color:#5f6368; font-size:28px; margin: 6px 0 14px; }70 71 .bullet { display:flex; align-items:flex-start; gap:12px; color:#5f6368; font-size:26px; margin: 10px 0; }72 .bullet .note { color:#6C4DFF; font-weight:700; }73 74 .price-area { margin-top: 16px; }75 .price { color:#6C4DFF; font-size:56px; font-weight:800; line-height:1; }76 .old { color:#8b8f93; text-decoration: line-through; font-size:30px; margin-top:6px; }77 .sites { color:#8b8f93; font-size:26px; margin-top:2px; }78 79 .cta {80 position:absolute; right:28px; bottom:28px; padding:22px 34px; border-radius:16px;81 background: linear-gradient(135deg, #FF7A18, #FF3D00); color:#fff; font-weight:700; font-size:32px; border:none;82 }83 84 /* sticky bottom action bar */85 .sticky {86 position:absolute; left:120px; right:120px; bottom:160px; background:#2E343B; color:#fff;87 border-radius:24px; box-shadow: 0 12px 24px rgba(0,0,0,0.25); display:flex; padding:22px; gap:18px; align-items:center;88 }89 .sticky .pill {90 flex:1; display:flex; align-items:center; gap:18px; justify-content:center; background:#394049; padding:18px 16px;91 border-radius:18px; font-size:32px; font-weight:600;92 }93 .divider-v { width: 18px; }94 95 /* home indicator */96 .home-indicator {97 position:absolute; left:50%; transform:translateX(-50%); bottom:64px; width:360px; height:10px; background:#000;98 opacity:0.18; border-radius:10px;99 }100 101 /* Simple utility icons */102 .svg { width:36px; height:36px; }103 .star { width:28px; height:28px; fill:#202124; }104 .muted { color:#5f6368; }105</style>106</head>107<body>108<div id="render-target">109 110 <!-- Top area -->111 <div class="appbar">112 <div class="appbar-row">113 <div class="left-row">114 <div class="icon-btn">115 <svg class="svg" viewBox="0 0 24 24" fill="none" stroke="#202124" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">116 <path d="M15 5L8 12l7 7"/>117 </svg>118 </div>119 <div>120 <div class="title">HNL</div>121 <div class="subtitle">Jan 29 – Feb 5 • <svg class="svg" viewBox="0 0 24 24" fill="none" stroke="#5f6368" stroke-width="2"><path d="M3 10h18M6 10V6h12v4M5 20h14a2 2 0 0 0 2-2v-6H3v6a2 2 0 0 0 2 2z"/></svg> 1 • <svg class="svg" viewBox="0 0 24 24" fill="none" stroke="#5f6368" stroke-width="2"><path d="M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm6 8H6a6 6 0 0 1 12 0z"/></svg> 1</div>122 </div>123 </div>124 <div class="r-icons">125 <div class="icon-btn" title="Share">126 <svg class="svg" viewBox="0 0 24 24" fill="none" stroke="#5f6368" stroke-width="2">127 <circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>128 <path d="M8.7 10.9l6.6-3.8M8.7 13.1l6.6 3.8"/>129 </svg>130 </div>131 <div class="icon-btn" title="Currency">132 <svg class="svg" viewBox="0 0 24 24" fill="none" stroke="#5f6368" stroke-width="2"><path d="M12 3v18M8 7h8M8 12h8M8 17h8"/></svg>133 </div>134 <div style="font-size:28px; color:#5f6368">USD</div>135 </div>136 </div>137 </div>138 139 <!-- Chips -->140 <div class="chip-row">141 <div class="chip active">142 <strong>Recommended</strong>143 <span>$228</span>144 </div>145 <div class="chip">146 <strong>Cheapest</strong>147 <span>$48</span>148 </div>149 <div class="chip">150 <strong>Closest</strong>151 <span>$132</span>152 </div>153 <div class="chip">154 <strong>Deals</strong>155 <span>$228</span>156 </div>157 </div>158 159 <!-- Cards list -->160 <div class="list">161 162 <!-- Card 1 -->163 <div class="card">164 <div class="card-img">165 [IMG: Hotel lobby]166 <div class="img-overlay-heart">167 <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="#E9425E" stroke-width="2">168 <path d="M12 21s-6.5-4.3-9-7.8A5.5 5.5 0 0 1 12 5a5.5 5.5 0 0 1 9 8.2C18.5 16.7 12 21 12 21z"/>169 </svg>170 </div>171 <div class="img-dots">172 <div class="img-dot"></div>173 <div class="img-dot dim"></div>174 <div class="img-dot dim"></div>175 </div>176 </div>177 <div class="card-body">178 <div class="badge">Resort</div>179 <div class="hotel-title">Alohilani Resort Waikiki Beach</div>180 <div class="rating-row">181 <span>182 <svg class="star" viewBox="0 0 24 24"><path d="M12 .9l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-1L12 .9z"/></svg>183 <svg class="star" viewBox="0 0 24 24"><path d="M12 .9l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-1L12 .9z"/></svg>184 <svg class="star" viewBox="0 0 24 24"><path d="M12 .9l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-1L12 .9z"/></svg>185 <svg class="star" viewBox="0 0 24 24"><path d="M12 .9l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-1L12 .9z"/></svg>186 <svg class="star" viewBox="0 0 24 24"><path d="M12 .9l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-1L12 .9z"/></svg>187 </span>188 <span class="label">Excellent <strong>8.0</strong></span>189 </div>190 <div class="location">Waikiki</div>191 192 <div class="bullet">193 <svg class="svg" viewBox="0 0 24 24" fill="none" stroke="#5f6368" stroke-width="2"><path d="M21 15a7.5 7.5 0 0 1-15 0V6l7.5-3L21 6v9z"/><path d="M9 10h6"/></svg>194 <div>Near convention center, great view, near market</div>195 </div>196 197 <div class="bullet">198 <svg class="svg" viewBox="0 0 24 24" fill="none" stroke="#6C4DFF" stroke-width="2"><rect x="7" y="2" width="10" height="18" rx="2"/><circle cx="12" cy="18" r="1"/></svg>199 <div class="note">Mobile rate</div>200 </div>201 202 <div class="price-area">203 <div class="price">$228</div>204 <div class="old">$267</div>205 <div class="sites">13 sites</div>206 </div>207 208 <button class="cta">View deal</button>209 </div>210 </div>211 212 <!-- Card 2 -->213 <div class="card">214 <div class="card-img">215 [IMG: Pink hotel by ocean]216 <div class="img-overlay-heart">217 <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="#E9425E" stroke-width="2">218 <path d="M12 21s-6.5-4.3-9-7.8A5.5 5.5 0 0 1 12 5a5.5 5.5 0 0 1 9 8.2C18.5 16.7 12 21 12 21z"/>219 </svg>220 </div>221 <div class="img-dots">222 <div class="img-dot"></div>223 <div class="img-dot dim"></div>224 <div class="img-dot dim"></div>225 </div>226 </div>227 <div class="card-body">228 <div class="badge">Resort</div>229 <div class="hotel-title">The Royal Hawaiian, a Luxury Collection Resort, Waikiki</div>230 <div class="rating-row">231 <span>232 <svg class="star" viewBox="0 0 24 24"><path d="M12 .9l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-1L12 .9z"/></svg>233 <svg class="star" viewBox="0 0 24 24"><path d="M12 .9l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-1L12 .9z"/></svg>234 <svg class="star" viewBox="0 0 24 24"><path d="M12 .9l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-1L12 .9z"/></svg>235 <svg class="star" viewBox="0 0 24 24"><path d="M12 .9l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-1L12 .9z"/></svg>236 <svg class="star" viewBox="0 0 24 24"><path d="M12 .9l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-1L12 .9z"/></svg>237 </span>238 <span class="label">Excellent <strong>8.7</strong></span>239 </div>240 <div class="location">Waikiki</div>241 242 <div class="bullet">243 <svg class="svg" viewBox="0 0 24 24" fill="none" stroke="#5f6368" stroke-width="2"><path d="M21 15a7.5 7.5 0 0 1-15 0V6l7.5-3L21 6v9z"/><path d="M9 10h6"/></svg>244 <div>Near convention center, near shopping, beautiful beach</div>245 </div>246 247 <div class="price-area">248 <div class="price" style="color:#202124">$360</div>249 <div class="sites">13 sites</div>250 </div>251 252 <button class="cta">View deal</button>253 </div>254 </div>255 256 <!-- Card 3 -->257 <div class="card">258 <div class="card-img">259 [IMG: Hotel suite city view]260 <div class="img-overlay-heart">261 <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="#E9425E" stroke-width="2">262 <path d="M12 21s-6.5-4.3-9-7.8A5.5 5.5 0 0 1 12 5a5.5 5.5 0 0 1 9 8.2C18.5 16.7 12 21 12 21z"/>263 </svg>264 </div>265 <div class="img-dots">266 <div class="img-dot"></div>267 <div class="img-dot dim"></div>268 <div class="img-dot dim"></div>269 </div>270 </div>271 <div class="card-body">272 <div class="hotel-title">The Ritz-Carlton Residences, Waikiki Beach</div>273 <div class="rating-row">274 <span>275 <svg class="star" viewBox="0 0 24 24"><path d="M12 .9l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-1L12 .9z"/></svg>276 <svg class="star" viewBox="0 0 24 24"><path d="M12 .9l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-1L12 .9z"/></svg>277 <svg class="star" viewBox="0 0 24 24"><path d="M12 .9l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-1L12 .9z"/></svg>278 <svg class="star" viewBox="0 0 24 24"><path d="M12 .9l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-1L12 .9z"/></svg>279 <svg class="star" viewBox="0 0 24 24"><path d="M12 .9l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-1L12 .9z"/></svg>280 </span>281 <span class="label">Excellent <strong>9.0</strong></span>282 </div>283 <div class="location">Waikiki</div>284 285 <div class="bullet">286 <svg class="svg" viewBox="0 0 24 24" fill="none" stroke="#5f6368" stroke-width="2"><path d="M21 15a7.5 7.5 0 0 1-15 0V6l7.5-3L21 6v9z"/><path d="M9 10h6"/></svg>287 <div>Near convention center, great view, near shopping</div>288 </div>289 290 <div class="price-area">291 <div class="price" style="color:#202124">$541</div>292 <div class="sites">13 sites</div>293 </div>294 295 <button class="cta">View deal</button>296 </div>297 </div>298 299 </div>300 301 <!-- Sticky bottom bar -->302 <div class="sticky">303 <div class="pill">304 <svg class="svg" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2"><path d="M3 10l9-7 9 7v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3z"/><path d="M9 21V9h6v12"/></svg>305 <div>Map view</div>306 </div>307 <div class="divider-v"></div>308 <div class="pill">309 <svg class="svg" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2"><path d="M4 6h16M6 12h12M8 18h8"/></svg>310 <div>Filters</div>311 </div>312 </div>313 314 <!-- Home indicator -->315 <div class="home-indicator"></div>316 317</div>318</body>319</html>