GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Product Size Selection</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #F5F5F5;12 }13 .status-bar {14 height: 120px; background: #CFCFCF; color: #000;15 padding: 20px 30px; box-sizing: border-box;16 font-size: 36px; display: flex; align-items: center; justify-content: space-between;17 }18 .header {19 background: #FFFFFF;20 padding: 40px 48px 30px 48px;21 box-sizing: border-box;22 border-bottom: 1px solid #E0E0E0;23 position: relative;24 }25 .title {26 font-size: 54px; font-weight: 700; color: #111; margin-left: 70px;27 }28 .icon-btn { width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center; }29 .sizes-section { padding: 20px 48px 0 48px; background: #FFFFFF; }30 .section-label { font-size: 44px; font-weight: 700; color: #111; margin-bottom: 10px; }31 .error { color: #D32F2F; font-size: 40px; margin: 8px 0 20px 0; }32 .size-grid { display: flex; flex-wrap: wrap; gap: 24px; }33 .size-btn {34 width: 180px; height: 120px;35 border: 2px solid #CFCFCF; background: #EDEDED;36 border-radius: 8px; display: flex; align-items: center; justify-content: center;37 font-size: 40px; color: #555;38 }39 .size-btn.selected { background: #FFFFFF; border-color: #BDBDBD; color: #111; }40 .tools-row {41 display: flex; justify-content: space-between; align-items: center;42 padding: 28px 48px; background: #FFFFFF; box-sizing: border-box;43 }44 .tool-link { display: inline-flex; align-items: center; gap: 16px; color: #111; text-decoration: underline; font-size: 36px; }45 .add-row { background: #FFFFFF; padding: 0 48px 40px 48px; box-sizing: border-box; }46 .add-btn {47 width: 100%; height: 140px; background: #1F1F1F; color: #FFF; border-radius: 4px;48 display: flex; align-items: center; justify-content: center; gap: 18px; font-size: 44px; font-weight: 700;49 }50 .sub-links { background: #FFFFFF; padding: 30px 48px; box-sizing: border-box; border-top: 1px solid #EAEAEA; }51 .link-row { display: flex; align-items: center; gap: 18px; color: #111; font-size: 36px; text-decoration: underline; margin-bottom: 26px; }52 .info-row { display: flex; align-items: center; gap: 18px; color: #333; font-size: 36px; }53 .section-title-center { text-align: center; font-size: 48px; font-weight: 700; color: #333; padding: 50px 0 30px 0; }54 .reviews { padding: 0 48px; background: #FFFFFF; }55 .stars { display: inline-flex; align-items: center; gap: 10px; }56 .reviews-text { font-size: 36px; color: #111; font-weight: 700; margin-left: 16px; }57 .metric { padding: 30px 48px; background: #FFFFFF; }58 .metric-label { font-size: 40px; font-weight: 700; color: #111; margin-bottom: 20px; }59 .slider {60 height: 10px; background: #DFDFDF; border-radius: 5px; position: relative;61 }62 .knob {63 width: 28px; height: 28px; background: #111; border-radius: 50%;64 position: absolute; top: -9px;65 }66 .scale-labels {67 display: flex; justify-content: space-between; color: #777; font-size: 32px; margin-top: 16px;68 }69 .accordion { background: #FFFFFF; margin-top: 20px; border-top: 1px solid #E0E0E0; }70 .accordion-item {71 padding: 40px 48px; display: flex; align-items: center; justify-content: space-between;72 border-bottom: 1px solid #EAEAEA; font-size: 44px; font-weight: 700; color: #222;73 }74 /* Icon strokes */75 svg { display: block; }76 .stroke { stroke: #111; stroke-width: 2.5; fill: none; }77 .stroke2 { stroke: #111; stroke-width: 3.5; fill: none; }78 .fill { fill: #111; }79 .muted { stroke: #777; }80 .top-actions { position: absolute; right: 48px; top: 40px; display: flex; gap: 28px; }81 .back-wrap { position: absolute; left: 48px; top: 56px; }82</style>83</head>84<body>85<div id="render-target">86 87 <div class="status-bar">88 <div>8:02</div>89 <div style="display:flex; align-items:center; gap:20px;">90 <svg width="40" height="28" viewBox="0 0 40 28"><path class="stroke" d="M3 24h34M8 16h24M13 8h14"/></svg>91 <svg width="26" height="26" viewBox="0 0 26 26"><rect x="3" y="6" width="18" height="14" rx="2" class="stroke"/><path class="fill" d="M23 10v6"/></svg>92 </div>93 </div>94 95 <div class="header">96 <div class="back-wrap">97 <svg width="60" height="60" viewBox="0 0 60 60">98 <path class="stroke2" d="M38 12 L18 30 L38 48"/>99 </svg>100 </div>101 <div class="top-actions">102 <svg width="56" height="56" viewBox="0 0 56 56">103 <path class="stroke" d="M14 22h28v20H14z"/>104 <path class="stroke" d="M18 22c0-6 4-10 10-10s10 4 10 10"/>105 </svg>106 <svg width="56" height="56" viewBox="0 0 56 56">107 <path class="stroke2" d="M14 22c6-8 22-8 28 0"/>108 <path class="stroke2" d="M14 22c-4 5-4 13 0 18s10 5 14 0 4-13 0-18"/>109 </svg>110 </div>111 <div class="title">light beige/floral</div>112 </div>113 114 <div class="sizes-section">115 <div class="section-label">Sizes</div>116 <div class="error">Please select a size</div>117 <div class="size-grid">118 <div class="size-btn">XS</div>119 <div class="size-btn">S</div>120 <div class="size-btn selected">M</div>121 <div class="size-btn">L</div>122 <div class="size-btn">XL</div>123 <div class="size-btn">XXL</div>124 </div>125 </div>126 127 <div class="tools-row">128 <div class="tool-link">129 <svg width="44" height="44" viewBox="0 0 44 44">130 <path class="stroke" d="M6 34l8-8M12 28l6 6M20 20l6 6M28 12l6 6"/>131 <rect x="4" y="6" width="36" height="32" rx="4" class="stroke"/>132 </svg>133 <span>Size guide</span>134 </div>135 <div class="tool-link">136 <svg width="44" height="44" viewBox="0 0 44 44">137 <rect x="6" y="10" width="32" height="24" rx="3" class="stroke"/>138 <path class="stroke" d="M6 12l16 12L38 12"/>139 </svg>140 <span>Size out of stock?</span>141 </div>142 </div>143 144 <div class="add-row">145 <div class="add-btn">146 <svg width="48" height="48" viewBox="0 0 48 48">147 <path class="stroke" stroke="#FFF" d="M12 18h24v20H12z"/>148 <path class="stroke" stroke="#FFF" d="M16 18c0-6 4-10 8-10s8 4 8 10"/>149 </svg>150 <span>Add</span>151 </div>152 </div>153 154 <div class="sub-links">155 <div class="link-row">156 <svg width="44" height="44" viewBox="0 0 44 44">157 <rect x="8" y="16" width="28" height="20" class="stroke"/>158 <path class="stroke" d="M12 16V10h20v6"/>159 <path class="stroke" d="M16 24h12M16 30h12"/>160 </svg>161 <span>Find in store</span>162 </div>163 <div class="info-row">164 <svg width="40" height="40" viewBox="0 0 40 40">165 <circle cx="20" cy="20" r="16" class="stroke"/>166 <rect x="19" y="14" width="2" height="14" class="fill"/>167 <rect x="19" y="10" width="2" height="2" class="fill"/>168 </svg>169 <span>Members get free online returns.</span>170 </div>171 </div>172 173 <div class="section-title-center">Delivery and payment</div>174 175 <div class="reviews">176 <div class="stars">177 <svg width="44" height="44" viewBox="0 0 44 44">178 <polygon points="22,6 27,18 40,18 30,26 34,38 22,30 10,38 14,26 4,18 17,18" class="fill"/>179 </svg>180 <svg width="44" height="44" viewBox="0 0 44 44">181 <polygon points="22,6 27,18 40,18 30,26 34,38 22,30 10,38 14,26 4,18 17,18" class="fill"/>182 </svg>183 <svg width="44" height="44" viewBox="0 0 44 44">184 <polygon points="22,6 27,18 40,18 30,26 34,38 22,30 10,38 14,26 4,18 17,18" class="fill"/>185 </svg>186 <svg width="44" height="44" viewBox="0 0 44 44">187 <polygon points="22,6 27,18 40,18 30,26 34,38 22,30 10,38 14,26 4,18 17,18" class="fill"/>188 </svg>189 <svg width="44" height="44" viewBox="0 0 44 44">190 <clipPath id="half">191 <rect x="0" y="0" width="22" height="44"/>192 </clipPath>193 <polygon points="22,6 27,18 40,18 30,26 34,38 22,30 10,38 14,26 4,18 17,18" fill="#111" clip-path="url(#half)"/>194 <polygon points="22,6 27,18 40,18 30,26 34,38 22,30 10,38 14,26 4,18 17,18" class="stroke"/>195 </svg>196 </div>197 <span class="reviews-text">(76 reviews)</span>198 </div>199 200 <div class="metric">201 <div class="metric-label">True to Size</div>202 <div class="slider">203 <div class="knob" style="left: 68%;"></div>204 </div>205 <div class="scale-labels">206 <span>Runs Small</span>207 <span>True to Size</span>208 <span>Runs Large</span>209 </div>210 </div>211 212 <div class="metric">213 <div class="metric-label">Length</div>214 <div class="slider">215 <div class="knob" style="left: 55%;"></div>216 </div>217 <div class="scale-labels">218 <span>Runs Short</span>219 <span>True to Size</span>220 <span>Runs Long</span>221 </div>222 </div>223 224 <div class="accordion">225 <div class="accordion-item">226 <span>Description</span>227 <svg width="46" height="46" viewBox="0 0 46 46">228 <path class="stroke2" d="M12 18l11 11 11-11"/>229 </svg>230 </div>231 <div class="accordion-item">232 <span>Materials & Suppliers</span>233 <svg width="46" height="46" viewBox="0 0 46 46">234 <path class="stroke2" d="M12 18l11 11 11-11"/>235 </svg>236 </div>237 </div>238 239</div>240</body>241</html>