GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Departure Screen Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FFFFFF;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 100%;22    height: 120px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    padding: 0 40px;27    box-sizing: border-box;28    color: #1F2937;29    font-size: 36px;30  }31  .status-right {32    display: flex;33    align-items: center;34    gap: 24px;35  }36  .icon {37    display: inline-flex;38    align-items: center;39    justify-content: center;40  }41 42  /* Header / Title */43  .header {44    position: absolute;45    top: 120px;46    left: 0;47    width: 100%;48    padding: 32px 40px;49    box-sizing: border-box;50  }51  .title-row {52    display: flex;53    align-items: center;54    gap: 28px;55    margin-bottom: 24px;56  }57  .close-btn {58    width: 72px;59    height: 72px;60    border-radius: 36px;61    display: inline-flex;62    align-items: center;63    justify-content: center;64    color: #20325F;65  }66  .page-title {67    font-size: 64px;68    font-weight: 700;69    color: #142B5C;70    letter-spacing: 0.5px;71  }72 73  /* Search input */74  .search-wrap {75    margin-top: 24px;76  }77  .search-field {78    height: 150px;79    border: 2px solid #C9CFD7;80    border-radius: 28px;81    padding: 0 40px;82    display: flex;83    align-items: center;84    gap: 28px;85    box-sizing: border-box;86    background: #F6F7FA;87  }88  .search-bullet {89    width: 38px;90    height: 38px;91    border: 4px solid #B7BFCC;92    border-radius: 50%;93  }94  .search-text {95    font-size: 48px;96    color: #20325F;97  }98 99  /* Suggestions list */100  .suggestions {101    margin-top: 40px;102    border-top: 1px solid #E6E8EE;103  }104  .suggest-item {105    display: flex;106    align-items: center;107    gap: 28px;108    padding: 34px 40px;109    font-size: 44px;110    color: #1E2B57;111  }112  .suggest-item .secondary {113    color: #8A93A8;114    margin-left: 10px;115  }116  .divider {117    height: 1px;118    background: #E6E8EE;119    margin: 0 40px;120  }121  .train-icon, .pin-icon {122    width: 64px;123    height: 64px;124    color: #1E2B57;125  }126 127  /* Keyboard mock */128  .keyboard {129    position: absolute;130    bottom: 0;131    left: 0;132    width: 100%;133    height: 980px;134    background: #141414;135    border-top-left-radius: 26px;136    border-top-right-radius: 26px;137    box-shadow: 0 -4px 12px rgba(0,0,0,0.2);138    color: #EDEDED;139  }140  .kb-suggest {141    height: 120px;142    display: flex;143    align-items: center;144    justify-content: space-between;145    padding: 0 36px;146    box-sizing: border-box;147    border-bottom: 1px solid #2A2A2A;148  }149  .kb-phrase {150    display: flex;151    align-items: center;152    gap: 36px;153    font-size: 40px;154    color: #D9D9D9;155  }156  .kb-mic {157    width: 80px;158    height: 80px;159    background: #1F1F1F;160    border-radius: 40px;161    display: inline-flex;162    align-items: center;163    justify-content: center;164    border: 1px solid #2C2C2C;165  }166 167  .kb-rows {168    padding: 24px 20px;169    box-sizing: border-box;170  }171  .kb-row {172    display: flex;173    justify-content: space-between;174    margin: 18px 16px;175  }176  .key {177    width: 92px;178    height: 116px;179    background: #222222;180    border-radius: 18px;181    display: flex;182    align-items: center;183    justify-content: center;184    color: #EFEFEF;185    font-size: 44px;186    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.05);187  }188  .key.wide { width: 160px; }189  .space {190    flex: 1;191    height: 116px;192    margin: 0 14px;193    background: #222222;194    border-radius: 18px;195    display: flex;196    align-items: center;197    justify-content: center;198    color: #BFBFBF;199    font-size: 40px;200  }201  .action-right {202    width: 140px;203    height: 140px;204    background: #FFE0C8;205    border-radius: 70px;206    position: absolute;207    right: 40px;208    bottom: 40px;209    display: flex;210    align-items: center;211    justify-content: center;212    color: #3A2D25;213    font-size: 72px;214    box-shadow: 0 6px 12px rgba(0,0,0,0.25);215  }216</style>217</head>218<body>219<div id="render-target">220 221  <!-- Status Bar -->222  <div class="status-bar">223    <div class="status-left">11:57</div>224    <div class="status-right">225      <!-- WiFi icon -->226      <span class="icon">227        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">228          <path d="M2 8c4-3 16-3 20 0" stroke="#333" stroke-width="2" stroke-linecap="round"/>229          <path d="M5 12c3-2 11-2 14 0" stroke="#333" stroke-width="2" stroke-linecap="round"/>230          <path d="M8 16c2-1 6-1 8 0" stroke="#333" stroke-width="2" stroke-linecap="round"/>231          <circle cx="12" cy="19" r="1.5" fill="#333"/>232        </svg>233      </span>234      <!-- Battery icon -->235      <span class="icon">236        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">237          <rect x="2" y="6" width="18" height="12" rx="2" stroke="#333" stroke-width="2"/>238          <rect x="21" y="10" width="2" height="4" fill="#333"/>239          <rect x="4" y="8" width="14" height="8" rx="1" fill="#333"/>240        </svg>241      </span>242    </div>243  </div>244 245  <!-- Header -->246  <div class="header">247    <div class="title-row">248      <div class="close-btn">249        <svg width="48" height="48" viewBox="0 0 24 24" fill="none">250          <path d="M5 5l14 14M19 5L5 19" stroke="#142B5C" stroke-width="2" stroke-linecap="round"/>251        </svg>252      </div>253      <div class="page-title">Departure</div>254    </div>255 256    <!-- Search -->257    <div class="search-wrap">258      <div class="search-field">259        <div class="search-bullet"></div>260        <div class="search-text">Aalst</div>261      </div>262    </div>263 264    <!-- Suggestions -->265    <div class="suggestions">266      <div class="suggest-item">267        <!-- Location pin -->268        <svg class="pin-icon" viewBox="0 0 24 24" fill="none">269          <path d="M12 22s7-8 7-12a7 7 0 1 0-14 0c0 4 7 12 7 12z" stroke="#1E2B57" stroke-width="2" fill="none"/>270          <circle cx="12" cy="10" r="3" stroke="#1E2B57" stroke-width="2" fill="none"/>271        </svg>272        <div>Aalst <span class="secondary">Belgium</span></div>273      </div>274      <div class="divider"></div>275      <div class="suggest-item">276        <!-- Train icon -->277        <svg class="train-icon" viewBox="0 0 24 24" fill="none">278          <rect x="4" y="6" width="16" height="10" rx="2" stroke="#1E2B57" stroke-width="2" fill="none"/>279          <rect x="6" y="8" width="4" height="3" rx="1" fill="#1E2B57"/>280          <rect x="14" y="8" width="4" height="3" rx="1" fill="#1E2B57"/>281          <path d="M7 18l-2 2M17 18l2 2" stroke="#1E2B57" stroke-width="2" stroke-linecap="round"/>282        </svg>283        <div>Aalst <span class="secondary">Belgium</span></div>284      </div>285      <div class="divider"></div>286      <div class="suggest-item">287        <!-- Train icon -->288        <svg class="train-icon" viewBox="0 0 24 24" fill="none">289          <rect x="4" y="6" width="16" height="10" rx="2" stroke="#1E2B57" stroke-width="2" fill="none"/>290          <rect x="6" y="8" width="4" height="3" rx="1" fill="#1E2B57"/>291          <rect x="14" y="8" width="4" height="3" rx="1" fill="#1E2B57"/>292          <path d="M7 18l-2 2M17 18l2 2" stroke="#1E2B57" stroke-width="2" stroke-linecap="round"/>293        </svg>294        <div>Aalst-Kerrebroek <span class="secondary">Belgium</span></div>295      </div>296    </div>297  </div>298 299  <!-- Keyboard -->300  <div class="keyboard">301    <div class="kb-suggest">302      <div class="kb-phrase">303        <span>Aalst</span>304        <span>|</span>305        <span>Aalat</span>306        <span>|</span>307        <span>Salat</span>308      </div>309      <div class="kb-mic">310        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">311          <rect x="9" y="5" width="6" height="10" rx="3" stroke="#CFCFCF" stroke-width="2"/>312          <path d="M6 11c0 3 2.5 5 6 5s6-2 6-5" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round"/>313          <path d="M12 16v4" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round"/>314          <path d="M9 20h6" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round"/>315        </svg>316      </div>317    </div>318 319    <div class="kb-rows">320      <div class="kb-row">321        <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>322      </div>323      <div class="kb-row">324        <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>325      </div>326      <div class="kb-row">327        <div class="key wide">⇧</div>328        <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>329        <div class="key wide">⌫</div>330      </div>331      <div class="kb-row">332        <div class="key wide">?123</div>333        <div class="key wide">,</div>334        <div class="space">space</div>335        <div class="key wide">.</div>336      </div>337    </div>338 339    <div class="action-right">✓</div>340  </div>341 342</div>343</body>344</html>