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>Hotels & Homestays</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, 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 bars */18 .status-bar {19 height: 88px;20 padding: 0 32px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #70757a;25 font-size: 34px;26 background: #FFFFFF;27 }28 .status-icons { display: flex; align-items: center; gap: 24px; }29 .dot { width: 10px; height: 10px; background: #9aa0a6; border-radius: 50%; display: inline-block; }30 31 .app-bar {32 height: 148px;33 display: flex;34 align-items: center;35 gap: 24px;36 padding: 0 32px;37 background: #FFFFFF;38 box-shadow: 0 1px 0 rgba(0,0,0,0.06);39 }40 .back-btn {41 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;42 }43 .brand-circle {44 width: 96px; height: 96px; background: #FF7A45; border-radius: 50%;45 display: flex; align-items: center; justify-content: center;46 color: #fff;47 }48 .app-title {49 font-weight: 800;50 font-size: 56px;51 color: #222;52 }53 54 .page {55 background: #F4F5F7;56 height: calc(2400px - 236px);57 overflow: hidden;58 }59 .content {60 padding: 28px;61 padding-bottom: 140px;62 }63 64 /* Cards */65 .card {66 background: #FFFFFF;67 border-radius: 28px;68 box-shadow: 0 3px 8px rgba(0,0,0,0.08);69 }70 71 /* Hourly stays card */72 .hourly {73 display: flex;74 align-items: center;75 padding: 26px;76 margin-bottom: 28px;77 }78 .hourly-left {79 width: 240px; height: 120px;80 background: linear-gradient(90deg, #FFD6C5 0%, #FFE7DC 100%);81 border-radius: 22px;82 display: flex; align-items: center; justify-content: center;83 flex-shrink: 0;84 color: #1f2937;85 font-weight: 800;86 letter-spacing: 1px;87 }88 .hourly-right {89 flex: 1; padding: 0 24px; position: relative;90 }91 .hourly-title {92 font-size: 40px; font-weight: 800; color: #1F2937;93 }94 .hourly-sub {95 margin-top: 6px; color: #6B7280; font-size: 32px; font-weight: 600;96 }97 .chev-wrap {98 width: 64px; height: 64px; border-radius: 50%; background: #E8F0FE;99 display: flex; align-items: center; justify-content: center;100 position: absolute; right: 8px; top: 24px;101 }102 103 /* Search card */104 .search-card {105 padding: 26px;106 margin-bottom: 84px;107 position: relative;108 }109 .caption {110 font-size: 30px; color: #9CA3AF; margin-bottom: 6px; font-weight: 700;111 }112 .location {113 font-size: 56px; font-weight: 900; color: #111827;114 margin-bottom: 16px;115 }116 .row-split {117 display: grid;118 grid-template-columns: 1fr 1fr;119 border-top: 1px solid #EFEFEF;120 }121 .col {122 padding: 20px 8px;123 }124 .col + .col { border-left: 1px solid #EFEFEF; }125 .big {126 font-size: 46px; font-weight: 900; color: #111827; margin-top: 8px;127 }128 .muted { color: #9CA3AF; font-size: 30px; margin-top: 2px; }129 .center-content { display: flex; flex-direction: column; align-items: flex-end; }130 131 .search-btn {132 position: absolute;133 left: 240px;134 right: 240px;135 height: 120px;136 bottom: -60px;137 background: #FF6A3D;138 color: #fff;139 display: flex; align-items: center; justify-content: center;140 border-radius: 60px;141 font-size: 44px; font-weight: 800;142 box-shadow: 0 10px 16px rgba(255,106,61,0.35);143 }144 145 .section-title {146 font-size: 48px; font-weight: 800; color: #111827;147 margin: 32px 8px 20px;148 }149 150 /* Recent search small card */151 .recent-card {152 border: 2px solid #E5E7EB;153 border-radius: 26px;154 padding: 20px;155 background: #FFFFFF;156 display: flex;157 flex-direction: column;158 gap: 12px;159 position: relative;160 }161 .chip {162 display: inline-flex; align-items: center; gap: 10px;163 background: #16A34A; color: #fff; font-weight: 800; font-size: 28px;164 padding: 10px 16px; border-radius: 14px;165 }166 .recent-chevron {167 position: absolute; right: 16px; top: 20px;168 width: 56px; height: 56px; background: #EFF6FF; border-radius: 50%;169 display: flex; align-items: center; justify-content: center;170 }171 .recent-title { font-size: 40px; font-weight: 800; color: #111827; }172 .recent-line { font-size: 34px; color: #4B5563; }173 174 /* Image placeholders */175 .img-ph {176 width: 100%;177 height: 300px;178 background: #E0E0E0;179 border: 1px solid #BDBDBD;180 color: #757575;181 display: flex; align-items: center; justify-content: center;182 border-radius: 24px;183 margin: 22px 0;184 font-weight: 700;185 }186 187 /* GoStays info card */188 .gos-card { padding: 24px; }189 .gos-header {190 display: flex; align-items: center; justify-content: space-between;191 margin-bottom: 8px;192 }193 .gos-logo { color: #FF6A6A; font-size: 52px; font-weight: 900; }194 .know-more {195 color: #2563EB; font-weight: 800; display: flex; align-items: center; gap: 6px;196 font-size: 32px;197 }198 .bullet { display: flex; align-items: center; gap: 14px; margin: 16px 4px; font-size: 36px; color: #374151; }199 .tick {200 width: 28px; height: 28px; border-radius: 50%; background: #FEE2E2; color: #EF4444;201 display: inline-flex; align-items: center; justify-content: center; font-weight: 900;202 }203 204 /* Home indicator */205 .home-indicator {206 position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);207 width: 300px; height: 10px; border-radius: 8px; background: #0B0B0B;208 opacity: 0.8;209 }210</style>211</head>212<body>213<div id="render-target">214 215 <!-- Status bar -->216 <div class="status-bar">217 <div>12:46</div>218 <div class="status-icons">219 <span class="dot"></span>220 <span class="dot"></span>221 <span class="dot"></span>222 <span style="width: 34px; height: 22px; border: 2px solid #9aa0a6; border-radius: 4px; position: relative; display: inline-block;">223 <span style="position:absolute; right:-6px; top:6px; width:4px; height:8px; background:#9aa0a6;"></span>224 </span>225 <span>100%</span>226 </div>227 </div>228 229 <!-- App bar -->230 <div class="app-bar">231 <div class="back-btn">232 <svg width="44" height="44" viewBox="0 0 24 24">233 <path d="M15 4 L7 12 L15 20" stroke="#202124" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>234 </svg>235 </div>236 <div class="brand-circle">237 <svg width="44" height="44" viewBox="0 0 24 24">238 <rect x="5" y="6" width="6" height="12" fill="#ffffff"></rect>239 <rect x="13" y="10" width="6" height="8" fill="#ffffff"></rect>240 <rect x="7" y="8" width="2" height="2" fill="#FF7A45"></rect>241 <rect x="15" y="12" width="2" height="2" fill="#FF7A45"></rect>242 </svg>243 </div>244 <div class="app-title">Hotels & Homestays</div>245 </div>246 247 <div class="page">248 <div class="content">249 250 <!-- Hourly stays card -->251 <div class="hourly card">252 <div class="hourly-left">253 <div>254 <div style="font-size:36px;">HOURLY</div>255 <div style="font-size:22px; font-weight:700; color:#6B7280; text-align:center; margin-top:4px;">STAYS</div>256 </div>257 </div>258 <div class="hourly-right">259 <div class="hourly-title">BOOK FOR 3, 6 OR 9 HOURS!</div>260 <div class="hourly-sub">Flexible slots, great savings</div>261 <div class="chev-wrap">262 <svg width="24" height="24" viewBox="0 0 24 24">263 <path d="M8 4 L16 12 L8 20" fill="none" stroke="#2563EB" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>264 </svg>265 </div>266 </div>267 </div>268 269 <!-- Search card -->270 <div class="search-card card">271 <div class="caption">City, Area or Property Name</div>272 <div class="location">Berlin, Germany</div>273 <div class="row-split">274 <div class="col">275 <div class="big">20 Dec - 24 Dec</div>276 <div class="muted">4 Nights</div>277 </div>278 <div class="col center-content">279 <div class="big">1 Room</div>280 <div class="muted">2 Adults</div>281 </div>282 </div>283 <div class="search-btn">Search</div>284 </div>285 286 <div class="section-title">Recent Searches</div>287 288 <div class="recent-card card">289 <div class="recent-chevron">290 <svg width="24" height="24" viewBox="0 0 24 24">291 <path d="M8 4 L16 12 L8 20" fill="none" stroke="#2563EB" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>292 </svg>293 </div>294 <div class="chip">295 <svg width="20" height="20" viewBox="0 0 24 24">296 <rect x="4" y="6" width="7" height="12" fill="#FFFFFF"></rect>297 <rect x="13" y="10" width="7" height="8" fill="#FFFFFF"></rect>298 </svg>299 City300 </div>301 <div class="recent-title">Berlin, Germany</div>302 <div class="recent-line">2 Adults</div>303 <div class="recent-line" style="color:#6B7280;">20 Dec - 24 Dec</div>304 </div>305 306 <!-- Promo banner as image placeholder -->307 <div class="img-ph">[IMG: Promo Banner - Up to 25% OFF on stays]</div>308 309 <!-- GoStays info card -->310 <div class="gos-card card">311 <div class="gos-header">312 <div class="gos-logo">goSTAYS</div>313 <div class="know-more">Know More314 <svg width="22" height="22" viewBox="0 0 24 24">315 <path d="M8 4 L16 12 L8 20" fill="none" stroke="#2563EB" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>316 </svg>317 </div>318 </div>319 <div style="color:#EF4444; font-weight:700; margin: 2px 4px 10px;">Top Rated Affordable Properties</div>320 <div class="bullet"><span class="tick">✓</span>100% Money Back Guarantee*</div>321 <div class="bullet"><span class="tick">✓</span>Hassle-Free Check-in</div>322 </div>323 324 <!-- Another image placeholder to emulate long content -->325 <div class="img-ph" style="height: 260px;">[IMG: Property Highlights Graphic]</div>326 327 </div>328 </div>329 330 <div class="home-indicator"></div>331</div>332</body>333</html>