GD-ML/AndroidCode

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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F5F7FC;15  }16 17  /* Hero section */18  .hero {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 560px;24    border-bottom-left-radius: 0;25    border-bottom-right-radius: 0;26    overflow: hidden;27  }28  .hero .img {29    width: 100%;30    height: 100%;31    background: #E0E0E0;32    border-bottom: 1px solid #BDBDBD;33    display: flex;34    justify-content: flex-start;35    align-items: flex-end;36    padding: 40px;37    color: #555;38    font-weight: 600;39    letter-spacing: 0.2px;40  }41  .back-btn {42    position: absolute;43    top: 110px;44    left: 40px;45    width: 88px;46    height: 88px;47    background: #2A3550;48    border-radius: 50%;49    display: flex;50    justify-content: center;51    align-items: center;52    box-shadow: 0 6px 16px rgba(0,0,0,0.25);53  }54  .back-btn svg { width: 44px; height: 44px; fill: #fff; }55  .floating-t {56    position: absolute;57    top: 170px;58    right: 44px;59    width: 92px;60    height: 92px;61    background: #1E2A44;62    border-radius: 50%;63    display: flex;64    justify-content: center;65    align-items: center;66    color: #FFC52A;67    font-weight: 800;68    font-size: 58px;69    box-shadow: 0 8px 18px rgba(0,0,0,0.25);70  }71  .hero-title {72    position: absolute;73    top: 210px;74    left: 54px;75    color: #fff;76    font-size: 110px;77    font-weight: 800;78    line-height: 1;79    text-shadow: 0 6px 16px rgba(0,0,0,0.25);80  }81  .hero-title .dot {82    color: #FFC52A;83  }84 85  /* Card */86  .card {87    position: absolute;88    top: 380px;89    left: 32px;90    right: 32px;91    background: #fff;92    border-radius: 34px;93    box-shadow: 0 16px 36px rgba(27,43,74,0.15);94    padding-bottom: 36px;95  }96 97  .card .tabs {98    display: flex;99    justify-content: space-between;100    padding: 26px 36px 0 36px;101    font-size: 46px;102    font-weight: 700;103    color: #172A45;104  }105  .card .tabs .right {106    opacity: 0.8;107    font-weight: 700;108  }109 110  .segment {111    margin: 26px 36px;112    background: #EEF2F6;113    border-radius: 22px;114    display: flex;115    overflow: hidden;116  }117  .segment button {118    flex: 1;119    background: transparent;120    border: none;121    padding: 22px 0;122    font-size: 38px;123    color: #243854;124    font-weight: 700;125  }126  .segment button.active {127    background: #fff;128    border: 1px solid #D9E1EE;129    border-radius: 18px;130    margin: 10px;131    box-shadow: 0 4px 10px rgba(39,73,153,0.08);132  }133 134  .row {135    padding: 22px 36px;136    display: flex;137    align-items: center;138    justify-content: space-between;139  }140  .row .label {141    font-size: 56px;142    color: #0E2A4E;143    font-weight: 800;144  }145  .row .muted {146    color: #8BA0BC;147    font-size: 36px;148    font-weight: 700;149  }150  .divider {151    height: 1px;152    background: #E4E9F2;153    margin: 10px 36px;154  }155 156  .swap-icon {157    width: 70px;158    height: 70px;159    border-radius: 50%;160    background: #EEF4FF;161    display: flex;162    justify-content: center;163    align-items: center;164    margin: 0 22px;165  }166  .swap-icon svg { width: 40px; height: 40px; stroke: #6EA2FF; fill: none; stroke-width: 4; }167 168  .passenger-info {169    font-size: 38px;170    color: #0E2A4E;171    font-weight: 700;172    display: flex;173    gap: 22px;174    align-items: center;175  }176  .search-btn {177    margin: 24px 36px 0 36px;178    height: 120px;179    background: #2E6BFF;180    color: #fff;181    border: none;182    border-radius: 22px;183    font-size: 52px;184    font-weight: 800;185    box-shadow: 0 8px 20px rgba(46,107,255,0.35);186  }187 188  /* Quick actions */189  .quick-actions {190    position: absolute;191    top: 960px;192    left: 0;193    width: 100%;194    padding: 0 40px;195  }196  .qa-row {197    display: flex;198    justify-content: space-between;199    margin-top: 24px;200  }201  .qa-item {202    width: 300px;203    text-align: center;204  }205  .qa-item .icon {206    width: 170px;207    height: 140px;208    background: #fff;209    border-radius: 32px;210    margin: 0 auto 18px auto;211    display: flex;212    justify-content: center;213    align-items: center;214    box-shadow: 0 10px 20px rgba(0,0,0,0.08);215  }216  .qa-item .label {217    font-size: 38px;218    color: #142B4E;219    font-weight: 700;220  }221  .page-indicator {222    margin-top: 18px;223    display: flex;224    justify-content: center;225    gap: 14px;226  }227  .dot {228    width: 34px; height: 10px; border-radius: 8px; background: #2E6BFF; 229  }230  .dot.gray { background: #C6CFDA; width: 18px; }231 232  /* Discount banner */233  .banner {234    margin: 36px 40px 0 40px;235    background: linear-gradient(90deg, #FF5585, #D145FF);236    color: #fff;237    border-radius: 26px;238    padding: 28px 30px;239    display: flex;240    align-items: center;241    justify-content: space-between;242    box-shadow: 0 12px 22px rgba(209, 69, 255, 0.25);243  }244  .banner .left {245    display: flex; align-items: center; gap: 24px; font-size: 40px; font-weight: 800;246  }247  .badge {248    width: 76px; height: 76px; border-radius: 18px; background: rgba(255,255,255,0.2); display: flex; justify-content: center; align-items: center; font-size: 44px; font-weight: 900;249  }250  .info-btn {251    width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,0.25); display: flex; justify-content: center; align-items: center;252  }253  .info-btn svg { width: 28px; height: 28px; stroke: #fff; fill: none; stroke-width: 3; }254 255  /* Explore map section */256  .section-title {257    margin: 40px 40px 16px 40px;258    font-size: 46px;259    color: #0E284A;260    font-weight: 800;261  }262  .map-card {263    margin: 0 40px;264    border-radius: 28px;265    overflow: hidden;266    position: relative;267    background: #E0E0E0;268    border: 1px solid #BDBDBD;269    height: 380px;270    display: flex;271    align-items: center;272    justify-content: center;273    color: #666;274    font-weight: 700;275  }276  .overlay-btn {277    position: absolute;278    bottom: 26px;279    left: 50%;280    transform: translateX(-50%);281    background: #2E6BFF;282    color: #fff;283    padding: 26px 44px;284    border-radius: 18px;285    font-size: 42px;286    font-weight: 800;287    box-shadow: 0 8px 20px rgba(46,107,255,0.35);288  }289 290  .subtitle {291    margin: 42px 40px 0 40px;292    font-size: 44px;293    color: #0E284A;294    font-weight: 800;295  }296 297  /* Bottom home indicator (visual only) */298  .home-indicator {299    position: absolute;300    bottom: 26px;301    left: 50%;302    transform: translateX(-50%);303    width: 340px;304    height: 12px;305    background: #111;306    border-radius: 10px;307    opacity: 0.9;308  }309</style>310</head>311<body>312<div id="render-target">313 314  <!-- Hero with image placeholder -->315  <div class="hero">316    <div class="img">[IMG: Airplane wing at sunset]</div>317    <div class="back-btn" aria-label="Back">318      <svg viewBox="0 0 24 24"><path d="M15.5 4.5L8 12l7.5 7.5" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>319    </div>320    <div class="floating-t">T</div>321    <div class="hero-title">Flights<span class="dot">.</span></div>322  </div>323 324  <!-- Main search card -->325  <div class="card">326    <div class="tabs">327      <div>Flights</div>328      <div class="right">Explore Map</div>329    </div>330 331    <div class="segment">332      <button>One-way</button>333      <button class="active">Round-trip</button>334      <button>Multi-city</button>335    </div>336 337    <div class="row" style="align-items:center;">338      <div class="label">Amsterdam</div>339      <div class="swap-icon" title="Swap">340        <svg viewBox="0 0 24 24">341          <path d="M3 9h12M11 5l4 4-4 4M21 15H9M13 19l-4-4 4-4" />342        </svg>343      </div>344      <div class="muted">To</div>345    </div>346 347    <div class="divider"></div>348 349    <div class="row">350      <div class="label" style="font-size:52px;">Thu, Oct 19</div>351      <div class="muted">3 days</div>352      <div class="label" style="font-size:52px;">Sat, Oct 21</div>353    </div>354 355    <div class="divider"></div>356 357    <div class="row">358      <div class="muted" style="font-size:40px; color:#102A4F; font-weight:700;">Economy/Premium Economy</div>359      <div class="passenger-info">360        <span>1</span><span>0</span><span>0</span><span>0</span>361      </div>362    </div>363 364    <button class="search-btn">Search</button>365  </div>366 367  <!-- Quick actions -->368  <div class="quick-actions">369    <div class="qa-row">370      <div class="qa-item">371        <div class="icon">372          <svg width="72" height="72" viewBox="0 0 24 24">373            <path d="M3 13l8 2 10-6-6 8-12 3 4-7" fill="#7A6CFF" stroke="#7A6CFF" stroke-width="0"></path>374          </svg>375        </div>376        <div class="label">Charter Flights</div>377      </div>378      <div class="qa-item">379        <div class="icon">380          <svg width="72" height="72" viewBox="0 0 24 24">381            <circle cx="12" cy="12" r="8" fill="#00B9C9"></circle>382            <path d="M12 7v6l4 2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>383          </svg>384        </div>385        <div class="label">Flight Status</div>386      </div>387      <div class="qa-item">388        <div class="icon">389          <svg width="72" height="72" viewBox="0 0 24 24">390            <rect x="4" y="6" width="16" height="12" rx="2" fill="#FFA31A"></rect>391            <rect x="7" y="9" width="10" height="2" fill="#fff"></rect>392            <rect x="7" y="13" width="6" height="2" fill="#fff"></rect>393          </svg>394        </div>395        <div class="label">My Bookings</div>396      </div>397    </div>398    <div class="page-indicator">399      <div class="dot"></div>400      <div class="dot gray"></div>401    </div>402 403    <div class="banner">404      <div class="left">405        <div class="badge">%</div>406        <div>Get an automatic discount of $ 5 to $ 10 per person!</div>407      </div>408      <div class="info-btn" aria-label="Info">409        <svg viewBox="0 0 24 24">410          <circle cx="12" cy="12" r="9"></circle>411          <path d="M12 8.2v.1" />412          <path d="M12 11v6" />413        </svg>414      </div>415    </div>416 417    <div class="section-title">Explore Low Prices on Map</div>418    <div class="map-card">419      [IMG: World map illustration]420      <div class="overlay-btn">Find Flight Deals</div>421    </div>422 423    <div class="subtitle">Deals</div>424  </div>425 426  <div class="home-indicator"></div>427</div>428</body>429</html>