GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Departure UI</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    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #FFFFFF;13  }14 15  /* Status bar */16  .status-bar {17    height: 110px;18    padding: 0 36px;19    display: flex;20    align-items: center;21    justify-content: space-between;22    color: #0D0F12;23    font-size: 38px;24  }25  .status-right {26    display: flex;27    gap: 26px;28    align-items: center;29  }30  .icon-small svg { width: 42px; height: 42px; fill: #333; }31 32  /* Header title row */33  .header {34    height: 150px;35    display: flex;36    align-items: center;37    gap: 24px;38    padding: 0 36px;39  }40  .close-btn {41    width: 68px; height: 68px; border-radius: 34px;42    display: flex; align-items: center; justify-content: center;43  }44  .close-btn svg { width: 42px; height: 42px; stroke: #20335C; stroke-width: 6; }45  .title {46    font-size: 64px;47    font-weight: 800;48    color: #20335C;49    letter-spacing: 0.5px;50  }51 52  /* Input pill */53  .input-wrap {54    margin: 16px 36px 0;55  }56  .input-pill {57    height: 150px;58    border-radius: 26px;59    border: 2px solid #C8D2E6;60    background: #F2F5FA;61    display: flex;62    align-items: center;63    padding: 0 28px;64    gap: 22px;65  }66  .location-dot {67    width: 58px; height: 58px;68    border: 2px solid #A9B7D4; border-radius: 50%;69    box-sizing: border-box;70  }71  .input-text {72    font-size: 50px; color: #1C2238;73  }74  .caret {75    width: 3px; height: 58px; background: #20335C; display: inline-block; margin-left: 6px;76    animation: blink 1s steps(2, start) infinite;77    vertical-align: middle;78  }79  @keyframes blink { to { opacity: 0; } }80 81  /* Suggestion item */82  .suggestion {83    margin: 22px 36px 0;84    height: 120px;85    display: flex;86    align-items: center;87    gap: 22px;88  }89  .train-icon {90    width: 56px; height: 56px; border-radius: 12px; background: #20335C;91    display: flex; align-items: center; justify-content: center;92  }93  .train-icon svg { width: 40px; height: 40px; fill: #FFFFFF; }94  .suggestion-text {95    font-size: 46px; color: #20335C;96  }97  .suggestion-sub {98    font-size: 42px; color: #9AA5B7; margin-left: 16px;99  }100  .divider { margin: 26px 36px 0; height: 2px; background: #E6EAF2; }101 102  /* Empty space area */103  .white-space {104    height: 968px;105  }106 107  /* Keyboard */108  .keyboard {109    position: absolute;110    bottom: 0;111    left: 0;112    width: 1080px;113    height: 870px;114    background: #1F1B17;115    border-top-left-radius: 18px;116    border-top-right-radius: 18px;117    box-shadow: 0 -2px 6px rgba(0,0,0,0.2);118    color: #EADFD5;119  }120 121  .kb-top-tools {122    height: 120px;123    display: flex;124    align-items: center;125    gap: 40px;126    padding: 0 36px;127    color: #CFC4BB;128    font-size: 36px;129  }130  .kb-top-tools .tool {131    display: flex; align-items: center; gap: 14px;132  }133  .kb-top-tools svg { width: 44px; height: 44px; fill: #CFC4BB; }134 135  .kb-rows { padding: 0 36px; }136  .kb-row {137    display: flex;138    gap: 18px;139    justify-content: center;140    margin-top: 16px;141  }142  .key {143    height: 120px;144    min-width: 88px;145    background: #2A2522;146    border-radius: 20px;147    display: flex; align-items: center; justify-content: center;148    font-size: 48px; color: #F0E8E1;149  }150  .key.wide { min-width: 150px; }151  .key.extra-wide { min-width: 420px; }152  .key.icon svg { width: 48px; height: 48px; fill: #F0E8E1; }153 154  .kb-bottom-row {155    display: flex; gap: 18px; justify-content: center;156    margin-top: 26px; padding: 0 36px;157  }158</style>159</head>160<body>161<div id="render-target">162 163  <!-- Status Bar -->164  <div class="status-bar">165    <div>11:58</div>166    <div class="status-right">167      <div class="icon-small">168        <!-- Wi-Fi -->169        <svg viewBox="0 0 24 24">170          <path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 5c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 5l2 2 2-2c-2-2-4-2-6 0z"/>171        </svg>172      </div>173      <div class="icon-small">174        <!-- Battery -->175        <svg viewBox="0 0 24 24">176          <rect x="1" y="6" width="18" height="12" rx="2"></rect>177          <rect x="20" y="10" width="3" height="4"></rect>178          <rect x="3" y="8" width="12" height="8" fill="#4CAF50"></rect>179        </svg>180      </div>181    </div>182  </div>183 184  <!-- Header with close and title -->185  <div class="header">186    <div class="close-btn">187      <svg viewBox="0 0 24 24">188        <path d="M5 5l14 14M19 5L5 19" />189      </svg>190    </div>191    <div class="title">Departure</div>192  </div>193 194  <!-- Input -->195  <div class="input-wrap">196    <div class="input-pill">197      <div class="location-dot"></div>198      <div class="input-text">Brussels-Centraal<span class="caret"></span></div>199    </div>200  </div>201 202  <!-- Suggestion -->203  <div class="suggestion">204    <div class="train-icon">205      <svg viewBox="0 0 24 24">206        <path d="M6 3h12c1 0 2 1 2 2v9c0 1-1 2-2 2l2 2v1h-2l-2-2H8l-2 2H4v-1l2-2c-1 0-2-1-2-2V5c0-1 1-2 2-2zM8 7h8v3H8V7zm1 9a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm8 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"/>207      </svg>208    </div>209    <div class="suggestion-text">Brussels-Central <span class="suggestion-sub">Belgium</span></div>210  </div>211  <div class="divider"></div>212 213  <div class="white-space"></div>214 215  <!-- Keyboard -->216  <div class="keyboard">217    <div class="kb-top-tools">218      <div class="tool">219        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>220        <span>GIF</span>221      </div>222      <div class="tool">223        <svg viewBox="0 0 24 24"><path d="M12 2l3 5 6 1-4 4 1 6-6-3-6 3 1-6-4-4 6-1 3-5z"/></svg>224        <span>Settings</span>225      </div>226      <div class="tool">227        <svg viewBox="0 0 24 24"><path d="M4 4h16v4H4zM4 10h16v4H4zM4 16h16v4H4z"/></svg>228        <span>Translate</span>229      </div>230      <div class="tool">231        <svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 100 18 9 9 0 000-18z"/></svg>232        <span>Theme</span>233      </div>234      <div class="tool" style="margin-left:auto;">235        <svg viewBox="0 0 24 24"><path d="M12 3a7 7 0 00-7 7v5l-2 2h18l-2-2v-5a7 7 0 00-7-7z"/></svg>236        <span>Mic</span>237      </div>238    </div>239 240    <div class="kb-rows">241      <div class="kb-row">242        <div class="key">q</div>243        <div class="key">w</div>244        <div class="key">e</div>245        <div class="key">r</div>246        <div class="key">t</div>247        <div class="key">y</div>248        <div class="key">u</div>249        <div class="key">i</div>250        <div class="key">o</div>251        <div class="key">p</div>252      </div>253      <div class="kb-row">254        <div class="key">a</div>255        <div class="key">s</div>256        <div class="key">d</div>257        <div class="key">f</div>258        <div class="key">g</div>259        <div class="key">h</div>260        <div class="key">j</div>261        <div class="key">k</div>262        <div class="key">l</div>263      </div>264      <div class="kb-row">265        <div class="key wide">⇧</div>266        <div class="key">z</div>267        <div class="key">x</div>268        <div class="key">c</div>269        <div class="key">v</div>270        <div class="key">b</div>271        <div class="key">n</div>272        <div class="key">m</div>273        <div class="key icon wide">274          <svg viewBox="0 0 24 24"><path d="M4 7l16 10-4 0 0 4-12-7z"/></svg>275        </div>276      </div>277 278      <div class="kb-bottom-row">279        <div class="key wide">?123</div>280        <div class="key wide">,</div>281        <div class="key wide">😊</div>282        <div class="key extra-wide"></div>283        <div class="key wide">.</div>284        <div class="key wide">✓</div>285      </div>286    </div>287  </div>288 289</div>290</body>291</html>