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>Grocery App UI</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13 color: #1f2937;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #ffffff;21 }22 /* Top system status bar */23 .status-bar {24 position: absolute;25 top: 0;26 left: 0;27 width: 1080px;28 height: 120px;29 background: #000;30 color: #fff;31 }32 .status-inner {33 position: absolute;34 left: 40px;35 right: 40px;36 top: 30px;37 height: 60px;38 display: flex;39 align-items: center;40 justify-content: space-between;41 font-weight: 600;42 font-size: 44px;43 }44 .status-icons {45 display: flex;46 gap: 24px;47 align-items: center;48 }49 .status-icons svg {50 width: 40px;51 height: 40px;52 fill: #fff;53 opacity: 0.9;54 }55 56 /* Header area with search and membership banner */57 .header {58 position: absolute;59 top: 120px;60 left: 0;61 width: 1080px;62 height: 640px;63 background: #2f6de2;64 border-bottom-left-radius: 36px;65 border-bottom-right-radius: 36px;66 }67 .search-bar {68 position: absolute;69 left: 60px;70 right: 60px;71 top: 40px;72 height: 120px;73 background: #ffffff;74 border-radius: 64px;75 display: flex;76 align-items: center;77 padding: 0 36px;78 box-shadow: 0 6px 10px rgba(0,0,0,0.15);79 }80 .search-bar svg {81 width: 56px;82 height: 56px;83 margin-right: 24px;84 fill: none;85 stroke: #6b7280;86 stroke-width: 8;87 }88 .search-placeholder {89 color: #9ca3af;90 font-size: 44px;91 font-weight: 500;92 }93 94 .membership-banner {95 position: absolute;96 left: 60px;97 right: 60px;98 top: 200px;99 height: 260px;100 background: linear-gradient(0deg, #3b7cec 0%, #2f6de2 100%);101 border-radius: 28px;102 color: #fff;103 padding: 36px 40px;104 display: flex;105 align-items: center;106 justify-content: space-between;107 }108 .banner-left {109 display: flex;110 align-items: center;111 gap: 24px;112 }113 .banner-text {114 display: flex;115 flex-direction: column;116 }117 .banner-title {118 font-size: 44px;119 font-weight: 800;120 }121 .banner-sub {122 font-size: 36px;123 opacity: 0.95;124 margin-top: 12px;125 font-weight: 500;126 }127 .banner-arrow {128 width: 56px;129 height: 56px;130 fill: none;131 stroke: #ffffff;132 stroke-width: 8;133 }134 135 /* Explore Categories */136 .content {137 position: absolute;138 top: 760px;139 left: 0;140 right: 0;141 padding: 0 60px;142 }143 .section-title {144 font-size: 64px;145 font-weight: 800;146 color: #1f2937;147 margin-bottom: 40px;148 }149 .cat-grid {150 display: grid;151 grid-template-columns: repeat(4, 1fr);152 column-gap: 40px;153 row-gap: 60px;154 }155 .cat-item {156 text-align: center;157 }158 .cat-thumb {159 width: 200px;160 height: 200px;161 margin: 0 auto 20px auto;162 background: #E0E0E0;163 border: 1px solid #BDBDBD;164 color: #757575;165 border-radius: 50%;166 display: flex;167 align-items: center;168 justify-content: center;169 font-size: 34px;170 font-weight: 600;171 }172 .cat-label {173 font-size: 40px;174 font-weight: 700;175 color: #374151;176 }177 178 /* Promo card area */179 .promo-area {180 margin-top: 80px;181 display: flex;182 gap: 32px;183 align-items: flex-start;184 }185 .promo-card {186 width: 960px;187 height: 420px;188 background: linear-gradient(135deg, #d8d1ff 0%, #c1b7ff 100%);189 border-radius: 36px;190 box-shadow: 0 8px 16px rgba(47,109,226,0.25);191 position: relative;192 padding: 40px;193 overflow: hidden;194 }195 .promo-top {196 display: flex;197 align-items: center;198 gap: 24px;199 font-size: 44px;200 font-weight: 800;201 color: #2e3a59;202 }203 .mrp {204 color: #6b7280;205 font-weight: 800;206 margin-right: 16px;207 }208 .price-tag {209 background: #ffffff;210 color: #2f6de2;211 padding: 6px 16px;212 border-radius: 16px;213 display: inline-block;214 font-weight: 800;215 }216 .promo-body {217 margin-top: 20px;218 display: flex;219 justify-content: space-between;220 align-items: flex-end;221 }222 .promo-info {223 color: #3b3b66;224 }225 .promo-title {226 font-size: 52px;227 font-weight: 800;228 margin-bottom: 8px;229 }230 .promo-sub {231 font-size: 36px;232 font-weight: 600;233 opacity: 0.9;234 }235 .promo-btn {236 margin-top: 28px;237 background: #f4c430;238 color: #1f2937;239 font-weight: 800;240 font-size: 40px;241 padding: 20px 36px;242 border-radius: 20px;243 display: inline-block;244 box-shadow: 0 6px 0 #e0ab00;245 }246 .promo-img {247 width: 420px;248 height: 260px;249 background: #E0E0E0;250 border: 1px solid #BDBDBD;251 color: #757575;252 border-radius: 16px;253 display: flex;254 align-items: center;255 justify-content: center;256 font-size: 34px;257 font-weight: 700;258 margin-bottom: 16px;259 }260 .promo-badge {261 position: absolute;262 top: 26px;263 right: 26px;264 background: #7b6cff;265 color: #fff;266 font-weight: 900;267 font-size: 36px;268 padding: 12px 20px;269 border-radius: 20px;270 box-shadow: 0 6px 12px rgba(123,108,255,0.35);271 }272 273 /* Spacer below promo */274 .spacer {275 height: 480px;276 }277 278 /* Bottom navigation */279 .bottom-nav {280 position: absolute;281 left: 0;282 bottom: 0;283 width: 1080px;284 height: 220px;285 background: #ffffff;286 border-top: 1px solid #e5e7eb;287 display: flex;288 align-items: center;289 justify-content: space-around;290 }291 .nav-item {292 width: 180px;293 text-align: center;294 color: #6b7280;295 }296 .nav-item.active {297 color: #2f6de2;298 }299 .nav-icon {300 width: 72px;301 height: 72px;302 margin: 0 auto 12px auto;303 display: block;304 fill: none;305 stroke: currentColor;306 stroke-width: 6;307 }308 .nav-label {309 font-size: 36px;310 font-weight: 800;311 }312 .gesture-bar {313 position: absolute;314 left: 50%;315 transform: translateX(-50%);316 bottom: 18px;317 width: 320px;318 height: 16px;319 background: #000;320 border-radius: 8px;321 opacity: 0.85;322 }323</style>324</head>325<body>326<div id="render-target">327 <!-- Status Bar -->328 <div class="status-bar">329 <div class="status-inner">330 <div>12:33</div>331 <div class="status-icons">332 <!-- Simple icons to mimic status indicators -->333 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>334 <svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3"/></svg>335 <svg viewBox="0 0 24 24"><path d="M3 12h18"/></svg>336 <svg viewBox="0 0 24 24"><path d="M4 12l6 6 10-10"/></svg>337 </div>338 </div>339 </div>340 341 <!-- Header with Search and Banner -->342 <div class="header">343 <div class="search-bar">344 <svg viewBox="0 0 24 24">345 <circle cx="11" cy="11" r="7"></circle>346 <path d="M20 20l-5-5"></path>347 </svg>348 <div class="search-placeholder">Search from 5000+ products</div>349 </div>350 351 <div class="membership-banner">352 <div class="banner-left">353 <!-- Crown icon -->354 <svg viewBox="0 0 24 24" width="64" height="64" fill="#ffd34d" stroke="none">355 <path d="M3 17l2-8 5 4 4-6 5 6 2-4 0 8H3z"></path>356 </svg>357 <div class="banner-text">358 <div class="banner-title">You're eligible for a free membership trial!</div>359 <div class="banner-sub">Enjoy free deliveries starting from your 1st order</div>360 </div>361 </div>362 <!-- Arrow -->363 <svg class="banner-arrow" viewBox="0 0 24 24">364 <path d="M8 5l8 7-8 7"></path>365 </svg>366 </div>367 </div>368 369 <!-- Main Content -->370 <div class="content">371 <div class="section-title">Explore Categories</div>372 373 <div class="cat-grid">374 <div class="cat-item">375 <div class="cat-thumb">[IMG: Fresh]</div>376 <div class="cat-label">Fresh</div>377 </div>378 <div class="cat-item">379 <div class="cat-thumb">[IMG: Milk]</div>380 <div class="cat-label">Milk</div>381 </div>382 <div class="cat-item">383 <div class="cat-thumb">[IMG: Breakfast]</div>384 <div class="cat-label">Breakfast</div>385 </div>386 <div class="cat-item">387 <div class="cat-thumb">[IMG: Snacks]</div>388 <div class="cat-label">Snacks</div>389 </div>390 391 <div class="cat-item">392 <div class="cat-thumb">[IMG: Cooking]</div>393 <div class="cat-label">Cooking Delight</div>394 </div>395 <div class="cat-item">396 <div class="cat-thumb">[IMG: Dairy]</div>397 <div class="cat-label">Dairy Goodness</div>398 </div>399 <div class="cat-item">400 <div class="cat-thumb">[IMG: Beverages]</div>401 <div class="cat-label">Beverages</div>402 </div>403 <div class="cat-item">404 <div class="cat-thumb">[IMG: Packaged]</div>405 <div class="cat-label">Packaged Food</div>406 </div>407 </div>408 409 <div class="promo-area">410 <div class="promo-card">411 <div class="promo-badge">TOP UP SALE</div>412 <div class="promo-top">413 <span class="mrp">MRP ₹ 90</span>414 <span class="price-tag">₹59</span>415 </div>416 <div class="promo-body">417 <div class="promo-info">418 <div class="promo-title">Strawberry</div>419 <div class="promo-sub">200 GM - 225 GM</div>420 <div class="promo-btn">Order Now</div>421 </div>422 <div>423 <div class="promo-img">[IMG: Strawberries]</div>424 </div>425 </div>426 </div>427 </div>428 429 <div class="spacer"></div>430 </div>431 432 <!-- Bottom Navigation -->433 <div class="bottom-nav">434 <div class="nav-item active">435 <svg class="nav-icon" viewBox="0 0 24 24">436 <path d="M3 11l9-7 9 7"></path>437 <path d="M5 10v10h14V10"></path>438 </svg>439 <div class="nav-label">Home</div>440 </div>441 <div class="nav-item">442 <svg class="nav-icon" viewBox="0 0 24 24">443 <rect x="3" y="3" width="7" height="7"></rect>444 <rect x="14" y="3" width="7" height="7"></rect>445 <rect x="3" y="14" width="7" height="7"></rect>446 <rect x="14" y="14" width="7" height="7"></rect>447 </svg>448 <div class="nav-label">Categories</div>449 </div>450 <div class="nav-item">451 <svg class="nav-icon" viewBox="0 0 24 24">452 <path d="M6 6h15l-2 12H7L6 6z"></path>453 <path d="M6 6l-2-2"></path>454 </svg>455 <div class="nav-label">Basket</div>456 </div>457 <div class="nav-item">458 <svg class="nav-icon" viewBox="0 0 24 24">459 <rect x="5" y="3" width="14" height="18" rx="2"></rect>460 <path d="M5 8h14"></path>461 </svg>462 <div class="nav-label">Wallet</div>463 </div>464 <div class="nav-item">465 <svg class="nav-icon" viewBox="0 0 24 24">466 <path d="M4 6h16"></path>467 <path d="M4 12h16"></path>468 <path d="M4 18h16"></path>469 </svg>470 <div class="nav-label">More</div>471 </div>472 <div class="gesture-bar"></div>473 </div>474</div>475</body>476</html>