GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>My Cart UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #212121; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #ffffff;15 }16 .status-bar {17 height: 90px;18 padding: 0 28px;19 display: flex;20 align-items: center;21 justify-content: space-between;22 color: #616161;23 font-size: 32px;24 letter-spacing: 0.5px;25 }26 .status-icons { display: flex; align-items: center; gap: 18px; }27 .dot { width: 10px; height: 10px; background:#757575; border-radius: 50%; display: inline-block; }28 .icon { width: 36px; height: 36px; }29 .page {30 position: absolute;31 top: 90px;32 left: 0;33 right: 0;34 bottom: 300px; /* leave space for bottom nav + price bar */35 overflow: auto;36 -webkit-overflow-scrolling: touch;37 background: #fff;38 }39 .header {40 padding: 40px 40px 10px 40px;41 font-size: 56px;42 font-weight: 700;43 }44 .address-row {45 padding: 20px 40px;46 display: flex;47 align-items: center;48 justify-content: space-between;49 gap: 20px;50 }51 .address-row .label { font-size: 36px; color: #616161; }52 .address-row .value { font-weight: 700; color: #212121; }53 .btn-change {54 padding: 18px 30px;55 border: 2px solid #e0e0e0;56 border-radius: 16px;57 color: #1e88e5;58 font-weight: 700;59 font-size: 34px;60 background: #fff;61 }62 .info-banner {63 margin: 10px 40px 30px 40px;64 padding: 24px;65 background: #e8f1fe;66 border: 2px solid #c6dbff;67 border-radius: 14px;68 color: #335b9a;69 font-size: 32px;70 }71 .divider { height: 18px; background: #f1f3f6; width: 100%; }72 73 /* Product card */74 .product {75 padding: 30px 40px 20px 40px;76 }77 .deal-pill {78 display: inline-block;79 background: #e8f5e9;80 color: #1b5e20;81 border: 2px solid #c8e6c9;82 font-weight: 700;83 padding: 10px 18px;84 border-radius: 10px;85 font-size: 30px;86 margin-bottom: 20px;87 }88 .prod-row {89 display: grid;90 grid-template-columns: 150px 1fr;91 gap: 28px;92 align-items: start;93 }94 .img-ph {95 width: 150px; height: 210px;96 background: #E0E0E0; border: 1px solid #BDBDBD;97 display: flex; align-items: center; justify-content: center;98 color: #757575; font-size: 24px; text-align: center; padding: 6px;99 }100 .prod-title { font-size: 44px; font-weight: 700; margin: 0; }101 .prod-sub { font-size: 30px; color: #757575; margin-top: 6px; }102 .rating-row { display: flex; align-items: center; gap: 14px; margin-top: 14px; }103 .stars { display: inline-flex; gap: 6px; }104 .star { width: 28px; height: 28px; }105 .rating-count { font-size: 28px; color: #616161; }106 .plus-badge { display: inline-flex; align-items: center; gap: 6px; background: #e3f2fd; color: #1976d2; border-radius: 20px; padding: 6px 12px; font-size: 24px; font-weight: 700; }107 .price-row { display: flex; align-items: baseline; gap: 18px; margin-top: 16px; }108 .off { color: #2e7d32; font-size: 40px; font-weight: 800; }109 .mrp { color: #9e9e9e; text-decoration: line-through; font-size: 34px; }110 .price { font-size: 48px; font-weight: 800; }111 .qty-box {112 display: inline-flex; align-items: center; gap: 12px;113 border: 2px solid #e0e0e0; border-radius: 14px; padding: 14px 16px;114 font-size: 34px; color: #424242; background: #fff;115 }116 .qty-row { margin-top: 20px; gap: 26px; display: flex; align-items: center; }117 .offer { color: #2e7d32; font-size: 32px; margin-top: 8px; }118 .delivery { font-size: 30px; color: #616161; margin-top: 16px; }119 .delivery .free { color: #2e7d32; font-weight: 700; }120 .actions {121 display: grid;122 grid-template-columns: 1fr 1fr 1fr;123 border-top: 2px solid #eeeeee;124 margin-top: 26px;125 }126 .action {127 display:flex; align-items: center; justify-content: center;128 gap: 16px; height: 120px; font-size: 32px; color:#424242;129 border-right: 2px solid #eeeeee;130 }131 .action:last-child { border-right: none; }132 .action svg { width: 34px; height: 34px; }133 134 /* Add-on section */135 .addon-header {136 margin-top: 18px;137 padding: 26px 40px;138 background: #eef5ff;139 border-top: 2px solid #e0e8ff;140 border-bottom: 2px solid #e0e8ff;141 display: flex; align-items: center; justify-content: space-between;142 font-size: 38px; font-weight: 700; color: #37474f;143 }144 .addon-header .left { display: flex; align-items: center; gap: 18px; }145 .box-icon { width: 38px; height: 38px; }146 .addon-card {147 margin: 20px 40px 30px 40px;148 background: #ffffff;149 border-radius: 20px;150 border: 2px solid #eeeeee;151 padding: 26px;152 }153 .addon-row { display: grid; grid-template-columns: 110px 1fr; gap: 22px; }154 .logo-ph {155 width: 110px; height: 110px; background:#E0E0E0; border:1px solid #BDBDBD;156 display:flex; align-items:center; justify-content:center; color:#757575; font-size:22px; text-align:center; padding:6px;157 }158 .addon-title { font-size: 36px; font-weight: 700; }159 .addon-sub { font-size: 28px; color: #757575; margin-top: 6px; }160 .addon-deal { color:#2e7d32; font-weight:800; font-size:32px; margin-top: 16px; }161 .addon-mrp { color:#9e9e9e; text-decoration:line-through; margin: 0 8px; }162 .addon-price { font-size: 34px; font-weight: 800; }163 164 /* Snackbar */165 .snackbar {166 position: absolute;167 left: 40px;168 right: 40px;169 bottom: 370px;170 background: #212121;171 color: #fff;172 padding: 28px;173 border-radius: 18px;174 box-shadow: 0 6px 18px rgba(0,0,0,0.3);175 display: flex; justify-content: space-between; align-items: center;176 font-size: 30px;177 }178 .snackbar .undo { color: #ffb300; font-weight: 800; margin-left: 20px; white-space: nowrap; }179 180 /* Price bar */181 .price-bar {182 position: absolute;183 left: 0; right: 0; bottom: 170px;184 background: #ffffff;185 border-top: 2px solid #e0e0e0;186 height: 140px;187 display: flex; align-items: center; justify-content: space-between;188 padding: 0 40px;189 }190 .price-left { display: flex; align-items: baseline; gap: 26px; }191 .price-left .mrp { font-size: 34px; }192 .price-final { font-size: 56px; font-weight: 800; }193 .info-circle {194 display:inline-flex; align-items:center; justify-content:center;195 width: 36px; height: 36px; border-radius:50%; border:2px solid #bdbdbd; color:#757575; font-size:24px;196 }197 .place-btn {198 background: #ffc107; color: #212121; font-weight: 800; font-size: 40px;199 border: none; padding: 26px 60px; border-radius: 16px;200 box-shadow: 0 2px 0 rgba(0,0,0,0.06) inset;201 }202 203 /* Bottom nav */204 .bottom-nav {205 position: absolute; left: 0; right: 0; bottom: 60px;206 height: 110px; background: #ffffff; border-top: 2px solid #e0e0e0;207 display: grid; grid-template-columns: repeat(5, 1fr);208 }209 .nav-item {210 display:flex; flex-direction: column; align-items: center; justify-content: center;211 gap: 6px; font-size: 24px; color: #616161; position: relative;212 }213 .nav-item svg { width: 42px; height: 42px; }214 .nav-item.active { color: #1e88e5; }215 .badge {216 position: absolute; top: 6px; right: 70px;217 background: #e53935; color:#fff; font-size:18px; font-weight:800;218 border-radius: 14px; padding: 2px 8px;219 }220 221 .gesture {222 position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);223 width: 260px; height: 10px; background: #cfcfcf; border-radius: 6px;224 }225</style>226</head>227<body>228<div id="render-target">229 <!-- Status bar -->230 <div class="status-bar">231 <div>10:34</div>232 <div class="status-icons">233 <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>234 <span class="dot"></span>235 <!-- simple icons -->236 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#616161" stroke-width="2"><path d="M4 8l8 5 8-5v9a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8z"/><path d="M4 8l8 5 8-5"/><path d="M4 8l8-5 8 5"/></svg>237 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#616161" stroke-width="2"><path d="M6 18L18 6M6 6l12 12"/></svg>238 <svg class="icon" viewBox="0 0 24 24" fill="#616161"><path d="M17 4h-3l-1-1h-2l-1 1H7v2h10z"/><path d="M7 8h10l-1 12H8z"/></svg>239 </div>240 </div>241 242 <div class="page">243 <div class="header">My Cart</div>244 245 <div class="address-row">246 <div class="label">Deliver to: <span class="value">New Delhi - 110004</span></div>247 <button class="btn-change">Change</button>248 </div>249 250 <div class="info-banner">2,00,000+ orders from New Delhi in the last 30 days</div>251 252 <div class="divider"></div>253 254 <div class="product">255 <div class="deal-pill">Hot Deal</div>256 257 <div class="prod-row">258 <div class="img-ph">[IMG: Book Cover]</div>259 <div>260 <div class="prod-title">Half Girlfriend</div>261 <div class="prod-sub">English, Paperback, Bhagat Chetan</div>262 263 <div class="rating-row">264 <div class="stars">265 <!-- 4 full stars + half -->266 <svg class="star" viewBox="0 0 24 24" fill="#2e7d32"><path d="M12 17.3l-5.9 3.5 1.6-6.7L2 9.8l6.9-.6L12 2.5l3.1 6.7 6.9.6-4.7 4.3 1.6 6.7z"/></svg>267 <svg class="star" viewBox="0 0 24 24" fill="#2e7d32"><path d="M12 17.3l-5.9 3.5 1.6-6.7L2 9.8l6.9-.6L12 2.5l3.1 6.7 6.9.6-4.7 4.3 1.6 6.7z"/></svg>268 <svg class="star" viewBox="0 0 24 24" fill="#2e7d32"><path d="M12 17.3l-5.9 3.5 1.6-6.7L2 9.8l6.9-.6L12 2.5l3.1 6.7 6.9.6-4.7 4.3 1.6 6.7z"/></svg>269 <svg class="star" viewBox="0 0 24 24" fill="#2e7d32"><path d="M12 17.3l-5.9 3.5 1.6-6.7L2 9.8l6.9-.6L12 2.5l3.1 6.7 6.9.6-4.7 4.3 1.6 6.7z"/></svg>270 <svg class="star" viewBox="0 0 24 24">271 <defs><linearGradient id="half"><stop offset="50%" stop-color="#2e7d32"/><stop offset="50%" stop-color="#e0e0e0"/></linearGradient></defs>272 <path d="M12 17.3l-5.9 3.5 1.6-6.7L2 9.8l6.9-.6L12 2.5l3.1 6.7 6.9.6-4.7 4.3 1.6 6.7z" fill="url(#half)"/>273 </svg>274 </div>275 <div class="rating-count">(60,691)</div>276 <div class="plus-badge">277 <svg width="18" height="18" viewBox="0 0 24 24" fill="#1976d2"><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></svg>278 Plus279 </div>280 </div>281 282 <div class="qty-row">283 <div class="qty-box">284 <span>Qty:</span>285 <span>1</span>286 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#616161" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>287 </div>288 <div class="price-row">289 <div class="off">−22%</div>290 <div class="mrp">₹195</div>291 <div class="price">₹152</div>292 </div>293 </div>294 295 <div class="offer">1 offer available</div>296 297 <div class="delivery">Delivery in 2 days, Sat | <span class="mrp">₹40</span> <span class="free">FREE Delivery</span></div>298 </div>299 </div>300 301 <div class="actions">302 <div class="action">303 <svg viewBox="0 0 24 24" fill="none" stroke="#616161" stroke-width="2"><path d="M3 6h18"/><path d="M8 6V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1"/><path d="M19 6l-1 14H6L5 6"/></svg>304 <span>Remove</span>305 </div>306 <div class="action">307 <svg viewBox="0 0 24 24" fill="none" stroke="#616161" stroke-width="2"><path d="M19 21H5V7h14z"/><path d="M12 3v4"/><path d="M9 3h6"/></svg>308 <span>Save for later</span>309 </div>310 <div class="action">311 <svg viewBox="0 0 24 24" fill="#616161"><path d="M11 21h2V9h-2v12zm.5-16l-4-4h9l-4 4z"/></svg>312 <span>Buy this now</span>313 </div>314 </div>315 </div>316 317 <div class="addon-header">318 <div class="left">319 <svg class="box-icon" viewBox="0 0 24 24" fill="none" stroke="#607d8b" stroke-width="2"><rect x="3" y="7" width="18" height="12" rx="2"/><path d="M7 7V3h10v4"/></svg>320 <span>Digital Suraksha for Rs 1000...</span>321 </div>322 <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#607d8b" stroke-width="2"><path d="M6 15l6-6 6 6"/></svg>323 </div>324 325 <div class="addon-card">326 <div class="addon-row">327 <div class="logo-ph">[IMG: Insurer Logo]</div>328 <div>329 <div class="addon-title">Digital Suraksha for Rs 10000 by...</div>330 <div class="addon-sub">1 Month</div>331 <div class="addon-deal">−50% <span class="addon-mrp">₹40</span> <span class="addon-price">₹20</span></div>332 <div class="addon-sub">Spoofing and more.</div>333 </div>334 </div>335 </div>336 337 </div>338 339 <!-- Snackbar -->340 <div class="snackbar">341 <div>Successfully removed Lakshita Rotation Dancing & Spinning Rolling Monkey with Light & Sound Toy for Kids from your cart</div>342 <div class="undo">Undo</div>343 </div>344 345 <!-- Price bar -->346 <div class="price-bar">347 <div class="price-left">348 <div class="mrp">195</div>349 <div class="price-final">152</div>350 <div class="info-circle">i</div>351 </div>352 <button class="place-btn">Place order</button>353 </div>354 355 <!-- Bottom navigation -->356 <div class="bottom-nav">357 <div class="nav-item">358 <svg viewBox="0 0 24 24" fill="none" stroke="#616161" stroke-width="2"><path d="M3 11l9-8 9 8v9a2 2 0 0 1-2 2h-4v-7H9v7H5a2 2 0 0 1-2-2z"/></svg>359 <div>Home</div>360 </div>361 <div class="nav-item">362 <svg viewBox="0 0 24 24" fill="none" stroke="#616161" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>363 <div>Categories</div>364 </div>365 <div class="nav-item">366 <svg viewBox="0 0 24 24" fill="none" stroke="#616161" stroke-width="2"><path d="M12 22a4 4 0 0 0 4-4H8a4 4 0 0 0 4 4z"/><path d="M6 8a6 6 0 1 1 12 0v6H6z"/></svg>367 <div>Notifications</div>368 </div>369 <div class="nav-item">370 <svg viewBox="0 0 24 24" fill="none" stroke="#616161" stroke-width="2"><circle cx="12" cy="7" r="4"/><path d="M4 21v-1a7 7 0 0 1 7-7h2a7 7 0 0 1 7 7v1"/></svg>371 <div>Account</div>372 </div>373 <div class="nav-item active">374 <span class="badge">1</span>375 <svg viewBox="0 0 24 24" fill="none" stroke="#1e88e5" stroke-width="2"><path d="M6 6h15l-1.5 9H7.5z"/><path d="M6 6L5 3H2"/><circle cx="9" cy="20" r="1.5" fill="#1e88e5"/><circle cx="18" cy="20" r="1.5" fill="#1e88e5"/></svg>376 <div>Cart</div>377 </div>378 </div>379 380 <div class="gesture"></div>381</div>382</body>383</html>