GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Flight Booking UI</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 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #EFF2F5;15 border-radius: 0;16 }17 18 /* Status bar */19 .status-bar {20 height: 110px;21 background: #ffffff;22 display: flex;23 align-items: center;24 padding: 0 36px;25 color: #2f3a46;26 font-size: 36px;27 letter-spacing: 0.5px;28 box-sizing: border-box;29 }30 .status-left { display: flex; gap: 22px; align-items: center; }31 .status-right { margin-left: auto; display: flex; gap: 26px; align-items: center; }32 33 .icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; }34 .icon svg { width: 100%; height: 100%; }35 36 /* Hero area with subtle binary backdrop */37 .hero {38 position: relative;39 height: 540px;40 background: #E6EAEE;41 overflow: hidden;42 }43 .binary {44 position: absolute;45 inset: 0;46 color: rgba(55, 71, 79, 0.18);47 font-weight: 600;48 font-size: 44px;49 line-height: 1.8;50 letter-spacing: 18px;51 padding: 80px 40px 0;52 white-space: nowrap;53 }54 .binary p { margin: 0; }55 .tagline {56 position: absolute;57 left: 60px;58 top: 240px;59 font-size: 54px;60 letter-spacing: 6px;61 color: #0D8F78;62 font-weight: 700;63 }64 65 /* Tabs */66 .tabs {67 display: flex;68 gap: 36px;69 padding: 28px 60px 8px;70 align-items: baseline;71 }72 .tab {73 font-size: 64px;74 color: #7A8794;75 font-weight: 700;76 }77 .tab.active { color: #2E3A46; }78 79 /* Card/controls area */80 .content {81 padding: 16px 36px 0;82 box-sizing: border-box;83 }84 85 .segmented {86 background: #E9EEF3;87 border-radius: 26px;88 box-shadow: 0 6px 18px rgba(0,0,0,0.08);89 display: flex;90 overflow: hidden;91 }92 .seg-item {93 flex: 1;94 padding: 28px 26px;95 display: flex;96 align-items: center;97 gap: 18px;98 color: #374553;99 font-size: 40px;100 justify-content: center;101 }102 .seg-divider {103 width: 2px;104 background: #D3DAE1;105 }106 .seg-item .chev {107 width: 20px; height: 20px; border: 6px solid transparent; border-top-color: #58717F; border-left-color: #58717F; transform: rotate(-135deg); margin-left: 10px;108 }109 110 .fields { margin-top: 28px; display: flex; flex-direction: column; gap: 26px; }111 .field {112 background: #D7E0E7;113 border-radius: 22px;114 padding: 26px 28px;115 display: flex;116 align-items: center;117 gap: 26px;118 color: #2f3a46;119 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);120 }121 .field .label { color: #516170; font-weight: 700; margin-right: 8px; }122 .field .value { font-weight: 700; color: #1f2a33; }123 .field .value.light { font-weight: 600; color: #2b3a44; }124 125 .icon-box {126 width: 72px; height: 72px; background: #C7D3DC;127 border-radius: 14px; display: flex; align-items: center; justify-content: center;128 }129 .swap-btn {130 position: absolute;131 right: 64px;132 top: 1040px;133 width: 92px; height: 92px; border-radius: 50%;134 background: #FFFFFF;135 border: none;136 box-shadow: 0 6px 18px rgba(0,0,0,0.15);137 display: flex; align-items: center; justify-content: center;138 cursor: default;139 }140 .search-btn {141 margin: 22px 0 0;142 width: 100%;143 height: 120px;144 border-radius: 26px;145 background: #128D73;146 color: #DDE7EC;147 font-size: 46px;148 font-weight: 700;149 border: none;150 }151 152 /* Bottom sheet */153 .bottom-sheet {154 position: absolute;155 left: 0;156 right: 0;157 bottom: 190px;158 padding: 0 36px 20px;159 }160 .sheet-header {161 background: #0C64C9;162 color: #FFFFFF;163 font-size: 48px;164 font-weight: 700;165 border-top-left-radius: 36px;166 border-top-right-radius: 36px;167 padding: 36px 40px;168 }169 .sheet-card {170 background: #FFFFFF;171 border-bottom-left-radius: 24px;172 border-bottom-right-radius: 24px;173 box-shadow: 0 10px 18px rgba(0,0,0,0.08);174 padding: 32px 40px 40px;175 }176 .sheet-title {177 font-size: 44px; font-weight: 800; color: #27323C; margin-bottom: 12px;178 display: flex; align-items: center; gap: 18px;179 }180 .sheet-sub {181 display: flex; align-items: center; gap: 14px; color: #566776; font-size: 36px; margin-bottom: 28px;182 }183 .sheet-actions {184 display: flex; gap: 26px; margin-top: 16px;185 }186 .btn {187 flex: 1; height: 116px; border-radius: 22px; font-size: 44px; font-weight: 700; border: none;188 }189 .btn.gray { background: #ECEFF3; color: #2c3a46; }190 .btn.blue { background: #0C64C9; color: #FFFFFF; }191 192 /* Bottom navigation */193 .nav {194 position: absolute;195 bottom: 0; left: 0; right: 0;196 height: 190px;197 background: #FFFFFF;198 box-shadow: 0 -6px 16px rgba(0,0,0,0.06);199 display: flex;200 justify-content: space-around;201 align-items: center;202 }203 .nav-item {204 display: flex; flex-direction: column; align-items: center; gap: 10px;205 font-size: 32px; color: #6C7A88; font-weight: 700;206 }207 .nav-item.active { color: #0B9B6F; }208 .nav-item .icon { width: 56px; height: 56px; }209 .gesture {210 position: absolute;211 bottom: 22px; left: 50%; transform: translateX(-50%);212 width: 300px; height: 10px; background: #9BA5AE; border-radius: 6px; opacity: 0.7;213 }214</style>215</head>216<body>217<div id="render-target">218 219 <!-- Status Bar -->220 <div class="status-bar">221 <div class="status-left">222 <span>8:11</span>223 <span>83°</span>224 <span class="icon">225 <svg viewBox="0 0 24 24" fill="#2f3a46"><circle cx="12" cy="12" r="9" stroke="#2f3a46" stroke-width="2" fill="none"/><path d="M12 6v6l4 2" stroke="#2f3a46" stroke-width="2" fill="none" stroke-linecap="round"/></svg>226 </span>227 <span>M</span>228 <span>Calm</span>229 <span>•</span>230 </div>231 <div class="status-right">232 <span class="icon">233 <svg viewBox="0 0 24 24" fill="none" stroke="#2f3a46" stroke-width="2"><path d="M2 18h20l-4-4-4 4-4-4-4 4z"/></svg>234 </span>235 <span class="icon">236 <svg viewBox="0 0 24 24" fill="none" stroke="#2f3a46" stroke-width="2"><rect x="6" y="6" width="12" height="14" rx="2"/><rect x="9" y="3" width="6" height="3"/></svg>237 </span>238 </div>239 </div>240 241 <!-- Hero -->242 <div class="hero">243 <div class="binary">244 <p>0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1</p>245 <p>1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0</p>246 <p>0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1</p>247 <p>1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0</p>248 </div>249 <div class="tagline">YOU FLY FOR LESS</div>250 </div>251 252 <!-- Tabs -->253 <div class="tabs">254 <div class="tab active">Travel</div>255 <div class="tab">Rooms</div>256 <div class="tab">Cars</div>257 </div>258 259 <!-- Search Card -->260 <div class="content">261 262 <div class="segmented">263 <div class="seg-item">264 <span class="icon" style="width:48px;height:48px;">265 <svg viewBox="0 0 24 24" fill="none" stroke="#2f3a46" stroke-width="2">266 <path d="M4 12h16M10 8l-4 4 4 4M14 8l4 4-4 4"/>267 </svg>268 </span>269 <span>Return</span>270 <span class="chev"></span>271 </div>272 <div class="seg-divider"></div>273 <div class="seg-item">274 <span class="icon" style="width:46px;height:46px;">275 <svg viewBox="0 0 24 24" fill="none" stroke="#2f3a46" stroke-width="2">276 <path d="M16 11c0-2.2-1.8-4-4-4s-4 1.8-4 4"/>277 <path d="M4 20c0-3.3 2.7-6 6-6h4c3.3 0 6 2.7 6 6"/>278 </svg>279 </span>280 <span>3</span>281 </div>282 <div class="seg-divider"></div>283 <div class="seg-item">284 <span class="icon" style="width:46px;height:46px;">285 <svg viewBox="0 0 24 24" fill="none" stroke="#2f3a46" stroke-width="2">286 <rect x="3" y="7" width="18" height="12" rx="2"/>287 <path d="M8 7V5h8v2"/>288 </svg>289 </span>290 <span>1</span>291 <span class="chev"></span>292 </div>293 </div>294 295 <div class="fields">296 <div class="field">297 <div class="icon-box">298 <svg viewBox="0 0 24 24" fill="none" stroke="#2f3a46" stroke-width="2">299 <path d="M2 16l20-5-7 7-2-3-5 3 1-4-7-4z"/>300 </svg>301 </div>302 <div style="font-size:42px;">303 <span class="label">From:</span>304 <span class="value">Paris Orly</span>305 </div>306 </div>307 308 <div class="field">309 <div class="icon-box">310 <svg viewBox="0 0 24 24" fill="none" stroke="#2f3a46" stroke-width="2">311 <path d="M2 16l20-5-7 7-2-3-5 3 1-4-7-4z"/>312 </svg>313 </div>314 <div style="font-size:42px;">315 <span class="label">To:</span>316 <span class="value">Leonardo da Vinci–Fiumicino Airport</span>317 </div>318 </div>319 320 <div class="field">321 <div class="icon-box">322 <svg viewBox="0 0 24 24" fill="none" stroke="#2f3a46" stroke-width="2">323 <rect x="3" y="4" width="18" height="18" rx="2"/>324 <path d="M16 2v4M8 2v4M3 10h18"/>325 </svg>326 </div>327 <div style="font-size:42px;">328 <span class="label">Departure:</span>329 <span class="value light">Oct 20, 2023</span>330 </div>331 </div>332 333 <div class="field">334 <div class="icon-box">335 <svg viewBox="0 0 24 24" fill="none" stroke="#2f3a46" stroke-width="2">336 <rect x="3" y="4" width="18" height="18" rx="2"/>337 <path d="M16 2v4M8 2v4M3 10h18"/>338 </svg>339 </div>340 <div style="font-size:42px;">341 <span class="label">Return:</span>342 <span class="value light">Oct 22, 2023</span>343 </div>344 </div>345 </div>346 347 <button class="search-btn">Search</button>348 349 <button class="swap-btn" aria-label="Swap">350 <svg viewBox="0 0 24 24" fill="none" stroke="#3e5563" stroke-width="2">351 <path d="M4 7h11M9 3l-4 4 4 4M20 17H9M15 21l4-4-4-4"/>352 </svg>353 </button>354 355 </div>356 357 <!-- Bottom Sheet -->358 <div class="bottom-sheet">359 <div class="sheet-header">Finish this booking?</div>360 <div class="sheet-card">361 <div class="sheet-title">362 <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#27323C" stroke-width="2">363 <path d="M4 12h16M10 8l-4 4 4 4M14 8l4 4-4 4"/>364 </svg>365 <span>Paris ↔ Rome</span>366 </div>367 <div class="sheet-sub">368 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#566776" stroke-width="2">369 <path d="M16 11c0-2.2-1.8-4-4-4s-4 1.8-4 4"/>370 <path d="M4 20c0-3.3 2.7-6 6-6h4c3.3 0 6 2.7 6 6"/>371 </svg>372 <span>3 • Fri, Oct 20</span>373 </div>374 <div class="sheet-actions">375 <button class="btn gray">Discard</button>376 <button class="btn blue">Continue</button>377 </div>378 </div>379 </div>380 381 <!-- Bottom navigation -->382 <div class="nav">383 <div class="nav-item active">384 <span class="icon">385 <svg viewBox="0 0 24 24" fill="none" stroke="#0B9B6F" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg>386 </span>387 <span>Search</span>388 </div>389 <div class="nav-item">390 <span class="icon">391 <svg viewBox="0 0 24 24" fill="none" stroke="#6C7A88" stroke-width="2">392 <path d="M12 2l3 6 6 1-4 4 1 6-6-3-6 3 1-6-4-4 6-1z"/>393 </svg>394 </span>395 <span>Deals</span>396 </div>397 <div class="nav-item">398 <span class="icon">399 <svg viewBox="0 0 24 24" fill="none" stroke="#6C7A88" stroke-width="2">400 <rect x="3" y="6" width="18" height="12" rx="2"/>401 <path d="M7 6v-2h10v2M7 10h10M7 14h6"/>402 </svg>403 </span>404 <span>My trips</span>405 </div>406 <div class="nav-item">407 <span class="icon">408 <svg viewBox="0 0 24 24" fill="none" stroke="#6C7A88" stroke-width="2">409 <circle cx="12" cy="8" r="4"/><path d="M4 22c0-4.4 3.6-8 8-8s8 3.6 8 8"/>410 </svg>411 </span>412 <span>Profile</span>413 </div>414 <div class="gesture"></div>415 </div>416 417</div>418</body>419</html>