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 Search UI with Keyboard</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Roboto, "Segoe UI", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 100%;23    height: 140px;24    background: #D9D9D9;25    color: #3A3A3A;26    font-size: 38px;27  }28  .status-inner {29    display: flex;30    align-items: center;31    justify-content: space-between;32    height: 100%;33    padding: 0 36px;34  }35  .status-right {36    display: flex;37    align-items: center;38    gap: 22px;39  }40  .status-icon {41    width: 44px; height: 44px; border-radius: 10px; background: #EFEFEF;42  }43  .wifi {44    width: 40px; height: 40px;45    position: relative;46  }47  .wifi::before {48    content: "";49    position: absolute;50    inset: 8px;51    border: 4px solid #666;52    border-color: #666 transparent transparent transparent;53    border-radius: 50%;54    transform: rotate(45deg);55  }56  .battery {57    width: 50px; height: 26px; border: 3px solid #666; border-radius: 6px; position: relative;58  }59  .battery::after {60    content: ""; position: absolute; right: -8px; top: 7px; width: 8px; height: 12px; background: #666; border-radius: 2px;61  }62 63  /* Search bar */64  .search-wrap {65    position: absolute;66    top: 170px;67    left: 24px;68    right: 24px;69    height: 120px;70    background: #FFFFFF;71    border-radius: 28px;72    box-shadow: 0 6px 22px rgba(0,0,0,0.15);73    display: flex;74    align-items: center;75    padding: 0 28px;76    gap: 24px;77  }78  .icon {79    width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center;80  }81  .search-text {82    flex: 1;83    font-size: 38px;84    color: #222;85    white-space: nowrap;86    overflow: hidden;87    text-overflow: ellipsis;88  }89  .caret {90    width: 3px; height: 44px; background: #222;91    margin-left: 4px;92    border-radius: 2px;93  }94  .clear-btn {95    width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; cursor: default;96  }97 98  /* Keyboard */99  .keyboard {100    position: absolute;101    left: 0;102    right: 0;103    bottom: 60px;104    height: 860px;105    background: #1F1F21;106    color: #fff;107    border-top-left-radius: 22px;108    border-top-right-radius: 22px;109    box-shadow: 0 -8px 24px rgba(0,0,0,0.25);110  }111  .kb-suggestions {112    height: 110px;113    display: flex;114    align-items: center;115    padding: 0 26px;116    gap: 26px;117    color: #EDEDED;118    font-size: 36px;119  }120  .kb-dot {121    width: 66px; height: 66px; border-radius: 33px; background: #2A2A2C; display: inline-flex; align-items: center; justify-content: center;122  }123  .suggestion {124    padding: 10px 18px;125    border-radius: 16px;126  }127  .divider {128    height: 40px; width: 2px; background: #5A5A5A;129  }130  .kb-mic {131    margin-left: auto;132    width: 66px; height: 66px; border-radius: 33px; background: #2A2A2C; display: inline-flex; align-items: center; justify-content: center;133  }134 135  .kb-rows {136    padding: 0 18px 18px;137  }138  .row {139    display: flex;140    justify-content: center;141    gap: 18px;142    margin-bottom: 22px;143  }144  .key {145    height: 118px;146    min-width: 90px;147    padding: 0 16px;148    border-radius: 16px;149    background: #2C2C2F;150    display: flex; align-items: center; justify-content: center;151    font-size: 44px; color: #fff;152  }153  .key.wide { min-width: 132px; }154  .key.extra-wide { min-width: 460px; }155  .key.blue { background: #BDD6FF; color: #1A1A1A; }156  .key.small { font-size: 34px; }157  .key.icon { padding: 0; min-width: 120px; }158 159  /* Gesture bar */160  .gesture-bar {161    position: absolute;162    bottom: 18px; left: 50%;163    transform: translateX(-50%);164    width: 260px; height: 10px;165    background: #CFCFCF; border-radius: 6px;166  }167</style>168</head>169<body>170<div id="render-target">171 172  <!-- Status Bar -->173  <div class="status-bar">174    <div class="status-inner">175      <div class="time">8:18</div>176      <div class="status-right">177        <div class="status-icon">B</div>178        <div class="status-icon">N</div>179        <div class="status-icon">M</div>180        <div class="status-icon">•</div>181        <div class="wifi"></div>182        <div class="battery"></div>183      </div>184    </div>185  </div>186 187  <!-- Search Field -->188  <div class="search-wrap">189    <div class="icon">190      <svg width="44" height="44" viewBox="0 0 24 24">191        <circle cx="10" cy="10" r="7" stroke="#606060" stroke-width="2" fill="none"></circle>192        <line x1="15" y1="15" x2="21" y2="21" stroke="#606060" stroke-width="2" stroke-linecap="round"></line>193      </svg>194    </div>195    <div class="search-text">k track sole contrast ankle boots for women</div>196    <div class="caret"></div>197    <div class="clear-btn">198      <svg width="40" height="40" viewBox="0 0 24 24">199        <line x1="6" y1="6" x2="18" y2="18" stroke="#606060" stroke-width="2" stroke-linecap="round"></line>200        <line x1="18" y1="6" x2="6" y2="18" stroke="#606060" stroke-width="2" stroke-linecap="round"></line>201      </svg>202    </div>203  </div>204 205  <!-- Keyboard -->206  <div class="keyboard">207    <div class="kb-suggestions">208      <div class="kb-dot">209        <svg width="28" height="28" viewBox="0 0 24 24">210          <rect x="3" y="3" width="6" height="6" fill="#9C9C9C"></rect>211          <rect x="15" y="3" width="6" height="6" fill="#9C9C9C"></rect>212          <rect x="3" y="15" width="6" height="6" fill="#9C9C9C"></rect>213          <rect x="15" y="15" width="6" height="6" fill="#9C9C9C"></rect>214        </svg>215      </div>216      <div class="suggestion">women</div>217      <div class="divider"></div>218      <div class="suggestion">womens</div>219      <div class="divider"></div>220      <div class="suggestion">women's</div>221      <div class="kb-mic">222        <svg width="28" height="28" viewBox="0 0 24 24">223          <rect x="9" y="4" width="6" height="10" rx="3" fill="#BDBDBD"></rect>224          <path d="M5 11c0 4 4 6 7 6s7-2 7-6" stroke="#BDBDBD" stroke-width="2" fill="none"></path>225          <line x1="12" y1="17" x2="12" y2="21" stroke="#BDBDBD" stroke-width="2"></line>226        </svg>227      </div>228    </div>229 230    <div class="kb-rows">231      <!-- Row 1 -->232      <div class="row">233        <div class="key">q</div>234        <div class="key">w</div>235        <div class="key">e</div>236        <div class="key">r</div>237        <div class="key">t</div>238        <div class="key">y</div>239        <div class="key">u</div>240        <div class="key">i</div>241        <div class="key">o</div>242        <div class="key">p</div>243      </div>244 245      <!-- Row 2 -->246      <div class="row">247        <div class="key">a</div>248        <div class="key">s</div>249        <div class="key">d</div>250        <div class="key">f</div>251        <div class="key">g</div>252        <div class="key">h</div>253        <div class="key">j</div>254        <div class="key">k</div>255        <div class="key">l</div>256      </div>257 258      <!-- Row 3 -->259      <div class="row">260        <div class="key wide">261          <svg width="36" height="36" viewBox="0 0 24 24">262            <path d="M8 13l4-4 4 4" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>263          </svg>264        </div>265        <div class="key">z</div>266        <div class="key">x</div>267        <div class="key">c</div>268        <div class="key">v</div>269        <div class="key">b</div>270        <div class="key">n</div>271        <div class="key">m</div>272        <div class="key wide">273          <svg width="36" height="36" viewBox="0 0 24 24">274            <path d="M4 7h12" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>275            <path d="M4 12h8" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>276            <path d="M4 17h6" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>277          </svg>278        </div>279      </div>280 281      <!-- Row 4 -->282      <div class="row">283        <div class="key wide small">?123</div>284        <div class="key wide small">,</div>285        <div class="key extra-wide">space</div>286        <div class="key wide small">.</div>287        <div class="key icon blue">288          <svg width="40" height="40" viewBox="0 0 24 24">289            <circle cx="10" cy="10" r="7" stroke="#1A1A1A" stroke-width="2" fill="none"></circle>290            <line x1="15" y1="15" x2="21" y2="21" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round"></line>291          </svg>292        </div>293      </div>294    </div>295  </div>296 297  <!-- Gesture Nav Bar -->298  <div class="gesture-bar"></div>299 300</div>301</body>302</html>