GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Cart UI</title>5<style>6 :root{7 --purple:#3E0066;8 --purple-dark:#2A0046;9 --pink:#FF3D74;10 --green:#49C58A;11 --text:#1d1d1f;12 --muted:#6e6e73;13 --bg:#ffffff;14 --chip:#f3f0f8;15 --border:#e4e4e7;16 }17 body{ margin:0; padding:0; background:transparent; }18 #render-target{19 width:1080px; height:2400px;20 position:relative; overflow:hidden;21 background:#fff;22 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;23 color:var(--text);24 }25 26 /* Status bar */27 .status-bar{28 height:84px;29 background:var(--purple-dark);30 color:#fff;31 display:flex; align-items:center; justify-content:space-between;32 padding:0 36px;33 font-weight:600; font-size:34px;34 }35 .status-icons{ display:flex; align-items:center; gap:18px; opacity:0.9; font-size:32px; }36 37 /* Header */38 .header{39 height:140px;40 background:var(--purple);41 color:#fff;42 display:flex; align-items:center;43 position:relative;44 padding:0 28px;45 }46 .back-btn{47 width:72px; height:72px; display:flex; align-items:center; justify-content:center;48 border-radius:18px;49 cursor:default;50 }51 .back-btn svg{ width:40px; height:40px; fill:#fff; }52 .header-title{53 position:absolute; left:0; right:0; text-align:center;54 font-weight:700; font-size:46px;55 letter-spacing:0.2px;56 }57 .add-more{58 position:absolute; right:28px;59 background:#6E2AAC; color:#fff;60 padding:26px 34px; border-radius:26px;61 font-weight:700; font-size:34px;62 }63 64 /* Scroll content area */65 .content{66 position:absolute; left:0; right:0; top:224px; bottom:320px;67 overflow-y:auto;68 background:#fff;69 }70 71 /* Cards & rows */72 .card{73 margin:22px 28px;74 background:#fff; border:1px solid var(--border);75 border-radius:22px; padding:26px;76 box-shadow:0 1px 0 rgba(0,0,0,0.02);77 }78 .soft-card{79 margin:22px 28px;80 background:#fff; border:1px solid var(--border);81 border-radius:26px; padding:26px 30px;82 }83 84 /* Percent icon chip */85 .chip-icon{86 width:72px; height:72px; border-radius:14px;87 background:#E9F8EF; color:#2D9F65; display:flex; align-items:center; justify-content:center;88 border:1px solid #D7EFE2; font-weight:800; font-size:34px;89 margin-right:22px;90 }91 .row{ display:flex; align-items:center; }92 .grow{ flex:1; }93 94 .subtext{ color:var(--muted); font-size:30px; }95 .bold{ font-weight:700; }96 .free-delivery strong{ color:var(--purple); }97 98 .progress-mini{99 display:flex; align-items:center; gap:16px;100 }101 .pill{102 background:#EFE7F7; color:#5A2A8C; padding:10px 18px; border-radius:999px; font-size:28px; font-weight:700;103 }104 .dots{ display:flex; gap:8px; }105 .dot{ width:12px; height:12px; border-radius:50%; background:#C8B7E2; }106 .dot.active{ background:#6E47A8; }107 108 /* Item row */109 .item-row{ display:flex; align-items:center; gap:22px; }110 .img-ph{111 width:140px; height:94px; background:#E0E0E0;112 border:1px solid #BDBDBD; border-radius:12px;113 display:flex; align-items:center; justify-content:center;114 color:#757575; font-size:26px; text-align:center; padding:6px;115 }116 .item-info{ flex:1; }117 .item-title{ font-weight:800; font-size:36px; line-height:44px; color:#2c2c2c; }118 .item-sub{ font-size:28px; color:var(--muted); margin-top:6px; }119 120 .price-box{ text-align:right; min-width:160px; }121 .price-now{ font-weight:800; font-size:40px; }122 .price-old{ font-size:30px; color:#999; text-decoration:line-through; margin-top:6px; }123 124 .qty-control{125 background:var(--pink); color:#fff; border-radius:28px;126 display:flex; align-items:center; gap:32px;127 padding:10px 20px; height:76px; min-width:220px; justify-content:center;128 }129 .qty-btn{ width:48px; height:48px; border-radius:12px; background:rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; }130 .qty-btn svg{ width:28px; height:28px; fill:#fff; }131 .qty-value{ font-weight:800; font-size:40px; }132 133 /* Unlock offer */134 .section-title{135 display:flex; align-items:center; gap:18px; font-weight:800; font-size:40px; margin:24px 28px 8px;136 }137 .gear{138 width:66px; height:66px; border-radius:14px; background:#EFE7F7; border:1px solid #D9CDEE;139 display:flex; align-items:center; justify-content:center;140 }141 .gear svg{ width:36px; height:36px; fill:#6E47A8; }142 143 .offer-box{ margin:0 28px; border:1px solid var(--border); border-radius:24px; padding:26px; }144 .offer-msg{ font-size:34px; line-height:44px; }145 .offer-msg strong{ font-weight:800; }146 .lock-icon{147 width:40px; height:40px; margin-right:12px; display:inline-flex; vertical-align:middle;148 }149 .progress-line{ height:16px; background:#EFE7F7; border-radius:999px; margin:24px 0; overflow:hidden; }150 .progress-line .bar{ width:78%; height:100%; background:#6E47A8; }151 152 .potato-row{ display:flex; align-items:center; gap:26px; }153 .kg-info{154 font-size:28px; color:var(--muted);155 display:flex; align-items:center; gap:10px;156 }157 .info-dot{158 width:28px; height:28px; border-radius:50%; background:#F6F2FA; border:1px solid #E0D7EF; color:#6E47A8;159 display:flex; align-items:center; justify-content:center; font-weight:800; font-size:24px;160 }161 .add-btn{162 margin-left:auto; background:#F2F2F4; color:#6B6B70; border-radius:22px; padding:22px 40px; font-weight:800; font-size:34px;163 }164 .potato-price{165 margin-left:20px; text-align:right; min-width:120px;166 }167 .potato-price .now{ font-weight:800; font-size:36px; }168 .potato-price .old{ color:#FF3D74; text-decoration:line-through; font-size:32px; }169 170 /* Coupons row */171 .coupons{172 margin:22px 28px; padding:28px; border:1px solid var(--border); border-radius:22px;173 display:flex; align-items:center; justify-content:space-between;174 }175 .coupons-left{ display:flex; align-items:center; gap:18px; font-weight:800; font-size:40px; }176 .green-chip{177 width:72px; height:72px; border-radius:14px; background:#E9F8EF; border:1px solid #D7EFE2; color:#2D9F65; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:34px;178 }179 .arrow-right{180 width:42px; height:42px;181 }182 .arrow-right svg{ width:100%; height:100%; fill:#FF3D74; }183 184 /* Recommendations */185 .section-heading{ font-weight:800; font-size:42px; margin:26px 28px; }186 .cards{ display:flex; gap:22px; margin:0 28px 22px; }187 .prod-card{188 width:324px; border:1px solid var(--border); border-radius:22px; background:#fff; overflow:hidden;189 }190 .prod-img{ width:100%; height:240px; }191 .prod-body{ padding:22px; }192 .prod-title{ font-weight:800; font-size:34px; line-height:42px; }193 .off-badge{194 position:absolute; top:16px; left:16px; background:#6E47A8; color:#fff; font-weight:800; font-size:28px; padding:10px 16px; border-radius:16px;195 }196 .card-top{ position:relative; }197 198 /* Bottom address bar */199 .bottom-area{200 position:absolute; left:0; right:0; bottom:0;201 background:#fff; box-shadow:0 -4px 24px rgba(0,0,0,0.06);202 padding:24px 28px 36px;203 }204 .address-strip{205 height:120px; border:1px solid var(--border); border-radius:28px; display:flex; align-items:center; gap:24px; padding:0 28px; margin-bottom:24px;206 background:#fff;207 }208 .loc-dot{209 width:54px; height:54px; border-radius:50%; background:#FF5B6E; display:flex; align-items:center; justify-content:center;210 }211 .loc-dot svg{ width:30px; height:30px; fill:#fff; }212 .addr-text{ font-size:38px; color:#2c2c2c; }213 .cta{214 width:100%; background:var(--pink); color:#fff; border-radius:32px; padding:34px; text-align:center; font-weight:800; font-size:40px;215 }216</style>217</head>218<body>219<div id="render-target">220 221 <!-- Status bar -->222 <div class="status-bar">223 <div>8:52</div>224 <div class="status-icons">225 <span>◉</span>226 <span>📶</span>227 <span>🔋</span>228 </div>229 </div>230 231 <!-- Header -->232 <div class="header">233 <div class="back-btn" aria-label="Back">234 <svg viewBox="0 0 24 24"><path d="M15.6 3.5L5 12l10.6 8.5c.6.5 1.4.4 1.9-.2.5-.6.4-1.4-.2-1.9L9 12l8.3-6.4c.6-.5.7-1.3.2-1.9-.5-.6-1.3-.7-1.9-.2z"/></svg>235 </div>236 <div class="header-title">Cart (1)</div>237 <div class="add-more">Add More</div>238 </div>239 240 <!-- Scrollable content -->241 <div class="content">242 243 <!-- Free delivery card -->244 <div class="card">245 <div class="row">246 <div class="chip-icon">%</div>247 <div class="grow">248 <div class="free-delivery" style="font-size:36px;">249 Add items worth ₹10 to get <strong>Free Delivery</strong>250 </div>251 </div>252 <div class="progress-mini">253 <div class="pill">1/6</div>254 <div class="dots">255 <div class="dot active"></div>256 <div class="dot"></div>257 <div class="dot"></div>258 </div>259 </div>260 </div>261 </div>262 263 <!-- Item row -->264 <div class="soft-card">265 <div class="item-row">266 <div class="img-ph">[IMG: Avocado]</div>267 <div class="item-info">268 <div class="item-title">Westfalia Avocado<br>Imported Semi Ripe</div>269 <div class="item-sub">1 piece</div>270 </div>271 272 <div class="qty-control">273 <div class="qty-btn">274 <svg viewBox="0 0 24 24"><path d="M5 12c0-.6.4-1 1-1h12c.6 0 1 .4 1 1s-.4 1-1 1H6c-.6 0-1-.4-1-1z"/></svg>275 </div>276 <div class="qty-value">1</div>277 <div class="qty-btn">278 <svg viewBox="0 0 24 24"><path d="M12 5c.6 0 1 .4 1 1v6h6c.6 0 1 .4 1 1s-.4 1-1 1h-6v6c0 .6-.4 1-1 1s-1-.4-1-1v-6H5c-.6 0-1-.4-1-1s.4-1 1-1h6V6c0-.6.4-1 1-1z"/></svg>279 </div>280 </div>281 282 <div class="price-box">283 <div class="price-now">₹89</div>284 <div class="price-old">₹111</div>285 </div>286 </div>287 </div>288 289 <!-- Unlock new offer -->290 <div class="section-title">291 <div class="gear">292 <svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 100 8 4 4 0 000-8zm9 4l-2.3.9c-.2.7-.5 1.4-.9 2l1.3 2.1-2.1 2.1-2.1-1.3c-.6.4-1.3.7-2 .9L12 21l-1-.3c-.7-.2-1.4-.5-2-.9l-2.1 1.3-2.1-2.1 1.3-2.1c-.4-.6-.7-1.3-.9-2L3 12l.3-1c.2-.7.5-1.4.9-2L2.9 6.9 5 4.8l2.1 1.3c.6-.4 1.3-.7 2-.9L12 3l1 .3c.7.2 1.4.5 2 .9l2.1-1.3 2.1 2.1-1.3 2.1c.4.6.7 1.3.9 2L21 12z"/></svg>293 </div>294 Unlock new offer295 </div>296 297 <div class="offer-box">298 <div class="offer-msg">299 <span class="lock-icon">300 <svg viewBox="0 0 24 24"><path d="M12 2a5 5 0 00-5 5v3H6a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2v-8a2 2 0 00-2-2h-1V7a5 5 0 00-5-5zm-3 8V7a3 3 0 016 0v3H9z"/></svg>301 </span>302 Buy Fruits and Vegetables worth ₹10 to get <strong>Potato</strong> at special price.303 </div>304 305 <div class="progress-line"><div class="bar"></div></div>306 307 <div class="potato-row">308 <div class="img-ph" style="width:120px; height:90px;">[IMG: Potato]</div>309 <div>310 <div style="font-weight:800; font-size:36px;">Potato</div>311 <div class="kg-info">1 Kg <span class="info-dot">i</span></div>312 </div>313 314 <div class="add-btn">Add</div>315 <div class="potato-price">316 <div class="now">₹9</div>317 <div class="old">₹35</div>318 </div>319 </div>320 </div>321 322 <!-- Coupons row -->323 <div class="coupons">324 <div class="coupons-left">325 <div class="green-chip">%</div>326 Avail Offers / Coupons327 </div>328 <div class="arrow-right">329 <svg viewBox="0 0 24 24"><path d="M8 4l8 8-8 8c-.6.6-1.6.6-2.2 0-.6-.6-.6-1.6 0-2.2L12.6 12 5.8 6.2c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0z"/></svg>330 </div>331 </div>332 333 <!-- Recommendations -->334 <div class="section-heading">You Might Have Missed</div>335 <div class="cards">336 <div class="prod-card">337 <div class="card-top">338 <div class="off-badge">5% Off</div>339 <div class="img-ph prod-img">[IMG: Tissue Roll Pack]</div>340 </div>341 <div class="prod-body">342 <div class="prod-title">So Soft Tissue Roll<br>4 in1 340 Pulls</div>343 </div>344 </div>345 346 <div class="prod-card">347 <div class="card-top">348 <div class="img-ph prod-img">[IMG: Amul Taaza Milk Pouch]</div>349 </div>350 <div class="prod-body">351 <div class="prod-title">Amul Taaza Toned<br>Fresh Milk (Pouch)</div>352 </div>353 </div>354 355 <div class="prod-card">356 <div class="card-top">357 <div class="off-badge">17% Off</div>358 <div class="img-ph prod-img">[IMG: Cauliflower]</div>359 </div>360 <div class="prod-body">361 <div class="prod-title">Cauliflower</div>362 </div>363 </div>364 </div>365 366 </div>367 368 <!-- Bottom address area -->369 <div class="bottom-area">370 <div class="address-strip">371 <div class="loc-dot">372 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 00-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 00-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z"/></svg>373 </div>374 <div class="addr-text">Enter your delivery address</div>375 </div>376 <div class="cta">Add Address To Proceed</div>377 </div>378 379</div>380</body>381</html>