GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Flight Results UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 border-radius: 0;15 box-shadow: none;16 color: #212121;17 }18 19 /* Top bars */20 .statusbar {21 height: 110px;22 background: #153A78;23 color: #fff;24 display: flex;25 align-items: center;26 justify-content: space-between;27 padding: 0 38px;28 box-sizing: border-box;29 font-size: 38px;30 letter-spacing: 0.2px;31 }32 .status-right {33 display: flex;34 align-items: center;35 gap: 24px;36 }37 .appbar {38 height: 120px;39 background: #153A78;40 color: #fff;41 display: flex;42 align-items: center;43 gap: 28px;44 padding: 0 32px;45 box-sizing: border-box;46 border-bottom: 1px solid rgba(255,255,255,0.08);47 }48 .appbar-title {49 font-size: 46px;50 font-weight: 600;51 }52 .back-icon svg { width: 54px; height: 54px; }53 54 /* Filter pills */55 .filters {56 background: #ffffff;57 padding: 22px 28px 28px 28px;58 display: flex;59 gap: 18px;60 flex-wrap: nowrap;61 }62 .pill {63 padding: 20px 26px;64 border: 1px solid #DFDFDF;65 border-radius: 26px;66 font-size: 32px;67 color: #333;68 background: #fff;69 display: inline-flex;70 align-items: center;71 gap: 12px;72 box-shadow: 0 2px 0 rgba(0,0,0,0.03);73 }74 .pill.active {75 border-color: #2E6EE6;76 color: #2E6EE6;77 }78 .subheader {79 border-top: 1px solid #E6E6E6;80 }81 82 /* Route summary */83 .route-summary {84 padding: 32px;85 border-top: 1px solid #E8E8E8;86 border-bottom: 12px solid #efefef;87 display: flex;88 align-items: flex-start;89 justify-content: space-between;90 }91 .route-text h2 {92 margin: 0;93 font-size: 44px;94 font-weight: 700;95 }96 .route-text .muted {97 margin-top: 10px;98 color: #666;99 font-size: 32px;100 }101 .route-actions { display: flex; align-items: center; }102 .pencil svg { width: 44px; height: 44px; }103 104 /* Flight cards */105 .flight-card {106 padding: 32px;107 box-sizing: border-box;108 border-bottom: 12px solid #efefef;109 }110 .times-row {111 display: grid;112 grid-template-columns: 300px 1fr 300px;113 align-items: center;114 column-gap: 22px;115 }116 .time-block .big {117 font-size: 46px;118 font-weight: 700;119 margin: 0;120 }121 .time-block .small {122 margin-top: 6px;123 font-size: 30px;124 color: #707070;125 }126 .timeline {127 position: relative;128 height: 92px;129 display: flex;130 align-items: center;131 justify-content: center;132 }133 .timeline .line {134 position: absolute;135 left: 12px; right: 12px; top: 44px;136 height: 2px; background: #D6D6D6;137 }138 .timeline .node {139 position: absolute;140 top: 36px;141 width: 16px; height: 16px; background: #CFCFCF; border-radius: 50%;142 }143 .timeline .node.n1 { left: 30%; }144 .timeline .node.n2 { left: 68%; }145 .timeline .dur {146 position: absolute;147 top: 8px;148 font-size: 30px;149 color: #7A7A7A;150 }151 .timeline .stops {152 position: absolute;153 top: 64px;154 font-size: 30px;155 color: #7A7A7A;156 }157 158 .alert-row {159 display: flex;160 align-items: center;161 gap: 14px;162 margin: 16px 0 18px 0;163 color: #A54A12;164 font-size: 32px;165 font-weight: 600;166 }167 .airlines-row {168 display: flex;169 align-items: center;170 gap: 16px;171 color: #333;172 font-size: 32px;173 }174 .air-icon {175 width: 48px; height: 48px; border-radius: 8px;176 background: #E0E0E0; border: 1px solid #BDBDBD;177 display: flex; align-items: center; justify-content: center;178 color: #757575; font-size: 22px;179 }180 181 .price-row {182 display: grid;183 grid-template-columns: 1fr auto;184 align-items: center; margin-top: 24px;185 padding-top: 20px; border-top: 1px solid #E1E1E1;186 }187 .baggage {188 display: flex; align-items: center; gap: 16px;189 color: #6f6f6f; font-size: 30px;190 }191 .price {192 display: flex; align-items: center; gap: 16px;193 font-size: 44px; font-weight: 700; color: #222;194 }195 .divider-thin { height: 1px; background: #E5E5E5; }196 197 /* Bottom gesture bar */198 .gesture-bar {199 position: absolute;200 left: 0; right: 0; bottom: 0;201 height: 120px; background: #000;202 display: flex; align-items: center; justify-content: center;203 }204 .gesture-pill {205 width: 220px; height: 10px; background: #fff; border-radius: 6px;206 }207 208 /* Icon styles */209 svg { display: block; }210</style>211</head>212<body>213<div id="render-target">214 215 <!-- Status bar -->216 <div class="statusbar">217 <div>8:45</div>218 <div class="status-right">219 <!-- small dot -->220 <div style="width:10px;height:10px;border-radius:50%;background:#ffffff;opacity:0.8;"></div>221 <!-- WiFi icon -->222 <svg width="46" height="46" viewBox="0 0 24 24" fill="none">223 <path d="M2 8c5-5 15-5 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>224 <path d="M6 12c3-3 9-3 12 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>225 <path d="M10 16c2-2 4-2 6 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>226 <circle cx="12" cy="19" r="1.7" fill="#fff"/>227 </svg>228 <!-- Battery icon -->229 <svg width="46" height="46" viewBox="0 0 24 24" fill="none">230 <rect x="2" y="6" width="18" height="12" rx="2" stroke="#fff" stroke-width="2"></rect>231 <rect x="4" y="8" width="12" height="8" rx="1" fill="#fff"></rect>232 <rect x="20" y="10" width="2" height="6" rx="1" fill="#fff"></rect>233 </svg>234 </div>235 </div>236 237 <!-- App bar -->238 <div class="appbar">239 <div class="back-icon">240 <svg viewBox="0 0 24 24">241 <path d="M15 5 L6 12 L15 19" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>242 </svg>243 </div>244 <div class="appbar-title">4 results</div>245 </div>246 247 <!-- Filters -->248 <div class="filters">249 <div class="pill">250 <svg width="34" height="34" viewBox="0 0 24 24">251 <path d="M8 5v14M16 5v14" stroke="#666" stroke-width="2" stroke-linecap="round"/>252 <path d="M5 8h6M13 16h6" stroke="#666" stroke-width="2" stroke-linecap="round"/>253 </svg>254 <span>Sort by: Cheapest</span>255 </div>256 <div class="pill active">Airlines</div>257 <div class="pill">Stops</div>258 <div class="pill">Duration</div>259 <div class="pill">Flight times</div>260 </div>261 262 <!-- Route summary -->263 <div class="route-summary">264 <div class="route-text">265 <h2><strong>LHR</strong> London → <strong>OSL</strong> Oslo</h2>266 <div class="muted">Mon, Nov 06 · 1 adult · Economy</div>267 </div>268 <div class="route-actions pencil">269 <svg viewBox="0 0 24 24">270 <path d="M3 17l0 4 4 0 12-12-4-4L3 17z" fill="none" stroke="#666" stroke-width="2"/>271 <path d="M14 5l4 4" stroke="#666" stroke-width="2"/>272 </svg>273 </div>274 </div>275 276 <!-- Flight card 1 -->277 <div class="flight-card">278 <div class="times-row">279 <div class="time-block">280 <div class="big">8:50 AM</div>281 <div class="small">LHR · Nov 06</div>282 </div>283 <div class="timeline">284 <div class="dur">10h 10m</div>285 <div class="line"></div>286 <div class="node n1"></div>287 <div class="node n2"></div>288 <div class="stops">2 stops</div>289 </div>290 <div class="time-block" style="text-align:right;">291 <div class="big">8:00 PM</div>292 <div class="small">OSL · Nov 06</div>293 </div>294 </div>295 296 <div class="alert-row">297 <svg width="34" height="34" viewBox="0 0 24 24">298 <path d="M12 3l9 16H3L12 3z" fill="none" stroke="#A54A12" stroke-width="2"/>299 <path d="M12 9v5" stroke="#A54A12" stroke-width="2" stroke-linecap="round"/>300 <circle cx="12" cy="17" r="1.3" fill="#A54A12"/>301 </svg>302 <span>Self transfer</span>303 </div>304 305 <div class="airlines-row">306 <div class="air-icon">[Icon]</div>307 <div class="air-icon">[Icon]</div>308 <div class="air-icon">[Icon]</div>309 <div>Aer Lingus, Ryanair, Norwegian</div>310 </div>311 312 <div class="price-row">313 <div class="baggage">314 <svg width="38" height="38" viewBox="0 0 24 24">315 <rect x="6" y="7" width="12" height="12" rx="2" stroke="#666" stroke-width="2" fill="none"/>316 <path d="M9 7V5h6v2" stroke="#666" stroke-width="2" stroke-linecap="round"/>317 </svg>318 <span>Baggage included: personal item</span>319 </div>320 <div class="price">321 <span>Rs. 26,177.60</span>322 <svg width="38" height="38" viewBox="0 0 24 24">323 <circle cx="12" cy="12" r="10" stroke="#666" stroke-width="2" fill="none"/>324 <path d="M12 7v6" stroke="#666" stroke-width="2" stroke-linecap="round"/>325 <circle cx="12" cy="16" r="1.3" fill="#666"/>326 </svg>327 </div>328 </div>329 </div>330 331 <!-- Flight card 2 -->332 <div class="flight-card">333 <div class="times-row">334 <div class="time-block">335 <div class="big">9:50 AM</div>336 <div class="small">LHR · Nov 06</div>337 </div>338 <div class="timeline">339 <div class="dur">9h 10m</div>340 <div class="line"></div>341 <div class="node n1"></div>342 <div class="node n2"></div>343 <div class="stops">2 stops</div>344 </div>345 <div class="time-block" style="text-align:right;">346 <div class="big">8:00 PM</div>347 <div class="small">OSL · Nov 06</div>348 </div>349 </div>350 351 <div class="alert-row">352 <svg width="34" height="34" viewBox="0 0 24 24">353 <path d="M12 3l9 16H3L12 3z" fill="none" stroke="#A54A12" stroke-width="2"/>354 <path d="M12 9v5" stroke="#A54A12" stroke-width="2" stroke-linecap="round"/>355 <circle cx="12" cy="17" r="1.3" fill="#A54A12"/>356 </svg>357 <span>Self transfer</span>358 </div>359 360 <div class="airlines-row">361 <div class="air-icon">[Icon]</div>362 <div class="air-icon">[Icon]</div>363 <div class="air-icon">[Icon]</div>364 <div>Aer Lingus, Ryanair, Norwegian</div>365 </div>366 367 <div class="price-row">368 <div class="baggage">369 <svg width="38" height="38" viewBox="0 0 24 24">370 <rect x="6" y="7" width="12" height="12" rx="2" stroke="#666" stroke-width="2" fill="none"/>371 <path d="M9 7V5h6v2" stroke="#666" stroke-width="2" stroke-linecap="round"/>372 </svg>373 <span>Baggage included: personal item</span>374 </div>375 <div class="price">376 <span>Rs. 27,196.31</span>377 <svg width="38" height="38" viewBox="0 0 24 24">378 <circle cx="12" cy="12" r="10" stroke="#666" stroke-width="2" fill="none"/>379 <path d="M12 7v6" stroke="#666" stroke-width="2" stroke-linecap="round"/>380 <circle cx="12" cy="16" r="1.3" fill="#666"/>381 </svg>382 </div>383 </div>384 </div>385 386 <!-- Flight card 3 -->387 <div class="flight-card" style="border-bottom: 0;">388 <div class="times-row">389 <div class="time-block">390 <div class="big">8:50 AM</div>391 <div class="small">LHR · Nov 06</div>392 </div>393 <div class="timeline">394 <div class="dur">5h 55m</div>395 <div class="line"></div>396 <div class="node n1" style="left:50%;"></div>397 <div class="stops">1 stop</div>398 </div>399 <div class="time-block" style="text-align:right;">400 <div class="big">3:45 PM</div>401 <div class="small">OSL · Nov 06</div>402 </div>403 </div>404 405 <div class="alert-row">406 <svg width="34" height="34" viewBox="0 0 24 24">407 <path d="M12 3l9 16H3L12 3z" fill="none" stroke="#A54A12" stroke-width="2"/>408 <path d="M12 9v5" stroke="#A54A12" stroke-width="2" stroke-linecap="round"/>409 <circle cx="12" cy="17" r="1.3" fill="#A54A12"/>410 </svg>411 <span>Self transfer</span>412 </div>413 414 <div class="airlines-row">415 <div class="air-icon">[Icon]</div>416 <div class="air-icon">[Icon]</div>417 <div>Aer Lingus, SAS</div>418 </div>419 420 <div class="price-row">421 <div class="baggage">422 <svg width="38" height="38" viewBox="0 0 24 24">423 <rect x="6" y="7" width="12" height="12" rx="2" stroke="#666" stroke-width="2" fill="none"/>424 <path d="M9 7V5h6v2" stroke="#666" stroke-width="2" stroke-linecap="round"/>425 </svg>426 <span>Baggage included: personal item</span>427 </div>428 <div class="price">429 <span>Rs. 27,196.31</span>430 <svg width="38" height="38" viewBox="0 0 24 24">431 <circle cx="12" cy="12" r="10" stroke="#666" stroke-width="2" fill="none"/>432 <path d="M12 7v6" stroke="#666" stroke-width="2" stroke-linecap="round"/>433 <circle cx="12" cy="16" r="1.3" fill="#666"/>434 </svg>435 </div>436 </div>437 </div>438 439 <!-- Bottom gesture bar -->440 <div class="gesture-bar">441 <div class="gesture-pill"></div>442 </div>443</div>444</body>445</html>