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 - Predator Accuracy+</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Helvetica Neue", Arial, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #EDF2F4;15    border-radius: 0;16    box-shadow: none;17    color: #1a1a1a;18  }19 20  /* Status bar */21  .status-bar {22    height: 110px;23    padding: 0 36px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #000;28    font-weight: 600;29    font-size: 42px;30    letter-spacing: 0.5px;31  }32  .status-icons {33    display: flex;34    align-items: center;35    gap: 24px;36  }37  .status-dot {38    width: 28px; height: 28px; background: #000; border-radius: 6px;39  }40  .wifi {41    width: 42px; height: 28px; border: 3px solid #000; border-top-left-radius: 24px; border-top-right-radius: 24px; border-bottom: none;42  }43  .battery {44    width: 64px; height: 30px; border: 3px solid #000; position: relative;45  }46  .battery::after {47    content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 14px; background: #000;48  }49 50  /* Close icon */51  .close-btn {52    position: absolute;53    top: 140px;54    right: 40px;55    width: 80px;56    height: 80px;57    cursor: default;58  }59  .close-btn svg { width: 100%; height: 100%; }60 61  /* Hero image */62  .hero {63    position: relative;64    margin-top: 20px;65    width: 100%;66    height: 780px;67    display: flex;68    align-items: center;69    justify-content: center;70  }71  .img-placeholder {72    width: 980px;73    height: 640px;74    background: #E0E0E0;75    border: 1px solid #BDBDBD;76    display: flex;77    align-items: center;78    justify-content: center;79    color: #757575;80    font-size: 38px;81    text-align: center;82    border-radius: 10px;83  }84  .new-tag {85    position: absolute;86    left: 40px;87    bottom: 40px;88    background: #ffffff;89    color: #000;90    font-weight: 700;91    font-size: 30px;92    letter-spacing: 2px;93    padding: 16px 24px;94    border-radius: 4px;95    box-shadow: 0 1px 0 rgba(0,0,0,0.1);96  }97 98  /* Carousel thumbnails */99  .thumbs {100    width: 100%;101    padding: 24px 40px 16px 40px;102    box-sizing: border-box;103  }104  .thumb-row {105    display: flex;106    gap: 40px;107    align-items: center;108    justify-content: flex-start;109  }110  .thumb-item {111    width: 220px;112    height: 140px;113    background: #E0E0E0;114    border: 1px solid #BDBDBD;115    display: flex;116    align-items: center;117    justify-content: center;118    color: #757575;119    font-size: 26px;120    border-radius: 8px;121  }122  .pager {123    width: 120px;124    height: 16px;125    margin: 20px auto 0 auto;126    background: #CFCFCF;127    border-radius: 10px;128  }129 130  /* Details section */131  .details {132    margin-top: 16px;133    background: #ffffff;134    border-top-left-radius: 16px;135    border-top-right-radius: 16px;136    padding: 52px 40px 40px 40px;137    box-sizing: border-box;138    min-height: 1200px;139  }140  .title-row {141    display: flex;142    align-items: flex-start;143    justify-content: space-between;144  }145  .product-title {146    font-size: 58px;147    font-weight: 800;148    line-height: 74px;149    letter-spacing: 1px;150  }151  .heart {152    width: 70px; height: 70px;153  }154  .price-row {155    margin-top: 20px;156    display: flex;157    align-items: center;158    gap: 34px;159  }160  .price {161    font-size: 36px;162    font-weight: 800;163  }164  .tag {165    font-size: 34px;166    letter-spacing: 2px;167    color: #444;168  }169  .divider {170    height: 2px; background: #EFEFEF; margin: 42px 0;171  }172 173  /* Size section */174  .size-header {175    display: flex;176    align-items: center;177    gap: 24px;178    margin-bottom: 24px;179  }180  .size-label {181    font-size: 34px;182    font-weight: 700;183    letter-spacing: 2px;184  }185  .measure-box {186    width: 100px; height: 68px; border: 2px solid #000; display: flex; align-items: center; justify-content: center; border-radius: 6px;187  }188  .measure-box svg { width: 70px; height: 28px; }189  .sizes {190    display: flex;191    gap: 56px;192    align-items: center;193    font-size: 32px;194    white-space: nowrap;195    overflow: hidden;196    padding-bottom: 12px;197  }198  .size-item {199    position: relative;200    padding: 8px 6px;201    color: #000;202  }203  .size-item.selected::after {204    content: "";205    position: absolute;206    left: 0;207    right: 0;208    bottom: -12px;209    height: 8px;210    background: #000;211    border-radius: 4px;212  }213 214  /* Buttons */215  .button {216    width: 100%;217    height: 128px;218    border-radius: 4px;219    font-size: 34px;220    font-weight: 800;221    letter-spacing: 2px;222    display: flex;223    align-items: center;224    justify-content: space-between;225    box-sizing: border-box;226    padding: 0 40px;227  }228  .btn-outline {229    background: #fff;230    border: 2px solid #000;231    color: #000;232  }233  .btn-solid {234    margin-top: 26px;235    background: #000;236    color: #fff;237    border: 2px solid #000;238  }239  .bag-icon, .arrow-icon { width: 52px; height: 52px; }240 241  /* Payment row */242  .payment-row {243    margin-top: 40px;244    display: flex;245    gap: 24px;246    flex-wrap: wrap;247  }248  .pay-card {249    width: 220px;250    height: 120px;251    background: #E0E0E0;252    border: 1px solid #BDBDBD;253    border-radius: 10px;254    display: flex;255    align-items: center;256    justify-content: center;257    color: #757575;258    font-size: 28px;259  }260 261  /* Home indicator */262  .home-indicator {263    position: absolute;264    bottom: 24px;265    left: 50%;266    transform: translateX(-50%);267    width: 360px;268    height: 18px;269    background: #BFBFBF;270    border-radius: 10px;271  }272</style>273</head>274<body>275<div id="render-target">276 277  <!-- Status Bar -->278  <div class="status-bar">279    <div>3:18</div>280    <div class="status-icons">281      <div class="status-dot"></div>282      <div class="status-dot" style="opacity:0.7;"></div>283      <div class="status-dot" style="opacity:0.5;"></div>284      <div class="wifi"></div>285      <div class="battery"></div>286    </div>287  </div>288 289  <!-- Close Button -->290  <div class="close-btn">291    <svg viewBox="0 0 24 24">292      <path d="M4 4 L20 20 M20 4 L4 20" stroke="#000" stroke-width="2.6" stroke-linecap="round"/>293    </svg>294  </div>295 296  <!-- Hero Image -->297  <div class="hero">298    <div class="img-placeholder">[IMG: Predator Cleats - Top & Sole]</div>299    <div class="new-tag">NEW</div>300  </div>301 302  <!-- Thumbnails -->303  <div class="thumbs">304    <div class="thumb-row">305      <div class="thumb-item">[IMG: Pink Cleats]</div>306      <div class="thumb-item">[IMG: Green Cleats]</div>307      <div class="thumb-item">[IMG: Green Sole]</div>308    </div>309    <div class="pager"></div>310  </div>311 312  <!-- Details Section -->313  <div class="details">314    <div class="title-row">315      <div class="product-title">316        PREDATOR ACCURACY+<br>317        ARTIFICIAL GRASS CLEATS318      </div>319      <div class="heart">320        <svg viewBox="0 0 24 24">321          <path d="M12 21s-7-4.6-9.5-8.2C1 10.3 2.5 6.5 6.2 6.5c2.1 0 3.3 1.1 3.8 2.1.5-1 1.7-2.1 3.8-2.1 3.7 0 5.2 3.8 3.7 6.3C19 16.4 12 21 12 21z" fill="none" stroke="#000" stroke-width="1.8" stroke-linejoin="round"/>322        </svg>323      </div>324    </div>325    <div class="price-row">326      <div class="price">$300.00</div>327      <div class="tag">PERFORMANCE</div>328    </div>329 330    <div class="divider"></div>331 332    <div class="size-header">333      <div class="size-label">SIZE</div>334      <div class="measure-box" title="Size guide">335        <svg viewBox="0 0 100 30">336          <path d="M5 25 H95" stroke="#000" stroke-width="4"/>337          <path d="M20 10 V25 M35 10 V25 M50 10 V25 M65 10 V25 M80 10 V25" stroke="#000" stroke-width="3"/>338        </svg>339      </div>340    </div>341 342    <div class="sizes">343      <div class="size-item">10</div>344      <div class="size-item">M 9.5 / W 10.5</div>345      <div class="size-item selected">M 10 / W 11</div>346      <div class="size-item">M 10.5 / W 11.5</div>347      <div class="size-item">M 11 / W 12</div>348    </div>349 350    <div class="divider" style="margin-top: 30px;"></div>351 352    <div class="button btn-outline">353      <div>ADD TO BAG</div>354      <div class="bag-icon">355        <svg viewBox="0 0 24 24">356          <path d="M6 8 H18 L17 22 H7 L6 8z" fill="none" stroke="#000" stroke-width="2"/>357          <path d="M8 8 V6 A4 4 0 0 1 16 6 V8" fill="none" stroke="#000" stroke-width="2"/>358          <path d="M17 13 M17 13" stroke="#000"/>359          <path d="M19 11 v6 m-3-3 h6" stroke="#000" stroke-width="2"/>360        </svg>361      </div>362    </div>363 364    <div class="button btn-solid">365      <div>BUY IT NOW</div>366      <div class="arrow-icon">367        <svg viewBox="0 0 24 24">368          <path d="M5 12 H18 M12 6 L18 12 L12 18" stroke="#fff" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>369        </svg>370      </div>371    </div>372 373    <div class="payment-row">374      <div class="pay-card">[IMG: G Pay]</div>375      <div class="pay-card">[IMG: Card]</div>376      <div class="pay-card">[IMG: PayPal]</div>377      <div class="pay-card">[IMG: Klarna]</div>378      <div class="pay-card">[IMG: Afterpay]</div>379      <div class="pay-card">[IMG: Apple Pay]</div>380    </div>381  </div>382 383  <div class="home-indicator"></div>384</div>385</body>386</html>