GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Samba OG Shoes - Mock UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #F7F7F7;14    color: #111;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 86px;24    padding: 16px 24px;25    box-sizing: border-box;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #444;30    font-size: 34px;31  }32  .status-left { display: flex; faithful-items: center; gap: 12px; }33  .status-right { display: flex; align-items: center; gap: 18px; }34  .battery {35    display: flex; align-items: center; gap: 8px; font-size: 30px; color: #111;36  }37  .battery-icon {38    width: 54px; height: 28px; border: 3px solid #111; position: relative; border-radius: 4px;39  }40  .battery-icon::after {41    content: ""; position: absolute; right: -8px; top: 7px; width: 6px; height: 14px; background: #111; border-radius: 2px;42  }43  .battery-fill { width: 40px; height: 22px; background: #111; margin: 3px; }44 45  /* Header */46  .header {47    position: absolute;48    top: 86px;49    left: 0;50    width: 1080px;51    height: 170px;52    padding: 20px 28px;53    box-sizing: border-box;54  }55  .header .row {56    display: flex; align-items: center; justify-content: space-between;57  }58  .icon-btn {59    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 12px; color: #111;60  }61  .title-block {62    text-align: center; margin-top: -62px;63  }64  .title-block .title { font-size: 46px; font-weight: 700; letter-spacing: 2px; }65  .title-block .price { font-size: 36px; margin-top: 6px; color: #111; }66 67  /* Carousel */68  .carousel {69    position: absolute;70    top: 246px;71    left: 0;72    width: 1080px;73    height: 168px;74    box-sizing: border-box;75    padding: 16px 28px;76    display: flex; gap: 26px; align-items: center;77    overflow: hidden;78  }79  .thumb {80    width: 160px; height: 90px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 8px;81    display: flex; align-items: center; justify-content: center; font-size: 22px; color: #666;82  }83  .thumb.selected {84    position: relative;85  }86  .thumb.selected::before {87    content: ""; position: absolute; inset: -8px; border: 4px dashed #CFCFCF; border-radius: 10px;88  }89 90  /* Size section */91  .size-header {92    position: absolute; top: 420px; left: 0; width: 1080px; padding: 26px 28px 10px; box-sizing: border-box;93    display: flex; align-items: center; gap: 20px;94  }95  .size-header .label { font-size: 34px; letter-spacing: 2px; font-weight: 700; }96  .ruler-box {97    width: 94px; height: 70px; border: 3px solid #1a1a1a; border-radius: 10px; display: flex; align-items: center; justify-content: center;98  }99  .ruler {100    width: 58px; height: 18px; border-top: 4px solid #111; border-bottom: 4px solid #111; position: relative;101  }102  .ruler::before, .ruler::after {103    content: ""; position: absolute; top: -6px; width: 4px; height: 30px; background: #111;104  }105  .ruler::before { left: 10px; }106  .ruler::after { right: 10px; }107 108  .sizes {109    position: absolute; top: 508px; left: 0; width: 1080px; padding: 0 20px; box-sizing: border-box;110    display: flex; gap: 20px; overflow: hidden;111  }112  .size-pill {113    min-width: 250px; padding: 28px 20px; text-align: center; font-size: 34px; color: #444;114    border-bottom: 6px solid transparent;115  }116  .size-pill.selected { color: #111; font-weight: 700; border-color: #111; }117 118  /* Buttons */119  .actions { position: absolute; top: 620px; left: 0; width: 1080px; padding: 24px 30px; box-sizing: border-box; }120  .btn-outline, .btn-solid {121    width: 100%; height: 120px; border-radius: 10px; font-size: 38px; display: flex; align-items: center; justify-content: space-between;122    padding: 0 28px; box-sizing: border-box; letter-spacing: 2px;123  }124  .btn-outline { border: 3px solid #111; background: #fff; color: #111; }125  .btn-solid { border: none; background: #111; color: #fff; margin-top: 22px; }126  .btn-text { font-weight: 700; }127  .cart-icon, .arrow-icon { width: 56px; height: 56px; }128 129  /* Payment icons row */130  .payments {131    position: absolute; top: 880px; left: 0; width: 1080px; padding: 14px 30px; box-sizing: border-box;132    display: flex; gap: 32px; align-items: center;133  }134  .pay-pill {135    min-width: 170px; height: 72px; background: #fff; border: 2px solid #CFCFCF; border-radius: 10px;136    display: flex; align-items: center; justify-content: center; font-size: 30px; color: #333;137    padding: 0 16px;138  }139 140  /* Link */141  .stores-link {142    position: absolute; top: 980px; left: 0; width: 1080px; padding: 24px 30px; box-sizing: border-box;143    font-size: 36px; font-weight: 700; letter-spacing: 2px;144  }145  .stores-link span { border-bottom: 4px solid #111; }146 147  /* Shipping banner */148  .banner {149    position: absolute; top: 1070px; left: 0; width: 1080px; padding: 30px; box-sizing: border-box; background: #fff;150    display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;151  }152  .banner .left { display: flex; align-items: center; gap: 24px; }153  .check-circle {154    width: 60px; height: 60px; border: 4px solid #111; border-radius: 50%; position: relative;155  }156  .check-circle::after {157    content: ""; position: absolute; left: 14px; top: 18px; width: 26px; height: 14px; border-left: 6px solid #111; border-bottom: 6px solid #111; transform: rotate(-45deg);158  }159  .banner-text { font-size: 34px; color: #222; letter-spacing: 1px; }160  .info-dot {161    width: 46px; height: 46px; border: 2px solid #222; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700;162  }163 164  .note {165    position: absolute; top: 1200px; left: 0; width: 1080px; padding: 20px 30px; box-sizing: border-box;166    color: #9e9e9e; font-size: 32px;167  }168 169  /* Content section */170  .section {171    position: absolute; top: 1270px; left: 0; width: 1080px; padding: 30px; box-sizing: border-box;172  }173  .section h2 { margin: 0; font-size: 60px; letter-spacing: 2px; }174  .section p { font-size: 34px; line-height: 1.5; color: #333; margin-top: 22px; }175  .spec-link { margin-top: 24px; font-size: 36px; font-weight: 700; display: inline-block; border-bottom: 4px solid #111; }176 177  /* Home indicator */178  .home-indicator {179    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);180    width: 420px; height: 14px; background: #BDBDBD; border-radius: 8px;181  }182 183  /* Simple SVG icons stroke styles */184  svg { display: block; }185</style>186</head>187<body>188<div id="render-target">189 190  <!-- Status bar -->191  <div class="status-bar">192    <div class="status-left">193      <div style="font-weight:700;">5:42</div>194    </div>195    <div class="status-right">196      <div>◦</div>197      <div class="battery">198        <div class="battery-icon"><div class="battery-fill"></div></div>199        <div>100%</div>200      </div>201    </div>202  </div>203 204  <!-- Header with back, share and heart -->205  <div class="header">206    <div class="row">207      <div class="icon-btn" title="Back">208        <svg width="44" height="44" viewBox="0 0 24 24">209          <path d="M15 18l-6-6 6-6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>210        </svg>211      </div>212      <div style="display:flex; gap:16px;">213        <div class="icon-btn" title="Share">214          <svg width="40" height="40" viewBox="0 0 24 24">215            <circle cx="6" cy="12" r="2" stroke="#111" stroke-width="2" fill="none"/>216            <circle cx="18" cy="6" r="2" stroke="#111" stroke-width="2" fill="none"/>217            <circle cx="18" cy="18" r="2" stroke="#111" stroke-width="2" fill="none"/>218            <path d="M8 11l8-4M8 13l8 4" stroke="#111" stroke-width="2" fill="none"/>219          </svg>220        </div>221        <div class="icon-btn" title="Favorite">222          <svg width="40" height="40" viewBox="0 0 24 24">223            <path d="M12 21s-7-4.4-9.2-8.1C1.4 9.6 3 6 6.6 6 8.7 6 10 7.3 12 9.5 14 7.3 15.3 6 17.4 6 21 6 22.6 9.6 21.2 12.9 19 16.6 12 21 12 21z" fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/>224          </svg>225        </div>226      </div>227    </div>228    <div class="title-block">229      <div class="title">SAMBA OG SHOES</div>230      <div class="price">$100.00</div>231    </div>232  </div>233 234  <!-- Carousel of images -->235  <div class="carousel">236    <div class="thumb">[IMG: White Samba]</div>237    <div class="thumb">[IMG: Navy Samba]</div>238    <div class="thumb">[IMG: Green Stripe]</div>239    <div class="thumb">[IMG: Red Stripe]</div>240    <div class="thumb">[IMG: Grey/White]</div>241    <div class="thumb selected">[IMG: Black Samba]</div>242  </div>243 244  <!-- Size selector -->245  <div class="size-header">246    <div class="label">SIZE</div>247    <div class="ruler-box"><div class="ruler"></div></div>248  </div>249 250  <div class="sizes">251    <div class="size-pill">M 7 / W 8</div>252    <div class="size-pill selected">M 7.5 / W 8.5</div>253    <div class="size-pill">M 8 / W 9</div>254    <div class="size-pill">M 8.5 / W 9.5</div>255    <div class="size-pill">M 9 / W 10</div>256  </div>257 258  <!-- Action buttons -->259  <div class="actions">260    <div class="btn-outline">261      <div class="btn-text">ADD TO BAG</div>262      <svg class="cart-icon" viewBox="0 0 24 24">263        <path d="M6 6h15l-2 9H8L6 3H2" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>264        <circle cx="9" cy="20" r="2" fill="none" stroke="#111" stroke-width="2"/>265        <circle cx="17" cy="20" r="2" fill="none" stroke="#111" stroke-width="2"/>266        <path d="M13 9v3M11.5 10.5h3" stroke="#111" stroke-width="2"/>267      </svg>268    </div>269    <div class="btn-solid">270      <div class="btn-text">BUY IT NOW</div>271      <svg class="arrow-icon" viewBox="0 0 24 24">272        <path d="M5 12h13M13 6l6 6-6 6" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>273      </svg>274    </div>275  </div>276 277  <!-- Payment options -->278  <div class="payments">279    <div class="pay-pill">G Pay</div>280    <div class="pay-pill">Card</div>281    <div class="pay-pill">PayPal</div>282    <div class="pay-pill">Klarna</div>283  </div>284 285  <div class="stores-link"><span>CHECK STORES NEARBY</span></div>286 287  <div class="banner">288    <div class="left">289      <div class="check-circle"></div>290      <div class="banner-text">FREE STANDARD SHIPPING + FREE RETURNS & EXCHANGES</div>291    </div>292    <div class="info-dot">i</div>293  </div>294 295  <div class="note">This product is excluded from discounts.</div>296 297  <div class="section">298    <h2>SAMBA ORIGINALS</h2>299    <p>Born on the pitch, the Samba is a timeless icon of street style. This silhouette stays true to its legacy with a tasteful, low-profile, soft leather upper, suede overlays and gum sole, making it a staple in everyone's closet - on and off the pitch.</p>300    <div class="spec-link">SPECIFICATIONS</div>301  </div>302 303  <div class="home-indicator"></div>304</div>305</body>306</html>