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>Mobile UI - Search with Keyboard (Dark)</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #2a201a; /* deep brown/black */20    color: #ead9c9;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    right: 0;29    height: 100px;30    padding: 0 36px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    color: #f1e2d4;35    font-weight: 600;36    font-size: 40px;37  }38  .status-left {39    display: flex;40    align-items: center;41    gap: 16px;42  }43  .status-right {44    display: flex;45    align-items: center;46    gap: 26px;47  }48  .status-icon svg {49    width: 44px;50    height: 44px;51    fill: none;52    stroke: #f1e2d4;53    stroke-width: 3.5;54  }55 56  /* Search header */57  .search-header {58    position: absolute;59    top: 100px;60    left: 0;61    right: 0;62    height: 160px;63    background: #3a2c23;64    display: flex;65    align-items: center;66    padding: 0 32px;67    gap: 28px;68  }69  .icon-btn {70    width: 84px;71    height: 84px;72    display: inline-flex;73    align-items: center;74    justify-content: center;75  }76  .icon-btn svg {77    width: 48px;78    height: 48px;79    stroke: #dcbfa8;80    fill: none;81    stroke-width: 5;82    stroke-linecap: round;83    stroke-linejoin: round;84  }85  .search-text {86    flex: 1;87    font-size: 56px;88    color: #efc8a9;89    letter-spacing: 0.5px;90    display: flex;91    align-items: center;92  }93  .caret {94    width: 2px;95    height: 56px;96    background: #efc8a9;97    margin-left: 6px;98  }99 100  /* Suggestion/result list */101  .results {102    position: absolute;103    top: 260px;104    left: 0;105    right: 0;106    padding: 28px 36px;107  }108  .result-item {109    padding: 36px 8px;110    font-size: 44px;111    color: #e7dfd7;112  }113 114  /* Keyboard */115  .keyboard {116    position: absolute;117    left: 0;118    right: 0;119    bottom: 80px;120    height: 940px;121    background: #1f1814;122    border-top: 1px solid rgba(255,255,255,0.06);123    display: flex;124    flex-direction: column;125  }126  .kb-toolbar {127    height: 120px;128    display: flex;129    align-items: center;130    padding: 0 28px;131    color: #e9d9c9;132    border-bottom: 1px solid rgba(255,255,255,0.06);133    gap: 24px;134  }135  .kb-pill {136    width: 88px;137    height: 88px;138    border-radius: 44px;139    background: #3a2f28;140    display: inline-flex;141    align-items: center;142    justify-content: center;143  }144  .kb-toolbar .suggestions {145    flex: 1;146    display: flex;147    align-items: center;148    justify-content: center;149    gap: 26px;150    font-size: 40px;151    color: #d8c8b9;152  }153  .divider {154    width: 2px;155    height: 40px;156    background: rgba(255,255,255,0.15);157  }158  .kb-rows {159    flex: 1;160    padding: 26px 18px 22px;161    display: flex;162    flex-direction: column;163    gap: 18px;164  }165  .row {166    display: flex;167    gap: 14px;168    justify-content: center;169  }170  .key {171    flex: 1;172    height: 120px;173    background: #3b312b;174    color: #f0dfcf;175    border-radius: 22px;176    font-size: 44px;177    display: flex;178    align-items: center;179    justify-content: center;180  }181  .key.small {182    flex: 0 0 84px;183    width: 84px;184  }185  .key.wide {186    flex: 1.4;187  }188  .key.extra-wide {189    flex: 3.5;190  }191  .key.peach,192  .kb-peach {193    background: #eec9ab;194    color: #3a2f28;195  }196  .key svg, .kb-pill svg {197    width: 44px;198    height: 44px;199    stroke: currentColor;200    fill: none;201    stroke-width: 5;202    stroke-linecap: round;203    stroke-linejoin: round;204  }205 206  /* Bottom gesture bar */207  .gesture-bar {208    position: absolute;209    bottom: 24px;210    left: 50%;211    transform: translateX(-50%);212    width: 340px;213    height: 10px;214    border-radius: 8px;215    background: #9a8a7e;216    opacity: 0.7;217  }218</style>219</head>220<body>221<div id="render-target">222 223  <!-- Status bar -->224  <div class="status-bar">225    <div class="status-left">226      <div>6:15</div>227      <div class="status-icon" aria-label="sun">228        <svg viewBox="0 0 24 24">229          <circle cx="12" cy="12" r="4" fill="none"></circle>230          <path d="M12 1v3M12 20v3M1 12h3M20 12h3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1"></path>231        </svg>232      </div>233    </div>234    <div class="status-right">235      <div class="status-icon" aria-label="wifi">236        <svg viewBox="0 0 24 24">237          <path d="M3 9c4.7-4.2 13.3-4.2 18 0"></path>238          <path d="M6 12.5c3.2-2.9 8.8-2.9 12 0"></path>239          <path d="M9 16c1.6-1.5 4.4-1.5 6 0"></path>240          <circle cx="12" cy="19" r="1.2" fill="#f1e2d4" stroke="none"></circle>241        </svg>242      </div>243      <div class="status-icon" aria-label="battery">244        <svg viewBox="0 0 28 24">245          <rect x="2" y="6" width="20" height="12" rx="2"></rect>246          <rect x="22.5" y="9" width="3" height="6" rx="1"></rect>247          <rect x="4.5" y="8.5" width="15" height="7" fill="#f1e2d4" stroke="none"></rect>248        </svg>249      </div>250    </div>251  </div>252 253  <!-- Search header -->254  <div class="search-header">255    <div class="icon-btn" aria-label="back">256      <svg viewBox="0 0 24 24">257        <path d="M15 4L7 12l8 8"></path>258      </svg>259    </div>260    <div class="search-text">261      Venice tour262      <div class="caret"></div>263    </div>264    <div class="icon-btn" aria-label="clear">265      <svg viewBox="0 0 24 24">266        <path d="M5 5l14 14M19 5L5 19"></path>267      </svg>268    </div>269  </div>270 271  <!-- Results -->272  <div class="results">273    <div class="result-item">venice tour.pdf</div>274  </div>275 276  <!-- Keyboard -->277  <div class="keyboard">278    <!-- Suggestion toolbar -->279    <div class="kb-toolbar">280      <div class="kb-pill" title="apps">281        <svg viewBox="0 0 24 24">282          <rect x="4" y="4" width="6" height="6"></rect>283          <rect x="14" y="4" width="6" height="6"></rect>284          <rect x="4" y="14" width="6" height="6"></rect>285          <rect x="14" y="14" width="6" height="6"></rect>286        </svg>287      </div>288      <div class="suggestions">289        <span>tour</span>290        <div class="divider"></div>291        <span>your</span>292        <div class="divider"></div>293        <span>tourism</span>294      </div>295      <div class="kb-pill kb-peach" title="voice">296        <svg viewBox="0 0 24 24">297          <path d="M12 3a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3z"></path>298          <path d="M5 11a7 7 0 0 0 14 0M12 18v3"></path>299        </svg>300      </div>301    </div>302 303    <!-- Key rows -->304    <div class="kb-rows">305      <div class="row">306        <div class="key">q</div>307        <div class="key">w</div>308        <div class="key">e</div>309        <div class="key">r</div>310        <div class="key">t</div>311        <div class="key">y</div>312        <div class="key">u</div>313        <div class="key">i</div>314        <div class="key">o</div>315        <div class="key">p</div>316      </div>317      <div class="row" style="padding: 0 40px;">318        <div class="key">a</div>319        <div class="key">s</div>320        <div class="key">d</div>321        <div class="key">f</div>322        <div class="key">g</div>323        <div class="key">h</div>324        <div class="key">j</div>325        <div class="key">k</div>326        <div class="key">l</div>327      </div>328      <div class="row">329        <div class="key wide" title="shift">330          <svg viewBox="0 0 24 24">331            <path d="M12 4l7 7h-4v7H9v-7H5z"></path>332          </svg>333        </div>334        <div class="key">z</div>335        <div class="key">x</div>336        <div class="key">c</div>337        <div class="key">v</div>338        <div class="key">b</div>339        <div class="key">n</div>340        <div class="key">m</div>341        <div class="key wide" title="backspace">342          <svg viewBox="0 0 24 24">343            <path d="M4 12l6-6h10v12H10z"></path>344            <path d="M12 9l6 6M18 9l-6 6"></path>345          </svg>346        </div>347      </div>348      <div class="row">349        <div class="key wide peach" style="border-radius: 30px;">?123</div>350        <div class="key" title="emoji">351          <svg viewBox="0 0 24 24">352            <circle cx="12" cy="12" r="8"></circle>353            <path d="M9 10h.01M15 10h.01"></path>354            <path d="M8 14c2 2 6 2 8 0"></path>355          </svg>356        </div>357        <div class="key">,</div>358        <div class="key extra-wide"></div>359        <div class="key">.</div>360        <div class="key peach" title="search">361          <svg viewBox="0 0 24 24">362            <circle cx="11" cy="11" r="6"></circle>363            <path d="M16.5 16.5L21 21"></path>364          </svg>365        </div>366      </div>367    </div>368  </div>369 370  <!-- Bottom gesture bar -->371  <div class="gesture-bar"></div>372</div>373</body>374</html>