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>Flight Results UI</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: Arial, Helvetica, sans-serif;13 color: #333;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #ECECEC;21 }22 23 /* Status bar */24 .status-bar {25 height: 150px;26 background: #E5E5E5;27 display: flex;28 align-items: center;29 padding: 0 32px;30 font-size: 34px;31 color: #3a3a3a;32 position: relative;33 border-bottom: 1px solid #D0D0D0;34 }35 .status-left {36 display: flex;37 align-items: center;38 gap: 24px;39 }40 .status-right {41 margin-left: auto;42 display: flex;43 align-items: center;44 gap: 24px;45 }46 .status-icon svg {47 width: 36px;48 height: 36px;49 fill: #707070;50 }51 .cancel-link {52 position: absolute;53 right: 32px;54 bottom: 20px;55 color: #0A84FF;56 font-size: 40px;57 font-weight: 600;58 }59 60 /* Route header */61 .route-header {62 background: #F7F7F7;63 padding: 30px 36px 28px 36px;64 border-bottom: 1px solid #D9D9D9;65 }66 .title-row {67 display: flex;68 align-items: center;69 }70 .route-title {71 font-size: 46px;72 font-weight: 700;73 color: #2E2E2E;74 }75 .header-actions {76 margin-left: auto;77 display: flex;78 align-items: center;79 gap: 28px;80 }81 .mini-row {82 margin-top: 18px;83 display: flex;84 align-items: center;85 gap: 28px;86 color: #666;87 font-size: 34px;88 }89 .chip-icon {90 display: inline-flex;91 align-items: center;92 gap: 12px;93 background: #EFEFEF;94 border: 1px solid #D0D0D0;95 border-radius: 26px;96 padding: 10px 18px;97 color: #555;98 font-size: 32px;99 }100 .chip-icon svg {101 width: 34px;102 height: 34px;103 fill: #7A7A7A;104 }105 106 /* Filter bar */107 .filter-bar {108 background: #EEEEEE;109 padding: 26px 36px;110 border-top: 1px solid #D9D9D9;111 border-bottom: 1px solid #D9D9D9;112 display: flex;113 align-items: center;114 font-size: 40px;115 color: #444;116 }117 .filter-bar .count {118 font-weight: 700;119 }120 .filter-bar .right {121 margin-left: auto;122 }123 124 /* Tabs */125 .tabs {126 display: flex;127 gap: 0;128 padding: 24px 24px;129 }130 .tab {131 flex: 1;132 background: #FFF;133 border: 1px solid #CFCFCF;134 border-right: none;135 border-radius: 14px 0 0 14px;136 padding: 24px;137 }138 .tab:last-child {139 border-right: 1px solid #CFCFCF;140 border-radius: 0 14px 14px 0;141 }142 .tab.active {143 border: 2px solid #3B82F6;144 background: #F5FAFF;145 }146 .tab .label {147 font-size: 32px;148 color: #5380A8;149 }150 .tab .price {151 margin-top: 6px;152 font-size: 38px;153 font-weight: 800;154 color: #21507A;155 }156 .tab .price.dark {157 color: #222;158 }159 160 /* Card */161 .card {162 margin: 24px;163 background: #F5F5F5;164 border-radius: 18px;165 box-shadow: 0 1px 0 rgba(0,0,0,0.08);166 overflow: hidden;167 border: 1px solid #DADADA;168 }169 .card-header {170 background: #EDEDED;171 padding: 24px 28px;172 font-size: 42px;173 font-weight: 800;174 color: #2B2B2B;175 border-bottom: 1px solid #D3D3D3;176 }177 .flight-row {178 padding: 26px 28px;179 background: #FFF;180 }181 .economy-chip {182 display: inline-flex;183 align-items: center;184 gap: 12px;185 background: #F2F2F2;186 border: 1px solid #D2D2D2;187 border-radius: 26px;188 padding: 12px 16px;189 color: #666;190 font-size: 32px;191 margin-bottom: 18px;192 }193 .economy-chip svg {194 width: 32px; height: 32px; fill: #9A9A9A;195 }196 .flight-main {197 display: grid;198 grid-template-columns: 140px 1fr 220px 1fr 120px;199 align-items: center;200 gap: 16px;201 }202 .airline-logo {203 width: 120px;204 height: 120px;205 background: #E0E0E0;206 border: 1px solid #BDBDBD;207 display: flex;208 justify-content: center;209 align-items: center;210 color: #757575;211 font-size: 26px;212 border-radius: 60px;213 }214 .time-block {215 text-align: left;216 }217 .time {218 font-size: 64px;219 font-weight: 800;220 color: #222;221 }222 .airport {223 font-size: 34px;224 font-weight: 800;225 margin-top: 6px;226 }227 .airport-sub {228 font-size: 30px;229 color: #777;230 }231 .route-info {232 text-align: center;233 font-size: 30px;234 color: #666;235 }236 .route-icons {237 margin-top: 6px;238 display: flex;239 justify-content: center;240 align-items: center;241 gap: 10px;242 color: #666;243 }244 .arr {245 text-align: right;246 }247 .arr .time {248 text-align: right;249 }250 .arr .shift {251 display: inline-block;252 background: #BDBDBD;253 color: #fff;254 font-size: 28px;255 padding: 6px 10px;256 border-radius: 8px;257 margin-left: 8px;258 }259 .toggle {260 display: flex;261 justify-content: center;262 align-items: center;263 }264 .toggle .pill {265 width: 70px;266 height: 120px;267 border-radius: 35px;268 border: 1px solid #CFCFCF;269 display: flex;270 flex-direction: column;271 align-items: center;272 justify-content: space-around;273 }274 .link-note {275 margin-top: 20px;276 color: #0A84FF;277 font-size: 34px;278 text-decoration: underline;279 }280 .transfer {281 background: #E9F7E9;282 border-top: 1px solid #D7EED7;283 border-bottom: 1px solid #D7EED7;284 padding: 18px 28px;285 color: #1A8F23;286 font-size: 36px;287 display: flex;288 align-items: center;289 gap: 12px;290 }291 .transfer svg { width: 30px; height: 30px; fill: #1A8F23; }292 293 .fare-row {294 background: #FFF;295 display: grid;296 grid-template-columns: 120px 1fr 320px;297 align-items: center;298 gap: 18px;299 padding: 24px 28px;300 border-top: 1px solid #E6E6E6;301 }302 .fare-icon {303 width: 90px; height: 90px;304 border-radius: 45px;305 background: #F2F2F2;306 border: 1px solid #D2D2D2;307 display: flex; justify-content: center; align-items: center;308 }309 .fare-details .type {310 font-size: 38px;311 color: #666;312 }313 .fare-details .price {314 font-size: 50px;315 font-weight: 800;316 color: #222;317 margin-top: 4px;318 }319 .fare-details .sub {320 font-size: 28px;321 color: #888;322 display: flex;323 align-items: center;324 gap: 8px;325 margin-top: 4px;326 }327 .book-btn {328 justify-self: end;329 width: 280px;330 height: 100px;331 border-radius: 18px;332 border: 2px solid #333;333 background: #FFF;334 color: #222;335 font-size: 42px;336 font-weight: 800;337 }338 .book-btn.primary {339 background: #31C4FF;340 border: none;341 color: #FFF;342 }343 344 /* Bottom nav */345 .bottom-nav {346 position: absolute;347 bottom: 0;348 left: 0;349 width: 1080px;350 height: 220px;351 background: #0E0E0E;352 border-top: 1px solid #2A2A2A;353 display: flex;354 align-items: center;355 justify-content: space-around;356 color: #D0D0D0;357 }358 .nav-item {359 display: flex;360 flex-direction: column;361 align-items: center;362 gap: 8px;363 font-size: 28px;364 }365 .nav-item svg {366 width: 60px; height: 60px; fill: #D0D0D0;367 }368 .nav-item.active svg {369 fill: #34B3FF;370 }371 .home-indicator {372 position: absolute;373 bottom: 230px;374 left: 50%;375 transform: translateX(-50%);376 width: 380px;377 height: 16px;378 background: #FFFFFF;379 border-radius: 10px;380 opacity: 0.9;381 }382</style>383</head>384<body>385<div id="render-target">386 387 <!-- Status Bar -->388 <div class="status-bar">389 <div class="status-left">390 <div>7:52</div>391 <div class="status-icon">392 <svg viewBox="0 0 24 24"><path d="M2 10h20v4H2z"/></svg>393 </div>394 <div class="status-icon">395 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>396 </div>397 <div class="status-icon">398 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"/><path d="M15 15l5 5" stroke="#707070" stroke-width="2"/></svg>399 </div>400 <div class="status-icon">401 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"/></svg>402 </div>403 </div>404 <div class="status-right">405 <div class="status-icon">406 <svg viewBox="0 0 24 24"><path d="M3 18h18l-2-6H5z"/></svg>407 </div>408 <div>93%</div>409 </div>410 <div class="cancel-link">Cancel</div>411 </div>412 413 <!-- Route Header -->414 <div class="route-header">415 <div class="title-row">416 <div class="route-title">Sao Paulo-Guarulhos – Beijing</div>417 <div class="header-actions">418 <svg viewBox="0 0 24 24" width="44" height="44" fill="#6B6B6B">419 <circle cx="11" cy="11" r="7" stroke="#6B6B6B" stroke-width="2" fill="none"/>420 <path d="M16 16l5 5" stroke="#6B6B6B" stroke-width="2" fill="none"/>421 </svg>422 </div>423 </div>424 <div class="mini-row">425 <span class="chip-icon">426 <svg viewBox="0 0 24 24"><path d="M4 6h16v12H4zM4 9h16" stroke="#7A7A7A" stroke-width="2" fill="none"/></svg>427 Nov 20428 </span>429 <span class="chip-icon">430 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 22c0-4 4-7 8-7s8 3 8 7" fill="#7A7A7A"/></svg>431 1432 </span>433 </div>434 </div>435 436 <!-- Filter bar -->437 <div class="filter-bar">438 <div>Filter by: <span class="count">165 Flights</span></div>439 <div class="right">440 <svg viewBox="0 0 24 24" width="46" height="46" fill="#6B6B6B">441 <path d="M3 6h18v2H3zm4 5h10v2H7zm3 5h4v2H10z"/>442 </svg>443 </div>444 </div>445 446 <!-- Tabs -->447 <div class="tabs">448 <div class="tab active">449 <div class="label">Recommen...</div>450 <div class="price">US$906.49</div>451 </div>452 <div class="tab">453 <div class="label">Promotion</div>454 <div class="price dark">US$906.49</div>455 </div>456 <div class="tab">457 <div class="label">Cheapest</div>458 <div class="price dark">US$906.49</div>459 </div>460 <div class="tab">461 <div class="label">Shortest</div>462 <div class="price dark">US$6,648...</div>463 </div>464 </div>465 466 <!-- Card: Cheapest -->467 <div class="card">468 <div class="card-header">Cheapest</div>469 <div class="flight-row">470 <div class="economy-chip">471 <svg viewBox="0 0 24 24"><path d="M2 12l20 0" stroke="#9A9A9A" stroke-width="2"/><path d="M3 12l7-3 1 3-1 3-7-3z"/></svg>472 Economy473 </div>474 475 <div class="flight-main">476 <div class="airline-logo">[IMG: Qatar Airways]</div>477 <div class="time-block">478 <div class="time">08:05 PM</div>479 <div class="airport">GRU Sao Paulo-Guarulhos</div>480 <div class="airport-sub">Sao Paulo</div>481 </div>482 <div class="route-info">483 <div>32h 25min</div>484 <div class="route-icons">485 <svg viewBox="0 0 120 24" width="120" height="24">486 <circle cx="20" cy="12" r="5" fill="#777"/>487 <circle cx="60" cy="12" r="5" fill="#777"/>488 <circle cx="100" cy="12" r="5" fill="#777"/>489 <path d="M20 12h80" stroke="#777" stroke-width="2"/>490 </svg>491 </div>492 <div>3 stops</div>493 </div>494 <div class="arr">495 <div class="time">03:30 PM <span class="shift">+2</span></div>496 <div class="airport">PEK Beijing</div>497 <div class="airport-sub">Beijing</div>498 </div>499 <div class="toggle">500 <div class="pill">501 <svg viewBox="0 0 24 24" width="28" height="28">502 <path d="M12 8l6 6H6z" fill="#9A9A9A"/>503 </svg>504 <svg viewBox="0 0 24 24" width="28" height="28">505 <path d="M12 16l-6-6h12z" fill="#9A9A9A"/>506 </svg>507 </div>508 </div>509 </div>510 511 <div class="link-note">Additional baggage fees may apply</div>512 </div>513 514 <div class="transfer">515 <svg viewBox="0 0 24 24"><path d="M4 12h10l-3-3m3 3l-3 3" stroke="#1A8F23" stroke-width="2" fill="none"/></svg>516 <strong>Self-transfer</strong> Read More517 </div>518 519 <div class="fare-row">520 <div class="fare-icon">521 <svg viewBox="0 0 24 24" width="40" height="40"><path d="M2 12l20 0" stroke="#9A9A9A" stroke-width="2"/><path d="M3 12l7-3 1 3-1 3-7-3z"/></svg>522 </div>523 <div class="fare-details">524 <div class="type">Standard ticket</div>525 <div class="price">US$906.49</div>526 <div class="sub">527 Price per adult528 <svg viewBox="0 0 24 24" width="22" height="22">529 <circle cx="12" cy="12" r="10" stroke="#AAA" stroke-width="2" fill="none"/>530 <text x="12" y="16" text-anchor="middle" font-size="14" fill="#AAA">i</text>531 </svg>532 </div>533 </div>534 <button class="book-btn">Book</button>535 </div>536 537 <div class="fare-row">538 <div class="fare-icon" style="background:#E9F8FF;border-color:#9EE3FF;">539 <svg viewBox="0 0 24 24" width="40" height="40"><path d="M12 4a8 8 0 1 0 8 8" stroke="#39C0FF" stroke-width="2" fill="none"/><path d="M12 1v6M12 17v6" stroke="#39C0FF" stroke-width="2"/></svg>540 </div>541 <div class="fare-details">542 <div class="type">Flexible Ticket</div>543 <div class="price">US$1,069.66</div>544 <div class="sub">545 Price per adult546 <svg viewBox="0 0 24 24" width="22" height="22">547 <circle cx="12" cy="12" r="10" stroke="#AAA" stroke-width="2" fill="none"/>548 <text x="12" y="16" text-anchor="middle" font-size="14" fill="#AAA">i</text>549 </svg>550 </div>551 </div>552 <button class="book-btn primary">Book</button>553 </div>554 </div>555 556 <!-- Card: Shorter flight time -->557 <div class="card" style="margin-top: 16px;">558 <div class="card-header">Shorter flight time</div>559 <div class="flight-row">560 <div class="economy-chip">561 <svg viewBox="0 0 24 24"><path d="M2 12l20 0" stroke="#9A9A9A" stroke-width="2"/><path d="M3 12l7-3 1 3-1 3-7-3z"/></svg>562 Economy563 </div>564 565 <div class="flight-main">566 <div class="airline-logo">[IMG: Swiss Air]</div>567 <div class="time-block">568 <div class="time">07:20 PM</div>569 <div class="airport">GRU Sao Paulo-Guarulhos</div>570 <div class="airport-sub">Sao Paulo</div>571 </div>572 <div class="route-info">573 <div>23h 55min</div>574 <div class="route-icons">575 <svg viewBox="0 0 120 24" width="120" height="24">576 <circle cx="40" cy="12" r="5" fill="#777"/>577 <circle cx="80" cy="12" r="5" fill="#777"/>578 <path d="M20 12h80" stroke="#777" stroke-width="2"/>579 </svg>580 </div>581 <div>2 stops</div>582 </div>583 <div class="arr">584 <div class="time">06:15 AM <span class="shift">+2</span></div>585 <div class="airport">PEK Beijing</div>586 <div class="airport-sub">Beijing</div>587 </div>588 <div class="toggle">589 <div class="pill">590 <svg viewBox="0 0 24 24" width="28" height="28">591 <path d="M12 8l6 6H6z" fill="#9A9A9A"/>592 </svg>593 <svg viewBox="0 0 24 24" width="28" height="28">594 <path d="M12 16l-6-6h12z" fill="#9A9A9A"/>595 </svg>596 </div>597 </div>598 </div>599 600 <div class="link-note" style="color:#777; text-decoration:none;">601 <svg viewBox="0 0 24 24" width="26" height="26" style="vertical-align:middle; margin-right:8px;">602 <rect x="4" y="6" width="16" height="12" stroke="#999" fill="none"/>603 </svg>604 Baggage included: 1 × 23kg605 </div>606 </div>607 608 <div class="fare-row">609 <div class="fare-icon">610 <svg viewBox="0 0 24 24" width="40" height="40"><path d="M2 12l20 0" stroke="#9A9A9A" stroke-width="2"/><path d="M3 12l7-3 1 3-1 3-7-3z"/></svg>611 </div>612 <div class="fare-details">613 <div class="type">Standard ticket</div>614 <div class="price">US$6,648.27</div>615 </div>616 <button class="book-btn">Book</button>617 </div>618 </div>619 620 <!-- Home indicator -->621 <div class="home-indicator"></div>622 623 <!-- Bottom Navigation -->624 <div class="bottom-nav">625 <div class="nav-item">626 <svg viewBox="0 0 24 24">627 <path d="M3 10l9-7 9 7v10H3z" />628 </svg>629 <div>Home</div>630 </div>631 <div class="nav-item">632 <svg viewBox="0 0 24 24">633 <rect x="4" y="7" width="16" height="12" rx="2"/>634 <rect x="9" y="3" width="6" height="4" rx="1"/>635 </svg>636 <div>My trips</div>637 </div>638 <div class="nav-item active">639 <svg viewBox="0 0 24 24">640 <path d="M2 13l20 0M7 10l3-5 2 5 7 3-6 1-2 5-3-4-5-1z"/>641 </svg>642 <div>Book</div>643 </div>644 <div class="nav-item">645 <svg viewBox="0 0 24 24">646 <circle cx="6" cy="12" r="2"/>647 <circle cx="12" cy="12" r="2"/>648 <circle cx="18" cy="12" r="2"/>649 </svg>650 <div>More</div>651 </div>652 </div>653 654</div>655</body>656</html>