GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Ochama UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: linear-gradient(180deg, #241534 0px, #241534 280px, #f7f7f9 280px);13 color: #222;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 18px;20 left: 24px;21 right: 24px;22 height: 40px;23 display: flex;24 justify-content: space-between;25 align-items: center;26 color: #ffffff;27 font-weight: 600;28 letter-spacing: 0.5px;29 }30 .status-icons {31 display: flex;32 gap: 20px;33 align-items: center;34 }35 .icon {36 width: 34px;37 height: 24px;38 }39 40 /* Header / logo area */41 .header {42 position: absolute;43 top: 64px;44 left: 24px;45 right: 24px;46 height: 70px;47 display: flex;48 align-items: center;49 justify-content: space-between;50 color: #fff;51 }52 .brand {53 display: flex;54 align-items: center;55 gap: 20px;56 }57 .brand-badge {58 width: 46px;59 height: 46px;60 border-radius: 50%;61 background: #ff4a33;62 display: flex;63 align-items: center;64 justify-content: center;65 color: #fff;66 font-weight: 800;67 }68 .brand-name {69 font-size: 42px;70 font-weight: 800;71 letter-spacing: 0.5px;72 }73 .pickup {74 display: flex;75 align-items: center;76 gap: 16px;77 color: #fff;78 }79 .pickup .count {80 background: #ffde83;81 color: #3b2d12;82 font-size: 24px;83 font-weight: 700;84 padding: 6px 12px;85 border-radius: 16px;86 margin-right: 6px;87 }88 .pickup .label {89 font-size: 30px;90 font-weight: 700;91 }92 93 /* Search */94 .search {95 position: absolute;96 top: 140px;97 left: 24px;98 right: 24px;99 height: 98px;100 background: #ffffff;101 border-radius: 60px;102 display: flex;103 align-items: center;104 padding: 0 28px;105 box-shadow: 0 8px 20px rgba(0,0,0,0.18);106 }107 .search svg { width: 42px; height: 42px; margin-right: 16px; }108 .search input {109 border: none;110 outline: none;111 font-size: 34px;112 width: 100%;113 color: #777;114 background: transparent;115 }116 117 /* Main content area */118 .content {119 position: absolute;120 top: 260px;121 left: 0;122 right: 0;123 padding: 20px 24px 160px 24px;124 }125 126 .notice {127 background: #ffffff;128 border-radius: 18px;129 box-shadow: 0 8px 18px rgba(0,0,0,0.08);130 padding: 24px;131 display: flex;132 align-items: center;133 gap: 18px;134 font-size: 30px;135 margin-bottom: 24px;136 }137 .notice .mini-logo {138 width: 56px; height: 56px; border-radius: 12px; background: #e0e0e0;139 border: 1px solid #bdbdbd; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 20px;140 }141 .notice .red { color: #e53935; font-weight: 800; }142 .notice .green { color: #2e7d32; font-weight: 800; }143 144 /* Categories */145 .categories {146 background: #ffffff;147 border-radius: 18px;148 box-shadow: 0 8px 18px rgba(0,0,0,0.08);149 padding: 20px 18px 10px 18px;150 margin-bottom: 28px;151 }152 .cat-grid {153 display: grid;154 grid-template-columns: repeat(5, 1fr);155 gap: 14px 10px;156 }157 .cat-item {158 display: flex;159 flex-direction: column;160 align-items: center;161 gap: 10px;162 padding: 16px 8px;163 }164 .cat-thumb {165 width: 150px; height: 150px;166 border-radius: 50%;167 background: #E0E0E0;168 border: 1px solid #BDBDBD;169 display: flex; align-items: center; justify-content: center;170 color: #757575; font-size: 22px; text-align: center; padding: 8px;171 }172 .cat-label {173 font-size: 28px;174 color: #555;175 text-align: center;176 }177 178 /* New user benefits */179 .benefits {180 background: #ffffff;181 border-radius: 18px;182 box-shadow: 0 8px 18px rgba(0,0,0,0.08);183 padding: 20px;184 margin-bottom: 30px;185 }186 .benefits-header {187 display: flex;188 justify-content: space-between;189 align-items: center;190 }191 .benefits-header .title {192 font-size: 34px;193 font-weight: 800;194 color: #f05a54;195 background: #ffe7e5;196 padding: 10px 18px;197 border-radius: 12px;198 }199 .benefits-header .more {200 font-size: 30px; color: #777;201 }202 .benefit-list {203 display: flex;204 gap: 24px;205 margin-top: 18px;206 }207 .prod {208 width: 186px;209 display: flex;210 flex-direction: column;211 align-items: center;212 gap: 8px;213 }214 .prod .img {215 width: 186px; height: 160px;216 background: #E0E0E0; border: 1px solid #BDBDBD;217 display: flex; align-items: center; justify-content: center;218 color: #757575; font-size: 22px; text-align: center; padding: 6px;219 border-radius: 12px;220 }221 .price-row {222 display: flex; align-items: center; gap: 16px;223 width: 100%; justify-content: center;224 }225 .old {226 color: #9e9e9e; text-decoration: line-through; font-size: 26px;227 }228 .new {229 font-size: 30px; font-weight: 800;230 }231 .add-btn {232 width: 48px; height: 48px; border-radius: 50%;233 border: 2px solid #0d5bff; color: #0d5bff;234 display: flex; align-items: center; justify-content: center;235 font-size: 32px; font-weight: 700;236 }237 238 /* Black Friday banner */239 .bf-banner {240 background: #1c1b21;241 border-radius: 18px;242 box-shadow: 0 8px 18px rgba(0,0,0,0.3);243 color: #fff;244 height: 420px;245 display: flex; flex-direction: column; align-items: center; justify-content: center;246 gap: 14px;247 margin-bottom: 24px;248 }249 .bf-banner .pre {250 color: #f0d36a; font-size: 28px; letter-spacing: 2px;251 }252 .bf-banner .big {253 font-size: 120px; font-weight: 900; letter-spacing: 2px;254 }255 .bf-banner .cta {256 margin-top: 14px;257 background: #35333a; color: #fff; padding: 14px 24px; border-radius: 10px; font-size: 28px;258 border: 1px solid rgba(255,255,255,0.2);259 }260 261 /* Misc cards underneath the banner (light placeholders) */262 .below-cards {263 display: grid;264 grid-template-columns: 1fr 1fr;265 gap: 20px;266 margin-bottom: 150px;267 }268 .light-card {269 height: 240px;270 background: #ffffff;271 border-radius: 18px;272 box-shadow: 0 6px 14px rgba(0,0,0,0.08);273 display: flex; align-items: center; justify-content: center;274 color: #9e9e9e; font-size: 30px;275 }276 277 /* Bottom navigation bar */278 .bottom-nav {279 position: absolute;280 bottom: 0;281 left: 0; right: 0;282 height: 160px;283 background: #ffffff;284 border-top: 1px solid #e0e0e0;285 display: flex; align-items: center; justify-content: space-around;286 }287 .tab {288 display: flex; flex-direction: column; align-items: center; gap: 10px;289 color: #333;290 }291 .tab .tab-icon { width: 50px; height: 50px; }292 .tab .label { font-size: 26px; }293 294 /* Floating register banner */295 .register-banner {296 position: absolute;297 bottom: 190px;298 left: 24px; right: 24px;299 background: rgba(0,0,0,0.75);300 color: #fff;301 border-radius: 20px;302 padding: 24px;303 display: flex; align-items: center; justify-content: space-between;304 gap: 24px;305 }306 .register-banner .text {307 font-size: 30px; line-height: 40px;308 }309 .btn {310 background: #ff7a1a;311 color: #fff;312 font-size: 30px;313 font-weight: 800;314 padding: 20px 30px;315 border-radius: 30px;316 border: none;317 }318 .btn.secondary { background: #ff4a33; }319 320</style>321</head>322<body>323<div id="render-target">324 325 <!-- Status Bar -->326 <div class="status-bar">327 <div>11:14</div>328 <div class="status-icons">329 <!-- WiFi -->330 <svg class="icon" viewBox="0 0 24 24">331 <path fill="#ffffff" d="M12 18c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm-7-5c3.9-3.9 10.1-3.9 14 0l-2 2c-2.8-2.8-7.2-2.8-10 0l-2-2zm-3-4c6-6 16-6 22 0l-2 2c-5-5-13-5-18 0L2 9z"/>332 </svg>333 <!-- Battery -->334 <svg class="icon" viewBox="0 0 26 24">335 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="2"></rect>336 <rect x="4" y="8" width="12" height="8" fill="#ffffff"></rect>337 <rect x="21" y="9" width="3" height="6" fill="#ffffff"></rect>338 </svg>339 </div>340 </div>341 342 <!-- Header -->343 <div class="header">344 <div class="brand">345 <div class="brand-badge">O</div>346 <div class="brand-name">ochama</div>347 </div>348 <div class="pickup">349 <div class="count">500+</div>350 <!-- Store icon -->351 <svg width="36" height="36" viewBox="0 0 24 24">352 <path d="M3 9l2-5h14l2 5v11H3V9zm4 2v7h10v-7H7zm4-8h2v3h-2V3z" fill="#fff"></path>353 </svg>354 <div class="label">Pickup Points</div>355 </div>356 </div>357 358 <!-- Search Bar -->359 <div class="search">360 <svg viewBox="0 0 24 24">361 <path fill="#757575" d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1015.5 14l4.5 4.5-1.5 1.5-4.5-4.5zm-6 0A4.5 4.5 0 119 5a4.5 4.5 0 010 9z"/>362 </svg>363 <input type="text" placeholder="What are you looking for?">364 </div>365 366 <!-- Main Content -->367 <div class="content">368 369 <!-- Notice -->370 <div class="notice">371 <div class="mini-logo">[IMG: App Icon]</div>372 <div>Order before <span class="red">23:59</span>, pick up earliest the next day <span class="green">for free</span></div>373 </div>374 375 <!-- Categories -->376 <div class="categories">377 <div class="cat-grid">378 <div class="cat-item">379 <div class="cat-thumb">[IMG: World Food]</div>380 <div class="cat-label">World Food</div>381 </div>382 <div class="cat-item">383 <div class="cat-thumb">[IMG: Frozen Meat]</div>384 <div class="cat-label">Frozen</div>385 </div>386 <div class="cat-item">387 <div class="cat-thumb">[IMG: Electronics]</div>388 <div class="cat-label">Electronic</div>389 </div>390 <div class="cat-item">391 <div class="cat-thumb">[IMG: Home Appliances]</div>392 <div class="cat-label">Home Appliances</div>393 </div>394 <div class="cat-item">395 <div class="cat-thumb">[IMG: Beauty]</div>396 <div class="cat-label">Beauty</div>397 </div>398 399 <div class="cat-item">400 <div class="cat-thumb">[IMG: Breakfast Food]</div>401 <div class="cat-label">Food</div>402 </div>403 <div class="cat-item">404 <div class="cat-thumb">[IMG: Fresh Broccoli]</div>405 <div class="cat-label">Fresh</div>406 </div>407 <div class="cat-item">408 <div class="cat-thumb">[IMG: Beverage]</div>409 <div class="cat-label">Beverage</div>410 </div>411 <div class="cat-item">412 <div class="cat-thumb">[IMG: Household]</div>413 <div class="cat-label">Household</div>414 </div>415 <div class="cat-item">416 <div class="cat-thumb">[IMG: Home Living]</div>417 <div class="cat-label">Home Living</div>418 </div>419 </div>420 </div>421 422 <!-- New user benefits -->423 <div class="benefits">424 <div class="benefits-header">425 <div class="title">New user benefits</div>426 <div class="more">see more ></div>427 </div>428 <div class="benefit-list">429 <div class="prod">430 <div class="img">[IMG: Cooking Oil]</div>431 <div class="price-row">432 <div class="new">€2.99</div>433 <div class="add-btn">+</div>434 </div>435 </div>436 <div class="prod">437 <div class="img">[IMG: Air Fryer]</div>438 <div class="old">€69.99</div>439 <div class="price-row">440 <div class="new">€29.99</div>441 <div class="add-btn">+</div>442 </div>443 </div>444 <div class="prod">445 <div class="img">[IMG: Smart Scale]</div>446 <div class="old">€25.99</div>447 <div class="price-row">448 <div class="new">€20.99</div>449 <div class="add-btn">+</div>450 </div>451 </div>452 <div class="prod">453 <div class="img">[IMG: Memory Foam Pillow]</div>454 <div class="old">€25.99</div>455 <div class="price-row">456 <div class="new">€16.99</div>457 <div class="add-btn">+</div>458 </div>459 </div>460 <div class="prod">461 <div class="img">[IMG: Storage Shelf]</div>462 <div class="price-row">463 <div class="new">€35.99</div>464 <div class="add-btn">+</div>465 </div>466 </div>467 </div>468 </div>469 470 <!-- Black Friday banner -->471 <div class="bf-banner">472 <div class="pre">BLACK FRIDAY · PRE-SALE</div>473 <div class="big">70% OFF</div>474 <div class="cta">Unlock €10 Coupons</div>475 </div>476 477 <!-- Misc cards -->478 <div class="below-cards">479 <div class="light-card">[IMG: Promo Block]</div>480 <div class="light-card">[IMG: Promo Block]</div>481 </div>482 483 </div>484 485 <!-- Floating Register Banner -->486 <div class="register-banner">487 <div class="text">Register now and receive a €10 voucher. Don't miss out!</div>488 <div style="display:flex; gap:16px;">489 <button class="btn">Sign up</button>490 <button class="btn secondary">Sign in</button>491 </div>492 </div>493 494 <!-- Bottom Navigation -->495 <div class="bottom-nav">496 <div class="tab">497 <svg class="tab-icon" viewBox="0 0 24 24">498 <path fill="#333" d="M12 3l9 8h-3v10H6V11H3l9-8z"/>499 </svg>500 <div class="label">Home</div>501 </div>502 <div class="tab">503 <svg class="tab-icon" viewBox="0 0 24 24">504 <path fill="#333" d="M12 2l3 6 6 .9-4.5 4.2 1.1 6.9L12 17l-5.6 3.9 1.1-6.9L3 8.9 9 8l3-6z"/>505 </svg>506 <div class="label">Deals</div>507 </div>508 <div class="tab">509 <svg class="tab-icon" viewBox="0 0 24 24">510 <path fill="#333" d="M4 4h16v4H4V4zm0 6h16v4H4v-4zm0 6h16v4H4v-4z"/>511 </svg>512 <div class="label">Categories</div>513 </div>514 <div class="tab">515 <svg class="tab-icon" viewBox="0 0 24 24">516 <path fill="#333" d="M7 4h-2l-3 7v2h2l3 7h12v-2H9.4l-1.7-4H19v-2H6.6L7 9H21V7H7z"/>517 </svg>518 <div class="label">Cart</div>519 </div>520 <div class="tab">521 <svg class="tab-icon" viewBox="0 0 24 24">522 <path fill="#333" d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-5 0-9 2.5-9 5.5V22h18v-2.5C21 16.5 17 14 12 14z"/>523 </svg>524 <div class="label">Profile</div>525 </div>526 </div>527 528</div>529</body>530</html>