GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Cart UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color:#212121; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 }14 /* Scrollable content area */15 .screen {16 position: absolute; inset: 0; overflow-y: auto; padding-bottom: 240px;17 }18 .statusbar {19 height: 90px; padding: 0 36px; display:flex; align-items:center; justify-content: space-between; color:#333;20 font-size: 34px;21 }22 .status-icons { display:flex; gap:22px; align-items:center; opacity:0.8; }23 .dot { width:10px; height:10px; background:#666; border-radius:50%; display:inline-block; margin-left:8px; }24 .divider { height: 14px; background: #efefef; width:100%; }25 .section { padding: 36px; }26 h1.title { font-size: 64px; font-weight: 600; margin: 24px 0 8px; }27 .address-row {28 display:flex; align-items:center; justify-content: space-between; margin-top: 12px;29 font-size: 38px;30 }31 .address-row b { font-weight:700; }32 .btn-outline {33 padding: 20px 32px; border: 2px solid #dadada; border-radius: 16px; color:#1976d2; font-weight:600; background:#fff; font-size:36px;34 }35 .info-banner {36 margin-top: 24px; padding: 26px 28px; border:1px solid #c9daf5; background:#eaf3ff; color:#3b5ea8; border-radius: 14px;37 font-size: 34px;38 }39 40 /* Product item */41 .item {42 padding: 28px 36px;43 background:#fff;44 }45 .item-row { display:flex; gap:28px; }46 .thumb {47 width: 210px; height: 210px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius: 8px;48 display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px; position: relative;49 }50 .pill {51 position:absolute; top:-18px; left:0;52 background:#e8f5e9; color:#1b5e20; border-radius:10px; padding:10px 16px; font-size:30px; font-weight:700;53 }54 .pill.hot { background:#e8f5e9; color:#1b5e20; }55 .details { flex:1; min-width:0; }56 .name { font-size:44px; font-weight:600; color:#222; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }57 .variant { color:#777; font-size:32px; margin-top:6px; }58 .rating-row { display:flex; align-items:center; gap:14px; margin:12px 0; }59 .stars { display:flex; gap:6px; }60 .stars svg { width:36px; height:36px; }61 .plus { color:#1976d2; font-weight:700; font-size:32px; opacity:0.9; }62 .price-row { display:flex; align-items:baseline; gap:18px; margin:10px 0 6px; }63 .off { color:#1b5e20; font-weight:700; font-size:46px; }64 .mrp { color:#777; text-decoration: line-through; font-size:36px; }65 .sale { font-size:54px; font-weight:800; }66 .offer { color:#1b5e20; font-weight:700; font-size:34px; margin-top: 6px; }67 .delivery { color:#555; font-size:34px; margin-top: 14px; }68 .delivery .free { color:#1b5e20; font-weight:700; }69 .qty-row { display:flex; align-items:center; gap:16px; margin: 18px 0; }70 .qty {71 border:2px solid #d9d9d9; border-radius:12px; padding:16px 22px; font-size:34px; color:#333; width: 180px; text-align:center;72 display:flex; align-items:center; justify-content:space-between;73 }74 75 .action-bar {76 display:flex; border-top:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6; margin-top:26px;77 }78 .action {79 flex:1; padding:28px; display:flex; align-items:center; justify-content:center; gap:16px; font-size:36px; color:#444;80 background:#fafafa;81 }82 .action + .action { border-left:1px solid #e6e6e6; }83 .action svg { width:36px; height:36px; opacity:0.7; }84 85 /* Sticky bottom summary + nav */86 .summary-bar {87 position:absolute; left:0; right:0; bottom:140px; background:#fff; border-top:1px solid #e5e5e5;88 display:flex; align-items:center; justify-content:space-between; padding:24px 36px;89 }90 .summary-left { display:flex; flex-direction:column; gap:8px; }91 .summary-left .striked { color:#9e9e9e; text-decoration: line-through; font-size:34px; }92 .summary-left .total { font-size:64px; font-weight:800; }93 .place-btn {94 background:#ffcc00; color:#111; font-weight:800; font-size:42px; border:none; border-radius:18px; padding:28px 44px;95 box-shadow: 0 2px 0 rgba(0,0,0,0.1) inset;96 }97 98 .bottom-nav {99 position:absolute; left:0; right:0; bottom:0; height:140px; background:#fff; border-top:1px solid #e5e5e5;100 display:flex; align-items:center; justify-content:space-around;101 }102 .tab { display:flex; flex-direction:column; align-items:center; gap:8px; font-size:26px; color:#555; }103 .tab.active { color:#1976d2; }104 .tab svg { width:44px; height:44px; }105 .badge {106 position:absolute; right:-6px; top:-6px; background:#e53935; color:#fff; font-size:22px; min-width:30px; height:30px; border-radius:16px; display:flex; align-items:center; justify-content:center;107 padding: 0 8px;108 }109 .cart-icon { position: relative; }110 111 /* Simple helpers */112 .muted { color:#777; }113</style>114</head>115<body>116<div id="render-target">117 <div class="screen">118 <!-- Status Bar -->119 <div class="statusbar">120 <div>10:33</div>121 <div class="status-icons">122 <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>123 <span style="margin-left:8px;">•</span>124 <svg viewBox="0 0 24 24" width="32" height="32"><path fill="#666" d="M4 10v4h2v-4H4zm3-3v10h2V7H7zm3 5v5h2v-5h-2zm3-8v13h2V4h-2zm3 3v10h2V7h-2z"/></svg>125 <svg viewBox="0 0 24 24" width="32" height="32"><path fill="#666" d="M12 22c4.97 0 9-4.03 9-9h-2a7 7 0 1 1-7-7V3L17 7l-5 4V8a5 5 0 1 0 5 5h2c0 3.87-3.13 7-7 7z"/></svg>126 <svg viewBox="0 0 24 24" width="32" height="32"><path fill="#666" d="M16 7h-1V6a3 3 0 1 0-6 0v1H8a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zm-7-1a2 2 0 1 1 4 0v1h-4V6zm8 12H7V9h10v9z"/></svg>127 </div>128 </div>129 130 <div class="section">131 <h1 class="title">My Cart</h1>132 133 <div class="address-row">134 <div>Deliver to: <b>New Delhi - 110004</b></div>135 <button class="btn-outline">Change</button>136 </div>137 138 <div class="info-banner">2,00,000+ orders from New Delhi in the last 30 days</div>139 </div>140 141 <div class="divider"></div>142 143 <!-- Item 1 -->144 <div class="item">145 <div class="item-row">146 <div class="thumb">147 <div class="pill">FREE Delivery</div>148 [IMG: Toy Robot]149 </div>150 <div class="details">151 <div class="name">Lakshita Rotation Dancing & Spinnin..</div>152 <div class="variant">Blue</div>153 <div class="rating-row">154 <div class="stars">155 <svg viewBox="0 0 24 24"><polygon fill="#2e7d32" points="12,2 15,9 23,9 17,14 19,22 12,18 5,22 7,14 1,9 9,9"/></svg>156 <svg viewBox="0 0 24 24"><polygon fill="#2e7d32" points="12,2 15,9 23,9 17,14 19,22 12,18 5,22 7,14 1,9 9,9"/></svg>157 <svg viewBox="0 0 24 24"><polygon fill="#2e7d32" points="12,2 15,9 23,9 17,14 19,22 12,18 5,22 7,14 1,9 9,9"/></svg>158 <svg viewBox="0 0 24 24"><polygon fill="#2e7d32" points="12,2 15,9 23,9 17,14 19,22 12,18 5,22 7,14 1,9 9,9"/></svg>159 <svg viewBox="0 0 24 24"><polygon fill="#cfcfcf" points="12,2 15,9 23,9 17,14 19,22 12,18 5,22 7,14 1,9 9,9"/></svg>160 </div>161 <div class="muted">(59)</div>162 <div class="plus">Plus F‑ASSURED</div>163 </div>164 165 <div class="qty-row">166 <div class="qty">167 <span>Qty: 1</span>168 <svg viewBox="0 0 24 24"><path fill="#666" d="M7 10l5 5 5-5z"/></svg>169 </div>170 </div>171 172 <div class="price-row">173 <div class="off">−70%</div>174 <div class="mrp">₹999</div>175 <div class="sale">₹299</div>176 </div>177 <div class="offer">1 Offer Available</div>178 <div class="delivery">Delivery in 2 days, Sat | <span class="mrp">₹40</span> <span class="free">FREE Delivery</span></div>179 </div>180 </div>181 182 <div class="action-bar">183 <div class="action">184 <svg viewBox="0 0 24 24"><path fill="#666" d="M16 9v10H8V9H5l7-5 7 5h-3z"/></svg>185 <span>Remove</span>186 </div>187 <div class="action">188 <svg viewBox="0 0 24 24"><path fill="#666" d="M17 3H7v2h10V3zm3 6H4v2h16V9zM7 19h10v-2H7v2z"/></svg>189 <span>Save for later</span>190 </div>191 <div class="action">192 <svg viewBox="0 0 24 24"><path fill="#666" d="M7 13h10L12 3zM5 21h14v-2H5z"/></svg>193 <span>Buy this now</span>194 </div>195 </div>196 </div>197 198 <!-- Item 2 -->199 <div class="item">200 <div class="item-row">201 <div class="thumb">202 <div class="pill hot">Hot Deal</div>203 [IMG: Book Cover]204 </div>205 <div class="details">206 <div class="name">Half Girlfriend</div>207 <div class="variant">English, Paperback, Bhagat Chetan</div>208 <div class="rating-row">209 <div class="stars">210 <svg viewBox="0 0 24 24"><polygon fill="#2e7d32" points="12,2 15,9 23,9 17,14 19,22 12,18 5,22 7,14 1,9 9,9"/></svg>211 <svg viewBox="0 0 24 24"><polygon fill="#2e7d32" points="12,2 15,9 23,9 17,14 19,22 12,18 5,22 7,14 1,9 9,9"/></svg>212 <svg viewBox="0 0 24 24"><polygon fill="#2e7d32" points="12,2 15,9 23,9 17,14 19,22 12,18 5,22 7,14 1,9 9,9"/></svg>213 <svg viewBox="0 0 24 24"><polygon fill="#2e7d32" points="12,2 15,9 23,9 17,14 19,22 12,18 5,22 7,14 1,9 9,9"/></svg>214 <svg viewBox="0 0 24 24"><polygon fill="#a5d6a7" points="12,2 15,9 23,9 17,14 19,22 12,18 5,22 7,14 1,9 9,9"/></svg>215 </div>216 <div class="muted">(60,691)</div>217 <div class="plus">Plus F‑ASSURED</div>218 </div>219 220 <div class="qty-row">221 <div class="qty">222 <span>Qty: 1</span>223 <svg viewBox="0 0 24 24"><path fill="#666" d="M7 10l5 5 5-5z"/></svg>224 </div>225 </div>226 227 <div class="price-row">228 <div class="off">−22%</div>229 <div class="mrp">₹195</div>230 <div class="sale">₹152</div>231 </div>232 <div class="offer">1 Offer Available</div>233 <div class="delivery">Delivery in 2 days, Sat | <span class="mrp">₹40</span> <span class="free">FREE Delivery</span></div>234 </div>235 </div>236 237 <div class="action-bar">238 <div class="action">239 <svg viewBox="0 0 24 24"><path fill="#666" d="M16 9v10H8V9H5l7-5 7 5h-3z"/></svg>240 <span>Remove</span>241 </div>242 <div class="action">243 <svg viewBox="0 0 24 24"><path fill="#666" d="M17 3H7v2h10V3zm3 6H4v2h16V9zM7 19h10v-2H7v2z"/></svg>244 <span>Save for later</span>245 </div>246 <div class="action">247 <svg viewBox="0 0 24 24"><path fill="#666" d="M7 13h10L12 3zM5 21h14v-2H5z"/></svg>248 <span>Buy this now</span>249 </div>250 </div>251 </div>252 253 <!-- Summary bar -->254 <div class="summary-bar">255 <div class="summary-left">256 <div class="striked">1,194</div>257 <div class="total">451</div>258 </div>259 <button class="place-btn">Place order</button>260 </div>261 262 <!-- Spacer for bottom nav -->263 <div style="height:140px;"></div>264 </div>265 266 <!-- Bottom navigation -->267 <div class="bottom-nav">268 <div class="tab">269 <svg viewBox="0 0 24 24"><path fill="#666" d="M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3z"/></svg>270 <div>Home</div>271 </div>272 <div class="tab">273 <svg viewBox="0 0 24 24"><circle cx="6" cy="6" r="3" fill="#666"/><circle cx="18" cy="6" r="3" fill="#666"/><circle cx="6" cy="18" r="3" fill="#666"/><circle cx="18" cy="18" r="3" fill="#666"/></svg>274 <div>Categories</div>275 </div>276 <div class="tab">277 <svg viewBox="0 0 24 24"><path fill="#666" d="M12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2zm6-6V9a6 6 0 1 0-12 0v7l-2 2v1h16v-1l-2-2z"/></svg>278 <div>Notifications</div>279 </div>280 <div class="tab">281 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="#666"/><path fill="#666" d="M4 20c0-4 4-6 8-6s8 2 8 6H4z"/></svg>282 <div>Account</div>283 </div>284 <div class="tab active">285 <div class="cart-icon">286 <svg viewBox="0 0 24 24"><path fill="#1976d2" d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm8 0c-1.1 0-1.99.9-1.99 2S13.9 22 15 22s2-.9 2-2-.9-2-2-2zM7.2 6l.8 2h9.4l-1.2 6H8.6l-2.2-8H3V4h3.4l.8 2z"/></svg>287 <span class="badge">2</span>288 </div>289 <div>Cart</div>290 </div>291 </div>292</div>293</body>294</html>