GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Hotels UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #0f1720; /* deep navy dark */13 color: #ffffff;14 border-radius: 28px;15 box-shadow: 0 10px 30px rgba(0,0,0,0.35);16 }17 18 /* Status bar */19 .status-bar {20 height: 96px;21 padding: 28px 36px 0 36px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 font-weight: 600;26 color: #d8dde4;27 font-size: 40px;28 }29 .status-icons { display: flex; gap: 28px; align-items: center; }30 .icon-signal, .icon-battery { width: 40px; height: 40px; border: 2px solid #d8dde4; border-radius: 6px; }31 .icon-cloud { width: 44px; height: 28px; border-radius: 15px; background: #bfc7cf; }32 33 /* Header with back and tabs */34 .top-bar {35 display: flex;36 align-items: center;37 padding: 16px 24px 0 24px;38 height: 120px;39 }40 .back-btn {41 width: 88px;42 height: 88px;43 display: flex;44 align-items: center;45 justify-content: center;46 margin-right: 8px;47 }48 .back-btn svg { width: 44px; height: 44px; fill: none; stroke: #d8dde4; stroke-width: 6; }49 .tabs {50 display: flex;51 align-items: center;52 gap: 52px;53 font-size: 42px;54 font-weight: 700;55 color: #c5cbd4;56 }57 .tab { position: relative; padding: 20px 6px; }58 .tab.active { color: #2fd6c4; }59 .tab.active::after {60 content: "";61 position: absolute;62 left: 0; right: 0; bottom: -8px;63 height: 8px; border-radius: 8px;64 background: #2fd6c4;65 }66 67 /* Search row */68 .search-row {69 padding: 18px 24px 0 24px;70 display: grid;71 grid-template-columns: 1fr auto auto;72 gap: 18px;73 align-items: center;74 }75 .search-box {76 height: 96px;77 border-radius: 16px;78 background: #16212b;79 border: 1px solid #27323b;80 display: flex;81 align-items: center;82 padding: 0 24px;83 font-size: 40px;84 color: #e7edf3;85 font-weight: 700;86 }87 88 .chip {89 display: flex;90 align-items: center;91 gap: 18px;92 height: 96px;93 padding: 0 26px;94 border-radius: 14px;95 background: #16212b;96 border: 1px solid #27323b;97 color: #e7edf3;98 font-size: 34px;99 font-weight: 600;100 }101 .chip svg { width: 44px; height: 44px; stroke: #b9c5cf; stroke-width: 5; fill: none; }102 103 /* Cards */104 .card {105 margin: 24px;106 margin-top: 26px;107 border-radius: 24px;108 overflow: hidden;109 background: #12202a;110 border: 1px solid #1f2d37;111 box-shadow: 0 8px 22px rgba(0,0,0,0.45);112 }113 .card-img {114 height: 420px;115 background: #E0E0E0;116 border-bottom: 1px solid #BDBDBD;117 display: flex; align-items: center; justify-content: center;118 color: #757575; font-weight: 700; font-size: 36px;119 }120 .card-content { padding: 28px; }121 122 .hotel-name {123 font-size: 48px;124 font-weight: 800;125 display: flex; align-items: center; gap: 14px;126 }127 .red-star { color: #ff6b6b; font-size: 40px; }128 129 .rating-row {130 margin-top: 18px;131 display: flex;132 align-items: center;133 gap: 18px;134 color: #e7edf3;135 font-size: 36px;136 font-weight: 700;137 }138 .ta-dots { display: flex; gap: 8px; }139 .ta-dots span {140 width: 22px; height: 22px; background: #2fd6c4; border-radius: 50%;141 display: inline-block;142 }143 .ta-dots span.dim { background: #224e49; }144 145 .distance-row {146 margin-top: 18px;147 display: flex; align-items: center; gap: 16px;148 color: #c7d0d8; font-size: 34px;149 }150 .distance-row svg { width: 32px; height: 32px; fill: none; stroke: #9fb2c2; stroke-width: 5; }151 152 .deal-row {153 margin-top: 22px;154 display: flex; align-items: center; gap: 18px;155 }156 .pill {157 background: #ffffff;158 color: #121a22;159 padding: 12px 22px;160 border-radius: 18px;161 font-size: 34px;162 font-weight: 700;163 }164 .save-text {165 color: #ffffff; font-size: 34px; font-weight: 700;166 }167 168 .price-row {169 margin-top: 10px;170 display: flex; align-items: baseline; gap: 18px;171 }172 .price-row .old { color: #9da9b6; text-decoration: line-through; font-size: 40px; }173 .price-row .new { color: #ffffff; font-size: 64px; font-weight: 800; }174 .price-unit { font-size: 38px; color: #cfd7df; }175 176 .free-cancel {177 margin-top: 10px; color: #cfd7df; font-size: 36px;178 }179 180 .discount-tag {181 margin-left: auto;182 background: #1f2d37;183 color: #ffffff;184 border: 1px solid #32424f;185 padding: 12px 18px;186 border-radius: 16px;187 font-size: 32px;188 font-weight: 700;189 }190 191 /* Sort & filters bar */192 .sort-bar {193 position: absolute;194 left: 24px; right: 24px; bottom: 180px;195 background: #121e28;196 border: 1px solid #22303a;197 border-radius: 24px;198 display: flex; align-items: center; justify-content: center;199 padding: 30px 24px;200 gap: 16px;201 color: #e7edf3;202 font-size: 46px; font-weight: 800;203 box-shadow: 0 8px 24px rgba(0,0,0,0.55);204 }205 .slider-icon {206 width: 44px; height: 44px;207 }208 .sort-bar-right {209 position: absolute; right: 28px; top: 50%;210 transform: translateY(-50%);211 width: 72px; height: 72px;212 border-radius: 50%;213 border: 2px solid #2fd6c4;214 }215 216 /* Helper small gray text */217 .muted { color: #a8b5c0; }218 219</style>220</head>221<body>222<div id="render-target">223 224 <!-- Status bar -->225 <div class="status-bar">226 <div>3:15</div>227 <div class="status-icons">228 <div class="icon-signal"></div>229 <div class="icon-battery"></div>230 <div class="icon-cloud"></div>231 </div>232 </div>233 234 <!-- Top navigation and tabs -->235 <div class="top-bar">236 <div class="back-btn">237 <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/><path d="M9 12h12" /></svg>238 </div>239 <div class="tabs">240 <div class="tab">FLIGHTS</div>241 <div class="tab active">HOTELS</div>242 </div>243 </div>244 245 <!-- Search row -->246 <div class="search-row">247 <div class="search-box">Tokyo</div>248 <div class="chip">249 <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"></rect><path d="M7 8h10M7 12h10"/></svg>250 <div>251 <div style="line-height: 1;">Aug 5</div>252 <div class="muted" style="font-size:28px;">Aug 10</div>253 </div>254 </div>255 <div class="chip">256 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"></circle><path d="M4 22c0-4 4-6 8-6s8 2 8 6"/></svg>257 <div>1</div>258 </div>259 </div>260 261 <!-- Card 1 -->262 <div class="card" style="margin-top: 20px;">263 <div class="card-img">[IMG: Temple at night]</div>264 <div class="card-content">265 <div class="hotel-name">Obi Hostel <span class="red-star">★</span></div>266 267 <div class="rating-row">268 <div>4.5</div>269 <div class="ta-dots">270 <span></span><span></span><span></span><span></span><span class="dim"></span>271 </div>272 <div class="muted">(32)</div>273 </div>274 275 <div class="distance-row">276 <svg viewBox="0 0 24 24"><path d="M12 21s7-7 7-11a7 7 0 1 0-14 0c0 4 7 11 7 11z"/><circle cx="12" cy="10" r="3"/></svg>277 <div>5.07 miles from downtown</div>278 </div>279 280 <div class="deal-row">281 <div class="pill">Great saving</div>282 <div class="save-text">Save 31%</div>283 </div>284 285 <div class="price-row">286 <div class="old">$32</div>287 <div class="new">$22</div>288 <div class="price-unit">a night</div>289 </div>290 <div class="free-cancel">Free cancellation</div>291 </div>292 </div>293 294 <!-- Card 2 -->295 <div class="card">296 <div class="card-img">[IMG: Hotel room with two beds]</div>297 <div class="card-content">298 <div class="hotel-name">299 Hotel Sunroute Plaza Shinjuku300 <span class="red-star">★</span><span class="red-star">★</span><span class="red-star">★</span>301 </div>302 303 <div style="display:flex; align-items:center; gap:18px;">304 <div class="rating-row" style="margin-top: 12px;">305 <div>4.5</div>306 <div class="ta-dots">307 <span></span><span></span><span></span><span></span><span class="dim"></span>308 </div>309 <div class="muted">(5,790)</div>310 </div>311 <div class="discount-tag">26% off</div>312 </div>313 314 <div class="distance-row">315 <svg viewBox="0 0 24 24"><path d="M12 21s7-7 7-11a7 7 0 1 0-14 0c0 4 7 11 7 11z"/><circle cx="12" cy="10" r="3"/></svg>316 <div>0.43 miles from downtown</div>317 </div>318 319 <div class="price-row" style="margin-top: 24px;">320 <div class="old">$144</div>321 <div class="new">$107</div>322 <div class="price-unit">a night</div>323 </div>324 <div class="free-cancel">Free cancellation</div>325 </div>326 </div>327 328 <!-- Card 3 -->329 <div class="card">330 <div class="card-img">[IMG: Compact modern hotel room]</div>331 <div class="card-content">332 <div class="hotel-name">333 Sotetsu Fresa Inn Tokyo-Toyocho334 <span class="red-star">★</span><span class="red-star">★</span><span class="red-star">★</span>335 </div>336 337 <div class="rating-row">338 <div>4.0</div>339 <div class="ta-dots">340 <span></span><span></span><span></span><span class="dim"></span><span class="dim"></span>341 </div>342 <div class="muted">(237)</div>343 </div>344 345 <div class="distance-row">346 <svg viewBox="0 0 24 24"><path d="M12 21s7-7 7-11a7 7 0 1 0-14 0c0 4 7 11 7 11z"/><circle cx="12" cy="10" r="3"/></svg>347 <div>7.20 miles from downtown</div>348 </div>349 350 <div class="price-row" style="margin-top: 24px;">351 <div class="new">$46</div>352 <div class="price-unit">a night</div>353 </div>354 <div class="free-cancel">Free cancellation</div>355 </div>356 </div>357 358 <!-- Sort & Filters floating bar -->359 <div class="sort-bar">360 <svg class="slider-icon" viewBox="0 0 24 24" stroke="#2fd6c4" fill="none" stroke-width="3">361 <path d="M5 6h14M9 6v6M3 12h10M15 12v6M7 18h14"/>362 </svg>363 <div>SORT & FILTERS</div>364 <div class="sort-bar-right"></div>365 </div>366 367</div>368</body>369</html>