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 List UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Status bar */18 .status-bar {19 height: 90px;20 background: #000;21 color: #fff;22 display: flex;23 align-items: center;24 padding: 0 32px;25 font-weight: 600;26 font-size: 36px;27 }28 .status-bar .left { flex: 1; }29 .status-bar .icons { display: flex; gap: 24px; align-items: center; }30 .dot { width: 18px; height: 18px; border-radius: 50%; background: #fff; opacity: 0.9; }31 .battery { width: 36px; height: 18px; border: 2px solid #fff; position: relative; border-radius: 3px; }32 .battery::after { content: ""; position: absolute; right: -6px; top: 4px; width: 6px; height: 10px; background: #fff; border-radius: 1px; }33 .battery .level { height: 100%; width: 70%; background: #fff; }34 35 /* Header */36 .header {37 height: 120px;38 background: #fff;39 display: flex;40 align-items: center;41 padding: 0 28px;42 position: relative;43 border-bottom: 6px solid #8BC34A;44 }45 .header .left {46 width: 120px;47 display: flex;48 align-items: center;49 justify-content: flex-start;50 }51 .header .right {52 margin-left: auto;53 display: flex;54 align-items: center;55 gap: 36px;56 }57 .icon-btn {58 width: 72px;59 height: 72px;60 display: inline-flex;61 align-items: center;62 justify-content: center;63 cursor: default;64 }65 .icon-stroke { stroke: #5d5f16; }66 .icon-fill { fill: #5d5f16; }67 68 .cart {69 position: relative;70 }71 .badge {72 position: absolute;73 top: 2px;74 right: 2px;75 background: #d81b60;76 color: #fff;77 width: 46px;78 height: 46px;79 font-size: 28px;80 border-radius: 50%;81 display: flex;82 align-items: center;83 justify-content: center;84 }85 86 /* Search strip */87 .search-wrap {88 padding: 18px 28px 8px;89 background: #fff;90 }91 .search-outer {92 background: #8BC34A;93 border-radius: 60px;94 padding: 12px;95 }96 .search-inner {97 height: 96px;98 border-radius: 56px;99 background: #eeeeee;100 display: flex;101 align-items: center;102 padding: 0 28px;103 color: #555;104 font-weight: 700;105 font-size: 40px;106 letter-spacing: 0.2px;107 }108 .search-inner svg { margin-right: 20px; }109 110 /* Section title */111 .section-title {112 padding: 8px 34px 10px;113 color: #4e342e;114 font-weight: 800;115 font-size: 44px;116 letter-spacing: 1px;117 }118 119 /* Product list */120 .product {121 position: relative;122 padding: 30px 34px;123 border-top: 1px solid #e5e5e5;124 }125 .product:first-of-type { border-top: none; }126 .row {127 display: grid;128 grid-template-columns: 220px 1fr 210px;129 gap: 28px;130 align-items: start;131 }132 133 .img {134 width: 220px;135 height: 220px;136 background: #E0E0E0;137 border: 1px solid #BDBDBD;138 border-radius: 12px;139 display: flex;140 align-items: center;141 justify-content: center;142 color: #757575;143 text-align: center;144 font-size: 28px;145 padding: 10px;146 }147 .details .title {148 font-size: 42px;149 color: #333;150 line-height: 1.2;151 margin-bottom: 12px;152 font-weight: 700;153 }154 .details .qty {155 font-size: 36px;156 color: #555;157 margin-bottom: 18px;158 font-weight: 600;159 }160 .pricing {161 display: flex;162 align-items: baseline;163 gap: 16px;164 margin-bottom: 16px;165 }166 .old {167 color: #777;168 text-decoration: line-through;169 font-size: 36px;170 font-weight: 700;171 }172 .new {173 color: #d81b60;174 font-size: 40px;175 font-weight: 800;176 }177 .buy-chip {178 display: inline-block;179 background: #bfd79a;180 color: #2f3b15;181 padding: 18px 28px;182 border-radius: 40px;183 font-size: 32px;184 font-weight: 700;185 border: 1px solid #9dbd7d;186 }187 .add-btn {188 align-self: center;189 justify-self: end;190 width: 200px;191 height: 96px;192 background: #7CB342;193 color: #fff;194 font-weight: 800;195 font-size: 40px;196 border: none;197 border-radius: 18px;198 letter-spacing: 1px;199 }200 .fav-star {201 position: absolute;202 right: 40px;203 top: 26px;204 opacity: 0.5;205 }206 207 /* Bottom home indicator */208 .home-indicator {209 position: absolute;210 bottom: 18px;211 left: 50%;212 transform: translateX(-50%);213 width: 420px;214 height: 14px;215 background: #000;216 border-radius: 8px;217 opacity: 0.2;218 }219</style>220</head>221<body>222<div id="render-target">223 224 <!-- Status bar -->225 <div class="status-bar">226 <div class="left">12:40</div>227 <div class="icons">228 <div class="dot"></div>229 <div class="dot" style="transform: rotate(45deg);"></div>230 <div class="battery"><div class="level"></div></div>231 </div>232 </div>233 234 <!-- Header -->235 <div class="header">236 <div class="left">237 <div class="icon-btn" aria-label="Back">238 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">239 <path d="M15 18l-6-6 6-6" class="icon-stroke" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>240 </svg>241 </div>242 </div>243 <div class="right">244 <div class="icon-btn" aria-label="Search">245 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">246 <circle cx="11" cy="11" r="7" class="icon-stroke" stroke-width="2"></circle>247 <path d="M20 20l-3-3" class="icon-stroke" stroke-width="2" stroke-linecap="round"></path>248 </svg>249 </div>250 251 <div class="icon-btn cart" aria-label="Cart">252 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">253 <path d="M3 4h2l2 12h10l2-8H7" class="icon-stroke" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>254 <circle cx="9" cy="20" r="1.6" class="icon-fill"></circle>255 <circle cx="17" cy="20" r="1.6" class="icon-fill"></circle>256 </svg>257 <div class="badge">1</div>258 </div>259 260 <div class="icon-btn" aria-label="Menu">261 <svg width="44" height="44" viewBox="0 0 24 24" fill="#5d5f16">262 <circle cx="12" cy="5" r="2"></circle>263 <circle cx="12" cy="12" r="2"></circle>264 <circle cx="12" cy="19" r="2"></circle>265 </svg>266 </div>267 </div>268 </div>269 270 <!-- Search -->271 <div class="search-wrap">272 <div class="search-outer">273 <div class="search-inner">274 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">275 <circle cx="11" cy="11" r="7" stroke="#666" stroke-width="2"></circle>276 <path d="M20 20l-3-3" stroke="#666" stroke-width="2" stroke-linecap="round"></path>277 </svg>278 Search279 </div>280 </div>281 </div>282 283 <div class="section-title">LATEST OFFERS</div>284 285 <!-- Product 1 -->286 <div class="product">287 <div class="fav-star">288 <svg width="64" height="64" viewBox="0 0 24 24" fill="none">289 <path d="M12 17.3l-5.6 3 1.1-6.5-4.7-4.6 6.5-.9L12 2l2.8 5.3 6.5.9-4.7 4.6 1.1 6.5z"290 stroke="#9E9E9E" fill="none" stroke-width="1.6"/>291 </svg>292 </div>293 <div class="row">294 <div class="img">[IMG: Eggs Box]</div>295 <div class="details">296 <div class="title">Keggs Brown Eggs ,6 Pcs Box</div>297 <div class="qty">1 Pc</div>298 <div class="pricing">299 <div class="old">MRP ₹140</div>300 <div class="new">₹126</div>301 </div>302 <div class="buy-chip">Buy @ Rs.126.00/-</div>303 </div>304 <button class="add-btn">ADD</button>305 </div>306 </div>307 308 <!-- Product 2 -->309 <div class="product">310 <div class="fav-star">311 <svg width="64" height="64" viewBox="0 0 24 24" fill="none">312 <path d="M12 17.3l-5.6 3 1.1-6.5-4.7-4.6 6.5-.9L12 2l2.8 5.3 6.5.9-4.7 4.6 1.1 6.5z"313 stroke="#B0B0B0" fill="none" stroke-width="1.6"/>314 </svg>315 </div>316 <div class="row">317 <div class="img">[IMG: Seasoning Grinder Tin]</div>318 <div class="details">319 <div class="title">On1Y Italian Seasoning Grinder, 35G Tin</div>320 <div class="qty">1 Pc</div>321 <div class="pricing">322 <div class="old">MRP ₹139</div>323 <div class="new">₹118.15</div>324 </div>325 <div class="buy-chip">Buy @ Rs.118.15/-</div>326 </div>327 <button class="add-btn">ADD</button>328 </div>329 </div>330 331 <!-- Product 3 -->332 <div class="product">333 <div class="fav-star">334 <svg width="64" height="64" viewBox="0 0 24 24" fill="none">335 <path d="M12 17.3l-5.6 3 1.1-6.5-4.7-4.6 6.5-.9L12 2l2.8 5.3 6.5.9-4.7 4.6 1.1 6.5z"336 stroke="#B0B0B0" fill="none" stroke-width="1.6"/>337 </svg>338 </div>339 <div class="row">340 <div class="img">[IMG: Blue Flame Chicken Shami Kebab Pouch]</div>341 <div class="details">342 <div class="title">Blue Flame Chicken Shami Kebab, 240G Pouch</div>343 <div class="qty">1 Pc</div>344 <div class="pricing">345 <div class="old">MRP ₹199</div>346 <div class="new">₹159.2</div>347 </div>348 <div class="buy-chip">Buy @ Rs.159.20/-</div>349 </div>350 <button class="add-btn">ADD</button>351 </div>352 </div>353 354 <!-- Product 4 -->355 <div class="product">356 <div class="fav-star">357 <svg width="64" height="64" viewBox="0 0 24 24" fill="none">358 <path d="M12 17.3l-5.6 3 1.1-6.5-4.7-4.6 6.5-.9L12 2l2.8 5.3 6.5.9-4.7 4.6 1.1 6.5z"359 stroke="#B0B0B0" fill="none" stroke-width="1.6"/>360 </svg>361 </div>362 <div class="row">363 <div class="img">[IMG: Blue Flame Chicken Reshmi Kebab Pouch]</div>364 <div class="details">365 <div class="title">Blue Flame Chicken Reshmi Kebab , 240G Pouch</div>366 <div class="qty">1 Pc</div>367 <div class="pricing">368 <div class="old">MRP ₹199</div>369 <div class="new">₹159.2</div>370 </div>371 <div class="buy-chip">Buy @ Rs.159.20/-</div>372 </div>373 <button class="add-btn">ADD</button>374 </div>375 </div>376 377 <div class="home-indicator"></div>378</div>379</body>380</html>