GD-ML/AndroidCode
13.4k
1<html lang="en">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, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 color: #222;15 }16 17 /* Status bar */18 .status-bar {19 height: 90px;20 padding: 0 36px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #444;25 font-size: 34px;26 }27 .status-icons {28 display: flex;29 align-items: center;30 gap: 26px;31 }32 .icon-dot { width: 12px; height: 12px; background: #777; border-radius: 50%; }33 .battery {34 width: 54px; height: 26px; border: 2px solid #444; border-radius: 6px; position: relative;35 }36 .battery::after {37 content: ""; position: absolute; right: -8px; top: 8px; width: 6px; height: 10px; background: #444; border-radius: 2px;38 }39 .battery .level { position: absolute; left: 4px; top: 4px; height: 16px; width: 34px; background: #444; border-radius: 4px; }40 41 /* Header */42 .header {43 display: flex;44 align-items: center;45 padding: 0 36px;46 height: 120px;47 }48 .back-btn {49 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;50 }51 .back-btn svg { width: 40px; height: 40px; fill: none; stroke: #222; stroke-width: 6; }52 .title { font-size: 54px; font-weight: 700; margin-left: 26px; }53 54 /* Product area */55 .product-top {56 display: flex;57 align-items: center;58 padding: 24px 36px;59 gap: 30px;60 }61 .product-img {62 width: 160px; height: 160px;63 background: #E0E0E0;64 border: 1px solid #BDBDBD;65 border-radius: 16px;66 display: flex; align-items: center; justify-content: center;67 color: #757575; font-size: 24px; text-align: center;68 }69 .price-tiers { display: flex; align-items: flex-end; gap: 48px; }70 .price {71 font-size: 52px; font-weight: 800;72 }73 .price.primary { color: #ff6d1e; }74 .price-sub { font-size: 28px; color: #b4572f; margin-top: 6px; }75 .price-tier { display: flex; flex-direction: column; }76 .price-note { font-size: 28px; color: #666; margin-top: 6px; }77 78 /* Tabs and labels */79 .section-label {80 padding: 10px 36px;81 font-size: 30px;82 color: #666;83 }84 .ram-tabs {85 display: flex; gap: 80px; padding: 14px 36px 30px;86 border-bottom: 2px solid #eee;87 }88 .ram-tab {89 font-size: 40px; color: #222; padding-bottom: 16px;90 position: relative;91 }92 .ram-tab.active::after {93 content: ""; position: absolute; left: 0; bottom: -16px; width: 80px; height: 6px; background: #222; border-radius: 4px;94 }95 96 /* Storage section */97 .storage-title {98 padding: 26px 36px 10px;99 font-size: 34px;100 color: #888;101 }102 .capacity-title {103 padding: 18px 36px;104 font-size: 44px;105 font-weight: 800;106 }107 108 .option-row {109 display: flex; align-items: center; justify-content: space-between;110 padding: 18px 36px;111 }112 .left-info {113 display: flex; align-items: center; gap: 26px;114 }115 .swatch {116 width: 96px; height: 96px; border-radius: 8px; border: 1px solid #bbb;117 }118 .swatch.gray { background: #9e9e9e; }119 .swatch.black { background: #000000; }120 .swatch.white { background: #f5f5f5; }121 .swatch.blue { background: #0a45ff; }122 .option-text {123 font-size: 40px; color: #222; font-weight: 700;124 }125 126 /* Stepper */127 .stepper {128 width: 380px; height: 96px; background: #f1f1f1; border-radius: 48px;129 display: flex; align-items: center; justify-content: space-between;130 padding: 0 14px;131 }132 .stepper .btn {133 width: 96px; height: 76px; background: #e7e7e7; border-radius: 38px;134 display: flex; align-items: center; justify-content: center; color: #666; font-size: 50px; font-weight: 700;135 border: 1px solid #d8d8d8;136 }137 .stepper .count {138 font-size: 42px; color: #222; font-weight: 700;139 }140 141 .view-more {142 padding: 10px 36px 20px;143 display: flex; align-items: center; gap: 16px;144 font-size: 38px; color: #ff6d1e; font-weight: 700;145 }146 .chev {147 width: 28px; height: 28px; border-right: 6px solid #ff6d1e; border-bottom: 6px solid #ff6d1e; transform: rotate(45deg);148 margin-top: 8px;149 }150 151 /* Bottom sheet */152 .bottom-sheet {153 position: absolute; left: 0; right: 0; bottom: 0;154 background: #ffffff;155 box-shadow: 0 -6px 20px rgba(0,0,0,0.08);156 border-top-left-radius: 26px; border-top-right-radius: 26px;157 padding-bottom: 40px;158 }159 .bottom-sheet .warning {160 display: flex; align-items: center; gap: 18px;161 padding: 28px 36px;162 font-size: 38px; font-weight: 700;163 }164 .warn-icon {165 width: 42px; height: 42px; border: 3px solid #ff4d4d; border-radius: 50%;166 position: relative;167 }168 .warn-icon::after {169 content: "!"; position: absolute; left: 11px; top: 2px; color: #ff4d4d; font-size: 32px; font-weight: 900;170 }171 .info-row {172 padding: 16px 36px;173 display: flex; align-items: center; justify-content: space-between;174 font-size: 38px;175 }176 .info-row .label { color: #555; }177 .info-row .value { color: #222; font-weight: 700; }178 .info-row .arrow {179 width: 26px; height: 26px; border-right: 6px solid #bbb; border-bottom: 6px solid #bbb; transform: rotate(-45deg);180 margin-left: 18px;181 }182 183 .subtotal {184 padding: 16px 36px;185 display: flex; align-items: baseline; justify-content: space-between;186 font-size: 34px; color: #666;187 }188 .subtotal .amount { color: #222; font-size: 40px; font-weight: 800; }189 190 .cta {191 padding: 20px 36px 36px;192 }193 .add-btn {194 width: 100%; height: 120px; background: #ff6d1e; color: #fff; font-size: 48px; font-weight: 800;195 border: none; border-radius: 60px;196 }197 198 /* Home indicator */199 .home-indicator {200 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);201 width: 280px; height: 12px; background: #d7d7d7; border-radius: 8px;202 }203</style>204</head>205<body>206<div id="render-target">207 208 <!-- Status bar -->209 <div class="status-bar">210 <div>8:54</div>211 <div class="status-icons">212 <div class="icon-dot"></div>213 <div class="icon-dot"></div>214 <div class="battery"><div class="level"></div></div>215 </div>216 </div>217 218 <!-- Header -->219 <div class="header">220 <div class="back-btn">221 <svg viewBox="0 0 24 24"><path d="M15 4 L7 12 L15 20" /></svg>222 </div>223 <div class="title">Variations</div>224 </div>225 226 <!-- Product top area -->227 <div class="product-top">228 <div class="product-img">[IMG: Phone Product]</div>229 230 <div class="price-tiers">231 <div class="price-tier">232 <div class="price primary">$145.00</div>233 <div class="price-sub">MOQ: 1 piece</div>234 </div>235 <div class="price-tier">236 <div class="price">$132.00</div>237 <div class="price-note">5+ pieces</div>238 </div>239 <div class="price-tier">240 <div class="price">$112.00</div>241 <div class="price-note">50+ pieces</div>242 </div>243 </div>244 </div>245 246 <div class="section-label">RAM</div>247 <div class="ram-tabs">248 <div class="ram-tab active">4g</div>249 <div class="ram-tab">6G</div>250 <div class="ram-tab">8g</div>251 <div class="ram-tab">12g</div>252 </div>253 254 <div class="storage-title">Storage Capacity & Plug & Color</div>255 256 <!-- 64GB -->257 <div class="capacity-title">64GB</div>258 259 <div class="option-row">260 <div class="left-info">261 <div class="swatch gray"></div>262 <div class="option-text">UK & Gray</div>263 </div>264 <div class="stepper">265 <div class="btn">−</div>266 <div class="count">0</div>267 <div class="btn">+</div>268 </div>269 </div>270 271 <div class="option-row">272 <div class="left-info">273 <div class="swatch black"></div>274 <div class="option-text">UK & Black</div>275 </div>276 <div class="stepper">277 <div class="btn">−</div>278 <div class="count">0</div>279 <div class="btn">+</div>280 </div>281 </div>282 283 <div class="option-row">284 <div class="left-info">285 <div class="swatch white"></div>286 <div class="option-text">UK & White</div>287 </div>288 <div class="stepper">289 <div class="btn">−</div>290 <div class="count">0</div>291 <div class="btn">+</div>292 </div>293 </div>294 295 <div class="option-row">296 <div class="left-info">297 <div class="swatch blue"></div>298 <div class="option-text">UK & Blue</div>299 </div>300 <div class="stepper">301 <div class="btn">−</div>302 <div class="count">0</div>303 <div class="btn">+</div>304 </div>305 </div>306 307 <div class="view-more">308 <div>View 12 more</div>309 <div class="chev"></div>310 </div>311 312 <!-- 128GB -->313 <div class="capacity-title">128GB</div>314 315 <div class="option-row">316 <div class="left-info">317 <div class="swatch gray"></div>318 <div class="option-text">UK & Gray</div>319 </div>320 <div class="stepper">321 <div class="btn">−</div>322 <div class="count">0</div>323 <div class="btn">+</div>324 </div>325 </div>326 327 <div class="option-row">328 <div class="left-info">329 <div class="swatch black"></div>330 <div class="option-text">UK & Black</div>331 </div>332 <div class="stepper">333 <div class="btn">−</div>334 <div class="count">0</div>335 <div class="btn">+</div>336 </div>337 </div>338 339 <!-- Bottom sheet -->340 <div class="bottom-sheet" style="height: 620px;">341 <div class="warning">342 <div class="warn-icon"></div>343 <div>Quantity needed</div>344 </div>345 346 <div class="info-row">347 <div class="label">Ship from</div>348 <div style="display:flex; align-items:center; gap:16px;">349 <div class="value">China</div>350 <div class="arrow"></div>351 </div>352 </div>353 354 <div class="info-row">355 <div class="label">Shipping fee</div>356 <div style="display:flex; align-items:center; gap:16px;">357 <div class="value">EST.$25.00</div>358 <div class="arrow"></div>359 </div>360 </div>361 362 <div class="subtotal">363 <div>Subtotal ( 0 type 0 item )</div>364 <div class="amount">$0.00</div>365 </div>366 367 <div class="cta">368 <button class="add-btn">Add to cart</button>369 </div>370 </div>371 372 <div class="home-indicator"></div>373</div>374</body>375</html>