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>Search With Keyboard UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Top search area */18  .top-bar {19    position: absolute;20    top: 84px;21    left: 32px;22    right: 32px;23    height: 120px;24  }25  .back-btn, .close-btn {26    position: absolute;27    top: 36px;28    width: 56px;29    height: 56px;30    display: flex;31    align-items: center;32    justify-content: center;33    color: #6b6f74;34  }35  .back-btn { left: 0; }36  .close-btn { right: 0; }37  .search-input {38    position: absolute;39    left: 120px;40    right: 120px;41    top: 0;42    height: 120px;43    background: #f1f3f4;44    border-radius: 28px;45    display: flex;46    align-items: center;47    padding: 0 36px;48    color: #444;49    font-size: 44px;50  }51  .caret {52    width: 3px;53    height: 48px;54    background: #c62828;55    margin-left: 12px;56    border-radius: 2px;57  }58 59  .filter-link {60    position: absolute;61    top: 260px;62    left: 118px;63    color: #607d8b;64    font-size: 40px;65    letter-spacing: 0.2px;66  }67  .filter-link .plus {68    font-weight: 600;69    margin-right: 14px;70    font-size: 48px;71  }72 73  /* Center loader diamond */74  .loader {75    position: absolute;76    top: 1120px;77    left: 50%;78    transform: translateX(-50%) rotate(45deg);79    width: 120px;80    height: 120px;81  }82  .loader .sq {83    position: absolute;84    width: 70px;85    height: 70px;86    border-radius: 6px;87  }88  .sq.tl { top: 0; left: 0; background: #f2c7c7; }89  .sq.tr { top: 0; right: 0; background: #f4d9d9; }90  .sq.bl { bottom: 0; left: 0; background: #f0b0b0; }91  .sq.br { bottom: 0; right: 0; background: #d85c5c; }92 93  /* Keyboard */94  .keyboard {95    position: absolute;96    bottom: 0;97    left: 0;98    width: 100%;99    height: 820px;100    background: #f1edf6;101    box-shadow: 0 -2px 6px rgba(0,0,0,0.05);102  }103  .suggestions {104    height: 110px;105    display: flex;106    align-items: center;107    padding: 0 28px;108    color: #596b7a;109    font-size: 40px;110    border-bottom: 1px solid #e5e2ea;111  }112  .sugg-left {113    width: 96px;114    height: 96px;115    border-radius: 24px;116    background: #dcd7ee;117    display: flex;118    align-items: center;119    justify-content: center;120    margin-right: 20px;121    color: #6f6aa8;122    font-size: 40px;123  }124  .sugg-words {125    display: flex;126    gap: 26px;127    align-items: center;128    flex: 1;129  }130  .divider {131    width: 2px;132    height: 40px;133    background: #cdd0d5;134  }135  .mic {136    width: 56px;137    height: 56px;138  }139 140  .keys {141    padding: 18px 18px 8px;142  }143  .row {144    display: flex;145    gap: 14px;146    justify-content: center;147    margin-bottom: 18px;148  }149  .key {150    flex: 1 1 0;151    max-width: 92px;152    height: 120px;153    background: #ffffff;154    border-radius: 26px;155    box-shadow: inset 0 0 0 1px #e7e4ee;156    display: flex;157    align-items: center;158    justify-content: center;159    font-size: 44px;160    color: #333;161  }162  .row .key.wide { flex: 1.6 1 0; max-width: none; }163  .row .key.extra-wide { flex: 4.5 1 0; max-width: none; }164  .row .key.narrow { flex: 1.2 1 0; }165  .row.offset { padding: 0 40px; }166 167  .bottom-indicator {168    position: absolute;169    bottom: 18px;170    left: 50%;171    transform: translateX(-50%);172    width: 300px;173    height: 10px;174    border-radius: 8px;175    background: #bbb8c5;176    opacity: 0.8;177  }178 179  .action-key {180    background: #e5e0fb;181    color: #6a5ee8;182    box-shadow: inset 0 0 0 1px #dcd6fb;183  }184  .rounded-icon {185    width: 40px;186    height: 40px;187    display: inline-block;188  }189</style>190</head>191<body>192<div id="render-target">193  <!-- Top search area -->194  <div class="top-bar">195    <div class="back-btn" aria-label="Back">196      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#6b6f74" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">197        <path d="M15 18l-6-6 6-6"/>198      </svg>199    </div>200 201    <div class="search-input">202      <span>Shoe rack</span>203      <span class="caret"></span>204    </div>205 206    <div class="close-btn" aria-label="Close">207      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#8a8f94" stroke-width="2" stroke-linecap="round">208        <path d="M6 6l12 12M18 6L6 18"/>209      </svg>210    </div>211  </div>212 213  <div class="filter-link"><span class="plus">+</span>Filter</div>214 215  <!-- Center loader -->216  <div class="loader" aria-label="Loading">217    <div class="sq tl"></div>218    <div class="sq tr"></div>219    <div class="sq bl"></div>220    <div class="sq br"></div>221  </div>222 223  <!-- Keyboard -->224  <div class="keyboard">225    <!-- suggestions row -->226    <div class="suggestions">227      <div class="sugg-left">228        <svg width="34" height="34" viewBox="0 0 24 24" fill="#6f6aa8">229          <circle cx="5" cy="5" r="2"/><circle cx="12" cy="5" r="2"/><circle cx="19" cy="5" r="2"/>230          <circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/>231          <circle cx="5" cy="19" r="2"/><circle cx="12" cy="19" r="2"/><circle cx="19" cy="19" r="2"/>232        </svg>233      </div>234      <div class="sugg-words">235        <span>rack</span>236        <div class="divider"></div>237        <span>racks</span>238        <div class="divider"></div>239        <span>racket</span>240      </div>241      <svg class="mic" viewBox="0 0 24 24" fill="none" stroke="#606a76" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">242        <path d="M12 3a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3z"/>243        <path d="M19 10a7 7 0 0 1-14 0"/><path d="M12 17v4"/>244      </svg>245    </div>246 247    <!-- key rows -->248    <div class="keys">249      <div class="row">250        <div class="key">q</div>251        <div class="key">w</div>252        <div class="key">e</div>253        <div class="key">r</div>254        <div class="key">t</div>255        <div class="key">y</div>256        <div class="key">u</div>257        <div class="key">i</div>258        <div class="key">o</div>259        <div class="key">p</div>260      </div>261 262      <div class="row offset">263        <div class="key">a</div>264        <div class="key">s</div>265        <div class="key">d</div>266        <div class="key">f</div>267        <div class="key">g</div>268        <div class="key">h</div>269        <div class="key">j</div>270        <div class="key">k</div>271        <div class="key">l</div>272      </div>273 274      <div class="row">275        <div class="key narrow action-key" title="Shift">276          <svg class="rounded-icon" viewBox="0 0 24 24" fill="none" stroke="#6a5ee8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">277            <path d="M12 4l6 6h-4v6H10v-6H6l6-6z"/>278          </svg>279        </div>280        <div class="key">z</div>281        <div class="key">x</div>282        <div class="key">c</div>283        <div class="key">v</div>284        <div class="key">b</div>285        <div class="key">n</div>286        <div class="key">m</div>287        <div class="key narrow action-key" title="Backspace">288          <svg class="rounded-icon" viewBox="0 0 24 24" fill="none" stroke="#6a5ee8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">289            <path d="M3 12l5-5h11a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H8l-5-5z"/>290            <path d="M12 10l4 4M16 10l-4 4"/>291          </svg>292        </div>293      </div>294 295      <div class="row">296        <div class="key action-key narrow">?123</div>297        <div class="key narrow">,</div>298        <div class="key extra-wide"> </div>299        <div class="key">.</div>300        <div class="key action-key narrow" title="Enter">301          <svg class="rounded-icon" viewBox="0 0 24 24" fill="none" stroke="#6a5ee8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">302            <path d="M20 7v5a4 4 0 0 1-4 4H6"/><path d="M10 16l-4-4 4-4"/>303          </svg>304        </div>305      </div>306    </div>307 308    <div class="bottom-indicator"></div>309  </div>310</div>311</body>312</html>