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</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #f4f6fb;12 }13 14 /* Top hero */15 .hero {16 position: relative;17 width: 1080px;18 height: 520px;19 }20 .hero-img {21 position: absolute; inset: 0;22 background: #E0E0E0;23 border-bottom: 1px solid #BDBDBD;24 display: flex; justify-content: center; align-items: center;25 color: #757575; font-weight: 600; letter-spacing: 0.2px;26 }27 .back-btn {28 position: absolute; top: 92px; left: 36px;29 width: 100px; height: 100px; border-radius: 50%;30 background: rgba(23,35,54,0.85);31 display: flex; align-items: center; justify-content: center;32 }33 .back-btn svg { width: 44px; height: 44px; fill: #fff; }34 .profile-chip {35 position: absolute; right: 36px; top: 160px;36 width: 92px; height: 92px; border-radius: 50%;37 background: #ffb200; color: #1a2233; font-weight: 800;38 display: flex; align-items: center; justify-content: center;39 box-shadow: 0 8px 20px rgba(0,0,0,0.15);40 }41 .hero-title {42 position: absolute; left: 48px; bottom: 38px; color: #fff;43 font-size: 84px; font-weight: 800; letter-spacing: -1px;44 display: flex; align-items: center; gap: 16px;45 text-shadow: 0 2px 8px rgba(0,0,0,0.2);46 }47 .hero-title .dot {48 width: 18px; height: 18px; background: #ffcc2e; border-radius: 50%;49 display: inline-block;50 }51 52 /* Main card */53 .search-card {54 position: relative;55 width: 1000px;56 margin: -40px auto 0;57 background: #ffffff;58 border-radius: 32px;59 box-shadow: 0 8px 30px rgba(11,19,32,0.08);60 overflow: hidden;61 }62 .tabs {63 display: flex; justify-content: space-between; align-items: flex-end;64 padding: 28px 36px 0 36px; color: #1a2a44; font-weight: 700;65 font-size: 42px;66 }67 .tab-right-ghost {68 background: #eef2f6; padding: 18px 34px; border-radius: 22px 22px 0 0; color: #1a2a44;69 }70 .switcher {71 display: flex; gap: 18px; background: #eef2f6; padding: 12px;72 margin: 24px 36px 8px; border-radius: 18px;73 }74 .switcher .opt {75 flex: 1; text-align: center; padding: 22px; border-radius: 14px;76 color: #1b2a44; font-weight: 700; font-size: 34px;77 }78 .switcher .opt.active { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }79 80 .row {81 padding: 24px 36px;82 }83 .fromto {84 display: grid; grid-template-columns: 1fr 120px 1fr; align-items: center;85 color: #9aa7b8; font-size: 34px; font-weight: 700;86 }87 .fromto .center {88 display: flex; align-items: center; justify-content: center;89 }90 .swap {91 width: 88px; height: 88px; border-radius: 50%;92 background: #f2f6ff; display: flex; align-items: center; justify-content: center;93 border: 2px solid #d8e2ff;94 }95 .swap svg { width: 44px; height: 44px; fill: #5a7cff; }96 97 .dates {98 display: grid; grid-template-columns: 1fr 200px 1fr; align-items: center;99 padding: 10px 36px 0 36px; gap: 10px;100 border-bottom: 2px solid #edf0f4;101 }102 .date-big {103 font-size: 54px; font-weight: 800; color: #0f2644; padding: 20px 0 34px;104 }105 .days {106 text-align: center; color: #9aa7b8; font-size: 34px; font-weight: 700;107 }108 109 .cabin-pass {110 display: flex; justify-content: space-between; align-items: center;111 padding: 28px 36px 16px;112 }113 .cabin {114 color: #18314f; font-size: 36px; font-weight: 700;115 }116 .pax {117 display: flex; align-items: center; gap: 26px; color: #9aa7b8; font-weight: 800; font-size: 34px;118 }119 .pax .icon { width: 32px; height: 32px; }120 .search-btn {121 margin: 16px 36px 36px;122 background: #2e63ff; border-radius: 18px; color: #fff;123 height: 120px; display: flex; align-items: center; justify-content: center;124 font-size: 46px; font-weight: 800;125 box-shadow: 0 10px 24px rgba(46,99,255,0.35);126 }127 128 /* Quick features */129 .quick {130 margin: 26px 0 6px;131 padding-bottom: 8px;132 background: #eef1f6;133 }134 .quick-row {135 display: flex; justify-content: space-around; align-items: center;136 padding: 34px 24px 14px;137 }138 .feat {139 display: flex; flex-direction: column; align-items: center; gap: 18px;140 }141 .feat .ico {142 width: 160px; height: 120px; background: #fff; border-radius: 36px;143 display: flex; align-items: center; justify-content: center;144 box-shadow: 0 8px 18px rgba(0,0,0,0.08);145 }146 .feat span { color: #0f2644; font-size: 34px; font-weight: 700; }147 .pager {148 display: flex; justify-content: center; gap: 12px; padding-bottom: 24px;149 }150 .dot { width: 38px; height: 12px; background: #3f66ff; border-radius: 8px; }151 .dot.gray { width: 18px; background: #cfd6e1; }152 153 /* Promo banner */154 .promo {155 margin: 24px 24px 0;156 background: linear-gradient(90deg, #ff4da0, #ff5b7f);157 color: #fff; border-radius: 20px; padding: 26px 28px;158 display: flex; align-items: center; gap: 18px; font-size: 36px; font-weight: 800;159 box-shadow: 0 8px 20px rgba(255,90,140,0.25);160 }161 .promo .tag {162 width: 72px; height: 72px; border-radius: 16px; background: rgba(255,255,255,0.18);163 display: flex; align-items: center; justify-content: center; font-weight: 900;164 }165 .promo .info {166 margin-left: auto; width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.85);167 display: flex; align-items: center; justify-content: center; font-weight: 900;168 }169 170 /* Explore map card */171 .section-title {172 margin: 28px 32px 18px; color: #0f2644; font-size: 44px; font-weight: 800;173 }174 .map-card {175 margin: 0 24px; border-radius: 28px; overflow: hidden; background: #fff;176 box-shadow: 0 8px 22px rgba(0,0,0,0.06);177 padding: 16px;178 }179 .map-img {180 height: 360px; border-radius: 22px; background: #E0E0E0;181 border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center;182 color: #757575; font-weight: 700;183 position: relative;184 }185 .map-btn {186 position: absolute; left: 50%; transform: translateX(-50%);187 bottom: 24px; background: #2e63ff; color: #fff; font-weight: 800; font-size: 36px;188 padding: 22px 34px; border-radius: 16px; box-shadow: 0 10px 22px rgba(46,99,255,0.28);189 }190 191 /* Bottom spacer and handle */192 .bottom-area {193 padding: 28px 32px 120px; color: #0f2644; font-size: 44px; font-weight: 800;194 }195 .home-handle {196 position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);197 width: 300px; height: 10px; background: #0b0b0b; opacity: 0.85; border-radius: 6px;198 }199</style>200</head>201<body>202<div id="render-target">203 204 <div class="hero">205 <div class="hero-img">[IMG: Airplane wing at sunset]</div>206 <div class="back-btn" aria-label="Back">207 <svg viewBox="0 0 24 24"><path d="M15.5 5l-7 7 7 7-1.5 1.5L5.5 12l8.5-8.5L15.5 5z"/></svg>208 </div>209 <div class="profile-chip">T</div>210 <div class="hero-title">211 <div>Flights</div><span class="dot"></span>212 </div>213 </div>214 215 <div class="search-card">216 <div class="tabs">217 <div>Flights</div>218 <div class="tab-right-ghost">Explore Map</div>219 </div>220 221 <div class="switcher">222 <div class="opt">One-way</div>223 <div class="opt active">Round-trip</div>224 <div class="opt">Multi-city</div>225 </div>226 227 <div class="row fromto">228 <div>From</div>229 <div class="center">230 <div class="swap" title="Swap">231 <svg viewBox="0 0 24 24"><path d="M2 13l9 3 9-7-7 9-2-4-9-1z"/></svg>232 </div>233 </div>234 <div style="text-align:right;">To</div>235 </div>236 237 <div class="dates">238 <div class="date-big">Thu, Oct 19</div>239 <div class="days">3 days</div>240 <div class="date-big" style="text-align:right;">Sat, Oct 21</div>241 </div>242 243 <div class="cabin-pass">244 <div class="cabin">Economy</div>245 <div class="pax">246 <svg class="icon" viewBox="0 0 24 24"><path fill="#9aa7b8" d="M12 6.5a3 3 0 110-6 3 3 0 010 6zM4 22v-1a6 6 0 016-6h4a6 6 0 016 6v1H4z"/></svg> 1247 <svg class="icon" viewBox="0 0 24 24"><path fill="#c7ceda" d="M12 7a2.5 2.5 0 100-5 2.5 2.5 0 000 5zM5 22v-1a5 5 0 015-5h4a5 5 0 015 5v1H5z"/></svg> 0248 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="4" r="2" fill="#c7ceda"/><path fill="#c7ceda" d="M5 22v-1a6 6 0 016-6h2a6 6 0 016 6v1H5z"/></svg> 0249 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#c7ceda"/><rect x="10" y="9" width="4" height="5" fill="#c7ceda"/><path fill="#c7ceda" d="M7 22a3 3 0 013-3h4a3 3 0 013 3H7z"/></svg> 0250 </div>251 </div>252 253 <div class="search-btn">Search</div>254 </div>255 256 <div class="quick">257 <div class="quick-row">258 <div class="feat">259 <div class="ico">260 <svg viewBox="0 0 24 24" width="56" height="56">261 <path fill="#7a5bff" d="M3 12l9-9 9 9-9 9-9-9z"/>262 <path fill="#fff" d="M11 8l7 4-7 4v-3H5v-2h6V8z"/>263 </svg>264 </div>265 <span>Charter Flights</span>266 </div>267 <div class="feat">268 <div class="ico">269 <svg viewBox="0 0 24 24" width="56" height="56">270 <rect x="3" y="5" width="18" height="14" rx="3" fill="#33c3cf"/>271 <path fill="#fff" d="M7 12h10v2H7zM7 9h6v2H7z"/>272 </svg>273 </div>274 <span>Flight Status</span>275 </div>276 <div class="feat">277 <div class="ico">278 <svg viewBox="0 0 24 24" width="56" height="56">279 <rect x="4" y="3" width="16" height="18" rx="3" fill="#ffb02e"/>280 <rect x="7" y="7" width="10" height="2" fill="#fff"/>281 <rect x="7" y="11" width="10" height="2" fill="#fff"/>282 </svg>283 </div>284 <span>My Bookings</span>285 </div>286 </div>287 <div class="pager">288 <div class="dot"></div>289 <div class="dot gray"></div>290 </div>291 </div>292 293 <div class="promo">294 <div class="tag">%</div>295 <div>Get an automatic discount of $ 5 to $ 10 per person!</div>296 <div class="info">i</div>297 </div>298 299 <div class="section-title">Explore Low Prices on Map</div>300 <div class="map-card">301 <div class="map-img">302 [IMG: World map with price pins]303 <div class="map-btn">Find Flight Deals</div>304 </div>305 </div>306 307 <div class="bottom-area">Deals</div>308 309 <div class="home-handle"></div>310</div>311</body>312</html>