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>Item - Added to cart</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #f6f6f6;15 }16 17 /* Top navigation */18 .topbar {19 position: relative;20 height: 120px;21 background: #ffffff;22 display: flex;23 align-items: center;24 padding: 0 32px;25 box-shadow: 0 1px 0 rgba(0,0,0,0.06);26 z-index: 1;27 }28 .topbar .title {29 font-size: 44px;30 font-weight: 600;31 margin-left: 16px;32 }33 .topbar .actions {34 margin-left: auto;35 display: flex;36 align-items: center;37 gap: 26px;38 }39 .icon-btn {40 width: 72px;41 height: 72px;42 border-radius: 36px;43 background: #f0f0f0;44 display: flex; align-items: center; justify-content: center;45 }46 .cart { position: relative; }47 .badge {48 position: absolute;49 top: 8px; right: 6px;50 width: 32px; height: 32px;51 border-radius: 16px;52 background: #d32f2f; color: #fff;53 font-size: 22px; line-height: 32px; text-align: center;54 font-weight: 700;55 }56 57 /* Content area */58 .content {59 position: relative;60 padding: 32px;61 color: #111;62 }63 .seller-row {64 display: flex; align-items: center; gap: 22px;65 margin-top: 22px;66 }67 .avatar {68 width: 84px; height: 84px; border-radius: 42px;69 background: #E0E0E0; border: 1px solid #BDBDBD;70 display: flex; align-items: center; justify-content: center;71 color: #757575; font-size: 22px;72 }73 .seller-info .name { font-size: 38px; font-weight: 700; letter-spacing: 0.2px; }74 .seller-info .meta { font-size: 28px; color: #666; margin-top: 2px; }75 76 .price-hero {77 margin-top: 28px;78 }79 .price-hero .price {80 font-size: 90px; font-weight: 800;81 }82 .price-hero .per { font-size: 40px; color: #444; margin-left: 8px; }83 .subtext { font-size: 32px; color: #666; margin-top: 10px; }84 .save { font-size: 32px; color: #c62828; margin-top: 4px; }85 .ship { font-size: 36px; color: #1b5e20; font-weight: 700; margin-top: 18px; }86 .when { font-size: 32px; color: #222; margin-top: 6px; }87 .ontime { font-size: 30px; color: #444; margin-top: 6px; }88 89 .cond-row {90 display: flex; justify-content: space-between; align-items: center;91 font-size: 34px; color: #666; margin-top: 26px;92 }93 .cond-row .right { color: #222; font-weight: 600; display:flex; align-items:center; gap:10px; }94 .info-dot {95 width: 36px; height: 36px; border-radius: 18px; border: 2px solid #999;96 display:flex; align-items:center; justify-content:center; color:#666; font-size: 22px; font-weight:700;97 }98 99 .bulk-header {100 display: flex; justify-content: space-between; align-items: center;101 margin-top: 26px; font-size: 32px; color: #333;102 }103 .bulk-options {104 display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;105 margin-top: 18px;106 }107 .opt {108 height: 140px; border: 3px solid #3b59d4; border-radius: 16px;109 display: flex; align-items: center; justify-content: center; text-align: center;110 font-size: 36px; font-weight: 700; color: #3b59d4; background: #ffffff;111 }112 .opt.gray {113 border-color: #bdbdbd; color: #333;114 }115 116 .buy-now {117 margin-top: 42px;118 height: 120px; border-radius: 60px;119 background: #3f61f2; color: #fff; font-size: 48px; font-weight: 800;120 display:flex; align-items:center; justify-content:center;121 }122 123 /* Dimming overlay for modal */124 .overlay {125 position: absolute; left: 0; top: 0; width: 100%; height: 100%;126 background: rgba(0,0,0,0.35);127 z-index: 3;128 pointer-events: none;129 }130 131 /* Bottom sheet */132 .bottom-sheet {133 position: absolute; left: 0; bottom: 0;134 width: 1080px; height: 980px;135 background: #ffffff;136 border-top-left-radius: 40px; border-top-right-radius: 40px;137 box-shadow: 0 -14px 30px rgba(0,0,0,0.25);138 z-index: 5;139 padding: 28px 36px 36px 36px;140 }141 .sheet-head {142 display: flex; align-items: center; gap: 18px;143 font-size: 40px; font-weight: 700; color: #111;144 padding-bottom: 18px;145 }146 .check-circle {147 width: 44px; height: 44px; border-radius: 22px; background: #e8f5e9;148 display:flex; align-items:center; justify-content:center; border: 2px solid #2e7d32;149 }150 .divider {151 height: 1px; background: #e0e0e0; margin: 6px 0 18px 0;152 }153 154 .cart-item {155 display: grid; grid-template-columns: 180px 1fr 200px; align-items: center;156 gap: 24px;157 }158 .thumb {159 width: 180px; height: 180px; background:#E0E0E0; border:1px solid #BDBDBD;160 display:flex; align-items:center; justify-content:center; color:#757575; font-size:24px; text-align:center; border-radius: 8px;161 }162 .item-title {163 font-size: 34px; color: #111; line-height: 1.24;164 }165 .item-price {166 text-align: right; font-size: 36px; color: #111; font-weight: 700;167 }168 169 .goto {170 margin-top: 40px;171 height: 120px; border-radius: 60px;172 background: #3f61f2; color: #fff;173 display:flex; align-items:center; justify-content:center;174 font-size: 50px; font-weight: 800;175 }176 177 .sponsored {178 margin-top: 40px;179 }180 .sponsored .title {181 font-size: 52px; font-weight: 800; color: #111;182 margin-bottom: 22px;183 }184 .category {185 font-size: 36px; color: #555; margin-bottom: 16px;186 }187 .sponsor-row {188 display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;189 }190 .sponsor-img {191 height: 220px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius: 16px;192 display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px;193 }194 195 /* Small helper text styles */196 .strike { text-decoration: line-through; color: #888; }197</style>198</head>199<body>200<div id="render-target">201 202 <!-- Top bar -->203 <div class="topbar">204 <div class="icon-btn">205 <svg width="40" height="40" viewBox="0 0 24 24">206 <path d="M15 6l-6 6 6 6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>207 </svg>208 </div>209 <div class="title">Item</div>210 <div class="actions">211 <div class="icon-btn">212 <svg width="36" height="36" viewBox="0 0 24 24">213 <circle cx="10" cy="10" r="6" stroke="#111" stroke-width="2" fill="none"/>214 <path d="M21 21l-5-5" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>215 </svg>216 </div>217 <div class="icon-btn cart">218 <svg width="36" height="36" viewBox="0 0 24 24">219 <path d="M6 6h14l-2 9H8L6 6z" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>220 <circle cx="9" cy="20" r="1.6" fill="#111"/>221 <circle cx="18" cy="20" r="1.6" fill="#111"/>222 </svg>223 <div class="badge">2</div>224 </div>225 <div class="icon-btn">226 <svg width="36" height="36" viewBox="0 0 24 24">227 <circle cx="6" cy="12" r="2.2" fill="#111"/>228 <circle cx="12" cy="8" r="2.2" fill="#111"/>229 <circle cx="18" cy="5" r="2.2" fill="#111"/>230 <path d="M7.8 11l3.6-2.6M13.8 7.2l3.7-2.1" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>231 </svg>232 </div>233 <div class="icon-btn">234 <svg width="36" height="36" viewBox="0 0 24 24">235 <circle cx="5" cy="12" r="2" fill="#111"/>236 <circle cx="12" cy="12" r="2" fill="#111"/>237 <circle cx="19" cy="12" r="2" fill="#111"/>238 </svg>239 </div>240 </div>241 </div>242 243 <!-- Page content (dimmed by overlay) -->244 <div class="content">245 <div class="seller-row">246 <div class="avatar">rinuvo</div>247 <div class="seller-info">248 <div class="name">Kinuvo (4U48)</div>249 <div class="meta">99.5% positive feedback</div>250 </div>251 </div>252 253 <div class="price-hero">254 <div class="price">$279.99<span class="per">/ea</span></div>255 <div class="subtext">or Best Offer</div>256 <div class="save"><span class="strike">Was $329.99</span> Save $50.00 (15% off)</div>257 <div class="ship">Free 2-3 day shipping</div>258 <div class="when">Get it between <b>Mon, Nov 27</b> and <b>Tue, Nov 28</b></div>259 <div class="ontime">Get it on time if you order in the next 7h 17m</div>260 </div>261 262 <div class="cond-row">263 <div>Condition</div>264 <div class="right">Excellent - Refurbished <div class="info-dot">i</div></div>265 </div>266 267 <div class="bulk-header">268 <div>Bulk savings: Qty 1</div>269 <div>4 available</div>270 </div>271 <div class="bulk-options">272 <div class="opt">Buy 1<br>$279.99/ea</div>273 <div class="opt gray">Buy 2<br>$277.19/ea</div>274 <div class="opt gray">Buy 3<br>$274.39/ea</div>275 </div>276 277 <div class="buy-now">Buy It Now</div>278 279 <!-- Underlying sponsored section (partially visible under the sheet) -->280 <div class="sponsored" style="padding-bottom: 340px;">281 <div class="title">Related sponsored items</div>282 <div class="category">PC Laptops & Netbooks</div>283 <div class="sponsor-row">284 <div class="sponsor-img">[IMG: Rugged Laptop]</div>285 <div class="sponsor-img">[IMG: Colorful Laptop]</div>286 <div class="sponsor-img">[IMG: Windows Laptop]</div>287 </div>288 </div>289 </div>290 291 <!-- Dark overlay covering the background -->292 <div class="overlay"></div>293 294 <!-- Bottom sheet: Added to cart -->295 <div class="bottom-sheet">296 <div class="sheet-head">297 <div class="check-circle">298 <svg width="26" height="26" viewBox="0 0 24 24">299 <path d="M20 6l-11 11-5-5" stroke="#2e7d32" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>300 </svg>301 </div>302 <div>Added to cart</div>303 </div>304 <div class="divider"></div>305 306 <div class="cart-item">307 <div class="thumb">[IMG: 14" Dell Latitude Laptop]</div>308 <div class="item-title">14" Dell Latitude Laptop PC: Intel Core i7! Backlit Keyboard! Built in Webcam!</div>309 <div class="item-price">$279.99/ea</div>310 </div>311 312 <div class="goto">Go to cart</div>313 314 <div class="sponsored">315 <div class="title">Related sponsored items</div>316 <div class="category">PC Laptops & Netbooks</div>317 <div class="sponsor-row">318 <div class="sponsor-img">[IMG: Slim Laptop]</div>319 <div class="sponsor-img">[IMG: Vibrant Display Laptop]</div>320 <div class="sponsor-img">[IMG: Business Laptop]</div>321 </div>322 </div>323 </div>324</div>325</body>326</html>