GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>eBay Mobile UI Mock</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #0b0b0b;19    color: #fff;20  }21 22  /* Status bar */23  .status-bar {24    height: 100px;25    padding: 0 36px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    font-weight: 600;30    font-size: 36px;31    color: #eaeaea;32  }33  .status-right {34    display: flex;35    align-items: center;36    gap: 24px;37    font-size: 32px;38  }39  .status-icon {40    width: 36px;41    height: 36px;42  }43 44  /* Header with logo and cart */45  .header {46    padding: 14px 36px 0 36px;47  }48  .logo-row {49    display: flex;50    justify-content: space-between;51    align-items: center;52  }53  .ebay-logo {54    font-size: 84px;55    font-weight: 800;56    letter-spacing: -2px;57  }58  .ebay-logo span:nth-child(1){ color:#e53238;}59  .ebay-logo span:nth-child(2){ color:#0064d2;}60  .ebay-logo span:nth-child(3){ color:#f5af02;}61  .ebay-logo span:nth-child(4){ color:#86b817;}62 63  .cart-btn {64    width: 96px;65    height: 96px;66    border-radius: 48px;67    background:#1f1f1f;68    display:flex;69    align-items:center;70    justify-content:center;71  }72 73  /* Search bar */74  .search-bar {75    margin-top: 26px;76    height: 120px;77    background:#1e1e1e;78    border-radius: 60px;79    display:flex;80    align-items:center;81    padding: 0 32px;82    gap: 22px;83    border: 1px solid #2b2b2b;84  }85  .search-input {86    flex: 1;87    color:#cfcfcf;88    font-size: 40px;89  }90  .search-actions {91    display:flex;92    align-items:center;93    gap: 22px;94  }95  .icon-btn {96    width: 84px;97    height: 84px;98    border-radius: 42px;99    display:flex;100    align-items:center;101    justify-content:center;102    background:#272727;103    border: 1px solid #333;104  }105 106  /* Pills row */107  .pills {108    margin-top: 26px;109    display:flex;110    gap: 22px;111    padding-bottom: 8px;112  }113  .pill {114    display:flex;115    align-items:center;116    gap: 16px;117    background:#232323;118    border: 1px solid #303030;119    color:#e8e8e8;120    padding: 24px 34px;121    border-radius: 42px;122    font-size: 38px;123    white-space: nowrap;124  }125 126  /* Banners */127  .banner {128    margin-top: 36px;129    margin-left: 0;130    width: 100%;131    padding: 44px 36px 54px 36px;132  }133  .banner.light {134    background:#e8d568;135    color:#3e1f0e;136  }137  .banner.dark {138    background:#e2b63d;139    color:#3b210f;140  }141  .banner h1 {142    margin: 0 0 12px 0;143    font-size: 72px;144    line-height: 1.1;145    font-weight: 800;146    letter-spacing: -1px;147  }148  .banner p {149    margin: 0;150    font-size: 40px;151  }152  .banner .cta {153    margin-top: 36px;154    display:inline-flex;155    align-items:center;156    justify-content:center;157    background:#4a2b1b;158    color:#f5e7c8;159    padding: 28px 48px;160    border-radius: 64px;161    font-size: 42px;162    font-weight: 700;163  }164 165  /* Promo tiles below second banner */166  .promo-grid {167    display:flex;168    gap: 24px;169    padding: 24px 36px 24px 36px;170  }171  .promo-card {172    flex: 1;173    background:#f0ca5b;174    border-radius: 36px;175    padding: 28px;176    color:#3b210f;177    display:flex;178    flex-direction: column;179    gap: 24px;180  }181  .promo-title {182    font-size: 50px;183    font-weight: 800;184  }185  .promo-img {186    height: 420px;187    background:#E0E0E0;188    border: 1px solid #BDBDBD;189    display:flex;190    align-items:center;191    justify-content:center;192    color:#757575;193    border-radius: 18px;194    font-size: 34px;195  }196 197  /* Bottom nav */198  .bottom-nav {199    position: absolute;200    bottom: 0;201    left: 0;202    right: 0;203    height: 180px;204    background:#0e0e0e;205    border-top: 1px solid #1f1f1f;206    padding: 16px 36px 24px 36px;207    display:flex;208    align-items:flex-end;209    justify-content: space-between;210  }211  .nav-item {212    width: 180px;213    display:flex;214    flex-direction: column;215    align-items:center;216    gap: 16px;217    color:#eaeaea;218    font-size: 34px;219  }220  .nav-icon {221    width: 84px;222    height: 84px;223    border-radius: 16px;224    display:flex;225    align-items:center;226    justify-content:center;227    background:#1f1f1f;228    border: 1px solid #2b2b2b;229  }230  .nav-item.active .nav-icon {231    background:#1b2a41;232    border-color:#2a3c5f;233  }234  .nav-item.active {235    color:#cfe0ff;236    font-weight:700;237  }238 239  /* Simple utility svg style */240  svg { fill: none; stroke: currentColor; stroke-width: 4; }241</style>242</head>243<body>244<div id="render-target">245 246  <!-- Status Bar -->247  <div class="status-bar">248    <div class="status-left">10:51</div>249    <div class="status-right">250      <!-- signal icon -->251      <svg class="status-icon" viewBox="0 0 24 24">252        <path d="M3 20h2M6 16h2M9 12h2M12 8h2M15 4h2"></path>253      </svg>254      <!-- wifi icon -->255      <svg class="status-icon" viewBox="0 0 24 24">256        <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M8 16c2-2 6-2 8 0M12 20h0"></path>257      </svg>258      <!-- battery icon -->259      <svg class="status-icon" viewBox="0 0 24 24">260        <rect x="2" y="6" width="18" height="12" rx="2"></rect>261        <rect x="20" y="10" width="2" height="4"></rect>262      </svg>263      <span style="font-weight:700;">100%</span>264    </div>265  </div>266 267  <!-- Header with logo and cart -->268  <div class="header">269    <div class="logo-row">270      <div class="ebay-logo">271        <span>e</span><span>b</span><span>a</span><span>y</span>272      </div>273      <div class="cart-btn">274        <svg viewBox="0 0 24 24" width="48" height="48" style="stroke:#fff;">275          <path d="M3 5h3l2 12h10l2-9H7"></path>276          <circle cx="9" cy="20" r="1.8"></circle>277          <circle cx="17" cy="20" r="1.8"></circle>278        </svg>279      </div>280    </div>281 282    <!-- Search bar -->283    <div class="search-bar">284      <div class="icon-btn" style="background:#2a2a2a;">285        <svg viewBox="0 0 24 24" width="42" height="42" style="stroke:#bdbdbd;">286          <circle cx="10" cy="10" r="6"></circle>287          <path d="M14 14l6 6"></path>288        </svg>289      </div>290      <div class="search-input">Search on eBay</div>291      <div class="search-actions">292        <div class="icon-btn">293          <!-- mic -->294          <svg viewBox="0 0 24 24" width="40" height="40" style="stroke:#dcdcdc;">295            <rect x="8" y="4" width="8" height="10" rx="4"></rect>296            <path d="M5 11c0 4 3 6 7 6s7-2 7-6M12 17v3M9 20h6"></path>297          </svg>298        </div>299        <div class="icon-btn">300          <!-- camera -->301          <svg viewBox="0 0 24 24" width="42" height="42" style="stroke:#dcdcdc;">302            <rect x="3" y="6" width="18" height="12" rx="2"></rect>303            <path d="M8 6l2-2h4l2 2"></path>304            <circle cx="12" cy="12" r="3"></circle>305          </svg>306        </div>307      </div>308    </div>309 310    <!-- Pills -->311    <div class="pills">312      <div class="pill">313        <svg viewBox="0 0 24 24" width="40" height="40" style="stroke:#cfcfcf;">314          <path d="M3 6h18v12H3z"></path>315          <path d="M7 10h10"></path>316        </svg>317        Selling318      </div>319      <div class="pill">320        <svg viewBox="0 0 24 24" width="40" height="40" style="stroke:#cfcfcf;">321          <path d="M4 20l8-16 8 16H4z"></path>322        </svg>323        Deals324      </div>325      <div class="pill">326        <svg viewBox="0 0 24 24" width="40" height="40" style="stroke:#cfcfcf;">327          <circle cx="6" cy="8" r="3"></circle>328          <circle cx="18" cy="8" r="3"></circle>329          <circle cx="6" cy="16" r="3"></circle>330          <circle cx="18" cy="16" r="3"></circle>331        </svg>332        Categories333      </div>334      <div class="pill">335        <svg viewBox="0 0 24 24" width="40" height="40" style="stroke:#cfcfcf;">336          <path d="M12 21s-7-4.5-7-10a4 4 0 018 0 4 4 0 018 0c0 5.5-7 10-7 10z"></path>337        </svg>338        Saved339      </div>340    </div>341  </div>342 343  <!-- Banner 1 -->344  <div class="banner light">345    <h1>Have you been selling on eBay already?</h1>346    <p>To pay your fees or ask questions</p>347    <div class="cta">Read more</div>348  </div>349 350  <!-- Banner 2 -->351  <div class="banner dark" style="margin-top: 18px;">352    <h1>Wanna get ’em all?</h1>353    <p>Grow your Pokémon collection with cards, sealed packs and boxes.</p>354    <div class="cta">Get ’em here</div>355  </div>356 357  <!-- Promo tiles -->358  <div class="promo-grid">359    <div class="promo-card">360      <div class="promo-title">Pokémon cards</div>361      <div class="promo-img">[IMG: Pokémon Card - Venusaur]</div>362    </div>363    <div class="promo-card">364      <div class="promo-title">Sealed packs</div>365      <div class="promo-img">[IMG: Pokémon Sealed Pack]</div>366    </div>367  </div>368 369  <!-- Bottom Navigation -->370  <div class="bottom-nav">371    <div class="nav-item active">372      <div class="nav-icon">373        <!-- Home icon -->374        <svg viewBox="0 0 24 24" width="44" height="44" style="stroke:#cfe0ff;">375          <path d="M3 10l9-7 9 7"></path>376          <path d="M5 10v10h14V10"></path>377        </svg>378      </div>379      Home380    </div>381    <div class="nav-item">382      <div class="nav-icon">383        <!-- User icon -->384        <svg viewBox="0 0 24 24" width="44" height="44" style="stroke:#eaeaea;">385          <circle cx="12" cy="8" r="4"></circle>386          <path d="M4 20c0-4 4-6 8-6s8 2 8 6"></path>387        </svg>388      </div>389      My eBay390    </div>391    <div class="nav-item">392      <div class="nav-icon">393        <!-- Search icon -->394        <svg viewBox="0 0 24 24" width="44" height="44" style="stroke:#eaeaea;">395          <circle cx="11" cy="11" r="6"></circle>396          <path d="M16 16l6 6"></path>397        </svg>398      </div>399      Search400    </div>401    <div class="nav-item">402      <div class="nav-icon">403        <!-- Bell icon -->404        <svg viewBox="0 0 24 24" width="44" height="44" style="stroke:#eaeaea;">405          <path d="M6 17h12l-2-3V9a6 6 0 00-12 0v5l-2 3z"></path>406          <path d="M10 20a2 2 0 004 0"></path>407        </svg>408      </div>409      Inbox410    </div>411    <div class="nav-item">412      <div class="nav-icon">413        <!-- Tag icon -->414        <svg viewBox="0 0 24 24" width="44" height="44" style="stroke:#eaeaea;">415          <path d="M3 12l9-9 9 9-9 9-9-9z"></path>416          <circle cx="9" cy="9" r="2"></circle>417        </svg>418      </div>419      Selling420    </div>421  </div>422 423</div>424</body>425</html>