GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=1080, initial-scale=1.0" />6<title>Destination Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #FFFFFF;15  }16 17  /* Top teal bar (status + app bar) */18  .top-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 200px;24    background: #0A6672; /* teal */25    color: #FFFFFF;26  }27  .status-bar {28    height: 70px;29    padding: 0 28px;30    display: flex;31    align-items: center;32    justify-content: space-between;33    font-size: 34px;34    letter-spacing: 0.5px;35  }36  .status-left { display: flex; align-items: center; gap: 18px; }37  .status-right { display: flex; align-items: center; gap: 26px; }38  .status-dot {39    width: 10px; height: 10px; background: #fff; border-radius: 50%;40  }41  .icon-wifi,42  .icon-battery {43    width: 40px; height: 40px;44  }45  .icon-wifi svg,46  .icon-battery svg { width: 100%; height: 100%; }47 48  .app-bar {49    height: 130px;50    display: flex;51    align-items: center;52    padding: 0 30px;53    gap: 24px;54  }55  .back-btn { width: 56px; height: 56px; }56  .title {57    font-size: 56px;58    font-weight: 600;59    margin-top: 6px;60  }61 62  /* Content area (blank input area) */63  .content-area {64    position: absolute;65    top: 200px;66    left: 0;67    width: 100%;68    height: 1300px;69    background: #FFFFFF;70  }71 72  /* Keyboard */73  .keyboard {74    position: absolute;75    bottom: 110px; /* leave space for gesture pill */76    left: 0;77    width: 100%;78    height: 920px;79    background: #141414;80    color: #fff;81    box-shadow: 0 -8px 20px rgba(0,0,0,0.25);82  }83  .kb-top {84    height: 120px;85    padding: 20px 32px 0 32px;86    display: flex;87    align-items: center;88    justify-content: space-between;89  }90  .kb-top .circle {91    width: 84px;92    height: 84px;93    border-radius: 50%;94    background: #1F1F1F;95    border: 1px solid #2A2A2A;96    display: flex;97    align-items: center;98    justify-content: center;99    color: #E0E0E0;100    font-size: 28px;101  }102  .kb-top .circle svg { width: 40px; height: 40px; }103 104  .keys {105    padding: 10px 30px;106  }107  .row {108    display: flex;109    justify-content: center;110    gap: 14px;111    margin-top: 18px;112  }113  .key {114    width: 92px;115    height: 120px;116    background: #2B2B2B;117    border: 1px solid #3A3A3A;118    border-radius: 18px;119    display: flex;120    align-items: center;121    justify-content: center;122    font-size: 48px;123    color: #F1F1F1;124    position: relative;125  }126  .key .hint {127    position: absolute;128    top: 8px;129    left: 10px;130    font-size: 22px;131    color: #9EA3A7;132  }133  .row.row2 { padding-left: 40px; padding-right: 40px; }134  .row.row3 { padding-left: 80px; padding-right: 80px; }135 136  .key-wide {137    width: 140px;138  }139  .key-backspace, .key-shift {140    width: 140px;141    font-size: 36px;142  }143  .key-backspace svg, .key-shift svg { width: 50px; height: 50px; }144 145  .bottom-row {146    display: flex;147    align-items: center;148    gap: 16px;149    padding: 24px 26px 0 26px;150  }151  .pill {152    height: 110px;153    padding: 0 28px;154    background: #B5C6DD;155    color: #0C1A26;156    border-radius: 55px;157    display: flex;158    align-items: center;159    justify-content: center;160    font-size: 40px;161    border: 1px solid #A7B7C9;162  }163  .key-small {164    width: 90px; height: 110px; border-radius: 22px;165    background: #2B2B2B; border: 1px solid #3A3A3A;166    display: flex; align-items: center; justify-content: center;167    font-size: 44px; color: #F1F1F1;168  }169  .spacebar {170    flex: 1;171    height: 110px;172    background: #2B2B2B;173    border: 1px solid #3A3A3A;174    border-radius: 22px;175  }176  .search-btn {177    width: 112px; height: 112px; border-radius: 56px;178    background: #B5C6DD;179    border: 1px solid #A7B7C9;180    display: flex; align-items: center; justify-content: center;181  }182  .search-btn svg { width: 56px; height: 56px; }183 184  /* Gesture pill */185  .gesture {186    position: absolute;187    bottom: 28px;188    left: 50%;189    transform: translateX(-50%);190    width: 240px;191    height: 12px;192    background: #EAEAEA;193    border-radius: 6px;194  }195</style>196</head>197<body>198<div id="render-target">199 200  <div class="top-bar">201    <div class="status-bar">202      <div class="status-left">203        <div style="font-weight:600;">10:17</div>204        <div class="status-dot"></div>205      </div>206      <div class="status-right">207        <div class="icon-wifi">208          <svg viewBox="0 0 24 24" fill="#FFFFFF">209            <path d="M12 18a2 2 0 1 0 0.001 0zM2.5 9.5C6.9 6 17.1 6 21.5 9.5l-1.7 1.8C16.8 9 7.2 9 4.2 11.3L2.5 9.5zM6.2 13.1c3-2.3 8.6-2.3 11.6 0l-1.7 1.8c-2.4-1.8-5.8-1.8-8.2 0L6.2 13.1z"/>210          </svg>211        </div>212        <div class="icon-battery">213          <svg viewBox="0 0 24 24" fill="#FFFFFF">214            <rect x="3" y="6" width="17" height="12" rx="2"></rect>215            <rect x="21" y="10" width="2" height="4" rx="1"></rect>216            <rect x="5" y="8" width="13" height="8" fill="#0A6672"></rect>217          </svg>218        </div>219      </div>220    </div>221    <div class="app-bar">222      <div class="back-btn">223        <svg viewBox="0 0 24 24" fill="#FFFFFF">224          <path d="M15.5 5.5L9 12l6.5 6.5-2 2L5 12l8.5-8.5 2 2z"/>225        </svg>226      </div>227      <div class="title">Destination</div>228    </div>229  </div>230 231  <div class="content-area">232    <!-- Blank area representing the input screen -->233  </div>234 235  <div class="keyboard">236    <div class="kb-top">237      <div class="circle">238        <svg viewBox="0 0 24 24" fill="#E0E0E0">239          <circle cx="5" cy="5" r="2"></circle>240          <circle cx="12" cy="5" r="2"></circle>241          <circle cx="19" cy="5" r="2"></circle>242          <circle cx="5" cy="12" r="2"></circle>243          <circle cx="12" cy="12" r="2"></circle>244          <circle cx="19" cy="12" r="2"></circle>245          <circle cx="5" cy="19" r="2"></circle>246          <circle cx="12" cy="19" r="2"></circle>247          <circle cx="19" cy="19" r="2"></circle>248        </svg>249      </div>250      <div class="circle">🙂</div>251      <div class="circle" style="font-weight:700;">GIF</div>252      <div class="circle">253        <svg viewBox="0 0 24 24" fill="#E0E0E0">254          <path d="M9 21h6v-2H9v2zM4 8h16l-2 9H6L4 8zm6-5h4l1 3H9l1-3z"/>255        </svg>256      </div>257      <div class="circle">258        <svg viewBox="0 0 24 24" fill="#E0E0E0">259          <path d="M4 5h16v2H4zm0 6h16v2H4zm0 6h16v2H4z"/>260        </svg>261      </div>262      <div class="circle">🎨</div>263      <div class="circle">264        <svg viewBox="0 0 24 24" fill="#E0E0E0">265          <path d="M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm-1 5h2v6h-2V8zm1 8a1.5 1.5 0 1 0 0.001 0z"/>266        </svg>267      </div>268    </div>269 270    <div class="keys">271      <div class="row">272        <div class="key"><span class="hint">1</span>q</div>273        <div class="key"><span class="hint">2</span>w</div>274        <div class="key"><span class="hint">3</span>e</div>275        <div class="key"><span class="hint">4</span>r</div>276        <div class="key"><span class="hint">5</span>t</div>277        <div class="key"><span class="hint">6</span>y</div>278        <div class="key"><span class="hint">7</span>u</div>279        <div class="key"><span class="hint">8</span>i</div>280        <div class="key"><span class="hint">9</span>o</div>281        <div class="key"><span class="hint">0</span>p</div>282      </div>283 284      <div class="row row2">285        <div class="key">a</div>286        <div class="key">s</div>287        <div class="key">d</div>288        <div class="key">f</div>289        <div class="key">g</div>290        <div class="key">h</div>291        <div class="key">j</div>292        <div class="key">k</div>293        <div class="key">l</div>294      </div>295 296      <div class="row row3">297        <div class="key-shift key">298          <svg viewBox="0 0 24 24" fill="#F1F1F1">299            <path d="M12 4l8 8h-5v8H9v-8H4l8-8z"/>300          </svg>301        </div>302        <div class="key">z</div>303        <div class="key">x</div>304        <div class="key">c</div>305        <div class="key">v</div>306        <div class="key">b</div>307        <div class="key">n</div>308        <div class="key">m</div>309        <div class="key-backspace key">310          <svg viewBox="0 0 24 24" fill="#F1F1F1">311            <path d="M6 4l-4 8 4 8h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H6zm11 11l-5-3 5-3v6z"/>312          </svg>313        </div>314      </div>315 316      <div class="bottom-row">317        <div class="pill">?123</div>318        <div class="key-small">,</div>319        <div class="key-small">🙂</div>320        <div class="spacebar"></div>321        <div class="key-small">.</div>322        <div class="search-btn">323          <svg viewBox="0 0 24 24" fill="#0C1A26">324            <circle cx="10" cy="10" r="6" stroke="#0C1A26" stroke-width="2" fill="none"></circle>325            <path d="M15 15l5 5" stroke="#0C1A26" stroke-width="3" stroke-linecap="round"></path>326          </svg>327        </div>328      </div>329    </div>330  </div>331 332  <div class="gesture"></div>333</div>334</body>335</html>