GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Variations UI</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; color:#222; }8 #render-target {9 position: relative;10 width:1080px;11 height:2400px;12 overflow:hidden;13 background:#ffffff;14 }15 16 /* Status bar */17 .status-bar {18 height:82px;19 padding:0 32px;20 display:flex;21 align-items:center;22 justify-content:flex-end;23 font-size:28px;24 color:#616161;25 }26 /* App bar */27 .app-bar {28 height:120px;29 display:flex;30 align-items:center;31 padding:0 24px;32 border-bottom:1px solid #eee;33 }34 .back-btn {35 width:96px; height:96px; display:flex; align-items:center; justify-content:center;36 }37 .back-btn svg { width:44px; height:44px; fill:#222; }38 .title {39 flex:1;40 text-align:center;41 font-size:48px;42 font-weight:700;43 margin-right:96px; /* balance the back button */44 }45 46 /* Scrollable content area */47 .content {48 position:absolute;49 top:202px; /* status + app bar */50 bottom:360px; /* space for bottom sheet */51 left:0; right:0;52 overflow-y:auto;53 padding:24px 28px 120px 28px;54 }55 56 /* Product summary */57 .summary {58 display:flex;59 align-items:flex-start;60 gap:24px;61 }62 .thumb {63 width:160px; height:160px;64 background:#E0E0E0; border:1px solid #BDBDBD; border-radius:16px;65 display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px; text-align:center; padding:8px;66 }67 .prices { display:flex; gap:22px; flex-wrap:wrap; }68 .price-chip {69 background:#fff7f1;70 border:1px solid #ffb68a;71 color:#d74f00;72 padding:12px 16px;73 border-radius:14px;74 min-width:230px;75 }76 .price-chip .big { font-size:44px; font-weight:800; display:block; line-height:1.1; }77 .price-chip .sub { font-size:28px; color:#a35b3a; }78 79 .price-tier {80 background:#f6f6f6;81 border:1px solid #e0e0e0;82 border-radius:14px;83 padding:12px 16px;84 min-width:220px;85 }86 .price-tier .big { font-size:40px; font-weight:700; display:block; color:#333; }87 .price-tier .sub { font-size:26px; color:#666; }88 89 /* Section headers */90 .section-title {91 font-size:30px;92 color:#888;93 margin:28px 4px 12px;94 text-transform:uppercase;95 letter-spacing:0.5px;96 }97 98 /* RAM tabs */99 .tabs {100 display:flex;101 gap:36px;102 border-bottom:1px solid #eee;103 padding-bottom:18px;104 margin:0 4px 18px;105 }106 .tab {107 font-size:40px;108 padding:16px 8px;109 color:#777;110 position:relative;111 }112 .tab.active {113 color:#111;114 font-weight:800;115 }116 .tab.active::after {117 content:"";118 position:absolute;119 left:0; right:0; bottom:-18px;120 height:6px; border-radius:3px;121 background:#000;122 }123 124 /* Storage groups */125 .group-title {126 font-size:44px;127 font-weight:800;128 margin:24px 4px 10px;129 }130 .option-row {131 display:flex;132 align-items:center;133 justify-content:space-between;134 padding:18px 8px;135 }136 .left {137 display:flex; align-items:center; gap:24px;138 }139 .swatch {140 width:96px; height:96px; border-radius:8px; border:1px solid #cfcfcf;141 }142 .swatch.gray { background:#9e9e9e; }143 .swatch.black { background:#111; }144 .swatch.white { background:#fff; }145 .swatch.blue { background:#0a44ff; }146 .label {147 font-size:40px; color:#222;148 }149 150 /* Stepper */151 .stepper {152 width:370px; height:96px;153 background:#f2f2f2;154 border-radius:52px;155 display:flex; align-items:center; justify-content:space-between;156 padding:0 12px;157 border:1px solid #e4e4e4;158 }159 .step-btn {160 width:96px; height:80px; border-radius:40px; background:#ffffff;161 display:flex; align-items:center; justify-content:center; border:1px solid #e0e0e0; color:#777;162 }163 .step-btn svg { width:32px; height:32px; fill:#777; }164 .qty {165 font-size:40px; color:#111;166 }167 168 .more {169 margin:10px 8px 14px;170 color:#f28b1f;171 font-size:36px;172 display:flex; align-items:center; gap:8px;173 }174 .more svg { width:28px; height:28px; fill:#f28b1f; }175 176 /* Divider */177 .divider { height:1px; background:#efefef; margin:8px 0 18px; }178 179 /* Bottom sheet */180 .bottom-sheet {181 position:absolute; left:0; right:0; bottom:0;182 background:#fff;183 box-shadow:0 -6px 24px rgba(0,0,0,0.1);184 border-top-left-radius:24px; border-top-right-radius:24px;185 padding:24px 28px 28px;186 }187 .row-between {188 display:flex; align-items:center; justify-content:space-between;189 padding:18px 2px;190 font-size:38px;191 }192 .row-between .muted { color:#666; }193 .ship-row { border-top:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0; }194 .subtotal { font-size:34px; color:#666; }195 .total { font-size:42px; font-weight:800; }196 .cta {197 margin-top:18px;198 background:#f37225;199 color:#fff;200 height:120px; border-radius:60px;201 display:flex; align-items:center; justify-content:center;202 font-size:44px; font-weight:800;203 }204 205 /* Small helper for subtle placeholder status items (not strictly necessary) */206 .status-dots {207 width:140px; height:14px; background:#d0d0d0; border-radius:7px; margin-left:16px;208 }209</style>210</head>211<body>212<div id="render-target">213 214 <!-- Top bars -->215 <div class="status-bar">216 <div style="margin-right:auto; color:#616161; font-weight:600;">8:53</div>217 <div class="status-dots"></div>218 </div>219 220 <div class="app-bar">221 <div class="back-btn">222 <svg viewBox="0 0 24 24"><path d="M15.5 4.5 7 12l8.5 7.5-1.5 2L4 12 14 2.5z"/></svg>223 </div>224 <div class="title">Variations</div>225 </div>226 227 <!-- Scrollable content -->228 <div class="content">229 230 <!-- Product summary with prices -->231 <div class="summary">232 <div class="thumb">[IMG: Phone Thumbnail]</div>233 <div class="prices">234 <div class="price-chip">235 <span class="big">$145.00</span>236 <span class="sub">MOQ: 1 piece</span>237 </div>238 <div class="price-tier">239 <span class="big">$132.00</span>240 <span class="sub">5+ pieces</span>241 </div>242 <div class="price-tier">243 <span class="big">$112.00</span>244 <span class="sub">50+ pieces</span>245 </div>246 <div class="price-tier">247 <span class="big">$89.00</span>248 <span class="sub">500+ pieces</span>249 </div>250 </div>251 </div>252 253 <div class="section-title">RAM</div>254 <div class="tabs">255 <div class="tab active">4g</div>256 <div class="tab">6G</div>257 <div class="tab">8g</div>258 <div class="tab">12g</div>259 </div>260 261 <div class="section-title">Storage Capacity & Plug & Color</div>262 263 <!-- 64GB group -->264 <div class="group-title">64GB</div>265 266 <div class="option-row">267 <div class="left">268 <div class="swatch gray"></div>269 <div class="label">UK & Gray</div>270 </div>271 <div class="stepper">272 <div class="step-btn">273 <svg viewBox="0 0 24 24"><path d="M4 11h16v2H4z"/></svg>274 </div>275 <div class="qty">0</div>276 <div class="step-btn">277 <svg viewBox="0 0 24 24"><path d="M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7z"/></svg>278 </div>279 </div>280 </div>281 282 <div class="option-row">283 <div class="left">284 <div class="swatch black"></div>285 <div class="label">UK & Black</div>286 </div>287 <div class="stepper">288 <div class="step-btn">289 <svg viewBox="0 0 24 24"><path d="M4 11h16v2H4z"/></svg>290 </div>291 <div class="qty">0</div>292 <div class="step-btn">293 <svg viewBox="0 0 24 24"><path d="M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7z"/></svg>294 </div>295 </div>296 </div>297 298 <div class="option-row">299 <div class="left">300 <div class="swatch white"></div>301 <div class="label">UK & White</div>302 </div>303 <div class="stepper">304 <div class="step-btn">305 <svg viewBox="0 0 24 24"><path d="M4 11h16v2H4z"/></svg>306 </div>307 <div class="qty">0</div>308 <div class="step-btn">309 <svg viewBox="0 0 24 24"><path d="M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7z"/></svg>310 </div>311 </div>312 </div>313 314 <div class="option-row">315 <div class="left">316 <div class="swatch blue"></div>317 <div class="label">UK & Blue</div>318 </div>319 <div class="stepper">320 <div class="step-btn">321 <svg viewBox="0 0 24 24"><path d="M4 11h16v2H4z"/></svg>322 </div>323 <div class="qty">0</div>324 <div class="step-btn">325 <svg viewBox="0 0 24 24"><path d="M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7z"/></svg>326 </div>327 </div>328 </div>329 330 <div class="more">331 View 12 more332 <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>333 </div>334 335 <div class="divider"></div>336 337 <!-- 128GB group -->338 <div class="group-title">128GB</div>339 340 <div class="option-row">341 <div class="left">342 <div class="swatch gray"></div>343 <div class="label">UK & Gray</div>344 </div>345 <div class="stepper">346 <div class="step-btn">347 <svg viewBox="0 0 24 24"><path d="M4 11h16v2H4z"/></svg>348 </div>349 <div class="qty">0</div>350 <div class="step-btn">351 <svg viewBox="0 0 24 24"><path d="M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7z"/></svg>352 </div>353 </div>354 </div>355 356 <div class="option-row">357 <div class="left">358 <div class="swatch black"></div>359 <div class="label">UK & Black</div>360 </div>361 <div class="stepper">362 <div class="step-btn">363 <svg viewBox="0 0 24 24"><path d="M4 11h16v2H4z"/></svg>364 </div>365 <div class="qty">0</div>366 <div class="step-btn">367 <svg viewBox="0 0 24 24"><path d="M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7z"/></svg>368 </div>369 </div>370 </div>371 372 <div class="option-row">373 <div class="left">374 <div class="swatch white"></div>375 <div class="label">UK & White</div>376 </div>377 <div class="stepper">378 <div class="step-btn">379 <svg viewBox="0 0 24 24"><path d="M4 11h16v2H4z"/></svg>380 </div>381 <div class="qty">0</div>382 <div class="step-btn">383 <svg viewBox="0 0 24 24"><path d="M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7z"/></svg>384 </div>385 </div>386 </div>387 388 </div>389 390 <!-- Bottom sheet -->391 <div class="bottom-sheet">392 <div class="row-between">393 <div class="muted">Ship from</div>394 <div style="color:#999;"><svg viewBox="0 0 24 24" width="28" height="28"><path d="M9 6l6 6-6 6" fill="#999"/></svg></div>395 </div>396 397 <div class="row-between ship-row">398 <div class="muted">Shipping fee</div>399 <div style="display:flex; align-items:center; gap:16px;">400 <div style="color:#12a150; font-weight:700;">Free Shipping</div>401 <svg viewBox="0 0 24 24" width="28" height="28"><path d="M9 6l6 6-6 6" fill="#bbb"/></svg>402 </div>403 </div>404 405 <div class="row-between">406 <div class="subtotal">Subtotal ( 0 type 0 item )</div>407 <div class="total">$0.00</div>408 </div>409 410 <div class="cta">Add to cart</div>411 </div>412 413</div>414</body>415</html>