GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Product Detail - Sneakers</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", Arial, Helvetica, sans-serif;}9  #render-target{10    width:1080px;11    height:2400px;12    position:relative;13    overflow:hidden;14    background:#ffffff;15    color:#111;16  }17 18  /* Status bar */19  .status-bar{20    position:absolute;21    top:0; left:0; right:0;22    height:120px;23    background:#000;24    color:#fff;25    display:flex;26    align-items:center;27    padding:0 32px;28    box-sizing:border-box;29    font-size:40px;30  }31  .status-left{display:flex; align-items:center; gap:24px;}32  .status-right{margin-left:auto; display:flex; align-items:center; gap:28px;}33  .battery{34    width:58px;height:28px;border:3px solid #fff;border-radius:6px;position:relative;35  }36  .battery::after{content:"";position:absolute;right:-10px;top:8px;width:6px;height:12px;background:#fff;border-radius:2px;}37  .battery .level{position:absolute;left:3px;top:3px;bottom:3px;right:10px;background:#fff;border-radius:3px;}38  .dot{width:10px;height:10px;background:#ccc;border-radius:50%;}39  .icon-circle{width:28px;height:28px;border:3px solid #fff;border-radius:50%;}40 41  /* Hero section */42  .hero{43    position:absolute;top:120px;left:0;right:0;44    height:1320px;45    overflow:hidden;46    background:#f5f5f5;47  }48  .hero-img{49    position:absolute;left:0;right:0;top:0;bottom:0;50    background:#E0E0E0;51    border-top:1px solid #BDBDBD;52    border-bottom:1px solid #BDBDBD;53    display:flex;align-items:flex-end;justify-content:center;54    padding-bottom:220px;55    color:#757575;56    font-size:44px;57    letter-spacing:0.3px;58  }59  .page-dots{60    position:absolute;bottom:190px;left:50%;61    transform:translateX(-50%);62    display:flex;gap:22px;align-items:center;63  }64  .dot-ring{65    width:34px;height:34px;border:5px solid #fff;border-radius:50%;66    background:transparent;67    box-shadow:0 0 0 2px rgba(0,0,0,0.2) inset;68  }69  .dot-small{70    width:18px;height:18px;background:#bdbdbd;border-radius:50%;71  }72 73  .back-btn, .share-btn{74    position:absolute;top:40px;75    width:80px;height:80px;76    display:flex;align-items:center;justify-content:center;77  }78  .back-btn{left:16px;}79  .share-btn{right:16px;}80  .back-btn svg, .share-btn svg{width:46px;height:46px;}81 82  .badge{83    position:absolute;84    right:36px;85    bottom:120px;86    background:#1f1f1f;87    color:#fff;88    padding:26px 44px;89    border-radius:60px;90    border:4px solid #e6e6e6;91    font-weight:700;92    letter-spacing:2px;93    font-size:38px;94  }95 96  /* Product details panel */97  .panel{98    position:absolute;99    left:0;right:0;100    top:1440px;101    bottom:110px;102    background:#1f1f1f;103    color:#e7e7e7;104    padding:40px 40px 20px 40px;105    box-sizing:border-box;106    overflow:hidden;107  }108  .label{109    color:#a5a5a5;110    font-weight:700;111    letter-spacing:2px;112    font-size:34px;113    margin-top:10px;114  }115  .label span{color:#d7d7d7;font-weight:600;letter-spacing:1px;}116  .thumbs{117    display:flex;gap:26px;margin-top:28px;118  }119  .thumb{120    width:170px;height:210px;background:#E0E0E0;border:2px solid #BDBDBD;121    display:flex;align-items:center;justify-content:center;color:#757575;font-size:24px;text-align:center;122  }123  .thumb.active{border:6px solid #e6e6e6;}124  .title{125    margin-top:38px;126    font-size:44px;line-height:64px;color:#dedede;127  }128  .price{129    margin-top:16px;font-size:40px;display:flex;gap:24px;align-items:baseline;130  }131  .price .old{color:#8c8c8c;text-decoration:line-through;}132  .price .new{color:#e83e6a;font-weight:800;}133  .price .pct{color:#e83e6a;font-size:34px;}134  .divider{135    margin-top:36px;height:2px;background:#3a3a3a;136  }137  .size-row{138    margin-top:22px;display:flex;align-items:center;justify-content:space-between;color:#d0d0d0;139    font-size:36px;font-weight:700;letter-spacing:2px;140  }141  .chev{width:40px;height:40px;}142 143  /* Home indicator */144  .home-indicator{145    position:absolute;left:50%;transform:translateX(-50%);146    bottom:30px;width:360px;height:12px;border-radius:10px;background:#dcdcdc;147  }148</style>149</head>150<body>151<div id="render-target">152  <!-- Status bar -->153  <div class="status-bar">154    <div class="status-left">155      <div>10:52</div>156      <div class="icon-circle"></div>157      <div class="icon-circle"></div>158      <div class="icon-circle"></div>159      <div class="dot"></div>160    </div>161    <div class="status-right">162      <div class="icon-circle"></div>163      <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="5"/></svg>164      <div class="battery"><div class="level"></div></div>165      <div style="font-size:34px;">90%</div>166    </div>167  </div>168 169  <!-- Hero image area -->170  <div class="hero">171    <div class="back-btn" aria-label="Back">172      <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">173        <path d="M15 5 L8 12 L15 19"/>174      </svg>175    </div>176    <div class="share-btn" aria-label="Share">177      <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">178        <circle cx="18" cy="5" r="3"/>179        <circle cx="6" cy="12" r="3"/>180        <circle cx="18" cy="19" r="3"/>181        <path d="M8.7 12 L15 6.8"/>182        <path d="M8.7 12 L15 17.2"/>183      </svg>184    </div>185 186    <div class="hero-img">[IMG: Black trail running shoes on feet]</div>187 188    <div class="page-dots">189      <div class="dot-ring"></div>190      <div class="dot-small"></div>191      <div class="dot-small"></div>192      <div class="dot-small"></div>193      <div class="dot-small"></div>194    </div>195 196    <div class="badge">SELLING FAST</div>197  </div>198 199  <!-- Product info panel -->200  <div class="panel">201    <div class="label">COLOUR: <span>BLACK</span></div>202 203    <div class="thumbs">204      <div class="thumb active">[IMG]</div>205      <div class="thumb">[IMG]</div>206      <div class="thumb">[IMG]</div>207    </div>208 209    <div class="title">Under Armour Charged Bandit Trail 2 trainers in black</div>210 211    <div class="price">212      <div class="old">£84.00</div>213      <div class="new">£67.50</div>214      <div class="pct">(-19%)</div>215    </div>216 217    <div class="divider"></div>218 219    <div class="size-row">220      <div>SIZE</div>221      <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#d0d0d0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">222        <path d="M6 9 L12 15 L18 9"/>223      </svg>224    </div>225  </div>226 227  <!-- Home indicator -->228  <div class="home-indicator"></div>229</div>230</body>231</html>