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 Size Selector</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 color: #222;16 }17 18 /* Top status bar */19 .status-bar {20 height: 140px;21 background: #cfcfcf;22 display: flex;23 align-items: center;24 padding: 0 40px;25 font-size: 36px;26 color: #fff;27 letter-spacing: 0.5px;28 }29 .status-left { color: #fff; }30 .status-right { margin-left: auto; display: flex; align-items: center; gap: 20px; color: #fff; }31 32 /* Page header */33 .page-header {34 height: 140px;35 display: flex;36 align-items: center;37 padding: 0 40px;38 position: relative;39 }40 .back-wrap { display: flex; align-items: center; gap: 16px; }41 .back-text { font-size: 46px; font-weight: 600; color: #111; }42 .header-icons { margin-left: auto; display: flex; flex-direction: column; gap: 50px; padding-right: 40px; }43 .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }44 45 /* Content */46 .content {47 padding: 10px 40px 0 40px;48 }49 .section-title {50 font-size: 48px;51 font-weight: 700;52 margin: 20px 0 10px;53 }54 .error-text {55 color: #d32f2f;56 font-size: 40px;57 margin-bottom: 30px;58 }59 60 /* Size grid */61 .size-grid {62 display: flex;63 flex-wrap: wrap;64 gap: 26px;65 margin-bottom: 40px;66 }67 .size-item {68 width: 170px;69 height: 120px;70 border: 2px solid #d8d8d8;71 border-radius: 8px;72 display: flex;73 align-items: center;74 justify-content: center;75 font-size: 44px;76 color: #333;77 background: #fff;78 }79 .size-item.selected { background: #e7e7e7; color: #111; }80 81 /* Helper links */82 .helpers {83 display: flex;84 align-items: center;85 justify-content: space-between;86 margin: 14px 0 40px;87 }88 .helper-link {89 display: inline-flex;90 align-items: center;91 gap: 14px;92 color: #222;93 text-decoration: underline;94 font-size: 36px;95 }96 97 /* Add button */98 .add-btn {99 background: #1f1f1f;100 color: #fff;101 height: 140px;102 border-radius: 4px;103 display: flex;104 align-items: center;105 justify-content: center;106 gap: 20px;107 font-size: 48px;108 font-weight: 700;109 margin: 20px 0 40px;110 }111 112 /* Find in store + info */113 .store-link {114 display: inline-flex;115 align-items: center;116 gap: 16px;117 color: #222;118 text-decoration: underline;119 font-size: 38px;120 margin-bottom: 30px;121 }122 .info-line {123 display: flex;124 align-items: center;125 gap: 16px;126 font-size: 36px;127 color: #444;128 margin-bottom: 50px;129 }130 131 /* Delivery & payment heading */132 .center-heading {133 text-align: center;134 font-size: 52px;135 font-weight: 700;136 margin: 40px 0 30px;137 }138 139 /* Reviews */140 .reviews {141 display: flex;142 align-items: center;143 gap: 18px;144 margin-bottom: 30px;145 font-size: 36px;146 }147 .stars { display: inline-flex; align-items: center; gap: 8px; }148 149 /* Sliders */150 .metric {151 margin: 18px 0 40px;152 }153 .metric label {154 display: block;155 font-size: 42px;156 font-weight: 700;157 margin-bottom: 22px;158 }159 .slider {160 height: 10px;161 background: #dcdcdc;162 border-radius: 6px;163 position: relative;164 margin: 0 10px 14px;165 }166 .slider .dot {167 width: 32px;168 height: 32px;169 background: #222;170 border-radius: 50%;171 position: absolute;172 top: -12px;173 }174 .slider-labels {175 display: flex;176 justify-content: space-between;177 color: #777;178 font-size: 32px;179 }180 181 /* Accordions */182 .accordion {183 border-top: 1px solid #e6e6e6;184 border-bottom: 1px solid #e6e6e6;185 background: #fafafa;186 padding: 36px 40px;187 display: flex;188 align-items: center;189 justify-content: space-between;190 font-size: 44px;191 font-weight: 700;192 margin-top: 20px;193 }194 195 /* Bottom system bar placeholder */196 .bottom-bar {197 position: absolute;198 bottom: 0;199 left: 0;200 width: 1080px;201 height: 140px;202 background: #000;203 display: flex;204 align-items: center;205 justify-content: center;206 }207 .gesture-pill {208 width: 220px;209 height: 16px;210 background: #bfbfbf;211 border-radius: 12px;212 }213</style>214</head>215<body>216<div id="render-target">217 <!-- Simulated status bar -->218 <div class="status-bar">219 <div class="status-left">2:55</div>220 <div class="status-right">221 <span>📶</span>222 <span>🔋</span>223 <span>100%</span>224 </div>225 </div>226 227 <!-- Page header -->228 <div class="page-header">229 <div class="back-wrap">230 <svg width="56" height="56" viewBox="0 0 48 48">231 <path d="M30 8 L14 24 L30 40" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>232 </svg>233 <div class="back-text">Back</div>234 </div>235 <div class="header-icons">236 <div class="icon-btn">237 <svg width="56" height="56" viewBox="0 0 48 48">238 <path d="M12 18 h24 v20 h-24 z" stroke="#111" stroke-width="3" fill="none"/>239 <path d="M16 18 c0-4 4-8 8-8 s8 4 8 8" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round"/>240 </svg>241 </div>242 <div class="icon-btn">243 <svg width="56" height="56" viewBox="0 0 48 48">244 <path d="M24 40 c-12-8-18-14-18-22 c0-6 6-10 12-7 c3 2 6 5 6 5 s3-3 6-5 c6-3 12 1 12 7 c0 8-6 14-18 22 z" stroke="#111" stroke-width="3" fill="none" stroke-linejoin="round"/>245 </svg>246 </div>247 </div>248 </div>249 250 <!-- Content -->251 <div class="content">252 <div class="section-title">Sizes</div>253 <div class="error-text">Please select a size</div>254 255 <div class="size-grid">256 <div class="size-item selected">4</div>257 <div class="size-item">5</div>258 <div class="size-item">6</div>259 <div class="size-item">7</div>260 <div class="size-item">8</div>261 <div class="size-item">9</div>262 <div class="size-item">10</div>263 <div class="size-item">11</div>264 </div>265 266 <div class="helpers">267 <a class="helper-link" href="#">268 <svg width="44" height="44" viewBox="0 0 48 48">269 <rect x="6" y="12" width="36" height="20" rx="4" ry="4" stroke="#111" stroke-width="3" fill="none"/>270 <path d="M12 16 v8 M18 16 v8 M24 16 v8 M30 16 v8 M36 16 v8" stroke="#111" stroke-width="2"/>271 </svg>272 <span>Size guide</span>273 </a>274 <a class="helper-link" href="#">275 <svg width="44" height="44" viewBox="0 0 48 48">276 <rect x="6" y="10" width="36" height="28" rx="4" ry="4" stroke="#111" stroke-width="3" fill="none"/>277 <path d="M6 12 l18 12 l18-12" stroke="#111" stroke-width="3" fill="none"/>278 </svg>279 <span>Size out of stock?</span>280 </a>281 </div>282 283 <div class="add-btn">284 <svg width="56" height="56" viewBox="0 0 48 48">285 <path d="M12 18 h24 v20 h-24 z" stroke="#fff" stroke-width="3" fill="none"/>286 <path d="M16 18 c0-4 4-8 8-8 s8 4 8 8" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>287 </svg>288 <span>Add</span>289 </div>290 291 <a class="store-link" href="#">292 <svg width="46" height="46" viewBox="0 0 48 48">293 <path d="M10 20 h28 v16 h-28 z" stroke="#111" stroke-width="3" fill="none"/>294 <path d="M8 20 l16-10 l16 10" stroke="#111" stroke-width="3" fill="none"/>295 </svg>296 <span>Find in store</span>297 </a>298 299 <div class="info-line">300 <svg width="40" height="40" viewBox="0 0 48 48">301 <circle cx="24" cy="24" r="18" stroke="#111" stroke-width="3" fill="none"/>302 <rect x="22" y="20" width="4" height="12" fill="#111"/>303 <circle cx="24" cy="14" r="2" fill="#111"/>304 </svg>305 <span>Members get free online returns.</span>306 </div>307 308 <div class="center-heading">Delivery and payment</div>309 310 <div class="reviews">311 <div class="stars">312 <svg width="44" height="44" viewBox="0 0 48 48"><path d="M24 6 l6 12 14 2 -10 10 3 14 -13-7 -13 7 3-14 -10-10 14-2z" fill="#111"/></svg>313 <svg width="44" height="44" viewBox="0 0 48 48"><path d="M24 6 l6 12 14 2 -10 10 3 14 -13-7 -13 7 3-14 -10-10 14-2z" fill="#111"/></svg>314 <svg width="44" height="44" viewBox="0 0 48 48"><path d="M24 6 l6 12 14 2 -10 10 3 14 -13-7 -13 7 3-14 -10-10 14-2z" fill="#111"/></svg>315 <svg width="44" height="44" viewBox="0 0 48 48"><path d="M24 6 l6 12 14 2 -10 10 3 14 -13-7 -13 7 3-14 -10-10 14-2z" fill="#111"/></svg>316 <svg width="44" height="44" viewBox="0 0 48 48">317 <defs>318 <clipPath id="half">319 <rect x="0" y="0" width="24" height="48"/>320 </clipPath>321 </defs>322 <path d="M24 6 l6 12 14 2 -10 10 3 14 -13-7 -13 7 3-14 -10-10 14-2z" fill="#111" clip-path="url(#half)"/>323 <path d="M24 6 l6 12 14 2 -10 10 3 14 -13-7 -13 7 3-14 -10-10 14-2z" fill="#e0e0e0"/>324 </svg>325 </div>326 <div>(84 reviews)</div>327 </div>328 329 <div class="metric">330 <label>True to Size</label>331 <div class="slider" style="width: 960px;">332 <div class="dot" style="left: 50%;"></div>333 </div>334 <div class="slider-labels" style="width: 960px;">335 <span>Runs Small</span>336 <span>True to Size</span>337 <span>Runs Large</span>338 </div>339 </div>340 341 <div class="metric">342 <label>Width</label>343 <div class="slider" style="width: 960px;">344 <div class="dot" style="left: 45%;"></div>345 </div>346 <div class="slider-labels" style="width: 960px;">347 <span>Runs Narrow</span>348 <span>True to Size</span>349 <span>Runs Wide</span>350 </div>351 </div>352 353 <div class="accordion">354 <span>Description</span>355 <svg width="44" height="44" viewBox="0 0 48 48">356 <path d="M12 18 l12 12 l12-12" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round"/>357 </svg>358 </div>359 360 <div class="accordion">361 <span>Materials & Suppliers</span>362 <svg width="44" height="44" viewBox="0 0 48 48">363 <path d="M12 18 l12 12 l12-12" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round"/>364 </svg>365 </div>366 </div>367 368 <!-- Bottom bar -->369 <div class="bottom-bar">370 <div class="gesture-pill"></div>371 </div>372</div>373</body>374</html>