GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Booking UI Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Top blue header */18 .top-header {19 background: #0B4DB8; /* Booking blue */20 height: 640px;21 width: 100%;22 color: #fff;23 position: relative;24 }25 .status-row {26 display: flex;27 justify-content: space-between;28 align-items: center;29 padding: 28px 40px 0 40px;30 opacity: 0.9;31 font-size: 34px;32 }33 .logo {34 text-align: center;35 font-size: 64px;36 font-weight: 800;37 letter-spacing: 0.5px;38 margin-top: 32px;39 }40 .top-actions {41 position: absolute;42 right: 36px;43 top: 110px;44 display: flex;45 gap: 24px;46 }47 .action-icon {48 width: 72px;49 height: 72px;50 border: 2px solid rgba(255,255,255,0.8);51 border-radius: 36px;52 display: flex;53 align-items: center;54 justify-content: center;55 }56 .tabs {57 margin: 48px 26px 0 26px;58 display: flex;59 align-items: center;60 gap: 18px;61 overflow: hidden;62 }63 .tab {64 flex: 1;65 min-width: 0;66 display: flex;67 align-items: center;68 justify-content: center;69 gap: 14px;70 color: #e7eeff;71 opacity: 0.9;72 padding: 18px 12px;73 border-radius: 48px;74 border: 2px solid transparent;75 white-space: nowrap;76 font-weight: 600;77 font-size: 36px;78 }79 .tab.selected {80 border-color: #ffffff;81 background: rgba(255,255,255,0.12);82 }83 .tab svg { fill: #fff; opacity: 0.95; }84 /* Search card */85 .search-card {86 position: absolute;87 left: 40px;88 right: 40px;89 top: 520px;90 background: #fff;91 border: 10px solid #E8A63A; /* golden outline */92 border-radius: 28px;93 box-shadow: 0 8px 22px rgba(0,0,0,0.16);94 overflow: hidden;95 }96 .search-row {97 display: flex;98 align-items: center;99 gap: 22px;100 padding: 34px 28px;101 font-size: 40px;102 color: #1b1b1b;103 }104 .search-row + .search-row {105 border-top: 8px solid #E8A63A;106 }107 .search-btn {108 background: #2F5DE7;109 color: #fff;110 text-align: center;111 font-weight: 700;112 font-size: 44px;113 padding: 30px 20px;114 border-top: 8px solid #E8A63A;115 }116 117 /* Content area */118 .content {119 position: absolute;120 left: 0;121 right: 0;122 top: 980px;123 padding: 0 40px 220px 40px; /* leave room for bottom nav */124 }125 h2.section-title {126 font-size: 58px;127 margin: 36px 0 24px 0;128 color: #111;129 }130 .benefits-row {131 display: flex;132 gap: 26px;133 margin-top: 14px;134 }135 .benefit-card {136 flex: 1;137 min-height: 260px;138 border-radius: 28px;139 padding: 30px;140 box-sizing: border-box;141 }142 .benefit-card.primary {143 background: #0B4DB8;144 color: #fff;145 box-shadow: 0 6px 16px rgba(0,0,0,0.15);146 }147 .benefit-card.outline {148 border: 6px solid #0B4DB8;149 color: #1a1a1a;150 background: #fff;151 }152 .benefit-title {153 font-weight: 800;154 font-size: 40px;155 margin-bottom: 10px;156 }157 .benefit-sub {158 font-size: 36px;159 line-height: 1.3;160 opacity: 0.95;161 }162 163 /* Continue search card */164 .recent-card {165 margin-top: 26px;166 background: #fff;167 border-radius: 26px;168 box-shadow: 0 8px 18px rgba(0,0,0,0.12);169 padding: 28px;170 display: flex;171 align-items: center;172 gap: 24px;173 }174 .thumb {175 width: 120px;176 height: 120px;177 background: #E0E0E0;178 border: 1px solid #BDBDBD;179 color: #757575;180 display: flex;181 align-items: center;182 justify-content: center;183 font-size: 26px;184 border-radius: 14px;185 flex-shrink: 0;186 }187 .recent-title {188 font-size: 46px;189 font-weight: 700;190 margin: 4px 0 6px 0;191 color: #1b1b1b;192 }193 .recent-sub {194 color: #666;195 font-size: 36px;196 }197 198 /* Bottom navigation */199 .bottom-nav {200 position: absolute;201 left: 0;202 bottom: 0;203 width: 100%;204 height: 190px;205 background: #fff;206 border-top: 1px solid #e6e6e6;207 display: flex;208 align-items: center;209 justify-content: space-around;210 }211 .nav-item {212 flex: 1;213 text-align: center;214 color: #333;215 font-size: 28px;216 }217 .nav-item .label {218 margin-top: 10px;219 font-size: 32px;220 }221 .nav-item.active {222 color: #2F5DE7;223 }224 .nav-icon {225 width: 56px;226 height: 56px;227 margin: 0 auto;228 display: block;229 }230 .home-indicator {231 position: absolute;232 bottom: 16px;233 left: 50%;234 transform: translateX(-50%);235 width: 300px;236 height: 10px;237 background: #000;238 opacity: 0.25;239 border-radius: 6px;240 }241</style>242</head>243<body>244<div id="render-target">245 246 <!-- Top blue section -->247 <div class="top-header">248 <div class="status-row">249 <div>1:38</div>250 <div style="display:flex; gap:16px; align-items:center;">251 <span>◔</span>252 <span>⬤</span>253 <span>◉</span>254 </div>255 </div>256 257 <div class="logo">Booking.com</div>258 259 <div class="top-actions">260 <div class="action-icon">261 <svg width="34" height="34" viewBox="0 0 24 24">262 <path fill="#fff" d="M12 3c-4 0-7 2.7-7 6v4l-2 2v1h18v-1l-2-2V9c0-3.3-3-6-7-6zM8 19a4 4 0 0 0 8 0H8z"/>263 </svg>264 </div>265 <div class="action-icon">266 <svg width="34" height="34" viewBox="0 0 24 24">267 <path fill="#fff" d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V9a6 6 0 1 0-12 0v7l-2 2v1h16v-1l-2-2z"/>268 </svg>269 </div>270 </div>271 272 <div class="tabs">273 <div class="tab selected">274 <svg width="40" height="40" viewBox="0 0 24 24">275 <path d="M3 10h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8zm3-6h2v4H6V4zm10 0h2v4h-2V4z" fill="#fff"/>276 </svg>277 <span>Stays</span>278 </div>279 <div class="tab">280 <svg width="40" height="40" viewBox="0 0 24 24">281 <path d="M2 16l8-3 4 3 8-6-6-1-4 3-3-6-2 1 2 7z" fill="#fff"/>282 </svg>283 <span>Flights</span>284 </div>285 <div class="tab">286 <svg width="40" height="40" viewBox="0 0 24 24">287 <path d="M5 13h14l-1.5-4.5A3 3 0 0 0 14.7 6H9.3A3 3 0 0 0 6.5 8.5L5 13zm-2 3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-1H3v1z" fill="#fff"/>288 </svg>289 <span>Car rental</span>290 </div>291 <div class="tab">292 <svg width="40" height="40" viewBox="0 0 24 24">293 <rect x="3" y="6" width="18" height="12" rx="2" fill="#fff"/>294 </svg>295 <span>Taxi</span>296 </div>297 </div>298 </div>299 300 <!-- Search card -->301 <div class="search-card">302 <div class="search-row">303 <svg width="46" height="46" viewBox="0 0 24 24">304 <path fill="#333" d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 5 1.5-1.5-5-5zM9.5 14A4.5 4.5 0 1 1 14 9.5 4.505 4.505 0 0 1 9.5 14z"/>305 </svg>306 <div>Amsterdam</div>307 </div>308 <div class="search-row">309 <svg width="46" height="46" viewBox="0 0 24 24">310 <path fill="#333" d="M7 2h2v2h6V2h2v2h3v16H4V4h3V2zm12 6H5v10h14V8z"/>311 </svg>312 <div>Sun, Dec 17 - Sun, Dec 24</div>313 </div>314 <div class="search-row">315 <svg width="46" height="46" viewBox="0 0 24 24">316 <path fill="#333" d="M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0 2c-4 0-8 2-8 4v2h16v-2c0-2-4-4-8-4z"/>317 </svg>318 <div>1 room · 1 adult · 0 children</div>319 </div>320 <div class="search-btn">Search</div>321 </div>322 323 <!-- Main content -->324 <div class="content">325 <h2 class="section-title">Travel more, spend less</h2>326 <div class="benefits-row">327 <div class="benefit-card primary">328 <div class="benefit-title">Genius</div>329 <div class="benefit-sub">Larson, you're at <strong>Genius Level 1</strong><br>in our loyalty program</div>330 </div>331 <div class="benefit-card outline">332 <div class="benefit-title">15% discounts on stays</div>333 <div class="benefit-sub">Enjoy discounts at participating<br>properties worldwide</div>334 </div>335 </div>336 337 <h2 class="section-title" style="margin-top: 42px;">Continue your search</h2>338 <div class="recent-card">339 <div class="thumb">[IMG: Berlin]</div>340 <div>341 <div class="recent-title">Berlin</div>342 <div class="recent-sub">15 - 16 Dec, 1 adult</div>343 </div>344 </div>345 </div>346 347 <!-- Bottom navigation -->348 <div class="bottom-nav">349 <div class="nav-item active">350 <svg class="nav-icon" viewBox="0 0 24 24">351 <path fill="#2F5DE7" d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-5v-7H10v7H5a2 2 0 0 1-2-2v-9z"/>352 </svg>353 <div class="label">Search</div>354 </div>355 <div class="nav-item">356 <svg class="nav-icon" viewBox="0 0 24 24">357 <path fill="#333" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5A4.5 4.5 0 0 1 6.5 4c1.74 0 3.41.81 4.5 2.09A6.1 6.1 0 0 1 15.5 4 4.5 4.5 0 0 1 20 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>358 </svg>359 <div class="label">Saved</div>360 </div>361 <div class="nav-item">362 <svg class="nav-icon" viewBox="0 0 24 24">363 <path fill="#333" d="M6 7h12l1 13H5L6 7zm2-3h8l1 3H7l1-3z"/>364 </svg>365 <div class="label">Bookings</div>366 </div>367 <div class="nav-item">368 <svg class="nav-icon" viewBox="0 0 24 24">369 <circle cx="12" cy="8" r="4" fill="#333"/>370 <path fill="#333" d="M4 20c0-4 4-6 8-6s8 2 8 6v1H4v-1z"/>371 </svg>372 <div class="label">Profile</div>373 </div>374 <div class="home-indicator"></div>375 </div>376 377</div>378</body>379</html>