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 Dark Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15    color: #EDEDED;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 22px;22    left: 0;23    right: 0;24    height: 72px;25    padding: 0 40px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #ffffff;30    font-size: 34px;31    letter-spacing: 0.5px;32  }33  .status-right {34    display: flex;35    align-items: center;36    gap: 22px;37  }38  .icon {39    display: inline-flex;40    align-items: center;41    justify-content: center;42  }43 44  /* Logo */45  .logo {46    position: absolute;47    top: 150px;48    left: 52px;49    font-size: 96px;50    font-weight: 700;51    letter-spacing: -1px;52  }53  .logo .e { color: #e53238; }54  .logo .b { color: #0064d2; }55  .logo .a { color: #f5af02; }56  .logo .y { color: #86b817; }57 58  /* Search */59  .search-wrap {60    position: absolute;61    top: 300px;62    left: 52px;63    width: 976px;64    height: 96px;65    border-radius: 48px;66    background: #1f1f1f;67    border: 1px solid #2b2b2b;68    display: flex;69    align-items: center;70    padding: 0 26px;71    gap: 22px;72  }73  .search-placeholder {74    color: #b9b9b9;75    font-size: 36px;76    flex: 1;77  }78  .search-actions {79    display: flex;80    align-items: center;81    gap: 28px;82  }83 84  /* Floating cart */85  .fab-cart {86    position: absolute;87    top: 240px;88    right: 40px;89    width: 110px;90    height: 110px;91    border-radius: 55px;92    background: rgba(255,255,255,0.06);93    display: flex;94    align-items: center;95    justify-content: center;96  }97  .fab-cart-inner {98    width: 86px;99    height: 86px;100    border-radius: 43px;101    background: #2a2a2a;102    display: flex;103    align-items: center;104    justify-content: center;105  }106 107  /* Spinner */108  .spinner {109    position: absolute;110    top: 1050px;111    left: 50%;112    transform: translateX(-50%);113    width: 160px;114    height: 160px;115    border-radius: 50%;116    border: 14px solid #5e95ff;117    border-top-color: transparent;118    border-right-color: #5e95ff;119    border-bottom-color: #5e95ff;120    border-left-color: #5e95ff;121    animation: spin 1.6s linear infinite;122    opacity: 0.95;123  }124  @keyframes spin { from { transform: translateX(-50%) rotate(0deg);} to { transform: translateX(-50%) rotate(360deg);} }125 126  /* Bottom Nav */127  .bottom-bar {128    position: absolute;129    bottom: 84px;130    left: 0;131    width: 100%;132    height: 190px;133    background: #1e1e1e;134    border-top: 1px solid #2a2a2a;135    display: flex;136    align-items: center;137    justify-content: space-around;138    padding: 0 16px;139  }140  .nav-item {141    width: 180px;142    height: 140px;143    color: #d9d9d9;144    text-align: center;145    display: flex;146    flex-direction: column;147    align-items: center;148    justify-content: center;149    gap: 12px;150    font-size: 30px;151  }152  .nav-item svg { width: 56px; height: 56px; }153  .nav-item.active {154    color: #6ea1ff;155    position: relative;156  }157  .nav-item.active::before {158    content: "";159    position: absolute;160    width: 160px;161    height: 120px;162    background: #2a2a2a;163    border-radius: 36px;164    top: 10px;165    left: 10px;166    z-index: -1;167  }168 169  /* Home indicator */170  .home-indicator {171    position: absolute;172    bottom: 24px;173    left: 50%;174    transform: translateX(-50%);175    width: 360px;176    height: 10px;177    background: #e1e1e1;178    border-radius: 10px;179    opacity: 0.9;180  }181</style>182</head>183<body>184<div id="render-target">185 186  <!-- Status bar -->187  <div class="status-bar">188    <div>9:22</div>189    <div class="status-right">190      <!-- Simple "cell/wifi" diamond -->191      <svg class="icon" width="38" height="38" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 2l9 9-9 9-9-9 9-9z"/></svg>192      <!-- Battery -->193      <svg class="icon" width="52" height="38" viewBox="0 0 28 18" fill="none" stroke="#ffffff" stroke-width="2">194        <rect x="1" y="3" width="22" height="12" rx="2"></rect>195        <rect x="3" y="5" width="18" height="8" fill="#ffffff"></rect>196        <rect x="23" y="7" width="3" height="4" fill="#ffffff"></rect>197      </svg>198    </div>199  </div>200 201  <!-- eBay logo (text colors) -->202  <div class="logo"><span class="e">e</span><span class="b">b</span><span class="a">a</span><span class="y">y</span></div>203 204  <!-- Search pill -->205  <div class="search-wrap">206    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">207      <circle cx="11" cy="11" r="7"></circle>208      <path d="M20 20l-4-4"></path>209    </svg>210    <div class="search-placeholder">Search on eBay</div>211    <div class="search-actions">212      <!-- Mic -->213      <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">214        <rect x="9" y="3" width="6" height="10" rx="3"></rect>215        <path d="M5 11a7 7 0 0 0 14 0"></path>216        <path d="M12 18v3"></path>217      </svg>218      <!-- Camera -->219      <svg width="54" height="54" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">220        <rect x="3" y="6" width="18" height="12" rx="2"></rect>221        <path d="M9 6l1.5-2h3L15 6"></path>222        <circle cx="12" cy="12" r="3.2"></circle>223      </svg>224    </div>225  </div>226 227  <!-- Floating cart button -->228  <div class="fab-cart">229    <div class="fab-cart-inner">230      <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">231        <circle cx="9" cy="20" r="1.5"></circle>232        <circle cx="18" cy="20" r="1.5"></circle>233        <path d="M3 4h2l2.4 10.2a2 2 0 0 0 2 1.6h8.6a2 2 0 0 0 1.9-1.4L22 8H7"></path>234      </svg>235    </div>236  </div>237 238  <!-- Center loading spinner -->239  <div class="spinner"></div>240 241  <!-- Bottom navigation -->242  <div class="bottom-bar">243    <div class="nav-item active">244      <svg viewBox="0 0 24 24" fill="none" stroke="#6ea1ff" stroke-width="2">245        <path d="M3 10l9-7 9 7v8a2 2 0 0 1-2 2h-4v-6h-6v6H5a2 2 0 0 1-2-2v-8z"></path>246      </svg>247      <div>Home</div>248    </div>249    <div class="nav-item">250      <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">251        <circle cx="12" cy="8" r="4"></circle>252        <path d="M4 21a8 8 0 0 1 16 0"></path>253      </svg>254      <div>My eBay</div>255    </div>256    <div class="nav-item">257      <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">258        <circle cx="11" cy="11" r="7"></circle>259        <path d="M20 20l-4-4"></path>260      </svg>261      <div>Search</div>262    </div>263    <div class="nav-item">264      <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">265        <path d="M18 8a6 6 0 1 1-12 0"></path>266        <path d="M12 2v4"></path>267        <path d="M5 20h14"></path>268      </svg>269      <div>Inbox</div>270    </div>271    <div class="nav-item">272      <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">273        <path d="M7 3h10l4 6-9 12L3 9l4-6z"></path>274        <circle cx="12" cy="12" r="2"></circle>275      </svg>276      <div>Selling</div>277    </div>278  </div>279 280  <div class="home-indicator"></div>281</div>282</body>283</html>