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 Size Selection</title>7<style>8 * { box-sizing: border-box; }9 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #222; }10 #render-target {11 width: 1080px;12 height: 2400px;13 position: relative;14 overflow: hidden;15 background: #F3F3F3;16 }17 18 /* Top area */19 .safe-area { height: 140px; background: #CFCFCF; }20 .header {21 display: flex;22 align-items: center;23 justify-content: space-between;24 padding: 36px 40px;25 background: #EFEFEF;26 }27 .back-row {28 display: flex;29 align-items: center;30 gap: 20px;31 }32 .title {33 font-size: 38px;34 font-weight: 600;35 letter-spacing: 0.5px;36 }37 .header-icons {38 display: flex;39 align-items: center;40 gap: 34px;41 }42 .icon {43 width: 44px; height: 44px;44 }45 .icon svg { width: 100%; height: 100%; stroke: #111; fill: none; stroke-width: 3; }46 47 /* Content */48 .content { padding: 20px 40px 40px; }49 .section-title {50 font-size: 40px;51 font-weight: 700;52 margin: 24px 0 24px;53 }54 55 /* Size grid */56 .size-grid {57 display: grid;58 grid-template-columns: repeat(5, 1fr);59 gap: 24px;60 margin-bottom: 28px;61 }62 .size-btn {63 height: 120px;64 border: 2px solid #D9D9D9;65 background: #FFFFFF;66 border-radius: 8px;67 font-size: 40px;68 font-weight: 600;69 color: #333;70 display: flex; align-items: center; justify-content: center;71 }72 .size-btn.grey { background: #E5E5E5; }73 .size-btn.selected { background: #1F1F1F; color: #FFF; border-color: #1F1F1F; }74 75 /* Inline help links */76 .inline-links {77 display: flex;78 align-items: center;79 justify-content: space-between;80 margin: 18px 0 32px;81 }82 .link {83 display: inline-flex;84 align-items: center;85 gap: 16px;86 color: #222;87 text-decoration: underline;88 font-size: 34px;89 }90 .small-icon { width: 42px; height: 42px; }91 .small-icon svg { width: 100%; height: 100%; stroke: #111; fill: none; stroke-width: 3; }92 93 /* Add button */94 .add-btn {95 margin: 16px 0 32px;96 height: 132px;97 background: #1F1F1F;98 color: #FFF;99 border-radius: 6px;100 display: flex; align-items: center; justify-content: center;101 gap: 20px;102 font-size: 42px; font-weight: 600;103 }104 .add-btn .bag-icon svg { stroke: #FFF; }105 106 /* Utility rows */107 .utility-row { display: flex; align-items: center; gap: 18px; margin: 16px 0; font-size: 34px; }108 .info-icon, .store-icon { width: 44px; height: 44px; }109 .info-icon svg, .store-icon svg { width: 100%; height: 100%; stroke: #111; fill: none; stroke-width: 3; }110 111 .divider-title {112 text-align: center;113 font-size: 46px;114 font-weight: 800;115 color: #333;116 margin: 60px 0 28px;117 }118 119 /* Ratings */120 .reviews {121 display: flex;122 align-items: center;123 gap: 18px;124 font-size: 34px;125 margin: 12px 0 36px;126 }127 .stars { font-size: 42px; letter-spacing: 4px; color: #111; }128 129 /* Sliders */130 .metric {131 margin-bottom: 48px;132 }133 .metric .label {134 font-size: 38px; font-weight: 700; margin-bottom: 20px;135 }136 .track {137 height: 10px;138 background: #DADADA;139 border-radius: 5px;140 position: relative;141 margin: 0 10px;142 }143 .thumb {144 position: absolute;145 top: 50%;146 transform: translate(-50%, -50%);147 width: 28px; height: 28px;148 background: #1F1F1F;149 border-radius: 50%;150 }151 .metric .labels {152 display: flex; justify-content: space-between;153 font-size: 32px; color: #666;154 margin-top: 16px;155 }156 157 /* Accordion rows */158 .accordion {159 border-top: 2px solid #E3E3E3;160 border-bottom: 2px solid #E3E3E3;161 background: #FAFAFA;162 margin: 12px 0;163 padding: 28px 6px;164 }165 .accordion .row {166 display: flex; align-items: center; justify-content: space-between;167 padding: 18px 24px;168 }169 .acc-title { font-size: 42px; font-weight: 700; }170 .chev { width: 40px; height: 40px; }171 .chev svg { width: 100%; height: 100%; stroke: #111; fill: none; stroke-width: 3; }172 173</style>174</head>175<body>176<div id="render-target">177 <div class="safe-area"></div>178 179 <div class="header">180 <div class="back-row">181 <div class="icon">182 <svg viewBox="0 0 24 24"><path d="M15 19L8 12l7-7"/><path d="M8 12h14"/></svg>183 </div>184 <div class="title">Jack</div>185 </div>186 <div class="header-icons">187 <div class="icon">188 <svg viewBox="0 0 24 24"><path d="M6 7h13l-2 12H8L6 7z"/><path d="M9 7V5a3 3 0 0 1 6 0v2"/></svg>189 </div>190 <div class="icon">191 <svg viewBox="0 0 24 24"><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"/></svg>192 </div>193 </div>194 </div>195 196 <div class="content">197 <div class="section-title">Sizes</div>198 199 <div class="size-grid">200 <div class="size-btn grey">4</div>201 <div class="size-btn">5</div>202 <div class="size-btn">6</div>203 <div class="size-btn">7</div>204 <div class="size-btn selected">8</div>205 <div class="size-btn">9</div>206 <div class="size-btn">10</div>207 <div class="size-btn">11</div>208 </div>209 210 <div class="inline-links">211 <div class="link">212 <div class="small-icon">213 <svg viewBox="0 0 24 24"><path d="M3 8l18-4v4L3 12V8z"/><path d="M3 16l18-4v4L3 20v-4z"/></svg>214 </div>215 <span>Size guide</span>216 </div>217 <div class="link">218 <div class="small-icon">219 <svg viewBox="0 0 24 24"><path d="M4 6h16v12H4z"/><path d="M4 6l8 6 8-6"/></svg>220 </div>221 <span>Size out of stock?</span>222 </div>223 </div>224 225 <div class="add-btn">226 <div class="bag-icon icon" style="width:44px;height:44px;">227 <svg viewBox="0 0 24 24"><path d="M6 7h13l-2 12H8L6 7z"/><path d="M9 7V5a3 3 0 0 1 6 0v2"/></svg>228 </div>229 <span>Add</span>230 </div>231 232 <div class="utility-row">233 <div class="store-icon">234 <svg viewBox="0 0 24 24"><path d="M3 10l2-5h14l2 5"/><path d="M5 10v9h14v-9"/><path d="M9 14h6"/></svg>235 </div>236 <span style="text-decoration: underline;">Find in store</span>237 </div>238 239 <div class="utility-row">240 <div class="info-icon">241 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8h.01"/><path d="M11 12h2v5"/></svg>242 </div>243 <span>Members get free online returns.</span>244 </div>245 246 <div class="divider-title">Delivery and payment</div>247 248 <div class="reviews">249 <div class="stars">★ ★ ★ ★ ☆</div>250 <div>(84 reviews)</div>251 </div>252 253 <div class="metric">254 <div class="label">True to Size</div>255 <div class="track" style="width: 1000px;">256 <div class="thumb" style="left: 50%;"></div>257 </div>258 <div class="labels" style="width: 1000px;">259 <span>Runs Small</span>260 <span>True to Size</span>261 <span>Runs Large</span>262 </div>263 </div>264 265 <div class="metric">266 <div class="label">Width</div>267 <div class="track" style="width: 1000px;">268 <div class="thumb" style="left: 44%;"></div>269 </div>270 <div class="labels" style="width: 1000px;">271 <span>Runs Narrow</span>272 <span>True to Size</span>273 <span>Runs Wide</span>274 </div>275 </div>276 277 <div class="accordion">278 <div class="row">279 <div class="acc-title">Description</div>280 <div class="chev"><svg viewBox="0 0 24 24"><path d="M6 10l6 6 6-6"/></svg></div>281 </div>282 </div>283 284 <div class="accordion">285 <div class="row">286 <div class="acc-title">Materials & Suppliers</div>287 <div class="chev"><svg viewBox="0 0 24 24"><path d="M6 10l6 6 6-6"/></svg></div>288 </div>289 </div>290 </div>291</div>292</body>293</html>