GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Product Detail - Sizes</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #F4F4F4;15 color: #222;16 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;17 }18 19 /* Top bars */20 .status-bar {21 height: 120px;22 background: #CFCFCF;23 }24 .header {25 background: #FFFFFF;26 height: 220px;27 position: relative;28 box-shadow: 0 1px 0 rgba(0,0,0,0.06);29 }30 .header-inner {31 position: absolute;32 left: 32px;33 right: 32px;34 top: 60px;35 display: flex;36 align-items: center;37 justify-content: space-between;38 }39 .back {40 display: flex;41 align-items: center;42 gap: 16px;43 }44 .back-text {45 font-size: 36px;46 font-weight: 600;47 letter-spacing: 0.2px;48 }49 .header-icons {50 display: flex;51 align-items: center;52 gap: 36px;53 }54 .icon-btn {55 width: 72px;56 height: 72px;57 display: flex;58 justify-content: center;59 align-items: center;60 }61 .badge {62 position: absolute;63 top: -6px;64 right: -6px;65 background: #111;66 color: #fff;67 font-size: 28px;68 width: 44px;69 height: 44px;70 border-radius: 22px;71 display: flex;72 justify-content: center;73 align-items: center;74 }75 76 /* Content */77 .content {78 padding: 24px 32px 40px 32px;79 }80 .section-title {81 font-size: 40px;82 font-weight: 700;83 margin: 12px 0 24px 0;84 }85 86 /* Sizes grid */87 .sizes-grid {88 display: flex;89 flex-wrap: wrap;90 gap: 24px;91 margin-bottom: 36px;92 }93 .size-box {94 width: 160px;95 height: 120px;96 border: 2px solid #D6D6D6;97 background: #FFFFFF;98 display: flex;99 justify-content: center;100 align-items: center;101 font-size: 42px;102 font-weight: 600;103 border-radius: 8px;104 color: #222;105 }106 .size-box.disabled {107 background: #E9E9E9;108 color: #6F6F6F;109 border-color: #E0E0E0;110 }111 .size-box.selected {112 background: #1F1F1F;113 color: #FFFFFF;114 border-color: #1F1F1F;115 }116 117 /* Links row */118 .links-row {119 display: flex;120 align-items: center;121 justify-content: space-between;122 margin: 18px 0 32px 0;123 }124 .link-with-icon {125 display: inline-flex;126 align-items: center;127 gap: 16px;128 color: #222;129 text-decoration: underline;130 font-size: 34px;131 padding: 8px 0;132 }133 134 /* Add button */135 .add-btn {136 margin: 16px 0 32px 0;137 height: 120px;138 background: #1F1F1F;139 color: #fff;140 border-radius: 6px;141 display: flex;142 justify-content: center;143 align-items: center;144 gap: 18px;145 font-size: 40px;146 font-weight: 600;147 }148 149 /* Post-button links */150 .after-links {151 display: flex;152 flex-direction: column;153 gap: 26px;154 margin-bottom: 50px;155 }156 .inline-link {157 display: inline-flex;158 align-items: center;159 gap: 18px;160 font-size: 34px;161 text-decoration: underline;162 color: #222;163 }164 .info-row {165 display: inline-flex;166 align-items: center;167 gap: 18px;168 font-size: 34px;169 color: #222;170 }171 172 /* Delivery and payment header */173 .dp-title {174 text-align: center;175 font-size: 44px;176 font-weight: 800;177 margin: 40px 0 34px 0;178 }179 180 /* Rating */181 .rating-row {182 display: flex;183 align-items: center;184 gap: 18px;185 margin: 16px 0 10px 0;186 }187 .reviews-text {188 font-size: 34px;189 font-weight: 600;190 color: #222;191 }192 193 /* Sliders */194 .metric {195 margin: 22px 0 32px 0;196 }197 .metric-label {198 font-size: 36px;199 font-weight: 700;200 margin-bottom: 16px;201 }202 .slider {203 position: relative;204 height: 24px;205 margin: 10px 0 18px 0;206 }207 .track {208 position: absolute;209 left: 0;210 right: 0;211 top: 50%;212 height: 8px;213 background: #DADADA;214 border-radius: 4px;215 transform: translateY(-50%);216 }217 .thumb {218 position: absolute;219 top: 50%;220 width: 28px;221 height: 28px;222 background: #1F1F1F;223 border-radius: 14px;224 transform: translate(-50%, -50%);225 }226 .slider-labels {227 display: flex;228 justify-content: space-between;229 color: #777;230 font-size: 30px;231 margin-top: 8px;232 }233 234 /* Accordion sections */235 .accordion {236 margin-top: 24px;237 background: #FFFFFF;238 border-top: 1px solid #E5E5E5;239 border-bottom: 1px solid #E5E5E5;240 }241 .acc-item {242 padding: 38px 32px;243 display: flex;244 align-items: center;245 justify-content: space-between;246 border-top: 1px solid #EFEFEF;247 }248 .acc-title {249 font-size: 40px;250 font-weight: 700;251 color: #222;252 }253 254 /* Simple SVG styles */255 svg { display: block; }256</style>257</head>258<body>259<div id="render-target">260 <div class="status-bar"></div>261 262 <div class="header">263 <div class="header-inner">264 <div class="back">265 <svg width="56" height="56" viewBox="0 0 24 24">266 <path d="M15 4 L7 12 L15 20" stroke="#111" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>267 </svg>268 <div class="back-text">back</div>269 </div>270 <div class="header-icons">271 <div class="icon-btn" style="position: relative;">272 <svg width="56" height="56" viewBox="0 0 24 24">273 <rect x="5" y="7" width="14" height="13" rx="2" ry="2" stroke="#111" stroke-width="2" fill="none"/>274 <path d="M9 7 C9 5.8 9.9 5 11 5 H13 C14.1 5 15 5.8 15 7" stroke="#111" stroke-width="2" fill="none"/>275 </svg>276 <div class="badge">1</div>277 </div>278 <div class="icon-btn">279 <svg width="56" height="56" viewBox="0 0 24 24">280 <path d="M12 20 L5.5 13.5 C3 11 3.5 7 6.7 6.4 C8.4 6.1 10 7.1 11 8.3 C12 7.1 13.6 6.1 15.3 6.4 C18.5 7 19 11 16.5 13.5 L12 20 Z" stroke="#111" stroke-width="2" fill="none" stroke-linejoin="round"/>281 </svg>282 </div>283 </div>284 </div>285 </div>286 287 <div class="content">288 <div class="section-title">Sizes</div>289 290 <div class="sizes-grid">291 <div class="size-box disabled">4</div>292 <div class="size-box">5</div>293 <div class="size-box">6</div>294 <div class="size-box">7</div>295 <div class="size-box selected">8</div>296 297 <div class="size-box">9</div>298 <div class="size-box">10</div>299 <div class="size-box">11</div>300 </div>301 302 <div class="links-row">303 <a href="#" class="link-with-icon">304 <svg width="44" height="44" viewBox="0 0 24 24">305 <rect x="3" y="5" width="18" height="14" rx="2" ry="2" stroke="#111" stroke-width="2" fill="none"/>306 <path d="M6 9 L6 11 M10 9 L10 11 M14 9 L14 11 M18 9 L18 11" stroke="#111" stroke-width="2" stroke-linecap="round"/>307 </svg>308 <span>Size guide</span>309 </a>310 <a href="#" class="link-with-icon">311 <svg width="48" height="48" viewBox="0 0 24 24">312 <rect x="3" y="5" width="18" height="14" rx="2" ry="2" stroke="#111" stroke-width="2" fill="none"/>313 <path d="M3 5 L12 12 L21 5" stroke="#111" stroke-width="2" fill="none"/>314 </svg>315 <span>Size out of stock?</span>316 </a>317 </div>318 319 <div class="add-btn">320 <svg width="44" height="44" viewBox="0 0 24 24">321 <rect x="5" y="7" width="14" height="13" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"/>322 <path d="M9 7 C9 5.8 9.9 5 11 5 H13 C14.1 5 15 5.8 15 7" stroke="#fff" stroke-width="2" fill="none"/>323 </svg>324 <span>Add</span>325 </div>326 327 <div class="after-links">328 <a href="#" class="inline-link">329 <svg width="44" height="44" viewBox="0 0 24 24">330 <rect x="4" y="8" width="16" height="12" rx="2" ry="2" stroke="#111" stroke-width="2" fill="none"/>331 <path d="M4 8 L6 4 H18 L20 8" stroke="#111" stroke-width="2" fill="none"/>332 </svg>333 <span>Find in store</span>334 </a>335 336 <div class="info-row">337 <svg width="44" height="44" viewBox="0 0 24 24">338 <circle cx="12" cy="12" r="9" stroke="#111" stroke-width="2" fill="none"/>339 <circle cx="12" cy="8" r="1.6" fill="#111"/>340 <path d="M12 11 L12 17" stroke="#111" stroke-width="2" stroke-linecap="round"/>341 </svg>342 <span>Members get free online returns.</span>343 </div>344 </div>345 346 <div class="dp-title">Delivery and payment</div>347 348 <div class="rating-row">349 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 3 L15 10 L22 10 L16.5 14.5 L18.5 21 L12 17.5 L5.5 21 L7.5 14.5 L2 10 L9 10 Z" fill="#111"/></svg>350 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 3 L15 10 L22 10 L16.5 14.5 L18.5 21 L12 17.5 L5.5 21 L7.5 14.5 L2 10 L9 10 Z" fill="#111"/></svg>351 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 3 L15 10 L22 10 L16.5 14.5 L18.5 21 L12 17.5 L5.5 21 L7.5 14.5 L2 10 L9 10 Z" fill="#111"/></svg>352 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 3 L15 10 L22 10 L16.5 14.5 L18.5 21 L12 17.5 L5.5 21 L7.5 14.5 L2 10 L9 10 Z" fill="#111"/></svg>353 <!-- half star -->354 <svg width="40" height="40" viewBox="0 0 24 24">355 <defs><clipPath id="half"><rect x="0" y="0" width="12" height="24"/></clipPath></defs>356 <path d="M12 3 L15 10 L22 10 L16.5 14.5 L18.5 21 L12 17.5 L5.5 21 L7.5 14.5 L2 10 L9 10 Z" fill="#111" clip-path="url(#half)"/>357 <path d="M12 3 L15 10 L22 10 L16.5 14.5 L18.5 21 L12 17.5 L5.5 21 L7.5 14.5 L2 10 L9 10 Z" fill="none" stroke="#111" stroke-width="2"/>358 </svg>359 <div class="reviews-text">(84 reviews)</div>360 </div>361 362 <div class="metric">363 <div class="metric-label">True to Size</div>364 <div class="slider">365 <div class="track"></div>366 <div class="thumb" style="left: 50%;"></div>367 </div>368 <div class="slider-labels">369 <div>Runs Small</div>370 <div>True to Size</div>371 <div>Runs Large</div>372 </div>373 </div>374 375 <div class="metric">376 <div class="metric-label">Width</div>377 <div class="slider">378 <div class="track"></div>379 <div class="thumb" style="left: 38%;"></div>380 </div>381 <div class="slider-labels">382 <div>Runs Narrow</div>383 <div>True to Size</div>384 <div>Runs Wide</div>385 </div>386 </div>387 388 <div class="accordion">389 <div class="acc-item">390 <div class="acc-title">Description</div>391 <svg width="40" height="40" viewBox="0 0 24 24">392 <path d="M9 8 L15 12 L9 16" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>393 </svg>394 </div>395 <div class="acc-item">396 <div class="acc-title">Materials & Suppliers</div>397 <svg width="40" height="40" viewBox="0 0 24 24">398 <path d="M9 8 L15 12 L9 16" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>399 </svg>400 </div>401 </div>402 </div>403</div>404</body>405</html>