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>Choose departing flight</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #0f1725; /* dark navy */15 color: #E8EDF8;16 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;17 }18 19 /* Utility */20 .muted { color: #9AA6B2; }21 .subtle { color: #A9B6C8; }22 .accent { color: #ff6b8a; }23 .divider {24 height: 2px;25 background: #26324a;26 opacity: 0.9;27 margin: 18px 0 22px;28 border-radius: 2px;29 }30 31 /* Status bar */32 .status-bar {33 position: absolute;34 left: 0; top: 0; right: 0;35 height: 96px;36 padding: 28px 36px 0 36px;37 box-sizing: border-box;38 display: flex;39 align-items: center;40 justify-content: space-between;41 color: #E8EDF8;42 font-weight: 600;43 font-size: 36px;44 }45 .status-left { display: flex; align-items: center; gap: 20px; }46 .status-right { display: flex; align-items: center; gap: 28px; }47 48 /* Simple icons */49 .icon { display: inline-flex; width: 40px; height: 40px; }50 .icon svg { width: 100%; height: 100%; fill: none; stroke: #E8EDF8; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }51 52 /* Header */53 .header {54 position: absolute;55 left: 36px;56 right: 36px;57 top: 96px;58 padding-top: 10px;59 }60 .header-row {61 display: flex;62 align-items: center;63 gap: 18px;64 margin-bottom: 12px;65 }66 .back-icon { width: 56px; height: 56px; }67 .title {68 font-size: 54px;69 font-weight: 800;70 letter-spacing: -0.5px;71 }72 .subtitle {73 font-size: 32px;74 color: #A9B6C8;75 margin-top: 12px;76 }77 78 /* Cards list */79 .list {80 position: absolute;81 left: 36px;82 right: 36px;83 top: 280px;84 bottom: 180px;85 overflow: hidden; /* enforced by spec */86 }87 .card {88 background: #141c2d;89 border: 2px solid #2a3550;90 border-radius: 34px;91 padding: 36px 36px;92 margin-bottom: 34px;93 display: flex;94 justify-content: space-between;95 gap: 30px;96 }97 .left {98 flex: 1 1 auto;99 min-width: 0;100 }101 .time-row {102 display: inline-flex;103 align-items: baseline;104 flex-wrap: wrap;105 gap: 12px;106 }107 .time-range {108 font-size: 54px;109 font-weight: 800;110 letter-spacing: -0.5px;111 color: #F5F8FF;112 }113 .plus-day {114 font-size: 30px;115 font-weight: 700;116 color: #ff6b8a;117 position: relative;118 top: -6px;119 }120 .route {121 margin-top: 12px;122 font-size: 34px;123 color: #D8E1F0;124 font-weight: 600;125 }126 .detail {127 font-size: 30px;128 margin-top: 8px;129 color: #9AA6B2;130 }131 .airline-row {132 display: flex;133 align-items: center;134 gap: 16px;135 margin-top: 18px;136 }137 .img-ph {138 width: 54px;139 height: 54px;140 background: #E0E0E0;141 border: 1px solid #BDBDBD;142 color: #666;143 font-size: 18px;144 display: flex;145 align-items: center;146 justify-content: center;147 border-radius: 8px;148 padding: 4px;149 box-sizing: border-box;150 }151 .airline-name {152 font-size: 30px;153 color: #D8E1F0;154 font-weight: 600;155 }156 157 .right {158 width: 280px;159 text-align: right;160 flex: 0 0 auto;161 }162 .scarcity {163 font-size: 26px;164 color: #ff6b8a;165 font-weight: 700;166 }167 .price {168 font-size: 56px;169 font-weight: 900;170 margin-top: 6px;171 color: #F8FAFF;172 }173 .per {174 font-size: 26px;175 margin-top: 6px;176 color: #A9B6C8;177 }178 179 /* Floating button */180 .fab {181 position: absolute;182 left: 50%;183 transform: translateX(-50%);184 bottom: 130px;185 height: 118px;186 padding: 0 46px;187 background: #26314b;188 color: #EAF1FF;189 border-radius: 64px;190 display: inline-flex;191 align-items: center;192 gap: 22px;193 font-size: 38px;194 font-weight: 800;195 box-shadow: 0 12px 24px rgba(0,0,0,0.35);196 border: 2px solid #344166;197 }198 .fab .icon svg { stroke: #EAF1FF; }199 200 /* Home indicator */201 .home-indicator {202 position: absolute;203 bottom: 46px;204 left: 50%;205 transform: translateX(-50%);206 width: 320px;207 height: 12px;208 background: rgba(255,255,255,0.85);209 border-radius: 8px;210 }211</style>212</head>213<body>214<div id="render-target">215 <!-- Status bar -->216 <div class="status-bar">217 <div class="status-left">218 <div>12:42</div>219 <div class="muted" style="font-weight:700;">82°</div>220 <div class="icon" aria-label="store"><svg viewBox="0 0 24 24"><path d="M3 6l9 6-9 6V6z"></path><path d="M12 12l9-6v12l-9-6z"></path></svg></div>221 </div>222 <div class="status-right">223 <div class="icon" aria-label="wifi">224 <svg viewBox="0 0 24 24">225 <path d="M2 9c5-5 15-5 20 0"></path>226 <path d="M5 12c3.5-3.5 10.5-3.5 14 0"></path>227 <path d="M8 15c2-2 6-2 8 0"></path>228 <path d="M12 18h0"></path>229 </svg>230 </div>231 <div class="icon" aria-label="signal">232 <svg viewBox="0 0 24 24">233 <path d="M4 18h2"></path>234 <path d="M8 16h2"></path>235 <path d="M12 14h2"></path>236 <path d="M16 12h2"></path>237 </svg>238 </div>239 <div class="icon" aria-label="battery">240 <svg viewBox="0 0 28 24">241 <rect x="2" y="6" width="20" height="12" rx="2" ry="2"></rect>242 <rect x="22" y="10" width="3" height="4" rx="1"></rect>243 <rect x="4" y="8" width="14" height="8" fill="#E8EDF8" stroke="none"></rect>244 </svg>245 </div>246 </div>247 </div>248 249 <!-- Header -->250 <div class="header">251 <div class="header-row">252 <div class="back-icon icon" aria-label="back">253 <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"></path></svg>254 </div>255 <div class="title">Choose departing flight</div>256 </div>257 <div class="subtitle">TYS to VCE, Oct 7, 1 traveler</div>258 <div class="divider"></div>259 </div>260 261 <!-- Cards -->262 <div class="list">263 <!-- Card 1 -->264 <div class="card">265 <div class="left">266 <div class="time-row">267 <div class="time-range">2:00pm - 9:55am</div>268 <div class="plus-day">+2</div>269 </div>270 <div class="route">Knoxville (TYS) - Venice (VCE)</div>271 <div class="detail">37h 55m (2 stops)</div>272 <div class="detail">18h 47m in ORD • 7h 14m in YYZ</div>273 <div class="airline-row">274 <div class="img-ph">IMG</div>275 <div class="airline-name">Multiple airlines</div>276 </div>277 </div>278 <div class="right">279 <div class="scarcity">1 left at</div>280 <div class="price">$1,869</div>281 <div class="per">Roundtrip per traveler</div>282 </div>283 </div>284 285 <!-- Card 2 -->286 <div class="card">287 <div class="left">288 <div class="time-row">289 <div class="time-range">2:00pm - 9:05am</div>290 <div class="plus-day">+2</div>291 </div>292 <div class="route">Knoxville (TYS) - Venice (VCE)</div>293 <div class="detail">37h 5m (2 stops)</div>294 <div class="detail">4h 47m in ORD • 19h 45m in EWR</div>295 <div class="airline-row">296 <div class="img-ph">IMG</div>297 <div class="airline-name">United</div>298 </div>299 </div>300 <div class="right">301 <div class="scarcity">1 left at</div>302 <div class="price">$1,879</div>303 <div class="per">Roundtrip per traveler</div>304 </div>305 </div>306 307 <!-- Card 3 -->308 <div class="card">309 <div class="left">310 <div class="time-row">311 <div class="time-range">2:00pm - 2:05pm</div>312 <div class="plus-day">+1</div>313 </div>314 <div class="route">Knoxville (TYS) - Venice (VCE)</div>315 <div class="detail">18h 5m (2 stops)</div>316 <div class="detail">57m in ORD • 5h 15m in ZRH</div>317 <div class="airline-row">318 <div class="img-ph">IMG</div>319 <div class="airline-name">United</div>320 </div>321 </div>322 <div class="right">323 <div class="scarcity">2 left at</div>324 <div class="price">$1,947</div>325 <div class="per">Roundtrip per traveler</div>326 </div>327 </div>328 329 <!-- Card 4 -->330 <div class="card">331 <div class="left">332 <div class="time-row">333 <div class="time-range">2:00pm - 6:20pm</div>334 <div class="plus-day">+2</div>335 </div>336 <div class="route">Knoxville (TYS) - Venice (VCE)</div>337 <div class="detail">46h 20m (2 stops)</div>338 <div class="detail">23h 47m in ORD • 11h in ZRH</div>339 <div class="airline-row">340 <div class="img-ph">IMG</div>341 <div class="airline-name">Multiple airlines</div>342 </div>343 </div>344 <div class="right">345 <div class="scarcity">1 left at</div>346 <div class="price">$2,056</div>347 <div class="per">Roundtrip per traveler</div>348 </div>349 </div>350 351 <!-- Card 5 -->352 <div class="card">353 <div class="left">354 <div class="time-row">355 <div class="time-range">1:28pm - 9:05am</div>356 <div class="plus-day">+3</div>357 </div>358 <div class="route">Knoxville (TYS) - Venice (VCE)</div>359 <div class="detail">61h 37m (2 stops)</div>360 <div class="detail">23h 21m in IAH • 24h in EWR</div>361 <div class="airline-row">362 <div class="img-ph">IMG</div>363 <div class="airline-name">Multiple airlines</div>364 </div>365 </div>366 <div class="right">367 <div class="scarcity">1 left at</div>368 <div class="price">$2,062</div>369 <div class="per">Roundtrip per traveler</div>370 </div>371 </div>372 </div>373 374 <!-- Floating sort & filter button -->375 <div class="fab">376 <span class="icon" aria-hidden="true">377 <svg viewBox="0 0 24 24">378 <path d="M3 6h12"></path>379 <path d="M17 6h4"></path>380 <circle cx="15" cy="6" r="2"></circle>381 <path d="M3 12h6"></path>382 <path d="M13 12h8"></path>383 <circle cx="11" cy="12" r="2"></circle>384 <path d="M3 18h16"></path>385 <path d="M21 18h0"></path>386 <circle cx="7" cy="18" r="2"></circle>387 </svg>388 </span>389 <span>Sort & Filter</span>390 </div>391 392 <!-- Home indicator -->393 <div class="home-indicator"></div>394</div>395</body>396</html>