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>Hotels & Homestays UI</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;13 color: #222;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #ffffff;21 }22 /* General helpers */23 .screen {24 position: absolute;25 top: 0;26 left: 0;27 right: 0;28 bottom: 0;29 overflow-y: auto;30 -webkit-overflow-scrolling: touch;31 padding: 36px 36px 100px 36px;32 box-sizing: border-box;33 background: #ffffff;34 }35 .row {36 display: flex;37 align-items: center;38 }39 .card {40 background: #fff;41 border-radius: 28px;42 box-shadow: 0 4px 12px rgba(0,0,0,0.08);43 }44 .muted { color: #777; }45 .divider-v {46 width: 1px;47 background: #E5E5E5;48 align-self: stretch;49 }50 .pill {51 border-radius: 999px;52 padding: 14px 22px;53 font-weight: 600;54 display: inline-flex;55 align-items: center;56 gap: 10px;57 }58 /* Header */59 .topbar {60 height: 120px;61 display: flex;62 align-items: center;63 gap: 26px;64 }65 .title {66 font-size: 52px;67 font-weight: 800;68 letter-spacing: 0.2px;69 }70 .icon-btn {71 width: 72px;72 height: 72px;73 border-radius: 36px;74 display: inline-flex;75 align-items: center;76 justify-content: center;77 }78 .icon-round {79 width: 88px;80 height: 88px;81 background: #ff7a45;82 border-radius: 44px;83 display: flex;84 align-items: center;85 justify-content: center;86 }87 /* Hourly banner card */88 .hourly-card {89 margin-top: 16px;90 height: 168px;91 display: grid;92 grid-template-columns: 280px 1fr 80px;93 gap: 0;94 align-items: stretch;95 overflow: hidden;96 }97 .hourly-left {98 background: linear-gradient(90deg, #ffe6d7 0%, #ffd6c2 100%);99 border-top-left-radius: 28px;100 border-bottom-left-radius: 28px;101 display: flex;102 align-items: center;103 justify-content: center;104 padding: 0 20px;105 }106 .hourly-left .hourly-text {107 text-align: center;108 }109 .hourly-left .hourly-text .big {110 font-size: 38px;111 font-weight: 800;112 letter-spacing: 1px;113 }114 .hourly-left .hourly-text .small {115 font-size: 22px;116 color: #777;117 font-weight: 600;118 margin-top: 6px;119 }120 .hourly-mid {121 padding: 26px 20px;122 display: flex;123 flex-direction: column;124 justify-content: center;125 }126 .hourly-mid .headline {127 font-size: 38px;128 font-weight: 800;129 }130 .hourly-mid .sub {131 margin-top: 10px;132 font-size: 28px;133 color: #7a7a7a;134 font-weight: 600;135 }136 .hourly-right {137 display: flex;138 align-items: center;139 justify-content: center;140 padding-right: 18px;141 }142 /* Search card */143 .search-card {144 margin-top: 24px;145 padding: 24px;146 }147 .search-card .label {148 font-size: 26px;149 color: #8b8b8b;150 font-weight: 600;151 }152 .search-card .city {153 margin-top: 10px;154 font-size: 56px;155 font-weight: 800;156 }157 .search-card .fields {158 margin-top: 22px;159 display: grid;160 grid-template-columns: 1fr 1px 1fr;161 align-items: center;162 gap: 0;163 border-top: 1px solid #eeeeee;164 padding-top: 22px;165 }166 .search-card .field-title {167 font-size: 40px;168 font-weight: 800;169 }170 .search-card .field-sub {171 margin-top: 6px;172 font-size: 28px;173 color: #8b8b8b;174 font-weight: 600;175 }176 .search-btn-wrapper {177 position: relative;178 height: 110px;179 margin-top: 12px;180 }181 .search-btn {182 position: absolute;183 left: 50%;184 transform: translateX(-50%);185 bottom: -24px;186 width: 720px;187 height: 110px;188 background: #ff7a45;189 color: #fff;190 border-radius: 55px;191 font-size: 40px;192 font-weight: 800;193 display: flex;194 align-items: center;195 justify-content: center;196 box-shadow: 0 8px 16px rgba(255,122,69,0.35);197 }198 /* Section header */199 .section-title {200 margin-top: 110px;201 font-size: 44px;202 font-weight: 800;203 }204 /* Recent card */205 .recent-card {206 margin-top: 22px;207 padding: 22px;208 display: grid;209 grid-template-columns: 1fr 80px;210 gap: 0;211 align-items: start;212 }213 .city-pill {214 background: #14a44d;215 color: #fff;216 font-size: 28px;217 font-weight: 700;218 padding: 10px 18px;219 border-radius: 16px;220 display: inline-flex;221 gap: 12px;222 align-items: center;223 }224 .recent-card .city-name {225 margin-top: 16px;226 font-size: 40px;227 font-weight: 800;228 }229 .recent-card .meta {230 margin-top: 18px;231 font-size: 30px;232 color: #616161;233 display: grid;234 gap: 4px;235 }236 /* Image placeholders */237 .img-box {238 background: #E0E0E0;239 border: 1px solid #BDBDBD;240 color: #757575;241 display: flex;242 justify-content: center;243 align-items: center;244 border-radius: 24px;245 text-align: center;246 font-weight: 700;247 }248 .promo {249 margin-top: 30px;250 height: 360px;251 }252 /* goStays info card */253 .gostays-card {254 margin-top: 24px;255 padding: 26px;256 display: grid;257 grid-template-columns: 1fr 80px;258 align-items: start;259 gap: 0;260 }261 .gostays-title {262 font-size: 44px;263 font-weight: 800;264 color: #ff6d60;265 }266 .gostays-sub {267 font-size: 28px;268 color: #ff6d60;269 margin-top: 6px;270 font-weight: 700;271 }272 .list {273 margin-top: 22px;274 display: grid;275 gap: 16px;276 }277 .list-item {278 display: flex;279 align-items: center;280 gap: 14px;281 font-size: 32px;282 font-weight: 700;283 color: #333;284 }285 .tick {286 width: 34px;287 height: 34px;288 border-radius: 50%;289 background: #ff7a45;290 display: inline-flex;291 align-items: center;292 justify-content: center;293 color: #fff;294 font-size: 24px;295 line-height: 1;296 }297 /* Chevron icon spacing */298 .chev {299 width: 64px;300 height: 64px;301 display: inline-flex;302 align-items: center;303 justify-content: center;304 }305 /* Bottom home indicator */306 .home-indicator {307 position: absolute;308 bottom: 24px;309 left: 50%;310 transform: translateX(-50%);311 width: 360px;312 height: 12px;313 background: #1f1f1f;314 border-radius: 8px;315 opacity: 0.55;316 }317</style>318</head>319<body>320<div id="render-target">321 <div class="screen">322 <!-- Header -->323 <div class="topbar">324 <div class="icon-btn">325 <svg width="48" height="48" viewBox="0 0 24 24">326 <path d="M15 18l-6-6 6-6" stroke="#222" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>327 </svg>328 </div>329 <div class="icon-round">330 <svg width="44" height="44" viewBox="0 0 24 24">331 <rect x="4" y="7" width="16" height="12" rx="2" fill="#fff"/>332 <rect x="7" y="10" width="4" height="5" fill="#ff7a45"/>333 <rect x="13" y="10" width="4" height="5" fill="#ff7a45"/>334 <rect x="10" y="4" width="4" height="3" rx="1" fill="#fff"/>335 </svg>336 </div>337 <div class="title">Hotels & Homestays</div>338 </div>339 340 <!-- Hourly Stays Card -->341 <div class="card hourly-card">342 <div class="hourly-left">343 <div class="hourly-text">344 <div class="big">HOURLY</div>345 <div class="small">STAYS</div>346 </div>347 </div>348 <div class="hourly-mid">349 <div class="headline">BOOK FOR 3, 6 OR 9 HOURS!</div>350 <div class="sub">Flexible slots, great savings</div>351 </div>352 <div class="hourly-right">353 <div class="chev">354 <svg width="36" height="36" viewBox="0 0 24 24">355 <path d="M9 6l6 6-6 6" stroke="#3b3b3b" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>356 </svg>357 </div>358 </div>359 </div>360 361 <!-- Search Card -->362 <div class="card search-card">363 <div class="label">City, Area or Property Name</div>364 <div class="city">Berlin, Germany</div>365 366 <div class="fields">367 <div style="padding-right:24px;">368 <div class="field-title">20 Dec - 24 Dec</div>369 <div class="field-sub">4 Nights</div>370 </div>371 <div class="divider-v"></div>372 <div style="padding-left:24px;">373 <div class="field-title">1 Room</div>374 <div class="field-sub">2 Adults</div>375 </div>376 </div>377 378 <div class="search-btn-wrapper">379 <div class="search-btn">Search</div>380 </div>381 </div>382 383 <!-- Recent Searches -->384 <div class="section-title">Recent Searches</div>385 386 <div class="card recent-card">387 <div>388 <div class="city-pill">389 <svg width="24" height="24" viewBox="0 0 24 24">390 <rect x="3" y="6" width="18" height="14" rx="2" fill="#fff"/>391 <rect x="6" y="10" width="4" height="5" fill="#14a44d"/>392 <rect x="12" y="10" width="4" height="5" fill="#14a44d"/>393 <rect x="10" y="3" width="4" height="3" rx="1" fill="#fff"/>394 </svg>395 City396 </div>397 <div class="city-name">Berlin, Germany</div>398 <div class="meta">399 <div>2 Adults</div>400 <div>20 Dec - 24 Dec</div>401 </div>402 </div>403 <div class="chev" style="justify-self: end;">404 <svg width="36" height="36" viewBox="0 0 24 24">405 <path d="M9 6l6 6-6 6" stroke="#3b3b3b" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>406 </svg>407 </div>408 </div>409 410 <!-- Promo Banner Placeholder -->411 <div class="img-box promo">412 [IMG: Promo banner - Up to 25% OFF on goStays]413 </div>414 415 <!-- goStays info card -->416 <div class="card gostays-card">417 <div>418 <div class="gostays-title">goSTAYS</div>419 <div class="gostays-sub">Top Rated Affordable Properties</div>420 <div class="list">421 <div class="list-item">422 <span class="tick">✓</span>423 100% Money Back Guarantee*424 </div>425 <div class="list-item">426 <span class="tick">✓</span>427 Hassle-Free Check-in428 </div>429 </div>430 </div>431 <div class="chev" style="justify-self: end;">432 <svg width="36" height="36" viewBox="0 0 24 24">433 <path d="M9 6l6 6-6 6" stroke="#3b3b3b" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>434 </svg>435 </div>436 </div>437 </div>438 439 <!-- Bottom home indicator -->440 <div class="home-indicator"></div>441</div>442</body>443</html>