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 Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #2e2e2e; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 box-sizing: border-box;16 }17 18 /* Status bar */19 .status-bar {20 height: 110px;21 padding: 30px 40px 0 40px;22 box-sizing: border-box;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #3b3b3b;27 font-size: 40px;28 }29 .status-left { display: flex; align-items: center; gap: 20px; }30 .status-square {31 width: 40px; height: 40px; background: #777; border-radius: 6px;32 }33 .status-right { display: flex; align-items: center; gap: 26px; }34 .icon { width: 42px; height: 42px; }35 36 /* Header */37 .header {38 padding: 20px 40px 0 40px;39 display: flex;40 align-items: center;41 justify-content: space-between;42 }43 .store-left { display: flex; align-items: center; gap: 24px; }44 .round-btn {45 width: 72px; height: 72px; border-radius: 36px; background: #f2f0ef;46 display: flex; align-items: center; justify-content: center; border: 1px solid #e5e0dd;47 }48 .store-info .title {49 font-size: 56px; font-weight: 700; color: #7a1c1c;50 line-height: 1.1;51 }52 .store-info .sub {53 font-size: 36px; color: #7a7a7a; margin-top: 6px;54 }55 .cart-btn { color: #7a1c1c; }56 57 /* Search */58 .search-wrap {59 margin: 32px 40px 24px 40px;60 border: 2px solid #e7e7e7;61 border-radius: 48px;62 height: 120px;63 display: flex;64 align-items: center;65 padding: 0 34px;66 box-sizing: border-box;67 gap: 28px;68 }69 .search-text {70 font-size: 44px; color: #747474;71 flex: 1;72 }73 .scan-btn {74 width: 88px; height: 88px; border-radius: 44px; background: #f7f7f7;75 border: 1px solid #e5e5e5;76 display: flex; align-items: center; justify-content: center;77 }78 79 /* Pills row */80 .pills {81 display: flex; gap: 26px;82 padding: 10px 40px 20px 40px;83 }84 .pill {85 padding: 26px 40px;86 border: 2px solid #eaeaea;87 border-radius: 40px;88 font-size: 40px;89 color: #6a6a6a;90 background: #ffffff;91 }92 93 /* Feature icons row */94 .feature-row {95 padding: 36px 40px 20px 40px;96 display: flex; justify-content: space-between;97 text-align: center;98 }99 .feature {100 width: 160px;101 }102 .feature .feat-icon {103 width: 90px; height: 90px; margin: 0 auto 18px auto;104 }105 .feature .feat-label {106 font-size: 34px; color: #5a5a5a;107 }108 109 /* Section header */110 .section {111 padding: 30px 40px 10px 40px;112 }113 .section-top {114 display: flex; align-items: center; justify-content: space-between;115 margin-bottom: 16px;116 }117 .section-title {118 display: flex; align-items: center; gap: 18px;119 font-size: 56px; color: #3b1f1f;120 }121 .foru-badge {122 padding: 8px 16px; border: 2px solid #4caf50; color: #2e7d32;123 border-radius: 10px; font-weight: 700; font-size: 40px;124 }125 .see-all {126 display: flex; align-items: center; gap: 16px; color: #7a1c1c; font-size: 40px;127 }128 129 /* Deal cards */130 .cards {131 display: flex; gap: 26px;132 padding: 10px 40px 20px 40px;133 }134 .card {135 width: 480px;136 background: #ffffff;137 border: 2px solid #e9e6e3;138 border-radius: 26px;139 box-shadow: 0 2px 0 rgba(0,0,0,0.02);140 padding: 26px;141 box-sizing: border-box;142 }143 .chip {144 display: inline-block;145 background: #7a1c1c; color: #fff; font-size: 32px; padding: 12px 18px;146 border-radius: 12px; margin-bottom: 18px;147 }148 .img-placeholder {149 width: 100%; height: 260px; background: #E0E0E0; border: 1px solid #BDBDBD;150 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 42px; border-radius: 12px; margin-bottom: 18px;151 }152 .card h3 {153 font-size: 48px; color: #7a1c1c; margin: 6px 0 8px 0;154 }155 .card .subline {156 font-size: 42px; font-weight: 700; color: #3b3b3b; margin-top: 10px;157 }158 .card p {159 font-size: 34px; color: #6a6a6a; margin: 6px 0;160 }161 .link {162 color: #7a1c1c; text-decoration: underline; font-size: 34px;163 }164 .expires {165 font-size: 34px; color: #6a6a6a; margin-top: 10px;166 }167 .clip-btn {168 margin-top: 22px;169 height: 100px; border-radius: 50px;170 border: 3px dashed #7a1c1c; background: #fff;171 display: flex; align-items: center; justify-content: center;172 color: #7a1c1c; font-size: 42px; font-weight: 600;173 }174 175 /* Bottom nav */176 .bottom-nav {177 position: absolute; left: 0; right: 0; bottom: 0;178 height: 220px; background: #ffffff; border-top: 1px solid #ececec;179 display: flex; align-items: center; justify-content: space-around;180 padding-bottom: 40px;181 }182 .nav-item { text-align: center; color: #7a1c1c; }183 .nav-item .nav-icon { width: 70px; height: 70px; margin: 0 auto 10px auto; }184 .nav-item .label { font-size: 34px; }185 .home-indicator {186 position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);187 width: 300px; height: 16px; background: #000; border-radius: 8px; opacity: 0.15;188 }189 190 /* Utility icons color */191 .muted { color: #888; }192</style>193</head>194<body>195<div id="render-target">196 197 <!-- Status Bar -->198 <div class="status-bar">199 <div class="status-left">200 <div>11:19</div>201 <div class="status-square"></div>202 </div>203 <div class="status-right">204 <!-- WiFi -->205 <svg class="icon" viewBox="0 0 24 24">206 <path d="M2 8c5-4 15-4 20 0" fill="none" stroke="#555" stroke-width="2" />207 <path d="M6 12c3-3 9-3 12 0" fill="none" stroke="#555" stroke-width="2" />208 <path d="M10 16c2-2 4-2 6 0" fill="none" stroke="#555" stroke-width="2" />209 <circle cx="12" cy="19" r="1.6" fill="#555"></circle>210 </svg>211 <!-- Battery -->212 <svg class="icon" viewBox="0 0 24 24">213 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#555" stroke-width="2"></rect>214 <rect x="4" y="8" width="12" height="8" fill="#555"></rect>215 <rect x="20" y="10" width="2.5" height="6" rx="1" fill="#555"></rect>216 </svg>217 </div>218 </div>219 220 <!-- Header -->221 <div class="header">222 <div class="store-left">223 <div class="round-btn">224 <svg class="icon" viewBox="0 0 24 24">225 <path d="M6 9l6 6 6-6" fill="none" stroke="#7a1c1c" stroke-width="2" />226 </svg>227 </div>228 <div class="store-info">229 <div class="title">Store</div>230 <div class="sub">2600 5th St</div>231 </div>232 </div>233 <div class="round-btn cart-btn">234 <svg class="icon" viewBox="0 0 24 24">235 <path d="M3 5h3l2 10h10l2-7H7" fill="none" stroke="#7a1c1c" stroke-width="2" />236 <circle cx="9" cy="19" r="1.6" fill="#7a1c1c"></circle>237 <circle cx="17" cy="19" r="1.6" fill="#7a1c1c"></circle>238 </svg>239 </div>240 </div>241 242 <!-- Search -->243 <div class="search-wrap">244 <svg class="icon" viewBox="0 0 24 24">245 <circle cx="10" cy="10" r="7" fill="none" stroke="#888" stroke-width="2"></circle>246 <path d="M15 15l6 6" stroke="#888" stroke-width="2"></path>247 </svg>248 <div class="search-text">Search products or deals</div>249 <div class="scan-btn">250 <svg class="icon" viewBox="0 0 24 24">251 <path d="M3 6h18M3 12h18M3 18h18" stroke="#7a1c1c" stroke-width="2"></path>252 </svg>253 </div>254 </div>255 256 <!-- Pills -->257 <div class="pills">258 <div class="pill">Weekly Ad</div>259 <div class="pill">for U Deals</div>260 <div class="pill">Rewards</div>261 </div>262 263 <!-- Features -->264 <div class="feature-row">265 <div class="feature">266 <svg class="feat-icon" viewBox="0 0 24 24">267 <circle cx="7" cy="7" r="3" fill="#2aa9ff"></circle>268 <circle cx="14" cy="10" r="2.5" fill="#2aa9ff"></circle>269 <circle cx="10" cy="16" r="2.2" fill="#2aa9ff"></circle>270 </svg>271 <div class="feat-label">Health</div>272 </div>273 <div class="feature">274 <svg class="feat-icon" viewBox="0 0 24 24">275 <rect x="6" y="5" width="12" height="12" rx="2" fill="#ffb74d"></rect>276 <path d="M12 7v8M9 11h6" stroke="#7a1c1c" stroke-width="2"></path>277 </svg>278 <div class="feat-label">Pharmacy</div>279 </div>280 <div class="feature">281 <svg class="feat-icon" viewBox="0 0 24 24">282 <path d="M4 16c5 3 11 3 16 0" fill="#8e71ff"></path>283 <rect x="10" y="8" width="7" height="2" rx="1" fill="#8e71ff"></rect>284 </svg>285 <div class="feat-label">Meal Plans</div>286 </div>287 <div class="feature">288 <svg class="feat-icon" viewBox="0 0 24 24">289 <rect x="5" y="9" width="14" height="9" rx="2" fill="#e74c3c"></rect>290 <rect x="6" y="6" width="12" height="3" fill="#e74c3c"></rect>291 </svg>292 <div class="feat-label">Store Mode</div>293 </div>294 <div class="feature">295 <svg class="feat-icon" viewBox="0 0 24 24">296 <circle cx="5" cy="12" r="1.6" fill="#555"></circle>297 <circle cx="12" cy="12" r="1.6" fill="#555"></circle>298 <circle cx="19" cy="12" r="1.6" fill="#555"></circle>299 </svg>300 <div class="feat-label">More</div>301 </div>302 </div>303 304 <!-- Deals Section -->305 <div class="section">306 <div class="section-top">307 <div class="section-title">308 <span class="foru-badge">for U</span>309 <span>Deals (299)</span>310 </div>311 <div class="see-all">312 <span>See all</span>313 <svg class="icon" viewBox="0 0 24 24">314 <path d="M9 5l7 7-7 7" fill="none" stroke="#7a1c1c" stroke-width="2"></path>315 </svg>316 </div>317 </div>318 </div>319 320 <div class="cards">321 <!-- Card 1 -->322 <div class="card">323 <div class="chip">Items you buy</div>324 <div class="img-placeholder">[IMG: Red Gift with Dollar]</div>325 <div class="subline">2 Rewards</div>326 <h3>Earn 2 Rewards</h3>327 <div class="subline">Welcome!</div>328 <p>Earn 2 rewards when you s...</p>329 <div class="link">Offer details and eligible ite...</div>330 <div class="expires"><strong>Expires 11/1</strong></div>331 <div class="clip-btn">Clip deal</div>332 </div>333 334 <!-- Card 2 -->335 <div class="card">336 <div class="chip">Items you buy</div>337 <div class="img-placeholder">[IMG: $5 OFF Graphic]</div>338 <h3>$5 OFF</h3>339 <div class="subline">Welcome!</div>340 <p>$5 off your purchase of $2...</p>341 <div class="link">Offer details and eligible ite...</div>342 <div class="expires"><strong>Expires 11/1</strong></div>343 <div class="clip-btn">Clip deal</div>344 </div>345 </div>346 347 <!-- Second Deals Header (lower repeat) -->348 <div class="section" style="margin-top: 40px;">349 <div class="section-top">350 <div class="section-title">351 <span class="foru-badge">for U</span>352 <span>Deals (299)</span>353 </div>354 <div class="see-all">355 <span>See all</span>356 <svg class="icon" viewBox="0 0 24 24">357 <path d="M9 5l7 7-7 7" fill="none" stroke="#7a1c1c" stroke-width="2"></path>358 </svg>359 </div>360 </div>361 </div>362 363 <!-- Placeholder product tiles row (behind bottom bar) -->364 <div class="cards" style="padding-bottom: 300px;">365 <div class="card">366 <div class="img-placeholder" style="height:220px;">[IMG: Bread Product]</div>367 </div>368 <div class="card">369 <div class="img-placeholder" style="height:220px;">[IMG: Fresh Cilantro]</div>370 </div>371 </div>372 373 <!-- Bottom Navigation -->374 <div class="bottom-nav">375 <div class="nav-item">376 <svg class="nav-icon" viewBox="0 0 24 24">377 <path d="M3 12l9-7 9 7v8H3z" fill="none" stroke="#7a1c1c" stroke-width="2"></path>378 </svg>379 <div class="label">HOME</div>380 </div>381 <div class="nav-item">382 <svg class="nav-icon" viewBox="0 0 24 24">383 <rect x="5" y="4" width="14" height="15" rx="2" fill="none" stroke="#7a1c1c" stroke-width="2"></rect>384 <path d="M8 8h8M8 12h8" stroke="#7a1c1c" stroke-width="2"></path>385 </svg>386 <div class="label">SHOP</div>387 </div>388 <div class="nav-item">389 <svg class="nav-icon" viewBox="0 0 24 24">390 <rect x="3" y="6" width="18" height="12" rx="2" fill="none" stroke="#7a1c1c" stroke-width="2"></rect>391 <text x="8" y="15" font-size="7" fill="#7a1c1c">for U</text>392 </svg>393 <div class="label">DEALS+</div>394 </div>395 <div class="nav-item">396 <svg class="nav-icon" viewBox="0 0 24 24">397 <rect x="5" y="4" width="14" height="16" rx="2" fill="none" stroke="#7a1c1c" stroke-width="2"></rect>398 <path d="M8 8h8M8 12h8M8 16h8" stroke="#7a1c1c" stroke-width="2"></path>399 </svg>400 <div class="label">MY LIST</div>401 </div>402 <div class="nav-item">403 <svg class="nav-icon" viewBox="0 0 24 24">404 <circle cx="12" cy="8" r="3.5" fill="none" stroke="#7a1c1c" stroke-width="2"></circle>405 <path d="M4 20c2-5 14-5 16 0" fill="none" stroke="#7a1c1c" stroke-width="2"></path>406 </svg>407 <div class="label">MEMBER</div>408 </div>409 <div class="home-indicator"></div>410 </div>411 412</div>413</body>414</html>