GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Product Detail - Sizes</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Helvetica Neue", Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #F3F3F3;14 color: #222;15 }16 17 /* Status bar */18 .status-bar {19 height: 110px;20 background: #CFCFCF;21 display: flex;22 align-items: center;23 padding: 0 40px;24 justify-content: space-between;25 font-size: 40px;26 color: #fff;27 }28 29 /* Header */30 .header {31 height: 160px;32 display: flex;33 align-items: center;34 padding: 0 40px;35 position: relative;36 }37 .back {38 display: flex;39 align-items: center;40 gap: 24px;41 color: #111;42 font-size: 46px;43 font-weight: 600;44 }45 .header-icons {46 position: absolute;47 right: 40px;48 top: 0;49 bottom: 0;50 display: flex;51 align-items: center;52 gap: 40px;53 }54 .icon-btn {55 width: 72px; height: 72px;56 display: flex; align-items: center; justify-content: center;57 }58 .badge {59 position: absolute;60 top: -6px; right: -8px;61 background: #111; color: #fff;62 font-size: 30px; line-height: 30px;63 border-radius: 22px;64 padding: 6px 12px;65 }66 67 /* Section title */68 .section-title {69 font-size: 54px;70 font-weight: 700;71 margin: 10px 40px 24px;72 }73 74 /* Sizes grid */75 .sizes-grid {76 display: grid;77 grid-template-columns: repeat(5, 1fr);78 gap: 28px;79 padding: 0 40px;80 }81 .size-box {82 height: 140px;83 border: 2px solid #CFCFCF;84 background: #fff;85 border-radius: 8px;86 font-size: 46px;87 display: flex; align-items: center; justify-content: center;88 color: #111;89 }90 .size-box.selected {91 background: #1F1F1F;92 border-color: #1F1F1F;93 color: #fff;94 }95 .size-row-spacer { height: 32px; }96 97 /* Link rows */98 .link-row {99 display: flex;100 align-items: center;101 justify-content: space-between;102 padding: 26px 40px;103 font-size: 42px;104 color: #2E2E2E;105 }106 .link-row a {107 color: #2E2E2E; text-decoration: underline;108 }109 .link-left, .link-right {110 display: inline-flex; align-items: center; gap: 18px;111 }112 113 /* Big button / loader */114 .cta-loader {115 margin: 24px 40px 40px;116 height: 140px;117 background: #222;118 border-radius: 6px;119 position: relative;120 }121 .spinner {122 position: absolute;123 top: 50%; left: 50%;124 width: 90px; height: 90px;125 margin-top: -45px; margin-left: -45px;126 border-radius: 50%;127 border: 10px solid rgba(255,255,255,0.3);128 border-top-color: #D8D8D8;129 }130 131 /* Find in store */132 .find-store {133 display: flex; align-items: center; gap: 18px;134 padding: 26px 40px;135 font-size: 42px;136 color: #2E2E2E;137 }138 .find-store a { color: #2E2E2E; text-decoration: underline; }139 140 /* Product card */141 .card {142 margin: 16px 40px;143 background: #fff;144 border: 2px solid #DFDFDF;145 border-radius: 8px;146 overflow: hidden;147 }148 .card-top-note {149 display: flex; align-items: center; gap: 16px;150 color: #A0A0A0;151 background: #F7F7F7;152 font-size: 36px;153 padding: 12px 20px;154 }155 .card-body {156 display: grid;157 grid-template-columns: 220px 1fr;158 gap: 28px;159 padding: 24px;160 align-items: center;161 }162 .img-ph {163 width: 220px; height: 220px;164 background: #E0E0E0;165 border: 1px solid #BDBDBD;166 display: flex; align-items: center; justify-content: center;167 color: #757575; font-size: 34px; text-align: center;168 }169 .card-title {170 font-size: 58px; font-weight: 700; margin-bottom: 12px;171 }172 .price { font-size: 44px; font-weight: 600; color: #111; }173 174 /* Rating */175 .rating {176 display: flex; align-items: center; gap: 12px;177 padding: 18px 40px;178 font-size: 40px;179 }180 .stars { display: inline-flex; gap: 6px; }181 182 /* Sliders */183 .slider-block {184 padding: 22px 40px 10px;185 }186 .label-strong {187 font-size: 48px; font-weight: 700;188 margin-bottom: 26px;189 }190 .track {191 height: 6px; background: #D0D0D0; border-radius: 3px;192 position: relative;193 }194 .thumb {195 position: absolute; top: 50%; transform: translate(-50%, -50%);196 width: 30px; height: 30px; background: #111; border-radius: 50%;197 }198 .scale {199 display: flex; justify-content: space-between;200 font-size: 36px; color: #666;201 margin-top: 18px;202 }203 204 /* Accordion rows */205 .accordion-row {206 display: flex; justify-content: space-between; align-items: center;207 padding: 38px 40px;208 background: #fff;209 border-top: 2px solid #E6E6E6;210 border-bottom: 2px solid #E6E6E6;211 font-size: 52px; font-weight: 700;212 }213 .chev {214 width: 36px; height: 36px;215 }216 217 /* Bottom home indicator */218 .home-indicator {219 position: absolute; bottom: 30px; left: 50%;220 width: 280px; height: 14px; background: #111;221 border-radius: 8px; transform: translateX(-50%);222 opacity: 0.12;223 }224</style>225</head>226<body>227<div id="render-target">228 229 <div class="status-bar">230 <div>2:57</div>231 <div>100%</div>232 </div>233 234 <div class="header">235 <div class="back">236 <svg width="60" height="60" viewBox="0 0 24 24">237 <path d="M15 19L8 12l7-7" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>238 </svg>239 <span>Back</span>240 </div>241 <div class="header-icons">242 <div class="icon-btn" style="position:relative;">243 <svg width="60" height="60" viewBox="0 0 24 24">244 <path d="M6 9h12l-1 10H7L6 9zm2-2l2-3h4l2 3" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>245 </svg>246 <span class="badge">1</span>247 </div>248 <div class="icon-btn">249 <svg width="60" height="60" viewBox="0 0 24 24">250 <path d="M12 20s-7-4.6-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.4-7 10-7 10z" stroke="#111" stroke-width="2" fill="none"></path>251 </svg>252 </div>253 </div>254 </div>255 256 <div class="section-title">Sizes</div>257 258 <div class="sizes-grid">259 <div class="size-box" style="background:#EDEDED;">4</div>260 <div class="size-box">5</div>261 <div class="size-box">6</div>262 <div class="size-box">7</div>263 <div class="size-box selected">8</div>264 265 <div class="size-box">9</div>266 <div class="size-box">10</div>267 <div class="size-box">11</div>268 <div></div>269 <div></div>270 </div>271 272 <div class="link-row">273 <div class="link-left">274 <svg width="48" height="48" viewBox="0 0 24 24">275 <path d="M3 7h18M3 12h18M3 17h9" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"></path>276 </svg>277 <a href="#">Size guide</a>278 </div>279 <div class="link-right">280 <svg width="48" height="48" viewBox="0 0 24 24">281 <path d="M4 7l8 6 8-6v10H4z" stroke="#111" stroke-width="2" fill="none" stroke-linejoin="round"></path>282 </svg>283 <a href="#">Size out of stock?</a>284 </div>285 </div>286 287 <div class="cta-loader">288 <div class="spinner"></div>289 </div>290 291 <div class="find-store">292 <svg width="48" height="48" viewBox="0 0 24 24">293 <path d="M6 9h12l-1 10H7L6 9zm2-2l2-3h4l2 3" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>294 </svg>295 <a href="#">Find in store</a>296 </div>297 298 <div class="card">299 <div class="card-top-note">300 <svg width="36" height="36" viewBox="0 0 24 24">301 <circle cx="12" cy="12" r="10" fill="#E0E0E0"></circle>302 <path d="M12 8v8M12 6v0" stroke="#A0A0A0" stroke-width="2" stroke-linecap="round"></path>303 </svg>304 <span>Members get free online returns.</span>305 </div>306 <div class="card-body">307 <div class="img-ph">[IMG: Black Chelsea Boot]</div>308 <div>309 <div class="card-title">Chelsea Boots</div>310 <div class="price">$39.99</div>311 </div>312 </div>313 </div>314 315 <div class="rating">316 <div class="stars">317 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.2 1.2-6.9L2 8.9l6.9-1 3.1-6.2 3.1 6.2 6.9 1-5 4.7 1.2 6.9z" fill="#111"></path></svg>318 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.2 1.2-6.9L2 8.9l6.9-1 3.1-6.2 3.1 6.2 6.9 1-5 4.7 1.2 6.9z" fill="#111"></path></svg>319 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.2 1.2-6.9L2 8.9l6.9-1 3.1-6.2 3.1 6.2 6.9 1-5 4.7 1.2 6.9z" fill="#111"></path></svg>320 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.2 1.2-6.9L2 8.9l6.9-1 3.1-6.2 3.1 6.2 6.9 1-5 4.7 1.2 6.9z" fill="#111"></path></svg>321 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.2 1.2-6.9L2 8.9l6.9-1 3.1-6.2 3.1 6.2 6.9 1-5 4.7 1.2 6.9z" fill="none" stroke="#111" stroke-width="2"></path></svg>322 </div>323 <div>(84 reviews)</div>324 </div>325 326 <div class="slider-block">327 <div class="label-strong">True to Size</div>328 <div class="track">329 <div class="thumb" style="left: 50%;"></div>330 </div>331 <div class="scale">332 <span>Runs Small</span>333 <span>True to Size</span>334 <span>Runs Large</span>335 </div>336 </div>337 338 <div class="slider-block">339 <div class="label-strong">Width</div>340 <div class="track">341 <div class="thumb" style="left: 44%;"></div>342 </div>343 <div class="scale">344 <span>Runs Narrow</span>345 <span>True to Size</span>346 <span>Runs Wide</span>347 </div>348 </div>349 350 <div class="accordion-row">351 <span>Description</span>352 <svg class="chev" viewBox="0 0 24 24"><path d="M8 10l4 4 4-4" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>353 </div>354 355 <div class="accordion-row" style="margin-top: 8px;">356 <span>Materials & Suppliers</span>357 <svg class="chev" viewBox="0 0 24 24"><path d="M8 10l4 4 4-4" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>358 </div>359 360 <div class="home-indicator"></div>361</div>362</body>363</html>