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 Flights UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 color: #1f1f1f;17 }18 19 /* Header */20 .header {21 position: relative;22 height: 430px;23 background: #0a57b7;24 color: #fff;25 padding: 40px 40px 0 40px;26 }27 .header-top {28 display: flex;29 justify-content: space-between;30 align-items: center;31 }32 .brand {33 position: absolute;34 left: 0; right: 0;35 top: 140px;36 text-align: center;37 font-weight: 800;38 font-size: 64px;39 letter-spacing: 0.2px;40 }41 .header-actions {42 position: absolute;43 right: 40px;44 top: 40px;45 display: flex;46 gap: 28px;47 }48 .icon-btn {49 width: 56px;50 height: 56px;51 border-radius: 28px;52 border: 2px solid rgba(255,255,255,0.5);53 display: flex; align-items: center; justify-content: center;54 background: transparent;55 }56 .badge {57 position: absolute;58 right: -6px;59 top: -6px;60 width: 36px;61 height: 36px;62 border-radius: 18px;63 background: #e53935;64 color: #fff;65 font-weight: 700;66 font-size: 22px;67 display: flex; align-items: center; justify-content: center;68 border: 2px solid #fff;69 }70 71 /* Category tabs */72 .tabs {73 position: absolute;74 bottom: 24px;75 left: 40px;76 right: 40px;77 display: flex;78 gap: 54px;79 align-items: center;80 }81 .tab {82 color: #d7e6ff;83 display: flex; align-items: center; gap: 14px;84 font-size: 36px;85 font-weight: 600;86 }87 .tab svg { width: 44px; height: 44px; }88 .tab.active {89 color: #ffffff;90 padding: 18px 36px;91 border: 2px solid #cfe1ff;92 border-radius: 44px;93 background: rgba(255,255,255,0.08);94 }95 96 /* Search Card */97 .search-card {98 position: absolute;99 left: 30px;100 right: 30px;101 top: 320px;102 background: #fff;103 border: 6px solid #ffb300;104 border-radius: 24px;105 box-shadow: 0 8px 20px rgba(0,0,0,0.18);106 overflow: hidden;107 }108 .card-section {109 padding: 30px 34px;110 border-top: 1px solid #e6e6e6;111 }112 .card-section:first-child { border-top: none; }113 .radio-group {114 display: flex;115 gap: 44px;116 align-items: center;117 font-size: 38px;118 }119 .radio {120 display: inline-flex;121 align-items: center;122 gap: 14px;123 color: #333;124 }125 .radio .dot {126 width: 36px; height: 36px;127 border-radius: 50%;128 border: 4px solid #0a57b7;129 display: inline-flex; align-items: center; justify-content: center;130 }131 .radio.selected .dot::after {132 content: "";133 width: 18px; height: 18px;134 background: #0a57b7; border-radius: 50%;135 }136 137 .field-row {138 display: flex; align-items: center;139 gap: 24px;140 font-size: 40px;141 }142 .field-row .label-strong { font-weight: 800; }143 .field-row .sub { color: #555; font-weight: 600; }144 .field-icon {145 width: 52px; height: 52px;146 display: inline-flex; align-items: center; justify-content: center;147 color: #0a57b7;148 }149 .swap {150 margin-left: auto;151 width: 52px; height: 52px;152 display: inline-flex; align-items: center; justify-content: center;153 color: #0a57b7;154 }155 .divider {156 margin: 18px 0 8px 76px;157 height: 1px; background: #e6e6e6;158 }159 160 .search-btn {161 margin: 0;162 background: #0a57b7;163 color: #fff;164 text-align: center;165 font-weight: 800;166 font-size: 44px;167 padding: 30px 20px;168 border-top: 1px solid rgba(0,0,0,0.06);169 }170 171 /* Content below card */172 .content {173 position: relative;174 margin-top: 1060px;175 padding: 0 40px;176 }177 .toggle-row {178 display: flex;179 align-items: center;180 justify-content: space-between;181 margin: 30px 0 20px 0;182 }183 .toggle-row .label {184 font-size: 40px;185 font-weight: 600;186 }187 .switch {188 width: 140px; height: 68px;189 background: #bdbdbd;190 border-radius: 34px;191 position: relative;192 }193 .switch::after {194 content: "";195 position: absolute;196 left: 6px; top: 6px;197 width: 56px; height: 56px;198 background: #ffffff;199 border-radius: 28px;200 box-shadow: 0 2px 4px rgba(0,0,0,0.3);201 }202 203 .section-title {204 font-size: 54px;205 font-weight: 800;206 margin: 40px 0 20px 0;207 }208 209 .hotel-cards {210 display: flex;211 gap: 28px;212 overflow: hidden;213 padding-bottom: 140px; /* space before bottom bar */214 }215 .hotel-card {216 width: 470px;217 border-radius: 24px;218 overflow: hidden;219 border: 1px solid #e0e0e0;220 background: #fff;221 box-shadow: 0 4px 10px rgba(0,0,0,0.06);222 }223 .hotel-image {224 width: 100%;225 height: 320px;226 background: #E0E0E0;227 border-bottom: 1px solid #BDBDBD;228 display: flex; align-items: center; justify-content: center;229 color: #757575;230 font-size: 36px;231 }232 .hotel-info {233 padding: 20px 24px;234 font-size: 34px;235 color: #333;236 }237 238 /* Bottom navigation */239 .bottom-bar {240 position: absolute;241 left: 0; right: 0; bottom: 0;242 height: 180px;243 background: #ffffff;244 border-top: 1px solid #e6e6e6;245 display: flex;246 justify-content: space-around;247 align-items: center;248 }249 .nav-item {250 display: flex;251 flex-direction: column;252 align-items: center;253 gap: 12px;254 color: #555;255 font-size: 28px;256 font-weight: 600;257 }258 .nav-item .icon {259 width: 64px; height: 64px;260 display: flex; align-items: center; justify-content: center;261 }262 .nav-item.active { color: #0a57b7; }263 .profile-avatar {264 width: 64px; height: 64px; border-radius: 32px;265 background: #e67e22; color: #fff; font-weight: 800;266 display: flex; align-items: center; justify-content: center;267 border: 3px solid #fff;268 box-shadow: 0 2px 4px rgba(0,0,0,0.15);269 }270</style>271</head>272<body>273<div id="render-target">274 275 <!-- Header -->276 <div class="header">277 <div class="header-actions">278 <div class="icon-btn" aria-label="Chat">279 <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="white" stroke-width="2">280 <path d="M4 5h16v11H8l-4 4V5z"/>281 </svg>282 </div>283 <div class="icon-btn" style="position: relative;" aria-label="Notifications">284 <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="white" stroke-width="2">285 <path d="M12 3a5 5 0 0 0-5 5v4l-2 3h14l-2-3V8a5 5 0 0 0-5-5z"/>286 <path d="M10 20a2 2 0 0 0 4 0"/>287 </svg>288 <div class="badge">1</div>289 </div>290 </div>291 292 <div class="brand">Booking.com</div>293 294 <div class="tabs">295 <div class="tab">296 <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">297 <rect x="3" y="9" width="18" height="10" rx="2"></rect>298 <path d="M7 9V7a5 5 0 0 1 10 0v2"></path>299 </svg>300 <span>Stays</span>301 </div>302 <div class="tab active">303 <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">304 <path d="M2 16l20-5-5 6-6-1-4 3z"></path>305 </svg>306 <span>Flights</span>307 </div>308 <div class="tab">309 <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">310 <rect x="3" y="10" width="18" height="8" rx="2"></rect>311 <path d="M5 10l2-3h10l2 3"></path>312 </svg>313 <span>Car rental</span>314 </div>315 <div class="tab">316 <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">317 <rect x="3" y="4" width="18" height="12" rx="2"></rect>318 <path d="M6 18h12"></path>319 </svg>320 <span>Taxi</span>321 </div>322 </div>323 </div>324 325 <!-- Search Card -->326 <div class="search-card">327 <div class="card-section">328 <div class="radio-group">329 <div class="radio selected"><span class="dot"></span><span>Round-trip</span></div>330 <div class="radio"><span class="dot" style="border-color:#c7c7c7;"></span><span>One-way</span></div>331 <div class="radio"><span class="dot" style="border-color:#c7c7c7;"></span><span>Multi-city</span></div>332 </div>333 </div>334 335 <div class="card-section">336 <div class="field-row">337 <div class="field-icon">338 <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="#0a57b7" stroke-width="2">339 <path d="M2 16l20-5-5 6-6-1-4 3z"></path>340 </svg>341 </div>342 <div><span class="sub">New York · All airports</span></div>343 <div class="swap" title="Swap">344 <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="#0a57b7" stroke-width="2">345 <path d="M7 4l-3 3 3 3M4 7h12"></path>346 <path d="M17 20l3-3-3-3M20 17H8"></path>347 </svg>348 </div>349 </div>350 <div class="divider"></div>351 <div class="field-row">352 <div class="field-icon">353 <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="#0a57b7" stroke-width="2">354 <path d="M2 16l20-5-5 6-6-1-4 3z"></path>355 </svg>356 </div>357 <div><span class="label-strong">BVA</span> <span class="sub">Beauvais–Tillé Airport</span></div>358 </div>359 </div>360 361 <div class="card-section">362 <div class="field-row">363 <div class="field-icon">364 <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="#0a57b7" stroke-width="2">365 <rect x="3" y="4" width="18" height="17" rx="2"></rect>366 <path d="M8 2v4M16 2v4M3 10h18"></path>367 </svg>368 </div>369 <div><span class="sub">Sat, Sep 30 - Sat, Oct 07</span></div>370 </div>371 </div>372 373 <div class="card-section">374 <div class="field-row">375 <div class="field-icon">376 <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="#0a57b7" stroke-width="2">377 <path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"></path>378 <path d="M4 22c1.5-4 6-6 8-6s6.5 2 8 6"></path>379 </svg>380 </div>381 <div><span class="sub">1 adult, Economy</span></div>382 </div>383 </div>384 385 <div class="search-btn">Search</div>386 </div>387 388 <!-- Content -->389 <div class="content">390 <div class="toggle-row">391 <div class="label">Direct flights only</div>392 <div class="switch" aria-label="Toggle"></div>393 </div>394 395 <div class="section-title">Nearby options for tonight</div>396 397 <div class="hotel-cards">398 <div class="hotel-card">399 <div class="hotel-image">[IMG: Hotel Room]</div>400 <div class="hotel-info">Cozy room with amenities</div>401 </div>402 <div class="hotel-card">403 <div class="hotel-image">[IMG: Hotel Room]</div>404 <div class="hotel-info">Studio near city center</div>405 </div>406 </div>407 </div>408 409 <!-- Bottom Navigation -->410 <div class="bottom-bar">411 <div class="nav-item active">412 <div class="icon">413 <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#0a57b7" stroke-width="2">414 <circle cx="11" cy="11" r="7"></circle>415 <path d="M21 21l-5-5"></path>416 </svg>417 </div>418 <div>Search</div>419 </div>420 <div class="nav-item">421 <div class="icon">422 <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#555" stroke-width="2">423 <path d="M12 21s-6-4.35-9-8.35A6 6 0 0 1 12 5a6 6 0 0 1 9 7.65C18 16.65 12 21 12 21z"></path>424 </svg>425 </div>426 <div>Saved</div>427 </div>428 <div class="nav-item">429 <div class="icon">430 <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#555" stroke-width="2">431 <rect x="6" y="7" width="12" height="13" rx="2"></rect>432 <path d="M6 7l1-3h10l1 3"></path>433 </svg>434 </div>435 <div>Trips</div>436 </div>437 <div class="nav-item">438 <div class="profile-avatar">C</div>439 <div>Profile</div>440 </div>441 </div>442 443</div>444</body>445</html>