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</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #f4f6f7;15 }16 .top-gradient {17 width: 100%;18 height: 240px;19 background: linear-gradient(180deg, #8ad5c8 0%, #a9dee0 100%);20 position: relative;21 padding: 24px 32px 0 32px;22 box-sizing: border-box;23 }24 .status-row {25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #2b2b2b;29 font-size: 34px;30 opacity: 0.85;31 }32 .status-icons {33 display: flex;34 align-items: center;35 gap: 20px;36 }37 .dot { width: 10px; height: 10px; background: #2b2b2b; border-radius: 50%; display: inline-block; }38 .search-bar {39 margin-top: 24px;40 background: #ffffff;41 border: 1px solid #d9d9d9;42 border-radius: 28px;43 height: 110px;44 display: flex;45 align-items: center;46 padding: 0 28px;47 gap: 20px;48 box-shadow: 0 4px 8px rgba(0,0,0,0.06);49 }50 .search-icon, .scan-icon {51 width: 56px; height: 56px;52 display: inline-flex; align-items: center; justify-content: center;53 }54 .search-input {55 flex: 1;56 font-size: 38px;57 color: #3b3b3b;58 opacity: 0.9;59 }60 61 .cta-proceed {62 margin: 22px 28px 18px 28px;63 background: #f7ca00;64 color: #2b2b2b;65 font-weight: 600;66 font-size: 40px;67 height: 120px;68 border-radius: 26px;69 display: flex; align-items: center; justify-content: center;70 box-shadow: 0 3px 6px rgba(0,0,0,0.08);71 }72 73 .card {74 margin: 0 24px;75 background: #fff;76 border-radius: 22px;77 box-shadow: 0 6px 16px rgba(0,0,0,0.08);78 padding: 28px;79 }80 .card-row {81 display: flex;82 gap: 26px;83 }84 .img-ph {85 width: 320px; height: 420px;86 background: #E0E0E0;87 border: 1px solid #BDBDBD;88 border-radius: 12px;89 display: flex; align-items: center; justify-content: center;90 color: #757575; font-size: 30px; text-align: center; padding: 10px; box-sizing: border-box;91 }92 .prod-info { flex: 1; }93 .prod-title {94 font-size: 40px; font-weight: 700; color: #222; line-height: 1.2;95 margin-bottom: 10px;96 }97 .subdued { color: #666; font-size: 32px; margin-bottom: 10px; }98 .badges { display: flex; gap: 12px; margin: 10px 0 14px; }99 .badge-red {100 background: #d32f2f; color: #fff; border-radius: 12px; padding: 8px 14px; font-size: 30px; font-weight: 700;101 }102 .badge-outline {103 background: #fff; color: #d32f2f; border: 2px solid #d32f2f; border-radius: 12px; padding: 8px 14px; font-size: 30px; font-weight: 700;104 }105 .price-row { display: flex; align-items: baseline; gap: 18px; margin: 6px 0 8px; }106 .price { font-size: 56px; font-weight: 800; color: #222; }107 .mrp { font-size: 34px; color: #777; }108 .strike { text-decoration: line-through; color: #9b9b9b; }109 .green { color: #1f8b2e; font-size: 34px; margin-top: 8px; }110 .link { color: #2b8bd6; font-size: 34px; margin-top: 8px; }111 .detail-line { font-size: 34px; color: #333; margin-top: 6px; }112 .detail-line b { font-weight: 700; }113 114 .qty-actions {115 margin-top: 26px;116 display: flex; align-items: center; gap: 18px; flex-wrap: wrap;117 }118 .seg {119 height: 96px; min-width: 120px;120 background: #fff; border: 1px solid #d9d9d9; border-radius: 16px;121 display: inline-flex; align-items: center; justify-content: center;122 gap: 14px; padding: 0 18px; box-shadow: 0 2px 6px rgba(0,0,0,0.06);123 font-size: 38px; color: #333; font-weight: 600;124 }125 .pill {126 height: 96px; padding: 0 32px;127 border: 1px solid #d9d9d9; border-radius: 24px;128 background: #fff; font-size: 36px; color: #333; font-weight: 600;129 display: inline-flex; align-items: center; justify-content: center;130 box-shadow: 0 2px 6px rgba(0,0,0,0.06);131 }132 .wide-pill { width: 100%; height: 104px; margin-top: 16px; font-size: 38px; }133 134 .divider {135 width: calc(100% - 48px);136 margin: 40px 24px;137 height: 1px; background: #dddddd;138 }139 140 .assurance {141 display: flex; justify-content: space-around; align-items: center;142 margin: 0 24px;143 }144 .assurance .item {145 display: flex; flex-direction: column; align-items: center; gap: 16px;146 }147 .circle {148 width: 140px; height: 140px; border-radius: 50%;149 background: #f0f0f0; border: 1px solid #d9d9d9;150 display: flex; align-items: center; justify-content: center;151 }152 .label { font-size: 36px; color: #2b8bd6; font-weight: 600; }153 154 .recommend {155 margin: 32px 0 0;156 background: #e9edee;157 padding: 24px 24px 220px;158 }159 .rec-card {160 background: #fff; border-radius: 18px; padding: 24px; margin: 0 8px;161 box-shadow: 0 6px 12px rgba(0,0,0,0.06);162 }163 .rec-title { font-size: 44px; font-weight: 800; color: #111; margin-bottom: 20px; }164 .rec-row { display: flex; gap: 24px; }165 .rec-img {166 width: 440px; height: 360px;167 background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 12px;168 display: flex; align-items: center; justify-content: center;169 color: #757575; font-size: 30px; text-align: center; padding: 10px; box-sizing: border-box;170 }171 172 .bottom-bar {173 position: absolute; bottom: 0; left: 0; width: 100%;174 background: #fff; border-top: 1px solid #e1e1e1;175 height: 210px; box-shadow: 0 -4px 12px rgba(0,0,0,0.06);176 }177 .nav {178 height: 100%; display: flex; align-items: center; justify-content: space-around;179 padding: 0 20px;180 }181 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; }182 .nav-icon {183 width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;184 }185 .nav-label { font-size: 32px; color: #4d4d4d; }186 .active .nav-label { color: #2b8bd6; font-weight: 700; }187 .cart-badge {188 position: absolute; top: -6px; right: -6px; background: #2b8bd6; color: #fff;189 width: 36px; height: 36px; border-radius: 50%; font-size: 26px; display: flex; align-items: center; justify-content: center;190 }191 .active-indicator {192 position: absolute; bottom: 204px; left: 50%; transform: translateX(-50%);193 width: 520px; height: 14px; background: #cfcfcf; border-radius: 7px;194 opacity: 0.7;195 }196</style>197</head>198<body>199<div id="render-target">200 201 <div class="top-gradient">202 <div class="status-row">203 <div>11:14</div>204 <div class="status-icons">205 <span class="dot"></span>206 <span class="dot"></span>207 <span class="dot"></span>208 <span class="dot"></span>209 <span class="dot"></span>210 </div>211 </div>212 213 <div class="search-bar">214 <div class="search-icon">215 <svg viewBox="0 0 24 24" width="48" height="48">216 <circle cx="10" cy="10" r="7" stroke="#666" stroke-width="2" fill="none"></circle>217 <line x1="15" y1="15" x2="22" y2="22" stroke="#666" stroke-width="2"></line>218 </svg>219 </div>220 <div class="search-input">winter clothes for men</div>221 <div class="scan-icon">222 <svg viewBox="0 0 24 24" width="48" height="48">223 <rect x="4" y="4" width="16" height="16" rx="3" ry="3" stroke="#666" stroke-width="2" fill="none"></rect>224 <circle cx="12" cy="12" r="3" fill="#666"></circle>225 </svg>226 </div>227 </div>228 </div>229 230 <div class="cta-proceed">Proceed to Buy (1 item)</div>231 232 <div class="card">233 <div class="card-row">234 <div class="img-ph">[IMG: Olive Green Hooded Sweatshirt]</div>235 <div class="prod-info">236 <div class="prod-title">NOBERO Unisex-Adult Cotton Neck Hooded Sweatshirt (1M-T...)</div>237 <div class="subdued">50+ bought in past month</div>238 239 <div class="badges">240 <div class="badge-red">53% off</div>241 <div class="badge-outline">Deal of the Day</div>242 </div>243 244 <div class="price-row">245 <div class="price">₹1,899<span style="font-size:32px;">00</span></div>246 <div class="mrp">M.R.P.: <span class="strike">₹3,999.00</span></div>247 </div>248 <div class="subdued">Eligible for FREE Shipping</div>249 <div class="green">In stock</div>250 <div class="link">See offers & discounts</div>251 <div class="detail-line"><b>Size:</b> 2XL</div>252 <div class="detail-line"><b>Colour:</b> Olive Green</div>253 <div class="link">10 days Return & Exchange</div>254 255 <div class="qty-actions">256 <div class="seg">257 <svg viewBox="0 0 24 24" width="44" height="44">258 <path d="M7 4h10l-1 16H8L7 4zm3 3h4v11h-4V7z" fill="#555"></path>259 </svg>260 </div>261 <div class="seg">262 <svg viewBox="0 0 24 24" width="44" height="44">263 <rect x="5" y="11" width="14" height="2" fill="#555"></rect>264 </svg>265 <span>1</span>266 <svg viewBox="0 0 24 24" width="44" height="44">267 <path d="M11 5h2v14h-2zM5 11h14v2H5z" fill="#555"></path>268 </svg>269 </div>270 <div class="pill">Delete</div>271 <div class="pill">Save for later</div>272 <div class="wide-pill">See more like this</div>273 </div>274 </div>275 </div>276 </div>277 278 <div class="divider"></div>279 280 <div class="assurance">281 <div class="item">282 <div class="circle">283 <svg viewBox="0 0 24 24" width="80" height="80">284 <rect x="6" y="10" width="12" height="10" rx="2" ry="2" fill="#9e9e9e"></rect>285 <rect x="9" y="6" width="6" height="6" rx="3" ry="3" fill="#9e9e9e"></rect>286 <text x="12" y="17" text-anchor="middle" font-size="8" fill="#fff">$</text>287 </svg>288 </div>289 <div class="label">Secure Payment</div>290 </div>291 <div class="item">292 <div class="circle">293 <svg viewBox="0 0 24 24" width="80" height="80">294 <rect x="3" y="9" width="14" height="8" fill="#9e9e9e"></rect>295 <rect x="17" y="11" width="4" height="4" fill="#9e9e9e"></rect>296 <circle cx="8" cy="18" r="2" fill="#9e9e9e"></circle>297 <circle cx="18" cy="18" r="2" fill="#9e9e9e"></circle>298 </svg>299 </div>300 <div class="label">Amazon Delivered</div>301 </div>302 </div>303 304 <div class="recommend">305 <div class="rec-card">306 <div class="rec-title">Frequently bought with items in your cart</div>307 <div class="rec-row">308 <div class="rec-img">[IMG: Black Winter Gloves]</div>309 <div class="rec-img">[IMG: Black Thermal Wear Set]</div>310 </div>311 </div>312 </div>313 314 <div class="active-indicator"></div>315 316 <div class="bottom-bar">317 <div class="nav">318 <div class="nav-item">319 <div class="nav-icon">320 <svg viewBox="0 0 24 24" width="60" height="60">321 <path d="M3 11l9-8 9 8v9H3v-9z" fill="#777"></path>322 </svg>323 </div>324 <div class="nav-label">Home</div>325 </div>326 <div class="nav-item">327 <div class="nav-icon">328 <svg viewBox="0 0 24 24" width="60" height="60">329 <circle cx="12" cy="8" r="4" fill="#777"></circle>330 <path d="M4 20c0-4 4-6 8-6s8 2 8 6H4z" fill="#777"></path>331 </svg>332 </div>333 <div class="nav-label">You</div>334 </div>335 <div class="nav-item">336 <div class="nav-icon">337 <svg viewBox="0 0 24 24" width="60" height="60">338 <rect x="4" y="5" width="16" height="4" fill="#777"></rect>339 <rect x="6" y="11" width="12" height="4" fill="#777"></rect>340 <rect x="8" y="17" width="8" height="4" fill="#777"></rect>341 </svg>342 </div>343 <div class="nav-label">More</div>344 </div>345 <div class="nav-item active" style="position: relative;">346 <div class="nav-icon" style="position: relative;">347 <svg viewBox="0 0 24 24" width="60" height="60">348 <path d="M7 6h14l-2 10H9L7 6z" fill="#2b8bd6"></path>349 <circle cx="10" cy="19" r="2" fill="#2b8bd6"></circle>350 <circle cx="18" cy="19" r="2" fill="#2b8bd6"></circle>351 </svg>352 <div class="cart-badge">1</div>353 </div>354 <div class="nav-label">Cart</div>355 </div>356 <div class="nav-item">357 <div class="nav-icon">358 <svg viewBox="0 0 24 24" width="60" height="60">359 <rect x="4" y="6" width="16" height="2" fill="#777"></rect>360 <rect x="4" y="11" width="16" height="2" fill="#777"></rect>361 <rect x="4" y="16" width="16" height="2" fill="#777"></rect>362 </svg>363 </div>364 <div class="nav-label">Menu</div>365 </div>366 </div>367 </div>368 369</div>370</body>371</html>