GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Search Page UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FFFFFF;14    box-sizing: border-box;15  }16 17  /* Status bar */18  .status-bar {19    height: 110px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    padding: 0 36px;24    color: #2D2D2D;25    font-size: 34px;26  }27  .sb-left { font-weight: 600; }28  .sb-right {29    display: flex;30    align-items: center;31    gap: 24px;32    color: #555;33    font-size: 28px;34  }35  .sb-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }36 37  /* Search row */38  .search-row {39    padding: 18px 36px 14px;40    display: flex;41    align-items: center;42    gap: 24px;43  }44  .search-input {45    flex: 1;46    height: 110px;47    border-radius: 55px;48    background: #F6F6F6;49    border: 1px solid #E0E0E0;50    display: flex;51    align-items: center;52    padding: 0 30px;53    box-sizing: border-box;54  }55  .search-input svg { width: 44px; height: 44px; fill: none; stroke: #9E9E9E; stroke-width: 3; margin-right: 16px; }56  .search-text {57    font-size: 36px;58    color: #777;59  }60  .cancel-btn {61    font-size: 36px;62    color: #1E88E5;63  }64 65  /* Sections */66  .content {67    padding: 24px 36px 0;68  }69  .section-header {70    display: flex;71    align-items: center;72    justify-content: space-between;73    margin-top: 20px;74    margin-bottom: 22px;75  }76  .section-title {77    font-size: 48px;78    font-weight: 600;79    color: #333;80  }81  .trash-btn {82    width: 52px;83    height: 52px;84    border-radius: 26px;85    background: #F1F1F1;86    border: 1px solid #E1E1E1;87    display: flex;88    align-items: center;89    justify-content: center;90  }91  .trash-btn svg { width: 32px; height: 32px; fill: #9E9E9E; }92 93  .chips {94    display: flex;95    flex-wrap: wrap;96    gap: 18px 18px;97    padding-right: 36px;98    margin-bottom: 28px;99  }100  .chip {101    display: inline-block;102    padding: 20px 26px;103    font-size: 34px;104    color: #666;105    background: #EEEEEE;106    border: 1px solid #D6D6D6;107    border-radius: 999px;108  }109 110  /* Spacer before keyboard */111  .white-space { height: 220px; }112 113  /* Keyboard mock */114  .keyboard {115    position: absolute;116    bottom: 0;117    left: 0;118    width: 1080px;119    height: 900px;120    background: #141414;121    border-top-left-radius: 20px;122    border-top-right-radius: 20px;123    box-sizing: border-box;124    padding: 24px 24px 18px;125    color: #EAEAEA;126  }127  .kb-top {128    display: flex;129    align-items: center;130    gap: 32px;131    padding: 8px 8px 22px;132  }133  .kb-top .tool {134    width: 84px;135    height: 84px;136    background: #1E1E1E;137    border: 1px solid #2A2A2A;138    border-radius: 18px;139    display: flex;140    align-items: center;141    justify-content: center;142    color: #BDBDBD;143    font-size: 28px;144  }145 146  .kb-row {147    display: flex;148    gap: 12px;149    padding: 8px;150    margin-bottom: 16px;151  }152  .key {153    flex: 1;154    height: 118px;155    background: #1E1E1E;156    border: 1px solid #2A2A2A;157    border-radius: 16px;158    display: flex;159    align-items: center;160    justify-content: center;161    font-size: 40px;162    color: #EDEDED;163  }164  .key.small { flex: 0.8; }165  .key.large { flex: 1.4; }166  .key.circle {167    width: 120px;168    flex: 0 0 120px;169    height: 120px;170    border-radius: 60px;171    background: #9CF3CF;172    border: none;173    color: #0A3D2B;174  }175  .kb-bottom {176    display: flex;177    gap: 12px;178    padding: 8px;179    align-items: center;180  }181  .kb-bottom .spacer { flex: 0.7; height: 118px; background: #1E1E1E; border: 1px solid #2A2A2A; border-radius: 16px; display:flex; align-items:center; justify-content:center; font-size: 36px; color:#CFCFCF; }182  .kb-bottom .space { flex: 3.2; height: 118px; background: #1E1E1E; border: 1px solid #2A2A2A; border-radius: 16px; display:flex; align-items:center; justify-content:center; font-size: 40px; color:#CFCFCF; }183  .indicator-bar {184    position: absolute;185    bottom: 10px;186    left: 50%;187    transform: translateX(-50%);188    width: 280px;189    height: 10px;190    background: #AFAFAF;191    border-radius: 5px;192    opacity: 0.6;193  }194</style>195</head>196<body>197<div id="render-target">198 199  <!-- Status bar -->200  <div class="status-bar">201    <div class="sb-left">9:19</div>202    <div class="sb-right">203      <span class="sb-icon">204        <svg viewBox="0 0 24 24">205          <path d="M2 16c5-6 15-6 20 0" stroke="#444" stroke-width="2" fill="none"/>206          <path d="M5 13c3-3 11-3 14 0" stroke="#666" stroke-width="2" fill="none"/>207          <circle cx="12" cy="18" r="1.5" fill="#888"/>208        </svg>209      </span>210      <span class="sb-icon">211        <svg viewBox="0 0 24 24">212          <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="#666"/>213          <rect x="20" y="9" width="2" height="6" fill="#666"/>214        </svg>215      </span>216      <span style="font-size:28px; color:#444;">94%</span>217    </div>218  </div>219 220  <!-- Search bar -->221  <div class="search-row">222    <div class="search-input">223      <svg viewBox="0 0 24 24">224        <circle cx="10" cy="10" r="6"></circle>225        <line x1="15" y1="15" x2="22" y2="22"></line>226      </svg>227      <div class="search-text">aser engraver</div>228    </div>229    <div class="cancel-btn">Cancel</div>230  </div>231 232  <!-- Content -->233  <div class="content">234    <div class="section-header">235      <div class="section-title">Search History:</div>236      <div class="trash-btn" title="Delete">237        <svg viewBox="0 0 24 24">238          <path d="M9 3h6l1 2h4v2H4V5h4l1-2z"></path>239          <path d="M6 9h12l-1 11H7L6 9z"></path>240        </svg>241      </div>242    </div>243 244    <div class="chips">245      <span class="chip">Navy Blue formal shirt for men</span>246      <span class="chip">Navy Blue casual shirt for men</span>247      <span class="chip">Navy Blue shirt for men</span>248      <span class="chip">Electric Lawn Mower</span>249      <span class="chip">electric lawn mower</span>250      <span class="chip">sofa</span>251      <span class="chip">DANIU measuring tape</span>252    </div>253 254    <div class="section-header" style="margin-top: 28px;">255      <div class="section-title">Hot Searches:</div>256    </div>257 258    <div class="chips">259      <span class="chip">rc truck</span>260      <span class="chip">eachine</span>261      <span class="chip">smartwatch</span>262      <span class="chip">xiaomi</span>263      <span class="chip">smart watch</span>264      <span class="chip">oscilloscope</span>265      <span class="chip">wpl</span>266      <span class="chip">ssd</span>267      <span class="chip">multimeter</span>268    </div>269 270    <div class="white-space"></div>271  </div>272 273  <!-- Keyboard mock -->274  <div class="keyboard">275    <div class="kb-top">276      <div class="tool">⌨️</div>277      <div class="tool">😊</div>278      <div class="tool">GIF</div>279      <div class="tool">⚙️</div>280      <div class="tool">G↔︎</div>281      <div class="tool">🎨</div>282      <div class="tool">🎙️</div>283    </div>284 285    <div class="kb-row">286      <div class="key">q</div>287      <div class="key">w</div>288      <div class="key">e</div>289      <div class="key">r</div>290      <div class="key">t</div>291      <div class="key">y</div>292      <div class="key">u</div>293      <div class="key">i</div>294      <div class="key">o</div>295      <div class="key">p</div>296    </div>297 298    <div class="kb-row">299      <div class="key">a</div>300      <div class="key">s</div>301      <div class="key">d</div>302      <div class="key">f</div>303      <div class="key">g</div>304      <div class="key">h</div>305      <div class="key">j</div>306      <div class="key">k</div>307      <div class="key">l</div>308    </div>309 310    <div class="kb-row">311      <div class="key small">⇧</div>312      <div class="key">z</div>313      <div class="key">x</div>314      <div class="key">c</div>315      <div class="key">v</div>316      <div class="key">b</div>317      <div class="key">n</div>318      <div class="key">m</div>319      <div class="key small">⌫</div>320    </div>321 322    <div class="kb-bottom">323      <div class="spacer">?123</div>324      <div class="spacer">,</div>325      <div class="space">space</div>326      <div class="spacer">.</div>327      <div class="key circle">328        <svg viewBox="0 0 24 24">329          <circle cx="10" cy="10" r="6" stroke="#0A3D2B" stroke-width="2" fill="none"></circle>330          <line x1="15" y1="15" x2="22" y2="22" stroke="#0A3D2B" stroke-width="2"></line>331        </svg>332      </div>333    </div>334 335    <div class="indicator-bar"></div>336  </div>337 338</div>339</body>340</html>