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 Page - Chunky Chelsea Boots</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, 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: 140px;24 background: #cfcfcf;25 display: flex;26 align-items: center;27 padding: 0 36px;28 box-sizing: border-box;29 color: #ffffff;30 font-weight: 600;31 letter-spacing: 0.5px;32 }33 .status-left { display: flex; align-items: center; gap: 24px; font-size: 40px; }34 .status-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }35 .status-icon {36 width: 40px; height: 40px; opacity: 0.9;37 }38 39 /* Floating action buttons */40 .fab {41 position: absolute;42 top: 170px;43 left: 36px;44 width: 110px;45 height: 110px;46 border-radius: 55px;47 background: #f5f5f5;48 border: 1px solid #e1e1e1;49 display: flex;50 align-items: center;51 justify-content: center;52 }53 .right-actions {54 position: absolute;55 top: 170px;56 right: 36px;57 display: flex;58 flex-direction: column;59 gap: 52px;60 }61 .fab.small {62 width: 110px; height: 110px; border-radius: 55px;63 }64 .bag-count {65 position: absolute;66 top: 22px; right: 32px;67 background: #ffffff;68 border: 1px solid #d6d6d6;69 font-size: 32px;70 line-height: 32px;71 padding: 2px 10px;72 border-radius: 14px;73 color: #000;74 }75 76 /* Product image area */77 .image-wrap {78 margin-top: 280px;79 width: 980px;80 height: 740px;81 margin-left: auto;82 margin-right: auto;83 box-sizing: border-box;84 }85 .img-placeholder {86 width: 100%;87 height: 100%;88 background: #E0E0E0;89 border: 1px solid #BDBDBD;90 display: flex;91 align-items: center;92 justify-content: center;93 color: #757575;94 font-size: 40px;95 }96 97 /* Carousel dots */98 .dots {99 width: 180px;100 margin: 36px auto 60px auto;101 display: flex;102 justify-content: center;103 gap: 24px;104 }105 .dot {106 width: 18px; height: 18px; border-radius: 9px; background: #e6e6e6; border: 1px solid #d0d0d0;107 }108 .dot.active { background: #bdbdbd; }109 110 /* Promo banner */111 .promo {112 width: 100%;113 padding: 36px 60px;114 border-top: 1px solid #ededed;115 border-bottom: 1px solid #ededed;116 text-align: center;117 color: #222;118 }119 .promo .line1 { font-size: 36px; }120 .promo .line1 b { font-weight: 800; }121 .promo a { color: #0a0a0a; text-decoration: underline; font-size: 34px; display: inline-block; margin-top: 18px; }122 123 /* Product header */124 .product-header {125 padding: 44px 60px 20px 60px;126 display: flex;127 align-items: flex-start;128 }129 .title-block { flex: 1; }130 .product-title {131 font-size: 60px;132 font-weight: 800;133 color: #111;134 margin: 0 0 20px 0;135 }136 .rating-row {137 display: flex;138 align-items: center;139 gap: 22px;140 font-size: 40px;141 color: #111;142 }143 .reviews-link { color: #111; text-decoration: underline; font-size: 38px; }144 .share-btn {145 width: 80px; height: 80px;146 margin-top: 8px;147 display: flex; align-items: center; justify-content: center;148 }149 .divider { height: 2px; background: #e9e9e9; margin: 10px 60px 30px 60px; }150 151 /* Action row */152 .action-row {153 display: flex;154 gap: 40px;155 padding: 0 60px;156 }157 .dropdown, .add-btn {158 height: 130px;159 border-radius: 12px;160 display: flex;161 align-items: center;162 padding: 0 34px;163 box-sizing: border-box;164 font-size: 40px;165 }166 .dropdown {167 flex: 1;168 border: 2px solid #dedede;169 color: #444;170 justify-content: space-between;171 background: #fff;172 }173 .add-btn {174 flex: 1;175 background: #111;176 color: #fff;177 border: none;178 justify-content: center;179 gap: 26px;180 }181 182 /* Bottom gesture bar */183 .gesture {184 position: absolute;185 bottom: 34px;186 left: 50%;187 transform: translateX(-50%);188 width: 420px;189 height: 16px;190 background: #111;191 border-radius: 12px;192 opacity: 0.9;193 }194 195 /* Simple icon styles */196 svg { display: block; }197</style>198</head>199<body>200<div id="render-target">201 202 <!-- Status bar -->203 <div class="status-bar">204 <div class="status-left">205 <div>4:23</div>206 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#ffffff" opacity="0.2"/></svg>207 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#ffffff" opacity="0.2"/></svg>208 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#ffffff" opacity="0.2"/></svg>209 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#ffffff" opacity="0.2"/></svg>210 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#ffffff"/></svg>211 </div>212 <div class="status-right">213 <svg width="48" height="32" viewBox="0 0 24 14">214 <path d="M1 13 L12 1 L23 13" stroke="#fff" stroke-width="2" fill="none"/>215 <circle cx="12" cy="9" r="2" fill="#fff"/>216 </svg>217 <svg width="52" height="32" viewBox="0 0 28 14">218 <rect x="1" y="2" width="22" height="10" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"/>219 <rect x="24" y="5" width="3" height="4" fill="#fff"/>220 <rect x="3" y="4" width="16" height="6" fill="#fff"/>221 </svg>222 </div>223 </div>224 225 <!-- Back button -->226 <div class="fab">227 <svg width="56" height="56" viewBox="0 0 24 24">228 <path d="M15 18 L9 12 L15 6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>229 <line x1="9" y1="12" x2="21" y2="12" stroke="#111" stroke-width="2" stroke-linecap="round"/>230 </svg>231 </div>232 233 <!-- Right actions -->234 <div class="right-actions">235 <div class="fab small">236 <svg width="56" height="56" viewBox="0 0 24 24">237 <path d="M7 8 V6a5 5 0 0 1 10 0v2" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>238 <rect x="5" y="8" width="14" height="12" rx="2" ry="2" stroke="#111" stroke-width="2" fill="none"/>239 </svg>240 <div class="bag-count">7</div>241 </div>242 <div class="fab small">243 <svg width="56" height="56" viewBox="0 0 24 24">244 <path d="M12 21s-7-4.5-7-10a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 19 11c0 5.5-7 10-7 10z" stroke="#111" stroke-width="2" fill="none" stroke-linejoin="round"/>245 </svg>246 </div>247 </div>248 249 <!-- Product image -->250 <div class="image-wrap">251 <div class="img-placeholder">[IMG: Chunky Chelsea Boots - side view]</div>252 </div>253 254 <!-- Carousel dots -->255 <div class="dots">256 <div class="dot"></div>257 <div class="dot active"></div>258 <div class="dot"></div>259 <div class="dot"></div>260 </div>261 262 <!-- Promo banner -->263 <div class="promo">264 <div class="line1">Shop now, <b>pay in 30 days</b>. For H&M members with H&M × Klarna.</div>265 <a href="#">Learn more</a>266 </div>267 268 <!-- Product header -->269 <div class="product-header">270 <div class="title-block">271 <h1 class="product-title">Chunky Chelsea Boots</h1>272 <div class="rating-row">273 <div class="stars">274 <svg width="220" height="40" viewBox="0 0 220 40">275 <g fill="#111">276 <path d="M20 2 L24 14 L36 14 L26 21 L30 34 L20 26 L10 34 L14 21 L4 14 L16 14 Z"/>277 <path d="M64 2 L68 14 L80 14 L70 21 L74 34 L64 26 L54 34 L58 21 L48 14 L60 14 Z"/>278 </g>279 <g fill="none" stroke="#111" stroke-width="2">280 <path d="M108 2 L112 14 L124 14 L114 21 L118 34 L108 26 L98 34 L102 21 L92 14 L104 14 Z"/>281 <path d="M152 2 L156 14 L168 14 L158 21 L162 34 L152 26 L142 34 L146 21 L136 14 L148 14 Z"/>282 <path d="M196 2 L200 14 L212 14 L202 21 L206 34 L196 26 L186 34 L190 21 L180 14 L192 14 Z"/>283 </g>284 </svg>285 </div>286 <a class="reviews-link" href="#">(3 reviews)</a>287 </div>288 </div>289 <div class="share-btn">290 <svg width="60" height="60" viewBox="0 0 24 24">291 <circle cx="6" cy="12" r="2" fill="#111"/>292 <circle cx="18" cy="6" r="2" fill="#111"/>293 <circle cx="18" cy="18" r="2" fill="#111"/>294 <path d="M8 12 L16 7" stroke="#111" stroke-width="2"/>295 <path d="M8 12 L16 17" stroke="#111" stroke-width="2"/>296 </svg>297 </div>298 </div>299 <div class="divider"></div>300 301 <!-- Action row -->302 <div class="action-row">303 <div class="dropdown">304 <span>Select size</span>305 <svg width="36" height="36" viewBox="0 0 24 24">306 <path d="M6 9 L12 15 L18 9" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>307 </svg>308 </div>309 <div class="add-btn">310 <svg width="46" height="46" viewBox="0 0 24 24">311 <path d="M7 8 V6a5 5 0 0 1 10 0v2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>312 <rect x="5" y="8" width="14" height="12" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"/>313 </svg>314 <span>Add</span>315 </div>316 </div>317 318 <!-- Bottom gesture bar -->319 <div class="gesture"></div>320</div>321</body>322</html>