GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Flight Results UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #f5f7fb;15 box-shadow: 0 0 0 1px rgba(0,0,0,0.06);16 }17 18 /* Status bar */19 .status-bar {20 height: 96px;21 padding: 0 36px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #333;26 font-size: 34px;27 }28 .status-right { display: flex; align-items: center; gap: 26px; color: #666; }29 .icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }30 .icon svg { width: 40px; height: 40px; }31 32 /* Header card */33 .header-card {34 margin: 12px 32px 0 32px;35 background: #fff;36 border-radius: 24px;37 box-shadow: 0 8px 24px rgba(21,59,85,0.08);38 border: 1px solid #e7edf3;39 padding: 28px 28px;40 }41 .header-row {42 display: flex;43 align-items: center;44 gap: 24px;45 }46 .back { width: 60px; height: 60px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; }47 .title-wrap { flex: 1; }48 .title {49 font-size: 44px;50 font-weight: 700;51 color: #2b3945;52 }53 .subtitle {54 font-size: 30px;55 color: #72859a;56 margin-top: 6px;57 }58 .edit-wrap { display: flex; align-items: center; gap: 14px; margin-left: 10px; }59 .edit-link { color: #0a84ff; font-weight: 600; font-size: 32px; cursor: default; }60 .price-alert {61 margin-left: auto;62 background: #16ba74;63 color: #fff;64 border-radius: 18px;65 padding: 18px 22px;66 display: flex;67 align-items: center;68 gap: 14px;69 font-weight: 700;70 font-size: 30px;71 }72 .price-alert .icon svg { fill: #fff; }73 74 /* Tabs */75 .tabs {76 display: flex;77 gap: 22px;78 padding: 22px 32px;79 }80 .tab {81 flex: 1;82 background: #fff;83 border: 1px solid #dbe5ee;84 border-radius: 18px;85 padding: 22px 24px;86 text-align: center;87 color: #485a6a;88 position: relative;89 }90 .tab .label { font-weight: 800; font-size: 34px; }91 .tab .sub { margin-top: 6px; font-size: 28px; color: #7a8ea3; }92 .tab.selected {93 background: linear-gradient(90deg,#0f6bd9,#18a0ff);94 color: #fff;95 border-color: transparent;96 }97 .tab.selected .sub { color: rgba(255,255,255,0.9); }98 .tab.selected:after {99 content: "";100 position: absolute;101 bottom: -18px;102 left: 50%;103 transform: translateX(-50%);104 width: 0; height: 0;105 border-left: 14px solid transparent;106 border-right: 14px solid transparent;107 border-top: 18px solid #0f6bd9;108 filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));109 }110 111 /* Flight list area */112 .list-area { padding: 10px 28px 0 28px; }113 114 .flight-card {115 background: #fff;116 border-radius: 26px;117 border: 1px solid #e6edf3;118 box-shadow: 0 10px 24px rgba(20,42,73,0.08);119 margin-bottom: 26px;120 padding: 26px 28px;121 position: relative;122 }123 .airline-row {124 display: flex;125 align-items: center;126 gap: 16px;127 margin-bottom: 8px;128 }129 .logo {130 width: 56px; height: 56px;131 background: #E0E0E0;132 border: 1px solid #BDBDBD;133 border-radius: 12px;134 color: #757575;135 font-size: 20px;136 display: flex; align-items: center; justify-content: center;137 padding: 6px;138 }139 .airline-name {140 font-weight: 800;141 font-size: 32px;142 color: #2c3a47;143 }144 .meta { font-size: 28px; color: #74889b; margin-bottom: 22px; }145 146 .price-block {147 position: absolute;148 top: 26px;149 right: 28px;150 text-align: right;151 }152 .price {153 font-size: 46px;154 font-weight: 800;155 color: #0c1e2e;156 }157 .per { font-size: 26px; color: #7b8c9a; }158 159 .times-row {160 display: grid;161 grid-template-columns: 1.1fr 1fr 1.1fr;162 gap: 18px;163 align-items: center;164 margin-bottom: 18px;165 }166 .time-block .t {167 font-size: 56px;168 font-weight: 900;169 color: #0c2033;170 line-height: 1.05;171 }172 .time-block .city { font-size: 28px; color: #6e8296; margin-top: 6px; }173 .duration {174 text-align: center;175 }176 .duration .d { font-size: 32px; font-weight: 700; color: #324a5e; }177 .stops {178 margin: 14px auto 6px;179 width: 80%;180 height: 10px;181 background: #f1f1f4;182 border-radius: 8px;183 position: relative;184 }185 .stops .line {186 position: absolute;187 left: 8px; right: 8px; top: 3px;188 height: 4px;189 background: #d64b56;190 border-radius: 6px;191 }192 .stops .dot {193 position: absolute;194 width: 14px; height: 14px;195 background: #cfd8e3;196 border: 2px solid #8fa1b6;197 border-radius: 50%;198 top: -3px;199 }200 .stops .dot:nth-child(2) { left: 25%; }201 .stops .dot:nth-child(3) { left: 60%; }202 .stops .dot:nth-child(4) { left: 85%; }203 .stops-label { font-size: 24px; color: #7f90a4; }204 205 .coupon {206 margin-top: 12px;207 background: #fff5e5;208 border: 1px solid #f3d6a7;209 color: #6b5b3e;210 border-radius: 16px;211 padding: 16px 18px;212 display: flex;213 align-items: center;214 gap: 12px;215 font-size: 26px;216 }217 .dot-red {218 width: 14px; height: 14px; background: #ff6464; border-radius: 50%;219 }220 221 .card-footer {222 border-top: 1px solid #e9eff6;223 margin-top: 20px;224 padding-top: 16px;225 display: flex;226 align-items: center;227 justify-content: space-between;228 }229 .nonref { color: #e04a4a; font-weight: 700; font-size: 28px; }230 .lock-offer { color: #0a84ff; font-weight: 800; font-size: 30px; display: flex; align-items: center; gap: 12px; }231 .lock-offer .icon svg { fill: #0a84ff; }232 233 /* Toggle bar */234 .toggle-bar {235 margin: 18px 32px;236 background: #27323b;237 color: #fff;238 border-radius: 18px;239 padding: 24px 28px;240 display: flex;241 align-items: center;242 justify-content: space-between;243 box-shadow: 0 6px 16px rgba(0,0,0,0.12);244 }245 .toggle-bar .label { font-size: 32px; font-weight: 700; }246 .switch {247 width: 110px; height: 56px;248 background: #c9d2dc;249 border-radius: 32px;250 position: relative;251 border: 2px solid rgba(255,255,255,0.25);252 }253 .switch::after {254 content: "";255 position: absolute;256 top: 6px; left: 6px;257 width: 44px; height: 44px; background: #fff; border-radius: 50%;258 box-shadow: 0 2px 6px rgba(0,0,0,0.25);259 }260 261 /* Bottom chips */262 .chips-bar {263 position: absolute;264 left: 0; right: 0;265 bottom: 120px;266 padding: 0 24px;267 }268 .chips-wrap {269 display: flex;270 align-items: center;271 gap: 18px;272 background: #0f1a22;273 padding: 22px;274 border-top-left-radius: 20px;275 border-top-right-radius: 20px;276 box-shadow: 0 -8px 20px rgba(0,0,0,0.25);277 }278 .chip {279 background: #1f2a34;280 color: #e9eef5;281 border-radius: 18px;282 padding: 24px 28px;283 font-weight: 800;284 font-size: 30px;285 min-width: 240px;286 text-align: center;287 }288 .chip.blue {289 background: #1293ff;290 color: #fff;291 display: flex; align-items: center; justify-content: center; gap: 14px;292 }293 .chip .icon svg { fill: #fff; }294 295 /* Small helpers */296 .muted { color: #74889b; }297</style>298</head>299<body>300<div id="render-target">301 302 <!-- Status Bar -->303 <div class="status-bar">304 <div>11:43 68°</div>305 <div class="status-right">306 <div class="icon" title="check">307 <svg viewBox="0 0 24 24"><path d="M9.5 16.2l-4.2-4.2L4 13.3l5.5 5.5L20 8.3l-1.3-1.3z"/></svg>308 </div>309 <div class="icon">310 <svg viewBox="0 0 24 24"><path d="M12 21.5c5.2 0 9.5-4.3 9.5-9.5S17.2 2.5 12 2.5 2.5 6.8 2.5 12s4.3 9.5 9.5 9.5z"/></svg>311 </div>312 <div class="icon">313 <svg viewBox="0 0 24 24"><path d="M12 2l5 9H7l5-9zm-2 11h4v9h-4v-9z"/></svg>314 </div>315 <div class="icon">316 <svg viewBox="0 0 24 24"><path d="M12 4.5A7.5 7.5 0 1 0 12 19.5 7.5 7.5 0 1 0 12 4.5z"/></svg>317 </div>318 <div class="icon">319 <svg viewBox="0 0 24 24"><path d="M12 3l9 6v6l-9 6-9-6V9l9-6zm-5 7.3v3.4L12 17l5-3.3V10.3L12 7l-5 3.3z"/></svg>320 </div>321 <div class="icon">322 <svg viewBox="0 0 24 24"><path d="M18 3H6v18h12c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 17H9v-1h6v1zm3-4H6V6h12v10z"/></svg>323 </div>324 </div>325 </div>326 327 <!-- Header Card -->328 <div class="header-card">329 <div class="header-row">330 <div class="back">331 <svg viewBox="0 0 24 24">332 <path d="M15.5 5l-7 7 7 7" fill="none" stroke="#1f3b57" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>333 </svg>334 </div>335 <div class="title-wrap">336 <div class="title">Knoxville to Honolulu</div>337 <div class="subtitle">04 Nov | 1 Adult | Economy</div>338 </div>339 <div class="edit-wrap">340 <div class="icon">341 <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>342 </div>343 <div class="edit-link">Edit</div>344 </div>345 <div class="price-alert">346 <div class="icon">347 <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm6-6V11a6 6 0 0 0-12 0v5l-2 2v1h18v-1l-2-2z"/></svg>348 </div>349 <div>Price Alert</div>350 </div>351 </div>352 </div>353 354 <!-- Tabs -->355 <div class="tabs">356 <div class="tab selected">357 <div class="label">Cheapest</div>358 <div class="sub">₹ 65,971 | 16 h 23 m</div>359 </div>360 <div class="tab">361 <div class="label">Fastest</div>362 <div class="sub">₹ 71,558 | 11 h 35 m</div>363 </div>364 <div class="tab">365 <div class="label">You May Prefer</div>366 <div class="sub">₹ 66,510 | 12 h 46 m</div>367 </div>368 </div>369 370 <!-- Flight Cards -->371 <div class="list-area">372 373 <!-- Delta -->374 <div class="flight-card">375 <div class="airline-row">376 <div class="logo">[IMG: Delta]</div>377 <div class="airline-name">Delta Air Lines</div>378 </div>379 <div class="meta">Multiple Layovers</div>380 381 <div class="price-block">382 <div class="price">₹ 65,971</div>383 <div class="per">per adult</div>384 </div>385 386 <div class="times-row">387 <div class="time-block">388 <div class="t">06:28</div>389 <div class="city">Knoxville</div>390 </div>391 <div class="duration">392 <div class="d">16h 23m</div>393 <div class="stops">394 <div class="line"></div>395 <div class="dot"></div>396 <div class="dot"></div>397 <div class="dot"></div>398 </div>399 <div class="stops-label">2 stops</div>400 </div>401 <div class="time-block">402 <div class="t">17:51</div>403 <div class="city">Honolulu</div>404 </div>405 </div>406 407 <div class="coupon">408 <div class="dot-red"></div>409 <div>Use code MMTDEALS to get flat 899/pax off on your booking + Get additional discount of Rs. 200 on UPI payments</div>410 </div>411 412 <div class="card-footer">413 <div class="nonref">Non Refundable</div>414 <div class="lock-offer">415 <div class="icon">416 <svg viewBox="0 0 24 24"><path d="M12 1a5 5 0 0 0-5 5v3H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-2V6a5 5 0 0 0-5-5zm-3 8V6a3 3 0 0 1 6 0v3H9z"/></svg>417 </div>418 <div>Lock this price for ₹ 2,008 →</div>419 </div>420 </div>421 </div>422 423 <!-- United 1 -->424 <div class="flight-card">425 <div class="airline-row">426 <div class="logo">[IMG: United]</div>427 <div class="airline-name">United Airlines</div>428 </div>429 <div class="meta">Change of Terminals | Multiple Layovers</div>430 431 <div class="price-block">432 <div class="price">₹ 66,510</div>433 <div class="per">per adult</div>434 </div>435 436 <div class="times-row">437 <div class="time-block">438 <div class="t">11:03</div>439 <div class="city">Knoxville</div>440 </div>441 <div class="duration">442 <div class="d">12h 42m</div>443 <div class="stops">444 <div class="line"></div>445 <div class="dot"></div>446 <div class="dot"></div>447 <div class="dot"></div>448 </div>449 <div class="stops-label">2 stops</div>450 </div>451 <div class="time-block">452 <div class="t">18:45</div>453 <div class="city">Honolulu</div>454 </div>455 </div>456 457 <div class="coupon">458 <div class="dot-red"></div>459 <div>Use code MMTDEALS to get flat 899/pax off on your booking + Get additional discount of Rs. 200 on UPI payments</div>460 </div>461 462 <div class="card-footer">463 <div class="nonref">Non Refundable</div>464 <div class="lock-offer">465 <div class="icon">466 <svg viewBox="0 0 24 24"><path d="M12 1a5 5 0 0 0-5 5v3H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-2V6a5 5 0 0 0-5-5zm-3 8V6a3 3 0 0 1 6 0v3H9z"/></svg>467 </div>468 <div>Lock this price for ₹ 2,025 →</div>469 </div>470 </div>471 </div>472 473 <!-- United 2 -->474 <div class="flight-card">475 <div class="airline-row">476 <div class="logo">[IMG: United]</div>477 <div class="airline-name">United Airlines</div>478 </div>479 <div class="meta">Multiple Layovers</div>480 481 <div class="price-block">482 <div class="price">₹ 66,510</div>483 <div class="per">per adult</div>484 </div>485 486 <div class="times-row">487 <div class="time-block">488 <div class="t">08:37</div>489 <div class="city">Knoxville</div>490 </div>491 <div class="duration">492 <div class="d">12h 46m</div>493 <div class="stops">494 <div class="line"></div>495 <div class="dot"></div>496 <div class="dot"></div>497 <div class="dot"></div>498 </div>499 <div class="stops-label">2 stops</div>500 </div>501 <div class="time-block">502 <div class="t">16:23</div>503 <div class="city">Honolulu</div>504 </div>505 </div>506 507 <div class="coupon">508 <div class="dot-red"></div>509 <div>Use code MMTDEALS to get flat 899/pax off on your booking + Get additional discount of Rs. 200 on UPI payments</div>510 </div>511 </div>512 513 </div>514 515 <!-- Toggle Bar -->516 <div class="toggle-bar">517 <div class="label">Show Flights with Check-in Baggage</div>518 <div class="switch"></div>519 </div>520 521 <!-- Bottom Chips -->522 <div class="chips-bar">523 <div class="chips-wrap">524 <div class="chip">Prenoon Departure</div>525 <div class="chip">Late Departures</div>526 <div class="chip">1 Stop</div>527 <div class="chip blue">528 <div class="icon">529 <svg viewBox="0 0 24 24"><path d="M5 3h4v4H5V3zm0 7h4v4H5v-4zm0 7h4v4H5v-4zm10-14h4v4h-4V3zm0 7h4v4h-4v-4zm0 7h4v4h-4v-4z"/></svg>530 </div>531 <div>Sort & Filters</div>532 </div>533 </div>534 </div>535 536</div>537</body>538</html>