GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile Search UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #FFFFFF;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 120px;22    padding: 28px 36px;23    box-sizing: border-box;24    color: #2E2E2E;25    display: flex;26    align-items: center;27    justify-content: space-between;28  }29  .status-left {30    display: flex;31    align-items: center;32    gap: 16px;33    font-size: 42px;34    font-weight: 600;35  }36  .status-right {37    display: flex;38    align-items: center;39    gap: 22px;40  }41  .sys-icon svg { width: 48px; height: 48px; }42 43  /* Top controls */44  .top-controls {45    position: absolute;46    top: 120px;47    left: 0;48    width: 1080px;49    height: 140px;50    display: flex;51    align-items: center;52    padding: 0 24px;53    box-sizing: border-box;54    gap: 20px;55  }56  .back-btn {57    width: 80px;58    height: 80px;59    display: flex;60    align-items: center;61    justify-content: center;62  }63  .back-btn svg { width: 56px; height: 56px; }64  .search-pill {65    flex: 1;66    height: 100px;67    background: #F3F4F6;68    border-radius: 50px;69    display: flex;70    align-items: center;71    padding: 0 28px;72    box-sizing: border-box;73    gap: 18px;74  }75  .search-pill .text {76    font-size: 42px;77    color: #1F1F1F;78    font-weight: 600;79  }80  .chip-x {81    width: 46px;82    height: 46px;83    border-radius: 23px;84    background: #E6E7EB;85    color: #6E6E74;86    font-size: 32px;87    display: flex;88    align-items: center;89    justify-content: center;90    margin-left: 4px;91  }92  .divider {93    width: 2px;94    height: 46px;95    background: #D4D6DB;96    margin: 0 8px 0 2px;97  }98  .loc {99    display: flex;100    align-items: center;101    gap: 14px;102    color: #2A2A2A;103    font-size: 38px;104    font-weight: 600;105  }106  .loc svg { width: 42px; height: 42px; fill: #000; }107  .cart-btn {108    width: 90px;109    height: 90px;110    display: flex;111    align-items: center;112    justify-content: center;113  }114  .cart-btn svg { width: 60px; height: 60px; }115 116  /* Content area (blank white) */117  .content {118    position: absolute;119    top: 260px;120    left: 0;121    width: 1080px;122    height: 1200px;123    background: #FFFFFF;124  }125 126  /* Keyboard */127  .keyboard {128    position: absolute;129    bottom: 90px;130    left: 0;131    width: 1080px;132    height: 950px;133    background: #1F2025;134    padding: 40px 36px;135    box-sizing: border-box;136    color: #F3F3F3;137  }138  .keys-row {139    display: grid;140    grid-auto-flow: column;141    grid-auto-columns: 1fr;142    gap: 20px;143    margin-bottom: 30px;144  }145  .keys-row.ten { grid-template-columns: repeat(10, 1fr); }146  .keys-row.nine { grid-template-columns: repeat(9, 1fr); }147  .keys-row.flex { display: flex; gap: 20px; }148 149  .key {150    background: #2A2B31;151    border-radius: 20px;152    height: 120px;153    display: flex;154    align-items: center;155    justify-content: center;156    font-size: 44px;157    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);158  }159  .key.special { background: #3A3B40; color: #EDEDED; }160  .key.space { flex: 1; }161  .key-round {162    width: 140px;163    height: 140px;164    background: #D7DAF6;165    color: #1E2340;166    border-radius: 70px;167    display: flex;168    align-items: center;169    justify-content: center;170  }171  .key-round svg { width: 56px; height: 56px; }172 173  /* Home indicator */174  .home-indicator {175    position: absolute;176    bottom: 24px;177    left: 50%;178    transform: translateX(-50%);179    width: 640px;180    height: 10px;181    background: #DADADA;182    border-radius: 5px;183  }184</style>185</head>186<body>187<div id="render-target">188 189  <!-- Status Bar -->190  <div class="status-bar">191    <div class="status-left">192      <div>5:46</div>193      <!-- simple play glyph -->194      <div class="sys-icon">195        <svg viewBox="0 0 24 24">196          <rect x="1" y="1" width="22" height="22" rx="4" fill="#E74C3C"></rect>197          <polygon points="9,6 18,12 9,18" fill="#FFFFFF"></polygon>198        </svg>199      </div>200    </div>201    <div class="status-right">202      <div class="sys-icon">203        <!-- WiFi -->204        <svg viewBox="0 0 24 24">205          <path d="M2 8c5-4 15-4 20 0" stroke="#3A3A3A" stroke-width="2" fill="none"/>206          <path d="M5 12c4-3 10-3 14 0" stroke="#3A3A3A" stroke-width="2" fill="none"/>207          <path d="M9 16c2-2 4-2 6 0" stroke="#3A3A3A" stroke-width="2" fill="none"/>208          <circle cx="12" cy="19" r="2" fill="#3A3A3A"/>209        </svg>210      </div>211      <div class="sys-icon">212        <!-- Battery -->213        <svg viewBox="0 0 26 24">214          <rect x="2" y="6" width="18" height="12" rx="2" stroke="#3A3A3A" stroke-width="2" fill="none"></rect>215          <rect x="4" y="8" width="14" height="8" fill="#3A3A3A"></rect>216          <rect x="22" y="9" width="3" height="6" rx="1" fill="#3A3A3A"></rect>217        </svg>218      </div>219    </div>220  </div>221 222  <!-- Top Controls -->223  <div class="top-controls">224    <div class="back-btn">225      <svg viewBox="0 0 24 24">226        <path d="M15 4L7 12l8 8" stroke="#2E2E2E" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>227      </svg>228    </div>229 230    <div class="search-pill">231      <svg viewBox="0 0 24 24" width="48" height="48">232        <circle cx="10" cy="10" r="7" stroke="#5A5A5A" stroke-width="2" fill="none"></circle>233        <line x1="15" y1="15" x2="22" y2="22" stroke="#5A5A5A" stroke-width="2"></line>234      </svg>235      <div class="text">Running shoes</div>236      <div class="chip-x">×</div>237      <div class="divider"></div>238      <div class="loc">239        <svg viewBox="0 0 24 24">240          <path d="M12 2c-4 0-7 3-7 7 0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7zm0 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path>241        </svg>242        <span>Michigan, USA</span>243      </div>244    </div>245 246    <div class="cart-btn">247      <svg viewBox="0 0 24 24">248        <path d="M3 5h2l2 12h10l2-8H7" stroke="#2E2E2E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>249        <circle cx="10" cy="20" r="2" fill="#2E2E2E"></circle>250        <circle cx="17" cy="20" r="2" fill="#2E2E2E"></circle>251      </svg>252    </div>253  </div>254 255  <div class="content"></div>256 257  <!-- Keyboard -->258  <div class="keyboard">259    <!-- Numbers -->260    <div class="keys-row ten">261      <div class="key">1</div>262      <div class="key">2</div>263      <div class="key">3</div>264      <div class="key">4</div>265      <div class="key">5</div>266      <div class="key">6</div>267      <div class="key">7</div>268      <div class="key">8</div>269      <div class="key">9</div>270      <div class="key">0</div>271    </div>272 273    <!-- Row: qwertyuiop -->274    <div class="keys-row ten">275      <div class="key">q</div>276      <div class="key">w</div>277      <div class="key">e</div>278      <div class="key">r</div>279      <div class="key">t</div>280      <div class="key">y</div>281      <div class="key">u</div>282      <div class="key">i</div>283      <div class="key">o</div>284      <div class="key">p</div>285    </div>286 287    <!-- Row: asdfghjkl -->288    <div class="keys-row nine">289      <div class="key">a</div>290      <div class="key">s</div>291      <div class="key">d</div>292      <div class="key">f</div>293      <div class="key">g</div>294      <div class="key">h</div>295      <div class="key">j</div>296      <div class="key">k</div>297      <div class="key">l</div>298    </div>299 300    <!-- Row: shift + zxcvbnm + backspace -->301    <div class="keys-row flex">302      <div class="key special" style="width:140px;">⌂</div>303      <div class="key">z</div>304      <div class="key">x</div>305      <div class="key">c</div>306      <div class="key">v</div>307      <div class="key">b</div>308      <div class="key">n</div>309      <div class="key">m</div>310      <div class="key special" style="width:160px;">⌫</div>311    </div>312 313    <!-- Bottom row: ?123 , space . search -->314    <div class="keys-row flex">315      <div class="key special" style="width:180px;">?123</div>316      <div class="key special" style="width:120px;">,</div>317      <div class="key space"> </div>318      <div class="key special" style="width:120px;">.</div>319      <div class="key-round">320        <svg viewBox="0 0 24 24">321          <circle cx="10" cy="10" r="7" stroke="#1E2340" stroke-width="2" fill="none"></circle>322          <line x1="15" y1="15" x2="22" y2="22" stroke="#1E2340" stroke-width="2"></line>323        </svg>324      </div>325    </div>326  </div>327 328  <div class="home-indicator"></div>329</div>330</body>331</html>