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>Just Fresh Produce - Mobile UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FFFFFF;15 border-radius: 26px;16 box-shadow: 0 8px 30px rgba(0,0,0,0.08);17 }18 /* Status bar */19 .status-bar {20 height: 150px;21 background: #CFCFCF;22 color: #fff;23 display: flex;24 align-items: center;25 justify-content: space-between;26 padding: 0 36px;27 box-sizing: border-box;28 }29 .status-time {30 font-weight: 600;31 font-size: 44px;32 color: #FFFFFF;33 letter-spacing: 0.5px;34 }35 .status-icons { display: flex; align-items: center; gap: 22px; }36 .icon-battery, .icon-wifi {37 width: 44px; height: 44px;38 display: inline-flex; align-items: center; justify-content: center;39 }40 41 /* Header */42 .header {43 padding: 28px 42px 10px 42px;44 display: flex;45 align-items: center;46 justify-content: space-between;47 }48 .brand {49 display: flex;50 align-items: center;51 gap: 22px;52 }53 .brand-badge {54 width: 110px; height: 110px;55 border: 1px solid #BDBDBD;56 border-radius: 18px;57 background: #FFFFFF;58 display: flex; align-items: center; justify-content: center;59 font-weight: 700; color: #111;60 }61 .brand-text { line-height: 1.2; }62 .brand-title {63 font-size: 50px;64 font-weight: 700;65 color: #1A1A1A;66 }67 .brand-sub {68 font-size: 28px;69 color: #6E6E6E;70 margin-top: 6px;71 }72 .profile {73 width: 96px; height: 96px;74 border-radius: 50%;75 background: #FFFFFF;76 border: 1px solid #E0E0E0;77 display: flex; align-items: center; justify-content: center;78 box-shadow: 0 6px 12px rgba(0,0,0,0.06);79 }80 81 /* Search */82 .search-wrap { padding: 6px 42px 26px 42px; }83 .search-bar {84 height: 120px;85 background: #F5F5F5;86 border: 2px solid #E3E3E3;87 border-radius: 60px;88 display: flex; align-items: center;89 padding: 0 36px;90 box-sizing: border-box;91 color: #9B9B9B;92 font-size: 38px;93 justify-content: space-between;94 }95 .search-text { color: #8A8A8A; }96 .search-icon { width: 64px; height: 64px; }97 98 /* Banners */99 .banner {100 margin: 26px 42px;101 height: 520px;102 border-radius: 38px;103 background: linear-gradient(90deg, #D8F7B5 0%, #F2FFCE 100%);104 box-shadow: 0 10px 18px rgba(0,0,0,0.08);105 position: relative;106 overflow: hidden;107 padding: 36px;108 box-sizing: border-box;109 }110 .banner .pill {111 background: #1E502C;112 color: #FFFFFF;113 border-radius: 90px;114 padding: 22px 36px;115 display: inline-block;116 font-size: 46px;117 font-weight: 800;118 }119 .banner .sub {120 margin-top: 18px;121 font-size: 34px;122 color: #2D5638;123 }124 .banner .cta {125 margin-top: 28px;126 display: inline-block;127 border-radius: 60px;128 border: 2px solid #294B35;129 color: #294B35;130 padding: 26px 40px;131 font-size: 36px;132 font-weight: 700;133 background: #EEF7E6;134 }135 .banner .note {136 position: absolute;137 left: 36px;138 bottom: 24px;139 color: #5D845F;140 font-size: 26px;141 }142 .banner .img {143 position: absolute;144 right: 26px;145 bottom: 0;146 width: 420px; height: 420px;147 background: #E0E0E0;148 border: 1px solid #BDBDBD;149 border-radius: 18px;150 display: flex; align-items: center; justify-content: center;151 color: #757575;152 text-align: center;153 padding: 12px;154 box-sizing: border-box;155 }156 157 /* Explore categories */158 .section-title {159 margin: 40px 42px 10px 42px;160 font-size: 52px;161 font-weight: 800;162 color: #222;163 }164 .categories {165 display: flex;166 gap: 38px;167 padding: 18px 42px 10px 42px;168 align-items: flex-start;169 }170 .cat-item { flex: 1; text-align: center; }171 .cat-circle {172 width: 200px; height: 200px;173 margin: 0 auto;174 border-radius: 50%;175 background: #E0E0E0;176 border: 1px solid #BDBDBD;177 box-shadow: 0 10px 16px rgba(0,0,0,0.08);178 display: flex; align-items: center; justify-content: center;179 color: #757575;180 font-size: 26px;181 }182 .cat-label {183 margin-top: 22px;184 font-size: 40px;185 color: #222;186 letter-spacing: 0.2px;187 }188 189 /* Second banner */190 .banner.alt {191 background: linear-gradient(90deg, #DFF8B8 0%, #EAFCCB 100%);192 height: 500px;193 }194 .banner.alt .pill { background: #22633B; font-size: 44px; }195 .banner.alt .sub { color: #2A6B41; }196 .banner.alt .img {197 right: 54px; bottom: 38px; width: 420px; height: 360px;198 }199 200 /* Floating button */201 .floating-btn {202 position: absolute;203 left: 66px;204 bottom: 590px;205 background: #8E73FF;206 color: #FFFFFF;207 font-weight: 700;208 font-size: 38px;209 padding: 26px 40px;210 border-radius: 100px;211 display: inline-flex; align-items: center; gap: 18px;212 box-shadow: 0 12px 22px rgba(142,115,255,0.35);213 }214 .floating-btn .star {215 width: 42px; height: 42px;216 }217 218 /* Info bar */219 .info-bar {220 position: absolute;221 left: 0; right: 0;222 bottom: 430px;223 height: 96px;224 background: #3E7BDC;225 color: #FFFFFF;226 font-size: 36px;227 font-weight: 700;228 display: flex; align-items: center; justify-content: center;229 }230 .info-bar::before {231 content: "";232 position: absolute; left: 80px; bottom: 0;233 width: 220px; height: 10px; background: #1A9E6F; border-radius: 6px;234 }235 .info-bar .accent { color: #FFFFFF; }236 .info-bar .accent b { color: #FFFFFF; text-decoration: underline; }237 238 /* Bottom navigation */239 .bottom-nav {240 position: absolute;241 left: 0; right: 0;242 bottom: 140px;243 height: 240px;244 background: #FFFFFF;245 border-top: 1px solid #E6E6E6;246 display: flex; align-items: center; justify-content: space-around;247 padding-top: 18px;248 }249 .nav-item { text-align: center; color: #3A3A3A; }250 .nav-item.active { color: #2E7D32; font-weight: 700; }251 .nav-icon {252 width: 72px; height: 72px; margin: 0 auto 14px auto;253 display: flex; align-items: center; justify-content: center;254 }255 .nav-label { font-size: 34px; }256 257 /* Home indicator */258 .home-indicator {259 position: absolute;260 left: 390px; bottom: 56px;261 width: 300px; height: 14px;262 background: #000000;263 opacity: 0.18;264 border-radius: 10px;265 }266</style>267</head>268<body>269<div id="render-target">270 271 <!-- Status bar -->272 <div class="status-bar">273 <div class="status-time">11:45</div>274 <div class="status-icons">275 <div class="icon-wifi">276 <svg viewBox="0 0 24 24" width="44" height="44" fill="#FFFFFF">277 <path d="M12 18a2 2 0 1 0 0.001 0zM2 9c5.333-4 14.667-4 20 0l-2 2c-4.667-3.333-11.333-3.333-16 0L2 9zm4 4c3.333-2.5 8.667-2.5 12 0l-2 2c-2.667-2-5.333-2-8 0l-2-2z"/>278 </svg>279 </div>280 <div class="icon-battery">281 <svg viewBox="0 0 30 18" width="44" height="44">282 <rect x="1" y="3" width="24" height="12" rx="3" fill="#FFFFFF"></rect>283 <rect x="26" y="6" width="3" height="6" rx="1" fill="#FFFFFF"></rect>284 <rect x="4" y="5" width="18" height="8" rx="2" fill="#81C784"></rect>285 </svg>286 </div>287 </div>288 </div>289 290 <!-- Header -->291 <div class="header">292 <div class="brand">293 <div class="brand-badge">Just</div>294 <div class="brand-text">295 <div class="brand-title">Fresh Produce</div>296 <div class="brand-sub">All Nature, No Nasty</div>297 </div>298 </div>299 <div class="profile">300 <svg viewBox="0 0 24 24" width="56" height="56">301 <circle cx="12" cy="8" r="4" fill="#2E7D32"></circle>302 <path d="M3 21c2.5-5 15.5-5 18 0" fill="none" stroke="#2E7D32" stroke-width="2" stroke-linecap="round"></path>303 </svg>304 </div>305 </div>306 307 <!-- Search -->308 <div class="search-wrap">309 <div class="search-bar">310 <div class="search-text">Search for desired products here</div>311 <div class="search-icon">312 <svg viewBox="0 0 24 24" width="64" height="64">313 <circle cx="10" cy="10" r="7" stroke="#2E7D32" stroke-width="3" fill="none"></circle>314 <line x1="16" y1="16" x2="22" y2="22" stroke="#2E7D32" stroke-width="3" stroke-linecap="round"></line>315 </svg>316 </div>317 </div>318 </div>319 320 <!-- Banner 1 -->321 <div class="banner">322 <div class="pill">Free Delivery* on all Orders</div>323 <div class="sub">Order Fresh Fruits & Veggies Whenever you need them</div>324 <div class="cta">Order Now</div>325 <div class="note">*Min. Order value: ₹99</div>326 <div class="img">[IMG: Grocery bag with assorted vegetables]</div>327 </div>328 329 <!-- Explore Categories -->330 <div class="section-title">Explore by Categories</div>331 <div class="categories">332 <div class="cat-item">333 <div class="cat-circle">[IMG: Vegetables]</div>334 <div class="cat-label">Vegetables</div>335 </div>336 <div class="cat-item">337 <div class="cat-circle">[IMG: Fruits]</div>338 <div class="cat-label">Fruits</div>339 </div>340 <div class="cat-item">341 <div class="cat-circle">[IMG: New Plucks]</div>342 <div class="cat-label">New Plucks</div>343 </div>344 <div class="cat-item">345 <div class="cat-circle">[IMG: Combos]</div>346 <div class="cat-label">Combos</div>347 </div>348 </div>349 350 <!-- Banner 2 -->351 <div class="banner alt">352 <div class="pill">Enjoy savings on next order</div>353 <div class="sub">Avail 30% Off up to ₹75 • Use Code: GET30</div>354 <div class="cta">Order Now</div>355 <div class="img">[IMG: Basket with assorted produce]</div>356 </div>357 358 <!-- Floating CTA -->359 <div class="floating-btn">360 <svg class="star" viewBox="0 0 24 24" fill="#FFFFFF">361 <path d="M12 2l3 6 7 1-5 4 2 7-7-3-7 3 2-7-5-4 7-1z"></path>362 </svg>363 <span>Add Fresh Arrivals</span>364 </div>365 366 <!-- Info Bar -->367 <div class="info-bar">368 YAY! You get <span class="accent"><b>FREE Delivery</b></span>369 </div>370 371 <!-- Bottom Navigation -->372 <div class="bottom-nav">373 <div class="nav-item">374 <div class="nav-icon">375 <svg viewBox="0 0 24 24" width="72" height="72" fill="#4D4D4D">376 <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9z"></path>377 </svg>378 </div>379 <div class="nav-label">Just</div>380 </div>381 <div class="nav-item active">382 <div class="nav-icon">383 <svg viewBox="0 0 24 24" width="72" height="72" fill="#2E7D32">384 <path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"></path>385 </svg>386 </div>387 <div class="nav-label">Explore</div>388 </div>389 <div class="nav-item">390 <div class="nav-icon">391 <svg viewBox="0 0 24 24" width="72" height="72" fill="#4D4D4D">392 <path d="M5 3h14v18H5V3zm2 4h10M7 10h10M7 14h10"></path>393 </svg>394 </div>395 <div class="nav-label">Orders</div>396 </div>397 </div>398 399 <!-- Home indicator -->400 <div class="home-indicator"></div>401 402</div>403</body>404</html>