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 Page - Cleats</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  * { box-sizing: border-box; }10  #render-target {11    width: 1080px;12    height: 2400px;13    position: relative;14    overflow: hidden;15    background: #ffffff;16  }17 18  /* Top hero area */19  .hero {20    position: relative;21    width: 100%;22    height: 980px;23    background: #EDF2F4;24    border-bottom: 1px solid #DADFE3;25  }26 27  .status-bar {28    position: absolute;29    top: 24px;30    left: 32px;31    color: #9AA0A6;32    font-size: 36px;33    letter-spacing: 1px;34  }35  .status-icons {36    position: absolute;37    top: 24px;38    right: 32px;39    display: flex;40    align-items: center;41    gap: 18px;42    color: #9AA0A6;43    font-size: 24px;44  }45  .wifi {46    width: 34px; height: 24px; border: 2px solid #9AA0A6; border-radius: 12px;47  }48  .battery {49    width: 44px; height: 24px; border: 2px solid #9AA0A6; position: relative; border-radius: 4px;50  }51  .battery::after {52    content: "";53    position: absolute;54    right: -8px; top: 6px;55    width: 6px; height: 12px; background: #9AA0A6; border-radius: 2px;56  }57 58  .close-btn {59    position: absolute;60    top: 230px;61    right: 40px;62    font-size: 96px;63    line-height: 1;64    color: #000000;65  }66 67  .product-visual {68    position: absolute;69    left: 60px;70    right: 60px;71    top: 160px;72  }73  .img-placeholder {74    background: #E0E0E0;75    border: 1px solid #BDBDBD;76    color: #757575;77    display: flex;78    justify-content: center;79    align-items: center;80    text-transform: uppercase;81    font-weight: 600;82    letter-spacing: 1px;83  }84  .shoe-top {85    width: 960px; height: 360px;86    margin: 0 auto 30px auto;87  }88  .shoe-sole {89    width: 960px; height: 360px;90    margin: 0 auto;91  }92 93  .new-tag {94    position: absolute;95    bottom: 210px;96    left: 60px;97    background: #ffffff;98    color: #000000;99    font-size: 32px;100    letter-spacing: 3px;101    padding: 14px 22px;102    border-radius: 4px;103    box-shadow: 0 1px 0 rgba(0,0,0,0.08);104  }105 106  .thumbs-area {107    position: absolute;108    bottom: 0;109    left: 0; right: 0;110    height: 190px;111    background: #ECECEC;112    border-top: 1px solid #DADADA;113    display: flex;114    align-items: center;115    justify-content: center;116    gap: 60px;117    padding: 20px 0 40px 0;118  }119  .thumb {120    width: 220px; height: 120px;121    position: relative;122  }123  .thumb.focus {124    outline: 2px dashed #CFCFCF;125  }126  .slider-indicator {127    position: absolute;128    bottom: 18px;129    left: 50%;130    transform: translateX(-50%);131    width: 160px; height: 16px;132    background: #D0D0D0;133    border-radius: 8px;134  }135 136  /* Content section */137  .content {138    position: relative;139    background: #ffffff;140    padding: 56px 60px 0 60px;141  }142  .title-row {143    position: relative;144    padding-right: 120px;145  }146  h1.title {147    margin: 0 0 28px 0;148    font-size: 58px;149    font-weight: 800;150    letter-spacing: 2px;151    line-height: 1.18;152    text-transform: uppercase;153    color: #111111;154  }155  .favorite {156    position: absolute;157    right: 0;158    top: 6px;159  }160  .favorite svg {161    width: 72px; height: 72px;162    stroke: #111; fill: none; stroke-width: 8px;163  }164 165  .meta {166    display: flex;167    align-items: center;168    gap: 28px;169    margin-bottom: 36px;170  }171  .price {172    font-size: 34px; font-weight: 700; color: #000;173    letter-spacing: 2px;174  }175  .category {176    font-size: 30px; color: #666; letter-spacing: 4px; text-transform: uppercase;177  }178 179  .divider {180    height: 1px; background: #E5E5E5; margin: 36px 0;181  }182 183  .size-header {184    display: flex; align-items: center; gap: 18px;185    margin-bottom: 24px;186  }187  .size-header .label {188    font-size: 30px; letter-spacing: 4px; color: #333; text-transform: uppercase; font-weight: 700;189  }190  .ruler {191    border: 2px solid #1a1a1a; width: 84px; height: 64px; display: inline-flex; align-items: center; justify-content: center;192  }193  .ruler div {194    width: 60px; height: 20px; border-top: 2px solid #1a1a1a; border-bottom: 2px solid #1a1a1a;195    position: relative;196  }197  .ruler div::before, .ruler div::after {198    content: ""; position: absolute; top: -10px; width: 2px; height: 40px; background: #1a1a1a;199  }200  .ruler div::before { left: 8px; } .ruler div::after { right: 8px; }201 202  .sizes {203    display: flex; gap: 60px; padding: 20px 0 40px 0; color: #333;204    font-size: 30px; letter-spacing: 3px;205    white-space: nowrap;206  }207 208  /* CTA buttons */209  .cta {210    padding: 10px 0 0 0;211  }212  .btn {213    width: 960px; height: 120px;214    font-size: 34px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700;215    display: flex; align-items: center; justify-content: space-between;216    padding: 0 36px;217    margin: 22px 0;218    cursor: pointer;219  }220  .btn.outline {221    border: 3px solid #111; background: #fff; color: #111;222  }223  .btn.solid {224    background: #111; color: #fff; border: 3px solid #111;225  }226  .icon-bag svg { width: 48px; height: 48px; stroke: #111; fill: none; stroke-width: 6px; }227  .btn.solid .arrow svg { stroke: #fff; }228  .arrow svg { width: 48px; height: 48px; stroke: #111; fill: none; stroke-width: 8px; }229 230  /* Payment logos */231  .payments {232    display: flex; gap: 32px; padding: 40px 0;233  }234  .pay-img {235    width: 240px; height: 110px; background: #E0E0E0; border: 1px solid #BDBDBD;236    color: #757575; display: flex; align-items: center; justify-content: center; font-weight: 600; letter-spacing: 1px;237  }238 239  /* Home indicator */240  .home-indicator {241    position: absolute;242    bottom: 24px; left: 50%; transform: translateX(-50%);243    width: 360px; height: 18px; background: #CFCFCF; border-radius: 9px;244  }245</style>246</head>247<body>248<div id="render-target">249 250  <div class="hero">251    <div class="status-bar">3:18</div>252    <div class="status-icons">253      <div class="wifi"></div>254      <div class="battery"></div>255    </div>256 257    <div class="close-btn">×</div>258 259    <div class="product-visual">260      <div class="img-placeholder shoe-top">[IMG: Cleat - Side View]</div>261      <div class="img-placeholder shoe-sole">[IMG: Cleat - Sole View]</div>262    </div>263 264    <div class="new-tag">NEW</div>265 266    <div class="thumbs-area">267      <div class="img-placeholder thumb">[IMG: Pink Cleat]</div>268      <div class="img-placeholder thumb focus">[IMG: Lime Cleat]</div>269      <div class="img-placeholder thumb">[IMG: Detail]</div>270      <div class="slider-indicator"></div>271    </div>272  </div>273 274  <div class="content">275    <div class="title-row">276      <h1 class="title">PREDATOR ACCURACY+<br>ARTIFICIAL GRASS CLEATS</h1>277      <div class="favorite">278        <svg viewBox="0 0 24 24">279          <path d="M12 21s-7-4.4-9.5-8.2C0 9.6 2.2 6 5.9 6c2 0 3.5 1.1 4.1 2.5C10.6 7.1 12 6 14.1 6c3.7 0 5.9 3.6 3.4 6.8C19 16.6 12 21 12 21z"/>280        </svg>281      </div>282    </div>283 284    <div class="meta">285      <div class="price">$300.00</div>286      <div class="category">PERFORMANCE</div>287    </div>288 289    <div class="divider"></div>290 291    <div class="size-header">292      <div class="label">SIZE</div>293      <div class="ruler"><div></div></div>294    </div>295 296    <div class="sizes">297      <div>M6 / W8.5</div>298      <div>M8 / W9</div>299      <div>M8.5 / W9.5</div>300      <div>M9 / W10</div>301      <div>M9.5 / W10.5</div>302      <div>M10 / W11</div>303    </div>304 305    <div class="cta">306      <div class="btn outline">307        <div>ADD TO BAG</div>308        <div class="icon-bag">309          <svg viewBox="0 0 24 24">310            <rect x="5" y="7" width="14" height="14"></rect>311            <path d="M9 7V5c0-1.1.9-2 2-2h2c1.1 0 2 .9 2 2v2"></path>312            <path d="M12 12v6M9 15h6"></path>313          </svg>314        </div>315      </div>316 317      <div class="btn solid">318        <div>BUY IT NOW</div>319        <div class="arrow">320          <svg viewBox="0 0 24 24">321            <path d="M5 12h14"></path>322            <path d="M13 5l7 7-7 7"></path>323          </svg>324        </div>325      </div>326    </div>327 328    <div class="payments">329      <div class="pay-img">[IMG: Google Pay]</div>330      <div class="pay-img">[IMG: PayPal]</div>331      <div class="pay-img">[IMG: Klarna]</div>332    </div>333  </div>334 335  <div class="home-indicator"></div>336 337</div>338</body>339</html>