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>Airport Selector</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #FFFFFF;15  }16 17  /* Top status bar mimic */18  .status-bar {19    height: 120px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    color: #3c4043;24    font-size: 40px;25  }26  .status-left { display: flex; align-items: center; gap: 24px; }27  .status-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }28  .status-dot {29    width: 16px; height: 16px; background: #777; border-radius: 50%;30  }31  .status-icon {32    width: 40px; height: 40px; border: 3px solid #777; border-radius: 6px;33  }34 35  /* Cancel */36  .cancel-link {37    position: absolute;38    right: 40px;39    top: 160px;40    color: #1a73e8;41    font-size: 44px;42    font-weight: 600;43  }44 45  /* Title */46  .title {47    margin: 160px 48px 28px 48px;48    font-size: 86px;49    line-height: 96px;50    color: #202124;51    font-weight: 700;52  }53 54  /* Search input */55  .search-wrap { margin: 0 48px; }56  .search-input {57    display: flex;58    align-items: center;59    gap: 20px;60    border: 4px solid #DADCE0;61    border-radius: 28px;62    padding: 24px 28px;63    height: 120px;64  }65  .chip {66    display: inline-flex;67    align-items: center;68    gap: 18px;69    background: #ECEFF1;70    color: #202124;71    border-radius: 22px;72    padding: 18px 26px;73    font-size: 40px;74    font-weight: 600;75  }76  .chip .x {77    width: 36px; height: 36px; border-radius: 50%; border: 3px solid #5f6368; position: relative;78  }79  .chip .x:before, .chip .x:after {80    content: ""; position: absolute; left: 8px; right: 8px; top: 16px; height: 3px; background: #5f6368;81    transform-origin: center;82  }83  .chip .x:before { transform: rotate(45deg); }84  .chip .x:after { transform: rotate(-45deg); }85 86  .search-placeholder {87    flex: 1;88    font-size: 40px;89    color: #5f6368;90  }91  .caret {92    width: 4px; height: 60px; background: #1a73e8;93  }94  .hint {95    margin: 24px 48px 36px 48px;96    font-size: 38px; color: #5f6368;97  }98 99  /* Section header */100  .section-header {101    border-top: 3px solid #E0E0E0;102    border-bottom: 3px solid #E0E0E0;103    padding: 26px 48px;104    display: flex;105    align-items: center;106    font-size: 42px;107    color: #202124;108    font-weight: 600;109  }110  .section-header .count { color: #5f6368; font-weight: 600; margin-left: 6px; }111  .section-header .chevron { margin-left: auto; }112  .chevron svg { width: 44px; height: 44px; fill: none; stroke: #5f6368; stroke-width: 8; }113 114  /* List */115  .list { padding: 12px 0; }116  .item {117    display: flex;118    align-items: flex-start;119    padding: 30px 48px;120    gap: 28px;121  }122  .icon {123    width: 56px; height: 56px;124  }125  .text {126    flex: 1;127  }128  .title-row {129    font-size: 42px;130    color: #202124;131    font-weight: 600;132  }133  .subtitle {134    margin-top: 6px;135    font-size: 38px;136    color: #5f6368;137    font-weight: 500;138  }139  .km {140    margin-top: 8px;141    font-size: 36px;142    color: #5f6368;143  }144 145  /* Checkbox */146  .checkbox {147    width: 56px; height: 56px;148    border: 5px solid #9AA0A6;149    border-radius: 10px;150    margin-left: 12px;151  }152  .checkbox.checked {153    background: #1a73e8;154    border-color: #1a73e8;155    position: relative;156  }157  .checkbox.checked:after {158    content: "";159    position: absolute;160    left: 12px; top: 16px;161    width: 22px; height: 12px;162    border: 6px solid #fff;163    border-top: none; border-left: none;164    transform: rotate(45deg);165  }166 167  /* Bottom area */168  .bottom-safe {169    position: absolute;170    left: 0; right: 0;171    bottom: 160px;172    height: 180px;173    border-top: 3px solid #E0E0E0;174    background: #fff;175    display: flex;176    align-items: center;177    justify-content: center;178  }179  .btn {180    width: 740px;181    height: 120px;182    background: #1a73e8;183    border-radius: 24px;184    color: #fff;185    font-size: 48px;186    font-weight: 700;187    display: flex; align-items: center; justify-content: center;188    box-shadow: 0 4px 0 rgba(0,0,0,0.08);189  }190 191  /* Android navigation bar mimic */192  .android-bar {193    position: absolute;194    left: 0; right: 0; bottom: 0;195    height: 160px; background: #000;196  }197  .nav-pill {198    width: 200px; height: 14px; background: #E6E6E6;199    border-radius: 8px;200    position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%);201  }202</style>203</head>204<body>205<div id="render-target">206  <div class="status-bar">207    <div class="status-left">208      <div>3:34</div>209      <div class="status-dot"></div>210      <div>25°</div>211      <div class="status-icon"></div>212      <div class="status-dot"></div>213    </div>214    <div class="status-right">215      <div class="status-icon"></div>216      <div class="status-icon"></div>217    </div>218  </div>219 220  <div class="cancel-link">Cancel</div>221 222  <div class="title">Where to?</div>223 224  <div class="search-wrap">225    <div class="search-input">226      <div class="chip">227        <span>Paris</span>228        <span class="x"></span>229      </div>230      <div class="caret"></div>231      <div class="search-placeholder">Add another airport</div>232    </div>233  </div>234  <div class="hint">Select multiple airports at once and compare flights</div>235 236  <div class="section-header">237    <span>Included in your search</span>238    <span class="count">(1)</span>239    <div class="chevron">240      <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" /></svg>241    </div>242  </div>243 244  <div class="list">245    <!-- Paris · All airports -->246    <div class="item">247      <div class="icon">248        <svg viewBox="0 0 24 24" width="56" height="56">249          <path d="M12 22s7-8 7-12a7 7 0 1 0-14 0c0 4 7 12 7 12Z" fill="#5f6368"/>250          <circle cx="12" cy="10" r="3" fill="#fff"/>251        </svg>252      </div>253      <div class="text">254        <div class="title-row">Paris · All airports</div>255        <div class="subtitle">Ile de France, France</div>256      </div>257      <div class="checkbox checked"></div>258    </div>259 260    <!-- CDG -->261    <div class="item">262      <div class="icon">263        <svg viewBox="0 0 24 24" width="56" height="56">264          <path d="M2 17l20-6-1-3-9 3-5-7-2 1 4 8-7 4z" fill="#5f6368"/>265        </svg>266      </div>267      <div class="text">268        <div class="title-row"><strong>CDG</strong> Paris - Charles de Gaulle Airport</div>269        <div class="km">23 km from city center</div>270      </div>271      <div class="checkbox checked"></div>272    </div>273 274    <!-- ORY -->275    <div class="item">276      <div class="icon">277        <svg viewBox="0 0 24 24" width="56" height="56">278          <path d="M2 17l20-6-1-3-9 3-5-7-2 1 4 8-7 4z" fill="#5f6368"/>279        </svg>280      </div>281      <div class="text">282        <div class="title-row"><strong>ORY</strong> Paris - Orly Airport</div>283        <div class="km">14 km from city center</div>284      </div>285      <div class="checkbox checked"></div>286    </div>287 288    <!-- BVA -->289    <div class="item">290      <div class="icon">291        <svg viewBox="0 0 24 24" width="56" height="56">292          <path d="M2 17l20-6-1-3-9 3-5-7-2 1 4 8-7 4z" fill="#5f6368"/>293        </svg>294      </div>295      <div class="text">296        <div class="title-row"><strong>BVA</strong> Beauvais–Tillé Airport</div>297        <div class="km">69 km from city center</div>298      </div>299      <div class="checkbox checked"></div>300    </div>301 302    <!-- GND -->303    <div class="item">304      <div class="icon">305        <svg viewBox="0 0 24 24" width="56" height="56">306          <path d="M2 17l20-6-1-3-9 3-5-7-2 1 4 8-7 4z" fill="#5f6368"/>307        </svg>308      </div>309      <div class="text">310        <div class="title-row"><strong>GND</strong> Maurice Bishop International Airport</div>311        <div class="subtitle">Saint George’s, Saint George Parish, Grenada</div>312      </div>313      <div class="checkbox"></div>314    </div>315 316    <!-- PRX -->317    <div class="item">318      <div class="icon">319        <svg viewBox="0 0 24 24" width="56" height="56">320          <path d="M2 17l20-6-1-3-9 3-5-7-2 1 4 8-7 4z" fill="#5f6368"/>321        </svg>322      </div>323      <div class="text">324        <div class="title-row"><strong>PRX</strong> Cox Field Airport</div>325        <div class="subtitle">Paris, Texas, United States</div>326      </div>327      <div class="checkbox"></div>328    </div>329 330    <!-- LTQ -->331    <div class="item">332      <div class="icon">333        <svg viewBox="0 0 24 24" width="56" height="56">334          <path d="M2 17l20-6-1-3-9 3-5-7-2 1 4 8-7 4z" fill="#5f6368"/>335        </svg>336      </div>337      <div class="text">338        <div class="title-row"><strong>LTQ</strong> Le Touquet–Côte d'Opale Airport</div>339        <div class="subtitle">Le Touquet-Paris-Plage, Nord-Pas-de-Calais, France</div>340      </div>341      <div class="checkbox"></div>342    </div>343  </div>344 345  <div class="bottom-safe">346    <div class="btn">Done</div>347  </div>348 349  <div class="android-bar">350    <div class="nav-pill"></div>351  </div>352</div>353</body>354</html>