GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - Plan</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin:0; padding:0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #121212;14    color: #fff;15  }16  /* Header */17  .header {18    position: absolute;19    left: 0;20    top: 0;21    width: 1080px;22    height: 350px;23    background: #D32F2F;24  }25  .status {26    position: absolute;27    top: 24px;28    left: 0;29    width: 100%;30    height: 72px;31    padding: 0 36px;32    display: flex;33    align-items: center;34    justify-content: space-between;35    color: #fff;36    font-size: 34px;37    opacity: 0.95;38  }39  .titlebar {40    position: absolute;41    top: 98px;42    left: 0;43    width: 100%;44    height: 92px;45    display: flex;46    align-items: center;47    padding: 0 28px;48    color: #fff;49  }50  .titlebar .title {51    flex: 1;52    text-align: center;53    font-weight: 600;54    font-size: 44px;55    letter-spacing: 0.5px;56  }57  .icon-btn { width: 72px; height: 72px; display:flex; align-items:center; justify-content:center; }58  .icon-btn svg { width: 42px; height: 42px; fill: none; stroke: #fff; stroke-width: 4; }59  /* Search Card */60  .search-card {61    position: absolute;62    left: 24px;63    right: 24px;64    top: 176px;65    background: #1E1E1E;66    border-radius: 26px;67    box-shadow: 0 8px 24px rgba(0,0,0,0.35);68    padding: 24px 24px 10px 24px;69  }70  .search-inner {71    position: relative;72    padding-left: 88px;73  }74  .rail-line {75    position: absolute;76    left: 40px;77    top: 18px;78    bottom: 18px;79    width: 2px;80    background: #3A3A3A;81  }82  .rail-dot {83    position: absolute;84    left: 29px;85    width: 24px; height: 24px;86    border-radius: 50%;87    border: 3px solid #BDBDBD;88    background: transparent;89  }90  .rail-dot.start { top: 0; }91  .rail-dot.end { bottom: 0; }92  .field {93    position: relative;94    padding: 20px 84px 18px 0;95    font-size: 44px;96    color: #EDEDED;97  }98  .field + .field {99    color: #A5A5A5;100  }101  .divider {102    height: 2px;103    background: #3A3A3A;104    margin: 6px 0 6px 0;105  }106  .clear-btn {107    position: absolute;108    right: 14px;109    top: 10px;110    width: 60px; height: 60px;111    display: flex; align-items:center; justify-content:center;112  }113  .clear-btn svg { width: 32px; height: 32px; stroke: #BDBDBD; stroke-width: 5; }114  /* List */115  .list {116    position: absolute;117    left: 0;118    right: 0;119    top: 520px;120    bottom: 760px; /* leave space for keyboard */121    overflow: hidden;122  }123  .row {124    height: 140px;125    padding: 0 32px;126    display: flex;127    align-items: center;128    background: #161616;129    border-top: 1px solid #232323;130  }131  .row:first-child { border-top: none; }132  .row .label {133    flex: 1;134    font-size: 46px;135    color: #EAEAEA;136  }137  .row .sub {138    color: #BDBDBD;139  }140  .list-icon {141    width: 64px; height: 64px; margin-right: 28px;142    display:flex; align-items:center; justify-content:center;143  }144  .list-icon svg { width: 52px; height: 52px; stroke: #BDBDBD; fill: none; stroke-width: 4; }145  .fav {146    width: 64px; height: 64px;147    display:flex; align-items:center; justify-content:center;148  }149  .fav svg { width: 52px; height: 52px; stroke: #BDBDBD; fill: none; stroke-width: 4; }150  /* Keyboard mock */151  .keyboard {152    position: absolute;153    left: 0; right: 0; bottom: 0;154    height: 760px;155    background: #0E0E0F;156    border-top: 1px solid #2A2A2A;157  }158  .kb-suggestion {159    height: 110px;160    display:flex; align-items:center; justify-content:center;161    color: #EDEDED;162    font-size: 44px;163    border-bottom: 1px solid #2A2A2A;164    background: #121215;165  }166  .kb-rows {167    padding: 22px 22px 18px;168  }169  .kb-row {170    display: flex;171    justify-content: center;172    margin-bottom: 16px;173  }174  .key {175    width: 86px; height: 104px;176    margin: 8px;177    border-radius: 14px;178    background: #2B2B2E;179    color: #E0E0E0;180    font-size: 40px;181    display:flex; align-items:center; justify-content:center;182  }183  .key.wide { width: 540px; }184  .key.medium { width: 140px; }185  .key.icon { background:#2B2B2E; }186  /* Status right icons (wifi/battery) */187  .status-icons svg { width: 40px; height: 40px; stroke:#fff; stroke-width:4; fill:none; margin-left:18px; }188</style>189</head>190<body>191<div id="render-target">192 193  <!-- Red Header -->194  <div class="header">195    <div class="status">196      <div>10:38</div>197      <div class="status-icons" style="display:flex; align-items:center;">198        <!-- wifi -->199        <svg viewBox="0 0 24 24"><path d="M2 8c5-5 15-5 20 0"/><path d="M5 11c3.5-3.5 10.5-3.5 14 0"/><path d="M8 14c2-2 6-2 8 0"/><circle cx="12" cy="18" r="1.6" fill="#fff" stroke="none"/></svg>200        <!-- battery -->201        <svg viewBox="0 0 26 24"><rect x="2" y="6" width="18" height="12" rx="2"/><rect x="20" y="9" width="3" height="6"/></svg>202      </div>203    </div>204 205    <div class="titlebar">206      <div class="icon-btn">207        <!-- Back arrow -->208        <svg viewBox="0 0 24 24"><path d="M14 4 L6 12 L14 20"/><path d="M7 12 H20"/></svg>209      </div>210      <div class="title">Plan</div>211      <div class="icon-btn">212        <!-- swap icon -->213        <svg viewBox="0 0 24 24">214          <path d="M7 7 H20 L16 3"/><path d="M17 17 H4 L8 21"/>215        </svg>216      </div>217    </div>218 219    <!-- Search card -->220    <div class="search-card">221      <div class="search-inner">222        <div class="rail-line"></div>223        <div class="rail-dot start"></div>224        <div class="rail-dot end"></div>225 226        <div class="field">227          Dundee228          <div class="clear-btn">229            <svg viewBox="0 0 24 24"><path d="M4 4 L20 20 M20 4 L4 20"/></svg>230          </div>231        </div>232        <div class="divider"></div>233        <div class="field" style="padding-bottom:12px;">To</div>234      </div>235    </div>236  </div>237 238  <!-- Results list -->239  <div class="list">240    <div class="row">241      <div class="list-icon">242        <!-- clock -->243        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7 V12 L16 14"/></svg>244      </div>245      <div class="label">Dundee</div>246      <div class="fav">247        <svg viewBox="0 0 24 24"><path d="M12 3 L14.8 9.2 L21.5 9.3 L16 13.5 L17.9 20 L12 16.4 L6.1 20 L8 13.5 L2.5 9.3 L9.2 9.2 Z"/></svg>248      </div>249    </div>250 251    <div class="row">252      <div class="list-icon">253        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7 V12 L16 14"/></svg>254      </div>255      <div class="label">Dunderland</div>256      <div class="fav">257        <svg viewBox="0 0 24 24"><path d="M12 3 L14.8 9.2 L21.5 9.3 L16 13.5 L17.9 20 L12 16.4 L6.1 20 L8 13.5 L2.5 9.3 L9.2 9.2 Z"/></svg>258      </div>259    </div>260 261    <div class="row">262      <div class="list-icon">263        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7 V12 L16 14"/></svg>264      </div>265      <div class="label">Dundenheim, Rathaus</div>266      <div class="fav">267        <svg viewBox="0 0 24 24"><path d="M12 3 L14.8 9.2 L21.5 9.3 L16 13.5 L17.9 20 L12 16.4 L6.1 20 L8 13.5 L2.5 9.3 L9.2 9.2 Z"/></svg>268      </div>269    </div>270 271    <div class="row">272      <div class="list-icon">273        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7 V12 L16 14"/></svg>274      </div>275      <div class="label">Dundenheim, Grosse Gasse</div>276      <div class="fav">277        <svg viewBox="0 0 24 24"><path d="M12 3 L14.8 9.2 L21.5 9.3 L16 13.5 L17.9 20 L12 16.4 L6.1 20 L8 13.5 L2.5 9.3 L9.2 9.2 Z"/></svg>278      </div>279    </div>280 281    <div class="row">282      <div class="list-icon">283        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7 V12 L16 14"/></svg>284      </div>285      <div class="label">Dundenheim, Offenburger Str.</div>286      <div class="fav">287        <svg viewBox="0 0 24 24"><path d="M12 3 L14.8 9.2 L21.5 9.3 L16 13.5 L17.9 20 L12 16.4 L6.1 20 L8 13.5 L2.5 9.3 L9.2 9.2 Z"/></svg>288      </div>289    </div>290 291    <div class="row">292      <div class="list-icon">293        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7 V12 L16 14"/></svg>294      </div>295      <div class="label">Dundalk</div>296      <div class="fav">297        <svg viewBox="0 0 24 24"><path d="M12 3 L14.8 9.2 L21.5 9.3 L16 13.5 L17.9 20 L12 16.4 L6.1 20 L8 13.5 L2.5 9.3 L9.2 9.2 Z"/></svg>298      </div>299    </div>300  </div>301 302  <!-- Keyboard mock -->303  <div class="keyboard">304    <div class="kb-suggestion">Dundee</div>305    <div class="kb-rows">306      <div class="kb-row">307        <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>308      </div>309      <div class="kb-row" style="padding-left:40px;">310        <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>311      </div>312      <div class="kb-row" style="padding-left:100px;">313        <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>314        <div class="key icon">⌫</div>315      </div>316      <div class="kb-row" style="justify-content: space-between; padding: 0 16px;">317        <div class="key icon medium">?123</div>318        <div class="key icon">,</div>319        <div class="key wide"></div>320        <div class="key icon">.</div>321        <div class="key icon medium">↵</div>322      </div>323    </div>324  </div>325 326</div>327</body>328</html>