GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Product Detail - Chunky Chelsea Boots</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; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 140px;24    background: #CFCFCF;25  }26 27  /* Top controls */28  .circle-btn {29    position: absolute;30    width: 112px;31    height: 112px;32    border-radius: 56px;33    background: #FFFFFF;34    box-shadow: 0 2px 8px rgba(0,0,0,0.08);35    display: flex;36    align-items: center;37    justify-content: center;38  }39  .btn-back { top: 180px; left: 44px; }40  .btn-cart { top: 180px; right: 44px; }41  .btn-heart { top: 360px; right: 44px; }42 43  /* Hero image area */44  .hero {45    position: absolute;46    top: 160px;47    left: 0;48    width: 100%;49    height: 1080px;50    display: flex;51    align-items: center;52    justify-content: center;53  }54  .image-placeholder {55    width: 920px;56    height: 700px;57    background: #E0E0E0;58    border: 1px solid #BDBDBD;59    color: #757575;60    display: flex;61    align-items: center;62    justify-content: center;63    font-size: 32px;64    border-radius: 8px;65  }66 67  /* Carousel dots */68  .dots {69    position: absolute;70    bottom: 160px;71    left: 0;72    width: 100%;73    display: flex;74    gap: 24px;75    align-items: center;76    justify-content: center;77  }78  .dot {79    width: 22px;80    height: 22px;81    border-radius: 11px;82    background: #EFEFEF;83  }84  .dot.active { background: #D9D9D9; }85 86  /* Klarna banner */87  .klarna {88    position: absolute;89    top: 1320px;90    left: 0;91    width: 100%;92    padding: 48px 60px;93    border-top: 1px solid #EEEEEE;94    border-bottom: 1px solid #EEEEEE;95    background: #FFFFFF;96    color: #222;97    text-align: center;98    font-size: 36px;99    line-height: 1.4;100  }101  .klarna b { font-weight: 700; }102  .klarna .link { color: #111; text-decoration: underline; display: inline-block; margin-top: 18px; font-size: 34px; }103 104  /* Product info */105  .product {106    position: absolute;107    top: 1540px;108    left: 0;109    width: 100%;110    padding: 0 60px;111  }112  .title-row {113    display: flex;114    align-items: center;115    justify-content: space-between;116  }117  .title {118    font-size: 56px;119    font-weight: 700;120    color: #111;121  }122  .share-btn {123    width: 72px;124    height: 72px;125    border-radius: 36px;126    display: flex;127    align-items: center;128    justify-content: center;129  }130 131  .rating {132    margin-top: 22px;133    display: flex;134    align-items: center;135    gap: 12px;136    color: #111;137  }138  .rating .reviews {139    text-decoration: underline;140    font-size: 34px;141  }142 143  /* Purchase row */144  .purchase-row {145    margin-top: 46px;146    display: flex;147    gap: 40px;148  }149  .select {150    flex: 0 0 480px;151    height: 124px;152    border: 2px solid #D9D9D9;153    border-radius: 8px;154    display: flex;155    align-items: center;156    justify-content: space-between;157    padding: 0 32px;158    font-size: 40px;159    color: #111;160    background: #FFFFFF;161  }162  .btn-add {163    flex: 1;164    height: 124px;165    background: #222222;166    color: #FFFFFF;167    border-radius: 8px;168    display: flex;169    align-items: center;170    justify-content: center;171    font-size: 40px;172    position: relative;173  }174  .btn-add .loader {175    position: absolute;176    right: 40px;177    width: 64px;178    height: 64px;179    border-radius: 32px;180    border: 6px solid rgba(255,255,255,0.6);181    border-top-color: #888;182  }183 184  /* Bottom home indicator */185  .home-indicator {186    position: absolute;187    bottom: 32px;188    left: 50%;189    transform: translateX(-50%);190    width: 360px;191    height: 14px;192    background: #000;193    border-radius: 7px;194    opacity: 0.12;195  }196 197  /* SVG helpers */198  svg { display: block; }199</style>200</head>201<body>202<div id="render-target">203 204  <div class="status-bar"></div>205 206  <!-- Back button -->207  <div class="circle-btn btn-back">208    <svg width="54" height="54" 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"></path>210    </svg>211  </div>212 213  <!-- Cart button -->214  <div class="circle-btn btn-cart">215    <svg width="60" height="60" viewBox="0 0 24 24">216      <path d="M6 7h12l-1.5 9H7.5L6 7z" stroke="#111" stroke-width="1.8" fill="none" stroke-linejoin="round"></path>217      <circle cx="9" cy="20" r="1.5" fill="#111"></circle>218      <circle cx="16" cy="20" r="1.5" fill="#111"></circle>219    </svg>220    <div style="position:absolute; top:10px; right:10px; background:#111; color:#fff; border-radius:12px; font-size:24px; padding:2px 8px;">8</div>221  </div>222 223  <!-- Heart button -->224  <div class="circle-btn btn-heart">225    <svg width="60" height="60" viewBox="0 0 24 24">226      <path d="M12 21s-6.5-4.2-9-8c-2-3 0-7 4-7 2.3 0 3.9 1.5 5 3 1.1-1.5 2.7-3 5-3 4 0 6 4 4 7-2.5 3.8-9 8-9 8z" stroke="#111" stroke-width="1.8" fill="none"></path>227    </svg>228  </div>229 230  <!-- Hero image -->231  <div class="hero">232    <div class="image-placeholder">[IMG: Black Chunky Chelsea Boot]</div>233  </div>234 235  <!-- Carousel dots -->236  <div class="dots">237    <div class="dot"></div>238    <div class="dot active"></div>239    <div class="dot"></div>240    <div class="dot"></div>241  </div>242 243  <!-- Klarna banner -->244  <div class="klarna">245    Shop now, <b>pay in 30 days</b>. For H&M members with H&M × Klarna.246    <div class="link">Learn more</div>247  </div>248 249  <!-- Product Info -->250  <div class="product">251    <div class="title-row">252      <div class="title">Chunky Chelsea Boots</div>253      <div class="share-btn">254        <svg width="44" height="44" viewBox="0 0 24 24">255          <circle cx="5" cy="12" r="2" fill="#111"></circle>256          <circle cx="19" cy="5" r="2" fill="#111"></circle>257          <circle cx="19" cy="19" r="2" fill="#111"></circle>258          <path d="M7 12l10-7M7 12l10 7" stroke="#111" stroke-width="1.8" fill="none" stroke-linecap="round"></path>259        </svg>260      </div>261    </div>262 263    <div class="rating">264      <!-- Stars: 2 full, 1 half, 2 outline -->265      <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1z" fill="#111"></path></svg>266      <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1z" fill="#111"></path></svg>267      <svg width="40" height="40" viewBox="0 0 24 24">268        <defs><clipPath id="half"><rect x="0" y="0" width="12" height="24"></rect></clipPath></defs>269        <path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1z" fill="#111" clip-path="url(#half)"></path>270        <path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1z" fill="none" stroke="#111" stroke-width="1.6"></path>271      </svg>272      <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1z" fill="none" stroke="#111" stroke-width="1.6"></path></svg>273      <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1z" fill="none" stroke="#111" stroke-width="1.6"></path></svg>274      <div class="reviews">(3 reviews)</div>275    </div>276 277    <!-- Purchase controls -->278    <div class="purchase-row">279      <div class="select">280        <span>10</span>281        <svg width="28" height="28" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"></path></svg>282      </div>283      <div class="btn-add">284        Add to bag285        <div class="loader"></div>286      </div>287    </div>288  </div>289 290  <!-- Home indicator -->291  <div class="home-indicator"></div>292 293</div>294</body>295</html>