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: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #1f2a44; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #eef1f6;13    border-radius: 40px;14    box-shadow: 0 10px 40px rgba(0,0,0,0.15);15  }16 17  .hero {18    position: relative;19    width: 1080px;20    height: 520px;21  }22  .hero .img {23    position: absolute; inset: 0;24    background: #E0E0E0;25    border: 1px solid #BDBDBD;26    display: flex; align-items: center; justify-content: center;27    color: #757575; font-weight: 600;28  }29  .back-btn {30    position: absolute; left: 32px; top: 92px;31    width: 96px; height: 96px; border-radius: 48px;32    background: #223b69; display: flex; align-items: center; justify-content: center;33    box-shadow: 0 6px 16px rgba(0,0,0,0.25);34  }35  .back-btn svg { width: 40px; height: 40px; fill: #ffffff; }36  .top-shortcut {37    position: absolute; right: 40px; top: 180px;38    width: 72px; height: 72px; border-radius: 36px;39    background: #ffb400; display: flex; align-items: center; justify-content: center;40    color: #fff; font-weight: 700;41    box-shadow: 0 6px 16px rgba(0,0,0,0.2);42  }43  .hero-title {44    position: absolute; left: 40px; bottom: 40px;45    font-size: 86px; line-height: 1; font-weight: 800; color: #ffffff;46    text-shadow: 0 2px 10px rgba(0,0,0,0.35);47  }48  .hero-title .dot {49    display: inline-block; width: 18px; height: 18px; background: #ffcc00; border-radius: 9px; vertical-align: middle; margin-left: 12px;50  }51 52  .card {53    position: absolute; left: 40px; top: 440px;54    width: 1000px; background: #ffffff; border-radius: 28px;55    box-shadow: 0 12px 30px rgba(0,0,0,0.12);56    overflow: hidden;57  }58  .card-tabs {59    display: flex; gap: 24px; padding: 28px 32px 18px 32px;60    border-bottom: 1px solid #e6e9f0;61  }62  .card-tabs .tab {63    font-size: 42px; font-weight: 700; color: #223b69;64  }65  .segmented {66    display: flex; gap: 16px; padding: 24px 32px;67  }68  .segmented .seg {69    flex: 1; text-align: center; padding: 22px 0; border-radius: 16px;70    background: #edf1f7; color: #223b69; font-weight: 700; font-size: 36px;71  }72  .segmented .seg.active {73    background: #ffffff; border: 1px solid #d6ddea; color: #223b69;74    box-shadow: 0 2px 10px rgba(0,0,0,0.06);75  }76  .route {77    display: grid; grid-template-columns: 1fr 140px 1fr; align-items: center;78    padding: 24px 32px;79  }80  .city {81    display: flex; flex-direction: column; gap: 8px;82  }83  .city .name { font-size: 54px; font-weight: 800; color: #1f2a44; }84  .city .sub { font-size: 34px; color: #7a879c; }85  .plane-icon {86    width: 120px; height: 120px; border-radius: 60px; background: #eef3ff;87    display: flex; align-items: center; justify-content: center; margin: 0 auto; border: 8px solid #e5ecff;88  }89  .plane-icon svg { width: 64px; height: 64px; fill: #4c6fff; }90 91  .divider { height: 1px; background: #e6e9f0; margin: 0 32px; }92 93  .dates {94    display: grid; grid-template-columns: 1fr 180px 1fr; align-items: center;95    padding: 26px 32px; font-weight: 800;96  }97  .dates .left, .dates .right {98    font-size: 50px; color: #1f2a44;99  }100  .dates .center { text-align: center; color: #9aa7bd; font-size: 36px; font-weight: 700; }101 102  .class-passengers {103    display: grid; grid-template-columns: 1fr auto; align-items: center;104    padding: 24px 32px; gap: 24px;105  }106  .class-passengers .class { font-size: 40px; font-weight: 700; color: #223b69; }107  .travellers { display: flex; align-items: center; gap: 26px; color: #627395; font-weight: 700; }108  .travellers .count { display: inline-flex; align-items: center; gap: 10px; font-size: 34px; }109  .travellers svg { width: 34px; height: 34px; fill: #8ea1bd; }110 111  .option-row {112    display: flex; align-items: center; gap: 22px; padding: 26px 32px;113  }114  .checkbox {115    width: 40px; height: 40px; border: 3px solid #cfd8e6; border-radius: 8px; background: #fff;116  }117  .option-row .label { font-size: 40px; font-weight: 700; color: #223b69; }118  .badge {119    margin-left: 16px; background: #ff5fa3; color: #fff; font-size: 34px; font-weight: 800; padding: 10px 18px; border-radius: 14px;120  }121 122  .search-btn {123    margin: 24px 32px 32px 32px; height: 120px; border-radius: 20px;124    display: flex; align-items: center; justify-content: center;125    background: #3166ff; color: #ffffff; font-size: 46px; font-weight: 800;126    box-shadow: 0 10px 20px rgba(49,102,255,0.35);127  }128 129  .features {130    position: absolute; top: 1090px; left: 0; width: 1080px; padding: 24px 40px;131  }132  .feature-row {133    display: flex; justify-content: space-between; margin-top: 12px; margin-bottom: 18px;134  }135  .feature {136    width: 300px; display: flex; flex-direction: column; align-items: center; gap: 18px;137  }138  .feature .icon {139    width: 160px; height: 160px; border-radius: 32px; background: #ffffff;140    box-shadow: 0 8px 18px rgba(0,0,0,0.08);141    display: flex; align-items: center; justify-content: center; border: 1px solid #e6e9f0;142  }143  .feature .icon svg { width: 80px; height: 80px; fill: #5b6fff; }144  .feature .label { font-size: 36px; color: #223b69; font-weight: 700; text-align: center; }145 146  .pager {147    display: flex; justify-content: center; gap: 12px; margin-top: 8px; margin-bottom: 20px;148  }149  .dot { width: 40px; height: 12px; border-radius: 8px; background: #3166ff; }150  .dot.gray { background: #c8cfda; width: 32px; }151 152  .promo {153    margin: 18px 40px; border-radius: 26px; padding: 28px 32px;154    background: linear-gradient(90deg, #ff5fa3, #ff6db7, #ff7acd);155    color: #ffffff; font-size: 40px; font-weight: 800;156    display: flex; align-items: center; gap: 24px;157    box-shadow: 0 8px 18px rgba(255,95,163,0.35);158  }159  .promo .pill {160    width: 72px; height: 72px; border-radius: 20px; background: rgba(255,255,255,0.25);161    display: flex; align-items: center; justify-content: center;162    color: #ffffff; font-weight: 900;163  }164  .promo .info {165    margin-left: auto; width: 56px; height: 56px; border-radius: 28px; background: rgba(255,255,255,0.25);166    display: flex; align-items: center; justify-content: center; font-weight: 900;167  }168 169  .section-title {170    font-size: 44px; font-weight: 800; color: #223b69; margin: 24px 40px 16px 40px;171  }172  .map {173    margin: 0 40px 40px 40px; height: 480px; border-radius: 26px;174    background: #E0E0E0; border: 1px solid #BDBDBD;175    display: flex; align-items: center; justify-content: center; color: #757575; font-weight: 700;176  }177</style>178</head>179<body>180<div id="render-target">181 182  <div class="hero">183    <div class="img">[IMG: Airplane wing at sunset]</div>184    <div class="back-btn">185      <svg viewBox="0 0 24 24"><path d="M15.5 19.5L8 12l7.5-7.5-1.6-1.6L4.8 12l9.1 9.1z"/></svg>186    </div>187    <div class="top-shortcut">T</div>188    <div class="hero-title">Flights<span class="dot"></span></div>189  </div>190 191  <div class="card">192    <div class="card-tabs">193      <div class="tab">Flights</div>194      <div class="tab" style="color:#4a5b78; font-weight:700;">Explore Map</div>195    </div>196 197    <div class="segmented">198      <div class="seg">One-way</div>199      <div class="seg active">Round-trip</div>200      <div class="seg">Multi-city</div>201    </div>202 203    <div class="route">204      <div class="city">205        <div class="name">Amsterdam</div>206        <div class="sub">All Airports</div>207      </div>208      <div class="plane-icon">209        <svg viewBox="0 0 24 24"><path d="M21 16.5l-7.5-2.6-3.2 3.2.7 3-1.4 1.4-2.1-3.6-3.9-.9 1.4-1.4 3 .7 3.2-3.2L7.5 3 9 3.5l5 6.5 5.5 2.2z"/></svg>210      </div>211      <div class="city" style="align-items:flex-end; text-align:right;">212        <div class="name">Paris</div>213        <div class="sub">Paris Charles de Gaulle Airport</div>214      </div>215    </div>216 217    <div class="divider"></div>218 219    <div class="dates">220      <div class="left">Thu, Oct 19</div>221      <div class="center">3 days</div>222      <div class="right" style="text-align:right;">Sat, Oct 21</div>223    </div>224 225    <div class="divider"></div>226 227    <div class="class-passengers">228      <div class="class">Economy/Premium Economy</div>229      <div class="travellers">230        <span class="count">1231          <svg viewBox="0 0 24 24"><path d="M12 12a4 4 0 100-8 4 4 0 000 8zm-7 9v-2c0-3.3 3.7-5 7-5s7 1.7 7 5v2H5z"/></svg>232        </span>233        <span class="count">0234          <svg viewBox="0 0 24 24"><path d="M12 10a3 3 0 100-6 3 3 0 000 6zm-6 10v-1.5c0-2.6 3.2-3.8 6-3.8s6 1.2 6 3.8V20H6z"/></svg>235        </span>236        <span class="count">0237          <svg viewBox="0 0 24 24"><path d="M12 9a2.5 2.5 0 100-5 2.5 2.5 0 000 5zm-7 11v-2c0-2.2 3-3.5 7-3.5s7 1.3 7 3.5v2H5z"/></svg>238        </span>239      </div>240    </div>241 242    <div class="divider"></div>243 244    <div class="option-row">245      <div class="checkbox"></div>246      <div class="label">Flight + Hotel</div>247      <div class="badge">Save money</div>248    </div>249 250    <div class="search-btn">Search</div>251  </div>252 253  <div class="features">254    <div class="feature-row">255      <div class="feature">256        <div class="icon">257          <svg viewBox="0 0 24 24"><path d="M21 12l-6-3-3 3-3-3-6 3 9 9z"/></svg>258        </div>259        <div class="label">Charter Flights</div>260      </div>261      <div class="feature">262        <div class="icon">263          <svg viewBox="0 0 24 24"><path d="M3 4h18v14H3zM7 2h10v2H7zM12 7v5h4"/></svg>264        </div>265        <div class="label">Flight Status</div>266      </div>267      <div class="feature">268        <div class="icon">269          <svg viewBox="0 0 24 24"><path d="M4 4h16v16H4zM8 8h8v2H8zm0 4h8v2H8z"/></svg>270        </div>271        <div class="label">My Bookings</div>272      </div>273    </div>274    <div class="pager">275      <div class="dot"></div>276      <div class="dot gray"></div>277    </div>278 279    <div class="promo">280      <div class="pill">%</div>281      <div>Get an automatic discount of $ 5 to $ 10 per person!</div>282      <div class="info">i</div>283    </div>284 285    <div class="section-title">Explore Low Prices on Map</div>286    <div class="map">[IMG: World map with price tags and flight arcs]</div>287  </div>288 289</div>290</body>291</html>