GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Hotel List UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #111417;13 color: #fff;14 }15 16 /* Top status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 90px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 padding: 0 36px;27 box-sizing: border-box;28 color: #cfd3d8;29 font-weight: 600;30 font-size: 36px;31 }32 .status-icons {33 display: flex;34 gap: 26px;35 align-items: center;36 }37 /* Header with back and location */38 .header {39 position: absolute;40 top: 90px;41 left: 0;42 width: 1080px;43 padding: 24px 36px 16px;44 box-sizing: border-box;45 display: flex;46 align-items: center;47 gap: 20px;48 }49 .back-btn {50 width: 68px;51 height: 68px;52 border-radius: 34px;53 background: #1b1f24;54 display: flex;55 align-items: center;56 justify-content: center;57 }58 .title-area {59 flex: 1;60 }61 .title {62 font-size: 44px;63 font-weight: 700;64 color: #e8ecf1;65 letter-spacing: 0.2px;66 }67 .subtitle {68 margin-top: 6px;69 font-size: 28px;70 color: #aab0b7;71 }72 .header-actions {73 display: flex;74 align-items: center;75 gap: 28px;76 }77 78 /* Filter chips */79 .chip-row {80 position: absolute;81 top: 230px;82 left: 0;83 width: 1080px;84 padding: 0 28px;85 box-sizing: border-box;86 display: flex;87 gap: 22px;88 }89 .chip {90 background: #1b1f24;91 border-radius: 22px;92 padding: 20px 26px;93 font-size: 32px;94 color: #e3e6ea;95 display: flex;96 align-items: center;97 gap: 14px;98 border: 1px solid #23272d;99 }100 .chip .price {101 color: #95a0ab;102 font-weight: 600;103 font-size: 28px;104 }105 .chip.active {106 background: #1e2230;107 border-color: #3a3d49;108 box-shadow: inset 0 0 0 1px #3a3d49;109 }110 111 /* Sign-in banner */112 .banner {113 position: absolute;114 top: 320px;115 left: 28px;116 width: 1024px;117 height: 120px;118 background: #15251a;119 border: 1px solid #2a4130;120 border-radius: 22px;121 display: flex;122 align-items: center;123 gap: 18px;124 padding: 0 26px;125 color: #7ad074;126 font-size: 34px;127 box-sizing: border-box;128 }129 130 /* Cards */131 .list {132 position: absolute;133 top: 460px;134 left: 0;135 width: 1080px;136 padding: 0 20px 20px;137 box-sizing: border-box;138 }139 .card {140 display: flex;141 gap: 18px;142 background: #171a1f;143 border-radius: 22px;144 border: 1px solid #262a31;145 overflow: hidden;146 margin-bottom: 26px;147 padding: 0;148 }149 .card .photo {150 width: 500px;151 height: 380px;152 background: #E0E0E0;153 border-right: 1px solid #BDBDBD;154 position: relative;155 display: flex;156 align-items: flex-end;157 justify-content: center;158 color: #4f4f4f;159 font-size: 28px;160 box-sizing: border-box;161 }162 .photo .heart {163 position: absolute;164 top: 18px;165 left: 18px;166 width: 54px;167 height: 54px;168 border-radius: 27px;169 background: rgba(23,26,31,0.85);170 border: 1px solid #3a3f48;171 display: flex;172 align-items: center;173 justify-content: center;174 }175 .dots {176 position: absolute;177 bottom: 18px;178 left: 26px;179 display: flex;180 gap: 12px;181 }182 .dot {183 width: 16px; height: 16px; border-radius: 8px; background: #cfd3d8;184 opacity: 0.6;185 }186 .dot.active { opacity: 1; }187 .card .info {188 flex: 1;189 padding: 24px;190 }191 .hotel-name {192 font-size: 40px;193 font-weight: 800;194 }195 .rating-row {196 margin-top: 12px;197 display: flex;198 align-items: center;199 gap: 12px;200 color: #cfd3d8;201 font-size: 30px;202 }203 .rating-row .score {204 color: #ffffff;205 font-weight: 700;206 }207 .meta {208 margin-top: 10px;209 color: #aab0b7;210 font-size: 30px;211 display: flex;212 align-items: center;213 gap: 14px;214 }215 .mobile-rate {216 display: inline-flex;217 align-items: center;218 gap: 10px;219 background: #20242a;220 padding: 6px 12px;221 border-radius: 12px;222 font-size: 26px;223 color: #cfd3d8;224 }225 .price-row {226 margin-top: 22px;227 display: flex;228 align-items: baseline;229 gap: 16px;230 }231 .price {232 font-size: 56px;233 color: #a58cff;234 font-weight: 800;235 }236 .strike {237 color: #8a93a0;238 font-size: 32px;239 text-decoration: line-through;240 }241 .sites {242 margin-top: 6px;243 font-size: 28px;244 color: #9aa2ad;245 }246 .cta {247 position: absolute;248 right: 26px;249 bottom: 26px;250 background: #ef6b2e;251 color: #fff;252 padding: 24px 34px;253 border-radius: 20px;254 font-size: 32px;255 font-weight: 700;256 }257 .cta.unlock { right: 26px; background: #ef6b2e; }258 .private-pill {259 display: inline-flex;260 align-items: center;261 gap: 10px;262 margin-top: 10px;263 color: #94b68f;264 font-size: 28px;265 }266 267 /* Bottom overlay */268 .bottom-overlay {269 position: absolute;270 bottom: 170px;271 left: 200px;272 width: 680px;273 height: 120px;274 background: #1b1f24;275 border: 1px solid #2a2e36;276 border-radius: 28px;277 display: flex;278 align-items: center;279 justify-content: space-between;280 padding: 0 40px;281 box-sizing: border-box;282 }283 .overlay-btn {284 display: flex;285 align-items: center;286 gap: 18px;287 font-size: 34px;288 color: #e6eaee;289 }290 291 /* Simple icon styles */292 .icon-white path { fill: #e6eaee; }293 .icon-green path { fill: #7ad074; }294 .icon-orange path { fill: #ef6b2e; }295 .icon-gray path { fill: #aab0b7; }296 297</style>298</head>299<body>300<div id="render-target">301 302 <!-- Status bar -->303 <div class="status-bar">304 <div>9:00</div>305 <div class="status-icons">306 <!-- simple tiny dots/icons to suggest status -->307 <svg width="28" height="28"><circle cx="14" cy="14" r="10" fill="#cfd3d8"/></svg>308 <svg width="28" height="28"><rect x="5" y="6" width="18" height="14" rx="3" fill="#cfd3d8"/></svg>309 <svg width="28" height="28"><path d="M4 22h20l-10-16z" fill="#cfd3d8"/></svg>310 <svg width="28" height="28"><circle cx="14" cy="14" r="4" fill="#cfd3d8"/></svg>311 </div>312 </div>313 314 <!-- Header -->315 <div class="header">316 <div class="back-btn">317 <svg width="36" height="36" viewBox="0 0 24 24">318 <path class="icon-white" d="M15 4 L5 12 L15 20" stroke="#e6eaee" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>319 </svg>320 </div>321 <div class="title-area">322 <div class="title">Upper East Side, New York, U...</div>323 <div class="subtitle">Oct 12 – 16 · 1 room · 1 guest</div>324 </div>325 <div class="header-actions">326 <svg width="40" height="40" viewBox="0 0 24 24"><path class="icon-white" d="M18 8c-1.7 0-3 1.3-3 3v7H9v-7c0-1.7-1.3-3-3-3h12zM6 8V6c0-2.2 1.8-4 4-4h4c2.2 0 4 1.8 4 4v2" stroke="#e6eaee" stroke-width="2" fill="none"/></svg>327 <svg width="40" height="40" viewBox="0 0 24 24"><path class="icon-white" d="M18 8L6 16M6 8l12 8" stroke="#e6eaee" stroke-width="2" fill="none" stroke-linecap="round"/></svg>328 <svg width="40" height="40" viewBox="0 0 24 24"><path class="icon-white" d="M12 2v20M2 12h20" stroke="#e6eaee" stroke-width="2" fill="none"/></svg>329 <div style="font-size:32px;color:#cfd3d8;">USD</div>330 </div>331 </div>332 333 <!-- Filter chips -->334 <div class="chip-row">335 <div class="chip active">Recommended <span class="price">$357</span></div>336 <div class="chip">Cheapest <span class="price">$36</span></div>337 <div class="chip">Closest <span class="price">$319</span></div>338 <div class="chip">Deals <span class="price">$357</span></div>339 </div>340 341 <!-- Sign-in banner -->342 <div class="banner">343 <svg width="40" height="40" viewBox="0 0 24 24"><path class="icon-green" d="M6 11V8a6 6 0 0112 0v3h2v9H4v-9h2zm3-3a3 3 0 116 0v3H9V8z"/></svg>344 <div>Sign in to unlock Private Deals</div>345 </div>346 347 <!-- List -->348 <div class="list">349 350 <!-- Card 1 -->351 <div class="card">352 <div class="photo">353 <div class="heart">354 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 21s-6-4.35-9-7.5C1 11.5 2.5 7 6.5 7c2.05 0 3.5 1.2 4.5 2.4C12 8.2 13.45 7 15.5 7 19.5 7 21 11.5 21 13.5 18 16.65 12 21 12 21z" fill="none" stroke="#ffffff" stroke-width="2"/></svg>355 </div>356 <div style="padding:10px; background: rgba(255,255,255,0.85); border:1px solid #BDBDBD; border-radius:14px; color:#555; position:absolute; bottom:64px; right:26px; font-size:24px;">Mobile rate</div>357 <div class="dots">358 <div class="dot active"></div>359 <div class="dot"></div>360 <div class="dot"></div>361 </div>362 [IMG: Warm bar interior]363 </div>364 <div class="info">365 <div class="hotel-name">MOXY NYC Times Square</div>366 <div class="rating-row">367 <!-- stars -->368 <svg width="24" height="24"><path d="M12 1l3 7h8l-6 4 2 8-7-4-7 4 2-8-6-4h8z" fill="#ffffff"/></svg>369 <svg width="24" height="24"><path d="M12 1l3 7h8l-6 4 2 8-7-4-7 4 2-8-6-4h8z" fill="#ffffff"/></svg>370 <svg width="24" height="24"><path d="M12 1l3 7h8l-6 4 2 8-7-4-7 4 2-8-6-4h8z" fill="#ffffff"/></svg>371 <svg width="24" height="24"><path d="M12 1l3 7h8l-6 4 2 8-7-4-7 4 2-8-6-4h8z" fill="#ffffff"/></svg>372 <svg width="24" height="24"><path d="M12 1l3 7h8l-6 4 2 8-7-4-7 4 2-8-6-4h8z" fill="#ffffff" opacity="0.6"/></svg>373 <div>Excellent <span class="score">8.0</span></div>374 </div>375 <div class="meta">Manhattan <span class="mobile-rate">376 <svg width="22" height="22" viewBox="0 0 24 24"><rect x="5" y="4" width="14" height="18" rx="3" fill="#cfd3d8"/></svg> Mobile rate377 </span></div>378 <div class="price-row">379 <div class="price">$357</div>380 <div class="strike">$361</div>381 </div>382 <div class="sites">14 sites</div>383 <div class="cta">View deal</div>384 </div>385 </div>386 387 <!-- Card 2 -->388 <div class="card">389 <div class="photo">390 <div class="heart">391 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 21s-6-4.35-9-7.5C1 11.5 2.5 7 6.5 7c2.05 0 3.5 1.2 4.5 2.4C12 8.2 13.45 7 15.5 7 19.5 7 21 11.5 21 13.5 18 16.65 12 21 12 21z" fill="none" stroke="#ffffff" stroke-width="2"/></svg>392 </div>393 <div class="dots">394 <div class="dot active"></div>395 <div class="dot"></div>396 <div class="dot"></div>397 </div>398 [IMG: Bright blue cafe interior]399 </div>400 <div class="info">401 <div class="hotel-name">Virgin Hotels New York City</div>402 <div class="rating-row">403 <svg width="24" height="24"><path d="M12 1l3 7h8l-6 4 2 8-7-4-7 4 2-8-6-4h8z" fill="#ffffff"/></svg>404 <svg width="24" height="24"><path d="M12 1l3 7h8l-6 4 2 8-7-4-7 4 2-8-6-4h8z" fill="#ffffff"/></svg>405 <svg width="24" height="24"><path d="M12 1l3 7h8l-6 4 2 8-7-4-7 4 2-8-6-4h8z" fill="#ffffff"/></svg>406 <svg width="24" height="24"><path d="M12 1l3 7h8l-6 4 2 8-7-4-7 4 2-8-6-4h8z" fill="#ffffff"/></svg>407 <svg width="24" height="24"><path d="M12 1l3 7h8l-6 4 2 8-7-4-7 4 2-8-6-4h8z" fill="#ffffff" opacity="0.6"/></svg>408 <div>Excellent <span class="score">8.4</span></div>409 </div>410 <div class="meta">Manhattan</div>411 <div class="price-row">412 <div class="price" style="color:#eae7ff;">$423</div>413 </div>414 <div class="sites">10 sites</div>415 <div class="cta">View deal</div>416 </div>417 </div>418 419 <!-- Card 3 -->420 <div class="card">421 <div class="photo">422 <div class="heart">423 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 21s-6-4.35-9-7.5C1 11.5 2.5 7 6.5 7c2.05 0 3.5 1.2 4.5 2.4C12 8.2 13.45 7 15.5 7 19.5 7 21 11.5 21 13.5 18 16.65 12 21 12 21z" fill="none" stroke="#ffffff" stroke-width="2"/></svg>424 </div>425 <div class="dots">426 <div class="dot active"></div>427 <div class="dot"></div>428 <div class="dot"></div>429 </div>430 [IMG: Night city building facade]431 </div>432 <div class="info">433 <div class="hotel-name">Royalton Park Avenue</div>434 <div class="rating-row">435 <svg width="24" height="24"><path d="M12 1l3 7h8l-6 4 2 8-7-4-7 4 2-8-6-4h8z" fill="#ffffff"/></svg>436 <svg width="24" height="24"><path d="M12 1l3 7h8l-6 4 2 8-7-4-7 4 2-8-6-4h8z" fill="#ffffff"/></svg>437 <svg width="24" height="24"><path d="M12 1l3 7h8l-6 4 2 8-7-4-7 4 2-8-6-4h8z" fill="#ffffff"/></svg>438 <svg width="24" height="24"><path d="M12 1l3 7h8l-6 4 2 8-7-4-7 4 2-8-6-4h8z" fill="#ffffff"/></svg>439 <svg width="24" height="24"><path d="M12 1l3 7h8l-6 4 2 8-7-4-7 4 2-8-6-4h8z" fill="#ffffff" opacity="0.6"/></svg>440 <div>Excellent <span class="score">8.3</span></div>441 </div>442 <div class="meta">Manhattan</div>443 <div class="private-pill">444 <svg width="22" height="22" viewBox="0 0 24 24"><path d="M6 11V8a6 6 0 0112 0v3h2v9H4v-9h2zm3-3a3 3 0 116 0v3H9V8z" fill="#94b68f"/></svg>445 Private Deal446 </div>447 <div class="price-row">448 <div class="price" style="color:#cfd3ff;">$394</div>449 </div>450 <div class="sites">14 sites</div>451 <div class="cta unlock">Unlock</div>452 </div>453 </div>454 455 <!-- Partial next card header area -->456 <div class="card" style="height:260px;">457 <div class="photo" style="height:260px;">458 <div class="heart">459 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 21s-6-4.35-9-7.5C1 11.5 2.5 7 6.5 7c2.05 0 3.5 1.2 4.5 2.4C12 8.2 13.45 7 15.5 7 19.5 7 21 11.5 21 13.5 18 16.65 12 21 12 21z" fill="none" stroke="#ffffff" stroke-width="2"/></svg>460 </div>461 [IMG: City skyline by water]462 </div>463 <div class="info" style="padding:24px;">464 <div class="hotel-name">World Center Hotel</div>465 </div>466 </div>467 468 </div>469 470 <!-- Bottom overlay bar -->471 <div class="bottom-overlay">472 <div class="overlay-btn">473 <svg width="36" height="36" viewBox="0 0 24 24"><path class="icon-white" d="M12 2l10 8-10 8-10-8 10-8zm0 6l6 4-6 4-6-4 6-4z"/></svg>474 Map view475 </div>476 <div class="overlay-btn">477 <svg width="36" height="36" viewBox="0 0 24 24"><path class="icon-white" d="M4 5h16v3H4zm0 6h16v3H4zm0 6h16v3H4z"/></svg>478 Filters479 </div>480 </div>481 482</div>483</body>484</html>