GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Flipkart Cart UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px; height: 2400px;9 position: relative; overflow: hidden;10 background: #ffffff;11 }12 13 /* Status bar */14 .status-bar {15 height: 72px;16 display: flex; align-items: center; justify-content: space-between;17 padding: 0 32px; color: #333; font-size: 30px;18 }19 .status-icons { display: flex; gap: 22px; align-items: center; color: #555; }20 .status-dot { width: 18px; height: 18px; background:#888; border-radius: 3px; }21 22 /* Header */23 .page-title { font-size: 46px; font-weight: 700; color: #111; padding: 10px 32px 0; }24 25 /* Tabs */26 .tabs { display: flex; gap: 60px; padding: 24px 32px 0; align-items: flex-end; }27 .tab { font-size: 34px; font-weight: 700; color: #7a7a7a; padding-bottom: 16px; }28 .tab.active { color: #3366ff; position: relative; }29 .tab.active::after {30 content: ""; position: absolute; left: 0; right: 0; bottom: 0;31 height: 8px; background: #3366ff; border-radius: 4px;32 }33 34 /* Address row */35 .address-row {36 display: flex; justify-content: space-between; align-items: center;37 padding: 22px 32px; border-top: 1px solid #eee; border-bottom: 1px solid #eee;38 font-size: 32px;39 }40 .address-row .hint { color: #4a4a4a; }41 .blue-btn {42 color: #3366ff; border: 2px solid #3366ff; border-radius: 14px;43 padding: 16px 24px; font-weight: 700; background: #eef3ff;44 }45 46 /* Product card */47 .card {48 padding: 24px 32px; border-bottom: 1px solid #e9e9e9;49 }50 .product {51 display: grid; grid-template-columns: 200px 1fr; gap: 24px;52 }53 .img-ph {54 width: 200px; height: 200px; background: #E0E0E0;55 border: 1px solid #BDBDBD; display: flex; justify-content: center; align-items: center;56 color: #757575; font-size: 26px; border-radius: 10px;57 }58 .p-title { font-size: 40px; font-weight: 700; color: #111; line-height: 1.2; }59 .p-sub { font-size: 28px; color: #666; margin-top: 6px; }60 61 .rating-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }62 .stars { display: flex; gap: 4px; }63 .stars svg { width: 30px; height: 30px; fill: #2E7D32; }64 .rating-count { color: #666; font-size: 28px; }65 66 .price-row { display: flex; align-items: baseline; gap: 18px; margin-top: 20px; }67 .discount { color: #2E7D32; font-size: 36px; font-weight: 800; }68 .old-price { color: #999; font-size: 30px; text-decoration: line-through; }69 .new-price { font-size: 44px; font-weight: 800; color: #111; }70 71 .offers { color: #2E7D32; font-size: 30px; margin-top: 16px; }72 .stock { color: #d32f2f; font-size: 30px; margin-top: 16px; }73 .delivery { color: #666; font-size: 30px; margin-top: 12px; }74 75 .action-row {76 display: flex; gap: 28px; margin-top: 26px;77 border-top: 1px solid #eee;78 padding-top: 22px;79 }80 .action-btn {81 display: flex; align-items: center; gap: 12px;82 color: #333; font-size: 32px; font-weight: 700;83 padding: 18px 20px; border: 1px solid #eee; border-radius: 14px; background: #fafafa;84 }85 .action-btn svg { width: 34px; height: 34px; fill: #777; }86 87 /* Digital Suraksha section */88 .suraksha-header {89 display: flex; align-items: center; justify-content: space-between;90 padding: 26px 32px; font-size: 36px; font-weight: 800; color: #222;91 }92 .suraksha-card {93 margin: 0 32px; border: 1px solid #e5e5e5; border-radius: 16px; padding: 24px; background: #fff;94 }95 .suraksha-top {96 display: grid; grid-template-columns: 120px 1fr 160px; gap: 20px; align-items: center;97 }98 .logo-ph {99 width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;100 display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 10px;101 font-size: 24px;102 }103 .suraksha-title { font-size: 34px; font-weight: 800; color: #111; }104 .duration { font-size: 28px; color: #555; }105 .offer-price { text-align: right; }106 .off { color: #2E7D32; font-size: 34px; font-weight: 800; }107 .cut { color: #999; text-decoration: line-through; font-size: 30px; margin-right: 8px; }108 .new { font-size: 36px; font-weight: 800; color: #111; }109 .suraksha-desc {110 margin-top: 18px; font-size: 30px; color: #333; line-height: 1.4;111 }112 .add-btn {113 margin-top: 20px; width: 280px; padding: 18px; background: #2874f0; color: #fff; font-weight: 800;114 border-radius: 12px; text-align: center; font-size: 32px;115 }116 117 /* Bottom order bar */118 .order-bar {119 position: absolute; left: 0; right: 0; bottom: 180px;120 display: flex; align-items: center; justify-content: space-between;121 padding: 24px 32px; background: #fff3cd; border-top: 1px solid #e7d79c;122 }123 .order-left { display: flex; align-items: baseline; gap: 18px; }124 .total-price { font-size: 46px; font-weight: 800; color: #111; }125 .view-link { font-size: 30px; color: #2874f0; text-decoration: underline; }126 .order-btn {127 background: #ffc107; color: #111; font-weight: 800; font-size: 36px;128 padding: 22px 40px; border-radius: 16px; border: 2px solid #f0b400;129 }130 131 /* Bottom navigation */132 .bottom-nav {133 position: absolute; left: 0; right: 0; bottom: 0;134 height: 120px; background: #fff; border-top: 1px solid #ddd;135 display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; text-align: center;136 font-size: 26px; color: #555;137 }138 .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }139 .nav-item svg { width: 40px; height: 40px; fill: #6b6b6b; }140 141 /* Floating elements */142 .blue-bubble {143 position: absolute; left: 50%; transform: translateX(-50%);144 bottom: 300px; background: #2874f0; color: #fff; padding: 26px 40px;145 border-radius: 18px; box-shadow: 0 8px 20px rgba(0,0,0,0.15); font-size: 34px; font-weight: 800;146 display: flex; align-items: center; gap: 22px;147 }148 .bubble-arrow {149 position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);150 width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent;151 border-top: 20px solid #2874f0;152 }153 .bubble-close {154 width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.25);155 display: flex; align-items: center; justify-content: center; font-weight: 900;156 }157 158 .cart-fab {159 position: absolute; right: 28px; bottom: 160px;160 width: 96px; height: 96px; background: #2874f0; border-radius: 20px; display: flex;161 align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,0.2);162 }163 .cart-fab svg { width: 48px; height: 48px; fill: #fff; }164 .badge {165 position: absolute; right: -6px; top: -6px; width: 40px; height: 40px; background: #ff3d3d;166 color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800;167 font-size: 26px; border: 3px solid #fff;168 }169</style>170</head>171<body>172<div id="render-target">173 174 <!-- Status bar -->175 <div class="status-bar">176 <div>9:26</div>177 <div class="status-icons">178 <div class="status-dot"></div>179 <div class="status-dot"></div>180 </div>181 </div>182 183 <!-- Title -->184 <div class="page-title">My Cart</div>185 186 <!-- Tabs -->187 <div class="tabs">188 <div class="tab active">Flipkart (1)</div>189 <div class="tab">Grocery</div>190 </div>191 192 <!-- Address row -->193 <div class="address-row">194 <div class="hint">From Saved Addresses</div>195 <div class="blue-btn">Enter Delivery Pincode</div>196 </div>197 198 <!-- Product card -->199 <div class="card">200 <div class="product">201 <div class="img-ph">[IMG: Product thumbnails]</div>202 <div>203 <div class="p-title">Knorr Sweet Corn Chicken Soup PA...</div>204 <div class="p-sub">Pack of 4, 168 g</div>205 206 <div class="rating-row">207 <div class="stars">208 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18.8 5.8 21l1.2-6.9-5-4.8 6.9-1z"/></svg>209 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18.8 5.8 21l1.2-6.9-5-4.8 6.9-1z"/></svg>210 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18.8 5.8 21l1.2-6.9-5-4.8 6.9-1z"/></svg>211 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18.8 5.8 21l1.2-6.9-5-4.8 6.9-1z"/></svg>212 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18.8 5.8 21l1.2-6.9-5-4.8 6.9-1z"/></svg>213 </div>214 <div class="rating-count">(1,866)</div>215 </div>216 217 <div class="price-row">218 <div class="discount">17% off</div>219 <div class="old-price">₹399</div>220 <div class="new-price">₹329</div>221 </div>222 223 <div class="offers">2 offers applied • 1 offer available</div>224 <div class="stock">Only 5 left</div>225 <div class="delivery">Delivery by Wed Dec 13 | ₹55</div>226 227 <div class="action-row">228 <div class="action-btn">229 <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3zm2 3h14l-1 11H6z"/></svg>230 <div>Remove</div>231 </div>232 <div class="action-btn">233 <svg viewBox="0 0 24 24"><path d="M6 2h12v20l-6-4-6 4z"/></svg>234 <div>Save for later</div>235 </div>236 <div class="action-btn">237 <svg viewBox="0 0 24 24"><path d="M13 3h-2v7H4v2h7v7h2v-7h7v-2h-7z"/></svg>238 <div>Buy this now</div>239 </div>240 </div>241 </div>242 </div>243 </div>244 245 <!-- Digital Suraksha -->246 <div class="suraksha-header">247 <div>Digital Suraksha for Rs 1000...</div>248 <svg viewBox="0 0 24 24" width="40" height="40"><path d="M7 10l5 5 5-5z" fill="#777"/></svg>249 </div>250 251 <div class="suraksha-card">252 <div class="suraksha-top">253 <div class="logo-ph">[IMG: Bajaj Allianz]</div>254 <div>255 <div class="suraksha-title">Digital Suraksha for Rs 10000 by...</div>256 <div class="duration">1 Month</div>257 </div>258 <div class="offer-price">259 <div class="off">50% off</div>260 <div><span class="cut">₹40</span><span class="new">₹20</span></div>261 </div>262 </div>263 <div class="suraksha-desc">264 Get your financial losses covered for online transaction frauds on all bank accounts,265 credit/debit cards, mobile wallets. Covers scam calls, OTP SMS frauds, UPI, netbanking,266 Cyber Attacks, Sim-swapping, Phishing, Spoofing and more.267 </div>268 <div class="add-btn">Add</div>269 </div>270 271 <!-- Order bar -->272 <div class="order-bar">273 <div class="order-left">274 <div class="total-price">₹384</div>275 <div class="view-link">View price details</div>276 </div>277 <div class="order-btn">Order</div>278 </div>279 280 <!-- Blue overlay bubble -->281 <div class="blue-bubble">282 <div>Explore More on Flipkart</div>283 <div class="bubble-close">×</div>284 <div class="bubble-arrow"></div>285 </div>286 287 <!-- Floating Cart FAB -->288 <div class="cart-fab">289 <svg viewBox="0 0 24 24"><path d="M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM6 6h15l-1.5 8H8l-2-8zM3 2h3l1 4H4z"/></svg>290 <div class="badge">1</div>291 </div>292 293 <!-- Bottom navigation -->294 <div class="bottom-nav">295 <div class="nav-item">296 <svg viewBox="0 0 24 24"><path d="M12 3l9 8h-3v9H6v-9H3z"/></svg>297 <div>Home</div>298 </div>299 <div class="nav-item">300 <svg viewBox="0 0 24 24"><path d="M4 4h7v7H4zm9 0h7v7h-7zM4 13h7v7H4zm9 7v-7h7v7z"/></svg>301 <div>Categories</div>302 </div>303 <div class="nav-item">304 <svg viewBox="0 0 24 24"><path d="M12 22c4-3 8-6 8-11a8 8 0 10-16 0c0 5 4 8 8 11zm0-9a3 3 0 110-6 3 3 0 010 6z"/></svg>305 <div>Notifications</div>306 </div>307 <div class="nav-item">308 <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-4 0-8 2-8 5v3h16v-3c0-3-4-5-8-5z"/></svg>309 <div>Account</div>310 </div>311 </div>312 313</div>314</body>315</html>