GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Product Detail - Chunky Sneakers</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15    font-family: Arial, Helvetica, sans-serif;16    color: #222;17  }18 19  /* Top action buttons */20  .back-btn {21    position: absolute;22    top: 180px;23    left: 40px;24    width: 110px;25    height: 110px;26    background: #FFFFFF;27    border: 1px solid #E5E5E5;28    border-radius: 55px;29    box-shadow: 0 2px 6px rgba(0,0,0,0.06);30    display: flex;31    align-items: center;32    justify-content: center;33  }34  .right-icons {35    position: absolute;36    top: 200px;37    right: 40px;38    display: flex;39    flex-direction: column;40    gap: 40px;41  }42  .round-icon {43    width: 110px;44    height: 110px;45    background: #FFFFFF;46    border: 1px solid #E5E5E5;47    border-radius: 55px;48    box-shadow: 0 2px 6px rgba(0,0,0,0.06);49    display: flex;50    align-items: center;51    justify-content: center;52    position: relative;53  }54  .badge {55    position: absolute;56    top: 14px;57    right: 18px;58    background: #000;59    color: #fff;60    font-size: 30px;61    line-height: 34px;62    padding: 2px 10px;63    border-radius: 14px;64  }65 66  /* Image area */67  .image-area {68    position: absolute;69    top: 380px;70    left: 60px;71    width: 960px;72    height: 700px;73    background: #E0E0E0;74    border: 1px solid #BDBDBD;75    display: flex;76    align-items: center;77    justify-content: center;78    color: #757575;79    font-size: 34px;80    letter-spacing: 0.2px;81  }82 83  /* Carousel dots */84  .dots {85    position: absolute;86    top: 1110px;87    left: 0;88    width: 100%;89    display: flex;90    justify-content: center;91    gap: 24px;92  }93  .dot {94    width: 22px;95    height: 22px;96    border-radius: 11px;97    background: #E0E0E0;98  }99  .dot.active { background: #FFFFFF; border: 2px solid #D0D0D0; }100 101  /* Promo banner */102  .promo {103    position: absolute;104    top: 1270px;105    left: 0;106    width: 100%;107    height: 220px;108    background: #F4F4F4;109    display: flex;110    align-items: center;111    justify-content: center;112    text-align: center;113    color: #333;114    padding: 0 80px;115    box-sizing: border-box;116  }117  .promo .bold { font-weight: 700; }118  .promo a { color: #000; text-decoration: underline; }119 120  /* Title row */121  .title-row {122    position: absolute;123    top: 1530px;124    left: 60px;125    right: 60px;126    display: flex;127    align-items: center;128    justify-content: space-between;129    padding-bottom: 30px;130    border-bottom: 1px solid #E8E8E8;131  }132  .title-row .title {133    font-size: 64px;134    font-weight: 700;135    letter-spacing: 0.2px;136  }137  .share-icon {138    width: 80px;139    height: 80px;140    display: inline-flex;141    align-items: center;142    justify-content: center;143  }144 145  /* Controls row */146  .controls {147    position: absolute;148    top: 1700px;149    left: 60px;150    right: 60px;151    display: flex;152    gap: 40px;153  }154  .select {155    flex: 1;156    height: 140px;157    border: 2px solid #E0E0E0;158    border-radius: 8px;159    padding: 0 34px;160    display: flex;161    align-items: center;162    justify-content: space-between;163    box-sizing: border-box;164    font-size: 44px;165    color: #222;166    background: #FFFFFF;167  }168  .add-btn {169    width: 440px;170    height: 140px;171    background: #111111;172    color: #FFFFFF;173    border-radius: 8px;174    display: flex;175    align-items: center;176    justify-content: center;177    gap: 22px;178    font-size: 44px;179    font-weight: 600;180  }181 182  /* Simple helper */183  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }184</style>185</head>186<body>187<div id="render-target">188 189  <!-- Back Button -->190  <div class="back-btn" aria-label="Back">191    <svg width="56" height="56" viewBox="0 0 24 24" fill="none">192      <path d="M15 6l-6 6 6 6" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>193    </svg>194  </div>195 196  <!-- Right-side Icons -->197  <div class="right-icons">198    <div class="round-icon" aria-label="Bag">199      <div class="badge">7</div>200      <svg width="54" height="54" viewBox="0 0 24 24" fill="none">201        <path d="M6 7h12l-1 12H7L6 7z" stroke="#222" stroke-width="2" stroke-linejoin="round"/>202        <path d="M9 7a3 3 0 016 0" stroke="#222" stroke-width="2" stroke-linecap="round"/>203      </svg>204    </div>205    <div class="round-icon" aria-label="Wishlist">206      <svg width="54" height="54" viewBox="0 0 24 24" fill="none">207        <path d="M12 21s-7-4.5-7-10a4.5 4.5 0 019 0 4.5 4.5 0 019 0c0 5.5-7 10-7 10z" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>208      </svg>209    </div>210  </div>211 212  <!-- Product Image Placeholder -->213  <div class="image-area">214    [IMG: White/Grey Chunky Sneaker]215  </div>216 217  <!-- Carousel dots -->218  <div class="dots">219    <div class="dot active"></div>220    <div class="dot"></div>221    <div class="dot"></div>222    <div class="dot"></div>223  </div>224 225  <!-- Promo banner -->226  <div class="promo">227    <div>228      Shop now, <span class="bold">pay in 30 days.</span> For H&M members with H&M × Klarna.&nbsp;229      <a href="#">Learn more</a>230    </div>231  </div>232 233  <!-- Title row -->234  <div class="title-row">235    <div class="title">Chunky Sneakers</div>236    <div class="share-icon" aria-label="Share">237      <svg width="64" height="64" viewBox="0 0 24 24" fill="none">238        <circle cx="5" cy="12" r="2" fill="#222"/>239        <circle cx="19" cy="5" r="2" fill="#222"/>240        <circle cx="19" cy="19" r="2" fill="#222"/>241        <path d="M7 12l10-6M7 12l10 6" stroke="#222" stroke-width="2" stroke-linecap="round"/>242      </svg>243    </div>244  </div>245 246  <!-- Controls row -->247  <div class="controls">248    <div class="select" role="button" aria-label="Select size">249      <span>10</span>250      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">251        <path d="M6 9l6 6 6-6" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>252      </svg>253    </div>254    <div class="add-btn" role="button" aria-label="Add to cart">255      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">256        <path d="M6 7h12l-1 12H7L6 7z" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>257        <path d="M9 7a3 3 0 016 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>258      </svg>259      <span>Add</span>260    </div>261  </div>262 263</div>264</body>265</html>