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 - Chelsea Boots</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #fafafa;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 110px;24    background: #cfcfcf;25    color: #212121;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 36px;30    box-sizing: border-box;31    font-size: 32px;32    letter-spacing: 0.3px;33  }34  .sb-left span.icon {35    display: inline-block;36    width: 28px;37    height: 28px;38    border: 2px solid #616161;39    border-radius: 50%;40    margin: 0 8px;41    vertical-align: middle;42  }43  .sb-right { display: flex; align-items: center; gap: 14px; }44  .wifi {45    width: 28px; height: 28px;46    border-radius: 50%;47    border: 2px solid #616161;48  }49  .battery {50    width: 46px; height: 22px;51    border: 2px solid #616161; border-radius: 4px;52    position: relative; margin-right: 6px;53  }54  .battery::after {55    content: ""; position: absolute; right: -8px; top: 6px;56    width: 6px; height: 10px; background: #616161; border-radius: 2px;57  }58 59  /* Controls */60  .circle-btn {61    position: absolute;62    width: 110px; height: 110px;63    border-radius: 55px;64    background: #ffffff;65    border: 1px solid #e0e0e0;66    box-shadow: 0 2px 6px rgba(0,0,0,0.05);67    display: flex; align-items: center; justify-content: center;68  }69  .back-btn { top: 140px; left: 34px; }70  .right-btn { right: 34px; }71  .cart-btn { top: 150px; }72  .heart-btn { top: 370px; }73 74  .icon-stroke { stroke: #111; stroke-width: 3; fill: none; }75 76  /* Product image area */77  .gallery {78    position: absolute;79    top: 250px; left: 60px;80    width: 960px; height: 860px;81    display: flex; align-items: center; justify-content: center;82  }83  .product-img {84    width: 100%; height: 100%;85    background: #E0E0E0;86    border: 1px solid #BDBDBD;87    color: #757575;88    display: flex; align-items: center; justify-content: center;89    font-size: 36px;90  }91 92  .dots {93    position: absolute;94    top: 1150px; left: 0; right: 0;95    display: flex; justify-content: center; gap: 18px;96  }97  .dot {98    width: 18px; height: 18px; border-radius: 9px;99    background: #e0e0e0; border: 1px solid #c7c7c7;100  }101  .dot.active { background: #616161; border-color: #616161; }102 103  /* Promo */104  .promo {105    position: absolute;106    top: 1230px; left: 0;107    width: 100%; padding: 50px 60px 40px;108    box-sizing: border-box;109    text-align: center;110    background: #ffffff;111    border-top: 1px solid #eaeaea;112    border-bottom: 1px solid #eaeaea;113    color: #333;114  }115  .promo .bold { font-weight: 700; }116  .promo a { color: #333; text-decoration: underline; }117 118  /* Details */119  .title {120    position: absolute;121    top: 1430px; left: 60px;122    font-size: 56px; font-weight: 800; color: #111;123  }124  .share-btn {125    position: absolute;126    top: 1450px; right: 60px;127    width: 80px; height: 80px;128    border-radius: 40px;129    background: #ffffff;130    border: 1px solid #e0e0e0;131    display: flex; align-items: center; justify-content: center;132  }133  .price {134    position: absolute;135    top: 1580px; left: 60px;136    font-size: 44px; font-weight: 700; color: #111;137  }138 139  /* Add bar */140  .add-bar {141    position: absolute;142    left: 40px; right: 40px;143    bottom: 120px;144    height: 150px;145    background: #222;146    border-radius: 8px;147    display: flex; align-items: center; justify-content: center;148    gap: 22px;149    color: #fff;150    font-size: 44px; font-weight: 700;151  }152  .add-bar svg { stroke: #fff; fill: none; stroke-width: 3; }153 154  /* Bottom navigation pill */155  .nav-pill {156    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);157    width: 220px; height: 16px; background: #cfcfcf; border-radius: 8px;158  }159</style>160</head>161<body>162<div id="render-target">163 164  <!-- Status Bar -->165  <div class="status-bar">166    <div class="sb-left">167      2:54168      <span class="icon"></span>169      <span class="icon"></span>170      <span class="icon"></span>171      <span class="icon"></span>172    </div>173    <div class="sb-right">174      <div class="wifi"></div>175      <div class="battery"></div>176      100%177    </div>178  </div>179 180  <!-- Back button -->181  <div class="circle-btn back-btn">182    <svg width="48" height="48" viewBox="0 0 48 48">183      <path d="M30 12 L18 24 L30 36" class="icon-stroke" />184    </svg>185  </div>186 187  <!-- Right action buttons -->188  <div class="circle-btn right-btn cart-btn">189    <svg width="44" height="44" viewBox="0 0 44 44">190      <path d="M12 18 h20 v14 h-20 z" class="icon-stroke" />191      <path d="M14 18 c0-5 4-8 8-8 s8 3 8 8" class="icon-stroke" />192    </svg>193  </div>194 195  <div class="circle-btn right-btn heart-btn">196    <svg width="44" height="44" viewBox="0 0 44 44">197      <path d="M22 34 c-7 -5 -12 -9 -12 -16 c0 -4 3 -7 7 -7 c3 0 5 1 5 3 c0 -2 2 -3 5 -3 c4 0 7 3 7 7 c0 7 -5 11 -12 16 z" fill="none" stroke="#111" stroke-width="3" />198    </svg>199  </div>200 201  <!-- Product Image -->202  <div class="gallery">203    <div class="product-img">[IMG: Black Chelsea Boot]</div>204  </div>205 206  <!-- Carousel dots -->207  <div class="dots">208    <div class="dot active"></div>209    <div class="dot"></div>210    <div class="dot"></div>211    <div class="dot"></div>212  </div>213 214  <!-- Promo block -->215  <div class="promo">216    Shop now, <span class="bold">pay in 30 days.</span> For H&M members with H&amp;M × Klarna.217    <div style="margin-top: 22px;"><a href="#">Learn more</a></div>218  </div>219 220  <!-- Title and share -->221  <div class="title">Chelsea Boots</div>222  <div class="share-btn">223    <svg width="44" height="44" viewBox="0 0 44 44">224      <circle cx="12" cy="22" r="4" stroke="#111" stroke-width="3" fill="none"></circle>225      <circle cx="32" cy="12" r="4" stroke="#111" stroke-width="3" fill="none"></circle>226      <circle cx="32" cy="32" r="4" stroke="#111" stroke-width="3" fill="none"></circle>227      <path d="M15 21 L28 14" stroke="#111" stroke-width="3" fill="none"></path>228      <path d="M15 23 L28 30" stroke="#111" stroke-width="3" fill="none"></path>229    </svg>230  </div>231 232  <!-- Price -->233  <div class="price">$39.99</div>234 235  <!-- Add to cart bar -->236  <div class="add-bar">237    <svg width="48" height="48" viewBox="0 0 48 48">238      <path d="M14 20 h20 v16 h-20 z" />239      <path d="M16 20 c0-6 4-10 8-10 s8 4 8 10" />240    </svg>241    Add242  </div>243 244  <!-- Bottom nav pill -->245  <div class="nav-pill"></div>246</div>247</body>248</html>