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>Multiple Departure Cities UI</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, system-ui, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    height: 96px;20    padding: 0 28px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #2a3d57;25    font-weight: 600;26    font-size: 34px;27  }28  .status-left { display: flex; align-items: center; gap: 16px; }29  .status-right { display: flex; align-items: center; gap: 18px; font-size: 30px; }30  .sb-dot { width: 10px; height: 10px; background: #7f8fa6; border-radius: 50%; display: inline-block; }31  .sb-icon {32    width: 28px; height: 28px; border-radius: 6px; background: #dbe3ea;33    display: inline-block;34  }35 36  /* Title row */37  .title-row {38    position: relative;39    height: 120px;40    color: #173252;41  }42  .title-text {43    position: absolute;44    left: 50%;45    top: 50%;46    transform: translate(-50%, -50%);47    font-size: 44px;48    font-weight: 700;49    letter-spacing: 0.3px;50  }51  .close-btn {52    position: absolute;53    left: 28px;54    top: 50%;55    transform: translateY(-50%);56    width: 68px;57    height: 68px;58    border-radius: 34px;59    display: flex;60    align-items: center;61    justify-content: center;62  }63  .close-btn svg { width: 44px; height: 44px; }64  .toggle {65    position: absolute;66    right: 28px;67    top: 50%;68    transform: translateY(-50%);69    width: 132px;70    height: 56px;71    background: #E5E8EE;72    border-radius: 28px;73    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);74  }75  .toggle .knob {76    width: 52px; height: 52px; background: #FFFFFF; border-radius: 50%;77    position: absolute; right: 4px; top: 2px;78    box-shadow: 0 1px 4px rgba(0,0,0,0.18);79  }80 81  /* Search */82  .search-wrap {83    margin: 12px 28px 22px 28px;84  }85  .search {86    height: 102px;87    border: 1.5px solid #D6DCE3;88    border-radius: 12px;89    display: flex;90    align-items: center;91    padding: 0 24px;92    color: #9AA6B2;93    font-size: 34px;94    gap: 18px;95  }96  .search svg { width: 38px; height: 38px; }97 98  /* Sections */99  .content { padding: 0 28px 0 28px; }100  .section-title {101    color: #173252;102    font-size: 42px;103    font-weight: 800;104    margin: 30px 0 22px 0;105  }106  .chip-grid {107    display: flex;108    flex-wrap: wrap;109    gap: 28px;110  }111  .chip {112    width: 309px;113    height: 116px;114    background: #F4F7FB;115    border-radius: 14px;116    display: flex;117    align-items: center;118    justify-content: center;119    color: #1E324F;120    font-size: 34px;121    font-weight: 600;122  }123 124  /* Keyboard overlay */125  .keyboard {126    position: absolute;127    left: 0; right: 0; bottom: 0;128    height: 860px;129    background: #1B1B1B;130    border-top: 1px solid #2A2A2A;131    color: #E6E6E6;132  }133  .kb-toolbar {134    height: 120px;135    display: flex;136    align-items: center;137    gap: 34px;138    padding: 0 28px;139  }140  .kb-tool {141    width: 76px; height: 76px; background: #2A2A2A; border-radius: 18px;142    display: flex; align-items: center; justify-content: center;143    font-size: 28px; color: #C7C7C7;144  }145  .keys {146    padding: 6px 18px 0 18px;147  }148  .row {149    display: flex;150    justify-content: center;151    gap: 16px;152    margin-bottom: 22px;153  }154  .key {155    width: 86px; height: 116px; background: #2A2A2A; border-radius: 18px;156    display: flex; align-items: center; justify-content: center;157    font-size: 38px; color: #DCDCDC;158  }159  .key.small { width: 72px; }160  .key.space { width: 480px; }161  .key-wide { width: 130px; }162  .key-green {163    width: 120px; height: 120px; border-radius: 60px;164    background: #B6F672; color: #1B1B1B; font-weight: 700;165  }166  .key-left-round {167    width: 120px; height: 120px; border-radius: 60px;168    background: #C7D7B0; color: #1B1B1B; font-weight: 700;169  }170  .backspace svg { width: 40px; height: 40px; }171 172  /* Safe area hint bar */173  .home-indicator {174    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);175    width: 360px; height: 10px; background: #E0E0E0; border-radius: 5px; opacity: 0.8;176  }177</style>178</head>179<body>180<div id="render-target">181  <!-- Status Bar -->182  <div class="status-bar">183    <div class="status-left">184      <div>8:13</div>185      <span class="sb-icon"></span>186      <span class="sb-icon"></span>187      <span class="sb-icon" style="border-radius:50%"></span>188      <span class="sb-dot"></span>189    </div>190    <div class="status-right">191      <span class="sb-icon"></span>192      <span class="sb-icon"></span>193      <span>100%</span>194    </div>195  </div>196 197  <!-- Title Row -->198  <div class="title-row">199    <div class="close-btn" aria-label="Close">200      <svg viewBox="0 0 24 24">201        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#183252" stroke-width="2.5" stroke-linecap="round" />202      </svg>203    </div>204    <div class="title-text">Multiple Departure Cities</div>205    <div class="toggle" aria-label="toggle">206      <div class="knob"></div>207    </div>208  </div>209 210  <!-- Search -->211  <div class="search-wrap">212    <div class="search">213      <svg viewBox="0 0 24 24">214        <circle cx="10" cy="10" r="7" stroke="#93A1AF" stroke-width="2" fill="none"></circle>215        <path d="M15 15 L22 22" stroke="#93A1AF" stroke-width="2" stroke-linecap="round"></path>216      </svg>217      <div>Country, city, or airport</div>218    </div>219  </div>220 221  <!-- Content Sections -->222  <div class="content">223    <div class="section-title">Asia</div>224    <div class="chip-grid">225      <div class="chip">Hong Kong</div>226      <div class="chip">Taipei</div>227      <div class="chip">Shanghai</div>228 229      <div class="chip">Tokyo</div>230      <div class="chip">Seoul</div>231      <div class="chip">Bangkok</div>232 233      <div class="chip">Singapore</div>234      <div class="chip">Kuala Lumpur</div>235      <div class="chip">Manila</div>236    </div>237 238    <div class="section-title" style="margin-top: 42px;">Europe</div>239    <div class="chip-grid">240      <div class="chip">London</div>241      <div class="chip">Paris</div>242      <div class="chip">Frankfurt</div>243 244      <div class="chip">Rome</div>245      <div class="chip">Amsterdam</div>246      <div class="chip">Madrid</div>247    </div>248 249    <div class="section-title" style="margin-top: 44px;">North America</div>250  </div>251 252  <!-- Keyboard Overlay -->253  <div class="keyboard">254    <div class="kb-toolbar">255      <div class="kb-tool">▦</div>256      <div class="kb-tool">☺</div>257      <div class="kb-tool">GIF</div>258      <div class="kb-tool">⚙</div>259      <div class="kb-tool">G↔</div>260      <div class="kb-tool">🎨</div>261      <div class="kb-tool">🎤</div>262    </div>263    <div class="keys">264      <div class="row">265        <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>266      </div>267      <div class="row">268        <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>269      </div>270      <div class="row">271        <div class="key-wide">⇧</div>272        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>273        <div class="key backspace">274          <svg viewBox="0 0 24 24">275            <path d="M4 12 L9 6 H20 V18 H9 Z" fill="#DCDCDC"></path>276          </svg>277        </div>278      </div>279      <div class="row" style="gap: 22px;">280        <div class="key-left-round">?123</div>281        <div class="key small">,</div>282        <div class="key small">☺</div>283        <div class="key space"></div>284        <div class="key small">.</div>285        <div class="key-green">✓</div>286      </div>287    </div>288  </div>289 290  <div class="home-indicator"></div>291</div>292</body>293</html>