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>Shopsy Mock UI</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: #ffffff;15 }16 17 /* Status bar */18 .status-bar {19 height: 120px;20 background: #EDEDED;21 display: flex;22 align-items: center;23 padding: 0 40px;24 color: #333;25 font-size: 38px;26 letter-spacing: 1px;27 }28 .status-icons {29 margin-left: auto;30 display: flex;31 align-items: center;32 gap: 18px;33 }34 .dot { width: 14px; height: 14px; background: #777; border-radius: 50%; display: inline-block; }35 .status-icon {36 width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;37 }38 39 /* Header */40 .header {41 height: 140px;42 display: flex;43 align-items: center;44 justify-content: space-between;45 padding: 0 40px;46 border-bottom: 1px solid #f0f0f0;47 }48 .brand {49 color: #5B4AE6;50 font-size: 56px;51 font-weight: 700;52 letter-spacing: 0.5px;53 }54 .login {55 color: #2156F9;56 font-size: 44px;57 font-weight: 700;58 }59 60 /* Coupon banner */61 .coupon-wrap { padding: 22px 40px 8px; }62 .coupon {63 height: 210px;64 background: #F6E28D;65 border-radius: 28px;66 border: 1px solid #E0C96E;67 box-shadow: 0 4px 12px rgba(0,0,0,0.08);68 display: flex;69 overflow: hidden;70 }71 .coupon-left {72 width: 300px;73 background: #F1D671;74 display: flex;75 flex-direction: column;76 justify-content: center;77 padding-left: 30px;78 }79 .coupon-left .tiny-dots {80 width: 6px;81 height: 100%;82 border-left: 2px dashed #C9AE5B;83 margin-left: 24px;84 }85 .coupon-left .extra {86 font-size: 42px;87 font-weight: 800;88 color: #3B2E0A;89 line-height: 1.2;90 }91 .coupon-left .percent { font-size: 74px; color: #3B2E0A; }92 .coupon-right {93 flex: 1;94 display: flex;95 flex-direction: column;96 justify-content: center;97 padding: 0 36px;98 color: #3B2E0A;99 }100 .coupon-right .line1 {101 font-size: 44px;102 font-weight: 800;103 margin-bottom: 6px;104 }105 .coupon-right .line2 {106 font-size: 40px;107 font-weight: 600;108 }109 .coupon-right .terms {110 margin-top: 10px;111 font-size: 28px;112 color: #6f5b24;113 }114 115 /* Hero */116 .hero {117 margin: 16px 40px 0;118 height: 520px;119 border-radius: 16px;120 position: relative;121 overflow: hidden;122 background: linear-gradient(0deg, #53D9B9 0%, #6AE1C4 100%);123 box-shadow: 0 6px 16px rgba(0,0,0,0.08);124 }125 .hero::before {126 content: "";127 position: absolute;128 left: -60px; top: -30px; width: 520px; height: 520px;129 background: #5B4AE6;130 border-radius: 36px;131 transform: rotate(-6deg);132 opacity: 0.9;133 }134 .hero-content {135 position: absolute; left: 40px; top: 50px; z-index: 2; width: 560px; color: #fff;136 }137 .hero-title {138 font-size: 74px;139 font-weight: 900;140 line-height: 1.05;141 text-transform: uppercase;142 }143 .hero-sub {144 margin-top: 12px; font-size: 36px; font-weight: 600;145 }146 .hero-btn {147 margin-top: 24px;148 display: inline-block;149 background: #E56A4A;150 color: #fff;151 padding: 18px 30px;152 border-radius: 14px;153 font-size: 36px;154 font-weight: 800;155 box-shadow: 0 6px 0 #b94d31;156 }157 .hero-image {158 position: absolute; right: 20px; bottom: 10px; width: 440px; height: 480px;159 display: flex; justify-content: center; align-items: center;160 }161 .img-ph {162 width: 100%; height: 100%;163 background: #E0E0E0;164 border: 1px solid #BDBDBD;165 border-radius: 16px;166 display: flex; align-items: center; justify-content: center;167 color: #757575; font-size: 34px; text-align: center; padding: 10px;168 }169 .carousel-dots {170 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);171 display: flex; gap: 10px; z-index: 3;172 }173 .carousel-dots span {174 width: 36px; height: 10px; background: rgba(255,255,255,0.6); border-radius: 8px;175 }176 .carousel-dots span.active { background: #ffffff; }177 178 /* Categories */179 .categories { padding: 16px 20px; }180 .cat-row {181 display: flex;182 justify-content: space-between;183 padding: 0 20px;184 margin-top: 10px;185 }186 .cat-item {187 width: 160px;188 text-align: center;189 }190 .cat-thumb {191 width: 160px; height: 160px;192 border: 6px solid #E8D27C;193 border-radius: 32px;194 background: #FFFFFF;195 box-shadow: inset 0 0 0 3px rgba(255,255,255,0.6);196 display: flex; align-items: center; justify-content: center;197 overflow: hidden;198 }199 .cat-thumb .img-ph {200 width: 146px; height: 146px; border-radius: 22px; font-size: 28px;201 }202 .cat-label {203 margin-top: 10px;204 font-size: 32px;205 color: #3a3a3a;206 font-weight: 700;207 line-height: 1.1;208 }209 210 /* Blue pill advantages */211 .pill-wrap { padding: 10px 36px; }212 .pill {213 height: 120px;214 background: #3E4AF3;215 color: #fff;216 border-radius: 26px;217 display: grid;218 grid-template-columns: 1fr 1fr 1fr;219 align-items: center;220 padding: 0 34px;221 gap: 20px;222 }223 .pill-item {224 display: flex;225 align-items: center;226 gap: 16px;227 font-size: 32px;228 font-weight: 700;229 }230 .pill-item svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 3; }231 232 /* Loot Stores */233 .loot {234 margin: 20px 36px;235 height: 420px;236 border-radius: 18px;237 background: linear-gradient(180deg, #4A36A8 0%, #502CD4 100%);238 position: relative;239 color: #fff;240 overflow: hidden;241 }242 .loot-center {243 position: absolute; top: 60px; left: 50%; transform: translateX(-50%);244 text-align: center;245 }246 .loot-title {247 font-size: 60px; font-weight: 900; letter-spacing: 2px;248 }249 .loot-sub { margin-top: 20px; font-size: 34px; font-weight: 600; }250 .loot-grid {251 position: absolute; bottom: 30px; left: 30px; right: 30px;252 display: flex; justify-content: space-between; align-items: flex-end;253 }254 .loot-card {255 width: 320px; height: 260px;256 background: rgba(255,255,255,0.08);257 border: 1px solid rgba(255,255,255,0.18);258 border-radius: 16px;259 display: flex; align-items: center; justify-content: center;260 position: relative;261 overflow: hidden;262 }263 .loot-card .diamond {264 position: absolute; top: -30px; left: 50%; transform: translateX(-50%) rotate(45deg);265 width: 160px; height: 160px; background: #F9D63E; border-radius: 10px; box-shadow: 0 6px 10px rgba(0,0,0,0.3);266 display: flex; align-items: center; justify-content: center;267 color: #2b1f08; font-weight: 900; font-size: 40px;268 }269 .loot-card .cta {270 position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);271 background: #FFEEA8; color: #3b2e0a; font-weight: 800; font-size: 30px;272 padding: 10px 20px; border-radius: 12px;273 }274 275 /* Section title */276 .section-title {277 margin: 16px 40px;278 font-size: 48px;279 font-weight: 900;280 color: #5B4AE6;281 }282 283 /* Products */284 .product-row {285 margin: 0 30px;286 display: flex; gap: 22px;287 }288 .product-card {289 flex: 1;290 min-width: 0;291 height: 350px;292 background: #FFFFFF;293 border: 1px solid #EFE8C9;294 border-radius: 240px 240px 26px 26px;295 padding: 18px 18px 10px;296 box-shadow: 0 8px 14px rgba(0,0,0,0.05);297 display: flex; flex-direction: column; align-items: center;298 }299 .product-card .img-ph {300 width: 100%; height: 260px; border-radius: 220px 220px 18px 18px; font-size: 28px;301 }302 .product-name {303 margin-top: 8px; font-size: 30px; font-weight: 700; color: #333; text-align: center;304 }305 306 /* Bottom Tab Bar */307 .tabbar {308 position: absolute;309 bottom: 0; left: 0; right: 0;310 height: 160px;311 background: #fff;312 border-top: 1px solid #e6e6e6;313 display: flex; justify-content: space-around; align-items: center;314 padding-bottom: 18px;315 }316 .tab {317 width: 160px; text-align: center; color: #5f5f5f;318 }319 .tab .icon { width: 56px; height: 56px; margin: 0 auto; }320 .tab svg { width: 56px; height: 56px; stroke: #6b6b6b; fill: none; stroke-width: 3; }321 .tab .label { margin-top: 6px; font-size: 28px; }322 .tab.active { color: #5B4AE6; }323 .tab.active svg { stroke: #5B4AE6; }324 .badge {325 position: absolute; right: 36px; top: 16px;326 width: 18px; height: 18px; background: #FF4A4A; border-radius: 50%;327 }328 329 /* Home indicator */330 .home-indicator {331 position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);332 width: 220px; height: 12px; background: #000; border-radius: 8px; opacity: 0.8;333 }334</style>335</head>336<body>337<div id="render-target">338 <!-- Status Bar -->339 <div class="status-bar">340 11:14341 <div class="status-icons">342 <span class="dot"></span>343 <span class="dot"></span>344 <span class="dot"></span>345 <span class="dot"></span>346 <!-- Signal -->347 <span class="status-icon">348 <svg viewBox="0 0 24 24">349 <path d="M4 20h2M8 16h2M12 12h2M16 8h2" stroke="#555" stroke-width="2"/>350 </svg>351 </span>352 <!-- WiFi -->353 <span class="status-icon">354 <svg viewBox="0 0 24 24">355 <path d="M3 9c4-4 14-4 18 0M6 12c3-3 9-3 12 0M9 15c2-2 4-2 6 0M12 18h0" stroke="#555" stroke-width="2" fill="none"/>356 </svg>357 </span>358 <!-- Battery -->359 <span class="status-icon">360 <svg viewBox="0 0 28 16">361 <rect x="2" y="2" width="20" height="12" rx="2" stroke="#555" fill="none" stroke-width="2"></rect>362 <rect x="4" y="4" width="12" height="8" fill="#555"></rect>363 <rect x="22" y="6" width="4" height="4" rx="1" fill="#555"></rect>364 </svg>365 </span>366 </div>367 </div>368 369 <!-- Header -->370 <div class="header">371 <div class="brand">shopsy</div>372 <div class="login">Log in</div>373 </div>374 375 <!-- Coupon Banner -->376 <div class="coupon-wrap">377 <div class="coupon">378 <div class="coupon-left">379 <div class="extra">EXTRA <span class="percent">25%</span><br/>OFF</div>380 </div>381 <div class="coupon-right">382 <div class="line1">Limited Time Offer,</div>383 <div class="line2">Save Big on Your First order!</div>384 <div class="terms">*T&C Apply. Up to ₹40 on your first order!</div>385 </div>386 </div>387 </div>388 389 <!-- Hero -->390 <div class="hero">391 <div class="hero-content">392 <div class="hero-title">SUPER<br/>SE BHI UPAR<br/>DISCOUNTS!</div>393 <div class="hero-sub">Fashion, Beauty, Home & more</div>394 <div class="hero-btn">Sneak Peek</div>395 </div>396 <div class="hero-image">397 <div class="img-ph">[IMG: Model with vintage telephone]</div>398 </div>399 <div class="carousel-dots">400 <span class="active"></span>401 <span></span>402 <span></span>403 <span></span>404 <span></span>405 </div>406 </div>407 408 <!-- Categories -->409 <div class="categories">410 <div class="cat-row">411 <div class="cat-item">412 <div class="cat-thumb">413 <div class="img-ph">[IMG: Winter Fashion]</div>414 </div>415 <div class="cat-label">Winter<br/>Fashion</div>416 </div>417 <div class="cat-item">418 <div class="cat-thumb">419 <div class="img-ph">[IMG: Women's Fashion]</div>420 </div>421 <div class="cat-label">Women's<br/>Fashion</div>422 </div>423 <div class="cat-item">424 <div class="cat-thumb">425 <div class="img-ph">[IMG: Men's Fashion]</div>426 </div>427 <div class="cat-label">Men's<br/>Fashion</div>428 </div>429 <div class="cat-item">430 <div class="cat-thumb">431 <div class="img-ph">[IMG: Home Essentials]</div>432 </div>433 <div class="cat-label">Home</div>434 </div>435 <div class="cat-item">436 <div class="cat-thumb">437 <div class="img-ph">[IMG: Beauty & More]</div>438 </div>439 <div class="cat-label">Beauty<br/>& more</div>440 </div>441 <div class="cat-item">442 <div class="cat-thumb">443 <div class="img-ph">[IMG: Electronics]</div>444 </div>445 <div class="cat-label">Electronics</div>446 </div>447 </div>448 </div>449 450 <!-- Blue Pill Advantages -->451 <div class="pill-wrap">452 <div class="pill">453 <div class="pill-item">454 <svg viewBox="0 0 24 24"><path d="M3 12h6l3 6 3-6h6" /><path d="M3 12v6h6v-6" /></svg>455 <span>Affordable Prices</span>456 </div>457 <div class="pill-item">458 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="5"/><path d="M4 22c2-4 6-6 8-6s6 2 8 6"/></svg>459 <span>Good Quality</span>460 </div>461 <div class="pill-item">462 <svg viewBox="0 0 24 24"><path d="M3 6h18M4 10h16M6 14h12"/><path d="M6 18h12"/></svg>463 <span>Free Delivery</span>464 </div>465 </div>466 </div>467 468 <!-- Loot Stores -->469 <div class="loot">470 <div class="loot-center">471 <div class="loot-title">THE LOOT STORES</div>472 <div class="loot-sub">Additional 30% Off • Up to ₹40 applied during checkout</div>473 </div>474 <div class="loot-grid">475 <div class="loot-card">476 <div class="diamond">UNDER 45</div>477 <div class="img-ph">[IMG: Budget Store Left]</div>478 <div class="cta">SHOP NOW</div>479 </div>480 <div class="loot-card">481 <div class="img-ph">[IMG: Center Display]</div>482 </div>483 <div class="loot-card">484 <div class="diamond">UNDER 95</div>485 <div class="img-ph">[IMG: Budget Store Right]</div>486 <div class="cta">SHOP NOW</div>487 </div>488 </div>489 </div>490 491 <!-- Section Title -->492 <div class="section-title">Champion Deals on Bestsellers</div>493 494 <!-- Products -->495 <div class="product-row">496 <div class="product-card">497 <div class="img-ph">[IMG: Fashion accessory]</div>498 <div class="product-name">Trending Scarf</div>499 </div>500 <div class="product-card">501 <div class="img-ph">[IMG: Beauty organizer]</div>502 <div class="product-name">Fragrance Set</div>503 </div>504 <div class="product-card">505 <div class="img-ph">[IMG: Sports shoes]</div>506 <div class="product-name">Running Shoes</div>507 </div>508 </div>509 510 <!-- Bottom Tab Bar -->511 <div class="tabbar">512 <div class="tab active">513 <div class="icon">514 <svg viewBox="0 0 24 24">515 <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-4v-6H9v6H5a2 2 0 0 1-2-2v-9z"/>516 </svg>517 </div>518 <div class="label">Home</div>519 </div>520 <div class="tab">521 <div class="icon">522 <svg viewBox="0 0 24 24">523 <circle cx="11" cy="11" r="7"/>524 <path d="M21 21l-4.3-4.3"/>525 </svg>526 </div>527 <div class="label">Search</div>528 </div>529 <div class="tab">530 <div class="icon" style="position: relative;">531 <svg viewBox="0 0 24 24">532 <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>533 <rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/>534 </svg>535 <span class="badge"></span>536 </div>537 <div class="label">Categories</div>538 </div>539 <div class="tab">540 <div class="icon">541 <svg viewBox="0 0 24 24">542 <circle cx="12" cy="7" r="4"/><path d="M4 22c2-5 6-7 8-7s6 2 8 7"/>543 </svg>544 </div>545 <div class="label">Account</div>546 </div>547 <div class="tab">548 <div class="icon">549 <svg viewBox="0 0 24 24">550 <path d="M3 3h3l2 12h10l2-8H8"/><circle cx="10" cy="20" r="2"/><circle cx="18" cy="20" r="2"/>551 </svg>552 </div>553 <div class="label">Cart</div>554 </div>555 </div>556 557 <!-- Home Indicator -->558 <div class="home-indicator"></div>559</div>560</body>561</html>