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 - Boot</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;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: 130px;24    background: #cfcfcf;25    color: #ffffff;26    font-size: 34px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    padding: 0 36px;31    box-sizing: border-box;32    letter-spacing: 0.5px;33  }34  .status-right {35    color: #ffffff;36    opacity: 0.95;37  }38 39  /* Round icon buttons on header */40  .header-btn {41    position: absolute;42    top: 150px;43    width: 110px;44    height: 110px;45    border-radius: 55px;46    background: #ffffff;47    border: 1px solid #e5e5e5;48    display: flex;49    align-items: center;50    justify-content: center;51    box-shadow: 0 1px 0 rgba(0,0,0,0.04);52  }53  .header-btn.left { left: 32px; }54  .header-btn.right { right: 32px; }55 56  /* Product image area */57  .product-area {58    position: absolute;59    top: 220px;60    left: 0;61    width: 100%;62    padding: 0 60px;63    box-sizing: border-box;64  }65  .product-image {66    width: 960px;67    height: 780px;68    margin: 0 auto;69    background: #E0E0E0;70    border: 1px solid #BDBDBD;71    color: #757575;72    display: flex;73    align-items: center;74    justify-content: center;75    font-size: 36px;76    text-align: center;77  }78 79  /* Carousel dots */80  .dots {81    width: 140px;82    margin: 48px auto 0 auto;83    display: flex;84    justify-content: space-between;85  }86  .dot {87    width: 20px;88    height: 20px;89    border-radius: 50%;90    background: #e6e6e6;91    border: 2px solid #dcdcdc;92  }93  .dot.active {94    background: #ffffff;95    border-color: #d0d0d0;96  }97 98  /* Promo block */99  .promo {100    position: absolute;101    left: 0;102    width: 100%;103    top: 1250px;104    padding: 70px 60px 80px 60px;105    box-sizing: border-box;106    border-top: 1px solid #eeeeee;107    border-bottom: 1px solid #f0f0f0;108    text-align: center;109    color: #222;110  }111  .promo p {112    margin: 0 auto 24px auto;113    max-width: 900px;114    line-height: 1.6;115    font-size: 36px;116  }117  .promo .bold { font-weight: 700; }118  .promo a {119    color: #2d5cff;120    font-size: 34px;121    text-decoration: underline;122  }123 124  /* Add to bag sticky section */125  .add-to-bag {126    position: absolute;127    left: 0;128    right: 0;129    bottom: 140px; /* leave space for device nav bar */130    padding: 0 36px;131    box-sizing: border-box;132  }133  .bag-btn {134    width: 100%;135    height: 160px;136    background: #111111;137    border-radius: 6px;138    display: flex;139    align-items: center;140    justify-content: center;141  }142 143  /* Device bottom nav pill (visual only) */144  .device-nav {145    position: absolute;146    left: 0;147    bottom: 0;148    width: 1080px;149    height: 110px;150    background: #0e0e0e;151    display: flex;152    align-items: center;153    justify-content: center;154  }155  .device-pill {156    width: 240px;157    height: 14px;158    background: #ffffff;159    border-radius: 7px;160    opacity: 0.85;161  }162 163  /* Simple icon styles */164  svg { display: block; }165</style>166</head>167<body>168<div id="render-target">169 170  <!-- Status bar mock -->171  <div class="status-bar">172    <div>2:54</div>173    <div class="status-right">Wi‑Fi   🔋 100%</div>174  </div>175 176  <!-- Header circular buttons -->177  <div class="header-btn left" aria-label="Back">178    <svg width="44" height="44" viewBox="0 0 44 44">179      <path d="M26 8 L14 22 L26 36" fill="none" stroke="#1a1a1a" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"></path>180    </svg>181  </div>182  <div class="header-btn right" aria-label="Cart">183    <svg width="40" height="40" viewBox="0 0 48 48">184      <path d="M14 18 h20 l-2 18 H16 Z" fill="none" stroke="#1a1a1a" stroke-width="2.5"></path>185      <path d="M18 18 c0-4 3-7 6-7s6 3 6 7" fill="none" stroke="#1a1a1a" stroke-width="2.5" stroke-linecap="round"></path>186    </svg>187  </div>188 189  <!-- Main product visual -->190  <div class="product-area">191    <div class="product-image">[IMG: Black Chelsea boot]</div>192 193    <div class="dots">194      <div class="dot active"></div>195      <div class="dot"></div>196      <div class="dot"></div>197      <div class="dot"></div>198    </div>199  </div>200 201  <!-- Promo / Klarna message -->202  <div class="promo">203    <p>Shop now, <span class="bold">pay in 30 days.</span> For H&amp;M members with <span class="bold">H&amp;M × Klarna.</span></p>204    <a href="#">Learn more</a>205  </div>206 207  <!-- Sticky Add to Bag button -->208  <div class="add-to-bag">209    <div class="bag-btn">210      <svg width="56" height="56" viewBox="0 0 48 48">211        <path d="M12 18 h24 l-2 20 H14 Z" fill="none" stroke="#ffffff" stroke-width="3"></path>212        <path d="M18 18 c0-5 3.5-8 6-8s6 3 6 8" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round"></path>213      </svg>214    </div>215  </div>216 217  <!-- Device nav pill -->218  <div class="device-nav">219    <div class="device-pill"></div>220  </div>221 222</div>223</body>224</html>