GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Shoes UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #000000;13    color: #ffffff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 84px;23    background: #000;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 32px;28    box-sizing: border-box;29    font-size: 34px;30    letter-spacing: 0.5px;31  }32  .status-right {33    display: flex;34    gap: 24px;35    align-items: center;36  }37  .battery {38    display: flex;39    align-items: center;40    gap: 10px;41    font-size: 30px;42  }43  .battery-icon {44    width: 46px;45    height: 26px;46    border: 2px solid #fff;47    border-radius: 4px;48    position: relative;49  }50  .battery-icon::after {51    content: "";52    position: absolute;53    right: -8px;54    top: 8px;55    width: 6px;56    height: 10px;57    background: #fff;58    border-radius: 2px;59  }60  .battery-fill {61    position: absolute;62    left: 2px;63    top: 2px;64    height: 20px;65    width: 36px;66    background: #fff;67    border-radius: 2px;68  }69 70  /* Header */71  .header {72    position: absolute;73    top: 84px;74    left: 0;75    width: 1080px;76    height: 160px;77    display: flex;78    align-items: center;79    padding: 0 32px;80    box-sizing: border-box;81    gap: 24px;82  }83  .back {84    width: 80px;85    height: 80px;86    display: flex;87    align-items: center;88    justify-content: center;89  }90  .title {91    font-size: 86px;92    font-weight: 700;93    flex: 1;94  }95  .header-actions {96    display: flex;97    gap: 28px;98    align-items: center;99  }100  .circle-btn {101    width: 112px;102    height: 112px;103    border-radius: 56px;104    background: #1c1c1c;105    display: flex;106    align-items: center;107    justify-content: center;108  }109  .circle-btn svg { width: 56px; height: 56px; fill: #fff; }110 111  /* Banner */112  .banner {113    position: absolute;114    top: 260px;115    left: 32px;116    width: 1016px;117    height: 620px;118    border-radius: 24px;119    overflow: hidden;120    background: #121212;121    box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;122  }123  .banner .img {124    width: 100%;125    height: 420px;126    background: #E0E0E0;127    border-bottom: 1px solid #BDBDBD;128    display: flex;129    align-items: center;130    justify-content: center;131    color: #555;132    font-size: 36px;133  }134  .banner-bottom {135    width: 100%;136    height: 200px;137    background: #256D86;138    color: #fff;139    padding: 32px;140    box-sizing: border-box;141  }142  .banner-bottom .headline {143    font-size: 60px;144    font-weight: 800;145    margin-bottom: 16px;146  }147  .banner-bottom .sub {148    font-size: 38px;149    opacity: 0.95;150    margin-bottom: 22px;151  }152  .banner-bottom .link {153    font-size: 44px;154    font-weight: 700;155  }156 157  /* Section title */158  .section-title {159    position: absolute;160    top: 920px;161    left: 32px;162    font-size: 70px;163    font-weight: 800;164  }165 166  /* Horizontal cards */167  .categories {168    position: absolute;169    top: 1000px;170    left: 32px;171    width: 1016px;172    display: flex;173    gap: 24px;174    overflow: hidden;175  }176  .card {177    width: 240px;178    border-radius: 16px;179    overflow: hidden;180    background: #1a1a1a;181  }182  .card .thumb {183    width: 100%;184    height: 220px;185    background: #E0E0E0;186    border-bottom: 1px solid #BDBDBD;187    display: flex;188    align-items: center;189    justify-content: center;190    color: #666;191    font-size: 26px;192  }193  .card .label {194    padding: 18px;195    box-sizing: border-box;196    font-size: 34px;197    line-height: 1.15;198  }199 200  /* Mid banner */201  .mid-banner {202    position: absolute;203    top: 1260px;204    left: 32px;205    width: 1016px;206    height: 300px;207    border-radius: 24px;208    overflow: hidden;209    background: #2B7D8D;210  }211  .mid-banner .img {212    width: 100%;213    height: 100%;214    background: rgba(255,255,255,0.12);215    border: 1px solid rgba(0,0,0,0.1);216    display: flex;217    align-items: center;218    justify-content: center;219    color: #e6e6e6;220    font-size: 40px;221  }222 223  /* Bottom nav */224  .bottom-nav {225    position: absolute;226    bottom: 0;227    left: 0;228    width: 1080px;229    height: 220px;230    background: #101010;231    border-top: 1px solid #222;232    display: flex;233    align-items: center;234    justify-content: space-around;235  }236  .nav-item {237    width: 180px;238    display: flex;239    flex-direction: column;240    align-items: center;241    color: #bdbdbd;242    gap: 18px;243    font-size: 34px;244  }245  .nav-item svg { width: 64px; height: 64px; fill: #bdbdbd; }246  .nav-item.active svg { fill: #4b8cf3; }247  .nav-item.active { color: #4b8cf3; }248  .search-pill {249    width: 120px;250    height: 120px;251    border-radius: 60px;252    background: #202b45;253    display: flex;254    align-items: center;255    justify-content: center;256    box-shadow: 0 0 0 10px rgba(75,140,243,0.15);257  }258</style>259</head>260<body>261<div id="render-target">262 263  <!-- Status Bar -->264  <div class="status-bar">265    <div>10:52</div>266    <div class="status-right">267      <div>⌁</div>268      <div>📶</div>269      <div class="battery">270        <div class="battery-icon"><div class="battery-fill"></div></div>271        <div>100%</div>272      </div>273    </div>274  </div>275 276  <!-- Header -->277  <div class="header">278    <div class="back">279      <svg viewBox="0 0 24 24">280        <path d="M15.5 5l-7 7 7 7-1.5 1.5L5.5 12 14 3.5z"></path>281      </svg>282    </div>283    <div class="title">Shoes</div>284    <div class="header-actions">285      <div class="circle-btn">286        <svg viewBox="0 0 24 24">287          <circle cx="11" cy="11" r="7" fill="none" stroke="#fff" stroke-width="2"></circle>288          <path d="M20 20l-4-4" stroke="#fff" stroke-width="2" fill="none"></path>289        </svg>290      </div>291      <div class="circle-btn">292        <svg viewBox="0 0 24 24">293          <rect x="4" y="6" width="16" height="12" rx="2"></rect>294          <circle cx="12" cy="12" r="3" fill="#000"></circle>295        </svg>296      </div>297      <div class="circle-btn">298        <svg viewBox="0 0 24 24">299          <path d="M7 6h13l-1.5 8H8L7 6zM8 20a2 2 0 110-4 2 2 0 010 4zm9 0a2 2 0 110-4 2 2 0 010 4z"></path>300        </svg>301      </div>302    </div>303  </div>304 305  <!-- Banner -->306  <div class="banner">307    <div class="img">[IMG: Three women's flat shoes]</div>308    <div class="banner-bottom">309      <div class="headline">Slip into something new</div>310      <div class="sub">Shop flats, sneakers, boots, and more.</div>311      <div class="link">Shop women's shoes</div>312    </div>313  </div>314 315  <!-- Section Title -->316  <div class="section-title">Shop Women's Shoes</div>317 318  <!-- Categories Row -->319  <div class="categories">320    <div class="card">321      <div class="thumb">[IMG: Green rain boots]</div>322      <div class="label">Women's<br>Boots</div>323    </div>324    <div class="card">325      <div class="thumb">[IMG: Burgundy running sneaker]</div>326      <div class="label">Women's<br>Sneakers</div>327    </div>328    <div class="card">329      <div class="thumb">[IMG: Leopard print flats]</div>330      <div class="label">Women's<br>Flats</div>331    </div>332    <div class="card">333      <div class="thumb">[IMG: Black high heels]</div>334      <div class="label">Women's<br>Heels</div>335    </div>336  </div>337 338  <!-- Mid Banner -->339  <div class="mid-banner">340    <div class="img">[IMG: Assorted sneakers banner]</div>341  </div>342 343  <!-- Bottom Navigation -->344  <div class="bottom-nav">345    <div class="nav-item">346      <svg viewBox="0 0 24 24">347        <path d="M3 11l9-7 9 7v9h-6v-5H9v5H3z"></path>348      </svg>349      <div>Home</div>350    </div>351    <div class="nav-item">352      <svg viewBox="0 0 24 24">353        <circle cx="12" cy="8" r="4"></circle>354        <path d="M4 21c0-4 4-7 8-7s8 3 8 7H4z"></path>355      </svg>356      <div>My eBay</div>357    </div>358    <div class="nav-item active">359      <div class="search-pill">360        <svg viewBox="0 0 24 24">361          <circle cx="10" cy="10" r="6" fill="none" stroke="#4b8cf3" stroke-width="2"></circle>362          <path d="M21 21l-5-5" stroke="#4b8cf3" stroke-width="2" fill="none"></path>363        </svg>364      </div>365      <div>Search</div>366    </div>367    <div class="nav-item">368      <svg viewBox="0 0 24 24">369        <path d="M12 3l7 4v6c0 4-3 7-7 7s-7-3-7-7V7l7-4zm0 6a1.5 1.5 0 11.001 3.001A1.5 1.5 0 0112 9z"></path>370      </svg>371      <div>Inbox</div>372    </div>373    <div class="nav-item">374      <svg viewBox="0 0 24 24">375        <path d="M4 6l10-2 6 6-10 10L4 6zm8 3a2 2 0 104 0 2 2 0 00-4 0z"></path>376      </svg>377      <div>Selling</div>378    </div>379  </div>380 381</div>382</body>383</html>