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>Search Screen Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #000000;15    font-family: "Roboto", Arial, Helvetica, sans-serif;16    color: #FFFFFF;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 100%;25    height: 110px;26    padding: 0 36px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #fff;31    font-size: 36px;32    letter-spacing: 0.5px;33  }34  .sb-right {35    display: flex;36    align-items: center;37    gap: 22px;38  }39  .icon-wifi, .icon-signal, .icon-battery, .icon-circle {40    display: inline-block;41  }42  .icon-signal {43    width: 26px; height: 26px;44    border-right: 3px solid #fff;45    border-top: 3px solid #fff;46    transform: rotate(45deg);47    opacity: 0.9;48  }49  .icon-wifi {50    width: 30px; height: 18px; position: relative;51  }52  .icon-wifi:before, .icon-wifi:after {53    content: "";54    position: absolute;55    left: 0; right: 0;56    margin: auto;57    border: 3px solid #fff;58    border-color: #fff transparent transparent transparent;59    border-radius: 50%;60  }61  .icon-wifi:before { top: 0; width: 28px; height: 28px; }62  .icon-wifi:after  { top: 6px; width: 18px; height: 18px; }63  .icon-battery {64    width: 46px; height: 22px; border: 3px solid #fff; border-radius: 4px; position: relative;65  }66  .icon-battery:after {67    content: ""; position: absolute; right: -6px; top: 6px; width: 6px; height: 10px; background: #fff; border-radius: 2px;68  }69  .icon-circle { width: 10px; height: 10px; background: #d9d9d9; border-radius: 50%; opacity: 0.9; }70 71  /* Header search */72  .header {73    position: absolute;74    top: 116px;75    left: 24px;76    right: 24px;77    height: 96px;78    display: flex;79    align-items: center;80    gap: 22px;81  }82  .back-btn {83    width: 72px; height: 72px;84    border: none; background: transparent; padding: 0; cursor: default;85  }86  .search-bar {87    flex: 1;88    height: 96px;89    background: #2A2A2A;90    border-radius: 48px;91    display: flex;92    align-items: center;93    padding: 0 22px 0 28px;94    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);95  }96  .placeholder {97    color: #CFCFCF;98    font-size: 40px;99    flex: 1;100    white-space: nowrap;101  }102  .sb-icons {103    display: flex;104    align-items: center;105    gap: 14px;106  }107  .chip {108    width: 64px; height: 64px;109    border-radius: 18px;110    background: #3A3A3A;111    display: flex; align-items: center; justify-content: center;112  }113  .chip svg { width: 32px; height: 32px; }114 115  /* Tabs */116  .tabs {117    position: absolute;118    top: 250px;119    left: 32px;120    display: flex;121    gap: 42px;122    align-items: center;123  }124  .tab {125    font-size: 38px;126    color: #9E9E9E;127    padding-bottom: 12px;128    position: relative;129  }130  .tab.active { color: #FFFFFF; }131  .tab.active::after {132    content: "";133    position: absolute;134    left: 0;135    bottom: 0;136    width: 120px;137    height: 4px;138    background: #FFFFFF;139    border-radius: 2px;140  }141 142  /* Recent list */143  .recent-list {144    position: absolute;145    top: 340px;146    left: 32px;147    right: 32px;148    margin: 0;149    padding: 0;150    list-style: none;151  }152  .recent-list li {153    font-size: 48px;154    color: #F2F2F2;155    margin: 38px 0;156  }157  .clear-link {158    position: absolute;159    top: 620px;160    left: 32px;161    font-size: 42px;162    letter-spacing: 1px;163    color: #6EA6FF;164    font-weight: 700;165  }166 167  /* Keyboard mock */168  .keyboard {169    position: absolute;170    left: 0; right: 0;171    bottom: 74px;172    height: 880px;173    background: #151417;174    border-top-left-radius: 26px;175    border-top-right-radius: 26px;176    padding: 18px 18px 26px;177    display: flex;178    flex-direction: column;179    gap: 18px;180  }181  .kbd-toolbar {182    display: flex;183    align-items: center;184    gap: 18px;185    padding: 6px 6px 0;186  }187  .toolbar-chip {188    height: 58px; min-width: 94px;189    padding: 0 16px;190    border-radius: 16px;191    background: #2A262C;192    color: #E8E8E8;193    font-size: 28px;194    display: flex; align-items: center; justify-content: center;195  }196 197  .kbd-row {198    display: flex;199    justify-content: space-between;200    gap: 12px;201  }202  .key {203    height: 114px;204    width: 90px;205    background: #2B2830;206    border-radius: 20px;207    color: #E6E3E8;208    font-size: 44px;209    display: flex; align-items: center; justify-content: center;210  }211  .key.small { width: 120px; }212  .key.func { width: 140px; background: #2F2B33; }213  .key.wide { flex: 1; min-width: 240px; }214  .key.icon svg { width: 36px; height: 36px; }215 216  /* Gesture bar */217  .gesture {218    position: absolute;219    bottom: 18px;220    left: 50%;221    transform: translateX(-50%);222    width: 240px;223    height: 10px;224    background: #FFFFFF;225    border-radius: 10px;226    opacity: 0.9;227  }228</style>229</head>230<body>231<div id="render-target">232 233  <!-- Status Bar -->234  <div class="status-bar">235    <div class="sb-left">8:22</div>236    <div class="sb-right">237      <div class="icon-signal" aria-hidden="true"></div>238      <div class="icon-wifi" aria-hidden="true"></div>239      <div class="icon-circle" aria-hidden="true"></div>240      <div class="icon-battery" aria-hidden="true"></div>241    </div>242  </div>243 244  <!-- Header with Back and Search -->245  <div class="header">246    <button class="back-btn" aria-label="Back">247      <svg viewBox="0 0 24 24">248        <path d="M15 19L8 12l7-7" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>249      </svg>250    </button>251 252    <div class="search-bar">253      <div class="placeholder">Search on eBay</div>254      <div class="sb-icons">255        <div class="chip" aria-label="Voice search">256          <svg viewBox="0 0 24 24">257            <path d="M12 3.5a3.5 3.5 0 0 1 3.5 3.5v4a3.5 3.5 0 0 1-7 0V7A3.5 3.5 0 0 1 12 3.5z" fill="#FFFFFF"/>258            <path d="M19 11a7 7 0 0 1-14 0" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"/>259            <path d="M12 18v3" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>260          </svg>261        </div>262        <div class="chip" aria-label="Image search">263          <svg viewBox="0 0 24 24">264            <rect x="4" y="6" width="16" height="12" rx="2" ry="2" fill="none" stroke="#FFFFFF" stroke-width="2"/>265            <circle cx="12" cy="12" r="3" fill="#FFFFFF"/>266            <rect x="9" y="4" width="6" height="2" rx="1" fill="#FFFFFF"/>267          </svg>268        </div>269      </div>270    </div>271  </div>272 273  <!-- Tabs -->274  <div class="tabs">275    <div class="tab active">Recent</div>276    <div class="tab">Saved</div>277  </div>278 279  <!-- Recent list -->280  <ul class="recent-list">281    <li>nikon d5500 camera</li>282    <li>pixel 6</li>283  </ul>284  <div class="clear-link">CLEAR RECENT SEARCHES</div>285 286  <!-- Keyboard mock -->287  <div class="keyboard">288    <div class="kbd-toolbar">289      <div class="toolbar-chip">GIF</div>290      <div class="toolbar-chip">Settings</div>291      <div class="toolbar-chip">Translate</div>292      <div class="toolbar-chip">More</div>293    </div>294 295    <div class="kbd-row">296      <div class="key">q</div>297      <div class="key">w</div>298      <div class="key">e</div>299      <div class="key">r</div>300      <div class="key">t</div>301      <div class="key">y</div>302      <div class="key">u</div>303      <div class="key">i</div>304      <div class="key">o</div>305      <div class="key">p</div>306    </div>307 308    <div class="kbd-row">309      <div class="key">a</div>310      <div class="key">s</div>311      <div class="key">d</div>312      <div class="key">f</div>313      <div class="key">g</div>314      <div class="key">h</div>315      <div class="key">j</div>316      <div class="key">k</div>317      <div class="key">l</div>318    </div>319 320    <div class="kbd-row">321      <div class="key func icon" aria-label="Shift">322        <svg viewBox="0 0 24 24">323          <path d="M12 4l7 8h-4v6H9v-6H5z" fill="#E6E3E8"/>324        </svg>325      </div>326      <div class="key">z</div>327      <div class="key">x</div>328      <div class="key">c</div>329      <div class="key">v</div>330      <div class="key">b</div>331      <div class="key">n</div>332      <div class="key">m</div>333      <div class="key func icon" aria-label="Backspace">334        <svg viewBox="0 0 24 24">335          <path d="M22 6v12H9L3 12l6-6z" fill="none" stroke="#E6E3E8" stroke-width="2"/>336          <path d="M13 9l4 4M17 9l-4 4" stroke="#E6E3E8" stroke-width="2" stroke-linecap="round"/>337        </svg>338      </div>339    </div>340 341    <div class="kbd-row">342      <div class="key func small">?123</div>343      <div class="key func small icon" aria-label="Emoji">344        <svg viewBox="0 0 24 24">345          <circle cx="12" cy="12" r="9" fill="none" stroke="#E6E3E8" stroke-width="2"/>346          <circle cx="9" cy="10" r="1.2" fill="#E6E3E8"/>347          <circle cx="15" cy="10" r="1.2" fill="#E6E3E8"/>348          <path d="M8 15c1 .8 2.4 1.2 4 1.2s3-.4 4-1.2" stroke="#E6E3E8" stroke-width="2" fill="none" stroke-linecap="round"/>349        </svg>350      </div>351      <div class="key wide"> </div>352      <div class="key func small">.</div>353      <div class="key func small icon" aria-label="Search">354        <svg viewBox="0 0 24 24">355          <circle cx="11" cy="11" r="6" stroke="#E6E3E8" stroke-width="2" fill="none"/>356          <path d="M16 16l5 5" stroke="#E6E3E8" stroke-width="2" stroke-linecap="round"/>357        </svg>358      </div>359    </div>360  </div>361 362  <div class="gesture"></div>363</div>364</body>365</html>