GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Product Detail - Samba OG Shoes</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #111; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Top hero section */18  .hero {19    position: relative;20    height: 1050px;21    background: #ECEFF1;22  }23  .status-bar {24    position: absolute;25    top: 22px;26    left: 28px;27    right: 28px;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #ffffff;32    font-size: 34px;33    letter-spacing: 1px;34    opacity: 0.95;35  }36  .top-actions {37    position: absolute;38    top: 130px;39    left: 32px;40    right: 32px;41    display: flex;42    align-items: center;43    justify-content: space-between;44  }45  .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }46  .icon { width: 48px; height: 48px; }47 48  .shoe-hero {49    position: absolute;50    left: 70px;51    right: 70px;52    top: 270px;53    height: 360px;54    background: #E0E0E0;55    border: 1px solid #BDBDBD;56    display: flex;57    align-items: center;58    justify-content: center;59    color: #757575;60    font-size: 40px;61  }62 63  .best-seller {64    position: absolute;65    left: 64px;66    bottom: 230px;67    background: #ffffff;68    padding: 16px 28px;69    border: 1px solid #e0e0e0;70    text-transform: uppercase;71    font-size: 28px;72    letter-spacing: 4px;73  }74 75  .thumbs {76    position: absolute;77    left: 0; right: 0;78    bottom: 100px;79    background: #F5F7F8;80    height: 180px;81    display: flex;82    align-items: center;83    gap: 30px;84    padding: 0 36px;85    border-top: 1px solid #E3E6E8;86  }87  .thumb {88    width: 180px;89    height: 120px;90    background: #E0E0E0;91    border: 1px solid #BDBDBD;92    display: flex;93    align-items: center;94    justify-content: center;95    color: #757575;96    font-size: 26px;97    border-radius: 6px;98  }99  .pager-dot {100    position: absolute;101    left: 50%;102    transform: translateX(-50%);103    bottom: 46px;104    width: 160px;105    height: 14px;106    background: #D1D5D8;107    border-radius: 8px;108  }109 110  /* Bottom content sheet */111  .sheet {112    position: absolute;113    top: 1020px;114    left: 0;115    right: 0;116    bottom: 0;117    background: #ffffff;118    border-top-left-radius: 28px;119    border-top-right-radius: 28px;120    box-shadow: 0 -6px 16px rgba(0,0,0,0.06);121    padding: 56px 48px;122  }123 124  .row { display: flex; align-items: center; }125  .space-between { justify-content: space-between; }126 127  .ar-badge {128    display: inline-flex;129    align-items: center;130    gap: 16px;131    margin-bottom: 16px;132  }133  .hex {134    width: 64px; height: 64px;135    background: #111;136    clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);137    display: flex; align-items: center; justify-content: center;138    color: #fff; font-weight: 700; font-size: 26px;139  }140 141  .title {142    font-size: 64px;143    font-weight: 800;144    letter-spacing: 1px;145    margin: 10px 0 26px 0;146  }147 148  .price-row {149    display: flex; align-items: center; gap: 26px;150    font-size: 36px;151    margin-bottom: 40px;152  }153  .price { font-weight: 800; }154 155  .divider {156    height: 2px; background: #ECECEC; width: 100%; margin: 26px 0 46px 0;157  }158 159  .size-header {160    display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px;161  }162  .size-header .label { font-size: 34px; letter-spacing: 2px; font-weight: 700; }163  .ruler {164    width: 120px; height: 84px; border: 2px solid #111;165    display: flex; align-items: center; justify-content: center;166  }167  .ruler svg { width: 80px; height: 40px; }168 169  .sizes {170    display: flex; gap: 54px; overflow: hidden;171    font-size: 34px;172    color: #444;173  }174  .size {175    padding-bottom: 16px;176  }177  .size.active {178    color: #000; font-weight: 800; position: relative;179  }180  .size.active::after {181    content: "";182    position: absolute;183    left: 0; right: 0; bottom: -6px;184    height: 8px; background: #111;185  }186 187  .btn {188    height: 140px;189    border-radius: 2px;190    font-size: 40px;191    letter-spacing: 3px;192    text-transform: uppercase;193    display: flex; align-items: center; justify-content: space-between;194    padding: 0 40px;195    margin-top: 46px;196  }197  .btn.outline {198    border: 3px solid #111; color: #111; background: #fff;199  }200  .btn.solid {201    background: #000; color: #fff; border: 3px solid #000;202  }203  .btn .right-icon { width: 44px; height: 44px; }204 205  /* Small helper icons line style */206  .stroke-2 { stroke: #111; stroke-width: 2; fill: none; }207  .stroke-3 { stroke: #111; stroke-width: 3; fill: none; }208  .fill { fill: #111; }209</style>210</head>211<body>212<div id="render-target">213 214  <!-- HERO / IMAGE AREA -->215  <div class="hero">216    <div class="status-bar">217      <div>10:38</div>218      <div class="row" style="gap:14px;">219        <!-- simple status glyphs -->220        <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" class="stroke-2" stroke="#fff"/></svg>221        <svg class="icon" viewBox="0 0 24 24"><path d="M2 18l7-7 4 4 7-7" stroke="#fff" stroke-width="2" fill="none"/></svg>222        <div style="font-size:30px;color:#fff;">98%</div>223      </div>224    </div>225 226    <div class="top-actions">227      <div class="icon-btn">228        <!-- back arrow -->229        <svg class="icon" viewBox="0 0 24 24"><path d="M14 4L6 12l8 8" class="stroke-3"/></svg>230      </div>231      <div class="row" style="gap:34px;">232        <!-- share icon -->233        <div class="icon-btn">234          <svg class="icon" viewBox="0 0 24 24">235            <circle cx="6" cy="12" r="2" class="stroke-3"/>236            <circle cx="18" cy="6" r="2" class="stroke-3"/>237            <circle cx="18" cy="18" r="2" class="stroke-3"/>238            <path d="M8 11l8-4M8 13l8 4" class="stroke-3"/>239          </svg>240        </div>241        <!-- heart icon -->242        <div class="icon-btn">243          <svg class="icon" viewBox="0 0 24 24">244            <path class="fill" d="M12 21s-7-4.6-9.5-8.1C.2 9.6 2.2 6 5.7 6c2 0 3.3 1 4.3 2 1-1 2.3-2 4.3-2 3.6 0 5.5 3.6 3.2 6.9C19 16.4 12 21 12 21z"/>245          </svg>246        </div>247      </div>248    </div>249 250    <div class="shoe-hero">[IMG: Black "Samba OG" shoe]</div>251 252    <div class="best-seller">Best Seller</div>253 254    <div class="thumbs">255      <div class="thumb">[IMG: White shoe]</div>256      <div class="thumb">[IMG: Black shoe]</div>257      <div class="thumb">[IMG: Beige shoe]</div>258      <div class="thumb">[IMG: Green shoe]</div>259      <div class="thumb">[IMG: White/gray shoe]</div>260      <div class="thumb">[IMG: Navy shoe]</div>261    </div>262    <div class="pager-dot"></div>263  </div>264 265  <!-- CONTENT SHEET -->266  <div class="sheet">267    <div class="ar-badge">268      <div class="hex">AR</div>269      <div style="color:#666; font-size:28px; letter-spacing:2px;">View in AR</div>270    </div>271 272    <div class="title">SAMBA OG SHOES</div>273 274    <div class="price-row">275      <div class="price">$100.00</div>276      <div style="color:#666;">Originals</div>277    </div>278 279    <div class="divider"></div>280 281    <div class="size-header">282      <div class="label">SIZE</div>283      <div class="ruler" aria-label="Size guide">284        <svg viewBox="0 0 100 40">285          <rect x="5" y="10" width="90" height="20" stroke="#111" stroke-width="3" fill="none"/>286          <path d="M20 10v10M35 10v10M50 10v10M65 10v10M80 10v10" class="stroke-2"/>287        </svg>288      </div>289    </div>290 291    <div class="sizes">292      <div class="size">W 9</div>293      <div class="size">M 8.5 / W 9.5</div>294      <div class="size active">M 9 / W 10</div>295      <div class="size">M 9.5 / W 10.5</div>296      <div class="size">M 10 / W 11</div>297    </div>298 299    <div class="divider" style="margin-top:36px;"></div>300 301    <div class="btn outline">302      <span>ADD TO BAG</span>303      <!-- bag plus icon -->304      <svg class="right-icon" viewBox="0 0 24 24">305        <path d="M6 9h12l-1 10H7L6 9z" class="stroke-3"/>306        <path d="M9 9V7a3 3 0 0 1 6 0v2" class="stroke-3"/>307        <path d="M12 12v6M9 15h6" class="stroke-3"/>308      </svg>309    </div>310 311    <div class="btn solid">312      <span>BUY IT NOW</span>313      <!-- arrow right -->314      <svg class="right-icon" viewBox="0 0 24 24">315        <path d="M5 12h14M13 6l6 6-6 6" stroke="#fff" stroke-width="3" fill="none"/>316      </svg>317    </div>318  </div>319 320</div>321</body>322</html>