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>Product Detail - Cleats</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Helvetica Neue", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Top hero area */18  .hero {19    position: relative;20    background: #edf2f4;21    height: 980px;22    padding: 80px 60px 0 60px;23  }24  .close-btn {25    position: absolute;26    right: 40px;27    top: 60px;28    width: 60px; height: 60px;29    cursor: pointer;30  }31  .close-btn svg { width: 100%; height: 100%; }32  .shoe-row {33    display: flex;34    flex-direction: column;35    gap: 40px;36    align-items: center;37    margin-top: 40px;38  }39  .img-placeholder {40    width: 900px;41    height: 320px;42    background: #E0E0E0;43    border: 1px solid #BDBDBD;44    display: flex;45    justify-content: center;46    align-items: center;47    color: #757575;48    font-weight: 600;49    letter-spacing: 1px;50  }51  .new-pill {52    position: absolute;53    left: 60px;54    bottom: 170px;55    font-size: 28px;56    letter-spacing: 2px;57    text-transform: uppercase;58    padding: 14px 22px;59    background: #ffffff;60    border: 1px solid #ddd;61    color: #000;62  }63 64  /* Thumbnail strip */65  .thumb-strip {66    position: absolute;67    left: 0; right: 0;68    bottom: 0;69    background: #f1f1f1;70    height: 190px;71    border-top: 1px solid #ddd;72    display: flex;73    align-items: center;74    padding: 0 60px;75    gap: 140px;76  }77  .thumb {78    width: 200px; height: 120px;79    background: #E0E0E0;80    border: 1px solid #BDBDBD;81    display: flex; justify-content: center; align-items: center;82    color: #757575; font-size: 24px;83  }84  .strip-indicator {85    position: absolute;86    left: 50%; transform: translateX(-50%);87    bottom: 18px;88    width: 140px; height: 14px;89    background: #d7d7d7;90    border-radius: 7px;91  }92 93  /* Content section */94  .content {95    background: #fff;96    padding: 60px;97  }98  .title-row {99    position: relative;100    padding-right: 120px;101  }102  .favorite {103    position: absolute;104    right: 0;105    top: 0;106    width: 64px; height: 64px;107  }108  .favorite svg { width: 100%; height: 100%; }109  .product-title {110    font-size: 62px;111    line-height: 76px;112    font-weight: 800;113    letter-spacing: 1px;114    text-transform: uppercase;115    color: #111;116    margin: 0 0 40px 0;117  }118  .price-line {119    font-size: 34px;120    color: #111;121    display: flex;122    align-items: baseline;123    gap: 40px;124  }125  .tag {126    font-size: 30px;127    color: #555;128    letter-spacing: 3px;129    text-transform: uppercase;130  }131  .divider {132    height: 1px; background: #e6e6e6; margin: 40px 0 0 0;133  }134 135  /* Size selector */136  .size-header {137    display: flex; align-items: center; gap: 24px;138    margin-top: 60px;139  }140  .size-label {141    font-size: 36px; font-weight: 700; letter-spacing: 2px;142    color: #222; text-transform: uppercase;143  }144  .ruler-box {145    width: 90px; height: 70px; border: 2px solid #222;146    display: flex; align-items: center; justify-content: center;147  }148  .ruler-box svg { width: 64px; height: 36px; }149  .sizes {150    margin-top: 40px;151    display: flex; gap: 90px;152    overflow: hidden;153    padding-bottom: 20px;154  }155  .size-item {156    font-size: 34px; color: #111;157    letter-spacing: 2px;158    padding-bottom: 12px;159  }160  .size-item.active {161    border-bottom: 6px solid #111;162  }163  .divider-large { height: 1px; background: #e6e6e6; margin: 40px 0; }164 165  /* Buttons */166  .btn-outline, .btn-solid {167    height: 140px;168    border-radius: 2px;169    display: flex; align-items: center; justify-content: space-between;170    padding: 0 40px;171    font-size: 34px; letter-spacing: 3px; font-weight: 800; text-transform: uppercase;172  }173  .btn-outline { border: 3px solid #111; color: #111; background: #fff; }174  .btn-solid { background: #111; color: #fff; margin-top: 30px; }175  .bag-icon, .arrow-icon { width: 60px; height: 60px; }176  .bag-icon svg, .arrow-icon svg { width: 100%; height: 100%; }177</style>178</head>179<body>180<div id="render-target">181 182  <!-- Top hero with product imagery -->183  <div class="hero">184    <div class="close-btn" aria-label="Close">185      <svg viewBox="0 0 24 24">186        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round"/>187      </svg>188    </div>189 190    <div class="shoe-row">191      <div class="img-placeholder">[IMG: Cleats - Side View]</div>192      <div class="img-placeholder">[IMG: Cleats - Sole / Bottom View]</div>193    </div>194 195    <div class="new-pill">NEW</div>196 197    <div class="thumb-strip">198      <div class="thumb">[IMG: Pink Variant]</div>199      <div class="thumb">[IMG: Green Variant]</div>200      <div class="thumb">[IMG: Pink Sole]</div>201      <div class="thumb">[IMG: Green Sole]</div>202      <div class="strip-indicator"></div>203    </div>204  </div>205 206  <!-- Content area -->207  <div class="content">208    <div class="title-row">209      <h1 class="product-title">Predator Accuracy+<br>Artificial Grass Cleats</h1>210      <div class="favorite" aria-label="Add to wishlist">211        <svg viewBox="0 0 24 24">212          <path d="M12 20s-6-4.35-8.2-6.56C1.76 12.4 2 9.6 4.05 8.08c1.9-1.39 4.32-.79 5.73.87L12 10.9l2.22-1.95c1.41-1.66 3.83-2.26 5.73-.87C22 9.6 22.24 12.4 20.2 13.44 18 15.65 12 20 12 20z" fill="none" stroke="#111" stroke-width="1.8" stroke-linejoin="round"/>213        </svg>214      </div>215    </div>216 217    <div class="price-line">218      <div style="font-weight:800">$300.00</div>219      <div class="tag">Performance</div>220    </div>221 222    <div class="divider"></div>223 224    <div class="size-header">225      <div class="size-label">Size</div>226      <div class="ruler-box" aria-label="Size guide">227        <svg viewBox="0 0 64 36">228          <rect x="2" y="6" width="60" height="24" fill="none" stroke="#111" stroke-width="2"/>229          <path d="M10 6 v10 M16 6 v6 M22 6 v10 M28 6 v6 M34 6 v10 M40 6 v6 M46 6 v10 M52 6 v6" stroke="#111" stroke-width="2"/>230        </svg>231      </div>232    </div>233 234    <div class="sizes">235      <div class="size-item">M 7 / W 8</div>236      <div class="size-item">M 7.5 / W 8.5</div>237      <div class="size-item active">M 8 / W 9</div>238      <div class="size-item">M 8.5 / W 9.5</div>239      <div class="size-item">M 9 / W 10</div>240    </div>241 242    <div class="divider-large"></div>243 244    <div class="btn-outline">245      <span>Add to bag</span>246      <div class="bag-icon" aria-hidden="true">247        <svg viewBox="0 0 24 24">248          <path d="M7 8h10l1 12H6L7 8z" fill="none" stroke="#111" stroke-width="2"/>249          <path d="M9 8V6a3 3 0 016 0v2" fill="none" stroke="#111" stroke-width="2"/>250          <path d="M15 13h-2v-2h-2v2H9v2h2v2h2v-2h2z" fill="none" stroke="#111" stroke-width="1.6"/>251        </svg>252      </div>253    </div>254 255    <div class="btn-solid">256      <span>Buy it now</span>257      <div class="arrow-icon" aria-hidden="true">258        <svg viewBox="0 0 24 24">259          <path d="M5 12h12M13 6l6 6-6 6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>260        </svg>261      </div>262    </div>263  </div>264 265</div>266</body>267</html>