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>Flights UI Mock</title>7<style>8 body { margin:0; padding:0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #eef1f6;15 border-radius: 0;16 }17 18 /* Top hero */19 .hero {20 position: relative;21 width: 1080px;22 height: 520px;23 overflow: hidden;24 }25 .hero .img {26 position: absolute;27 inset: 0;28 background: #E0E0E0;29 border-bottom: 1px solid #BDBDBD;30 display: flex; align-items: center; justify-content: center;31 color: #757575; font-size: 40px; letter-spacing: 0.5px;32 }33 .hero::after{34 content:"";35 position:absolute; inset:0;36 background: linear-gradient(180deg, rgba(16,34,65,0.55) 0%, rgba(16,34,65,0.25) 40%, rgba(16,34,65,0) 100%);37 pointer-events:none;38 }39 .back-btn{40 position:absolute; top:80px; left:36px;41 width:110px; height:110px; border-radius:55px;42 background:#203049; box-shadow:0 6px 18px rgba(0,0,0,0.25);43 display:flex; align-items:center; justify-content:center;44 }45 .back-btn svg{ width:46px; height:46px; fill:none; stroke:#fff; stroke-width:10; stroke-linecap:round; stroke-linejoin:round; }46 .title{47 position:absolute; left:48px; bottom:40px;48 color:#fff; font-weight:800; font-size:96px; line-height:1;49 display:flex; align-items:center; gap:16px;50 }51 .title .dot{52 width:18px; height:18px; background:#FFC72C; border-radius:50%;53 margin-top:10px;54 }55 56 /* Main card */57 .main-card{58 position: relative;59 margin: -40px 24px 0 24px;60 background:#fff; border-radius:28px;61 box-shadow: 0 10px 28px rgba(15,35,68,0.18);62 padding-bottom: 28px;63 }64 65 /* Tabs header */66 .tabs{67 display:flex; justify-content:space-between; align-items:flex-end;68 background: #f1f3f7;69 border-top-left-radius:28px; border-top-right-radius:28px;70 padding: 24px 28px 0 28px;71 height: 110px;72 }73 .tab{74 color:#1f3554; font-weight:700; font-size:44px; opacity:.6;75 }76 .tab.active{77 background:#fff; padding:22px 36px; border-top-left-radius:20px; border-top-right-radius:20px;78 box-shadow:0 -6px 12px rgba(0,0,0,0.05);79 opacity:1;80 }81 82 /* Segmented control */83 .segment{84 margin: 26px 28px;85 background:#eef1f6; border-radius:18px; padding:12px;86 display:flex; gap:16px;87 }88 .segment button{89 flex:1;90 background:transparent; border:none; font-size:40px; font-weight:700; color:#233a5c;91 padding:22px 0; border-radius:12px;92 }93 .segment button.active{94 background:#fff; box-shadow: inset 0 0 0 2px #dfe4ec;95 }96 97 .row { padding: 18px 28px; }98 .divider { height:2px; background:#e7ebf1; margin: 12px 0; }99 100 /* From-To row */101 .cities{102 display:grid; grid-template-columns: 1fr 120px 1fr; align-items:center; gap:12px;103 padding: 8px 28px;104 }105 .city h3{ margin:0; font-size:64px; color:#142a49; }106 .city p{ margin:6px 0 0 0; font-size:34px; color:#8694aa; }107 .swap{108 width:120px; height:120px; border-radius:60px;109 background:#f0f4ff; border:2px solid #dae3ff; display:flex; align-items:center; justify-content:center;110 margin: 0 auto;111 }112 .swap svg{ width:60px; height:60px; fill:#3b6cff; }113 114 /* Dates row */115 .dates{116 display:grid; grid-template-columns: 1fr 180px 1fr; align-items:center; padding: 18px 28px;117 }118 .date-strong{ font-size:58px; color:#142a49; font-weight:800; }119 .muted{ color:#9aa7bb; font-size:38px; text-align:center; }120 121 /* Class + pax */122 .class-pax{ display:flex; align-items:center; justify-content:space-between; }123 .class-pax .cls{ font-size:44px; color:#1a2f4e; font-weight:700; }124 .pax { display:flex; align-items:center; gap:36px; color:#1a2f4e; }125 .pax .pair{ display:flex; align-items:center; gap:10px; font-size:38px; }126 .pax svg{ width:34px; height:34px; fill:#9aa7bb; }127 128 /* Add-on row */129 .addon{ display:flex; align-items:center; gap:20px; padding: 12px 28px 8px; }130 .checkbox{ width:44px; height:44px; border-radius:8px; border:3px solid #cfd6e1; background:#fff; }131 .addon span{ font-size:42px; color:#1a2f4e; }132 .pill{133 margin-left:14px; background:#ff5e8a; color:#fff; font-weight:700; font-size:34px;134 border-radius:16px; padding:10px 18px;135 }136 137 /* Search button */138 .cta{139 margin: 18px 28px 20px;140 background:#2f5bff; color:#fff; border:none; width: calc(100% - 56px); height:130px;141 border-radius:20px; font-size:54px; font-weight:800; box-shadow:0 10px 24px rgba(47,91,255,0.35);142 }143 144 /* Shortcuts */145 .shortcuts{146 display:flex; justify-content:space-between; padding: 28px 40px 12px;147 }148 .chip{149 width:300px; display:flex; flex-direction:column; align-items:center; gap:18px;150 }151 .chip .icon{152 width:160px; height:160px; border-radius:34px; background:#fff; box-shadow:0 8px 20px rgba(16,34,65,0.12);153 display:flex; align-items:center; justify-content:center;154 }155 .chip .icon svg{ width:88px; height:88px; fill:#5b7cff; }156 .chip label{ font-size:40px; color:#1f3554; }157 158 .pager{159 display:flex; gap:12px; justify-content:center; align-items:center; padding-bottom: 14px;160 }161 .pager .dot{ width:60px; height:12px; border-radius:8px; background:#2f5bff; }162 .pager .dot.dim{ width:24px; background:#c9d1e1; }163 164 /* Promo banner */165 .promo{166 margin: 18px 24px;167 height:140px; border-radius:22px;168 background: linear-gradient(90deg, #ff5bb1, #ff4f7b);169 color:#fff; display:flex; align-items:center; justify-content:space-between; padding: 0 32px;170 box-shadow:0 8px 22px rgba(255,83,140,0.35);171 font-size:42px; font-weight:700;172 }173 .promo .left{ display:flex; align-items:center; gap:18px; }174 .promo .badge{175 width:72px; height:72px; border-radius:18px; background:rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center; font-size:46px;176 }177 .promo .info{178 width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,0.22);179 display:flex; align-items:center; justify-content:center; font-weight:900;180 }181 182 .section-title{ padding: 18px 28px; font-size:48px; color:#1c3356; font-weight:800; }183 184 .map{185 margin: 0 24px 20px; height:340px; border-radius:22px;186 background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;187 display:flex; align-items:center; justify-content:center; font-size:40px;188 }189 190 /* Bottom gesture pill */191 .gesture{192 position:absolute; left:50%; transform:translateX(-50%);193 bottom: 26px; width: 360px; height: 14px; background:#0f0f10; border-radius:10px; opacity:.9;194 }195</style>196</head>197<body>198<div id="render-target">199 200 <div class="hero">201 <div class="img">[IMG: Airplane wing at sunset]</div>202 <div class="back-btn">203 <svg viewBox="0 0 24 24"><path d="M15.5 4.5L7 12l8.5 7.5"/></svg>204 </div>205 <div class="title">206 <div>Flights</div>207 <div class="dot"></div>208 </div>209 </div>210 211 <div class="main-card">212 <div class="tabs">213 <div class="tab active">Flights</div>214 <div class="tab">Explore Map</div>215 </div>216 217 <div class="segment">218 <button>One-way</button>219 <button class="active">Round-trip</button>220 <button>Multi-city</button>221 </div>222 223 <div class="cities">224 <div class="city">225 <h3>Amsterdam</h3>226 <p>All Airports</p>227 </div>228 <div class="swap">229 <svg viewBox="0 0 24 24"><path d="M2 13l20 3-6-5 3-2-4-1-3-4-1 3-2 3-7 3z"/></svg>230 </div>231 <div class="city" style="text-align:right;">232 <h3>Paris</h3>233 <p>Paris Charles de Gaulle Airport</p>234 </div>235 </div>236 237 <div class="divider"></div>238 239 <div class="dates">240 <div class="date-strong">Wed, Oct 25</div>241 <div class="muted">5 days</div>242 <div class="date-strong" style="text-align:right;">Sun, Oct 29</div>243 </div>244 245 <div class="divider"></div>246 247 <div class="row class-pax">248 <div class="cls">Economy/Premium Economy</div>249 <div class="pax">250 <div class="pair">251 <svg viewBox="0 0 24 24"><path d="M12 7a3 3 0 110-6 3 3 0 010 6zM5 22v-3a5 5 0 0110 0v3H5z"/></svg>252 <span>1</span>253 </div>254 <div class="pair">255 <svg viewBox="0 0 24 24"><path d="M12 6a2.5 2.5 0 110-5 2.5 2.5 0 010 5zM5 22v-2.5A4.5 4.5 0 0114 19.5V22H5z"/></svg>256 <span>0</span>257 </div>258 <div class="pair">259 <svg viewBox="0 0 24 24"><path d="M12 5.5a2 2 0 110-4 2 2 0 010 4zM6 22v-2a6 6 0 1112 0v2H6z"/></svg>260 <span>0</span>261 </div>262 </div>263 </div>264 265 <div class="divider"></div>266 267 <div class="addon">268 <div class="checkbox"></div>269 <span>Flight + Hotel</span>270 <span class="pill">Save money</span>271 </div>272 273 <button class="cta">Search</button>274 </div>275 276 <div class="shortcuts">277 <div class="chip">278 <div class="icon">279 <svg viewBox="0 0 24 24"><path d="M3 14l18 3-6-5 3-2-4-1-3-4-1 3-2 3-5 3z"/></svg>280 </div>281 <label>Charter Flights</label>282 </div>283 <div class="chip">284 <div class="icon">285 <svg viewBox="0 0 24 24"><path d="M3 4h18v14H3zM8 2v4M16 2v4M8 9h8"/></svg>286 </div>287 <label>Flight Status</label>288 </div>289 <div class="chip">290 <div class="icon">291 <svg viewBox="0 0 24 24"><path d="M4 4h16v16H4zM7 8h10M7 12h10M7 16h6"/></svg>292 </div>293 <label>My Bookings</label>294 </div>295 </div>296 <div class="pager">297 <div class="dot"></div>298 <div class="dot dim"></div>299 </div>300 301 <div class="promo">302 <div class="left">303 <div class="badge">%</div>304 <div>Get an automatic discount of $ 5 to $ 10 per person!</div>305 </div>306 <div class="info">i</div>307 </div>308 309 <div class="section-title">Explore Low Prices on Map</div>310 <div class="map">[IMG: World map with price pins and routes]</div>311 312 <div class="gesture"></div>313</div>314</body>315</html>