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>Hotel Detail UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #0C1116;15 color: #E9EEF3;16 }17 18 /* Status bar (mock) */19 .status-bar {20 position: absolute;21 top: 18px;22 left: 24px;23 right: 24px;24 height: 72px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #FFF;29 opacity: 0.9;30 font-weight: 600;31 }32 .status-left, .status-right {33 display: flex;34 align-items: center;35 gap: 22px;36 font-size: 34px;37 }38 .status-dot {39 width: 28px;40 height: 28px;41 background: #FFF;42 border-radius: 50%;43 opacity: 0.9;44 }45 .status-icon {46 width: 36px;47 height: 36px;48 opacity: 0.95;49 }50 51 /* Hero image area */52 .hero {53 position: absolute;54 top: 110px;55 left: 0;56 width: 1080px;57 height: 930px;58 overflow: hidden;59 }60 .hero .img {61 position: absolute;62 inset: 0;63 background: #E0E0E0;64 border: 1px solid #BDBDBD;65 display: flex;66 align-items: center;67 justify-content: center;68 color: #757575;69 font-size: 36px;70 }71 .hero::after {72 content: "";73 position: absolute;74 inset: 0;75 background: linear-gradient(to bottom, rgba(6,10,14,0.4) 0%, rgba(6,10,14,0.5) 35%, rgba(6,10,14,0.85) 100%);76 pointer-events: none;77 }78 79 /* Floating controls on hero */80 .circle-btn {81 position: absolute;82 width: 96px;83 height: 96px;84 border-radius: 48px;85 background: rgba(20,26,32,0.5);86 display: flex;87 align-items: center;88 justify-content: center;89 backdrop-filter: blur(4px);90 }91 .circle-btn svg { width: 52px; height: 52px; fill: none; stroke: #FFFFFF; stroke-width: 3.5; }92 .back-btn { top: 280px; left: 24px; }93 .fav-btn { top: 270px; right: 160px; }94 .share-btn { top: 270px; right: 36px; }95 96 .carousel-dots {97 position: absolute;98 bottom: 78px;99 left: 50%;100 transform: translateX(-50%);101 display: flex;102 gap: 14px;103 }104 .dot {105 width: 20px;106 height: 20px;107 border-radius: 10px;108 background: rgba(255,255,255,0.5);109 }110 .dot.active { background: #FFFFFF; }111 .img-count {112 position: absolute;113 right: 24px;114 bottom: 60px;115 color: rgba(255,255,255,0.92);116 font-size: 34px;117 font-weight: 600;118 }119 120 /* Details sheet */121 .details {122 position: absolute;123 top: 970px;124 left: 0;125 width: 1080px;126 height: 850px;127 background: #0F161B;128 border-top-left-radius: 48px;129 border-top-right-radius: 48px;130 padding: 48px;131 box-sizing: border-box;132 }133 .hotel-title {134 font-size: 56px;135 font-weight: 800;136 letter-spacing: -0.5px;137 display: flex;138 align-items: center;139 gap: 22px;140 }141 .stars { display: inline-flex; gap: 8px; }142 .stars svg { width: 34px; height: 34px; fill: #C84B3C; }143 .subline {144 margin-top: 18px;145 color: #7FA7BE;146 font-size: 30px;147 font-weight: 700;148 }149 150 .rating-row {151 margin-top: 32px;152 display: flex;153 align-items: center;154 gap: 22px;155 color: #D9E2E8;156 font-size: 36px;157 font-weight: 700;158 }159 .green-dots { display: flex; gap: 10px; }160 .green-dots span {161 width: 22px; height: 22px; border-radius: 11px; background: #5AC78A;162 }163 .count { color: #A7B7C5; font-size: 34px; font-weight: 600; }164 165 .pill {166 margin-top: 28px;167 display: inline-flex;168 align-items: center;169 gap: 18px;170 background: #1E2A30;171 color: #98D6B8;172 padding: 22px 28px;173 border-radius: 22px;174 font-size: 32px;175 font-weight: 700;176 }177 .divider {178 margin: 32px 0;179 height: 2px;180 background: #1F2930;181 }182 .address-row {183 display: flex;184 align-items: center;185 justify-content: space-between;186 color: #C1CDD7;187 font-size: 34px;188 font-weight: 600;189 }190 .address-left {191 display: flex; align-items: center; gap: 18px;192 }193 .address-left svg { width: 34px; height: 34px; fill: none; stroke: #A6B2BD; stroke-width: 3.2; }194 .chevron svg { width: 40px; height: 40px; stroke: #5D6D7A; stroke-width: 4; }195 196 .section-title {197 margin-top: 42px;198 font-size: 44px;199 font-weight: 800;200 color: #C9D4DE;201 }202 203 .price-card {204 margin-top: 24px;205 background: #0E1418;206 border-radius: 28px;207 border: 1px solid #1D262C;208 height: 280px;209 display: flex;210 align-items: center;211 justify-content: space-between;212 padding: 36px;213 box-sizing: border-box;214 }215 .vendor {216 width: 240px;217 height: 160px;218 background: #E0E0E0;219 border: 1px solid #BDBDBD;220 border-radius: 24px;221 display: flex; align-items: center; justify-content: center;222 color: #757575; font-size: 36px; font-weight: 700;223 }224 .price {225 font-size: 72px;226 font-weight: 800;227 color: #DCE3E9;228 }229 .price small { font-size: 30px; color: #98A7B4; font-weight: 700; margin-left: 8px; }230 231 /* Bottom sheet */232 .bottom-sheet {233 position: absolute;234 left: 0;235 right: 0;236 bottom: 88px;237 height: 760px;238 background: #3E5061;239 border-top-left-radius: 36px;240 border-top-right-radius: 36px;241 padding: 42px;242 box-sizing: border-box;243 color: #EAF1F6;244 }245 .sheet-title {246 font-size: 40px;247 font-weight: 700;248 color: #EAF1F6;249 opacity: 0.95;250 }251 .sheet-item {252 margin-top: 28px;253 padding: 26px 8px;254 display: flex;255 align-items: center;256 justify-content: space-between;257 border-bottom: 1px solid rgba(255,255,255,0.12);258 }259 .sheet-left { display: flex; align-items: center; gap: 28px; }260 .thumb {261 width: 100px; height: 100px; border-radius: 16px;262 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;263 display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700;264 }265 .item-text { font-size: 40px; font-weight: 700; }266 .bell svg, .plus svg { width: 44px; height: 44px; stroke: #EAF1F6; stroke-width: 3.2; fill: none; }267 .plus-wrap {268 width: 88px; height: 88px; border-radius: 44px; background: rgba(255,255,255,0.18);269 display: flex; align-items: center; justify-content: center;270 }271 272 /* Home indicator */273 .home-indicator {274 position: absolute;275 bottom: 20px;276 left: 50%;277 transform: translateX(-50%);278 width: 240px;279 height: 10px;280 background: #EDEFF2;281 border-radius: 5px;282 opacity: 0.8;283 }284</style>285</head>286<body>287<div id="render-target">288 289 <!-- Status bar -->290 <div class="status-bar">291 <div class="status-left">292 <div>10:04</div>293 <div class="status-dot"></div>294 <!-- simple magnifier -->295 <svg class="status-icon" viewBox="0 0 24 24">296 <circle cx="10" cy="10" r="7" stroke="#FFF" fill="none" stroke-width="2"></circle>297 <line x1="15" y1="15" x2="22" y2="22" stroke="#FFF" stroke-width="2"></line>298 </svg>299 <!-- N icon -->300 <svg class="status-icon" viewBox="0 0 24 24">301 <path d="M4 19V5l16 14V5" stroke="#FFF" stroke-width="2" fill="none"></path>302 </svg>303 <!-- LR rect -->304 <div style="border:2px solid #FFF;border-radius:6px;padding:2px 6px;font-size:20px;line-height:1;color:#FFF;">LR</div>305 <div style="width:10px;height:10px;background:#FFF;border-radius:50%;"></div>306 </div>307 <div class="status-right">308 <!-- wifi -->309 <svg class="status-icon" viewBox="0 0 24 24">310 <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M9 15c2-2 4-2 6 0M12 18h0" stroke="#FFF" stroke-width="2" fill="none" stroke-linecap="round"></path>311 </svg>312 <!-- battery -->313 <svg class="status-icon" viewBox="0 0 24 24">314 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#FFF" stroke-width="2" fill="none"></rect>315 <rect x="4" y="8" width="12" height="8" fill="#FFF"></rect>316 <rect x="20" y="10" width="2" height="6" fill="#FFF"></rect>317 </svg>318 </div>319 </div>320 321 <!-- Hero image -->322 <div class="hero">323 <div class="img">[IMG: Vancouver city hotel at dusk]</div>324 325 <!-- Floating buttons -->326 <div class="circle-btn back-btn">327 <svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7" stroke-linecap="round" stroke-linejoin="round"/></svg>328 </div>329 <div class="circle-btn fav-btn">330 <svg viewBox="0 0 24 24"><path d="M12 20s-6-4.35-8-7.5C2 9 3.9 6 7 6c2 0 3.3 1.3 5 3 1.7-1.7 3-3 5-3 3.1 0 5 3 3 6.5C18 15.65 12 20 12 20z" fill="none"/></svg>331 </div>332 <div class="circle-btn share-btn">333 <svg viewBox="0 0 24 24">334 <circle cx="6" cy="12" r="3"></circle>335 <circle cx="18" cy="6" r="3"></circle>336 <circle cx="18" cy="18" r="3"></circle>337 <path d="M8.7 10.8l7.2-3.6M8.7 13.2l7.2 3.6" stroke="#FFFFFF" stroke-width="3.5" fill="none" stroke-linecap="round"></path>338 </svg>339 </div>340 341 <!-- Carousel dots and count -->342 <div class="carousel-dots">343 <div class="dot active"></div>344 <div class="dot"></div>345 <div class="dot"></div>346 </div>347 <div class="img-count">1/123</div>348 </div>349 350 <!-- Details section -->351 <div class="details">352 <div class="hotel-title">353 <span>Hyatt Regency Vancouver</span>354 <span class="stars">355 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5.1 4.9 1.3 7.4L12 18l-6.3 3.6 1.3-7.4L2 9.3l7-1z"></path></svg>356 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5.1 4.9 1.3 7.4L12 18l-6.3 3.6 1.3-7.4L2 9.3l7-1z"></path></svg>357 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5.1 4.9 1.3 7.4L12 18l-6.3 3.6 1.3-7.4L2 9.3l7-1z"></path></svg>358 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5.1 4.9 1.3 7.4L12 18l-6.3 3.6 1.3-7.4L2 9.3l7-1z"></path></svg>359 </span>360 </div>361 <div class="subline">DEC 15 – 16, 2023, 3 ADULTS, 2 ROOMS ✎</div>362 363 <div class="rating-row">364 <div>4.5</div>365 <!-- simple rating circles as TripAdvisor style -->366 <div class="green-dots">367 <span></span><span></span><span></span><span></span><span style="opacity:0.35"></span>368 </div>369 <div class="count">(5,945)</div>370 </div>371 372 <div class="pill">373 <!-- thumbs up -->374 <svg viewBox="0 0 24 24" width="34" height="34">375 <path d="M10 22H6a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h4v11zM10 9l4-6 2 1v5h4a2 2 0 0 1 2 2l-3 9a2 2 0 0 1-2 1H10" stroke="#98D6B8" fill="none" stroke-width="2"></path>376 </svg>377 <span>Location 5.0/5</span>378 </div>379 380 <div class="divider"></div>381 382 <div class="address-row">383 <div class="address-left">384 <svg viewBox="0 0 24 24">385 <path d="M12 2C8 2 5 5 5 9c0 6 7 13 7 13s7-7 7-13c0-4-3-7-7-7z" fill="none"></path>386 <circle cx="12" cy="9" r="3"></circle>387 </svg>388 <span>655 Burrard Street, V6C 2R7 Vancouver, Canada</span>389 </div>390 <div class="chevron">391 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>392 </div>393 </div>394 395 <div class="section-title">Lowest price for 1 night</div>396 397 <div class="price-card">398 <div class="vendor">algotels</div>399 <div class="price">$395<small>total</small></div>400 </div>401 </div>402 403 <!-- Bottom sheet -->404 <div class="bottom-sheet">405 <div class="sheet-title">Choose where to save your hotel</div>406 407 <div class="sheet-item">408 <div class="sheet-left">409 <div class="thumb">[IMG]</div>410 <div class="item-text">Trip from Toronto to Vancouver</div>411 </div>412 <div class="bell">413 <svg viewBox="0 0 24 24">414 <path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zM18 16H6l1-2V9a5 5 0 0 1 10 0v5l1 2z" fill="none"></path>415 </svg>416 </div>417 </div>418 419 <div class="sheet-item" style="border-bottom:none;">420 <div class="sheet-left">421 <div class="plus-wrap">422 <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" stroke-linecap="round"></path></svg>423 </div>424 <div class="item-text" style="color:#F4F7FA;">Add a new trip to save your hotel</div>425 </div>426 <div style="width:44px;height:44px;"></div>427 </div>428 </div>429 430 <div class="home-indicator"></div>431</div>432</body>433</html>