GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Choose a city</title>6<style>7  body { margin:0; padding:0; background: transparent; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: #e6f3ff; /* page light blue */14    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;15    color: #111;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 110px;25    background: #0c0c0e;26    color: #e9e9e9;27    font-size: 34px;28    display: flex;29    align-items: center;30    padding: 0 28px;31    box-sizing: border-box;32    letter-spacing: 0.5px;33  }34  .status-left { flex: 1; }35  .status-right {36    display: flex; align-items: center; gap: 16px;37    font-weight: 600;38  }39  .icon-wifi, .icon-signal, .icon-battery {40    width: 38px; height: 38px;41  }42 43  /* Header */44  .header {45    position: absolute;46    top: 110px;47    left: 0;48    width: 1080px;49    height: 160px;50    background: #2f3d4a;51    display: flex;52    align-items: center;53    justify-content: center;54    color: #eef4f8;55    font-size: 48px;56    font-weight: 600;57  }58  .back-btn {59    position: absolute;60    left: 24px;61    top: 110px;62    width: 160px;63    height: 160px;64    display: flex;65    align-items: center;66    justify-content: center;67  }68  .back-btn svg { width: 48px; height: 48px; fill: #eef4f8; }69 70  /* Card */71  .card {72    position: absolute;73    top: 300px;74    left: 28px;75    right: 28px;76    bottom: 830px; /* leave space for keyboard */77    background: #ffffff;78    border-radius: 28px;79    box-shadow: 0 2px 6px rgba(0,0,0,0.06);80    overflow: hidden;81  }82  .card-inner {83    box-sizing: border-box;84    padding: 36px 36px 0 36px;85  }86  .label {87    font-size: 34px;88    color: #333;89    margin-bottom: 10px;90  }91  .value-big {92    font-size: 72px;93    letter-spacing: 1px;94    color: #111;95    font-weight: 600;96    margin-bottom: 24px;97  }98  .divider {99    height: 2px;100    background: #e6e6e6;101    margin: 6px -36px 10px -36px;102  }103  .to-row {104    display: flex;105    align-items: center;106    justify-content: space-between;107  }108  .next-link {109    font-size: 38px;110    color: #111;111  }112  .input-row {113    display: flex;114    align-items: center;115    gap: 16px;116    margin-top: 8px;117    margin-bottom: 20px;118  }119  .caret {120    width: 4px; height: 60px; background: #20bf6b; border-radius: 2px;121  }122  .placeholder {123    font-size: 58px;124    color: #9aa4ac;125    letter-spacing: 1px;126  }127 128  /* Suggestions list */129  .list {130    margin: 10px -36px 0 -36px;131    border-top: 2px solid #e6e6e6;132  }133  .item {134    padding: 30px 36px;135    border-bottom: 2px solid #e6e6e6;136  }137  .item.active { background: #eef6ff; }138  .item .title {139    font-size: 54px;140    color: #0aa0ff;141    font-weight: 800;142    margin-bottom: 6px;143  }144  .item .subtitle {145    font-size: 34px;146    color: #7a8a96;147  }148 149  /* Keyboard mock */150  .keyboard {151    position: absolute;152    left: 0; right: 0; bottom: 0;153    height: 830px;154    background: #1f242a;155    color: #cfd6dc;156  }157  .kb-top {158    height: 120px;159    display: flex; align-items: center; gap: 36px;160    padding: 0 36px; box-sizing: border-box;161    color: #cfd6dc;162  }163  .kb-icon {164    width: 88px; height: 88px; border-radius: 20px;165    background: #2a2f36; display: flex; align-items: center; justify-content: center;166    font-size: 36px;167  }168  .kb-keys {169    padding: 10px 18px; box-sizing: border-box;170    display: grid; grid-template-rows: repeat(4, 1fr);171    height: 710px; gap: 16px;172  }173  .kb-row {174    display: grid; grid-template-columns: repeat(10, 1fr);175    gap: 12px;176  }177  .key {178    background: #2a2f36;179    border-radius: 16px;180    height: 120px;181  }182  .key.large { grid-column: span 2; }183  .key.space { grid-column: span 6; }184  .key-right { grid-column: span 2; }185</style>186</head>187<body>188<div id="render-target">189  <!-- Status Bar -->190  <div class="status-bar">191    <div class="status-left">8:06</div>192    <div class="status-right">193      <!-- simple signal icon -->194      <svg class="icon-signal" viewBox="0 0 24 24">195        <path fill="#e9e9e9" d="M2 20h2v-4H2v4zm4 0h2v-7H6v7zm4 0h2v-10h-2v10zm4 0h2V6h-2v14zm4 0h2V3h-2v17z"/>196      </svg>197      <!-- wifi -->198      <svg class="icon-wifi" viewBox="0 0 24 24">199        <path fill="#e9e9e9" d="M12 20.5l-1.6-1.6a2.25 2.25 0 013.2 0L12 20.5zM4 9.5a14 14 0 0116 0l-1.4 1.4a12 12 0 00-13.2 0L4 9.5zm4 4a9 9 0 018 0l-1.4 1.4a7 7 0 00-5.2 0L8 13.5z"/>200      </svg>201      <!-- battery -->202      <svg class="icon-battery" viewBox="0 0 28 16">203        <rect x="1" y="3" width="22" height="10" rx="2" ry="2" fill="none" stroke="#e9e9e9" stroke-width="2"/>204        <rect x="24" y="6" width="3" height="4" fill="#e9e9e9"/>205        <rect x="3" y="5" width="18" height="6" fill="#e9e9e9"/>206      </svg>207      <div>97%</div>208    </div>209  </div>210 211  <!-- Header -->212  <div class="header">Choose a city</div>213  <div class="back-btn">214    <svg viewBox="0 0 24 24"><path d="M15.4 5.4L9.8 11l5.6 5.6-1.4 1.4L7 11l7-7 1.4 1.4z"/></svg>215  </div>216 217  <!-- Main card -->218  <div class="card">219    <div class="card-inner">220      <div class="label">From</div>221      <div class="value-big">BERLIN</div>222      <div class="divider"></div>223 224      <div class="to-row">225        <div class="label" style="margin:0;">To</div>226        <div class="next-link">Next</div>227      </div>228      <div class="input-row">229        <div class="caret"></div>230        <div class="placeholder">PRAHA</div>231      </div>232    </div>233 234    <div class="list">235      <div class="item active">236        <div class="title">BERLIN</div>237        <div class="subtitle">Germany</div>238      </div>239      <div class="item">240        <div class="title">BERLIN-SCHÖNEFELD</div>241        <div class="subtitle">Germany</div>242      </div>243      <div class="item">244        <div class="title">KREUZBERG (AHR)</div>245        <div class="subtitle">Germany</div>246      </div>247    </div>248  </div>249 250  <!-- Keyboard mock -->251  <div class="keyboard">252    <div class="kb-top">253      <div class="kb-icon">◻︎</div>254      <div class="kb-icon">☺</div>255      <div class="kb-icon">GIF</div>256      <div class="kb-icon">⚙</div>257      <div class="kb-icon">G✈</div>258      <div class="kb-icon">🎨</div>259      <div class="kb-icon">🎤</div>260    </div>261    <div class="kb-keys">262      <div class="kb-row">263        <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>264        <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>265      </div>266      <div class="kb-row">267        <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>268        <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>269      </div>270      <div class="kb-row">271        <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>272        <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>273      </div>274      <div class="kb-row">275        <div class="key large"></div>276        <div class="key"></div>277        <div class="key space"></div>278        <div class="key"></div>279        <div class="key-right"></div>280      </div>281    </div>282  </div>283</div>284</body>285</html>