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 Detail - Sizes</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#222; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#F3F3F3;12 }13 .status-bar {14 height:120px; background:#CFCFCF; color:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 36px; font-weight:600; font-size:42px;15 }16 .status-right { display:flex; align-items:center; gap:28px; }17 .wifi { width:42px; height:42px; }18 .battery { width:54px; height:38px; }19 20 .topnav {21 height:140px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; background:#FFFFFF;22 border-bottom:1px solid #E5E5E5;23 }24 .left-group { display:flex; align-items:center; gap:24px; }25 .back-icon { width:54px; height:54px; }26 .title { font-size:48px; font-weight:700; color:#222; letter-spacing:0.2px; }27 .right-actions { display:flex; align-items:center; gap:36px; }28 .icon-btn { width:60px; height:60px; position:relative; }29 .bag-count {30 position:absolute; top:-8px; right:-8px; width:36px; height:36px; background:#fff; border:2px solid #222; border-radius:50%;31 display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:700;32 }33 34 .content { padding: 32px 36px 0 36px; }35 .section-title { font-size:44px; font-weight:700; margin:24px 0 24px; }36 .sizes-grid { display:flex; flex-wrap:wrap; gap:24px; }37 .size-chip {38 width:168px; height:108px; border:2px solid #CBCBCB; background:#E6E6E6; border-radius:8px;39 display:flex; align-items:center; justify-content:center; font-weight:700; font-size:40px; color:#444;40 }41 .size-chip.selected {42 background:#222; border-color:#222; color:#fff;43 }44 45 .links-row { display:flex; align-items:center; justify-content:space-between; margin:24px 0 28px; }46 .link { display:flex; align-items:center; gap:18px; color:#0A0A0A; text-decoration:underline; font-size:36px; }47 .link svg { width:44px; height:44px; }48 49 .loading-banner {50 height:140px; background:#202020; border-radius:6px; display:flex; align-items:center; justify-content:center; margin:12px 0 36px;51 }52 .spinner {53 width:72px; height:72px; border-radius:50%;54 border:8px solid #9E9E9E; border-top-color:#E0E0E0;55 box-sizing:border-box;56 }57 58 .store-row { display:flex; align-items:center; gap:18px; font-size:42px; font-weight:700; margin-top:10px; }59 .store-row svg { width:54px; height:54px; }60 61 .product-card {62 margin:24px 0 28px; background:#fff; border:2px solid #DDDDDD; border-radius:10px; box-shadow:0 2px 0 rgba(0,0,0,0.03);63 display:flex; gap:28px; padding:28px;64 }65 .img-ph {66 width:220px; height:240px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:30px;67 }68 .card-info { display:flex; flex-direction:column; justify-content:center; }69 .prod-name { font-size:48px; font-weight:800; margin-bottom:12px; }70 .price-row { font-size:42px; display:flex; align-items:center; gap:16px; }71 .price-new { color:#D32F2F; font-weight:800; }72 .price-old { color:#666; text-decoration:line-through; }73 74 .reviews { display:flex; align-items:center; gap:18px; font-size:40px; font-weight:700; margin:24px 0; }75 .stars { display:flex; gap:10px; }76 .stars svg { width:48px; height:48px; }77 78 .metric { margin:18px 0 28px; }79 .metric-title { font-size:44px; font-weight:800; margin:10px 0 18px; }80 .slider { height:10px; background:#DADADA; border-radius:8px; position:relative; }81 .slider .thumb {82 width:30px; height:30px; background:#222; border-radius:50%; position:absolute; top:50%; transform:translate(-50%, -50%);83 }84 .scale-labels {85 display:flex; justify-content:space-between; font-size:34px; color:#777; margin-top:16px;86 }87 88 .accordion {89 margin-top:22px; background:#fff; border-top:1px solid #E3E3E3; border-bottom:1px solid #E3E3E3;90 }91 .acc-row {92 height:120px; display:flex; align-items:center; justify-content:space-between; padding:0 36px;93 border-bottom:1px solid #EAEAEA; font-size:44px; font-weight:800;94 }95 .acc-row:last-child { border-bottom:none; }96 .chev { width:34px; height:34px; }97 98 .home-indicator {99 position:absolute; bottom:18px; left:50%; transform:translateX(-50%);100 width:320px; height:16px; background:#000; border-radius:8px;101 }102</style>103</head>104<body>105<div id="render-target">106 <div class="status-bar">107 <div>8:04</div>108 <div class="status-right">109 <svg class="wifi" viewBox="0 0 24 24">110 <path d="M2 8c5-4 15-4 20 0M6 12c3-2 9-2 12 0M10 16c2-1 4-1 6 0M12 20a2 2 0 1 0 0-0.01" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>111 </svg>112 <svg class="battery" viewBox="0 0 28 16">113 <rect x="1" y="2" width="22" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"/>114 <rect x="3" y="4" width="14" height="8" rx="1" fill="#fff"/>115 <rect x="23" y="5" width="4" height="6" rx="1" fill="#fff"/>116 </svg>117 </div>118 </div>119 120 <div class="topnav">121 <div class="left-group">122 <svg class="back-icon" viewBox="0 0 24 24">123 <path d="M15 19L6 12l9-7" fill="none" stroke="#222" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>124 </svg>125 <div class="title">light beige/floral</div>126 </div>127 <div class="right-actions">128 <div class="icon-btn">129 <svg viewBox="0 0 24 24">130 <path d="M6 7h12l-2 11H8L6 7z" fill="none" stroke="#222" stroke-width="2"/>131 <path d="M9 7V5h6v2" fill="none" stroke="#222" stroke-width="2"/>132 </svg>133 <div class="bag-count">1</div>134 </div>135 <div class="icon-btn">136 <svg viewBox="0 0 24 24">137 <path d="M12 20s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z" fill="none" stroke="#222" stroke-width="2"/>138 </svg>139 </div>140 </div>141 </div>142 143 <div class="content">144 <div class="section-title">Sizes</div>145 <div class="sizes-grid">146 <div class="size-chip">XS</div>147 <div class="size-chip">S</div>148 <div class="size-chip selected">M</div>149 <div class="size-chip">L</div>150 <div class="size-chip">XL</div>151 <div class="size-chip" style="margin-top:24px;">XXL</div>152 </div>153 154 <div class="links-row">155 <div class="link">156 <svg viewBox="0 0 24 24">157 <path d="M3 17l18-10M4 8l4 4M10 5l4 4" fill="none" stroke="#222" stroke-width="2"/>158 </svg>159 <span>Size guide</span>160 </div>161 <div class="link">162 <svg viewBox="0 0 24 24">163 <rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="#222" stroke-width="2"/>164 <path d="M3 7l9 6 9-6" fill="none" stroke="#222" stroke-width="2"/>165 </svg>166 <span>Size out of stock?</span>167 </div>168 </div>169 170 <div class="loading-banner">171 <div class="spinner"></div>172 </div>173 174 <div class="store-row">175 <svg viewBox="0 0 24 24">176 <path d="M4 7h16v13H4z" fill="none" stroke="#222" stroke-width="2"/>177 <path d="M8 7V5a4 4 0 0 1 8 0v2" fill="none" stroke="#222" stroke-width="2"/>178 </svg>179 <div>Find in store</div>180 </div>181 182 <div class="product-card">183 <div class="img-ph">[IMG: Puff-sleeved Dress]</div>184 <div class="card-info">185 <div class="prod-name">Puff-sleeved Dress</div>186 <div class="price-row">187 <div class="price-new">$14.99</div>188 <div class="price-old">$14.99</div>189 </div>190 </div>191 </div>192 193 <div class="reviews">194 <div class="stars">195 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#000"/></svg>196 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#000"/></svg>197 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#000"/></svg>198 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#000"/></svg>199 <svg viewBox="0 0 24 24">200 <defs>201 <linearGradient id="half">202 <stop offset="50%" stop-color="#000"/>203 <stop offset="50%" stop-color="transparent"/>204 </linearGradient>205 </defs>206 <path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="url(#half)" stroke="#000" stroke-width="1"/>207 </svg>208 </div>209 <div>(76 reviews)</div>210 </div>211 212 <div class="metric">213 <div class="metric-title">True to Size</div>214 <div class="slider" style="height:8px;">215 <div class="thumb" style="left:75%;"></div>216 </div>217 <div class="scale-labels">218 <span>Runs Small</span><span>True to Size</span><span>Runs Large</span>219 </div>220 </div>221 222 <div class="metric">223 <div class="metric-title">Length</div>224 <div class="slider" style="height:8px;">225 <div class="thumb" style="left:55%;"></div>226 </div>227 <div class="scale-labels">228 <span>Runs Short</span><span>True to Size</span><span>Runs Long</span>229 </div>230 </div>231 232 <div class="accordion">233 <div class="acc-row">234 <span>Description</span>235 <svg class="chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round"/></svg>236 </div>237 <div class="acc-row">238 <span>Materials & Suppliers</span>239 <svg class="chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round"/></svg>240 </div>241 <div class="acc-row">242 <span>Care guide</span>243 <svg class="chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round"/></svg>244 </div>245 </div>246 </div>247 248 <div class="home-indicator"></div>249</div>250</body>251</html>