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>Shopping App UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #E8D3BC;15 color: #222;16 }17 18 /* Status bar */19 .status-bar {20 height: 80px;21 padding: 0 32px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #5f5f5f;26 font-size: 36px;27 }28 .status-icons { display: flex; gap: 24px; align-items: center; }29 .dot { width: 12px; height: 12px; background: #5f5f5f; border-radius: 50%; display: inline-block; }30 31 /* Search */32 .search-wrap { padding: 12px 32px 6px; }33 .search-bar {34 background: #fff;35 border-radius: 60px;36 height: 112px;37 display: flex;38 align-items: center;39 padding: 0 24px;40 box-shadow: 0 2px 0 rgba(0,0,0,0.06) inset;41 }42 .search-input {43 flex: 1;44 font-size: 40px;45 color: #666;46 }47 .search-actions {48 display: flex; align-items: center; gap: 16px;49 }50 .circle-btn {51 width: 96px; height: 96px; border-radius: 48px; display: flex; align-items: center; justify-content: center;52 }53 .btn-light { background: #fff; border: 2px solid #ddd; }54 .btn-dark { background: #111; color: #fff; }55 56 /* Tabs */57 .tabs { display: flex; gap: 48px; padding: 18px 32px 8px; font-size: 42px; color: #3a3a3a; }58 .tab-active { font-weight: bold; position: relative; }59 .tab-active::after {60 content: ""; position: absolute; left: 0; bottom: -18px; width: 48px; height: 8px; background: #000; border-radius: 4px;61 }62 63 /* Banner */64 .banner {65 margin: 16px 32px;66 height: 300px;67 border-radius: 18px;68 overflow: hidden;69 }70 .img-ph {71 width: 100%; height: 100%;72 background: #E0E0E0;73 border: 1px solid #BDBDBD;74 display: flex; align-items: center; justify-content: center;75 color: #757575; font-size: 38px; letter-spacing: 0.3px;76 }77 78 /* Green benefits */79 .benefits {80 margin: 10px 32px;81 background: #0E6B4E;82 border-radius: 28px;83 padding: 28px 32px;84 display: grid; grid-template-columns: 1fr 1fr; gap: 24px;85 color: #fff;86 }87 .benefit {88 display: flex; gap: 18px; align-items: center; padding: 18px 16px; border-right: 1px solid rgba(255,255,255,0.25);89 }90 .benefit:last-child { border-right: none; }91 .benefit-title { font-size: 40px; font-weight: 700; }92 .benefit-sub { font-size: 30px; opacity: 0.9; margin-top: 6px; }93 94 /* Safe row */95 .safe-row { margin: 18px 32px; padding: 22px 16px; background: rgba(255,255,255,0.65); border-radius: 18px; display: flex; align-items: center; gap: 28px; }96 .safe-item { display: flex; align-items: center; gap: 12px; color: #666; font-size: 34px; }97 .divider { width: 1px; height: 32px; background: #C9C9C9; }98 .chev-right { margin-left: auto; }99 100 /* Lightning deals */101 .deals-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 32px 8px; }102 .deals-left { display: flex; align-items: center; gap: 16px; font-size: 40px; font-weight: 700; }103 .deals-right { display: flex; align-items: center; gap: 12px; font-size: 34px; color: #333; }104 .timer-box { background: #0E0E0E; color: #fff; padding: 6px 14px; border-radius: 8px; font-weight: 700; font-size: 34px; }105 106 /* Product cards */107 .product-row { display: flex; gap: 24px; padding: 8px 32px 24px; }108 .product-card { width: 248px; }109 .product-img { position: relative; width: 100%; height: 248px; }110 .tag {111 position: absolute; left: 8px; bottom: 8px; background: #CC2C2C; color: #fff; font-size: 28px; padding: 6px 10px; border-radius: 8px;112 }113 .price { font-size: 38px; color: #F18024; font-weight: 700; margin-top: 12px; }114 .sold { font-size: 28px; color: #777; margin-left: 10px; }115 .progress { height: 6px; background: #D9D9D9; border-radius: 4px; margin-top: 10px; }116 .progress::after { content: ""; display: block; width: 30%; height: 6px; background: #333; border-radius: 4px; }117 118 /* Categories */119 .section-title { display: flex; align-items: center; justify-content: space-between; padding: 24px 32px 8px; font-size: 44px; font-weight: 700; }120 .cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding: 8px 32px 24px; }121 .cat-item { text-align: center; }122 .cat-img-wrap { position: relative; width: 180px; height: 180px; margin: 0 auto 12px; border-radius: 90px; overflow: hidden; }123 .cat-img-wrap .img-ph { border-radius: 90px; }124 .badge {125 position: absolute; top: -10px; left: 50%; transform: translateX(-50%);126 background: #128C4D; color: #fff; font-size: 28px; padding: 6px 12px; border-radius: 28px;127 white-space: nowrap;128 }129 .cat-name { font-size: 34px; color: #222; line-height: 1.2; }130 131 /* Notification bar */132 .notif {133 position: absolute; left: 0; right: 0; bottom: 220px;134 margin: 0 0;135 background: rgba(0,0,0,0.85); color: #fff;136 height: 120px; display: flex; align-items: center; justify-content: space-between;137 padding: 0 24px 0 18px;138 }139 .notif-text { font-size: 36px; }140 .notif-close { color: #ccc; font-size: 36px; margin-right: 12px; }141 .notif-btn {142 background: #F1841F; color: #fff; font-weight: 700; padding: 16px 28px; border-radius: 28px; font-size: 36px;143 }144 145 /* Bottom nav */146 .bottom-nav {147 position: absolute; left: 0; right: 0; bottom: 90px;148 height: 170px;149 background: #7E1F1F;150 display: grid; grid-template-columns: repeat(4, 1fr);151 color: #fff;152 }153 .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }154 .nav-label { font-size: 30px; }155 .sub-label { font-size: 26px; opacity: 0.9; }156 .badge-dot {157 position: absolute; top: 16px; right: 52px; background: #F1841F; color: #fff; font-size: 24px; border-radius: 24px; padding: 6px 10px;158 }159 .badge-dot.small { right: 52px; font-size: 24px; padding: 6px 10px; }160 .nav-icon { width: 48px; height: 48px; }161 162 /* Gesture bar */163 .gesture {164 position: absolute; left: 50%; transform: translateX(-50%);165 bottom: 24px; width: 240px; height: 10px; background: #fff; border-radius: 10px; opacity: 0.9;166 }167 168 /* SVG helpers */169 svg { display: block; }170</style>171</head>172<body>173<div id="render-target">174 175 <!-- Status bar -->176 <div class="status-bar">177 <div>11:15</div>178 <div class="status-icons">179 <svg width="34" height="34" viewBox="0 0 24 24" fill="#6d6d6d"><circle cx="12" cy="12" r="10" stroke="#6d6d6d" stroke-width="2" fill="none"/><path d="M12 6v6l4 2" stroke="#6d6d6d" stroke-width="2" fill="none"/></svg>180 <svg width="34" height="34" viewBox="0 0 24 24" fill="#6d6d6d"><path d="M5 3h14v18H5z" fill="none" stroke="#6d6d6d" stroke-width="2"/><circle cx="12" cy="12" r="4" fill="none" stroke="#6d6d6d" stroke-width="2"/></svg>181 <div class="dot"></div>182 <div class="dot" style="width:8px;height:8px;"></div>183 <svg width="34" height="34" viewBox="0 0 24 24" fill="#6d6d6d"><path d="M18 6h-2v12h2c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zM6 6h2v12H6c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2z" /></svg>184 <div style="display:flex;align-items:center;gap:10px;">185 <svg width="34" height="34" viewBox="0 0 24 24" fill="#6d6d6d"><path d="M12 4l8 4v8l-8 4-8-4V8l8-4z" fill="none" stroke="#6d6d6d" stroke-width="2"/></svg>186 <span>94%</span>187 </div>188 </div>189 </div>190 191 <!-- Search -->192 <div class="search-wrap">193 <div class="search-bar">194 <div class="search-input">floating desk</div>195 <div class="search-actions">196 <div class="circle-btn btn-light">197 <svg width="42" height="42" viewBox="0 0 24 24" fill="#222">198 <rect x="3" y="6" width="18" height="12" rx="3" ry="3" stroke="#222" stroke-width="2" fill="none"/>199 <circle cx="12" cy="12" r="3" fill="none" stroke="#222" stroke-width="2"/>200 <path d="M8 6l2-2h4l2 2" stroke="#222" stroke-width="2" fill="none"/>201 </svg>202 </div>203 <div class="circle-btn btn-dark">204 <svg width="42" height="42" viewBox="0 0 24 24" fill="#fff">205 <circle cx="10" cy="10" r="6" fill="none" stroke="#fff" stroke-width="2"/>206 <path d="M15 15l5 5" stroke="#fff" stroke-width="2" fill="none"/>207 </svg>208 </div>209 </div>210 </div>211 </div>212 213 <!-- Tabs -->214 <div class="tabs">215 <div class="tab-active">All</div>216 <div>Women</div>217 <div>Men</div>218 <div>Kids</div>219 <div>Jewelry</div>220 <div>Bags</div>221 <div>Home</div>222 <div>Garden</div>223 </div>224 225 <!-- Banner -->226 <div class="banner">227 <div class="img-ph">[IMG: Holiday sale banner]</div>228 </div>229 230 <!-- Green benefits -->231 <div class="benefits">232 <div class="benefit">233 <svg width="60" height="60" viewBox="0 0 24 24" fill="#fff">234 <path d="M3 16V8h10l4 4v4H3z" fill="none" stroke="#fff" stroke-width="2"/>235 <circle cx="7" cy="16" r="2" fill="#fff"/>236 <circle cx="17" cy="16" r="2" fill="#fff"/>237 </svg>238 <div>239 <div class="benefit-title">Free shipping</div>240 <div class="benefit-sub">Limited-time offer</div>241 </div>242 </div>243 <div class="benefit">244 <svg width="60" height="60" viewBox="0 0 24 24" fill="#fff">245 <path d="M12 3l7 4v6c0 4-7 8-7 8s-7-4-7-8V7l7-4z" fill="none" stroke="#fff" stroke-width="2"/>246 <path d="M9 12l2 2 4-4" stroke="#fff" stroke-width="2" fill="none"/>247 </svg>248 <div>249 <div class="benefit-title">Delivery guarantee</div>250 <div class="benefit-sub">Refund for any issues</div>251 </div>252 </div>253 </div>254 255 <!-- Safe row -->256 <div class="safe-row">257 <div class="safe-item">258 <svg width="34" height="34" viewBox="0 0 24 24" fill="#666">259 <path d="M12 3l9 4v6c0 5-9 8-9 8S3 18 3 13V7l9-4z" fill="none" stroke="#666" stroke-width="2"/>260 </svg>261 Safe payment262 </div>263 <div class="divider"></div>264 <div class="safe-item">265 <svg width="34" height="34" viewBox="0 0 24 24" fill="#666">266 <rect x="5" y="8" width="14" height="12" rx="2" stroke="#666" stroke-width="2" fill="none"/>267 <path d="M8 8V6a4 4 0 018 0v2" stroke="#666" stroke-width="2" fill="none"/>268 </svg>269 Security privacy270 </div>271 <div class="divider"></div>272 <div class="safe-item">273 <svg width="34" height="34" viewBox="0 0 24 24" fill="#666">274 <rect x="2" y="6" width="20" height="12" rx="2" stroke="#666" stroke-width="2" fill="none"/>275 <rect x="4" y="9" width="8" height="2" fill="#666"/>276 </svg>277 Purchase protection278 </div>279 <div class="chev-right">280 <svg width="34" height="34" viewBox="0 0 24 24" fill="#777">281 <path d="M9 6l6 6-6 6" stroke="#777" stroke-width="2" fill="none"/>282 </svg>283 </div>284 </div>285 286 <!-- Lightning deals header -->287 <div class="deals-header">288 <div class="deals-left">289 <svg width="40" height="40" viewBox="0 0 24 24" fill="#000">290 <path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z" fill="#000"/>291 </svg>292 Lightning deals293 <svg width="28" height="28" viewBox="0 0 24 24" fill="#222"><path d="M9 6l6 6-6 6" stroke="#222" stroke-width="2" fill="none"/></svg>294 </div>295 <div class="deals-right">296 Ends in297 <span class="timer-box">03</span>298 <span class="timer-box">17</span>299 <span class="timer-box">14</span>300 <span class="timer-box">24</span>301 </div>302 </div>303 304 <!-- Product cards row -->305 <div class="product-row">306 <div class="product-card">307 <div class="product-img">308 <div class="img-ph">[IMG: Adjustable desk]</div>309 <div class="tag">CHRISTMAS</div>310 </div>311 <div class="price">49,94€ <span class="sold">44 sold</span></div>312 <div class="progress"></div>313 </div>314 <div class="product-card">315 <div class="product-img">316 <div class="img-ph">[IMG: Mini wrench]</div>317 <div class="tag">CHRISTMAS</div>318 </div>319 <div class="price">1,03€ <span class="sold">141 sold</span></div>320 <div class="progress"></div>321 </div>322 <div class="product-card">323 <div class="product-img">324 <div class="img-ph">[IMG: Leather wallets]</div>325 <div class="tag">CHRISTMAS</div>326 </div>327 <div class="price">12,07€ <span class="sold">1.6K+ sold</span></div>328 <div class="progress"></div>329 </div>330 <div class="product-card">331 <div class="product-img">332 <div class="img-ph">[IMG: Bracket hardware]</div>333 <div class="tag">CHRISTMAS</div>334 </div>335 <div class="price">5,30€ <span class="sold">1 sold</span></div>336 <div class="progress"></div>337 </div>338 </div>339 340 <!-- Categories -->341 <div class="section-title">342 <div>Categories</div>343 <svg width="40" height="40" viewBox="0 0 24 24" fill="#222"><path d="M9 6l6 6-6 6" stroke="#222" stroke-width="2" fill="none"/></svg>344 </div>345 <div class="cat-grid">346 <div class="cat-item">347 <div class="cat-img-wrap">348 <div class="badge">Up to 95% off</div>349 <div class="img-ph">[IMG: Camping tent]</div>350 </div>351 <div class="cat-name">Sports & Outdoors</div>352 </div>353 <div class="cat-item">354 <div class="cat-img-wrap">355 <div class="badge">From 0,58€</div>356 <div class="img-ph">[IMG: Robot toy]</div>357 </div>358 <div class="cat-name">Toys & Games</div>359 </div>360 <div class="cat-item">361 <div class="cat-img-wrap">362 <div class="badge">From 0,8€</div>363 <div class="img-ph">[IMG: Earbuds set]</div>364 </div>365 <div class="cat-name">Electronics</div>366 </div>367 <div class="cat-item">368 <div class="cat-img-wrap">369 <div class="badge">Up to 96% off</div>370 <div class="img-ph">[IMG: Dog with leash]</div>371 </div>372 <div class="cat-name">Pet Supplies</div>373 </div>374 375 <div class="cat-item">376 <div class="cat-img-wrap">377 <div class="badge">Up to 96% off</div>378 <div class="img-ph">[IMG: Stationery]</div>379 </div>380 <div class="cat-name">Office & School</div>381 </div>382 <div class="cat-item">383 <div class="cat-img-wrap">384 <div class="badge">From 0,38€</div>385 <div class="img-ph">[IMG: Kids T-shirt]</div>386 </div>387 <div class="cat-name">Kids' Fashion</div>388 </div>389 <div class="cat-item">390 <div class="cat-img-wrap">391 <div class="badge">Up to 95% off</div>392 <div class="img-ph">[IMG: Tools & materials]</div>393 </div>394 <div class="cat-name">Industrial & Commercial</div>395 </div>396 <div class="cat-item">397 <div class="cat-img-wrap">398 <div class="badge">Up to 96% off</div>399 <div class="img-ph">[IMG: Watch & jewelry]</div>400 </div>401 <div class="cat-name">Jewelry & Accessories</div>402 </div>403 </div>404 405 <!-- Spacer content to reach near bottom -->406 <div style="height: 380px;"></div>407 408 <!-- Notification bar -->409 <div class="notif">410 <div style="display:flex;align-items:center;">411 <div class="notif-close">✕</div>412 <div class="notif-text">Get notification-exclusive offer</div>413 </div>414 <div class="notif-btn">OK</div>415 </div>416 417 <!-- Bottom navigation -->418 <div class="bottom-nav">419 <div class="nav-item">420 <svg class="nav-icon" viewBox="0 0 24 24" fill="#fff">421 <path d="M3 10l9-7 9 7v9a2 2 0 01-2 2h-4v-6H9v6H5a2 2 0 01-2-2v-9z" fill="#fff"/>422 </svg>423 <div class="nav-label">Home</div>424 </div>425 <div class="nav-item">426 <svg class="nav-icon" viewBox="0 0 24 24" fill="#fff">427 <rect x="3" y="3" width="7" height="7" fill="#fff"/><rect x="14" y="3" width="7" height="7" fill="#fff"/><rect x="3" y="14" width="7" height="7" fill="#fff"/><rect x="14" y="14" width="7" height="7" fill="#fff"/>428 </svg>429 <div class="nav-label">Categories</div>430 </div>431 <div class="nav-item" style="position:relative;">432 <div class="badge-dot">99+</div>433 <svg class="nav-icon" viewBox="0 0 24 24" fill="#fff">434 <circle cx="12" cy="8" r="4" fill="#fff"/>435 <path d="M4 21c2-4 6-6 8-6s6 2 8 6" stroke="#fff" stroke-width="2" fill="none"/>436 </svg>437 <div class="nav-label">You</div>438 </div>439 <div class="nav-item" style="position:relative;">440 <div class="badge-dot small">1</div>441 <svg class="nav-icon" viewBox="0 0 24 24" fill="#fff">442 <path d="M6 6h14l-2 8H8L6 6z" fill="#fff"/><circle cx="9" cy="19" r="2" fill="#fff"/><circle cx="18" cy="19" r="2" fill="#fff"/>443 </svg>444 <div class="nav-label">Time-limited</div>445 <div class="sub-label">Cart | Free shipping</div>446 </div>447 </div>448 449 <!-- Gesture bar -->450 <div class="gesture"></div>451</div>452</body>453</html>