GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Hotel Deals 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: #0e1013;13 color: #e7e9ea;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 90px;23 color: #cfd3d6;24 display: flex;25 align-items: center;26 justify-content: space-between;27 padding: 0 36px;28 font-size: 36px;29 letter-spacing: 0.5px;30 }31 .status-icons {32 display: flex;33 align-items: center;34 gap: 24px;35 }36 .tiny-icon {37 width: 36px; height: 36px;38 border-radius: 6px;39 background: #1b1f24;40 border: 1px solid #2a2f35;41 }42 43 /* App bar */44 .app-bar {45 position: absolute;46 top: 90px;47 left: 0;48 width: 1080px;49 height: 150px;50 display: flex;51 align-items: center;52 padding: 0 32px;53 box-sizing: border-box;54 }55 .back-btn {56 width: 84px; height: 84px; display: flex; align-items: center; justify-content: center;57 margin-right: 16px;58 }59 .app-title {60 font-size: 56px;61 font-weight: 700;62 flex: 1;63 }64 .app-actions {65 display: flex;66 align-items: center;67 gap: 36px;68 margin-right: 12px;69 }70 .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }71 72 /* Tabs */73 .tabs {74 position: absolute;75 top: 240px;76 left: 0;77 width: 1080px;78 height: 92px;79 display: flex;80 align-items: flex-end;81 gap: 48px;82 padding: 0 36px;83 box-sizing: border-box;84 border-bottom: 2px solid #20242a;85 }86 .tab {87 font-size: 42px;88 color: #97a0a9;89 padding-bottom: 22px;90 }91 .tab.active {92 color: #cfe7de;93 border-bottom: 6px solid #2aa39a;94 }95 96 /* Deals section */97 .deals-wrap {98 position: absolute;99 top: 332px;100 left: 0;101 width: 1080px;102 padding: 28px 32px 0;103 box-sizing: border-box;104 }105 .deal-row {106 background: #121519;107 border-radius: 16px;108 border: 1px solid #1f2329;109 padding: 28px;110 display: flex;111 align-items: center;112 gap: 28px;113 }114 .vendor-card {115 width: 220px; height: 120px;116 background: #E0E0E0;117 color: #757575;118 border: 1px solid #BDBDBD;119 display: flex; align-items: center; justify-content: center;120 font-weight: 600;121 border-radius: 12px;122 }123 .price-col {124 flex: 1;125 }126 .strike {127 color: #88919a;128 text-decoration: line-through;129 font-size: 38px;130 margin-right: 8px;131 }132 .price {133 font-size: 70px;134 font-weight: 800;135 color: #d7f2ea;136 }137 .night {138 font-size: 40px; color: #adb6be;139 margin-left: 8px;140 }141 .info-dot {142 display: inline-flex; align-items: center; justify-content: center;143 width: 36px; height: 36px; border-radius: 50%;144 border: 2px solid #2aa39a; color: #2aa39a; font-size: 26px; margin-left: 8px;145 }146 .select-btn {147 background: #2a7f7a;148 color: #eaf6f3;149 font-size: 44px;150 font-weight: 800;151 padding: 34px 46px;152 border-radius: 24px;153 border: none;154 box-shadow: 0 6px 0 #1f5e5a inset;155 }156 .view-more {157 margin-top: 26px;158 color: #82cfc5;159 font-size: 40px;160 display: flex; align-items: center; gap: 8px;161 }162 163 /* Divider */164 .divider {165 height: 2px; background: #1f2329; margin: 26px 32px 0;166 }167 168 /* Rating section */169 .rating-wrap {170 position: absolute;171 top: 650px;172 left: 0;173 width: 1080px;174 padding: 0 32px;175 box-sizing: border-box;176 }177 .section-title {178 font-size: 56px; font-weight: 800; margin-bottom: 32px;179 }180 .rating-head {181 display: flex; align-items: center; gap: 24px; font-size: 52px; margin-bottom: 24px;182 }183 .rating-head .count { color: #a9b1b9; font-size: 44px; }184 .trip-dots {185 display: flex; gap: 10px;186 }187 .dot { width: 24px; height: 24px; border-radius: 50%; background: #2aa39a; }188 .rating-list { margin-top: 18px; }189 .rating-item {190 display: flex; align-items: center; gap: 22px;191 margin: 22px 0;192 color: #cfd6dc;193 font-size: 42px;194 }195 .bar-rail {196 width: 700px; height: 16px; background: #1f2329; border-radius: 10px; overflow: hidden;197 }198 .bar-fill {199 height: 100%; background: #2aa39a;200 }201 202 /* Travelers section */203 .trav-wrap {204 position: absolute;205 top: 1160px;206 left: 0;207 width: 1080px;208 padding: 0 32px;209 box-sizing: border-box;210 }211 .card {212 background: #121519;213 border: 1px solid #1f2329;214 border-radius: 24px;215 padding: 28px;216 color: #cfd6dc;217 }218 .avatar {219 width: 72px; height: 72px; border-radius: 50%;220 background: #24303a; display: inline-flex; align-items: center; justify-content: center; color: #9fb3c3; font-size: 36px;221 margin-right: 16px;222 }223 .card-title {224 font-size: 46px; font-weight: 700; display: inline-block; vertical-align: middle;225 }226 .card-sub {227 margin-top: 16px; font-size: 34px; color: #97a0a9;228 }229 230 /* Bottom sheet overlay */231 .bottom-sheet {232 position: absolute;233 left: 0;234 bottom: 0;235 width: 1080px;236 height: 420px;237 background: #2f3c47;238 border-top-left-radius: 24px;239 border-top-right-radius: 24px;240 box-shadow: 0 -10px 20px rgba(0,0,0,0.4);241 padding: 36px 36px;242 box-sizing: border-box;243 }244 .sheet-title {245 font-size: 44px; color: #eaf0f4; margin-bottom: 36px;246 }247 .sheet-row {248 display: flex; align-items: center; gap: 28px;249 font-size: 44px; color: #eaf6f3;250 padding: 18px 0;251 }252 .plus-circle {253 width: 72px; height: 72px; border-radius: 50%;254 background: #3b4a57;255 border: 2px solid #91d6ca;256 display: flex; align-items: center; justify-content: center;257 color: #91d6ca; font-size: 52px;258 }259 260 /* Simple SVG icons styling */261 svg { fill: none; stroke: #cfd6dc; stroke-width: 5; }262 .heart svg, .share svg { stroke-width: 6; }263</style>264</head>265<body>266<div id="render-target">267 268 <!-- Status Bar -->269 <div class="status-bar">270 <div>3:19</div>271 <div class="status-icons">272 <div class="tiny-icon"></div>273 <div class="tiny-icon"></div>274 </div>275 </div>276 277 <!-- App Bar -->278 <div class="app-bar">279 <div class="back-btn">280 <svg width="60" height="60" viewBox="0 0 60 60">281 <polyline points="36,10 18,30 36,50"></polyline>282 </svg>283 </div>284 <div class="app-title">Obi Hostel</div>285 <div class="app-actions">286 <div class="icon-btn heart">287 <svg width="60" height="60" viewBox="0 0 60 60">288 <path d="M30 50 C10 35 8 22 16 16 C22 11 29 15 30 20 C31 15 38 11 44 16 C52 22 50 35 30 50 Z"></path>289 </svg>290 </div>291 <div class="icon-btn share">292 <svg width="60" height="60" viewBox="0 0 60 60">293 <circle cx="16" cy="44" r="6"></circle>294 <circle cx="44" cy="30" r="6"></circle>295 <circle cx="16" cy="16" r="6"></circle>296 <polyline points="20,42 40,32 20,18"></polyline>297 </svg>298 </div>299 </div>300 </div>301 302 <!-- Tabs -->303 <div class="tabs">304 <div class="tab active">DEALS</div>305 <div class="tab">REVIEWS</div>306 <div class="tab">DETAILS</div>307 </div>308 309 <!-- Deals area -->310 <div class="deals-wrap">311 <div class="deal-row">312 <div class="vendor-card">[IMG: Easytrip Logo]</div>313 <div class="price-col">314 <div>315 <span class="strike">$28</span>316 <span class="price">$25</span>317 <span class="night">a night</span>318 <span class="info-dot">i</span>319 </div>320 </div>321 <button class="select-btn">SELECT</button>322 </div>323 <div class="view-more">VIEW MORE ($25)324 <svg width="30" height="30" viewBox="0 0 30 30" style="stroke:#82cfc5;">325 <polyline points="10,6 20,15 10,24"></polyline>326 </svg>327 </div>328 </div>329 330 <div class="divider"></div>331 332 <!-- Rating section -->333 <div class="rating-wrap">334 <div class="section-title">Hotel rating</div>335 336 <div class="rating-head">337 <div>4.5</div>338 <div class="trip-dots">339 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>340 </div>341 <div class="count">(32)</div>342 </div>343 344 <div class="rating-list">345 <div class="rating-item">346 <div style="width:130px;">4.0</div>347 <div style="width:220px;">Cleanliness</div>348 <div class="bar-rail"><div class="bar-fill" style="width:72%;"></div></div>349 </div>350 <div class="rating-item">351 <div style="width:130px;">4.5</div>352 <div style="width:220px;">Location</div>353 <div class="bar-rail"><div class="bar-fill" style="width:88%;"></div></div>354 </div>355 <div class="rating-item">356 <div style="width:130px;">4.5</div>357 <div style="width:220px;">Service</div>358 <div class="bar-rail"><div class="bar-fill" style="width:86%;"></div></div>359 </div>360 <div class="rating-item">361 <div style="width:130px;">4.0</div>362 <div style="width:220px;">Rooms</div>363 <div class="bar-rail"><div class="bar-fill" style="width:72%;"></div></div>364 </div>365 </div>366 </div>367 368 <!-- Travelers section -->369 <div class="trav-wrap">370 <div class="section-title" style="margin-bottom:18px;">What travelers are saying</div>371 <div class="card">372 <div>373 <span class="avatar">👤</span>374 <span class="card-title">Solo traveller</span>375 </div>376 <div class="card-sub">Comment: Jun 27, 2019 | Date of stay: Jun 2019</div>377 </div>378 </div>379 380 <!-- Bottom sheet -->381 <div class="bottom-sheet">382 <div class="sheet-title">Choose where to save your hotel</div>383 <div class="sheet-row">384 <div class="plus-circle">+</div>385 <div>Add a new trip to save your hotel</div>386 </div>387 </div>388 389</div>390</body>391</html>