GD-ML/AndroidCode
13.4k
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 - Chunky Chelsea Boots</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 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 150px;23 background: #CFCFCF;24 color: #fff;25 display: flex;26 align-items: center;27 justify-content: space-between;28 padding: 0 40px;29 box-sizing: border-box;30 font-weight: 600;31 letter-spacing: 0.5px;32 }33 .status-left { font-size: 42px; color: #FFFFFF; }34 .status-right {35 display: flex;36 align-items: center;37 gap: 26px;38 }39 /* Header floating controls */40 .circle-btn {41 position: absolute;42 width: 120px;43 height: 120px;44 border-radius: 60px;45 background: #FFFFFF;46 border: 1px solid #E5E5E5;47 display: flex;48 align-items: center;49 justify-content: center;50 box-shadow: 0 4px 8px rgba(0,0,0,0.06);51 }52 .back-btn { left: 40px; top: 210px; }53 .cart-btn { right: 40px; top: 210px; }54 .fav-btn { right: 40px; top: 410px; }55 .badge {56 position: absolute;57 top: 15px;58 right: 18px;59 background: #000000;60 color: #FFFFFF;61 font-size: 32px;62 line-height: 32px;63 padding: 6px 14px;64 border-radius: 24px;65 }66 /* Product image area */67 .image-area {68 position: absolute;69 top: 360px;70 left: 90px;71 width: 900px;72 height: 820px;73 border: 1px solid #BDBDBD;74 background: #E0E0E0;75 display: flex;76 align-items: center;77 justify-content: center;78 color: #757575;79 font-size: 38px;80 text-align: center;81 }82 /* Slider dots */83 .dots {84 position: absolute;85 top: 1220px;86 left: 0;87 width: 100%;88 display: flex;89 gap: 24px;90 justify-content: center;91 }92 .dot {93 width: 22px;94 height: 22px;95 border-radius: 11px;96 background: #E6E6E6;97 }98 .dot.active { background: #D0D0D0; }99 100 /* Promo banner */101 .promo {102 position: absolute;103 top: 1330px;104 left: 0;105 width: 100%;106 padding: 30px 70px 40px;107 box-sizing: border-box;108 text-align: center;109 color: #222;110 font-size: 36px;111 line-height: 52px;112 }113 .promo b { font-weight: 700; }114 .promo a { color: #000; text-decoration: underline; }115 116 /* Title and rating */117 .title-row {118 position: absolute;119 top: 1550px;120 left: 70px;121 right: 70px;122 display: flex;123 align-items: center;124 justify-content: space-between;125 }126 .title {127 font-size: 56px;128 font-weight: 700;129 color: #111;130 }131 132 .rating {133 position: absolute;134 top: 1650px;135 left: 70px;136 display: flex;137 align-items: center;138 gap: 18px;139 color: #111;140 }141 .reviews {142 font-size: 36px;143 text-decoration: underline;144 color: #111;145 }146 .stars {147 display: flex;148 align-items: center;149 gap: 10px;150 }151 152 /* Action row */153 .action-row {154 position: absolute;155 top: 1785px;156 left: 70px;157 right: 70px;158 display: grid;159 grid-template-columns: 1fr 1fr;160 gap: 40px;161 }162 .select {163 height: 140px;164 border: 2px solid #DADADA;165 border-radius: 8px;166 display: flex;167 align-items: center;168 justify-content: space-between;169 padding: 0 36px;170 font-size: 40px;171 color: #222;172 box-sizing: border-box;173 background: #FFFFFF;174 }175 .add-btn {176 height: 140px;177 background: #111111;178 color: #FFFFFF;179 border-radius: 8px;180 display: flex;181 align-items: center;182 justify-content: center;183 gap: 22px;184 font-size: 44px;185 font-weight: 700;186 }187 188 /* Divider line */189 .divider {190 position: absolute;191 top: 1750px;192 left: 0;193 width: 100%;194 height: 2px;195 background: #EEEEEE;196 }197 198 /* Home indicator */199 .home-indicator {200 position: absolute;201 bottom: 40px;202 left: 50%;203 transform: translateX(-50%);204 width: 320px;205 height: 18px;206 border-radius: 9px;207 background: #000000;208 opacity: 0.9;209 }210</style>211</head>212<body>213<div id="render-target">214 215 <!-- Status bar -->216 <div class="status-bar">217 <div class="status-left">4:25</div>218 <div class="status-right">219 <!-- Simple indicators -->220 <svg width="40" height="40"><circle cx="20" cy="20" r="6" fill="#FFFFFF"/></svg>221 <svg width="48" height="40" viewBox="0 0 24 24">222 <path d="M2 18h20L12 6 2 18z" fill="#FFFFFF"/>223 </svg>224 <svg width="46" height="40" viewBox="0 0 24 24">225 <rect x="3" y="5" width="16" height="14" rx="2" fill="#FFFFFF"/>226 <rect x="20" y="9" width="2" height="6" fill="#FFFFFF"/>227 </svg>228 </div>229 </div>230 231 <!-- Floating controls -->232 <div class="circle-btn back-btn">233 <svg width="56" height="56" viewBox="0 0 24 24">234 <path d="M15 6L9 12l6 6" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>235 <path d="M9 12H21" stroke="#111" stroke-width="2.5" stroke-linecap="round"/>236 </svg>237 </div>238 239 <div class="circle-btn cart-btn">240 <div class="badge">8</div>241 <svg width="64" height="64" viewBox="0 0 24 24">242 <path d="M7 8h10l-1 10H8L7 8z" fill="none" stroke="#111" stroke-width="2"></path>243 <path d="M9 8V6a3 3 0 0 1 6 0v2" fill="none" stroke="#111" stroke-width="2"></path>244 </svg>245 </div>246 247 <div class="circle-btn fav-btn">248 <svg width="64" height="64" viewBox="0 0 24 24">249 <path d="M12 20s-7-4.4-7-9a4.2 4.2 0 0 1 7-3 4.2 4.2 0 0 1 7 3c0 4.6-7 9-7 9z" fill="none" stroke="#111" stroke-width="2"/>250 </svg>251 </div>252 253 <!-- Product image placeholder -->254 <div class="image-area">[IMG: Black Chelsea Boot]</div>255 256 <!-- Slider dots -->257 <div class="dots">258 <div class="dot active"></div>259 <div class="dot"></div>260 <div class="dot"></div>261 <div class="dot"></div>262 </div>263 264 <!-- Promo -->265 <div class="promo">266 Shop now, <b>pay in 30 days</b>. For H&M members with H&M × Klarna.267 <div><a href="#">Learn more</a></div>268 </div>269 270 <!-- Title and share -->271 <div class="title-row">272 <div class="title">Chunky Chelsea Boots</div>273 <svg width="60" height="60" viewBox="0 0 24 24">274 <circle cx="5" cy="12" r="2" fill="#111"></circle>275 <circle cx="12" cy="8" r="2" fill="#111"></circle>276 <circle cx="19" cy="4" r="2" fill="#111"></circle>277 <path d="M6.9 11l3.6-2.7M13.9 7l3.6-2.7" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>278 </svg>279 </div>280 281 <!-- Rating -->282 <div class="rating">283 <div class="stars">284 <!-- Filled -->285 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 3l3 6 7 .9-5 4.7 1.3 7.4L12 18l-6.3 4 1.3-7.4-5-4.7 7-.9 3-6z" fill="#111"/></svg>286 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 3l3 6 7 .9-5 4.7 1.3 7.4L12 18l-6.3 4 1.3-7.4-5-4.7 7-.9 3-6z" fill="#111"/></svg>287 <!-- Outline -->288 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 3l3 6 7 .9-5 4.7 1.3 7.4L12 18l-6.3 4 1.3-7.4-5-4.7 7-.9 3-6z" fill="none" stroke="#111" stroke-width="2"/></svg>289 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 3l3 6 7 .9-5 4.7 1.3 7.4L12 18l-6.3 4 1.3-7.4-5-4.7 7-.9 3-6z" fill="none" stroke="#111" stroke-width="2"/></svg>290 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 3l3 6 7 .9-5 4.7 1.3 7.4L12 18l-6.3 4 1.3-7.4-5-4.7 7-.9 3-6z" fill="none" stroke="#111" stroke-width="2"/></svg>291 </div>292 <div class="reviews">(3 reviews)</div>293 </div>294 295 <div class="divider"></div>296 297 <!-- Action row -->298 <div class="action-row">299 <div class="select">300 <span>10</span>301 <svg width="40" height="40" viewBox="0 0 24 24">302 <path d="M6 9l6 6 6-6" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>303 </svg>304 </div>305 <div class="add-btn">306 <svg width="46" height="46" viewBox="0 0 24 24">307 <path d="M7 8h10l-1 10H8L7 8z" fill="none" stroke="#fff" stroke-width="2"></path>308 <path d="M9 8V6a3 3 0 0 1 6 0v2" fill="none" stroke="#fff" stroke-width="2"></path>309 </svg>310 Add311 </div>312 </div>313 314 <!-- Home indicator -->315 <div class="home-indicator"></div>316</div>317</body>318</html>