GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Departure Screen Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #FFFFFF;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 110px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    padding: 0 40px;26    color: #2F2F2F;27    font-size: 40px;28  }29  .status-left {30    display: flex;31    align-items: center;32    gap: 20px;33  }34  .status-right {35    display: flex;36    align-items: center;37    gap: 26px;38  }39  .status-icon svg { width: 40px; height: 40px; }40 41  /* Header */42  .header {43    position: absolute;44    top: 110px;45    left: 0;46    width: 100%;47    height: 140px;48    display: flex;49    align-items: center;50    gap: 26px;51    padding: 0 40px;52  }53  .back-x {54    width: 70px;55    height: 70px;56    border-radius: 8px;57    display: flex;58    align-items: center;59    justify-content: center;60    color: #1B2D6A;61    font-size: 70px;62    line-height: 70px;63    transform: translateY(-6px);64  }65  .title {66    font-weight: 800;67    font-size: 72px;68    color: #132766; /* deep navy */69    letter-spacing: 0.5px;70  }71 72  /* Search field */73  .search-wrap {74    position: absolute;75    top: 270px;76    left: 30px;77    width: 1020px;78    height: 140px;79    background: #EDF0F5;80    border: 3px solid #C9CFDA;81    border-radius: 28px;82    display: flex;83    align-items: center;84    padding: 0 34px;85    box-sizing: border-box;86    gap: 26px;87  }88  .circle-icon {89    width: 46px;90    height: 46px;91    border-radius: 50%;92    border: 4px solid #AAB3C4;93    box-sizing: border-box;94  }95  .placeholder {96    font-size: 42px;97    color: #94A0B2;98  }99 100  /* Use location row */101  .use-location {102    position: absolute;103    top: 440px;104    left: 52px;105    display: flex;106    align-items: center;107    gap: 18px;108    color: #E45A58;109    font-size: 44px;110    font-weight: 600;111  }112  .divider {113    position: absolute;114    top: 530px;115    left: 30px;116    width: 1020px;117    height: 3px;118    background: #E6E6E6;119  }120 121  /* Keyboard */122  .keyboard {123    position: absolute;124    bottom: 0;125    left: 0;126    width: 1080px;127    height: 900px;128    background: #201C1C;129    color: #EBD9CB;130    box-shadow: 0 -6px 12px rgba(0,0,0,0.15);131  }132  .kb-tools {133    height: 110px;134    display: flex;135    align-items: center;136    gap: 60px;137    padding: 0 40px;138  }139  .tool-btn {140    width: 74px; height: 74px; border-radius: 18px;141    background: #2B2525; display:flex; align-items:center; justify-content:center;142  }143  .tool-btn svg { width: 40px; height: 40px; fill: #EBD9CB; }144 145  .kb-rows {146    padding: 0 36px 36px 36px;147    display: grid;148    grid-template-rows: repeat(4, auto);149    row-gap: 28px;150  }151  .kb-row {152    display: grid;153    column-gap: 16px;154    align-items: center;155  }156  .row-1 { grid-template-columns: repeat(10, 1fr); }157  .row-2 { grid-template-columns: repeat(9, 1fr); padding: 0 40px; }158  .row-3 { grid-template-columns: 1.5fr repeat(7, 1fr) 1.5fr; }159  .row-4 { grid-template-columns: 1.4fr 1fr 1.2fr 5.2fr 1fr 1.6fr; }160 161  .key {162    height: 130px;163    background: #2B2626;164    border-radius: 24px;165    display: flex;166    align-items: center;167    justify-content: center;168    font-size: 56px;169    color: #F1E3D7;170  }171  .key.small { font-size: 48px; }172  .key.primary { background: #3A3333; }173  .space { justify-content: center; font-size: 44px; color: #DCCFC3; }174 175</style>176</head>177<body>178<div id="render-target">179 180  <!-- Status Bar -->181  <div class="status-bar">182    <div class="status-left">183      <div>11:56</div>184      <div class="status-icon">185        <!-- simple up chevrons -->186        <svg viewBox="0 0 24 24"><path d="M6 14l6-6 6 6" stroke="#333" stroke-width="2" fill="none"/></svg>187      </div>188      <div class="status-icon">189        <svg viewBox="0 0 24 24"><path d="M6 10l6-6 6 6" stroke="#333" stroke-width="2" fill="none"/></svg>190      </div>191    </div>192    <div class="status-right">193      <div class="status-icon">194        <!-- Wi-Fi -->195        <svg viewBox="0 0 24 24">196          <path d="M2 8c5-4 15-4 20 0" stroke="#333" stroke-width="2" fill="none"/>197          <path d="M6 12c3-3 9-3 12 0" stroke="#333" stroke-width="2" fill="none"/>198          <path d="M10 16c2-2 2-2 4 0" stroke="#333" stroke-width="2" fill="none"/>199          <circle cx="12" cy="19" r="1.6" fill="#333"/>200        </svg>201      </div>202      <div class="status-icon">203        <!-- Battery -->204        <svg viewBox="0 0 28 16">205          <rect x="1" y="3" width="22" height="10" rx="2" ry="2" stroke="#333" stroke-width="2" fill="none"></rect>206          <rect x="3" y="5" width="18" height="6" fill="#333"></rect>207          <rect x="24" y="6" width="3" height="4" rx="1" fill="#333"></rect>208        </svg>209      </div>210    </div>211  </div>212 213  <!-- Header -->214  <div class="header">215    <div class="back-x">×</div>216    <div class="title">Departure</div>217  </div>218 219  <!-- Search field -->220  <div class="search-wrap">221    <div class="circle-icon"></div>222    <div class="placeholder">City, station, airport or port</div>223  </div>224 225  <!-- Use location row -->226  <div class="use-location">227    <svg width="46" height="46" viewBox="0 0 24 24">228      <path d="M2 12l20-9-6 20-4-8-10-3z" fill="#E45A58"></path>229    </svg>230    <div>Use location</div>231  </div>232  <div class="divider"></div>233 234  <!-- Keyboard -->235  <div class="keyboard">236    <div class="kb-tools">237      <div class="tool-btn">238        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"></circle></svg>239      </div>240      <div class="tool-btn">241        <svg viewBox="0 0 24 24"><path d="M12 3l9 9-9 9-9-9 9-9z"></path></svg>242      </div>243      <div class="tool-btn">244        <svg viewBox="0 0 24 24"><path d="M4 12h16M4 6h16M4 18h16" stroke="#EBD9CB" stroke-width="2" fill="none"/></svg>245      </div>246      <div class="tool-btn">247        <svg viewBox="0 0 24 24"><path d="M7 4h10v16H7zM4 8h16" stroke="#EBD9CB" stroke-width="2" fill="none"/></svg>248      </div>249      <div style="margin-left:auto" class="tool-btn">250        <svg viewBox="0 0 24 24"><path d="M12 3v9l5 3-5-12z" fill="#EBD9CB"/></svg>251      </div>252    </div>253 254    <div class="kb-rows">255      <div class="kb-row row-1">256        <div class="key">q</div>257        <div class="key">w</div>258        <div class="key">e</div>259        <div class="key">r</div>260        <div class="key">t</div>261        <div class="key">y</div>262        <div class="key">u</div>263        <div class="key">i</div>264        <div class="key">o</div>265        <div class="key">p</div>266      </div>267 268      <div class="kb-row row-2">269        <div class="key">a</div>270        <div class="key">s</div>271        <div class="key">d</div>272        <div class="key">f</div>273        <div class="key">g</div>274        <div class="key">h</div>275        <div class="key">j</div>276        <div class="key">k</div>277        <div class="key">l</div>278      </div>279 280      <div class="kb-row row-3">281        <div class="key small">⇧</div>282        <div class="key">z</div>283        <div class="key">x</div>284        <div class="key">c</div>285        <div class="key">v</div>286        <div class="key">b</div>287        <div class="key">n</div>288        <div class="key">m</div>289        <div class="key small">⌫</div>290      </div>291 292      <div class="kb-row row-4">293        <div class="key small">?123</div>294        <div class="key small">,</div>295        <div class="key small">☺</div>296        <div class="key space">space</div>297        <div class="key small">.</div>298        <div class="key primary">✓</div>299      </div>300    </div>301  </div>302 303</div>304</body>305</html>