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>Picked for you - Mock</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, Arial, Helvetica, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 96px;26    padding: 0 28px;27    box-sizing: border-box;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #EDEDED;32    font-weight: 600;33    letter-spacing: 1px;34  }35  .status-icons {36    display: flex;37    align-items: center;38    gap: 18px;39  }40  .dot { width: 8px; height: 8px; background: #CFCFCF; border-radius: 50%; display: inline-block; }41 42  /* Header */43  .header {44    position: absolute;45    top: 96px;46    left: 0;47    width: 100%;48    padding: 16px 28px 8px 28px;49    box-sizing: border-box;50  }51  .header-row {52    display: flex;53    align-items: center;54    justify-content: space-between;55  }56  .title-wrap {57    display: flex;58    align-items: center;59    gap: 18px;60  }61  .back-btn {62    width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center;63  }64  .page-title {65    font-size: 72px;66    font-weight: 800;67    letter-spacing: -0.5px;68  }69  .action-btns {70    display: flex;71    align-items: center;72    gap: 20px;73  }74  .circle-btn {75    width: 96px; height: 96px; border-radius: 48px;76    background: #262626; display: inline-flex; align-items: center; justify-content: center;77  }78 79  /* Content area */80  .content {81    position: absolute;82    top: 230px;83    left: 0;84    right: 0;85    bottom: 190px; /* space for bottom bar */86    overflow: hidden; /* page screenshot slice; no scroll */87    padding: 0 28px;88    box-sizing: border-box;89  }90  .section-header {91    margin-top: 8px;92    margin-bottom: 16px;93  }94  .section-title {95    font-size: 56px;96    font-weight: 800;97    margin: 0 0 8px 8px;98  }99  .section-sub {100    color: #A9A9A9;101    font-size: 28px;102    margin-left: 8px;103  }104 105  /* Grid of items */106  .grid {107    display: grid;108    grid-template-columns: 1fr 1fr;109    gap: 24px;110    padding: 8px;111    box-sizing: border-box;112  }113  .card {114    background: transparent;115    border-radius: 28px;116  }117  .img-box {118    width: 100%;119    height: 360px;120    background: #E0E0E0;121    border: 1px solid #BDBDBD;122    border-radius: 36px;123    display: flex;124    align-items: center;125    justify-content: center;126    color: #757575;127    font-weight: 600;128    text-align: center;129    padding: 16px;130    box-sizing: border-box;131  }132  .card-title {133    margin: 14px 6px 6px 6px;134    font-size: 32px;135    line-height: 40px;136    font-weight: 600;137    color: #FFFFFF;138  }139  .price {140    margin: 4px 6px;141    font-size: 48px;142    font-weight: 800;143  }144  .old-price-line {145    margin: 0 6px;146    color: #B0B0B0;147    font-size: 26px;148  }149  .meta {150    margin: 6px;151    color: #AFAFAF;152    font-size: 28px;153  }154  .badge {155    display: inline-flex;156    align-items: center;157    gap: 8px;158    background: #0E2AFA20;159    color: #9CC3FF;160    border: 1px solid #2E62FF;161    padding: 6px 10px;162    border-radius: 12px;163    font-size: 24px;164    margin-left: 6px;165  }166 167  /* Bottom nav */168  .bottom-nav {169    position: absolute;170    bottom: 0;171    left: 0;172    width: 1080px;173    height: 190px;174    background: #0B0B0B;175    border-top: 1px solid #202020;176    box-sizing: border-box;177    padding: 16px 24px 22px 24px;178  }179  .grabber {180    width: 180px; height: 10px; border-radius: 6px; background: #EDEDED;181    opacity: 0.9; margin: 0 auto 8px auto;182  }183  .nav-row {184    display: flex;185    align-items: center;186    justify-content: space-between;187    padding: 8px 12px 0 12px;188  }189  .nav-item {190    width: 20%;191    text-align: center;192    color: #C9C9C9;193    font-size: 28px;194  }195  .nav-icon {196    width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center;197    margin-bottom: 6px;198  }199  .active { color: #4DA3FF; }200</style>201</head>202<body>203<div id="render-target">204 205  <!-- Status bar -->206  <div class="status-bar">207    <div style="font-size:32px;">8:30</div>208    <div class="status-icons">209      <span class="dot"></span>210      <span class="dot"></span>211      <span class="dot"></span>212      <svg width="32" height="24" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M3 18h18L12 3 3 18z"/></svg>213      <svg width="26" height="24" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M6 7h11a1 1 0 0 1 1 1v8H6V7zm-2 9h15v1a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1z"/></svg>214    </div>215  </div>216 217  <!-- Header -->218  <div class="header">219    <div class="header-row">220      <div class="title-wrap">221        <div class="back-btn">222          <svg width="48" height="48" viewBox="0 0 24 24" fill="#FFFFFF">223            <path d="M15.5 5l-7 7 7 7" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>224          </svg>225        </div>226        <div class="page-title">Picked for you</div>227      </div>228      <div class="action-btns">229        <div class="circle-btn">230          <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">231            <circle cx="11" cy="11" r="7"></circle>232            <path d="M20 20l-3.5-3.5"></path>233          </svg>234        </div>235        <div class="circle-btn">236          <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">237            <path d="M6 6h15l-1.5 9H7.5L6 6z"></path>238            <circle cx="9" cy="19" r="1.5" fill="#FFFFFF"></circle>239            <circle cx="17" cy="19" r="1.5" fill="#FFFFFF"></circle>240          </svg>241        </div>242      </div>243    </div>244  </div>245 246  <!-- Content -->247  <div class="content">248    <div class="section-header">249      <div class="section-title">More like this</div>250      <div class="section-sub">Sponsored</div>251    </div>252 253    <div class="grid">254      <!-- Card 1 -->255      <div class="card">256        <div class="img-box">[IMG: Purple Nike Running Shoes]</div>257        <div class="card-title">Nike React Infinity Run FK 3 (Womens) Light Bordeaux</div>258        <div class="price">$70.00</div>259        <div class="meta">+ US $75.83 shipping</div>260        <div class="badge">261          <svg width="16" height="16" viewBox="0 0 24 24" fill="#2E62FF"><path d="M12 2l3 7h7l-5.5 4.2L18 21l-6-4-6 4 1.5-7.8L2 9h7z"/></svg>262          Top Rated Plus263        </div>264      </div>265 266      <!-- Card 2 -->267      <div class="card">268        <div class="img-box">[IMG: Black Nike Shoes with Orange Box]</div>269        <div class="card-title">Nike React Infinity Run Flyknit 2 Womens Running Shoes</div>270        <div class="price">$64.00</div>271        <div class="old-price-line"><s>US $80.00</s> 20% off</div>272        <div class="meta">+ US $75.66 shipping</div>273      </div>274 275      <!-- Card 3 -->276      <div class="card">277        <div class="img-box">[IMG: White/Pink Nike React Infinity Run]</div>278        <div class="card-title">Nike React Infinity Run Flyknit 3 PREMIUM Women's Shoes</div>279        <div class="price">$199.00</div>280        <div class="meta">+ US $15.00 shipping</div>281        <div class="meta">5 watchers</div>282      </div>283 284      <!-- Card 4 -->285      <div class="card">286        <div class="img-box">[IMG: Grid of Multiple Nike Colorways]</div>287        <div class="card-title">Nike Wmns React Infinity Run FK 2 Flyknit Women Sneakers</div>288        <div class="price">$—</div>289        <div class="meta">Multiple styles available</div>290      </div>291 292      <!-- Card 5 (partial row starting like the next line in screenshot) -->293      <div class="card">294        <div class="img-box">[IMG: Row of Nike Shoes Thumbnails]</div>295        <div class="card-title">Style Codes Variants Collection</div>296        <div class="meta">CT2423002 • DJ5396100 • CT2423004</div>297      </div>298 299      <div class="card">300        <div class="img-box">[IMG: More Nike Colorways Thumbnails]</div>301        <div class="card-title">More colorways • Pick 1</div>302        <div class="meta">Ships worldwide</div>303      </div>304    </div>305  </div>306 307  <!-- Bottom Navigation -->308  <div class="bottom-nav">309    <div class="grabber"></div>310    <div class="nav-row">311      <div class="nav-item active">312        <div class="nav-icon">313          <svg width="40" height="40" viewBox="0 0 24 24" fill="#4DA3FF">314            <path d="M12 3l9 8h-3v9H6v-9H3l9-8z"/>315          </svg>316        </div>317        Home318      </div>319      <div class="nav-item">320        <div class="nav-icon">321          <svg width="40" height="40" viewBox="0 0 24 24" fill="#C9C9C9">322            <circle cx="12" cy="8" r="4"></circle>323            <path d="M4 20c1-4 6-5 8-5s7 1 8 5H4z"></path>324          </svg>325        </div>326        My eBay327      </div>328      <div class="nav-item">329        <div class="nav-icon">330          <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#C9C9C9" stroke-width="2">331            <circle cx="11" cy="11" r="7"></circle>332            <path d="M20 20l-3.5-3.5"></path>333          </svg>334        </div>335        Search336      </div>337      <div class="nav-item">338        <div class="nav-icon">339          <svg width="40" height="40" viewBox="0 0 24 24" fill="#C9C9C9">340            <path d="M12 3a6 6 0 0 0-6 6v3l-2 2v1h16v-1l-2-2V9a6 6 0 0 0-6-6zM9 20a3 3 0 0 0 6 0H9z"/>341          </svg>342        </div>343        Inbox344      </div>345      <div class="nav-item">346        <div class="nav-icon">347          <svg width="40" height="40" viewBox="0 0 24 24" fill="#C9C9C9">348            <path d="M7 2h10l3 6-8 14L4 8l3-6zm3 4h4v2h-4V6z"/>349          </svg>350        </div>351        Selling352      </div>353    </div>354  </div>355 356</div>357</body>358</html>