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>Multiple Departure Cities - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", 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: 84px;20    padding: 0 28px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #2b2b2b;25    font-size: 26px;26    box-sizing: border-box;27  }28  .status-left { letter-spacing: 0.5px; }29  .status-right { display: flex; align-items: center; gap: 16px; color: #2b2b2b; }30 31  /* Header */32  .header {33    height: 96px;34    display: flex;35    align-items: center;36    padding: 0 28px;37    box-sizing: border-box;38    margin-top: 6px;39  }40  .header .left,41  .header .right {42    width: 220px;43    display: flex;44    align-items: center;45    justify-content: flex-start;46  }47  .header .center {48    flex: 1;49    text-align: center;50    font-weight: 700;51    color: #183357;52    font-size: 38px;53  }54  .icon-btn {55    width: 56px;56    height: 56px;57    border-radius: 28px;58    display: flex;59    align-items: center;60    justify-content: center;61    cursor: default;62  }63  .toggle {64    width: 96px;65    height: 48px;66    background: #e5e8ee;67    border-radius: 24px;68    position: relative;69    margin-left: auto;70  }71  .toggle .knob {72    width: 44px;73    height: 44px;74    background: #ffffff;75    border-radius: 22px;76    position: absolute;77    top: 2px;78    right: 2px; /* off */79    box-shadow: 0 1px 2px rgba(0,0,0,0.2);80  }81 82  /* Search bar */83  .search-wrap {84    padding: 22px 36px 12px 36px;85    box-sizing: border-box;86  }87  .search-bar {88    height: 96px;89    border: 1px solid #D6DFEA;90    border-radius: 10px;91    display: flex;92    align-items: center;93    padding: 0 18px;94    box-sizing: border-box;95    gap: 16px;96  }97  .search-input {98    flex: 1;99    font-size: 34px;100    color: #1f2f4a;101  }102  .search-placeholder { color: #7b8aa5; }103 104  /* Results list */105  .results {106    padding: 8px 0 0 0;107  }108  .row {109    display: flex;110    padding: 20px 36px;111    gap: 20px;112    align-items: flex-start;113  }114  .row .icon-box {115    width: 44px;116    height: 44px;117    display: flex;118    align-items: center;119    justify-content: center;120    margin-top: 8px;121    color: #1b335a;122  }123  .texts {124    flex: 1;125  }126  .title {127    font-size: 34px;128    color: #223a60;129  }130  .title .link { color: #1e5bbf; }131  .subtitle {132    margin-top: 6px;133    color: #7a889b;134    font-size: 26px;135  }136  .divider {137    height: 1px;138    background: #E9EEF4;139    margin: 8px 36px;140  }141  .subitem {142    padding-left: 96px;143    color: #4e5c70;144  }145  .subitem .title {146    color: #4e5c70;147  }148 149  /* Keyboard (mock) */150  .keyboard {151    position: absolute;152    bottom: 0;153    left: 0;154    width: 1080px;155    height: 820px;156    background: #101214;157    border-top-left-radius: 20px;158    border-top-right-radius: 20px;159    box-sizing: border-box;160    padding: 14px 16px 24px 16px;161    color: #e9eef5;162  }163  .suggestions {164    display: flex;165    justify-content: center;166    align-items: center;167    gap: 26px;168    color: #c9cfd8;169    font-size: 30px;170    padding: 10px 0;171  }172  .key-row {173    display: flex;174    gap: 10px;175    margin-top: 16px;176    padding: 0 8px;177  }178  .key {179    flex: 1;180    height: 100px;181    background: #2a2d31;182    border-radius: 16px;183    display: flex;184    align-items: center;185    justify-content: center;186    font-size: 32px;187    color: #edf0f5;188    user-select: none;189  }190  .wide { flex: 1.5; }191  .space { flex: 4; }192  .circle {193    height: 100px;194    aspect-ratio: 1/1;195    border-radius: 50%;196    background: #8fa080;197    display: flex;198    align-items: center;199    justify-content: center;200    color: #101214;201    font-weight: 600;202  }203  .dark-key { background: #232629; }204</style>205</head>206<body>207<div id="render-target">208 209  <!-- Mock Status Bar -->210  <div class="status-bar">211    <div class="status-left">8:14</div>212    <div class="status-right">213      <span>◌</span><span>N</span><span>▴</span><span>🔋 100%</span>214    </div>215  </div>216 217  <!-- Header -->218  <div class="header">219    <div class="left">220      <div class="icon-btn" aria-hidden="true">221        <svg width="32" height="32" viewBox="0 0 24 24" fill="none">222          <path d="M6 6 L18 18 M18 6 L6 18" stroke="#1c2f54" stroke-width="2" stroke-linecap="round"/>223        </svg>224      </div>225    </div>226    <div class="center">Multiple Departure Cities</div>227    <div class="right">228      <div class="toggle"><div class="knob"></div></div>229    </div>230  </div>231 232  <!-- Search -->233  <div class="search-wrap">234    <div class="search-bar">235      <svg width="36" height="36" viewBox="0 0 24 24" fill="none">236        <circle cx="10" cy="10" r="7" stroke="#6E7C90" stroke-width="2"></circle>237        <path d="M15 15 L21 21" stroke="#6E7C90" stroke-width="2" stroke-linecap="round"></path>238      </svg>239      <div class="search-input">Amsterdam</div>240      <svg width="36" height="36" viewBox="0 0 24 24" fill="none">241        <circle cx="12" cy="12" r="9" stroke="#C8CFD9" stroke-width="2"></circle>242        <path d="M8 8 L16 16 M16 8 L8 16" stroke="#C8CFD9" stroke-width="2" stroke-linecap="round"></path>243      </svg>244    </div>245  </div>246 247  <!-- Results -->248  <div class="results">249    <div class="row">250      <div class="icon-box">251        <!-- Building icon -->252        <svg width="32" height="32" viewBox="0 0 24 24" fill="none">253          <rect x="4" y="4" width="10" height="16" stroke="#1b335a" stroke-width="2"></rect>254          <rect x="8" y="8" width="2" height="2" fill="#1b335a"></rect>255          <rect x="12" y="8" width="2" height="2" fill="#1b335a"></rect>256          <rect x="8" y="12" width="2" height="2" fill="#1b335a"></rect>257          <rect x="12" y="12" width="2" height="2" fill="#1b335a"></rect>258          <rect x="16" y="10" width="4" height="10" stroke="#1b335a" stroke-width="2"></rect>259        </svg>260      </div>261      <div class="texts">262        <div class="title">263          <span style="color:#4d5c73;">AMS</span>264          <span class="link"> Amsterdam</span>265          <span style="color:#4d5c73;"> (All airports)</span>266        </div>267        <div class="subtitle">Netherlands</div>268      </div>269    </div>270 271    <div class="divider"></div>272 273    <div class="row subitem" style="padding-top:14px; padding-bottom:14px;">274      <div class="icon-box" style="margin-left:-60px;">275        <!-- Branch/L icon -->276        <svg width="30" height="30" viewBox="0 0 24 24" fill="none">277          <path d="M6 6 v8 a4 4 0 0 0 4 4 h8" stroke="#c8cfda" stroke-width="2" stroke-linecap="round"/>278        </svg>279      </div>280      <div class="texts">281        <div class="title">AMS Schiphol Airport</div>282      </div>283    </div>284 285    <div class="divider"></div>286 287    <div class="row">288      <div class="icon-box">289        <!-- Pin cluster icon -->290        <svg width="30" height="30" viewBox="0 0 24 24" fill="none">291          <path d="M8 10a3 3 0 1 1 6 0c0 2-3 6-3 6s-3-4-3-6z" stroke="#1b335a" stroke-width="2" fill="none"/>292          <circle cx="7" cy="6" r="2" fill="#1b335a"></circle>293          <circle cx="15.5" cy="6.5" r="1.5" fill="#1b335a"></circle>294        </svg>295      </div>296      <div class="texts">297        <div class="title">298          <span class="link">Amsterdam</span>299          <span> and nearby cities (Amsterdam, Rotterdam)</span>300        </div>301        <div class="subtitle">Netherlands</div>302      </div>303    </div>304 305    <div class="divider"></div>306  </div>307 308  <!-- Keyboard (mock, non-interactive) -->309  <div class="keyboard">310    <div class="suggestions">311      <span>the</span><span>|</span><span>museum</span><span>|</span><span>and</span>312      <div style="margin-left:auto; margin-right:16px;">313        <!-- Mic icon -->314        <svg width="34" height="34" viewBox="0 0 24 24" fill="none">315          <rect x="9" y="3" width="6" height="10" rx="3" stroke="#cfd6df" stroke-width="2"></rect>316          <path d="M5 11a7 7 0 0 0 14 0" stroke="#cfd6df" stroke-width="2"></path>317          <path d="M12 18v3" stroke="#cfd6df" stroke-width="2" stroke-linecap="round"></path>318        </svg>319      </div>320    </div>321 322    <!-- Row 1 -->323    <div class="key-row">324      <div class="key">q</div>325      <div class="key">w</div>326      <div class="key">e</div>327      <div class="key">r</div>328      <div class="key">t</div>329      <div class="key">y</div>330      <div class="key">u</div>331      <div class="key">i</div>332      <div class="key">o</div>333      <div class="key">p</div>334    </div>335    <!-- Row 2 -->336    <div class="key-row" style="padding: 0 48px;">337      <div class="key">a</div>338      <div class="key">s</div>339      <div class="key">d</div>340      <div class="key">f</div>341      <div class="key">g</div>342      <div class="key">h</div>343      <div class="key">j</div>344      <div class="key">k</div>345      <div class="key">l</div>346    </div>347    <!-- Row 3 -->348    <div class="key-row">349      <div class="key wide dark-key">⇧</div>350      <div class="key">z</div>351      <div class="key">x</div>352      <div class="key">c</div>353      <div class="key">v</div>354      <div class="key">b</div>355      <div class="key">n</div>356      <div class="key">m</div>357      <div class="key wide dark-key">⌫</div>358    </div>359    <!-- Row 4 -->360    <div class="key-row">361      <div class="circle">?123</div>362      <div class="key dark-key">☺</div>363      <div class="key space dark-key"></div>364      <div class="key dark-key">.</div>365      <div class="key" style="background:#b2f279; color:#121416; font-weight:700;">✓</div>366    </div>367  </div>368 369</div>370</body>371</html>