GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Product - Sizes</title>7<style>8 body { margin:0; padding:0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:#222; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #FFFFFF;15 }16 .status-bar {17 height: 128px;18 background:#CFCFCF;19 padding: 0 36px;20 display:flex;21 align-items:center;22 justify-content: space-between;23 color:#fff;24 font-weight: 700;25 font-size: 42px;26 letter-spacing: 1px;27 }28 .top-area {29 padding: 38px 40px 0 40px;30 }31 .row {32 display:flex; align-items:center;33 }34 .between { justify-content: space-between; }35 .title {36 font-size: 54px;37 font-weight: 700;38 color:#222;39 margin-left: 18px;40 }41 .icon-btn {42 width: 84px; height: 84px; display:flex; align-items:center; justify-content:center;43 }44 .sizes-wrap {45 padding: 24px 40px 0 40px;46 }47 .section-label {48 font-size: 46px;49 font-weight: 700;50 margin: 22px 0;51 }52 .sizes-grid {53 display:flex; flex-wrap: wrap; gap: 28px;54 }55 .size-box {56 width: 180px; height: 128px; border:2px solid #D6D6D6; background:#EDEDED;57 color:#6B6B6B; display:flex; align-items:center; justify-content:center; font-size: 44px; border-radius: 6px;58 }59 .size-box.selected {60 background:#222; color:#fff; border-color:#222;61 }62 .helpers {63 margin-top: 40px;64 display:flex; justify-content: space-between; align-items:center;65 gap: 20px;66 }67 .helper-link {68 display:flex; align-items:center; gap: 18px; color:#1b1b1b; text-decoration: underline; font-size: 40px;69 }70 .add-btn {71 margin: 42px 0 0 0;72 background:#222; color:#fff; border-radius: 6px; height: 144px; display:flex; align-items:center; justify-content:center; font-size: 50px; font-weight:600;73 }74 .secondary-actions {75 padding: 40px 40px 0 40px;76 }77 .link-row {78 display:flex; align-items:center; gap:22px; color:#1b1b1b; text-decoration: underline; font-size: 42px; margin-top: 36px;79 }80 .info-row {81 display:flex; align-items:center; gap:22px; font-size: 40px; color:#3b3b3b; margin-top: 32px;82 }83 .divider-space { height: 30px; }84 .headline-center {85 text-align:center; font-size: 56px; font-weight:800; color:#3b3b3b; margin: 70px 0 30px 0;86 }87 .ratings {88 padding: 0 40px;89 }90 .stars {91 display:flex; align-items:center; gap:12px; font-size: 40px; color:#222; margin-bottom: 32px;92 }93 .metric {94 font-size: 44px; font-weight:700; margin: 20px 0 18px 0;95 }96 .slider {97 height: 24px; background:#DDDDDD; border-radius: 12px; position: relative;98 }99 .thumb {100 position:absolute; top:50%; transform: translate(-50%,-50%); width: 38px; height: 38px; background:#222; border-radius:50%;101 }102 .scale {103 display:flex; justify-content: space-between; color:#7a7a7a; font-size: 36px; margin-top: 18px;104 }105 .accordion {106 margin-top: 46px;107 }108 .acc-item {109 border-top:1px solid #E6E6E6;110 background:#F7F7F7;111 padding: 40px;112 display:flex; align-items:center; justify-content: space-between;113 }114 .acc-item:last-child { border-bottom:1px solid #E6E6E6; }115 .acc-title { font-size:48px; font-weight:700; color:#222; }116 .home-indicator {117 position:absolute; left:50%; transform: translateX(-50%);118 bottom: 18px; width: 320px; height: 12px; background:#000; border-radius: 8px; opacity:.85;119 }120 /* small svg helpers */121 svg { display:block; }122</style>123</head>124<body>125<div id="render-target">126 127 <!-- Fake system status bar -->128 <div class="status-bar">129 <div>8:04</div>130 <div class="row" style="gap:28px;">131 <!-- wifi -->132 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#fff" d="M12 18a2 2 0 1 0 .001 4.001A2 2 0 0 0 12 18zm-7-7 1.4 1.4A9 9 0 0 1 17.6 12L19 10.6C15.4 7 8.6 7 5 10.6zM3 8l1.4 1.4C7.8 5 16.2 5 19.6 9.4L21 8C16.9 3.9 7.1 3.9 3 8z"/></svg>133 <!-- battery -->134 <svg width="48" height="48" viewBox="0 0 24 24"><path fill="#fff" d="M16 7h2a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2v1h-1V6h1v1zm-9-1h7v12H7a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z"/></svg>135 </div>136 </div>137 138 <!-- Top area with back and title + bag -->139 <div class="top-area">140 <div class="row between">141 <div class="row">142 <!-- back arrow -->143 <div class="icon-btn">144 <svg width="60" height="60" viewBox="0 0 24 24"><path fill="#222" d="M14.5 4 6 12l8.5 8 1.5-1.5L9 12l7-6.5z"/></svg>145 </div>146 <div class="title">light beige/floral</div>147 </div>148 <!-- bag icon -->149 <div class="icon-btn">150 <svg width="56" height="56" viewBox="0 0 24 24"><path fill="none" stroke="#111" stroke-width="1.8" d="M7 7h10l1.2 12H5.8L7 7z"/><path fill="none" stroke="#111" stroke-width="1.8" d="M9 7a3 3 0 0 1 6 0"/></svg>151 </div>152 </div>153 </div>154 155 <!-- Sizes section -->156 <div class="sizes-wrap">157 <div class="row between" style="align-items:flex-start;">158 <div class="section-label">Sizes</div>159 <!-- heart outline -->160 <div class="icon-btn" style="margin-top:-6px;">161 <svg width="64" height="64" viewBox="0 0 24 24"><path fill="none" stroke="#111" stroke-width="1.8" d="M12 21s-7-4.6-9.5-7.8A5.3 5.3 0 0 1 12 5a5.3 5.3 0 0 1 9.5 8.2C19 16.4 12 21 12 21z"/></svg>162 </div>163 </div>164 165 <div class="sizes-grid">166 <div class="size-box">XS</div>167 <div class="size-box">S</div>168 <div class="size-box selected">M</div>169 <div class="size-box">L</div>170 <div class="size-box">XL</div>171 <div class="size-box" style="width: 180px;">XXL</div>172 </div>173 174 <div class="helpers">175 <a class="helper-link" href="#">176 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#222" d="M3 19h18v2H3v-2zm2-2.5 12-9 .9 1.2-12 9L5 16.5zM4 6h8v2H4V6z"/></svg>177 <span>Size guide</span>178 </a>179 <a class="helper-link" href="#" style="margin-left:auto;">180 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#222" d="M20 6H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2zm0 2v.5l-8 5-8-5V8h16z"/></svg>181 <span>Size out of stock?</span>182 </a>183 </div>184 185 <div class="add-btn">186 <div class="row" style="gap:18px;">187 <svg width="48" height="48" viewBox="0 0 24 24"><path fill="none" stroke="#fff" stroke-width="2" d="M7 7h10l1.2 12H5.8L7 7z"/><path fill="none" stroke="#fff" stroke-width="2" d="M9 7a3 3 0 0 1 6 0"/></svg>188 <span>Add</span>189 </div>190 </div>191 </div>192 193 <div class="secondary-actions">194 <a class="link-row" href="#">195 <svg width="48" height="48" viewBox="0 0 24 24"><path fill="none" stroke="#111" stroke-width="1.8" d="M3 9h18v10H3z"/><path fill="none" stroke="#111" stroke-width="1.8" d="M7 9V7a5 5 0 0 1 10 0v2"/></svg>196 <span>Find in store</span>197 </a>198 199 <div class="info-row">200 <svg width="46" height="46" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#777" stroke-width="2"/><rect x="11" y="10" width="2" height="7" fill="#777"/><rect x="11" y="6.5" width="2" height="2" fill="#777"/></svg>201 <span>Members get free online returns.</span>202 </div>203 </div>204 205 <div class="divider-space"></div>206 207 <div class="headline-center">Delivery and payment</div>208 209 <div class="ratings">210 <div class="stars">211 <!-- 4 full stars + half -->212 <div class="row" style="gap:8px;">213 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#111" d="m12 17.3-5.5 3 1-6L3 9.8l6.2-.9L12 3l2.8 5.9 6.2.9-4.5 4.5 1 6z"/></svg>214 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#111" d="m12 17.3-5.5 3 1-6L3 9.8l6.2-.9L12 3l2.8 5.9 6.2.9-4.5 4.5 1 6z"/></svg>215 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#111" d="m12 17.3-5.5 3 1-6L3 9.8l6.2-.9L12 3l2.8 5.9 6.2.9-4.5 4.5 1 6z"/></svg>216 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#111" d="m12 17.3-5.5 3 1-6L3 9.8l6.2-.9L12 3l2.8 5.9 6.2.9-4.5 4.5 1 6z"/></svg>217 <!-- half star -->218 <svg width="44" height="44" viewBox="0 0 24 24">219 <defs><clipPath id="half"><rect x="0" y="0" width="12" height="24"/></clipPath></defs>220 <path fill="none" stroke="#111" stroke-width="1.2" d="m12 17.3-5.5 3 1-6L3 9.8l6.2-.9L12 3l2.8 5.9 6.2.9-4.5 4.5 1 6z"/>221 <path clip-path="url(#half)" fill="#111" d="m12 17.3-5.5 3 1-6L3 9.8l6.2-.9L12 3l2.8 5.9 6.2.9-4.5 4.5 1 6z"/>222 </svg>223 </div>224 <div style="color:#333; font-size:40px;">(76 reviews)</div>225 </div>226 227 <div class="metric">True to Size</div>228 <div class="slider">229 <div class="thumb" style="left:72%;"></div>230 </div>231 <div class="scale">232 <span>Runs Small</span>233 <span>True to Size</span>234 <span>Runs Large</span>235 </div>236 237 <div class="metric" style="margin-top:48px;">Length</div>238 <div class="slider">239 <div class="thumb" style="left:54%;"></div>240 </div>241 <div class="scale">242 <span>Runs Short</span>243 <span>True to Size</span>244 <span>Runs Long</span>245 </div>246 </div>247 248 <div class="accordion">249 <div class="acc-item">250 <div class="acc-title">Description</div>251 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#222" d="M7 10l5 5 5-5z"/></svg>252 </div>253 <div class="acc-item">254 <div class="acc-title">Materials & Suppliers</div>255 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#222" d="M7 10l5 5 5-5z"/></svg>256 </div>257 <div class="acc-item">258 <div class="acc-title">Care guide</div>259 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#222" d="M7 10l5 5 5-5z"/></svg>260 </div>261 </div>262 263 <div class="home-indicator"></div>264</div>265</body>266</html>