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 { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;16 color: #111;17 }18 19 .content { padding: 40px 36px 140px; }20 21 /* Status bar */22 .status-bar {23 height: 80px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 font-size: 32px;28 color: #222;29 }30 .status-left, .status-right {31 display: flex;32 align-items: center;33 gap: 18px;34 }35 .status-dot {36 width: 20px; height: 20px; background:#000; border-radius:50%;37 }38 .wifi, .battery {39 width: 40px; height: 24px; border:2px solid #333; border-radius:6px; position: relative;40 }41 .wifi::before { content:""; position:absolute; left:6px; top:4px; width:24px; height:16px; border-radius:8px; border:2px solid #333; }42 .battery::after { content:""; position:absolute; right:-8px; top:6px; width:6px; height:12px; background:#333; border-radius:2px; }43 .avatar {44 width: 72px; height: 72px; border:2px solid #111; border-radius:50%; display:flex; align-items:center; justify-content:center;45 }46 .avatar svg { width: 38px; height: 38px; }47 48 /* Heading area */49 .subtle { font-size: 28px; letter-spacing: 0.5px; color:#555; font-weight: 700; }50 .eta { font-size: 86px; font-weight: 800; margin-top: 6px; }51 .location {52 display: flex; align-items: center; gap: 10px;53 font-size: 30px; color:#4b4b4b; margin-top: 10px;54 }55 .down-icon svg { width: 26px; height: 26px; }56 57 /* Search */58 .search-bar {59 margin-top: 36px;60 background: #F2F4F7;61 border: 1px solid #E1E5EB;62 border-radius: 24px;63 padding: 26px 26px;64 display: flex; align-items: center; gap: 22px;65 }66 .search-input { font-size: 34px; color:#7b7f86; flex:1; }67 .search-icon svg, .mic-icon svg { width: 40px; height: 40px; fill:none; stroke:#555; stroke-width:3px; }68 69 /* Section titles */70 .section {71 margin-top: 44px;72 }73 .section-title {74 display:flex; align-items:center; justify-content:space-between;75 }76 .section-title h2 { margin:0; font-size: 48px; font-weight: 800; }77 .section-title .see-all-link { color:#2f7a27; font-weight:700; font-size:30px; }78 79 /* Bestsellers cards */80 .bestseller-list { margin-top: 26px; display:flex; gap: 26px; }81 .bs-card { width: 320px; }82 .bs-grid {83 background:#EAF5EF;84 border: 2px solid #D8EAE0;85 border-radius: 28px;86 padding: 20px;87 display:grid; grid-template-columns: repeat(2, 1fr); gap: 16px;88 }89 .img-cell {90 height: 140px; background:#E0E0E0; border:1px solid #BDBDBD;91 display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px; border-radius:16px;92 }93 .more-cell {94 height: 140px; border-radius:16px; background:#ffffff; border:1px dashed #BDBDBD;95 display:flex; align-items:center; justify-content:center; color:#59666A; font-weight:800; font-size:36px;96 }97 .bs-name { margin-top: 22px; font-size: 34px; font-weight: 700; }98 .bs-count { margin-top: 6px; font-size: 28px; color:#6a6f75; }99 .pill {100 margin-top: 22px;101 border:1px solid #CBD5DC;102 padding: 16px 24px;103 border-radius: 16px;104 width: 180px; text-align:center;105 color:#1f6c1a; font-weight:700; font-size:30px;106 background:#f9fbfa;107 }108 109 /* Categories grid */110 .categories { margin-top: 40px; }111 .cat-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }112 .cat-card { }113 .cat-img {114 height: 220px;115 background:#EAF5EF;116 border: 1px solid #D7E9DF;117 border-radius: 28px;118 display:flex; align-items:center; justify-content:center; color:#6a6f75; font-size:28px; text-align:center; padding: 12px;119 }120 .cat-name {121 margin-top: 16px;122 font-size: 30px;123 font-weight: 700;124 color:#222;125 }126 127 /* Floating Categories button */128 .fab {129 position: absolute;130 right: 32px;131 bottom: 180px;132 background:#111;133 color:#fff;134 border-radius: 26px;135 padding: 22px 26px;136 display:flex; align-items:center; gap: 16px;137 box-shadow: 0 10px 24px rgba(0,0,0,0.25);138 }139 .fab svg { width: 38px; height: 38px; fill:none; stroke:#fff; stroke-width:3px; }140 .fab-label { font-size: 28px; font-weight: 800; }141 142 /* Gesture bar */143 .gesture {144 position: absolute;145 left: 50%;146 transform: translateX(-50%);147 bottom: 40px;148 width: 300px;149 height: 10px;150 background:#111;151 border-radius: 8px;152 opacity: 0.14;153 }154</style>155</head>156<body>157<div id="render-target">158 <div class="content">159 160 <!-- Status bar -->161 <div class="status-bar">162 <div class="status-left">163 <div>8:39</div>164 <div class="status-dot"></div>165 <div class="status-dot" style="background:#777;"></div>166 <div class="status-dot" style="background:#000;"></div>167 </div>168 <div class="status-right">169 <div class="wifi"></div>170 <div class="battery"></div>171 <div class="avatar">172 <svg viewBox="0 0 24 24">173 <circle cx="12" cy="8" r="4" stroke="#111" fill="none" stroke-width="2"></circle>174 <path d="M4 20c0-4 4-6 8-6s8 2 8 6" stroke="#111" fill="none" stroke-width="2"></path>175 </svg>176 </div>177 </div>178 </div>179 180 <!-- Heading -->181 <div class="subtle">DELIVERY IN</div>182 <div class="eta">8 minutes</div>183 <div class="location">184 <span>C5J3+QVC, Gwal Pahari, New Delhi, Delhi</span>185 <span class="down-icon">186 <svg viewBox="0 0 12 12">187 <path d="M2 4l4 4 4-4" stroke="#444" fill="none" stroke-width="2" stroke-linecap="round"></path>188 </svg>189 </span>190 </div>191 192 <!-- Search -->193 <div class="search-bar">194 <div class="search-icon">195 <svg viewBox="0 0 24 24">196 <circle cx="10" cy="10" r="7"></circle>197 <path d="M15 15 L21 21"></path>198 </svg>199 </div>200 <div class="search-input">Search "condom"</div>201 <div class="mic-icon">202 <svg viewBox="0 0 24 24">203 <rect x="9" y="5" width="6" height="10" rx="3"></rect>204 <path d="M6 11c0 4 12 4 12 0" ></path>205 <path d="M12 15 L12 20" ></path>206 </svg>207 </div>208 </div>209 210 <!-- Bestsellers -->211 <div class="section">212 <div class="section-title">213 <h2>Bestsellers</h2>214 <div class="see-all-link">see all</div>215 </div>216 217 <div class="bestseller-list">218 <!-- Card 1 -->219 <div class="bs-card">220 <div class="bs-grid">221 <div class="img-cell">[IMG: Milk Pack]</div>222 <div class="img-cell">[IMG: Milk Pack]</div>223 <div class="img-cell">[IMG: Milk Pack]</div>224 <div class="more-cell">+6</div>225 </div>226 <div class="bs-name">Milk, Curd & Paneer</div>227 <div class="bs-count">9 products</div>228 <div class="pill">See all</div>229 </div>230 231 <!-- Card 2 -->232 <div class="bs-card">233 <div class="bs-grid">234 <div class="img-cell">[IMG: Onions]</div>235 <div class="img-cell">[IMG: Potatoes]</div>236 <div class="img-cell">[IMG: Green Beans]</div>237 <div class="more-cell">+11</div>238 </div>239 <div class="bs-name">Vegetables</div>240 <div class="bs-count">14 products</div>241 <div class="pill">See all</div>242 </div>243 244 <!-- Card 3 -->245 <div class="bs-card">246 <div class="bs-grid">247 <div class="img-cell">[IMG: Oil Bottle]</div>248 <div class="img-cell">[IMG: Oil Pouch]</div>249 <div class="img-cell">[IMG: Oil Pouch]</div>250 <div class="img-cell">[IMG: Oil Pouch]</div>251 </div>252 <div class="bs-name">Cooking Oil</div>253 <div class="bs-count">3 products</div>254 <div class="pill">See all</div>255 </div>256 </div>257 </div>258 259 <!-- Shop by category -->260 <div class="categories">261 <div class="section-title">262 <h2>Shop by category</h2>263 </div>264 265 <div class="cat-grid">266 <div class="cat-card">267 <div class="cat-img">[IMG: Vegetables & Fruits]</div>268 <div class="cat-name">Vegetables & Fruits</div>269 </div>270 <div class="cat-card">271 <div class="cat-img">[IMG: Dairy & Breakfast]</div>272 <div class="cat-name">Dairy & Breakfast</div>273 </div>274 <div class="cat-card">275 <div class="cat-img">[IMG: Munchies Snacks]</div>276 <div class="cat-name">Munchies</div>277 </div>278 <div class="cat-card">279 <div class="cat-img">[IMG: Cold Drinks & Juices]</div>280 <div class="cat-name">Cold Drinks & Juices</div>281 </div>282 283 <div class="cat-card">284 <div class="cat-img">[IMG: Instant & Frozen Food]</div>285 <div class="cat-name">Instant & Frozen Food</div>286 </div>287 <div class="cat-card">288 <div class="cat-img">[IMG: Tea, Coffee & Health Drinks]</div>289 <div class="cat-name">Tea, Coffee & Health Drinks</div>290 </div>291 <div class="cat-card">292 <div class="cat-img">[IMG: Bakery & Biscuits]</div>293 <div class="cat-name">Bakery & Biscuits</div>294 </div>295 <div class="cat-card">296 <div class="cat-img">[IMG: Sweet Tooth]</div>297 <div class="cat-name">Sweet Tooth</div>298 </div>299 300 <div class="cat-card">301 <div class="cat-img">[IMG: Grains & Staples]</div>302 <div class="cat-name">Grains & Staples</div>303 </div>304 <div class="cat-card">305 <div class="cat-img">[IMG: Sauces & Spreads]</div>306 <div class="cat-name">Sauces & Spreads</div>307 </div>308 <div class="cat-card">309 <div class="cat-img">[IMG: Packaged Food]</div>310 <div class="cat-name">Packaged Food</div>311 </div>312 <div class="cat-card">313 <div class="cat-img">[IMG: Personal Care]</div>314 <div class="cat-name">Personal Care</div>315 </div>316 </div>317 </div>318 319 </div>320 321 <!-- Floating categories button -->322 <div class="fab">323 <svg viewBox="0 0 24 24">324 <circle cx="9" cy="12" r="5"></circle>325 <path d="M16 6c0 4 4 4 4 0" ></path>326 <rect x="14" y="10" width="6" height="10" rx="2"></rect>327 </svg>328 <div class="fab-label">CATEGORIES</div>329 </div>330 331 <!-- Gesture bar -->332 <div class="gesture"></div>333</div>334</body>335</html>