GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #FFFFFF;14    border-radius: 0;15    box-shadow: none;16    color: #212121;17  }18 19  /* Status bar */20  .status-bar {21    height: 92px;22    padding: 0 32px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    font-size: 34px;27    color: #212121;28  }29  .status-left {30    display: flex;31    align-items: center;32    gap: 18px;33  }34  .status-right {35    display: flex;36    align-items: center;37    gap: 22px;38  }39  .icon {40    width: 42px;41    height: 42px;42  }43 44  /* Search header */45  .search-header {46    padding: 18px 24px 10px 24px;47  }48  .search-row {49    display: flex;50    align-items: center;51    gap: 20px;52  }53  .back-btn {54    width: 72px;55    height: 72px;56    display: flex;57    align-items: center;58    justify-content: center;59  }60  .search-pill {61    flex: 1;62    height: 94px;63    background: #F3F3F3;64    border-radius: 48px;65    display: flex;66    align-items: center;67    padding: 0 26px;68    box-sizing: border-box;69  }70  .search-placeholder {71    font-size: 36px;72    color: #777;73    flex: 1;74  }75  .pill-icons {76    display: flex;77    align-items: center;78    gap: 24px;79  }80 81  /* Tabs */82  .tabs {83    display: flex;84    align-items: center;85    gap: 40px;86    padding: 26px 40px 10px 40px;87    font-size: 36px;88  }89  .tab-active {90    color: #3B66FF;91    font-weight: 600;92  }93  .tab {94    color: #808080;95  }96  .tab-underline {97    height: 6px;98    width: 120px;99    background: #1F1F1F;100    margin: 12px 0 0 40px;101    border-radius: 3px;102  }103 104  /* Recent list */105  .results {106    padding: 22px 48px 0 48px;107  }108  .result-item {109    font-size: 44px;110    line-height: 64px;111    color: #202020;112    margin: 26px 0;113  }114  .clear-link {115    margin-top: 34px;116    font-size: 38px;117    color: #4A73FF;118    font-weight: 600;119  }120 121  /* Keyboard mock */122  .keyboard {123    position: absolute;124    left: 0;125    bottom: 50px;126    width: 100%;127    height: 900px;128    background: #F2F3FB;129    border-top-left-radius: 26px;130    border-top-right-radius: 26px;131    box-shadow: 0 -2px 6px rgba(0,0,0,0.06);132    padding: 22px 24px;133    box-sizing: border-box;134  }135  .kb-top-tools {136    display: flex;137    align-items: center;138    justify-content: space-between;139    padding: 6px 8px 18px 8px;140  }141  .kb-tool {142    width: 72px;143    height: 72px;144    background: #E9EBF7;145    border-radius: 18px;146    display: flex;147    align-items: center;148    justify-content: center;149    color: #333;150    font-size: 26px;151  }152  .kb-rows {153    display: flex;154    flex-direction: column;155    gap: 22px;156    padding: 0 6px;157  }158  .kb-row {159    display: flex;160    gap: 16px;161    justify-content: center;162  }163  .key {164    width: 88px;165    height: 100px;166    background: #FFFFFF;167    border-radius: 18px;168    box-shadow: 0 1px 0 rgba(0,0,0,0.06);169    display: flex;170    align-items: center;171    justify-content: center;172    font-size: 42px;173    color: #1A1A1A;174  }175  .key-wide {176    width: 146px;177  }178  .key-pink {179    background: #F9D8E7;180  }181  .key-green {182    background: #CDE287;183  }184  .space {185    width: 520px;186    height: 100px;187    background: #FFFFFF;188    border-radius: 26px;189  }190 191  /* Gesture bar */192  .gesture-bar {193    position: absolute;194    bottom: 12px;195    left: 50%;196    transform: translateX(-50%);197    width: 320px;198    height: 10px;199    background: #C6C6C6;200    border-radius: 6px;201  }202</style>203</head>204<body>205<div id="render-target">206 207  <!-- Status bar -->208  <div class="status-bar">209    <div class="status-left">210      <div>2:23</div>211      <svg class="icon" viewBox="0 0 24 24">212        <path d="M3 5h18v14H3z" fill="#777"/>213        <path d="M6 8h12v2H6z" fill="#fff"/>214      </svg>215      <svg class="icon" viewBox="0 0 24 24">216        <circle cx="12" cy="12" r="9" fill="#9E9E9E"/>217        <path d="M12 7v6l4 2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>218      </svg>219    </div>220    <div class="status-right">221      <svg class="icon" viewBox="0 0 24 24">222        <path d="M3 10h18v4H3z" fill="#606060"/>223        <circle cx="5" cy="12" r="1.6" fill="#606060"/>224      </svg>225      <svg class="icon" viewBox="0 0 24 24">226        <rect x="3" y="6" width="18" height="12" rx="3" ry="3" fill="#606060"/>227        <rect x="6" y="9" width="12" height="6" fill="#fff"/>228      </svg>229    </div>230  </div>231 232  <!-- Search header -->233  <div class="search-header">234    <div class="search-row">235      <div class="back-btn">236        <svg width="44" height="44" viewBox="0 0 24 24">237          <path d="M15 6L9 12l6 6" stroke="#212121" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>238        </svg>239      </div>240      <div class="search-pill">241        <div class="search-placeholder">Search on eBay</div>242        <div class="pill-icons">243          <svg width="40" height="40" viewBox="0 0 24 24">244            <rect x="10" y="4" width="4" height="10" rx="2" fill="#212121"/>245            <path d="M7 11a5 5 0 0010 0" stroke="#212121" stroke-width="2" fill="none" stroke-linecap="round"/>246            <rect x="10" y="16" width="4" height="4" fill="#212121"/>247          </svg>248          <svg width="44" height="44" viewBox="0 0 24 24">249            <rect x="3" y="6" width="18" height="12" rx="3" fill="#212121"/>250            <circle cx="12" cy="12" r="4" fill="#fff"/>251          </svg>252        </div>253      </div>254    </div>255  </div>256 257  <!-- Tabs -->258  <div class="tabs">259    <div class="tab-active">Recent</div>260    <div class="tab">Saved</div>261  </div>262  <div class="tab-underline"></div>263 264  <!-- Recent searches list -->265  <div class="results">266    <div class="result-item">Athletic Shoes for women</div>267    <div class="result-item">new balance hiking shoes blue</div>268    <div class="result-item">New Balance shoes for women size 9</div>269    <div class="result-item">new balance shoes for women size 9</div>270 271    <div class="clear-link">CLEAR RECENT SEARCHES</div>272  </div>273 274  <!-- Keyboard mock -->275  <div class="keyboard">276    <div class="kb-top-tools">277      <div style="display:flex;gap:18px;align-items:center;">278        <div class="kb-tool">⌗</div>279        <div class="kb-tool">🙂</div>280        <div class="kb-tool">GIF</div>281        <div class="kb-tool">282          <svg width="36" height="36" viewBox="0 0 24 24">283            <path d="M12 2l3 5 5 3-5 3-3 5-3-5-5-3 5-3 3-5z" fill="#666"/>284          </svg>285        </div>286        <div class="kb-tool">G↔</div>287        <div class="kb-tool">🎨</div>288      </div>289      <div class="kb-tool">290        <svg width="36" height="36" viewBox="0 0 24 24">291          <rect x="10" y="4" width="4" height="10" rx="2" fill="#212121"/>292          <path d="M7 11a5 5 0 0010 0" stroke="#212121" stroke-width="2" fill="none" stroke-linecap="round"/>293        </svg>294      </div>295    </div>296 297    <div class="kb-rows">298      <div class="kb-row">299        <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>300      </div>301      <div class="kb-row">302        <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>303      </div>304      <div class="kb-row">305        <div class="key key-pink">⇧</div>306        <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>307        <div class="key key-pink">⌫</div>308      </div>309      <div class="kb-row">310        <div class="key key-pink">?123</div>311        <div class="key key-pink">,</div>312        <div class="key">☺</div>313        <div class="space"></div>314        <div class="key key-pink">.</div>315        <div class="key key-green">316          <svg width="36" height="36" viewBox="0 0 24 24">317            <circle cx="10" cy="10" r="7" stroke="#1A1A1A" stroke-width="2" fill="none"/>318            <path d="M15.5 15.5L20 20" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round"/>319          </svg>320        </div>321      </div>322    </div>323  </div>324 325  <div class="gesture-bar"></div>326 327</div>328</body>329</html>