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 Screen</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: "Roboto", Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #FFFFFF;20  }21 22  /* Header (status + app bar) */23  .header {24    width: 100%;25    background: #A9E63F; /* lime green */26  }27  .status-bar {28    height: 90px;29    display: flex;30    align-items: center;31    justify-content: space-between;32    padding: 0 32px;33    color: #FFFFFF;34    font-weight: 500;35    font-size: 30px;36    opacity: 0.95;37  }38  .status-left,39  .status-right {40    display: flex;41    align-items: center;42    gap: 18px;43  }44  .app-bar {45    height: 170px;46    display: flex;47    align-items: center;48    gap: 28px;49    padding: 0 28px;50    color: #3C3C3C;51  }52  .app-title {53    font-size: 48px;54    font-weight: 500;55    letter-spacing: 0.3px;56  }57  .icon-btn {58    width: 72px;59    height: 72px;60    display: inline-flex;61    align-items: center;62    justify-content: center;63  }64  .icon {65    width: 48px;66    height: 48px;67  }68 69  /* Content row */70  .content {71    background: #FFFFFF;72  }73  .list-item {74    height: 130px;75    display: flex;76    align-items: center;77    padding: 0 28px;78    border-bottom: 1px solid #E5E5E5;79    gap: 28px;80  }81  .list-text {82    font-size: 40px;83    color: #222222;84  }85  .plane-icon {86    width: 52px;87    height: 52px;88    display: inline-flex;89    align-items: center;90    justify-content: center;91  }92 93  /* Large white area */94  .blank-area {95    height: 1150px; /* remaining space above keyboard before overlay */96    background: #FFFFFF;97  }98 99  /* Keyboard overlay */100  .keyboard {101    position: absolute;102    bottom: 0;103    left: 0;104    width: 1080px;105    height: 800px;106    background: #201A17;107    color: #EEDDC9;108    box-shadow: 0 -4px 12px rgba(0,0,0,0.25);109  }110  .kb-top {111    height: 100px;112    display: flex;113    align-items: center;114    gap: 40px;115    padding: 0 28px;116    color: #EEDDC9;117    font-size: 30px;118  }119  .kb-top .tool {120    display: flex;121    align-items: center;122    gap: 16px;123    color: #EEDDC9;124  }125  .kb-icon {126    width: 40px;127    height: 40px;128    fill: #EEDDC9;129    opacity: 0.9;130  }131 132  .keys {133    padding: 0 24px;134  }135  .row {136    display: flex;137    justify-content: center;138    gap: 16px;139    margin-top: 14px;140  }141  .key {142    width: 92px;143    height: 108px;144    border-radius: 18px;145    background: #2C2622;146    border: 1px solid #392F29;147    display: flex;148    align-items: center;149    justify-content: center;150    font-size: 48px;151    color: #F0E4D6;152  }153  .key.small {154    width: 84px;155  }156  .key.wide {157    width: 140px;158  }159  .key.shift,160  .key.backspace {161    width: 140px;162  }163 164  .bottom-row {165    display: flex;166    align-items: center;167    gap: 16px;168    margin-top: 18px;169    padding: 0 24px;170  }171  .pill {172    height: 100px;173    border-radius: 22px;174    background: #2C2622;175    border: 1px solid #3A322D;176    color: #F0E4D6;177    display: flex;178    align-items: center;179    justify-content: center;180    font-size: 40px;181    padding: 0 24px;182  }183  .pill.beige {184    background: #F3D9BF;185    color: #3A2C26;186    border: none;187  }188  .space {189    flex: 1;190    height: 100px;191    border-radius: 22px;192    background: #2C2622;193    border: 1px solid #3A322D;194  }195  .circle-btn {196    width: 110px;197    height: 110px;198    border-radius: 55px;199    background: #F3D9BF;200    color: #2F231D;201    display: flex;202    align-items: center;203    justify-content: center;204    font-size: 40px;205  }206 207  /* Gesture pill at very bottom */208  .gesture-pill {209    position: absolute;210    bottom: 18px;211    left: 50%;212    transform: translateX(-50%);213    width: 240px;214    height: 12px;215    background: #EAEAEA;216    border-radius: 8px;217    opacity: 0.9;218  }219</style>220</head>221<body>222<div id="render-target">223 224  <!-- Header (lime area) -->225  <div class="header">226    <div class="status-bar">227      <div class="status-left">228        <span>3:51</span>229        <!-- Simple small system icons beside time -->230        <svg class="kb-icon" viewBox="0 0 24 24">231          <rect x="4" y="4" width="16" height="16" rx="2"></rect>232        </svg>233        <svg class="kb-icon" viewBox="0 0 24 24">234          <rect x="3" y="6" width="18" height="12" rx="2"></rect>235          <rect x="8" y="9" width="8" height="6" rx="1" fill="#A9E63F"></rect>236        </svg>237      </div>238      <div class="status-right">239        <!-- WiFi icon -->240        <svg class="kb-icon" viewBox="0 0 24 24">241          <path d="M12 18a2 2 0 1 0 0.001 0zM2 9c5-4 15-4 20 0M5 12c3.5-3 10.5-3 14 0M8 15c2-2 6-2 8 0" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"></path>242        </svg>243        <!-- Battery icon -->244        <svg class="kb-icon" viewBox="0 0 28 24">245          <rect x="2" y="6" width="20" height="12" rx="2" stroke="#FFFFFF" stroke-width="2" fill="none"></rect>246          <rect x="4" y="8" width="12" height="8" rx="1" fill="#FFFFFF"></rect>247          <rect x="23" y="9" width="3" height="6" rx="1" fill="#FFFFFF"></rect>248        </svg>249      </div>250    </div>251    <div class="app-bar">252      <div class="icon-btn">253        <!-- Back arrow -->254        <svg class="icon" viewBox="0 0 24 24">255          <path d="M15 5L7 12l8 7" stroke="#3C3C3C" stroke-width="2.8" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>256        </svg>257      </div>258      <div class="app-title">Departure</div>259    </div>260  </div>261 262  <!-- Content list item -->263  <div class="content">264    <div class="list-item">265      <div class="plane-icon">266        <svg viewBox="0 0 24 24">267          <path d="M3 12l18-7-7 18-2-7-7-4z" fill="#28A745"></path>268        </svg>269      </div>270      <div class="list-text">Enable location to see nearby cities</div>271    </div>272  </div>273 274  <div class="blank-area"></div>275 276  <!-- Keyboard overlay -->277  <div class="keyboard">278    <div class="kb-top">279      <div class="tool">280        <svg class="kb-icon" viewBox="0 0 24 24">281          <rect x="3" y="3" width="7" height="7" rx="1"></rect>282          <rect x="14" y="3" width="7" height="7" rx="1"></rect>283          <rect x="3" y="14" width="7" height="7" rx="1"></rect>284          <rect x="14" y="14" width="7" height="7" rx="1"></rect>285        </svg>286      </div>287      <div class="tool">288        <svg class="kb-icon" viewBox="0 0 24 24">289          <circle cx="12" cy="9" r="5"></circle>290          <path d="M4 21c2-4 14-4 16 0" fill="none" stroke="#EEDDC9" stroke-width="2" stroke-linecap="round"></path>291        </svg>292      </div>293      <div class="tool">GIF</div>294      <div class="tool">295        <svg class="kb-icon" viewBox="0 0 24 24">296          <circle cx="12" cy="12" r="9" fill="none" stroke="#EEDDC9" stroke-width="2"></circle>297          <rect x="10" y="6" width="4" height="8"></rect>298        </svg>299      </div>300      <div class="tool">301        <svg class="kb-icon" viewBox="0 0 24 24">302          <path d="M4 18l6-12 5 7 2-3 3 8" fill="none" stroke="#EEDDC9" stroke-width="2" stroke-linecap="round"></path>303        </svg>304      </div>305      <div class="tool">306        <svg class="kb-icon" viewBox="0 0 24 24">307          <circle cx="6" cy="12" r="4"></circle>308          <circle cx="18" cy="12" r="4"></circle>309        </svg>310      </div>311      <div class="tool">312        <svg class="kb-icon" viewBox="0 0 24 24">313          <path d="M12 4a4 4 0 0 1 4 4v3h3v6h-14v-6h3V8a4 4 0 0 1 4-4z" fill="#EEDDC9"></path>314        </svg>315      </div>316    </div>317 318    <div class="keys">319      <!-- Row 1: qwertyuiop -->320      <div class="row">321        <div class="key">q</div>322        <div class="key">w</div>323        <div class="key">e</div>324        <div class="key">r</div>325        <div class="key">t</div>326        <div class="key">y</div>327        <div class="key">u</div>328        <div class="key">i</div>329        <div class="key">o</div>330        <div class="key">p</div>331      </div>332      <!-- Row 2: asdfghjkl -->333      <div class="row">334        <div class="key">a</div>335        <div class="key">s</div>336        <div class="key">d</div>337        <div class="key">f</div>338        <div class="key">g</div>339        <div class="key">h</div>340        <div class="key">j</div>341        <div class="key">k</div>342        <div class="key">l</div>343      </div>344      <!-- Row 3: shift + zxcvbnm + backspace -->345      <div class="row">346        <div class="key shift">⇧</div>347        <div class="key">z</div>348        <div class="key">x</div>349        <div class="key">c</div>350        <div class="key">v</div>351        <div class="key">b</div>352        <div class="key">n</div>353        <div class="key">m</div>354        <div class="key backspace">⌫</div>355      </div>356      <!-- Bottom function row -->357      <div class="bottom-row">358        <div class="pill beige">?123</div>359        <div class="pill">,</div>360        <div class="pill">☺</div>361        <div class="space"></div>362        <div class="pill">.</div>363        <div class="pill">⌫</div>364        <div class="circle-btn">🔍</div>365      </div>366    </div>367  </div>368 369  <div class="gesture-pill"></div>370 371</div>372</body>373</html>