GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Flight details - Vancouver</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: #0B1821;15    color: #EAF2F6;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 110px;25    color: #ffffff;26    padding: 0 36px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    font-weight: 600;31    font-size: 40px;32    letter-spacing: 0.5px;33  }34  .status-icons {35    display: flex;36    align-items: center;37    gap: 28px;38  }39  .status-icons svg { width: 40px; height: 40px; stroke: #ffffff; fill: none; opacity: 0.85; }40 41  /* Banner */42  .banner {43    position: relative;44    margin-top: 110px;45    height: 540px;46    width: 100%;47    overflow: hidden;48  }49  .banner .img {50    position: absolute;51    inset: 0;52    background: #E0E0E0;53    border: 1px solid #BDBDBD;54    display: flex;55    align-items: center;56    justify-content: center;57    color: #757575;58    font-size: 36px;59  }60  .banner::after {61    content: "";62    position: absolute;63    inset: 0;64    background: linear-gradient(to bottom, rgba(11,24,33,0.0) 0%, rgba(11,24,33,0.55) 65%, rgba(11,24,33,0.85) 100%);65  }66  .banner .top-actions {67    position: absolute;68    top: 30px;69    left: 30px;70    right: 30px;71    display: flex;72    align-items: center;73    justify-content: space-between;74    z-index: 2;75  }76  .icon-btn {77    width: 80px;78    height: 80px;79    display: flex;80    align-items: center;81    justify-content: center;82    border-radius: 40px;83    background: rgba(11,24,33,0.35);84  }85  .icon-btn svg { width: 40px; height: 40px; stroke: #EAF2F6; fill: none; }86 87  .banner .title {88    position: absolute;89    left: 40px;90    bottom: 36px;91    z-index: 2;92    font-size: 64px;93    font-weight: 700;94    color: #ffffff;95    text-shadow: 0 2px 8px rgba(0,0,0,0.35);96  }97 98  /* Card */99  .card {100    width: 1000px;101    margin: 24px auto 0 auto;102    background: #12222B;103    border-radius: 30px;104    box-shadow: 0 10px 20px rgba(0,0,0,0.35);105    overflow: hidden;106  }107  .card-inner { padding: 44px; }108  .card h2 {109    margin: 0 0 18px 0;110    font-size: 60px;111    font-weight: 700;112    color: #ffffff;113  }114  .pill {115    display: inline-block;116    background: #F4F6F8;117    color: #0B1821;118    border-radius: 16px;119    padding: 18px 26px;120    font-size: 36px;121    font-weight: 700;122    margin-bottom: 20px;123  }124  .subline {125    font-size: 36px;126    color: #A4B5C0;127    margin-bottom: 30px;128  }129  .divider {130    height: 1px;131    background: #1E2F38;132    margin: 0 -44px 28px -44px;133  }134  .route {135    font-size: 34px;136    color: #A4B5C0;137    margin-bottom: 26px;138    line-height: 1.35;139  }140 141  .flight-row {142    display: flex;143    align-items: center;144    justify-content: space-between;145    gap: 28px;146    margin-bottom: 36px;147  }148  .airline {149    display: flex;150    align-items: center;151    gap: 28px;152    flex: 1;153  }154  .logo {155    width: 120px;156    height: 120px;157    background: #E0E0E0;158    border: 1px solid #BDBDBD;159    border-radius: 18px;160    display: flex;161    align-items: center;162    justify-content: center;163    color: #757575;164    font-size: 28px;165    text-align: center;166  }167  .times {168    display: flex;169    flex-direction: column;170    gap: 10px;171  }172  .times .primary {173    font-size: 48px;174    font-weight: 800;175    color: #ffffff;176    letter-spacing: 0.3px;177  }178  .times .airline-name {179    font-size: 34px;180    color: #A4B5C0;181  }182  .meta {183    width: 260px;184    text-align: right;185  }186  .meta .direct {187    font-size: 40px;188    font-weight: 700;189    color: #DDE6EB;190  }191  .meta .duration {192    font-size: 32px;193    color: #A4B5C0;194    margin-top: 10px;195  }196  .card-footer {197    padding: 0 44px 34px 44px;198    display: flex;199    align-items: center;200    justify-content: space-between;201  }202  .link {203    font-size: 40px;204    font-weight: 700;205    color: #8FE3F2;206  }207  .chevron svg { width: 40px; height: 40px; stroke: #8FE3F2; fill: none; }208 209  /* Providers / price section */210  .providers {211    width: 100%;212    padding: 60px 44px 0 44px;213  }214  .providers-top {215    display: flex;216    align-items: flex-end;217    justify-content: space-between;218    margin-bottom: 34px;219  }220  .providers-top .left {221    font-size: 36px;222    color: #A4B5C0;223  }224  .providers-top .right {225    text-align: right;226  }227  .providers-top .right .from {228    font-size: 36px;229    color: #A4B5C0;230    margin-bottom: 8px;231  }232  .providers-top .right .price {233    font-size: 68px;234    font-weight: 800;235    color: #ffffff;236    line-height: 1.0;237  }238  .providers-top .right .total {239    font-size: 32px;240    color: #A4B5C0;241    margin-top: 8px;242  }243  .providers .line {244    height: 1px;245    background: #1E2F38;246    margin: 34px 0;247  }248  .info-row {249    display: flex;250    align-items: center;251    gap: 18px;252    color: #A4B5C0;253    font-size: 36px;254  }255  .info-icon {256    width: 42px;257    height: 42px;258    border-radius: 21px;259    background: #DDE6EB;260    display: flex;261    align-items: center;262    justify-content: center;263    color: #0B1821;264    font-weight: 900;265  }266 267  /* CTA */268  .cta {269    position: absolute;270    left: 40px;271    right: 40px;272    bottom: 170px;273    height: 120px;274    background: #A9EAF6;275    color: #0B1821;276    border-radius: 28px;277    display: flex;278    align-items: center;279    justify-content: center;280    font-size: 44px;281    font-weight: 800;282    box-shadow: 0 8px 20px rgba(0,0,0,0.35);283  }284 285  /* Home indicator mimic */286  .home-indicator {287    position: absolute;288    bottom: 60px;289    left: 50%;290    transform: translateX(-50%);291    width: 360px;292    height: 12px;293    background: rgba(255,255,255,0.35);294    border-radius: 6px;295  }296</style>297</head>298<body>299<div id="render-target">300 301  <!-- Status Bar -->302  <div class="status-bar">303    <div>10:01</div>304    <div class="status-icons">305      <!-- simple search icon -->306      <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="7" stroke-width="2"></circle><path d="M21 21l-6-6" stroke-width="2"></path></svg>307      <!-- simple wifi -->308      <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0" stroke-width="2"></path><path d="M5 12c3-3 11-3 14 0" stroke-width="2"></path><path d="M9 16c2-2 4-2 6 0" stroke-width="2"></path></svg>309      <!-- battery -->310      <svg viewBox="0 0 26 24"><rect x="2" y="6" width="18" height="12" rx="2" stroke-width="2"></rect><rect x="21" y="9" width="3" height="6" stroke-width="2"></rect><rect x="4" y="8" width="12" height="8" fill="#ffffff"></rect></svg>311    </div>312  </div>313 314  <!-- Banner with city image -->315  <div class="banner">316    <div class="img">[IMG: Vancouver skyline]</div>317 318    <div class="top-actions">319      <div class="icon-btn">320        <!-- Back arrow -->321        <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>322      </div>323      <div style="display:flex; gap:20px;">324        <div class="icon-btn">325          <!-- Heart outline -->326          <svg viewBox="0 0 24 24"><path d="M12 21s-7-5-9-9c-2-5 3-9 9-4 6-5 11-1 9 4-2 4-9 9-9 9z" stroke-width="2" fill="none"></path></svg>327        </div>328        <div class="icon-btn">329          <!-- Share icon -->330          <svg viewBox="0 0 24 24"><circle cx="6" cy="12" r="2" stroke-width="2"></circle><circle cx="18" cy="6" r="2" stroke-width="2"></circle><circle cx="18" cy="18" r="2" stroke-width="2"></circle><path d="M8 12l8-6M8 12l8 6" stroke-width="2"></path></svg>331        </div>332      </div>333    </div>334 335    <div class="title">Flight details</div>336  </div>337 338  <!-- Main Card -->339  <div class="card">340    <div class="card-inner">341      <h2>Vancouver</h2>342      <div class="pill">Friday, December 15</div>343      <div class="subline">3 travelers • One-way • Economy</div>344      <div class="divider"></div>345      <div class="route">Toronto Pearson International to Vancouver International</div>346 347      <div class="flight-row">348        <div class="airline">349          <div class="logo">[IMG: Lynx Air logo]</div>350          <div class="times">351            <div class="primary">9:05 PM – 11:38 PM</div>352            <div class="airline-name">Lynx Air</div>353          </div>354        </div>355        <div class="meta">356          <div class="direct">Direct</div>357          <div class="duration">5h 33m</div>358        </div>359      </div>360    </div>361 362    <div class="divider"></div>363 364    <div class="card-footer">365      <div class="link">View details</div>366      <div class="chevron">367        <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>368      </div>369    </div>370  </div>371 372  <!-- Providers / Price section -->373  <div class="providers">374    <div class="providers-top">375      <div class="left">8 providers found</div>376      <div class="right">377        <div class="from">From</div>378        <div class="price">$137</div>379        <div class="total">3 travelers $409</div>380      </div>381    </div>382 383    <div class="line"></div>384 385    <div class="info-row">386      <div class="info-icon">i</div>387      <div>Read before booking</div>388    </div>389  </div>390 391  <!-- CTA -->392  <div class="cta">Choose a provider</div>393 394  <!-- Home indicator -->395  <div class="home-indicator"></div>396 397</div>398</body>399</html>