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    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 100px;24    padding: 0 36px;25    box-sizing: border-box;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #1a1a1a;30    font-size: 34px;31  }32  .status-right {33    display: flex;34    align-items: center;35    gap: 18px;36    color: #666;37  }38  .dot { width: 10px; height: 10px; background: #666; border-radius: 50%; display: inline-block; margin: 0 10px; }39 40  /* Search header */41  .search-wrap {42    position: absolute;43    top: 110px;44    left: 24px;45    right: 24px;46    height: 120px;47    display: flex;48    align-items: center;49    gap: 22px;50  }51  .search-pill {52    flex: 1;53    height: 96px;54    background: #f1f1f1;55    border-radius: 50px;56    display: flex;57    align-items: center;58    padding: 0 24px;59    box-sizing: border-box;60    gap: 18px;61  }62  .search-text {63    flex: 1;64    color: #222;65    font-size: 38px;66    white-space: nowrap;67    overflow: hidden;68    text-overflow: ellipsis;69  }70  .cancel-link {71    color: #4d90fe;72    font-size: 36px;73  }74 75  /* Suggestions */76  .suggestions {77    position: absolute;78    top: 280px;79    left: 36px;80    right: 36px;81  }82  .suggest-title {83    color: #9e9e9e;84    font-size: 38px;85    margin-bottom: 26px;86  }87  .suggest-item {88    padding: 28px 0;89    font-size: 46px;90    color: #222;91    border-bottom: 1px solid #eee;92  }93 94  /* Keyboard area */95  .keyboard {96    position: absolute;97    left: 0;98    right: 0;99    bottom: 44px;100    height: 960px;101    background: #141718;102    border-top-left-radius: 26px;103    border-top-right-radius: 26px;104    box-sizing: border-box;105    padding: 16px 22px 22px;106    color: #fff;107  }108  .kb-suggestions {109    height: 96px;110    background: #1c1f21;111    border-radius: 16px;112    display: flex;113    align-items: center;114    padding: 0 22px;115    box-sizing: border-box;116    color: #cfcfcf;117    font-size: 36px;118    gap: 18px;119  }120  .kb-suggestions .pipe { color: #7a7a7a; }121  .krows {122    margin-top: 20px;123    display: grid;124    grid-template-rows: repeat(4, auto);125    row-gap: 18px;126  }127  .krow {128    display: flex;129    justify-content: center;130    gap: 12px;131    padding: 0 8px;132  }133  .key {134    background: #2b2f33;135    color: #fff;136    min-width: 90px;137    height: 120px;138    border-radius: 14px;139    display: flex;140    align-items: center;141    justify-content: center;142    font-size: 42px;143    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25);144  }145  .key.small { min-width: 80px; }146  .key.wide { min-width: 140px; }147  .space {148    flex: 1;149    height: 120px;150    background: #2b2f33;151    border-radius: 14px;152    display: flex;153    align-items: center;154    justify-content: center;155    color: #bbb;156    font-size: 36px;157  }158  .circle-btn {159    width: 120px;160    height: 120px;161    border-radius: 60px;162    background: #a7e2c0;163    color: #0b3b28;164    display: flex;165    align-items: center;166    justify-content: center;167  }168  .circle-btn.gray {169    background: #2b2f33;170    color: #e0e0e0;171  }172  .home-indicator {173    position: absolute;174    bottom: 10px;175    left: 50%;176    transform: translateX(-50%);177    width: 200px;178    height: 10px;179    background: #e8e8e8;180    border-radius: 6px;181  }182 183  /* Helper alignment for second row */184  .pad-side { padding: 0 46px; }185 186  /* SVG icon size helpers */187  .icon { display: flex; align-items: center; justify-content: center; }188</style>189</head>190<body>191<div id="render-target">192 193  <!-- Status Bar -->194  <div class="status-bar">195    <div class="status-left">9:19</div>196    <div class="status-right">197      <!-- Simple small icons -->198      <svg width="30" height="30" viewBox="0 0 24 24"><path d="M3 8l6-5 6 5v10H3z" fill="#757575"/></svg>199      <svg width="30" height="30" viewBox="0 0 24 24"><path d="M2 12l4-4 4 4" stroke="#757575" stroke-width="2" fill="none"/></svg>200      <svg width="30" height="30" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#757575" stroke-width="2" fill="none"/></svg>201      <span class="dot"></span>202      <svg width="38" height="30" viewBox="0 0 24 24">203        <path d="M2 18h2a8 8 0 0 1 16 0h2" stroke="#757575" stroke-width="2" fill="none"/>204        <path d="M18 18v2a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2v-2" fill="#757575"/>205      </svg>206      <span style="color:#757575;">94%</span>207    </div>208  </div>209 210  <!-- Search area -->211  <div class="search-wrap">212    <div class="search-pill">213      <div class="icon">214        <svg width="40" height="40" viewBox="0 0 24 24">215          <circle cx="11" cy="11" r="7" stroke="#9e9e9e" stroke-width="2" fill="none"></circle>216          <line x1="16" y1="16" x2="22" y2="22" stroke="#9e9e9e" stroke-width="2"></line>217        </svg>218      </div>219      <div class="search-text">Navy Blue formal shirt for men</div>220      <div class="icon">221        <svg width="38" height="38" viewBox="0 0 24 24">222          <circle cx="12" cy="12" r="11" fill="#e0e0e0"></circle>223          <path d="M8 8l8 8M16 8l-8 8" stroke="#616161" stroke-width="2" stroke-linecap="round"></path>224        </svg>225      </div>226    </div>227    <div class="cancel-link">Cancel</div>228  </div>229 230  <!-- Suggestions section -->231  <div class="suggestions">232    <div class="suggest-title">Suggest words</div>233    <div class="suggest-item">Navy Blue formal shirt for men</div>234  </div>235 236  <!-- Keyboard -->237  <div class="keyboard">238    <!-- suggestion row on keyboard -->239    <div class="kb-suggestions">240      <div class="icon">241        <svg width="40" height="40" viewBox="0 0 24 24">242          <rect x="3" y="5" width="18" height="14" rx="2" fill="#cfd8dc"></rect>243          <path d="M6 9h2m3 0h2m3 0h2M6 13h6m3 0h2" stroke="#141718" stroke-width="2"></path>244        </svg>245      </div>246      <div>stylish</div>247      <div class="pipe">|</div>248      <div>and</div>249      <div class="pipe">|</div>250      <div>combo</div>251      <div style="margin-left:auto" class="icon">252        <svg width="44" height="44" viewBox="0 0 24 24">253          <rect x="9" y="3" width="6" height="12" rx="3" fill="#a7e2c0"></rect>254          <path d="M5 11a7 7 0 0 0 14 0" stroke="#a7e2c0" stroke-width="2" fill="none"></path>255          <line x1="12" y1="18" x2="12" y2="22" stroke="#a7e2c0" stroke-width="2"></line>256        </svg>257      </div>258    </div>259 260    <div class="krows">261      <!-- Row 1 -->262      <div class="krow">263        <div class="key">q</div>264        <div class="key">w</div>265        <div class="key">e</div>266        <div class="key">r</div>267        <div class="key">t</div>268        <div class="key">y</div>269        <div class="key">u</div>270        <div class="key">i</div>271        <div class="key">o</div>272        <div class="key">p</div>273      </div>274 275      <!-- Row 2 -->276      <div class="krow pad-side">277        <div class="key">a</div>278        <div class="key">s</div>279        <div class="key">d</div>280        <div class="key">f</div>281        <div class="key">g</div>282        <div class="key">h</div>283        <div class="key">j</div>284        <div class="key">k</div>285        <div class="key">l</div>286      </div>287 288      <!-- Row 3 -->289      <div class="krow">290        <div class="key wide">⇧</div>291        <div class="key">z</div>292        <div class="key">x</div>293        <div class="key">c</div>294        <div class="key">v</div>295        <div class="key">b</div>296        <div class="key">n</div>297        <div class="key">m</div>298        <div class="key wide">⌫</div>299      </div>300 301      <!-- Bottom Row -->302      <div class="krow">303        <div class="circle-btn" style="background:#a7e2c0;color:#1e3b2c;">?123</div>304        <div class="circle-btn gray">☺</div>305        <div class="key small">,</div>306        <div class="space">space</div>307        <div class="key small">.</div>308        <div class="circle-btn" title="Search">309          <svg width="44" height="44" viewBox="0 0 24 24">310            <circle cx="11" cy="11" r="7" stroke="#0b3b28" stroke-width="2" fill="none"></circle>311            <line x1="16" y1="16" x2="22" y2="22" stroke="#0b3b28" stroke-width="2"></line>312          </svg>313        </div>314      </div>315    </div>316  </div>317 318  <div class="home-indicator"></div>319</div>320</body>321</html>