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; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000;15    color: #fff;16  }17 18  /* Header */19  .header {20    display: flex;21    align-items: center;22    padding: 48px 32px 24px;23    gap: 18px;24  }25  .back {26    width: 64px;27    height: 64px;28    display: flex;29    align-items: center;30    justify-content: center;31  }32  .title {33    font-weight: 800;34    font-size: 58px;35    letter-spacing: -0.5px;36  }37  .header-actions {38    margin-left: auto;39    display: flex;40    gap: 18px;41  }42  .icon-btn {43    width: 96px;44    height: 96px;45    border-radius: 48px;46    background: #1c1c1c;47    border: 1px solid #2e2e2e;48    display: flex;49    align-items: center;50    justify-content: center;51  }52  .icon-btn svg { width: 48px; height: 48px; fill: #eaeaea; }53 54  /* Feed */55  .feed {56    padding: 8px 28px 180px;57    display: grid;58    grid-template-columns: 1fr 1fr;59    grid-column-gap: 28px;60    grid-row-gap: 26px;61  }62  .card {63    border-radius: 28px;64    overflow: visible;65    color: #fff;66  }67  .img {68    width: 100%;69    height: 320px;70    background: #E0E0E0;71    border: 1px solid #BDBDBD;72    border-radius: 28px;73    color: #757575;74    display: flex;75    align-items: center;76    justify-content: center;77    text-align: center;78    font-size: 26px;79    padding: 12px;80  }81  .img.tall { height: 420px; }82  .img.wide { height: 260px; }83  .card .t {84    font-size: 36px;85    line-height: 1.25;86    margin-top: 14px;87    color: #fff;88  }89  .price {90    margin-top: 10px;91    font-size: 52px;92    font-weight: 800;93    color: #fff;94  }95  .meta {96    margin-top: 6px;97    font-size: 30px;98    color: #bfbfbf;99  }100  .watchers { font-weight: 800; color: #fff; }101 102  /* Text-only card variant (like the first one) */103  .text-card {104    padding: 8px 6px;105  }106  .text-card .t { font-size: 40px; }107  .text-card .price { font-size: 56px; }108 109  /* Bottom nav */110  .bottom-nav {111    position: absolute;112    left: 0; right: 0; bottom: 0;113    height: 150px;114    background: #111;115    border-top: 1px solid #2e2e2e;116    display: flex;117    justify-content: space-around;118    align-items: center;119    padding: 0 18px;120  }121  .nav-item {122    display: flex;123    flex-direction: column;124    align-items: center;125    gap: 8px;126    color: #cfcfcf;127    font-size: 28px;128  }129  .nav-item svg { width: 44px; height: 44px; fill: #cfcfcf; }130  .nav-item.active { color: #4aa3ff; }131  .nav-item.active svg { fill: #4aa3ff; }132 133  /* Subtle rounded corners on images like the app */134  .rounded { border-radius: 32px; overflow: hidden; }135 136</style>137</head>138<body>139<div id="render-target">140 141  <!-- Header -->142  <div class="header">143    <div class="back" aria-label="Back">144      <svg viewBox="0 0 24 24">145        <path d="M15.7 3.3a1 1 0 0 1 0 1.4L9.4 11l6.3 6.3a1 1 0 1 1-1.4 1.4l-7-7a1 1 0 0 1 0-1.4l7-7a1 1 0 0 1 1.4 0z"/>146      </svg>147    </div>148    <div class="title">Picked for you</div>149    <div class="header-actions">150      <div class="icon-btn" aria-label="Search">151        <svg viewBox="0 0 24 24">152          <path d="M21 21l-4.2-4.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15z" stroke="#eaeaea" stroke-width="2" fill="none" stroke-linecap="round"/>153        </svg>154      </div>155      <div class="icon-btn" aria-label="Cart">156        <svg viewBox="0 0 24 24">157          <path d="M7 6h13l-1.6 8.5a2 2 0 0 1-2 1.5H9.1a2 2 0 0 1-2-1.6L5.2 3.5H2" stroke="#eaeaea" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>158          <circle cx="9" cy="20" r="1.6"></circle>159          <circle cx="17" cy="20" r="1.6"></circle>160        </svg>161      </div>162    </div>163  </div>164 165  <!-- Feed grid -->166  <div class="feed">167 168    <!-- Left column: text-first card -->169    <div class="card text-card">170      <div class="t">Nike React Infinity Run Flyknit 3 PREMIUM Women's Running Shoes FD4151-100</div>171      <div class="price">$199.00</div>172      <div class="meta">+ US $15.00 shipping</div>173      <div class="meta watchers">5 watchers</div>174    </div>175 176    <!-- Right column first: collage image -->177    <div class="card">178      <div class="img wide">[IMG: Assorted Nike shoes grid]</div>179      <div class="t">Nike Wmns React Infinity Run FK 2 Flyknit Women Running Shoes Sneakers Pick 1</div>180      <div class="price">$72.83</div>181      <div class="meta">Free shipping · Seller with a 99.8% positive feedback</div>182    </div>183 184    <!-- Left: collage grid -->185    <div class="card">186      <div class="img tall">[IMG: Assorted Nike colorways grid]</div>187      <div class="t">Nike Wmns React Infinity Run FK 2 Flyknit Women Running Shoes Sneakers Pick 1</div>188      <div class="price">$74.99</div>189      <div class="meta">Free shipping · Seller with a 99.6% positive feedback</div>190    </div>191 192    <!-- Right: single product photo -->193    <div class="card">194      <div class="img tall">[IMG: Purple Nike React Infinity Run shoes]</div>195      <div class="t">Size 8.5 - Nike React Infinity Run Flyknit 3 Light Bordeaux 2022</div>196      <div class="price">$39.00</div>197      <div class="meta">+ US $83.47 shipping · Seller with a 100% positive feedback</div>198    </div>199 200    <!-- Left: blue shoe -->201    <div class="card">202      <div class="img tall">[IMG: Blue Nike React Infinity Run shoe]</div>203      <div class="t">Nike React Infinity Run 3 Racer Blue Women's Running Shoes</div>204      <div class="price">$129.95</div>205      <div class="meta">Free shipping</div>206    </div>207 208    <!-- Right: casual shot -->209    <div class="card">210      <div class="img tall">[IMG: Casual indoor Nike shoe photo]</div>211      <div class="t">Nike React Infinity Run Flyknit 3 Women's Trainers</div>212      <div class="price">$98.00</div>213      <div class="meta">+ US $12.95 shipping</div>214    </div>215 216    <!-- Left: another option -->217    <div class="card">218      <div class="img">[IMG: Shoe box with Nike React Infinity Run 3]</div>219      <div class="t">Nike React Infinity Run 3 Premium - Various Sizes</div>220      <div class="price">$159.00</div>221      <div class="meta">Free shipping</div>222    </div>223 224    <!-- Right: grid swatches -->225    <div class="card">226      <div class="img">[IMG: Colorways lineup - Nike React Infinity]</div>227      <div class="t">Nike React Infinity Run FK - Choose Your Color</div>228      <div class="price">$88.50</div>229      <div class="meta">Free shipping</div>230    </div>231 232  </div>233 234  <!-- Bottom navigation -->235  <div class="bottom-nav">236    <div class="nav-item active">237      <svg viewBox="0 0 24 24"><path d="M3 10.5 12 3l9 7.5V21a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1v-10.5z"/></svg>238      <div>Home</div>239    </div>240    <div class="nav-item">241      <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm-8 9a8 8 0 0 1 16 0v1H4v-1z"/></svg>242      <div>My eBay</div>243    </div>244    <div class="nav-item">245      <svg viewBox="0 0 24 24"><path d="M21 21l-4.2-4.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>246      <div>Search</div>247    </div>248    <div class="nav-item">249      <svg viewBox="0 0 24 24"><path d="M12 2a6 6 0 0 0-6 6v3.5L4 14v1h16v-1l-2-2.5V8a6 6 0 0 0-6-6zm0 20a2.5 2.5 0 0 0 2.5-2.5h-5A2.5 2.5 0 0 0 12 22z"/></svg>250      <div>Inbox</div>251    </div>252    <div class="nav-item">253      <svg viewBox="0 0 24 24"><path d="M20 7h-8l-2-2H4a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zm-9 5h6v2h-6v-2z"/></svg>254      <div>Selling</div>255    </div>256  </div>257 258</div>259</body>260</html>