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; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #f6f7f8;15 border-radius: 24px;16 box-shadow: 0 2px 8px rgba(0,0,0,0.08);17 font-family: Arial, Helvetica, sans-serif;18 color: #111;19 }20 21 /* Header / Search */22 .top-gradient {23 position: relative;24 height: 280px;25 background: linear-gradient(90deg, #98e6da 0%, #8adbd1 50%, #82d3cc 100%);26 }27 .status-bar {28 position: absolute;29 top: 16px;30 left: 32px;31 right: 32px;32 display: flex;33 justify-content: space-between;34 align-items: center;35 color: #1a2b2b;36 font-size: 34px;37 opacity: 0.9;38 }39 .status-icons { display: flex; gap: 18px; align-items: center; }40 .search-bar {41 position: absolute;42 left: 36px;43 right: 36px;44 bottom: 20px;45 height: 110px;46 background: #fff;47 border-radius: 28px;48 box-shadow: 0 6px 14px rgba(0,0,0,0.12);49 display: flex;50 align-items: center;51 padding: 0 24px;52 gap: 22px;53 }54 .icon-btn {55 width: 72px;56 height: 72px;57 border-radius: 18px;58 display: grid;59 place-items: center;60 color: #5f6e6e;61 }62 .search-text {63 flex: 1;64 color: #333;65 font-size: 40px;66 }67 68 /* Info banner */69 .info-banner {70 margin: 24px 36px 0 36px;71 background: #fff;72 border: 4px solid #0fabbc;73 border-radius: 24px;74 height: 120px;75 display: flex;76 align-items: center;77 padding: 0 28px;78 gap: 22px;79 }80 .info-banner span {81 font-size: 36px;82 color: #202a2a;83 font-weight: 600;84 }85 86 /* Subtotal and CTA */87 .subtotal {88 margin: 28px 36px 0 36px;89 }90 .subtotal .label {91 font-size: 42px;92 color: #444;93 margin-bottom: 8px;94 }95 .subtotal .value {96 font-size: 58px;97 font-weight: 800;98 letter-spacing: -0.5px;99 }100 .emi {101 font-size: 32px; color: #666;102 }103 .emi .link { color: #007185; }104 .cta {105 margin: 24px 36px;106 height: 120px;107 background: #ffd814;108 border-radius: 60px;109 display: flex;110 align-items: center;111 justify-content: center;112 font-size: 40px;113 font-weight: 700;114 color: #333;115 }116 117 /* Gift checkbox */118 .gift-row {119 margin: 12px 36px;120 display: flex;121 align-items: center;122 gap: 20px;123 color: #333;124 font-size: 34px;125 }126 .checkbox {127 width: 52px; height: 52px;128 border: 2px solid #c7c7c7;129 border-radius: 10px;130 background: #fff;131 }132 .divider {133 height: 2px; background: #e3e3e3; margin: 24px 36px;134 }135 .link {136 color: #007185;137 font-size: 34px;138 margin: 0 36px 12px 36px;139 }140 141 /* Product Card */142 .card {143 position: relative;144 margin: 20px 36px;145 background: #fff;146 border-radius: 24px;147 box-shadow: 0 2px 6px rgba(0,0,0,0.06);148 padding: 24px;149 }150 .select-badge {151 position: absolute;152 top: -18px;153 left: -18px;154 width: 72px;155 height: 72px;156 background: #0ca9a9;157 border-radius: 14px;158 display: grid;159 place-items: center;160 box-shadow: 0 2px 6px rgba(0,0,0,0.1);161 }162 .card-row {163 display: flex;164 gap: 28px;165 }166 .img-placeholder {167 width: 360px;168 height: 260px;169 background: #E0E0E0;170 border: 1px solid #BDBDBD;171 border-radius: 16px;172 display: flex;173 justify-content: center;174 align-items: center;175 color: #757575;176 font-size: 28px;177 text-align: center;178 padding: 10px;179 }180 .card-content {181 flex: 1;182 }183 .title {184 font-size: 40px;185 font-weight: 700;186 line-height: 1.25;187 margin-bottom: 10px;188 color: #111;189 }190 .price {191 font-size: 54px;192 font-weight: 800;193 margin: 6px 0;194 }195 .stock { color: #007600; font-size: 32px; margin: 4px 0; }196 .sold-by { font-size: 32px; color: #555; }197 .sold-by a { color: #007185; text-decoration: none; }198 199 .controls {200 margin-top: 20px;201 display: flex;202 align-items: center;203 gap: 16px;204 flex-wrap: wrap;205 }206 .pill {207 height: 90px;208 padding: 0 30px;209 border-radius: 18px;210 background: #fff;211 border: 2px solid #e2e2e2;212 display: flex;213 align-items: center;214 gap: 18px;215 font-size: 34px;216 color: #333;217 box-shadow: 0 2px 5px rgba(0,0,0,0.04);218 }219 .qty {220 height: 90px;221 border-radius: 18px;222 display: flex;223 align-items: center;224 overflow: hidden;225 border: 2px solid #e2e2e2;226 }227 .qty .btn {228 width: 90px; height: 90px; display: grid; place-items: center; background: #fff; color: #444;229 }230 .qty .count { width: 120px; display: grid; place-items: center; font-size: 34px; font-weight: 700; }231 .secondary {232 margin-top: 18px;233 height: 90px;234 border-radius: 18px;235 border: 2px solid #e2e2e2;236 display: flex;237 align-items: center;238 justify-content: center;239 font-size: 34px;240 color: #333;241 background: #fff;242 width: 440px;243 }244 245 /* Second card specifics */246 .note { color: #b12704; font-size: 32px; margin-top: 8px; }247 .sub-links { font-size: 30px; color: #007185; margin-top: 6px; }248 249 /* Bottom Navigation */250 .bottom-nav {251 position: absolute;252 bottom: 0;253 left: 0;254 width: 1080px;255 height: 160px;256 background: #ffffff;257 box-shadow: 0 -6px 14px rgba(0,0,0,0.12);258 display: flex;259 justify-content: space-around;260 align-items: center;261 z-index: 5;262 }263 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #3a4747; }264 .nav-item .label { font-size: 28px; }265 .nav-item.active { color: #0ca9a9; font-weight: 700; }266 .badge {267 position: absolute;268 top: -8px;269 right: -10px;270 background: #0ca9a9;271 color: #fff;272 font-size: 24px;273 width: 36px;274 height: 36px;275 border-radius: 18px;276 display: grid;277 place-items: center;278 }279 /* Simple helpers */280 svg { width: 44px; height: 44px; }281 .sm { width: 34px; height: 34px; }282</style>283</head>284<body>285<div id="render-target">286 287 <!-- Header -->288 <div class="top-gradient">289 <div class="status-bar">290 <div>11:15</div>291 <div class="status-icons">292 <!-- simple battery/wifi dots -->293 <svg class="sm" viewBox="0 0 24 24"><circle cx="4" cy="12" r="2" fill="#2d3d3d"/><circle cx="12" cy="12" r="2" fill="#2d3d3d"/><circle cx="20" cy="12" r="2" fill="#2d3d3d"/></svg>294 </div>295 </div>296 <div class="search-bar">297 <div class="icon-btn">298 <svg viewBox="0 0 24 24" fill="none" stroke="#4b5b5b" stroke-width="2">299 <circle cx="10" cy="10" r="6"></circle>300 <line x1="15" y1="15" x2="22" y2="22"></line>301 </svg>302 </div>303 <div class="search-text">electric lawn mower</div>304 <div class="icon-btn">305 <!-- barcode/camera -->306 <svg viewBox="0 0 24 24" fill="none" stroke="#4b5b5b" stroke-width="2">307 <rect x="3" y="6" width="18" height="12" rx="2"></rect>308 <line x1="7" y1="8" x2="7" y2="16"></line>309 <line x1="11" y1="8" x2="11" y2="16"></line>310 <line x1="15" y1="8" x2="15" y2="16"></line>311 </svg>312 </div>313 <div class="icon-btn">314 <svg viewBox="0 0 24 24" fill="none" stroke="#4b5b5b" stroke-width="2">315 <path d="M12 3a6 6 0 0 0-6 6v4l-2 2h16l-2-2V9a6 6 0 0 0-6-6z"></path>316 </svg>317 </div>318 <div class="icon-btn">319 <!-- QR -->320 <svg viewBox="0 0 24 24" fill="none" stroke="#4b5b5b" stroke-width="2">321 <rect x="3" y="3" width="6" height="6"></rect>322 <rect x="15" y="3" width="6" height="6"></rect>323 <rect x="3" y="15" width="6" height="6"></rect>324 <path d="M15 15h3v3M18 18h3v3"></path>325 </svg>326 </div>327 </div>328 </div>329 330 <!-- Info banner -->331 <div class="info-banner">332 <span>Messages about items in your cart</span>333 <div style="margin-left:auto;">334 <svg viewBox="0 0 24 24" fill="none" stroke="#0ca9a9" stroke-width="3">335 <polyline points="8,4 16,12 8,20"></polyline>336 </svg>337 </div>338 </div>339 340 <!-- Subtotal -->341 <div class="subtotal">342 <div class="label">Subtotal</div>343 <div class="value">₹25,162<span style="font-size:34px; font-weight:700;">00</span></div>344 <div class="emi">EMI Available <span class="link">Details</span></div>345 </div>346 347 <!-- CTA -->348 <div class="cta">Proceed to Buy (2 items)</div>349 350 <!-- Gift checkbox -->351 <div class="gift-row">352 <div class="checkbox"></div>353 <div>Send as a gift. Include custom message</div>354 </div>355 356 <div class="divider"></div>357 <div class="link">Deselect all items</div>358 359 <!-- Card 1 -->360 <div class="card">361 <div class="select-badge">362 <svg viewBox="0 0 24 24" fill="#fff">363 <path d="M9 16l-4-4 2-2 2 2 6-6 2 2-8 8z"></path>364 </svg>365 </div>366 <div class="card-row">367 <div class="img-placeholder">[IMG: Makita Electric Lawn Mower]</div>368 <div class="card-content">369 <div class="title">Makita ELM4121 Electric Lawn Mower 1600W</div>370 <div class="price">₹22,299<span style="font-size:30px; font-weight:700;">00</span></div>371 <div class="stock">In stock</div>372 <div class="sold-by">Sold by <a href="#">Diplomat</a></div>373 374 <div class="controls">375 <div class="pill">376 <svg viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">377 <path d="M6 6h12v12H6z"></path>378 <path d="M9 9h6v6H9z"></path>379 </svg>380 <span> </span>381 </div>382 <div class="qty">383 <div class="btn">384 <svg viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">385 <line x1="5" y1="12" x2="19" y2="12"></line>386 </svg>387 </div>388 <div class="count">1</div>389 <div class="btn">390 <svg viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">391 <line x1="12" y1="5" x2="12" y2="19"></line>392 <line x1="5" y1="12" x2="19" y2="12"></line>393 </svg>394 </div>395 </div>396 <div class="pill">Delete</div>397 <div class="pill">Save for later</div>398 </div>399 400 <div class="secondary">See more like this</div>401 </div>402 </div>403 </div>404 405 <!-- Card 2 -->406 <div class="card">407 <div class="select-badge">408 <svg viewBox="0 0 24 24" fill="#fff">409 <path d="M9 16l-4-4 2-2 2 2 6-6 2 2-8 8z"></path>410 </svg>411 </div>412 <div class="card-row">413 <div class="img-placeholder">[IMG: Wall-Mounted Folding Dining Table Set]</div>414 <div class="card-content">415 <div class="title">Kawachi Fold Down 3 Seater Wall Mounted Folding Breakfast Dini...</div>416 <div class="price">₹2,863<span style="font-size:30px; font-weight:700;">00</span></div>417 <div class="note">Only 1 left. Order now.</div>418 <div class="sub-links">Buy more Save more, Get upto ₹60 cashback ›</div>419 </div>420 </div>421 </div>422 423 <!-- Bottom Navigation -->424 <div class="bottom-nav">425 <div class="nav-item">426 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">427 <path d="M3 11l9-8 9 8v9H3z"></path>428 <path d="M9 21V12h6v9"></path>429 </svg>430 <div class="label">Home</div>431 </div>432 <div class="nav-item">433 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">434 <circle cx="12" cy="8" r="4"></circle>435 <path d="M4 21c2-4 6-6 8-6s6 2 8 6"></path>436 </svg>437 <div class="label">You</div>438 </div>439 <div class="nav-item">440 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">441 <path d="M4 6h16M4 12h16M4 18h16"></path>442 </svg>443 <div class="label">More</div>444 </div>445 <div class="nav-item active" style="position: relative;">446 <div class="badge">2</div>447 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">448 <path d="M6 6h15l-2 9H7L6 6z"></path>449 <circle cx="9" cy="20" r="2"></circle>450 <circle cx="18" cy="20" r="2"></circle>451 </svg>452 <div class="label">Cart</div>453 </div>454 <div class="nav-item">455 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">456 <path d="M4 6h16M4 12h16M4 18h16"></path>457 </svg>458 <div class="label">Menu</div>459 </div>460 </div>461 462</div>463</body>464</html>