GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile Search UI - Ergonomic Chair</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #FFFFFF;13    border-radius: 0;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 100px;23    padding: 0 32px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    box-sizing: border-box;28    color: #4a4a4a;29    font-weight: 600;30    font-size: 34px;31  }32  .status-left {33    display: flex;34    gap: 18px;35    align-items: center;36  }37  .status-right {38    display: flex;39    gap: 24px;40    align-items: center;41  }42  .icon-small { width: 36px; height: 36px; }43 44  /* Search area */45  .search-wrap {46    position: absolute;47    top: 110px;48    left: 0;49    width: 1080px;50    padding: 0 32px;51    box-sizing: border-box;52  }53  .search-row {54    display: flex;55    align-items: center;56    gap: 24px;57  }58  .search-field {59    flex: 1;60    height: 96px;61    background: #F1F1F1;62    border-radius: 48px;63    display: flex;64    align-items: center;65    padding: 0 24px 0 24px;66    box-sizing: border-box;67    position: relative;68  }69  .search-icon {70    width: 46px;71    height: 46px;72    margin: 0 12px 0 8px;73  }74  .search-text {75    flex: 1;76    font-size: 42px;77    color: #222;78  }79  .search-clear {80    width: 56px;81    height: 56px;82    background: #E4E4E4;83    border-radius: 28px;84    display: flex;85    align-items: center;86    justify-content: center;87    margin-right: 8px;88  }89  .cancel-btn {90    color: #7A7A7A;91    font-size: 40px;92  }93 94  /* Content area – empty white area */95  .content-area {96    position: absolute;97    top: 230px;98    left: 0;99    width: 1080px;100    bottom: 0;101    background: #FFFFFF;102  }103 104  /* Keyboard block */105  .keyboard {106    position: absolute;107    left: 0;108    bottom: 0;109    width: 1080px;110    height: 940px;111    background: #1B1B1B;112    color: #fff;113    border-top-left-radius: 24px;114    border-top-right-radius: 24px;115    box-sizing: border-box;116    padding-bottom: 16px;117  }118  .suggest-strip {119    height: 110px;120    background: #202020;121    display: flex;122    align-items: center;123    padding: 0 24px;124    box-sizing: border-box;125    gap: 28px;126    color: #cfcfcf;127    font-size: 40px;128  }129  .chip {130    color: #dcdcdc;131    opacity: 0.95;132  }133  .chip-divider {134    width: 2px;135    height: 50px;136    background: #404040;137  }138  .emoji-chip {139    width: 70px;140    height: 70px;141    background: #2b2b2b;142    border-radius: 14px;143    display: flex;144    align-items: center;145    justify-content: center;146    font-size: 44px;147  }148  .strip-spacer { flex: 1; }149  .mic-round {150    width: 86px; height: 86px; background: #2b2b2b; border-radius: 43px;151    display: flex; align-items: center; justify-content: center;152  }153 154  .rows { padding: 18px 18px 0 18px; box-sizing: border-box; }155  .row {156    display: flex;157    justify-content: center;158    gap: 14px;159    margin: 14px 0;160  }161  .key {162    width: 88px;163    height: 110px;164    background: #2E2E2E;165    border-radius: 18px;166    color: #fff;167    font-size: 44px;168    display: flex;169    align-items: center;170    justify-content: center;171    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.05);172  }173  .key.small { width: 96px; }174  .key.wide { width: 180px; }175  .key.space { width: 500px; }176  .key.back { width: 140px; }177  .key.round { border-radius: 26px; }178  .row-bottom { padding: 0 12px; }179  .key.dark { background: #272727; }180  .return-key {181    width: 124px; height: 124px; background: #3A3A3A; border-radius: 62px;182    display: flex; align-items: center; justify-content: center;183  }184  .subtle { color: #9f9f9f; font-size: 34px; }185 186  /* General small helpers */187  .muted { color: #7c7c7c; }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">196      <div>11:16</div>197      <div class="muted" style="font-weight:500;">S3</div>198    </div>199    <div class="status-right">200      <!-- Wi-Fi -->201      <svg class="icon-small" viewBox="0 0 24 24" fill="#4a4a4a">202        <path d="M2 8c5.5-4.7 14.5-4.7 20 0l-2 2c-4.4-3.6-11.6-3.6-16 0L2 8z"></path>203        <path d="M6 12c3.3-2.8 8.7-2.8 12 0l-2 2c-2.2-1.8-5.8-1.8-8 0l-2-2z"></path>204        <circle cx="12" cy="18" r="2"></circle>205      </svg>206      <!-- Battery -->207      <svg class="icon-small" viewBox="0 0 28 16">208        <rect x="1" y="3" width="22" height="10" rx="2" fill="#4a4a4a"></rect>209        <rect x="3" y="5" width="16" height="6" rx="1" fill="#9ad36b"></rect>210        <rect x="24" y="6" width="3" height="4" rx="1" fill="#4a4a4a"></rect>211      </svg>212    </div>213  </div>214 215  <!-- Search Bar -->216  <div class="search-wrap">217    <div class="search-row">218      <div class="search-field">219        <svg class="search-icon" viewBox="0 0 24 24" fill="#8a8a8a">220          <circle cx="10" cy="10" r="7" stroke="none"></circle>221          <rect x="14" y="14" width="8" height="3" rx="1.5" transform="rotate(45 14 14)"></rect>222        </svg>223        <div class="search-text">Ergonomic Chair</div>224        <div class="search-clear">225          <svg width="28" height="28" viewBox="0 0 24 24" fill="#6d6d6d">226            <circle cx="12" cy="12" r="11" fill="#E9E9E9"></circle>227            <path d="M8 8l8 8M16 8l-8 8" stroke="#8a8a8a" stroke-width="2" stroke-linecap="round"></path>228          </svg>229        </div>230      </div>231      <div class="cancel-btn">Cancel</div>232    </div>233  </div>234 235  <!-- Main area (blank) -->236  <div class="content-area"></div>237 238  <!-- Keyboard -->239  <div class="keyboard">240 241    <!-- Suggestion strip -->242    <div class="suggest-strip">243      <div class="chip">Chair</div>244      <div class="chip-divider"></div>245      <div class="chip">Chairs</div>246      <div class="chip-divider"></div>247      <div class="emoji-chip">💺</div>248      <div class="emoji-chip">🪑</div>249      <div class="strip-spacer"></div>250      <div class="mic-round">251        <svg width="40" height="40" viewBox="0 0 24 24" fill="#dcdcdc">252          <rect x="9" y="4" width="6" height="10" rx="3"></rect>253          <path d="M5 12a7 7 0 0 0 14 0" stroke="#dcdcdc" stroke-width="2" fill="none"></path>254          <rect x="11" y="18" width="2" height="3" rx="1" fill="#dcdcdc"></rect>255        </svg>256      </div>257    </div>258 259    <!-- Keys -->260    <div class="rows">261 262      <!-- Row 1 -->263      <div class="row">264        <div class="key">q</div>265        <div class="key">w</div>266        <div class="key">e</div>267        <div class="key">r</div>268        <div class="key">t</div>269        <div class="key">y</div>270        <div class="key">u</div>271        <div class="key">i</div>272        <div class="key">o</div>273        <div class="key">p</div>274      </div>275 276      <!-- Row 2 -->277      <div class="row">278        <div class="key">a</div>279        <div class="key">s</div>280        <div class="key">d</div>281        <div class="key">f</div>282        <div class="key">g</div>283        <div class="key">h</div>284        <div class="key">j</div>285        <div class="key">k</div>286        <div class="key">l</div>287      </div>288 289      <!-- Row 3 -->290      <div class="row">291        <div class="key wide">292          <svg width="38" height="38" viewBox="0 0 24 24" fill="#fff">293            <path d="M12 4l4 6h-3v6h-2V10H8l4-6z"></path>294          </svg>295        </div>296        <div class="key">z</div>297        <div class="key">x</div>298        <div class="key">c</div>299        <div class="key">v</div>300        <div class="key">b</div>301        <div class="key">n</div>302        <div class="key">m</div>303        <div class="key back">304          <svg width="42" height="42" viewBox="0 0 24 24" fill="#fff">305            <path d="M6 7l-4 5 4 5h10a3 3 0 0 0 0-6H9" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>306          </svg>307        </div>308      </div>309 310      <!-- Row 4 (bottom) -->311      <div class="row row-bottom" style="justify-content: space-between; align-items:center;">312        <div style="display:flex; gap:14px;">313          <div class="key wide">?123</div>314          <div class="key round">315            <span class="subtle">,</span>316          </div>317          <div class="key round">318            <span style="font-size:40px;">😊</span>319          </div>320        </div>321        <div class="key space"> </div>322        <div style="display:flex; gap:14px;">323          <div class="key round">324            <span style="font-size:48px;">.</span>325          </div>326          <div class="return-key">327            <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff">328              <circle cx="11" cy="11" r="7" fill="none" stroke="#fff" stroke-width="2"></circle>329              <rect x="14" y="14" width="7" height="2.6" rx="1.3" transform="rotate(45 14 14)" fill="#fff"></rect>330            </svg>331          </div>332        </div>333      </div>334 335    </div>336  </div>337 338</div>339</body>340</html>