GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Search Product UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, 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: 150px;22    background: #000000;23    color: #ffffff;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 40px;28    box-sizing: border-box;29  }30  .status-left {31    font-size: 44px;32    letter-spacing: 1px;33  }34  .status-right {35    display: flex;36    align-items: center;37    gap: 28px;38  }39  .status-icon svg { fill: #ffffff; }40 41  /* Header with search */42  .header {43    position: absolute;44    top: 150px;45    left: 0;46    width: 1080px;47    height: 160px;48    background: #ffffff;49    display: flex;50    align-items: center;51    padding: 0 36px;52    box-sizing: border-box;53    border-bottom: 1px solid #e9e9e9;54  }55  .back-btn {56    width: 90px;57    height: 90px;58    display: flex;59    align-items: center;60    justify-content: center;61  }62  .search-field {63    margin-left: 8px;64    font-size: 56px;65    color: #3a3a3a;66    display: flex;67    align-items: center;68  }69  .caret {70    width: 4px;71    height: 64px;72    background: #1a1a1a;73    margin-right: 16px;74    border-radius: 2px;75  }76  .placeholder {77    color: #8c8c8c;78  }79 80  /* History list */81  .history {82    position: absolute;83    top: 340px;84    left: 0;85    width: 100%;86    padding: 0 48px;87    box-sizing: border-box;88  }89  .history-row {90    display: flex;91    align-items: center;92    justify-content: space-between;93    padding: 42px 0;94    border-bottom: 0px solid transparent;95  }96  .history-label {97    font-size: 54px;98    color: #131313;99  }100  .clear-btn {101    font-size: 44px;102    color: #7a7a7a;103    background: none;104    border: none;105    padding: 18px 0;106    cursor: pointer;107  }108 109  /* Action pills */110  .actions {111    position: absolute;112    bottom: 950px; /* above keyboard */113    left: 0;114    width: 100%;115    display: flex;116    justify-content: space-evenly;117    padding: 0 40px;118    box-sizing: border-box;119  }120  .pill {121    width: 480px;122    height: 160px;123    background: #121212;124    border-radius: 120px;125    color: #ffffff;126    display: flex;127    align-items: center;128    justify-content: center;129    gap: 22px;130    box-shadow: 0 8px 20px rgba(0,0,0,0.18);131  }132  .pill svg { fill: #ffffff; }133 134  /* Keyboard (simplified) */135  .keyboard {136    position: absolute;137    bottom: 0;138    left: 0;139    width: 1080px;140    height: 950px;141    background: #0f1416;142    border-top-left-radius: 0;143    border-top-right-radius: 0;144    box-shadow: inset 0 8px 24px rgba(0,0,0,0.45);145  }146  .kb-top-bar {147    height: 110px;148    display: flex;149    align-items: center;150    justify-content: space-between;151    padding: 0 40px;152    color: #b9c7c0;153    font-size: 40px;154  }155  .kb-rows {156    padding: 20px 30px 0 30px;157    box-sizing: border-box;158  }159  .kb-row {160    display: flex;161    gap: 18px;162    margin-bottom: 26px;163    justify-content: center;164  }165  .key {166    width: 86px;167    height: 120px;168    background: #252b2e;169    border-radius: 18px;170    color: #cfd8dc;171    display: flex;172    align-items: center;173    justify-content: center;174    font-size: 44px;175    box-shadow: inset 0 2px 0 rgba(255,255,255,0.04);176  }177  .key.large { width: 160px; }178  .space-row {179    margin-top: 18px;180    display: flex;181    align-items: center;182    justify-content: center;183    gap: 18px;184  }185  .space { width: 520px; height: 120px; background: #252b2e; border-radius: 22px; }186  .enter { width: 165px; height: 120px; background: #9be7c6; border-radius: 24px; }187</style>188</head>189<body>190<div id="render-target">191  <!-- Status Bar -->192  <div class="status-bar">193    <div class="status-left">1:25</div>194    <div class="status-right">195      <div class="status-icon">196        <!-- WiFi -->197        <svg width="44" height="44" viewBox="0 0 24 24">198          <path d="M12 18c-.6 0-1 .4-1 1s.4 1 1 1 1-.4 1-1-.4-1-1-1zm-4-3c2.2-2.2 5.8-2.2 8 0l1.4-1.4c-3-3-7.8-3-10.8 0L8 15zm-4-4c4.4-4.4 11.6-4.4 16 0l1.4-1.4c-5.2-5.2-13.6-5.2-18.8 0L4 11z"/>199        </svg>200      </div>201      <div class="status-icon">202        <!-- Battery -->203        <svg width="60" height="44" viewBox="0 0 28 24">204          <rect x="2" y="5" width="20" height="14" rx="2" ry="2"></rect>205          <rect x="23" y="9" width="3" height="6"></rect>206          <rect x="4" y="7" width="12" height="10" fill="#ffffff"></rect>207        </svg>208      </div>209      <div class="status-icon">210        <!-- Signal -->211        <svg width="44" height="44" viewBox="0 0 24 24">212          <path d="M3 18h2V6H3v12zm4 0h2V10H7v8zm4 0h2V3h-2v15zm4 0h2V13h-2v5z"/>213        </svg>214      </div>215    </div>216  </div>217 218  <!-- Header with search -->219  <div class="header">220    <div class="back-btn">221      <svg width="56" height="56" viewBox="0 0 24 24">222        <path d="M15.5 5.5L9 12l6.5 6.5-2 2L5 12l8.5-8.5 2 2z" fill="#000"></path>223      </svg>224    </div>225    <div class="search-field">226      <div class="caret"></div>227      <div class="placeholder">Search Product</div>228    </div>229  </div>230 231  <!-- History list -->232  <div class="history">233    <div class="history-row">234      <div class="history-label">Black sneakers</div>235      <button class="clear-btn">Clear All</button>236    </div>237    <div class="history-row">238      <div class="history-label">Nike shoes.</div>239    </div>240    <div class="history-row">241      <div class="history-label">Sports shoes</div>242    </div>243  </div>244 245  <!-- Action pills -->246  <div class="actions">247    <div class="pill">248      <svg width="52" height="52" viewBox="0 0 24 24">249        <path d="M12 7a5 5 0 100 10 5 5 0 000-10zm9-1h-4l-1-2H8L7 6H3c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2z"/>250      </svg>251      <span style="font-size:48px;">Camera</span>252    </div>253    <div class="pill">254      <svg width="52" height="52" viewBox="0 0 24 24">255        <path d="M21 19a2 2 0 0 1-2 2H5l-4 2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v14zM8 13l2.5 3 3.5-5 4.5 7H5l3-5z"/>256      </svg>257      <span style="font-size:48px;">Photos</span>258    </div>259  </div>260 261  <!-- Keyboard -->262  <div class="keyboard">263    <div class="kb-top-bar">264      <div>◻︎</div>265      <div>GIF</div>266      <div>⚙︎</div>267      <div>⌁</div>268      <div>🎨</div>269      <div>🎤</div>270    </div>271    <div class="kb-rows">272      <div class="kb-row">273        <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>274      </div>275      <div class="kb-row">276        <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>277      </div>278      <div class="kb-row">279        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div><div class="key large">⌫</div>280      </div>281      <div class="space-row">282        <div class="key large">?123</div>283        <div class="key">,</div>284        <div class="space"></div>285        <div class="key">.</div>286        <div class="enter"></div>287      </div>288    </div>289  </div>290</div>291</body>292</html>