GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Cart UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 }15 16 /* Generic helpers */17 .row { display: flex; align-items: center; }18 .between { display: flex; align-items: center; justify-content: space-between; }19 .muted { color: #8f8f8f; }20 .small { font-size: 28px; }21 .tiny { font-size: 24px; }22 .pill { padding: 8px 16px; border-radius: 999px; background: rgba(0,0,0,0.6); color: #fff; font-size: 26px; }23 .divider { height: 18px; background: #f3f3f3; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; }24 .section { padding: 24px 36px; }25 26 /* Status bar */27 .status-bar {28 height: 90px;29 padding: 0 36px;30 font-size: 34px;31 color: #222;32 display: flex;33 align-items: center;34 justify-content: space-between;35 }36 .status-icons .dot { width: 10px; height: 10px; background: #888; border-radius: 50%; margin: 0 16px; }37 .battery { border: 2px solid #444; width: 52px; height: 28px; border-radius: 4px; position: relative; margin-left: 18px; }38 .battery:after { content: ""; position: absolute; right: -8px; top: 8px; width: 6px; height: 12px; background: #444; border-radius: 2px; }39 .battery .level { position: absolute; left: 3px; top: 3px; height: 20px; width: 36px; background: #5cb85c; }40 41 /* Header */42 .header {43 height: 110px;44 padding: 0 24px 0 12px;45 border-bottom: 1px solid #eee;46 display: flex;47 align-items: center;48 justify-content: space-between;49 }50 .title { font-weight: 700; font-size: 46px; color: #111; }51 .highlight { color: #ff7e29; font-size: 36px; margin-left: 12px; }52 .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }53 54 /* Promo banner */55 .promo {56 margin: 24px 24px 8px;57 border: 1px solid #e6e6e6;58 border-radius: 16px;59 padding: 20px 24px;60 display: flex;61 align-items: center;62 justify-content: space-between;63 background: #fff;64 }65 .promo .left { display: flex; align-items: center; font-size: 34px; color: #22aa44; }66 .promo .right { color: #777; font-size: 30px; }67 68 /* Cart item */69 .cart-item { padding: 24px; }70 .item-row { display: grid; grid-template-columns: 60px 300px 1fr; grid-column-gap: 20px; align-items: start; }71 .select-dot {72 width: 48px; height: 48px; border-radius: 50%;73 border: 2px solid #111; display: flex; align-items: center; justify-content: center;74 }75 .select-dot svg { width: 30px; height: 30px; }76 .thumb {77 width: 300px; height: 220px; background: #E0E0E0; border: 1px solid #BDBDBD;78 display: flex; align-items: flex-end; justify-content: flex-start; position: relative;79 color: #757575; padding: 10px;80 }81 .thumb label { position: absolute; left: 10px; bottom: 10px; }82 .details .name { font-size: 38px; line-height: 48px; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }83 .details .brand { margin-top: 8px; color: #777; font-size: 30px; }84 .brand .avatar { width: 30px; height: 30px; background: #f1c7c7; border-radius: 50%; display: inline-block; margin-right: 10px; }85 .variant { margin-top: 14px; }86 .dropdown {87 border: 1px solid #d7d7d7; border-radius: 26px; padding: 8px 16px; font-size: 30px; display: inline-flex; align-items: center;88 background: #f9f9f9; color: #333;89 }90 .event { margin-top: 12px; color: #ff7e29; font-size: 30px; display: flex; align-items: center; }91 .price-row { margin-top: 12px; display: flex; align-items: baseline; gap: 20px; }92 .price { font-size: 48px; font-weight: 700; color: #111; }93 .old-price { font-size: 34px; color: #b7b7b7; text-decoration: line-through; }94 .qty { margin-top: 8px; display: flex; align-items: center; gap: 18px; }95 .step { width: 72px; height: 60px; border: 1px solid #d9d9d9; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #f7f7f7; }96 .qty .num { font-size: 36px; width: 36px; text-align: center; }97 98 .info-banner {99 margin-top: 8px; padding: 22px 24px; background: #f4f4f4; color: #8a8a8a; font-size: 30px; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea;100 }101 102 /* Summary */103 .summary { padding: 24px 24px 8px; }104 .summary .line { display: flex; align-items: baseline; justify-content: space-between; padding: 18px 0; font-size: 36px; color: #222; }105 .summary .line .strike { color: #b7b7b7; text-decoration: line-through; }106 .summary .line .discount { color: #ff7e29; }107 .est-title { margin-top: 18px; padding-top: 24px; border-top: 1px solid #eee; font-size: 40px; color: #111; font-weight: 600; }108 .est-total { margin-top: 10px; font-size: 44px; font-weight: 700; color: #111; }109 110 /* Explore section */111 .explore { padding: 24px; }112 .explore h3 { margin: 0 0 20px 0; font-size: 46px; color: #111; }113 .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }114 .card { border-radius: 18px; background: #fff; }115 .card .img { width: 100%; height: 280px; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; }116 .rating { margin-top: 14px; display: flex; align-items: center; gap: 8px; color: #111; font-size: 30px; }117 .stars svg { width: 28px; height: 28px; margin-right: 4px; }118 .sold { color: #808080; margin-left: 8px; }119 .price-card { font-size: 34px; margin-top: 8px; color: #111; }120 .add-btn {121 margin-top: 12px; width: 320px; max-width: 90%; padding: 18px 24px; border: 2px solid #d7d7d7; border-radius: 28px; background: #fff;122 font-size: 34px; color: #222; text-align: center;123 }124 125 /* Views section */126 .views { padding: 10px 24px 130px; }127 .views h3 { margin: 24px 0; font-size: 42px; color: #111; }128 .view-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }129 .view-item { height: 160px; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; }130 131 /* Bottom bar */132 .bottom-bar {133 position: absolute; left: 0; right: 0; bottom: 60px; height: 120px; background: #fff; border-top: 1px solid #e6e6e6;134 display: flex; align-items: center; justify-content: space-between; padding: 0 24px;135 }136 .bottom-left { display: flex; align-items: center; gap: 18px; font-size: 36px; }137 .total { font-size: 40px; }138 .checkout {139 background: #ff7e29; color: #fff; font-weight: 700; font-size: 42px; padding: 26px 44px; border-radius: 40px; box-shadow: 0 6px 0 rgba(0,0,0,0.05);140 }141 142 /* Navigation pill */143 .nav-pill { position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px; width: 320px; height: 10px; background: #111; border-radius: 10px; opacity: 0.9; }144</style>145</head>146<body>147<div id="render-target">148 149 <!-- Status Bar -->150 <div class="status-bar">151 <div>1:34</div>152 <div class="status-icons row">153 <!-- simple status glyphs -->154 <svg width="34" height="34" viewBox="0 0 24 24" fill="#444" style="margin-right:16px;"><circle cx="12" cy="12" r="10"/></svg>155 <svg width="34" height="34" viewBox="0 0 24 24" fill="#444" style="margin-right:16px;"><rect x="4" y="4" width="16" height="16"/></svg>156 <svg width="34" height="34" viewBox="0 0 24 24" fill="#444" style="margin-right:16px;"><path d="M12 2l9 9-9 9-9-9 9-9z"/></svg>157 <div class="dot"></div>158 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2" style="margin-right:8px;">159 <path d="M19 8.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0Z"/>160 <path d="M12 6v6l4 2"/>161 </svg>162 <span class="row" style="align-items:center; color:#555; font-size:30px; margin-left:8px;">95%</span>163 <div class="battery"><div class="level"></div></div>164 </div>165 </div>166 167 <!-- Header -->168 <div class="header">169 <div class="row" style="gap: 16px;">170 <div class="icon-btn">171 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="3">172 <path d="M15 18l-6-6 6-6"/>173 </svg>174 </div>175 <div class="title">Cart (1)</div>176 <div class="highlight">1 item is almost gone!</div>177 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#ff7e29" stroke-width="3" style="margin-left:6px;">178 <path d="M9 6l6 6-6 6"/>179 </svg>180 </div>181 <div class="icon-btn">182 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="3">183 <path d="M3 6h18M3 12h18M3 18h18"/>184 </svg>185 </div>186 </div>187 188 <!-- Promo banner -->189 <div class="promo">190 <div class="left">191 <svg width="36" height="36" viewBox="0 0 24 24" fill="#22aa44" style="margin-right:10px;">192 <path d="M9 16l-4-4 1.4-1.4L9 13.2l8.6-8.6L19 6l-10 10z"/>193 </svg>194 <span>Free shipping and free returns</span>195 </div>196 <div class="right">Limited-time</div>197 </div>198 199 <!-- Cart item -->200 <div class="cart-item">201 <div class="item-row">202 <div class="select-dot">203 <svg viewBox="0 0 24 24" fill="#111"><circle cx="12" cy="12" r="7"/></svg>204 </div>205 206 <div class="thumb">207 <div style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#757575;">[IMG: Dark blue backpack on table]</div>208 <label class="pill">Only 3 left</label>209 </div>210 211 <div class="details">212 <div class="name">Rechargeable Electric Lawn Mower, Lawn...</div>213 <div class="brand"><span class="avatar"></span>By XYC business firm214 <span style="color:#777;">›</span>215 </div>216 <div class="variant">217 <span class="dropdown">backpack218 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2" style="margin-left:6px;">219 <path d="M6 9l6 6 6-6"/>220 </svg>221 </span>222 </div>223 <div class="event">224 <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ff7e29" stroke-width="2" style="margin-right:8px;">225 <rect x="4" y="5" width="16" height="14" rx="2"/>226 <path d="M8 3v4M16 3v4"/>227 </svg>228 Happy Holiday | 18:14:55:33229 </div>230 231 <div class="between" style="margin-top: 10px;">232 <div class="price-row">233 <div class="price">10,98€</div>234 <div class="old-price">19,89€</div>235 </div>236 <div class="qty">237 <div class="step">238 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">239 <path d="M5 12h14"/>240 </svg>241 </div>242 <div class="num">1</div>243 <div class="step">244 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">245 <path d="M12 5v14M5 12h14"/>246 </svg>247 </div>248 </div>249 </div>250 </div>251 </div>252 253 <div class="info-banner">254 <span class="row">255 <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#9a9a9a" stroke-width="2" style="margin-right:8px;">256 <circle cx="12" cy="12" r="10"/><path d="M12 8v8M12 6v2"/>257 </svg>258 Item availability and pricing are not guaranteed until payment is final.259 </span>260 </div>261 </div>262 263 <div class="divider"></div>264 265 <!-- Summary -->266 <div class="summary">267 <div class="line">268 <div>Item total:</div>269 <div class="strike">19,89€</div>270 </div>271 <div class="line">272 <div>Item discount:</div>273 <div class="discount">-8,91€</div>274 </div>275 <div class="line">276 <div></div>277 <div>10,98€</div>278 </div>279 280 <div class="est-title">Estimated total</div>281 <div class="est-total">10,98€</div>282 </div>283 284 <div class="divider"></div>285 286 <!-- Explore -->287 <div class="explore">288 <h3>Explore your interests</h3>289 <div class="cards">290 <!-- Card 1 -->291 <div class="card section">292 <div class="img">[IMG: Adjustable wrench close-up]</div>293 <div class="rating">294 <div class="stars">295 <svg viewBox="0 0 24 24" fill="#111"><path d="M12 2l3 7h7l-5.5 4.2L18 20l-6-3.6L6 20l1.5-6.8L2 9h7z"/></svg>296 <svg viewBox="0 0 24 24" fill="#111"><path d="M12 2l3 7h7l-5.5 4.2L18 20l-6-3.6L6 20l1.5-6.8L2 9h7z"/></svg>297 <svg viewBox="0 0 24 24" fill="#111"><path d="M12 2l3 7h7l-5.5 4.2L18 20l-6-3.6L6 20l1.5-6.8L2 9h7z"/></svg>298 <svg viewBox="0 0 24 24" fill="#111"><path d="M12 2l3 7h7l-5.5 4.2L18 20l-6-3.6L6 20l1.5-6.8L2 9h7z"/></svg>299 <svg viewBox="0 0 24 24" fill="#111"><path d="M12 2l3 7h7l-5.5 4.2L18 20l-6-3.6L6 20l1.5-6.8L2 9h7z"/></svg>300 </div>301 <span class="muted">(2.194)</span>302 </div>303 <div class="price-card">3,37€ <span class="sold">361 sold</span></div>304 <div class="add-btn">Add to cart</div>305 </div>306 307 <!-- Card 2 -->308 <div class="card section">309 <div class="img">[IMG: Wall shelf bracket under wooden board]</div>310 <div class="rating">311 <div class="stars">312 <svg viewBox="0 0 24 24" fill="#111"><path d="M12 2l3 7h7l-5.5 4.2L18 20l-6-3.6L6 20l1.5-6.8L2 9h7z"/></svg>313 <svg viewBox="0 0 24 24" fill="#111"><path d="M12 2l3 7h7l-5.5 4.2L18 20l-6-3.6L6 20l1.5-6.8L2 9h7z"/></svg>314 <svg viewBox="0 0 24 24" fill="#111"><path d="M12 2l3 7h7l-5.5 4.2L18 20l-6-3.6L6 20l1.5-6.8L2 9h7z"/></svg>315 <svg viewBox="0 0 24 24" fill="#111"><path d="M12 2l3 7h7l-5.5 4.2L18 20l-6-3.6L6 20l1.5-6.8L2 9h7z"/></svg>316 <svg viewBox="0 0 24 24" fill="#111" style="opacity:.4"><path d="M12 2l3 7h7l-5.5 4.2L18 20l-6-3.6L6 20l1.5-6.8L2 9h7z"/></svg>317 </div>318 <span class="muted">(5.432)</span>319 </div>320 <div class="price-card">4,78€ <span class="sold">145 sold</span></div>321 <div class="add-btn">Add to cart</div>322 </div>323 324 <!-- Card 3 -->325 <div class="card section">326 <div class="img">[IMG: Set of small adjustable hammer tools]</div>327 <div class="rating">328 <div class="stars">329 <svg viewBox="0 0 24 24" fill="#111"><path d="M12 2l3 7h7l-5.5 4.2L18 20l-6-3.6L6 20l1.5-6.8L2 9h7z"/></svg>330 <svg viewBox="0 0 24 24" fill="#111"><path d="M12 2l3 7h7l-5.5 4.2L18 20l-6-3.6L6 20l1.5-6.8L2 9h7z"/></svg>331 <svg viewBox="0 0 24 24" fill="#111"><path d="M12 2l3 7h7l-5.5 4.2L18 20l-6-3.6L6 20l1.5-6.8L2 9h7z"/></svg>332 <svg viewBox="0 0 24 24" fill="#111"><path d="M12 2l3 7h7l-5.5 4.2L18 20l-6-3.6L6 20l1.5-6.8L2 9h7z"/></svg>333 <svg viewBox="0 0 24 24" fill="#111" style="opacity:.2"><path d="M12 2l3 7h7l-5.5 4.2L18 20l-6-3.6L6 20l1.5-6.8L2 9h7z"/></svg>334 </div>335 <span class="muted">(94)</span>336 </div>337 <div class="price-card">1,28€ <span class="sold">156 sold</span></div>338 <div class="add-btn">Add to cart</div>339 </div>340 </div>341 </div>