GD-ML/AndroidCode

1<html lang="en">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, Helvetica, 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: 92px;22    display: flex;23    align-items: center;24    padding: 0 32px;25    box-sizing: border-box;26    color: #222;27    font-size: 34px;28  }29  .status-left { display: flex; gap: 18px; align-items: center; }30  .dot { width: 16px; height: 16px; background:#222; border-radius: 50%; opacity: 0.7; }31  .status-right { margin-left: auto; display:flex; align-items:center; gap:18px; }32  .tiny-ico {33    width: 28px; height: 28px; border-radius: 4px; background:#6d6d6d; opacity:0.9;34  }35 36  /* Header / Title area */37  .header {38    position: absolute;39    top: 108px;40    left: 36px;41    right: 36px;42    height: 120px;43    display: flex;44    align-items: center;45    gap: 28px;46  }47  .close-btn {48    width: 56px; height: 56px; border-radius: 28px; display:flex; align-items:center; justify-content:center;49    border: 2px solid #8E95A8;50  }51  .close-btn svg { width: 28px; height: 28px; stroke: #2E3A59; }52  .title {53    font-size: 68px;54    font-weight: 800;55    color: #101D46;56    letter-spacing: 0.5px;57  }58 59  /* Input field */60  .input-wrap {61    position: absolute;62    top: 250px;63    left: 36px;64    width: 1008px;65    height: 128px;66    border: 2px solid #B7BED0;67    background: #ECEFF6;68    border-radius: 24px;69    box-sizing: border-box;70    display: flex;71    align-items: center;72    padding: 0 28px;73    gap: 26px;74  }75  .circle-radio {76    width: 44px; height: 44px; border: 3px solid #9EA6B9; border-radius: 50%;77  }78  .typed-text {79    font-size: 48px;80    color: #1B2A4A;81    letter-spacing: 0.2px;82  }83 84  /* Suggestion Row */85  .suggestion {86    position: absolute;87    top: 410px;88    left: 36px;89    width: 1008px;90    padding: 26px 0 20px 0;91    border-bottom: 2px solid #E4E7EE;92  }93  .suggestion-row {94    display: flex; align-items: center; gap: 24px;95  }96  .train-ico {97    width: 44px; height: 44px; border-radius: 8px; background: #0E1B4D; display:flex; align-items:center; justify-content:center;98  }99  .train-ico svg { width: 26px; height: 26px; fill:#FFFFFF; }100  .sugg-title {101    font-size: 42px; color: #1B2A4A; font-weight: 600;102  }103  .sugg-sub {104    font-size: 38px; color: #73809B; margin-left: 12px;105  }106 107  /* Big white space below (content area) */108  .content-space {109    position: absolute;110    top: 520px;111    left: 36px;112    right: 36px;113    bottom: 820px; /* reserved for keyboard */114    background: #FFFFFF;115  }116 117  /* Keyboard */118  .keyboard {119    position: absolute;120    left: 0; right: 0; bottom: 0;121    height: 820px;122    background: #201A18;123    color: #fff;124    box-sizing: border-box;125    padding: 18px 20px 28px 20px;126  }127  .suggestion-bar {128    height: 98px;129    display: flex;130    align-items: center;131    gap: 26px;132    padding: 0 8px;133    color: #E7E0DC;134    font-size: 38px;135  }136  .sugg-chip { opacity: 0.95; }137  .divider { width: 2px; height: 36px; background: #6C635E; opacity: 0.8; }138  .keys {139    margin-top: 12px;140    display: grid;141    grid-template-rows: repeat(4, 1fr);142    row-gap: 18px;143    height: calc(100% - 110px);144  }145  .row { display: grid; grid-auto-flow: column; column-gap: 14px; justify-content: center; }146  .row.row1 { grid-template-columns: repeat(10, 1fr); max-width: 1000px; margin: 0 auto; }147  .row.row2 { grid-template-columns: repeat(9, 1fr); max-width: 920px; margin: 0 auto; }148  .row.row3 { grid-template-columns: repeat(9, 1fr); max-width: 980px; margin: 0 auto; }149  .row.row4 { grid-template-columns: 1.4fr 1fr 1fr 1fr 2.6fr 1fr 1fr 1.2fr; max-width: 1010px; margin: 0 auto; }150 151  .key {152    background: #2A2421;153    border-radius: 22px;154    display: flex;155    align-items: center;156    justify-content: center;157    height: 120px;158    color: #FFFFFF;159    font-size: 46px;160    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.05);161  }162  .key.small { font-size: 40px; }163  .key.space { justify-content: flex-start; padding-left: 36px; color:#D8CFC9; }164  .key.dark { background: #3A3330; }165  .emoji { font-size: 52px; }166  .check-btn {167    background: #F0D5C3; color:#1A120F; font-weight: 600;168  }169 170  /* Gesture pill */171  .gesture-pill {172    position: absolute;173    left: 50%;174    transform: translateX(-50%);175    bottom: 12px;176    width: 420px;177    height: 10px;178    background: #DADADA;179    border-radius: 8px;180    opacity: 0.85;181  }182</style>183</head>184<body>185<div id="render-target">186 187  <!-- Status bar -->188  <div class="status-bar">189    <div class="status-left">190      <div>9:56</div>191      <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>192    </div>193    <div class="status-right">194      <div class="tiny-ico"></div>195      <div class="tiny-ico"></div>196    </div>197  </div>198 199  <!-- Title Section -->200  <div class="header">201    <div class="close-btn">202      <svg viewBox="0 0 24 24">203        <line x1="4" y1="4" x2="20" y2="20" stroke-width="2"/>204        <line x1="20" y1="4" x2="4" y2="20" stroke-width="2"/>205      </svg>206    </div>207    <div class="title">Departure</div>208  </div>209 210  <!-- Input Field -->211  <div class="input-wrap">212    <div class="circle-radio"></div>213    <div class="typed-text">Brinnington</div>214  </div>215 216  <!-- Suggestion Row -->217  <div class="suggestion">218    <div class="suggestion-row">219      <div class="train-ico">220        <svg viewBox="0 0 24 24">221          <rect x="5" y="6" width="14" height="10" rx="2"></rect>222          <rect x="7.5" y="8" width="3" height="2"></rect>223          <rect x="13.5" y="8" width="3" height="2"></rect>224          <rect x="9" y="16" width="6" height="2"></rect>225        </svg>226      </div>227      <div class="sugg-title">Brinnington (BNT)</div>228      <div class="sugg-sub">United Kingdom</div>229    </div>230  </div>231 232  <!-- Placeholder content area -->233  <div class="content-space"></div>234 235  <!-- Keyboard -->236  <div class="keyboard">237    <div class="suggestion-bar">238      <div class="sugg-chip">Brinnington</div>239      <div class="divider"></div>240      <div class="sugg-chip">Brinn infront</div>241      <div class="divider"></div>242      <div class="sugg-chip">Brinn ingrown</div>243      <div style="margin-left:auto; display:flex; align-items:center; gap:22px;">244        <div class="key dark" style="width:120px; height:72px; border-radius:14px; font-size:34px;">🎙️</div>245      </div>246    </div>247 248    <div class="keys">249      <div class="row row1">250        <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>251        <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>252      </div>253      <div class="row row2">254        <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>255        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>256      </div>257      <div class="row row3">258        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>259        <div class="key">b</div><div class="key">n</div><div class="key">m</div>260        <div class="key small">⌫</div>261      </div>262      <div class="row row4">263        <div class="key small">?123</div>264        <div class="key">,</div>265        <div class="key emoji">😊</div>266        <div class="key space"> </div>267        <div class="key">.</div>268        <div class="key small">🎙️</div>269        <div class="key check-btn">✓</div>270      </div>271    </div>272    <div class="gesture-pill"></div>273  </div>274 275</div>276</body>277</html>