GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Flight details - Mobile UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0b0f12; /* dark app background */14    color: #e6edf2;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 110px;24    background: #0b0f12;25    color: #e6edf2;26    font-size: 32px;27    letter-spacing: 0.5px;28    display: flex;29    align-items: center;30    justify-content: space-between;31    padding: 0 40px;32    box-sizing: border-box;33  }34  .status-right {35    display: flex;36    align-items: center;37    gap: 26px;38  }39  .dot { width: 10px; height: 10px; background: #b7c3cc; border-radius: 50%; display: inline-block; }40  .icon-wifi, .icon-battery {41    width: 38px; height: 32px;42  }43  .icon-wifi path, .icon-battery path { fill: #e6edf2; }44 45  /* Hero banner */46  .hero {47    position: absolute;48    top: 110px;49    left: 0;50    width: 1080px;51    height: 420px;52    overflow: hidden;53  }54  .hero-img {55    position: absolute;56    inset: 0;57    background: #E0E0E0;58    border-bottom: 1px solid #1f2730;59    display: flex; align-items: center; justify-content: center;60    color: #757575;61    font-size: 34px;62  }63  .hero-overlay {64    position: absolute;65    inset: 0;66    background: linear-gradient(180deg, rgba(11,15,18,0.6) 0%, rgba(11,15,18,0.75) 60%, rgba(11,15,18,1) 100%);67  }68  .top-actions {69    position: absolute;70    top: 26px;71    left: 24px;72    right: 24px;73    height: 60px;74    display: flex;75    align-items: center;76    justify-content: space-between;77    opacity: 0.95;78  }79  .circle-btn {80    width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;81    border-radius: 28px;82    color: #cfd8dc;83  }84  .top-actions .right {85    display: flex; gap: 18px;86  }87  .hero-title {88    position: absolute;89    bottom: 22px;90    left: 38px;91    font-size: 56px;92    font-weight: 700;93    color: #cfd8dc;94    opacity: 0.9;95  }96 97  /* Card */98  .card {99    position: absolute;100    top: 560px;101    left: 32px;102    width: 1016px;103    background: #1c242b;104    border-radius: 28px;105    box-shadow: 0 8px 20px rgba(0,0,0,0.35);106    padding: 40px 36px;107    box-sizing: border-box;108  }109  .card h1 {110    margin: 0 0 22px;111    font-size: 54px;112    font-weight: 700;113    color: #cfe3ee;114  }115  .pill {116    display: inline-block;117    background: #d3d8dc;118    color: #1c242b;119    font-weight: 600;120    font-size: 32px;121    padding: 16px 22px;122    border-radius: 16px;123    margin-bottom: 18px;124  }125  .subtext {126    font-size: 32px;127    color: #96a3ad;128    margin: 16px 0 26px;129  }130  .divider { height: 1px; background: #2b3a44; margin: 10px -36px 26px; opacity: 0.7; }131  .route {132    font-size: 32px;133    color: #a9b5be;134    margin-bottom: 24px;135    line-height: 1.35;136  }137  .flight-row {138    display: grid;139    grid-template-columns: 120px 1fr 180px;140    align-items: center;141    gap: 24px;142    margin-bottom: 22px;143  }144  .img-logo {145    width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;146    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; border-radius: 18px;147  }148  .time-line {149    display: flex; align-items: baseline; justify-content: space-between;150  }151  .time {152    font-size: 40px;153    font-weight: 700;154    color: #dbe6ee;155    letter-spacing: 0.2px;156  }157  .direct {158    font-size: 34px; font-weight: 700; color: #aebbc4; text-align: right;159  }160  .meta-line {161    display: flex; align-items: baseline; justify-content: space-between;162    margin-left: 144px;163    margin-top: -12px;164  }165  .airline { font-size: 32px; color: #8ea0ab; }166  .duration { font-size: 32px; color: #8ea0ab; }167  .card-bottom {168    border-top: 1px solid #2b3a44;169    margin: 14px -36px 0;170    padding: 26px 36px 10px;171    display: flex; align-items: center; justify-content: space-between;172  }173  .link {174    color: #6dc9c5;175    font-size: 36px;176    font-weight: 700;177  }178  .chevron {179    width: 34px; height: 34px;180  }181  .chevron path { fill: #6dc9c5; }182 183  /* Bottom sheet */184  .sheet {185    position: absolute;186    left: 0;187    bottom: 110px;188    width: 1080px;189    height: 720px;190    background: #2e3b46;191    border-top-left-radius: 28px;192    border-top-right-radius: 28px;193    box-shadow: 0 -8px 20px rgba(0,0,0,0.45);194    padding: 34px 40px;195    box-sizing: border-box;196    color: #dbe6ee;197  }198  .sheet-title {199    font-size: 36px;200    color: #c9d4dc;201    margin-bottom: 40px;202  }203  .sheet-row {204    display: grid;205    grid-template-columns: 90px 1fr 90px;206    align-items: center;207    gap: 24px;208    padding: 20px 0;209  }210  .thumb {211    width: 90px; height: 90px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 18px;212    display: flex; align-items: center; justify-content: center; font-size: 22px; color: #757575;213  }214  .row-title {215    font-size: 40px;216    font-weight: 600;217    color: #e6edf2;218  }219  .bell {220    width: 46px; height: 46px;221  }222  .bell path { fill: #c9d4dc; }223  .plus-circle {224    width: 72px; height: 72px; border-radius: 36px; background: #3a4a57; display: flex; align-items: center; justify-content: center;225  }226  .plus-circle svg { width: 36px; height: 36px; }227  .plus-circle svg path { fill: #c9d4dc; }228 229  /* Home pill */230  .home-pill {231    position: absolute;232    bottom: 34px;233    left: 50%;234    transform: translateX(-50%);235    width: 300px; height: 14px; background: #e6edf2; border-radius: 7px; opacity: 0.85;236  }237 238  /* Simple icons */239  .icon {240    width: 32px; height: 32px;241  }242  .icon path { fill: #cfd8dc; }243</style>244</head>245<body>246<div id="render-target">247  <!-- Status bar -->248  <div class="status-bar">249    <div>10:02</div>250    <div class="status-right">251      <span class="dot"></span>252      <span style="font-weight:700;">N</span>253      <span style="font-weight:700;">LR</span>254      <span class="dot"></span>255      <svg class="icon-wifi" viewBox="0 0 24 24">256        <path d="M12 18c.8 0 1.5.7 1.5 1.5S12.8 21 12 21s-1.5-.7-1.5-1.5S11.2 18 12 18zm-6.6-7.6c3.6-3.1 9.6-3.1 13.2 0l-1.7 1.9c-2.6-2.3-7.3-2.3-9.9 0l-1.6-1.9zm3.7 3.5c2.2-1.9 6.2-1.9 8.4 0l-1.7 1.8c-1.4-1.2-3.6-1.2-5 0l-1.7-1.8z"/>257      </svg>258      <svg class="icon-battery" viewBox="0 0 24 24">259        <path d="M16 7h2v2h2v6h-2v2h-2V7zM2 8.5C2 7.7 2.7 7 3.5 7h9c.8 0 1.5.7 1.5 1.5v7c0 .8-.7 1.5-1.5 1.5h-9c-.8 0-1.5-.7-1.5-1.5v-7zM4 10h8v5H4v-5z"/>260      </svg>261    </div>262  </div>263 264  <!-- Hero banner -->265  <div class="hero">266    <div class="hero-img">[IMG: Vancouver skyline]</div>267    <div class="hero-overlay"></div>268 269    <div class="top-actions">270      <div class="circle-btn">271        <svg class="icon" viewBox="0 0 24 24">272          <path d="M15.5 5.5L9 12l6.5 6.5-2 2L5 12l8.5-8.5 2 2z"/>273        </svg>274      </div>275      <div class="right">276        <div class="circle-btn">277          <svg class="icon" viewBox="0 0 24 24">278            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 6 4 4 6.5 4c1.74 0 3.41.81 4.5 2.09C12.59 4.81 14.26 4 16 4 18.5 4 20.5 6 20.5 8.5c0 3.78-3.4 6.86-8.05 11.54L12 21.35z"/>279          </svg>280        </div>281        <div class="circle-btn">282          <svg class="icon" viewBox="0 0 24 24">283            <path d="M18 8a3 3 0 11-6 0 3 3 0 016 0zM6 12a3 3 0 110-6 3 3 0 010 6zm12 4a3 3 0 110 6 3 3 0 010-6zM6 22a3 3 0 110-6 3 3 0 010 6zM9 14l6-4v8l-6-4z"/>284          </svg>285        </div>286      </div>287    </div>288    <div class="hero-title">Flight details</div>289  </div>290 291  <!-- Information card -->292  <div class="card">293    <h1>Vancouver</h1>294    <div class="pill">Friday, December 15</div>295    <div class="subtext">3 travelers • One-way • Economy</div>296    <div class="divider"></div>297 298    <div class="route">Toronto Pearson International to Vancouver International</div>299 300    <div class="flight-row">301      <div class="img-logo">[IMG: Lynx Air logo]</div>302      <div class="time-line">303        <div class="time">9:05 PM – 11:38 PM</div>304      </div>305      <div class="direct">Direct</div>306    </div>307    <div class="meta-line">308      <div class="airline">Lynx Air</div>309      <div class="duration">5h 33m</div>310    </div>311 312    <div class="card-bottom">313      <div class="link">View details</div>314      <svg class="chevron" viewBox="0 0 24 24">315        <path d="M9 6l6 6-6 6z"/>316      </svg>317    </div>318  </div>319 320  <!-- Bottom sheet -->321  <div class="sheet">322    <div class="sheet-title">Choose where to save your flight</div>323 324    <div class="sheet-row">325      <div class="thumb">[IMG: Trip cover]</div>326      <div class="row-title">My trip</div>327      <svg class="bell" viewBox="0 0 24 24">328        <path d="M12 22a2 2 0 002-2h-4a2 2 0 002 2zm6-6V11a6 6 0 10-12 0v5l-2 2v1h16v-1l-2-2z"/>329      </svg>330    </div>331 332    <div class="sheet-row">333      <div class="plus-circle">334        <svg viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z"/></svg>335      </div>336      <div class="row-title">Save to a new trip</div>337      <div></div>338    </div>339  </div>340 341  <div class="home-pill"></div>342</div>343</body>344</html>