GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Mobile UI Mock</title>6<style>7 body {8 margin: 0;9 padding: 0;10 background: transparent;11 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;12 }13 #render-target {14 width: 1080px;15 height: 2400px;16 position: relative;17 overflow: hidden;18 background: linear-gradient(180deg, #bfe7e4 0%, #e7f6f4 140px, #f7f8fa 140px, #ffffff 100%);19 color: #111;20 }21 22 /* Status bar */23 .status-bar {24 height: 110px;25 padding: 0 32px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #0b1d24;30 font-weight: 600;31 font-size: 38px;32 }33 .status-icons {34 display: flex;35 align-items: center;36 gap: 26px;37 }38 .dot {39 width: 12px;40 height: 12px;41 background: #0b1d24;42 border-radius: 50%;43 opacity: .9;44 }45 46 /* Search */47 .search-wrap {48 padding: 10px 32px 18px;49 }50 .search-bar {51 height: 120px;52 background: #fff;53 border-radius: 26px;54 border: 1px solid #dfe3e7;55 display: flex;56 align-items: center;57 padding: 0 28px;58 box-shadow: 0 2px 0 rgba(0,0,0,0.03);59 gap: 22px;60 }61 .search-input {62 flex: 1;63 color: #222;64 font-size: 40px;65 }66 .search-input span {67 color: #666;68 }69 .icon-btn {70 width: 84px;71 height: 84px;72 border-radius: 20px;73 background: #eef7f7;74 display: flex;75 align-items: center;76 justify-content: center;77 border: 1px solid #dae9e9;78 }79 80 /* Location row */81 .location-row {82 display: flex;83 align-items: center;84 gap: 20px;85 padding: 14px 32px 22px;86 color: #0c3d3c;87 font-size: 36px;88 font-weight: 600;89 }90 .location-row .sub {91 color: #145b5a;92 font-weight: 600;93 }94 .caret {95 margin-left: 12px;96 width: 0;97 height: 0;98 border-left: 10px solid transparent;99 border-right: 10px solid transparent;100 border-top: 14px solid #145b5a;101 }102 103 /* Categories */104 .categories {105 display: flex;106 justify-content: space-between;107 padding: 16px 22px 28px;108 gap: 10px;109 }110 .cat {111 width: 160px;112 display: flex;113 flex-direction: column;114 align-items: center;115 gap: 16px;116 }117 .cat .ico {118 width: 140px;119 height: 140px;120 border-radius: 28px;121 background: #e6f4f3;122 border: 1px solid #cfe7e5;123 display: flex;124 align-items: center;125 justify-content: center;126 }127 .cat span {128 font-size: 30px;129 color: #222;130 }131 132 /* Hero banner */133 .hero {134 margin: 6px 0 0;135 padding: 0 0 10px;136 }137 .hero-banner {138 height: 560px;139 background: #E0E0E0;140 border: 1px solid #BDBDBD;141 margin: 0 22px;142 border-radius: 20px;143 display: flex;144 align-items: center;145 justify-content: center;146 color: #757575;147 text-align: center;148 font-size: 40px;149 line-height: 1.35;150 padding: 20px;151 }152 .pager-dots {153 margin-top: 18px;154 display: flex;155 justify-content: center;156 gap: 24px;157 }158 .pager-dots .dot-d {159 width: 18px;160 height: 18px;161 border-radius: 50%;162 border: 2px solid #8aa2a1;163 background: #dfeaea;164 }165 .pager-dots .dot-d.active {166 background: #0f6e6b;167 border-color: #0f6e6b;168 }169 170 /* Tiles row (horizontal scroll-like) */171 .cards-row {172 display: flex;173 gap: 22px;174 padding: 18px 22px;175 overflow: hidden;176 }177 .quick-actions {178 width: 340px;179 background: #fff;180 border: 1px solid #e4e7ea;181 border-radius: 22px;182 padding: 22px;183 display: grid;184 grid-template-columns: 1fr 1fr;185 gap: 24px;186 }187 .qa-item {188 height: 160px;189 border: 1px solid #e6ebef;190 border-radius: 18px;191 display: flex;192 flex-direction: column;193 justify-content: center;194 align-items: center;195 gap: 16px;196 background: #fbfdff;197 }198 .qa-item span {199 font-size: 30px;200 color: #222;201 }202 .mid-card, .small-card {203 background: #fff;204 border: 1px solid #e4e7ea;205 border-radius: 22px;206 padding: 22px;207 }208 .mid-card {209 width: 350px;210 }211 .small-card {212 width: 330px;213 }214 .card-title {215 font-size: 40px;216 font-weight: 700;217 color: #222;218 line-height: 1.2;219 margin-bottom: 16px;220 }221 .img-ph {222 width: 100%;223 height: 360px;224 background: #E0E0E0;225 border: 1px solid #BDBDBD;226 border-radius: 14px;227 color: #757575;228 display: flex;229 align-items: center;230 justify-content: center;231 text-align: center;232 font-size: 34px;233 }234 235 /* Feature badges */236 .features {237 margin: 8px 0 12px;238 padding: 0 22px;239 display: flex;240 gap: 18px;241 justify-content: space-between;242 }243 .feat {244 flex: 1;245 background: #fff;246 border: 1px solid #e4e7ea;247 border-radius: 20px;248 height: 120px;249 display: flex;250 align-items: center;251 gap: 22px;252 padding: 0 24px;253 color: #333;254 font-weight: 700;255 font-size: 32px;256 }257 .feat .round {258 width: 70px;259 height: 70px;260 background: #ffe9c9;261 border: 1px solid #ffd8a1;262 border-radius: 50%;263 }264 265 /* Promo banner */266 .promo {267 margin: 12px 0 180px;268 padding: 0 22px;269 }270 .promo .banner {271 height: 360px;272 border-radius: 20px;273 background: #E0E0E0;274 border: 1px solid #BDBDBD;275 display: flex;276 align-items: center;277 justify-content: center;278 color: #757575;279 font-size: 44px;280 text-align: center;281 }282 283 /* Bottom nav */284 .bottom-nav {285 position: absolute;286 bottom: 0;287 left: 0;288 right: 0;289 height: 160px;290 background: #ffffff;291 border-top: 1px solid #e6eaee;292 display: flex;293 justify-content: space-around;294 align-items: center;295 }296 .nav-item {297 width: 160px;298 display: flex;299 flex-direction: column;300 align-items: center;301 gap: 14px;302 color: #333;303 font-size: 28px;304 font-weight: 700;305 }306 .nav-item.active {307 color: #0f6e6b;308 }309 .badge {310 position: absolute;311 top: -8px;312 right: -8px;313 background: #0f6e6b;314 color: #fff;315 font-size: 24px;316 padding: 4px 10px;317 border-radius: 18px;318 }319 320 /* Utility */321 .muted {322 color: #6b6f75;323 }324</style>325</head>326<body>327<div id="render-target">328 329 <!-- Status Bar -->330 <div class="status-bar">331 <div>9:01</div>332 <div class="status-icons">333 <div class="dot"></div>334 <svg width="44" height="44" viewBox="0 0 24 24" fill="#0b1d24" xmlns="http://www.w3.org/2000/svg">335 <path d="M12 3C7 3 3 7 3 12h2a7 7 0 1114 0h2c0-5-4-9-9-9z"/>336 </svg>337 <svg width="44" height="44" viewBox="0 0 24 24" fill="#0b1d24" xmlns="http://www.w3.org/2000/svg">338 <path d="M4 7h16v10H4z" fill="none" stroke="#0b1d24" stroke-width="2"/>339 <path d="M20 9v6" stroke="#0b1d24" stroke-width="2"/>340 </svg>341 </div>342 </div>343 344 <!-- Search -->345 <div class="search-wrap">346 <div class="search-bar">347 <svg width="56" height="56" viewBox="0 0 24 24" fill="#333" xmlns="http://www.w3.org/2000/svg">348 <path d="M10 2a8 8 0 105.293 14.293l4.207 4.207 1.414-1.414-4.207-4.207A8 8 0 0010 2zm0 2a6 6 0 110 12A6 6 0 0110 4z"/>349 </svg>350 <div class="search-input"><span>1kg of oatmeal</span></div>351 <div class="icon-btn">352 <svg width="36" height="36" viewBox="0 0 24 24" fill="#0f6e6b" xmlns="http://www.w3.org/2000/svg">353 <path d="M12 5a7 7 0 100 14 7 7 0 000-14zm0-2a9 9 0 110 18 9 9 0 010-18zm-1 5h2v4h-2V8zm0 6h2v2h-2v-2z"/>354 </svg>355 </div>356 </div>357 </div>358 359 <!-- Location -->360 <div class="location-row">361 <svg width="40" height="40" viewBox="0 0 24 24" fill="#0f6e6b" xmlns="http://www.w3.org/2000/svg">362 <path d="M12 2a7 7 0 00-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 00-7-7zm0 9.5A2.5 2.5 0 119.5 9 2.5 2.5 0 0112 11.5z"/>363 </svg>364 <div class="sub">Delivering to Delhi 110001 - Update location</div>365 <div class="caret"></div>366 </div>367 368 <!-- Categories -->369 <div class="categories">370 <div class="cat">371 <div class="ico">372 <svg width="72" height="72" viewBox="0 0 24 24" fill="#0f6e6b" xmlns="http://www.w3.org/2000/svg">373 <path d="M5 4h14v12H5z" fill="none" stroke="#0f6e6b" stroke-width="2"/>374 <path d="M9 20h6" stroke="#0f6e6b" stroke-width="2"/>375 </svg>376 </div>377 <span>Mobiles</span>378 </div>379 <div class="cat">380 <div class="ico">381 <svg width="72" height="72" viewBox="0 0 24 24" fill="#0f6e6b" xmlns="http://www.w3.org/2000/svg">382 <circle cx="9" cy="12" r="3" fill="none" stroke="#0f6e6b" stroke-width="2"/>383 <path d="M2 17h20M15 9h5" stroke="#0f6e6b" stroke-width="2"/>384 </svg>385 </div>386 <span>Electronics</span>387 </div>388 <div class="cat">389 <div class="ico">390 <svg width="72" height="72" viewBox="0 0 24 24" fill="#0f6e6b" xmlns="http://www.w3.org/2000/svg">391 <path d="M3 10h18v8H3zM7 6h10v4H7z" fill="none" stroke="#0f6e6b" stroke-width="2"/>392 </svg>393 </div>394 <span>Home</span>395 </div>396 <div class="cat">397 <div class="ico">398 <svg width="72" height="72" viewBox="0 0 24 24" fill="#0f6e6b" xmlns="http://www.w3.org/2000/svg">399 <path d="M7 4l-2 8h14l-2-8M9 12v8M15 12v8" fill="none" stroke="#0f6e6b" stroke-width="2"/>400 </svg>401 </div>402 <span>Fashion</span>403 </div>404 <div class="cat">405 <div class="ico">406 <svg width="72" height="72" viewBox="0 0 24 24" fill="#0f6e6b" xmlns="http://www.w3.org/2000/svg">407 <rect x="4" y="5" width="16" height="10" rx="2" fill="none" stroke="#0f6e6b" stroke-width="2"/>408 <path d="M8 19h8" stroke="#0f6e6b" stroke-width="2"/>409 </svg>410 </div>411 <span>miniTV</span>412 </div>413 <div class="cat">414 <div class="ico">415 <svg width="72" height="72" viewBox="0 0 24 24" fill="#0f6e6b" xmlns="http://www.w3.org/2000/svg">416 <path d="M7 4h10v6H7zM5 10h14v10H5z" fill="none" stroke="#0f6e6b" stroke-width="2"/>417 </svg>418 </div>419 <span>Beauty</span>420 </div>421 </div>422 423 <!-- Hero Banner -->424 <div class="hero">425 <div class="hero-banner">[IMG: Home, kitchen & outdoors banner - Starting ₹79]</div>426 <div class="pager-dots">427 <div class="dot-d active"></div>428 <div class="dot-d"></div>429 <div class="dot-d"></div>430 <div class="dot-d"></div>431 <div class="dot-d"></div>432 <div class="dot-d"></div>433 <div class="dot-d"></div>434 </div>435 </div>436 437 <!-- Cards Row -->438 <div class="cards-row">439 <div class="quick-actions">440 <div class="qa-item">441 <svg width="52" height="52" viewBox="0 0 24 24" fill="#333" xmlns="http://www.w3.org/2000/svg">442 <path d="M3 7h18v10H3zM7 3h10v4H7z" fill="none" stroke="#0f6e6b" stroke-width="2"/>443 </svg>444 <span>Amazon Pay</span>445 </div>446 <div class="qa-item">447 <svg width="52" height="52" viewBox="0 0 24 24" fill="#333" xmlns="http://www.w3.org/2000/svg">448 <path d="M12 5v14M5 12h14" stroke="#0f6e6b" stroke-width="2"/>449 </svg>450 <span>Send Money</span>451 </div>452 <div class="qa-item">453 <svg width="52" height="52" viewBox="0 0 24 24" fill="#333" xmlns="http://www.w3.org/2000/svg">454 <path d="M7 7h10v10H7z" fill="none" stroke="#0f6e6b" stroke-width="2"/>455 <path d="M4 4h4M16 4h4M4 16v4M16 20h4" stroke="#0f6e6b" stroke-width="2"/>456 </svg>457 <span>Scan any QR</span>458 </div>459 <div class="qa-item">460 <svg width="52" height="52" viewBox="0 0 24 24" fill="#333" xmlns="http://www.w3.org/2000/svg">461 <path d="M4 6h16v12H4z" fill="none" stroke="#0f6e6b" stroke-width="2"/>462 <path d="M8 10h8M8 14h6" stroke="#0f6e6b" stroke-width="2"/>463 </svg>464 <span>Pay Bills</span>465 </div>466 </div>467 468 <div class="mid-card">469 <div class="card-title">Deal related to your saved items</div>470 <div class="img-ph">[IMG: Smart door lock deal]</div>471 </div>472 473 <div class="small-card">474 <div class="card-title">Continue browsing</div>475 <div class="img-ph">[IMG: Digital desk clock]</div>476 </div>477 </div>478 479 <!-- Feature badges -->480 <div class="features">481 <div class="feat">482 <div class="round"></div>483 <div>WIDE SELECTION</div>484 </div>485 <div class="feat">486 <div class="round"></div>487 <div>PAY ON DELIVERY</div>488 </div>489 <div class="feat">490 <div class="round"></div>491 <div>EASY RETURNS</div>492 </div>493 </div>494 495 <!-- Promo banner -->496 <div class="promo">497 <div class="banner">[IMG: Dettol - Foaming Handwash with 10X Better]</div>498 </div>499 500 <!-- Bottom Navigation -->501 <div class="bottom-nav">502 <div class="nav-item active">503 <svg width="42" height="42" viewBox="0 0 24 24" fill="#0f6e6b" xmlns="http://www.w3.org/2000/svg">504 <path d="M12 3l9 8h-3v9H6v-9H3l9-8z"/>505 </svg>506 <div>Home</div>507 </div>508 <div class="nav-item">509 <svg width="42" height="42" viewBox="0 0 24 24" fill="#333" xmlns="http://www.w3.org/2000/svg">510 <circle cx="12" cy="8" r="4"/>511 <path d="M4 21c1-4 5-6 8-6s7 2 8 6" fill="none" stroke="#333" stroke-width="2"/>512 </svg>513 <div>You</div>514 </div>515 <div class="nav-item">516 <svg width="42" height="42" viewBox="0 0 24 24" fill="#333" xmlns="http://www.w3.org/2000/svg">517 <path d="M4 6h16v4H4zM4 12h16v6H4z"/>518 </svg>519 <div>More</div>520 </div>521 <div class="nav-item" style="position: relative;">522 <svg width="42" height="42" viewBox="0 0 24 24" fill="#333" xmlns="http://www.w3.org/2000/svg">523 <path d="M6 6h15l-2 10H7L6 6zM7 20a2 2 0 100-4 2 2 0 000 4zm10 0a2 2 0 100-4 2 2 0 000 4z"/>524 </svg>525 <div class="badge">4</div>526 <div>Cart</div>527 </div>528 <div class="nav-item">529 <svg width="42" height="42" viewBox="0 0 24 24" fill="#333" xmlns="http://www.w3.org/2000/svg">530 <path d="M4 6h16v2H4zM4 11h16v2H4zM4 16h16v2H4z"/>531 </svg>532 <div>Menu</div>533 </div>534 </div>535 536</div>537</body>538</html>