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>Departure Input Screen</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13    color: #1F2A44;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #FFFFFF;21  }22 23  /* Status bar */24  .status-bar {25    height: 92px;26    padding: 0 32px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #0A1B4D;31    font-weight: 600;32    font-size: 34px;33    letter-spacing: 0.5px;34  }35  .status-right {36    display: flex;37    align-items: center;38    gap: 18px;39    color: #0A1B4D;40  }41  .icon-wifi,42  .icon-signal {43    width: 34px;44    height: 34px;45    opacity: 0.9;46  }47  .battery {48    width: 70px;49    height: 32px;50    border: 2px solid #0A1B4D;51    border-radius: 6px;52    position: relative;53    box-sizing: border-box;54  }55  .battery::after {56    content: "";57    position: absolute;58    right: -8px;59    top: 8px;60    width: 6px;61    height: 16px;62    background: #0A1B4D;63    border-radius: 2px;64  }65  .battery .level {66    position: absolute;67    left: 4px;68    top: 4px;69    right: 4px;70    bottom: 4px;71    background: #0A1B4D;72    border-radius: 3px;73  }74 75  /* Header */76  .header {77    height: 128px;78    display: flex;79    align-items: center;80    padding: 0 32px;81    gap: 24px;82  }83  .close-btn {84    width: 56px;85    height: 56px;86    border-radius: 28px;87    display: inline-flex;88    align-items: center;89    justify-content: center;90    color: #0A1B4D;91  }92  .title {93    font-size: 64px;94    font-weight: 800;95    color: #0A1B4D;96    letter-spacing: 0.2px;97  }98 99  /* Input field */100  .content {101    padding: 12px 32px 0 32px;102  }103  .input-box {104    height: 140px;105    background: #EEF1F7;106    border: 3px solid #BFC9E0;107    border-radius: 24px;108    display: flex;109    align-items: center;110    padding: 0 28px;111    box-sizing: border-box;112  }113  .radio {114    width: 44px;115    height: 44px;116    border: 4px solid #9AA9CC;117    border-radius: 50%;118    margin-right: 22px;119    box-sizing: border-box;120  }121  .input-text {122    font-size: 46px;123    color: #1A2749;124  }125 126  .use-location {127    margin-top: 26px;128    display: flex;129    align-items: center;130    gap: 18px;131    color: #D45757;132  }133  .use-location .label {134    font-size: 42px;135    font-weight: 600;136    color: #D45757;137  }138  .divider {139    margin-top: 24px;140    height: 2px;141    background: #E2E7EF;142    width: 100%;143  }144 145  /* Spacer area */146  .spacer {147    height: 1010px; /* will be visually taken by white space above keyboard */148  }149 150  /* Keyboard mock */151  .keyboard {152    position: absolute;153    left: 0;154    bottom: 0;155    width: 1080px;156    height: 880px;157    background: #1E1E1F;158    color: #EAEAEA;159    box-shadow: 0 -6px 24px rgba(0,0,0,0.25);160    display: flex;161    flex-direction: column;162  }163  .kb-suggestions {164    height: 96px;165    background: #2A2A2C;166    display: flex;167    align-items: center;168    padding: 0 24px;169    gap: 28px;170    font-size: 36px;171    border-bottom: 1px solid #3A3A3C;172  }173  .kb-suggestions .sep {174    opacity: 0.5;175  }176  .kb-rows {177    flex: 1;178    padding: 18px 18px 24px 18px;179    display: flex;180    flex-direction: column;181    gap: 18px;182    box-sizing: border-box;183  }184  .kb-row {185    display: flex;186    justify-content: space-between;187    gap: 14px;188  }189  .key {190    flex: 1;191    height: 120px;192    background: #2B2B2D;193    border-radius: 18px;194    display: flex;195    align-items: center;196    justify-content: center;197    font-size: 44px;198    color: #F1F1F1;199  }200  .key.small {201    flex: 0.7;202  }203  .key.wide {204    flex: 2.2;205  }206  .key.icon {207    background: #3A3A3C;208    color: #FFF;209  }210 211  .gesture-bar {212    position: absolute;213    bottom: 18px;214    left: 50%;215    transform: translateX(-50%);216    width: 320px;217    height: 10px;218    background: #EDEDED;219    border-radius: 6px;220    opacity: 0.85;221  }222</style>223</head>224<body>225<div id="render-target">226  <!-- Status bar -->227  <div class="status-bar">228    <div class="status-left">8:57</div>229    <div class="status-right">230      <!-- simple icons -->231      <svg class="icon-signal" viewBox="0 0 24 24">232        <path d="M2 20h2v-2H2v2zm4 0h2v-6H6v6zm4 0h2v-10h-2V20zm4 0h2V8h-2v12zm4 0h2V4h-2v16z" fill="#0A1B4D"/>233      </svg>234      <svg class="icon-wifi" viewBox="0 0 24 24">235        <path d="M12 18.5c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm-6.6-5.1l1.4 1.4c2.8-2.8 7.6-2.8 10.4 0l1.4-1.4c-3.6-3.6-9.6-3.6-13.2 0zm-3.5-3.5l1.4 1.4c4.6-4.6 12.2-4.6 16.8 0l1.4-1.4C16.1 2.9 7.9 2.9 1.9 9.9z" fill="#0A1B4D"/>236      </svg>237      <div class="battery"><div class="level"></div></div>238      <div>100%</div>239    </div>240  </div>241 242  <!-- Header -->243  <div class="header">244    <div class="close-btn">245      <svg width="36" height="36" viewBox="0 0 24 24">246        <path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z" fill="#0A1B4D"/>247      </svg>248    </div>249    <div class="title">Departure</div>250  </div>251 252  <!-- Content -->253  <div class="content">254    <div class="input-box">255      <div class="radio"></div>256      <div class="input-text">New York</div>257    </div>258 259    <div class="use-location">260      <svg width="42" height="42" viewBox="0 0 24 24">261        <path d="M2 12l19-8-8 19-2.6-6.4L2 12z" fill="#D45757"/>262      </svg>263      <div class="label">Use location</div>264    </div>265 266    <div class="divider"></div>267  </div>268 269  <!-- Spacer to emulate empty area -->270  <div class="spacer"></div>271 272  <!-- Keyboard mock -->273  <div class="keyboard">274    <div class="kb-suggestions">275      <div>York</div>276      <div class="sep">|</div>277      <div>Yorkshire</div>278      <div class="sep">|</div>279      <div>Yorker</div>280      <div style="margin-left:auto; display:flex; align-items:center;">281        <svg width="40" height="40" viewBox="0 0 24 24">282          <path d="M12 14c1.7 0 3-1.3 3-3V5c0-1.7-1.3-3-3-3S9 3.3 9 5v6c0 1.7 1.3 3 3 3zm5-3c0 3-2.2 5.4-5 5.9V21h-2v-4.1C7.2 16.4 5 14 5 11h2c0 2.2 1.8 4 4 4s4-1.8 4-4h2z" fill="#EAEAEA"/>283        </svg>284      </div>285    </div>286    <div class="kb-rows">287      <div class="kb-row">288        <div class="key">q</div>289        <div class="key">w</div>290        <div class="key">e</div>291        <div class="key">r</div>292        <div class="key">t</div>293        <div class="key">y</div>294        <div class="key">u</div>295        <div class="key">i</div>296        <div class="key">o</div>297        <div class="key">p</div>298      </div>299      <div class="kb-row">300        <div class="key small icon">⇧</div>301        <div class="key">a</div>302        <div class="key">s</div>303        <div class="key">d</div>304        <div class="key">f</div>305        <div class="key">g</div>306        <div class="key">h</div>307        <div class="key">j</div>308        <div class="key">k</div>309        <div class="key">l</div>310        <div class="key small icon">⌫</div>311      </div>312      <div class="kb-row">313        <div class="key small">?123</div>314        <div class="key">z</div>315        <div class="key">x</div>316        <div class="key">c</div>317        <div class="key">v</div>318        <div class="key">b</div>319        <div class="key">n</div>320        <div class="key">m</div>321        <div class="key small">.</div>322        <div class="key small icon">✓</div>323      </div>324      <div class="kb-row">325        <div class="key small icon">⌨</div>326        <div class="key small">,</div>327        <div class="key small icon">☺</div>328        <div class="key wide">space</div>329        <div class="key small">.</div>330        <div class="key small icon">⏎</div>331      </div>332    </div>333    <div class="gesture-bar"></div>334  </div>335</div>336</body>337</html>