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>Booking UI Mock</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 border-radius: 0;16 }17 18 /* Header */19 .header {20 position: relative;21 width: 100%;22 height: 520px;23 background: #003580;24 color: #fff;25 }26 .statusbar {27 position: absolute;28 top: 16px;29 left: 32px;30 right: 32px;31 display: flex;32 justify-content: space-between;33 align-items: center;34 font-size: 32px;35 opacity: 0.9;36 }37 .status-icons {38 display: flex;39 gap: 20px;40 align-items: center;41 }42 .status-dot {43 width: 12px; height: 12px; background: rgba(255,255,255,0.8); border-radius: 50%;44 }45 .brand {46 position: absolute;47 top: 140px;48 width: 100%;49 text-align: center;50 font-weight: 800;51 font-size: 64px;52 letter-spacing: 0.3px;53 }54 .header-actions {55 position: absolute;56 right: 36px;57 top: 136px;58 display: flex;59 gap: 24px;60 }61 .icon-btn {62 width: 60px; height: 60px;63 }64 .top-nav {65 position: absolute;66 bottom: 32px;67 left: 32px;68 right: 32px;69 display: flex;70 gap: 30px;71 align-items: center;72 }73 .chip {74 display: flex;75 align-items: center;76 gap: 18px;77 color: #fff;78 border: 2px solid rgba(255,255,255,0.6);79 border-radius: 38px;80 padding: 18px 26px;81 font-size: 36px;82 white-space: nowrap;83 }84 .chip.active {85 background: rgba(255,255,255,0.08);86 border-color: #fff;87 }88 .chip svg { width: 42px; height: 42px; stroke: #fff; }89 90 /* Search box */91 .search-panel {92 position: absolute;93 top: 468px; /* slightly overlaps the header */94 left: 48px;95 width: 984px;96 background: #fff;97 border: 8px solid #F0B22A;98 border-radius: 28px;99 box-shadow: 0 8px 18px rgba(0,0,0,0.18);100 overflow: hidden;101 }102 .search-row {103 display: flex;104 align-items: center;105 gap: 26px;106 padding: 34px 32px;107 border-top: 6px solid #F0B22A;108 font-size: 36px;109 color: #212121;110 }111 .search-row:first-child { border-top: none; }112 .search-row svg { width: 48px; height: 48px; stroke: #333; }113 .search-button {114 background: #2A61D6;115 color: #fff;116 font-weight: 700;117 font-size: 40px;118 text-align: center;119 padding: 38px 0;120 border-top: 6px solid #F0B22A;121 }122 123 /* Sections */124 .content {125 position: absolute;126 top: 880px;127 left: 32px;128 right: 32px;129 padding-bottom: 280px;130 }131 .section-title {132 font-size: 56px;133 font-weight: 800;134 color: #111;135 margin: 32px 8px;136 }137 .cards-row {138 display: flex;139 gap: 32px;140 padding: 8px;141 }142 .card-blue {143 flex: 1;144 background: #0B3FA7;145 color: #fff;146 border-radius: 28px;147 padding: 40px;148 min-height: 280px;149 display: flex;150 flex-direction: column;151 justify-content: center;152 box-shadow: 0 8px 16px rgba(0,0,0,0.08);153 }154 .card-blue .genius {155 font-size: 46px;156 font-weight: 800;157 margin-bottom: 14px;158 }159 .card-outline {160 flex: 1;161 background: #fff;162 border: 3px solid #2A61D6;163 border-radius: 28px;164 padding: 40px;165 min-height: 280px;166 color: #1a1a1a;167 box-shadow: 0 8px 16px rgba(0,0,0,0.04);168 }169 .card-outline .title {170 font-size: 42px;171 font-weight: 800;172 margin-bottom: 18px;173 }174 175 .section-title.small {176 margin-top: 40px;177 }178 .list-card {179 background: #fff;180 border-radius: 28px;181 box-shadow: 0 8px 18px rgba(0,0,0,0.12);182 padding: 28px;183 display: flex;184 align-items: center;185 gap: 28px;186 width: 96%;187 margin: 20px 8px;188 }189 .thumb {190 width: 140px;191 height: 140px;192 background: #E0E0E0;193 border: 1px solid #BDBDBD;194 display: flex;195 justify-content: center;196 align-items: center;197 color: #757575;198 border-radius: 16px;199 font-size: 28px;200 }201 .list-info {202 display: flex;203 flex-direction: column;204 }205 .list-info .name {206 font-size: 40px;207 font-weight: 800;208 color: #111;209 margin-bottom: 8px;210 }211 .list-info .meta {212 font-size: 34px;213 color: #555;214 }215 216 /* Bottom navigation */217 .bottom-nav {218 position: absolute;219 left: 0; right: 0; bottom: 0;220 height: 190px;221 background: #fff;222 border-top: 1px solid #E0E0E0;223 display: flex;224 justify-content: space-around;225 align-items: center;226 }227 .tab {228 display: flex;229 flex-direction: column;230 align-items: center;231 gap: 12px;232 font-size: 28px;233 color: #222;234 }235 .tab svg { width: 58px; height: 58px; stroke: #222; }236 .tab.active { color: #2A61D6; }237 .tab.active svg { stroke: #2A61D6; }238 .profile-dot {239 width: 64px; height: 64px; border-radius: 50%;240 border: 4px solid #2A61D6;241 display: flex; justify-content: center; align-items: center;242 color: #2A61D6; font-weight: 700;243 }244 .home-indicator {245 position: absolute;246 bottom: 12px; left: 50%;247 transform: translateX(-50%);248 width: 200px; height: 10px;249 background: #000; opacity: 0.12; border-radius: 6px;250 }251</style>252</head>253<body>254<div id="render-target">255 <div class="header">256 <div class="statusbar">257 <div>2:53</div>258 <div class="status-icons">259 <div class="status-dot"></div>260 <div class="status-dot"></div>261 <div class="status-dot"></div>262 <div class="status-dot"></div>263 </div>264 </div>265 266 <div class="brand">Booking.com</div>267 <div class="header-actions">268 <!-- chat bubble -->269 <svg class="icon-btn" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">270 <path d="M4 5h16v11H8l-4 4V5z"/>271 </svg>272 <!-- bell -->273 <svg class="icon-btn" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">274 <path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z"/>275 <path d="M18 16V11a6 6 0 0 0-12 0v5l-2 2h16l-2-2z"/>276 </svg>277 </div>278 279 <div class="top-nav">280 <div class="chip active">281 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">282 <path d="M3 11h18M5 11V8h14v3M4 18h16v-4H4v4z"/>283 </svg>284 <span>Stays</span>285 </div>286 <div class="chip">287 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">288 <path d="M2 16l20-6-3 6H6l-4 0zM8 18l8 0"/>289 </svg>290 <span>Flights</span>291 </div>292 <div class="chip">293 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">294 <path d="M3 15h18M5 15l2-4h10l2 4M6 18a2 2 0 1 0 0-0.1M18 18a2 2 0 1 0 0-0.1"/>295 </svg>296 <span>Car rental</span>297 </div>298 <div class="chip">299 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">300 <path d="M3 13h18M6 8h12l2 5H4l2-5zM6 18a2 2 0 1 0 0-0.1M18 18a2 2 0 1 0 0-0.1"/>301 </svg>302 <span>Taxi</span>303 </div>304 </div>305 </div>306 307 <!-- Search floating panel -->308 <div class="search-panel">309 <div class="search-row">310 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">311 <circle cx="11" cy="11" r="7"></circle>312 <path d="M21 21l-4.5-4.5"></path>313 </svg>314 <div>Budapest</div>315 </div>316 <div class="search-row">317 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">318 <rect x="3" y="4" width="18" height="16" rx="2"></rect>319 <path d="M3 9h18"></path>320 </svg>321 <div>Sun, Jul 02 - Sat, Jul 08</div>322 </div>323 <div class="search-row">324 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">325 <path d="M12 12a4 4 0 1 0-0.1 0M4 20c0-3 4-5 8-5s8 2 8 5"></path>326 </svg>327 <div>2 rooms · 4 adults · 0 children</div>328 </div>329 <div class="search-button">Search</div>330 </div>331 332 <!-- Main content -->333 <div class="content">334 <div class="section-title">Travel more, spend less</div>335 <div class="cards-row">336 <div class="card-blue">337 <div class="genius">Genius</div>338 <div style="font-size: 36px; line-height: 1.35;">339 Research, you're at <span style="font-weight:700;">Genius Level 1</span> in our loyalty program340 </div>341 </div>342 <div class="card-outline">343 <div class="title">10% discounts</div>344 <div style="font-size: 34px; color:#444; line-height:1.5;">345 Enjoy discounts at participating properties worldwide346 </div>347 </div>348 </div>349 350 <div class="section-title small">Continue your search</div>351 <div class="list-card">352 <div class="thumb">[IMG: Budapest Thumbnail]</div>353 <div class="list-info">354 <div class="name">Budapest</div>355 <div class="meta">2 - 6 Aug, 4 adults</div>356 </div>357 </div>358 </div>359 360 <!-- Bottom nav -->361 <div class="bottom-nav">362 <div class="tab active">363 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">364 <circle cx="11" cy="11" r="7"></circle>365 <path d="M21 21l-4.5-4.5"></path>366 </svg>367 <div>Search</div>368 </div>369 <div class="tab">370 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">371 <path d="M12 21s-6-4.35-6-8.5a6 6 0 1 1 12 0C18 16.65 12 21 12 21z"></path>372 </svg>373 <div>Saved</div>374 </div>375 <div class="tab">376 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">377 <rect x="4" y="6" width="16" height="12" rx="2"></rect>378 <path d="M9 6V4h6v2"></path>379 </svg>380 <div>Bookings</div>381 </div>382 <div class="tab">383 <div class="profile-dot">C</div>384 <div>Profile</div>385 </div>386 <div class="home-indicator"></div>387 </div>388</div>389</body>390</html>