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 - Saved for later</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 color: #111;17 }18 /* Header */19 .header {20 width: 100%;21 height: 230px;22 background: linear-gradient(180deg, #95d9d0 0%, #a9e4d7 100%);23 box-sizing: border-box;24 padding: 24px 32px 16px 32px;25 }26 .status-row {27 display: flex;28 align-items: center;29 height: 40px;30 color: #0d3a36;31 font-weight: 600;32 font-size: 32px;33 }34 .status-icons {35 display: flex;36 align-items: center;37 margin-left: 16px;38 gap: 16px;39 }40 .dot-icon {41 width: 24px; height: 24px; background: rgba(0,0,0,0.15); border-radius: 50%;42 }43 .search-bar {44 margin-top: 24px;45 background: #fff;46 border-radius: 20px;47 box-shadow: 0 4px 8px rgba(0,0,0,0.12);48 height: 96px;49 display: flex;50 align-items: center;51 padding: 0 28px;52 gap: 24px;53 }54 .search-input {55 flex: 1;56 font-size: 40px;57 color: #333;58 }59 .search-placeholder { color: #777; }60 .icon-btn {61 width: 64px; height: 64px; border-radius: 16px; background: #f2f2f2; display: flex; align-items: center; justify-content: center;62 }63 .divider {64 width: 100%;65 height: 18px;66 background: #f2f2f2;67 border-top: 1px solid #e5e5e5;68 border-bottom: 1px solid #e5e5e5;69 }70 /* Page content */71 .content {72 padding: 24px 24px 180px 24px;73 box-sizing: border-box;74 }75 .section-title {76 font-size: 56px;77 font-weight: 700;78 margin: 16px 8px 24px 8px;79 }80 .card {81 background: #fff;82 border-radius: 20px;83 box-shadow: 0 6px 14px rgba(0,0,0,0.06);84 border: 1px solid #eee;85 padding: 24px;86 margin: 0 8px 24px 8px;87 }88 .product-row {89 display: flex;90 gap: 24px;91 }92 .img-ph {93 width: 280px;94 height: 360px;95 background: #E0E0E0;96 border: 1px solid #BDBDBD;97 border-radius: 12px;98 display: flex;99 align-items: center;100 justify-content: center;101 color: #757575;102 text-align: center;103 font-size: 30px;104 padding: 12px;105 box-sizing: border-box;106 }107 .prod-info {108 flex: 1;109 }110 .prod-title {111 font-size: 44px;112 font-weight: 700;113 line-height: 1.25;114 margin: 8px 0 8px 0;115 }116 .meta { color: #666; font-size: 32px; margin-bottom: 12px; }117 .badges { display: flex; gap: 12px; margin: 8px 0 12px; }118 .badge-red {119 background: #d32f2f; color: #fff; border-radius: 12px; font-weight: 700; font-size: 28px;120 padding: 10px 16px;121 }122 .price-line { display: flex; align-items: baseline; gap: 16px; margin: 8px 0 8px; }123 .price {124 font-size: 72px; font-weight: 800; color: #111;125 }126 .sup {127 font-size: 36px; vertical-align: super; font-weight: 700;128 }129 .mrp { color: #777; font-size: 36px; text-decoration: line-through; }130 .subtle { color: #666; font-size: 32px; margin: 6px 0; }131 .instock { color: #1a7f37; font-size: 36px; font-weight: 700; margin-top: 8px; }132 .details { font-size: 36px; margin-top: 6px; }133 .details strong { font-weight: 700; }134 .link { color: #007185; font-size: 36px; margin-top: 8px; }135 .action-row {136 display: flex; gap: 24px; margin-top: 24px;137 }138 .pill-btn {139 flex: 1;140 background: #fff;141 border: 1px solid #ddd;142 border-radius: 22px;143 height: 96px;144 display: flex; align-items: center; justify-content: center;145 font-size: 40px; color: #333;146 box-shadow: 0 6px 10px rgba(0,0,0,0.06);147 }148 149 /* Frequently bought section */150 .grey-section {151 background: #f8f8f8;152 border: 1px solid #e9e9e9;153 border-radius: 20px;154 padding: 24px;155 margin: 24px 8px;156 }157 .sub-title {158 font-size: 52px; font-weight: 800; margin: 8px;159 }160 .carousel {161 display: flex;162 gap: 24px;163 overflow-x: auto;164 padding: 12px 8px 24px;165 }166 .item-card {167 min-width: 320px;168 max-width: 320px;169 }170 .item-img {171 width: 320px; height: 320px;172 background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 12px;173 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; text-align: center; padding: 8px; box-sizing: border-box;174 }175 .item-title { font-size: 36px; margin: 12px 0 8px; line-height: 1.25; color: #111; }176 .rating-row { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; }177 .rating-count { color: #555; font-size: 32px; }178 .price-small { color: #B12704; font-size: 40px; font-weight: 700; margin: 8px 0; }179 .cta-yellow {180 background: #ffd814; border: 1px solid #f1c40f; color: #111; border-radius: 40px; height: 88px; display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 700;181 box-shadow: 0 4px 8px rgba(0,0,0,0.08);182 }183 .cta-white {184 background: #fff; border: 1px solid #ddd; color: #111; border-radius: 24px; height: 88px; display: flex; align-items: center; justify-content: center; font-size: 34px; box-shadow: 0 4px 8px rgba(0,0,0,0.06);185 }186 187 /* Bottom nav bar */188 .bottom-nav {189 position: absolute;190 left: 0; right: 0; bottom: 72px;191 height: 160px;192 background: #fff;193 border-top: 1px solid #e5e5e5;194 display: flex; align-items: center; justify-content: space-around;195 }196 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #333; font-size: 32px; }197 .nav-item.active { color: #0fb2a5; font-weight: 700; }198 .gesture {199 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);200 width: 360px; height: 12px; background: #cfcfcf; border-radius: 6px;201 }202 203 /* SVG helpers */204 .svg-24 { width: 48px; height: 48px; }205 .svg-32 { width: 64px; height: 64px; }206 .star { fill: #ff9900; }207 .star-outline { fill: none; stroke: #ff9900; stroke-width: 2; }208</style>209</head>210<body>211<div id="render-target">212 <!-- Header -->213 <div class="header">214 <div class="status-row">215 11:14216 <div class="status-icons">217 <div class="dot-icon"></div>218 <div class="dot-icon"></div>219 <div class="dot-icon"></div>220 <div class="dot-icon"></div>221 <div style="width:24px;height:24px;">•</div>222 <div class="dot-icon"></div>223 <div class="dot-icon"></div>224 </div>225 </div>226 <div class="search-bar">227 <svg class="svg-32" viewBox="0 0 24 24">228 <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 5 1.5-1.5-5-5zM9.5 14A4.5 4.5 0 119.5 5a4.5 4.5 0 010 9z" fill="#666"></path>229 </svg>230 <div class="search-input"><span class="search-placeholder">winter clothes for men</span></div>231 <div class="icon-btn">232 <svg class="svg-24" viewBox="0 0 24 24">233 <path d="M7 4h10l2 3h2v13H3V7h2l2-3zm5 3a5 5 0 100 10 5 5 0 000-10zm0 2a3 3 0 110 6 3 3 0 010-6z" fill="#666"/>234 </svg>235 </div>236 </div>237 </div>238 <div class="divider"></div>239 240 <!-- Content -->241 <div class="content">242 <div class="section-title">Saved for later (1 item)</div>243 244 <div class="card">245 <div class="product-row">246 <div class="img-ph">[IMG: Olive Green Hooded Sweatshirt]</div>247 <div class="prod-info">248 <div class="prod-title">NOBERO Unisex-Adult Cotton Neck Hooded Sweatshirt (1M-T...)</div>249 <div class="meta">50+ bought in past month</div>250 <div class="badges">251 <div class="badge-red">53% off</div>252 <div class="badge-red">Deal of the Day</div>253 </div>254 <div class="price-line">255 <div class="price">₹1,899<span class="sup">00</span></div>256 <div class="mrp">M.R.P.: ₹3,999.00</div>257 </div>258 <div class="subtle">Eligible for FREE Shipping</div>259 <div class="instock">In stock</div>260 <div class="details"><strong>Size:</strong> 2XL</div>261 <div class="details"><strong>Colour:</strong> Olive Green</div>262 <div class="link">10 days Return & Exchange</div>263 264 <div class="action-row">265 <div class="pill-btn">Delete</div>266 <div class="pill-btn">Compare</div>267 <div class="pill-btn">Move to cart</div>268 </div>269 </div>270 </div>271 </div>272 273 <div class="grey-section">274 <div class="sub-title">Frequently bought with items in your cart</div>275 <div class="carousel">276 <!-- Item 1 -->277 <div class="item-card">278 <div class="item-img">[IMG: Touch Screen Running Gloves]</div>279 <div class="item-title">Touch Screen Running Gloves for...</div>280 <div class="rating-row">281 <svg class="svg-24" viewBox="0 0 24 24" class="star"><path class="star" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3-6.2 3 6.2 6.9 1-5 4.9 1.2 6.9z"/></svg>282 <svg class="svg-24" viewBox="0 0 24 24"><path class="star" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3-6.2 3 6.2 6.9 1-5 4.9 1.2 6.9z"/></svg>283 <svg class="svg-24" viewBox="0 0 24 24"><path class="star" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3-6.2 3 6.2 6.9 1-5 4.9 1.2 6.9z"/></svg>284 <svg class="svg-24" viewBox="0 0 24 24"><path class="star" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3-6.2 3 6.2 6.9 1-5 4.9 1.2 6.9z"/></svg>285 <svg class="svg-24" viewBox="0 0 24 24"><path class="star-outline" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3-6.2 3 6.2 6.9 1-5 4.9 1.2 6.9z"/></svg>286 <div class="rating-count">4,230</div>287 </div>288 <div class="price-small">₹497.00</div>289 <div class="cta-yellow">Add to Cart</div>290 </div>291 292 <!-- Item 2 -->293 <div class="item-card">294 <div class="item-img">[IMG: Men's Cotton Thermal Set]</div>295 <div class="item-title">Lux Cottswool Men's Cotton Thermal Set</div>296 <div class="rating-row">297 <svg class="svg-24" viewBox="0 0 24 24"><path class="star" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3-6.2 3 6.2 6.9 1-5 4.9 1.2 6.9z"/></svg>298 <svg class="svg-24" viewBox="0 0 24 24"><path class="star" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3-6.2 3 6.2 6.9 1-5 4.9 1.2 6.9z"/></svg>299 <svg class="svg-24" viewBox="0 0 24 24"><path class="star" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3-6.2 3 6.2 6.9 1-5 4.9 1.2 6.9z"/></svg>300 <svg class="svg-24" viewBox="0 0 24 24"><path class="star" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3-6.2 3 6.2 6.9 1-5 4.9 1.2 6.9z"/></svg>301 <svg class="svg-24" viewBox="0 0 24 24"><path class="star-outline" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3-6.2 3 6.2 6.9 1-5 4.9 1.2 6.9z"/></svg>302 <div class="rating-count">12,318</div>303 </div>304 <div class="price-small">₹749.00 - ₹895.00</div>305 <div class="cta-white">See all buying options</div>306 </div>307 308 <!-- Item 3 -->309 <div class="item-card">310 <div class="item-img">[IMG: Hoodie - Olive Green]</div>311 <div class="item-title">NOBERO Hooded Sweatshirt</div>312 <div class="rating-row">313 <svg class="svg-24" viewBox="0 0 24 24"><path class="star" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3-6.2 3 6.2 6.9 1-5 4.9 1.2 6.9z"/></svg>314 <svg class="svg-24" viewBox="0 0 24 24"><path class="star" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3-6.2 3 6.2 6.9 1-5 4.9 1.2 6.9z"/></svg>315 <svg class="svg-24" viewBox="0 0 24 24"><path class="star" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3-6.2 3 6.2 6.9 1-5 4.9 1.2 6.9z"/></svg>316 <svg class="svg-24" viewBox="0 0 24 24"><path class="star-outline" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3-6.2 3 6.2 6.9 1-5 4.9 1.2 6.9z"/></svg>317 <svg class="svg-24" viewBox="0 0 24 24"><path class="star-outline" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3-6.2 3 6.2 6.9 1-5 4.9 1.2 6.9z"/></svg>318 <div class="rating-count">9,458</div>319 </div>320 <div class="price-small">₹949.00</div>321 <div class="cta-white">See options</div>322 </div>323 </div>324 </div>325 </div>326 327 <!-- Bottom navigation -->328 <div class="bottom-nav">329 <div class="nav-item">330 <svg class="svg-24" viewBox="0 0 24 24"><path d="M12 3l9 7v11h-6v-7H9v7H3V10l9-7z" fill="#333"/></svg>331 <div>Home</div>332 </div>333 <div class="nav-item">334 <svg class="svg-24" viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm-9 9v-1a7 7 0 0114 0v1H3z" fill="#333"/></svg>335 <div>You</div>336 </div>337 <div class="nav-item">338 <svg class="svg-24" viewBox="0 0 24 24"><path d="M3 5h8v6H3V5zm10 0h8v6h-8V5zM3 13h8v6H3v-6zm10 0h8v6h-8v-6z" fill="#333"/></svg>339 <div>More</div>340 </div>341 <div class="nav-item active">342 <svg class="svg-24" viewBox="0 0 24 24"><path d="M7 4h-2l-1 2H1v2h2l3.6 7.59-1.35 2.45A2 2 0 007 20h12v-2H8.42a.5.5 0 01-.45-.28L8.1 16h9.4a2 2 0 001.8-1.1l3-6H7.42L7 4z" fill="#0fb2a5"/></svg>343 <div>Cart</div>344 </div>345 <div class="nav-item">346 <svg class="svg-24" viewBox="0 0 24 24"><path d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h16v2H4v-2z" fill="#333"/></svg>347 <div>Menu</div>348 </div>349 </div>350 <div class="gesture"></div>351</div>352</body>353</html>