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 on eBay - Mock UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #000000;15    color: #FFFFFF;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif;17  }18 19  /* Status bar */20  .statusbar {21    position: absolute;22    top: 0;23    left: 0;24    width: 100%;25    height: 120px;26    box-sizing: border-box;27    padding: 0 40px;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #fff;32    font-size: 44px;33    font-weight: 600;34  }35  .status-left, .status-right { display: flex; align-items: center; }36  .status-left { gap: 26px; }37  .status-right { gap: 26px; }38  .icon { width: 48px; height: 48px; }39 40  /* Search bar row */41  .search-row {42    position: absolute;43    top: 140px;44    left: 40px;45    right: 40px;46    display: flex;47    align-items: center;48    gap: 24px;49  }50  .back-btn {51    width: 80px;52    height: 80px;53    display: flex;54    align-items: center;55    justify-content: center;56  }57  .search-bar {58    flex: 1;59    height: 100px;60    background: #222222;61    border-radius: 50px;62    display: flex;63    align-items: center;64    padding: 0 30px;65    box-sizing: border-box;66    gap: 24px;67  }68  .search-placeholder {69    flex: 1;70    color: #EDEDED;71    font-size: 42px;72    font-weight: 500;73    white-space: nowrap;74  }75  .icon-chip {76    width: 88px;77    height: 88px;78    background: #2C2C2C;79    border: 1px solid #3A3A3A;80    border-radius: 44px;81    display: flex;82    align-items: center;83    justify-content: center;84  }85 86  /* Tabs */87  .tabs {88    position: absolute;89    top: 280px;90    left: 40px;91    width: 1000px;92    display: flex;93    align-items: center;94    gap: 40px;95    font-size: 42px;96  }97  .tabs .active { color: #5EA3FF; }98  .tabs .inactive { color: #AFAFAF; }99  .tabs-underline {100    position: absolute;101    top: 360px;102    left: 40px;103    width: 120px;104    height: 6px;105    background: #5EA3FF;106    border-radius: 3px;107  }108 109  /* Center hero content */110  .hero {111    position: absolute;112    top: 680px;113    left: 0;114    width: 100%;115    text-align: center;116  }117  .mag-wrap {118    width: 240px;119    height: 240px;120    margin: 0 auto 40px;121    display: flex;122    align-items: center;123    justify-content: center;124  }125  .hero h1 {126    margin: 0;127    font-size: 70px;128    font-weight: 700;129    letter-spacing: 0.2px;130  }131  .hero p {132    margin: 26px 0 0;133    font-size: 42px;134    color: #B3B3B3;135  }136 137  /* Keyboard mock */138  .keyboard {139    position: absolute;140    bottom: 0;141    left: 0;142    width: 100%;143    height: 900px;144    background: #171717;145    border-top-left-radius: 24px;146    border-top-right-radius: 24px;147    box-shadow: 0 -8px 20px rgba(0,0,0,0.45);148  }149  .kb-top {150    height: 160px;151    display: flex;152    align-items: center;153    justify-content: space-around;154    color: #DCDCDC;155    font-size: 40px;156  }157  .kb-rows { padding: 0 30px 30px; box-sizing: border-box; }158  .key-row { display: flex; justify-content: space-between; margin: 22px 0; }159  .key {160    width: 96px;161    height: 120px;162    background: #262626;163    border-radius: 22px;164    color: #E8E8E8;165    display: flex;166    align-items: center;167    justify-content: center;168    font-size: 48px;169    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.06);170  }171  .key.wide { width: 140px; }172  .key.extra-wide { flex: 1; }173  .bottom-row { display: flex; align-items: center; gap: 18px; }174  .key.action {175    width: 160px;176    height: 120px;177    border-radius: 60px;178    background: #E5B8C5;179    color: #000000;180    font-weight: 700;181    font-size: 42px;182  }183  .mic-search {184    width: 140px;185    height: 140px;186    background: #F3C7D6;187    border-radius: 70px;188    display: flex;189    align-items: center;190    justify-content: center;191  }192 193  /* Home indicator */194  .home-indicator {195    position: absolute;196    bottom: 20px;197    left: 50%;198    transform: translateX(-50%);199    width: 240px;200    height: 12px;201    background: #E6E6E6;202    border-radius: 6px;203    opacity: 0.75;204  }205</style>206</head>207<body>208<div id="render-target">209 210  <!-- Status bar -->211  <div class="statusbar">212    <div class="status-left">213      <div class="time">11:07</div>214      <div style="font-weight:700; letter-spacing:6px;">S G</div>215      <div style="font-weight:600;">75°</div>216    </div>217    <div class="status-right">218      <!-- Wi-Fi (simple) -->219      <svg class="icon" viewBox="0 0 24 24" aria-label="wifi">220        <path fill="#ffffff" d="M2 9c6-6 14-6 20 0l-2 2c-4-4-12-4-16 0L2 9zm4 4c4-4 10-4 14 0l-2 2c-3-3-7-3-10 0l-2-2zm6 6l2 2-2 2-2-2 2-2z"></path>221      </svg>222      <!-- Battery (simple) -->223      <svg class="icon" viewBox="0 0 24 24" aria-label="battery">224        <rect x="3" y="6" width="17" height="12" fill="#ffffff" rx="2"></rect>225        <rect x="20" y="10" width="2" height="4" fill="#ffffff"></rect>226        <rect x="5" y="8" width="13" height="8" fill="#000000"></rect>227      </svg>228    </div>229  </div>230 231  <!-- Search bar -->232  <div class="search-row">233    <div class="back-btn" aria-label="Back">234      <svg width="48" height="48" viewBox="0 0 24 24">235        <path fill="#ffffff" d="M15.5 5l-7 7 7 7 1.5-1.5L11.5 12l5.5-5.5z"></path>236      </svg>237    </div>238    <div class="search-bar">239      <div class="search-placeholder">Search on eBay</div>240      <div class="icon-chip" aria-label="Voice search">241        <svg width="44" height="44" viewBox="0 0 24 24">242          <path fill="#ffffff" d="M12 3a4 4 0 014 4v6a4 4 0 11-8 0V7a4 4 0 014-4zm-5 8h2a5 5 0 0010 0h2a7 7 0 01-14 0zM11 21h2v-3h-2z"></path>243        </svg>244      </div>245      <div class="icon-chip" aria-label="Camera">246        <svg width="44" height="44" viewBox="0 0 24 24">247          <path fill="#ffffff" d="M4 7h4l2-2h4l2 2h4v12H4V7zm8 11a5 5 0 100-10 5 5 0 000 10z"></path>248        </svg>249      </div>250    </div>251  </div>252 253  <!-- Tabs -->254  <div class="tabs">255    <div class="active">Recent</div>256    <div class="inactive">Saved</div>257  </div>258  <div class="tabs-underline"></div>259 260  <!-- Center content -->261  <div class="hero">262    <div class="mag-wrap" aria-hidden="true">263      <svg width="240" height="240" viewBox="0 0 120 120">264        <circle cx="50" cy="50" r="28" stroke="#FFFFFF" stroke-width="8" fill="none"></circle>265        <path d="M68 68 L95 95" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round"></path>266      </svg>267    </div>268    <h1>Search on eBay</h1>269    <p>Find your next favorite thing</p>270  </div>271 272  <!-- Keyboard mock -->273  <div class="keyboard" aria-label="On-screen keyboard">274    <div class="kb-top">275      <div>◧</div>276      <div>☺</div>277      <div>GIF</div>278      <div>⚙</div>279      <div>G↔</div>280      <div>🎨</div>281      <div>🎤</div>282    </div>283 284    <div class="kb-rows">285      <div class="key-row">286        <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>287      </div>288      <div class="key-row">289        <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>290      </div>291      <div class="key-row">292        <div class="key wide">⇧</div><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 wide">⌫</div>293      </div>294      <div class="bottom-row">295        <div class="key action">?123</div>296        <div class="key" style="width:90px; height:120px;">,</div>297        <div class="key" style="width:120px; height:120px;">☺</div>298        <div class="key extra-wide" style="height:120px;">space</div>299        <div class="key" style="width:120px; height:120px;">.</div>300        <div class="mic-search" aria-label="Search">301          <svg width="72" height="72" viewBox="0 0 24 24">302            <circle cx="10" cy="10" r="6" stroke="#000000" stroke-width="2.4" fill="none"></circle>303            <path d="M14 14 L20 20" stroke="#000000" stroke-width="2.4" stroke-linecap="round"></path>304          </svg>305        </div>306      </div>307    </div>308  </div>309 310  <!-- Home indicator -->311  <div class="home-indicator"></div>312 313</div>314</body>315</html>