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>eBay Search - Recent</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, Helvetica, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #000000;20    color: #FFFFFF;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 86px;30    color: #e6e6e6;31    display: flex;32    align-items: center;33    justify-content: space-between;34    padding: 0 28px;35    box-sizing: border-box;36    font-size: 34px;37    letter-spacing: 0.5px;38  }39  .status-icons {40    display: flex;41    align-items: center;42    gap: 22px;43  }44  .icon-sb {45    width: 32px;46    height: 32px;47    opacity: 0.9;48  }49 50  /* Search header */51  .search-header {52    position: absolute;53    top: 96px;54    left: 0;55    width: 100%;56    padding: 0 28px;57    box-sizing: border-box;58    display: flex;59    align-items: center;60    gap: 24px;61  }62  .back-btn {63    width: 72px;64    height: 72px;65    display: flex;66    align-items: center;67    justify-content: center;68  }69  .search-pill {70    flex: 1;71    height: 104px;72    background: #1f1f1f;73    border-radius: 52px;74    display: flex;75    align-items: center;76    padding: 0 24px 0 36px;77    box-sizing: border-box;78    color: #bdbdbd;79    font-size: 36px;80    letter-spacing: 0.2px;81  }82  .search-pill .spacer {83    flex: 1;84  }85  .pill-icon {86    width: 72px;87    height: 72px;88    border-radius: 16px;89    display: flex;90    align-items: center;91    justify-content: center;92    color: #eaeaea;93    opacity: 0.95;94  }95 96  /* Tabs */97  .tabs {98    position: absolute;99    top: 236px;100    left: 0;101    width: 100%;102    padding: 0 44px;103    box-sizing: border-box;104    display: flex;105    align-items: center;106    gap: 36px;107  }108  .tab {109    font-size: 40px;110    color: #e5e5e5;111    opacity: 0.8;112  }113  .tab.active {114    color: #6aa2ff;115    opacity: 1;116  }117  .tab-underline {118    position: absolute;119    left: 44px;120    top: 296px;121    width: 132px;122    height: 6px;123    background: #6aa2ff;124    border-radius: 3px;125  }126 127  /* Recent list */128  .recent-list {129    position: absolute;130    top: 358px;131    left: 0;132    width: 100%;133    padding: 0 64px;134    box-sizing: border-box;135  }136  .recent-item {137    font-size: 54px;138    line-height: 1.35;139    color: #f2f2f2;140    margin: 46px 0;141  }142  .clear-link {143    margin-top: 76px;144    font-size: 44px;145    color: #6aa2ff;146    letter-spacing: 0.5px;147  }148 149  /* Keyboard mock */150  .keyboard {151    position: absolute;152    left: 0;153    bottom: 0;154    width: 1080px;155    height: 900px;156    background: #141414;157    border-top: 1px solid #1f1f1f;158    box-sizing: border-box;159    padding: 22px 18px 80px;160  }161  .kbd-top-row {162    display: flex;163    align-items: center;164    gap: 22px;165    margin-bottom: 18px;166  }167  .kbd-small {168    width: 88px;169    height: 88px;170    background: #222;171    border-radius: 22px;172  }173  .kbd-row {174    display: grid;175    grid-template-columns: repeat(10, 1fr);176    gap: 14px;177    margin: 16px 8px;178  }179  .key {180    height: 120px;181    background: #2a2a2a;182    border-radius: 22px;183  }184  .kbd-row.short .key:first-child,185  .kbd-row.short .key:last-child {186    grid-column: span 1;187  }188  .kbd-row.short {189    grid-template-columns: 1.3fr repeat(8, 1fr) 1.3fr;190  }191  .kbd-bottom {192    display: grid;193    grid-template-columns: 1.1fr 1fr 4fr 1fr 1.1fr;194    gap: 14px;195    margin: 16px 8px 0;196  }197  .space {198    height: 120px;199    background: #2a2a2a;200    border-radius: 22px;201  }202  .gesture {203    position: absolute;204    bottom: 18px;205    left: 50%;206    transform: translateX(-50%);207    width: 320px;208    height: 10px;209    background: #e6e6e6;210    opacity: 0.75;211    border-radius: 6px;212  }213</style>214</head>215<body>216<div id="render-target">217 218  <!-- Status bar -->219  <div class="status-bar">220    <div class="sb-left">8:47</div>221    <div class="status-icons">222      <!-- Simple wifi -->223      <svg class="icon-sb" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">224        <path d="M2 8c5-4 15-4 20 0" />225        <path d="M5 12c4-3 10-3 14 0" />226        <path d="M8 16c3-2 5-2 8 0" />227        <circle cx="12" cy="20" r="1.8" fill="currentColor"></circle>228      </svg>229      <!-- Signal bars -->230      <svg class="icon-sb" viewBox="0 0 24 24" fill="currentColor">231        <rect x="3" y="14" width="3" height="7" opacity="0.4"></rect>232        <rect x="9" y="11" width="3" height="10" opacity="0.6"></rect>233        <rect x="15" y="8" width="3" height="13" opacity="0.8"></rect>234      </svg>235      <!-- Battery -->236      <svg class="icon-sb" viewBox="0 0 28 16" fill="none" stroke="currentColor" stroke-width="2">237        <rect x="1" y="3" width="22" height="10" rx="2"></rect>238        <rect x="3" y="5" width="14" height="6" rx="1" fill="currentColor"></rect>239        <rect x="24" y="6" width="3" height="4" rx="1" fill="currentColor"></rect>240      </svg>241    </div>242  </div>243 244  <!-- Search header -->245  <div class="search-header">246    <div class="back-btn" aria-label="Back">247      <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">248        <path d="M15 18l-6-6 6-6"></path>249      </svg>250    </div>251    <div class="search-pill">252      <span>Search on eBay</span>253      <div class="spacer"></div>254      <div class="pill-icon" aria-label="Voice Search">255        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">256          <rect x="9" y="4" width="6" height="10" rx="3"></rect>257          <path d="M12 18v3"></path>258          <path d="M7 13a5 5 0 0010 0"></path>259        </svg>260      </div>261      <div class="pill-icon" aria-label="Camera">262        <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">263          <rect x="3" y="7" width="18" height="12" rx="2"></rect>264          <path d="M9 7l1.5-2h3L15 7"></path>265          <circle cx="12" cy="13" r="3"></circle>266        </svg>267      </div>268    </div>269  </div>270 271  <!-- Tabs -->272  <div class="tabs">273    <div class="tab active">Recent</div>274    <div class="tab">Saved</div>275  </div>276  <div class="tab-underline"></div>277 278  <!-- Recent list -->279  <div class="recent-list">280    <div class="recent-item">Reebok Jerseys</div>281    <div class="recent-item">Cleats</div>282    <div class="recent-item">cleatsfire extinguishers</div>283    <div class="clear-link">CLEAR RECENT SEARCHES</div>284  </div>285 286  <!-- Keyboard mock -->287  <div class="keyboard" aria-hidden="true">288    <div class="kbd-top-row">289      <div class="kbd-small"></div>290      <div class="kbd-small"></div>291      <div class="kbd-small"></div>292      <div class="kbd-small"></div>293      <div class="kbd-small"></div>294      <div class="kbd-small"></div>295      <div class="kbd-small"></div>296    </div>297    <div class="kbd-row">298      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>299      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>300    </div>301    <div class="kbd-row">302      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>303      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>304    </div>305    <div class="kbd-row short">306      <div class="key"></div>307      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>308      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>309      <div class="key"></div>310    </div>311    <div class="kbd-bottom">312      <div class="space"></div>313      <div class="space"></div>314      <div class="space"></div>315      <div class="space"></div>316      <div class="space"></div>317    </div>318    <div class="gesture"></div>319  </div>320 321</div>322</body>323</html>