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 App Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0B0B0B;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif;16    color: #FFFFFF;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 22px;23    left: 38px;24    right: 38px;25    display: flex;26    justify-content: space-between;27    align-items: center;28    font-size: 34px;29    color: #EAEAEA;30    opacity: 0.9;31  }32  .status-icons {33    display: flex;34    gap: 22px;35    align-items: center;36  }37  .ico {38    display: inline-block;39    vertical-align: middle;40  }41 42  /* Header */43  .header {44    padding: 110px 40px 30px 40px; /* leave room for status bar */45  }46  .logo {47    font-weight: 800;48    letter-spacing: -1px;49    font-size: 110px;50    margin-top: 40px;51  }52  .logo .e { color: #E53238; }53  .logo .b { color: #0064D2; }54  .logo .a { color: #F5AF02; }55  .logo .y { color: #86B817; }56 57  /* Search */58  .search-wrap {59    margin-top: 36px;60  }61  .search-bar {62    background: #1B1B1B;63    border: 1px solid #2A2A2A;64    border-radius: 60px;65    height: 120px;66    display: flex;67    align-items: center;68    padding: 0 26px 0 34px;69    gap: 22px;70  }71  .search-input {72    color: #BFBFBF;73    font-size: 42px;74    flex: 1;75  }76  .search-actions {77    display: flex;78    gap: 18px;79    align-items: center;80  }81  .icon-btn {82    width: 86px;83    height: 86px;84    border-radius: 43px;85    background: #222;86    border: 1px solid #2E2E2E;87    display: flex;88    align-items: center;89    justify-content: center;90  }91 92  /* Quick filters */93  .chips {94    margin-top: 26px;95    display: flex;96    gap: 22px;97    flex-wrap: nowrap;98  }99  .chip {100    display: flex;101    align-items: center;102    gap: 16px;103    padding: 24px 34px;104    font-size: 34px;105    border-radius: 46px;106    border: 1px solid #3A3A3A;107    background: #121212;108    color: #E8E8E8;109  }110 111  /* Floating cart */112  .floating-cart {113    position: absolute;114    top: 460px;115    right: 34px;116    width: 120px;117    height: 120px;118    border-radius: 60px;119    background: #1E1E1E;120    border: 1px solid #2E2E2E;121    box-shadow: 0 10px 20px rgba(0,0,0,0.35);122    display: flex;123    align-items: center;124    justify-content: center;125  }126 127  /* Yellow notice banner */128  .notice {129    margin-top: 34px;130    background: #EEDB6F;131    color: #3C2716;132    padding: 60px 40px 74px 40px;133  }134  .notice h1 {135    margin: 0 0 18px 0;136    font-size: 64px;137    line-height: 1.1;138    font-weight: 800;139    letter-spacing: -0.5px;140  }141  .notice p {142    margin: 0 0 40px 0;143    font-size: 40px;144    color: #4B3422;145  }146  .btn-brown {147    background: #4A2E20;148    color: #F4EDE7;149    border: none;150    padding: 28px 44px;151    font-size: 40px;152    border-radius: 60px;153    width: 320px;154    text-align: center;155  }156 157  /* Teal hero */158  .teal-hero {159    margin-top: 26px;160    background: #8EDBD6;161    color: #223C47;162    padding: 60px 40px 50px 40px;163  }164  .teal-hero h2 {165    margin: 0 0 34px 0;166    font-size: 64px;167    line-height: 1.15;168    font-weight: 800;169    letter-spacing: -0.5px;170    max-width: 900px;171  }172  .btn-blue {173    background: #25455B;174    color: #EAF6FF;175    border: none;176    padding: 30px 60px;177    font-size: 42px;178    border-radius: 60px;179    width: 340px;180    text-align: center;181  }182 183  .card-grid {184    margin-top: 34px;185    display: grid;186    grid-template-columns: 1fr 1fr;187    gap: 24px;188  }189  .card {190    border-radius: 28px;191    overflow: hidden;192    background: #E0E0E0;193    border: 1px solid #BDBDBD;194    height: 360px;195    display: flex;196    align-items: center;197    justify-content: center;198    color: #555;199    font-size: 36px;200    text-align: center;201    padding: 20px;202  }203  .card.yellowish {204    background: #F5E589;205    border-color: #D9C975;206    color: #5A4A1B;207  }208 209  /* Bottom navigation */210  .bottom-nav {211    position: absolute;212    left: 0;213    right: 0;214    bottom: 80px;215    height: 180px;216    background: #111111;217    border-top: 1px solid #2E2E2E;218    display: flex;219    align-items: center;220    justify-content: space-around;221    padding: 10px 20px 0 20px;222  }223  .nav-item {224    display: flex;225    flex-direction: column;226    align-items: center;227    gap: 14px;228    color: #CFCFCF;229    font-size: 30px;230  }231  .nav-item .icon-circle {232    width: 98px;233    height: 98px;234    border-radius: 49px;235    background: #1E1E1E;236    border: 1px solid #2A2A2A;237    display: flex;238    align-items: center;239    justify-content: center;240  }241  .nav-item.active .icon-circle {242    background: #1F2EFD22;243    border-color: #295CFF;244  }245  .nav-item.active .label {246    color: #9CC2FF;247  }248 249  /* Home indicator */250  .home-indicator {251    position: absolute;252    left: 50%;253    transform: translateX(-50%);254    bottom: 24px;255    width: 300px;256    height: 10px;257    background: #FFFFFF;258    border-radius: 6px;259    opacity: 0.8;260  }261</style>262</head>263<body>264<div id="render-target">265 266  <!-- Status bar -->267  <div class="status-bar">268    <div>11:06</div>269    <div class="status-icons">270      <svg class="ico" width="36" height="36" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M3 12a9 9 0 0 1 18 0h-2a7 7 0 0 0-14 0H3z"/></svg>271      <svg class="ico" width="36" height="36" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M2 18h20v2H2zM4 14h16v2H4zM6 10h12v2H6zM8 6h8v2H8z"/></svg>272    </div>273  </div>274 275  <!-- Header -->276  <div class="header">277    <div class="logo"><span class="e">e</span><span class="b">b</span><span class="a">a</span><span class="y">y</span></div>278 279    <div class="search-wrap">280      <div class="search-bar">281        <svg width="54" height="54" viewBox="0 0 24 24" fill="none">282          <circle cx="11" cy="11" r="7.5" stroke="#BDBDBD" stroke-width="2"></circle>283          <path d="M16.5 16.5L22 22" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round"></path>284        </svg>285        <div class="search-input">Search on eBay</div>286        <div class="search-actions">287          <div class="icon-btn">288            <svg width="40" height="40" viewBox="0 0 24 24" fill="none">289              <path d="M12 2a3 3 0 0 1 3 3v5a3 3 0 0 1-6 0V5a3 3 0 0 1 3-3z" stroke="#E0E0E0" stroke-width="2"></path>290              <path d="M7 14v1a5 5 0 0 0 10 0v-1" stroke="#E0E0E0" stroke-width="2" stroke-linecap="round"></path>291            </svg>292          </div>293          <div class="icon-btn">294            <svg width="40" height="40" viewBox="0 0 24 24" fill="none">295              <rect x="3" y="6" width="18" height="12" rx="2" stroke="#E0E0E0" stroke-width="2"></rect>296              <circle cx="12" cy="12" r="3" stroke="#E0E0E0" stroke-width="2"></circle>297            </svg>298          </div>299        </div>300      </div>301    </div>302 303    <div class="chips">304      <div class="chip">305        <svg width="36" height="36" viewBox="0 0 24 24" fill="none">306          <path d="M6 6h12v12H6z" stroke="#E8E8E8" stroke-width="2"></path>307        </svg>308        <span>Selling</span>309      </div>310      <div class="chip">311        <svg width="36" height="36" viewBox="0 0 24 24" fill="#E8E8E8">312          <path d="M13 2 4 14h6l-1 8 9-12h-6l1-8z"></path>313        </svg>314        <span>Deals</span>315      </div>316      <div class="chip">317        <svg width="36" height="36" viewBox="0 0 24 24" fill="#E8E8E8">318          <rect x="3" y="3" width="7" height="7" rx="1"></rect>319          <rect x="14" y="3" width="7" height="7" rx="1"></rect>320          <rect x="3" y="14" width="7" height="7" rx="1"></rect>321          <rect x="14" y="14" width="7" height="7" rx="1"></rect>322        </svg>323        <span>Categories</span>324      </div>325      <div class="chip">326        <svg width="36" height="36" viewBox="0 0 24 24" fill="none">327          <path d="M12 21s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 5.6-7 10-7 10z" stroke="#E8E8E8" stroke-width="2" fill="none"></path>328        </svg>329        <span>Saved</span>330      </div>331    </div>332  </div>333 334  <!-- Floating cart -->335  <div class="floating-cart">336    <svg width="54" height="54" viewBox="0 0 24 24" fill="none">337      <path d="M3 6h2l2.5 9h9l2-6H7" stroke="#EAEAEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>338      <circle cx="10" cy="19" r="1.5" fill="#EAEAEA"></circle>339      <circle cx="17" cy="19" r="1.5" fill="#EAEAEA"></circle>340    </svg>341  </div>342 343  <!-- Yellow banner -->344  <section class="notice">345    <h1>Have you been selling on eBay already?</h1>346    <p>To pay your fees or ask questions</p>347    <div>348      <button class="btn-brown">Read more</button>349    </div>350  </section>351 352  <!-- Teal hero -->353  <section class="teal-hero">354    <h2>Shop millions of items for you and your home.</h2>355    <button class="btn-blue">Shop Now</button>356 357    <div class="card-grid">358      <div class="card">359        [IMG: Warehouse scene - "Sell your products to 182 million customers across 190 countries"]360      </div>361      <div class="card yellowish">362        [IMG: Product display - "Looking to shop at eBay"]363      </div>364    </div>365  </section>366 367  <!-- Bottom navigation -->368  <nav class="bottom-nav">369    <div class="nav-item active">370      <div class="icon-circle">371        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">372          <path d="M3 10.5 12 3l9 7.5V21H3z" stroke="#9CC2FF" stroke-width="2" fill="none"></path>373        </svg>374      </div>375      <div class="label">Home</div>376    </div>377    <div class="nav-item">378      <div class="icon-circle">379        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">380          <circle cx="12" cy="8" r="3.5" stroke="#E0E0E0" stroke-width="2"></circle>381          <path d="M4 20a8 8 0 0 1 16 0" stroke="#E0E0E0" stroke-width="2" fill="none"></path>382        </svg>383      </div>384      <div class="label">My eBay</div>385    </div>386    <div class="nav-item">387      <div class="icon-circle">388        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">389          <circle cx="11" cy="11" r="7.5" stroke="#E0E0E0" stroke-width="2"></circle>390          <path d="M16.5 16.5L22 22" stroke="#E0E0E0" stroke-width="2" stroke-linecap="round"></path>391        </svg>392      </div>393      <div class="label">Search</div>394    </div>395    <div class="nav-item">396      <div class="icon-circle">397        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">398          <path d="M6 8a6 6 0 0 1 12 0v6l2 2H4l2-2z" stroke="#E0E0E0" stroke-width="2"></path>399        </svg>400      </div>401      <div class="label">Inbox</div>402    </div>403    <div class="nav-item">404      <div class="icon-circle">405        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">406          <path d="M3 7l9-4 9 4-9 10L3 7z" stroke="#E0E0E0" stroke-width="2"></path>407        </svg>408      </div>409      <div class="label">Selling</div>410    </div>411  </nav>412 413  <div class="home-indicator"></div>414</div>415</body>416</html>