GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Grocery Offers UI</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background: linear-gradient(180deg, #b8e1e2 0%, #c7e7e6 40%, #ffffff 40%, #ffffff 100%);10 border-radius: 24px;11 box-shadow: 0 8px 24px rgba(0,0,0,0.15);12 }13 /* Status bar */14 .status-bar {15 height:90px; padding:0 32px; display:flex; align-items:center; justify-content:space-between; color:#0a0a0a; font-weight:600;16 }17 .status-left { display:flex; align-items:center; gap:16px; }18 .status-right { display:flex; align-items:center; gap:24px; opacity:0.85; }19 .icon-small { width:32px; height:32px; }20 /* Header with search */21 .header {22 padding:16px 24px 20px 24px;23 }24 .top-row { display:flex; align-items:center; gap:16px; }25 .back-btn {26 width:76px; height:76px; border-radius:38px; display:flex; align-items:center; justify-content:center;27 }28 .search-bar {29 flex:1;30 height:96px;31 background:#fff;32 border-radius:16px;33 box-shadow: 0 2px 0 rgba(0,0,0,0.06);34 display:flex; align-items:center; padding:0 24px; gap:18px; border:1px solid #e2e2e2;35 }36 .search-input {37 flex:1; color:#222; font-size:36px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;38 }39 .scan-btn {40 width:76px; height:76px; border-radius:16px; background:#f5f5f5; border:1px solid #ddd; display:flex; align-items:center; justify-content:center;41 }42 43 /* Location, filters */44 .location-row { display:flex; align-items:center; justify-content:space-between; padding:10px 28px; color:#1f1f1f; }45 .loc-left { display:flex; align-items:center; gap:12px; font-size:34px; }46 .filters { display:flex; align-items:center; gap:20px; }47 .filter-pill {48 padding:18px 26px; background:#ffffff; border:1px solid #ddd; border-radius:12px; font-size:34px; color:#3a3a3a;49 }50 .prime-toggle { display:flex; align-items:center; gap:12px; font-size:32px; color:#6c6c6c; }51 .toggle {52 width:86px; height:44px; border-radius:22px; background:#ececec; position:relative; border:1px solid #d5d5d5;53 }54 .toggle::after {55 content:""; position:absolute; left:4px; top:4px; width:36px; height:36px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.2);56 }57 58 .color-strip { height:8px; background: linear-gradient(90deg, #e95454, #f3a43f, #fee65b, #6bc27c, #57a3f3, #b47de8); margin:14px 0; }59 60 /* Explore section */61 .explore { padding:24px 24px 8px 24px; }62 .explore-head { display:flex; align-items:center; justify-content:space-between; }63 .explore-title { font-size:42px; font-weight:700; color:#222; }64 .explore-grid { margin-top:18px; display:flex; gap:26px; }65 .explore-card { width:320px; border:1px solid #e0e0e0; border-radius:12px; background:#fff; padding:18px; }66 .img-box {67 width:100%; height:260px; background:#E0E0E0; border:1px solid #BDBDBD;68 display:flex; align-items:center; justify-content:center; color:#757575; font-size:30px; border-radius:8px;69 }70 .explore-label { text-align:center; margin-top:18px; font-size:34px; color:#333; }71 .shop-row { padding:18px 24px; display:flex; align-items:center; justify-content:space-between; color:#0d6efd; font-size:34px; }72 .sponsored-tag { color:#888; font-size:30px; }73 74 /* Product cards */75 .product-card {76 margin:24px; border:1px solid #e2e2e2; border-radius:16px; background:#fff;77 display:flex; gap:24px; padding:24px;78 }79 .product-img {80 width:300px; height:420px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:12px;81 display:flex; align-items:center; justify-content:center; color:#757575; font-size:30px;82 }83 .product-info { flex:1; }84 .sponsored { color:#777; font-size:30px; }85 .product-title { font-size:40px; line-height:1.25; color:#222; margin-top:10px; }86 .meta { margin-top:8px; color:#555; font-size:32px; }87 .rating { margin-top:12px; font-size:32px; color:#333; display:flex; align-items:center; gap:10px; }88 .stars { color:#f5a623; letter-spacing:2px; font-size:34px; }89 .badge {90 display:inline-block; background:#c9472c; color:#fff; font-weight:700; font-size:34px;91 padding:12px 18px; border-radius:10px; margin-top:16px;92 }93 .price-row { margin-top:16px; display:flex; align-items:baseline; gap:14px; }94 .price { font-size:48px; font-weight:800; color:#111; }95 .subprice { font-size:30px; color:#555; }96 .mrp { font-size:30px; color:#777; }97 .strike { text-decoration: line-through; color:#999; }98 .delivery { margin-top:16px; font-size:32px; color:#333; }99 .free { color:#666; font-size:30px; margin-top:8px; }100 101 /* Second product preview (partial) */102 .product-card.small { padding-bottom:34px; }103 .product-title.small { font-size:38px; }104 105 /* Bottom navbar */106 .bottom-nav {107 position:absolute; bottom:0; left:0; width:100%; height:150px; background:#fff; border-top:1px solid #ddd;108 display:flex; align-items:center; justify-content:space-around;109 }110 .nav-item { display:flex; flex-direction:column; align-items:center; gap:10px; color:#222; font-size:26px; }111 .nav-icon { width:64px; height:64px; }112 /* Simple utility icons */113 svg { display:block; }114</style>115</head>116<body>117<div id="render-target">118 119 <!-- Status bar -->120 <div class="status-bar">121 <div class="status-left">122 <div style="font-size:38px;">1:32</div>123 <!-- simple status icons -->124 <svg class="icon-small" viewBox="0 0 24 24">125 <circle cx="12" cy="12" r="10" fill="#444"/>126 </svg>127 <svg class="icon-small" viewBox="0 0 24 24">128 <rect x="4" y="6" width="16" height="12" fill="#444"/>129 </svg>130 </div>131 <div class="status-right">132 <svg class="icon-small" viewBox="0 0 24 24">133 <path d="M3 12h18" stroke="#444" stroke-width="2"/>134 <circle cx="20" cy="5" r="3" fill="#444"/>135 </svg>136 <svg class="icon-small" viewBox="0 0 24 24">137 <path d="M22 6H2l2 14h14l4-14z" fill="#444"/>138 </svg>139 </div>140 </div>141 142 <!-- Header -->143 <div class="header">144 <div class="top-row">145 <div class="back-btn">146 <svg width="40" height="40" viewBox="0 0 24 24">147 <path d="M15 18l-6-6 6-6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>148 </svg>149 </div>150 <div class="search-bar">151 <svg width="40" height="40" viewBox="0 0 24 24">152 <circle cx="10" cy="10" r="7" stroke="#666" stroke-width="2" fill="none"/>153 <path d="M21 21l-6-6" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>154 </svg>155 <div class="search-input">Special offers on groceries</div>156 <div class="scan-btn">157 <svg width="40" height="40" viewBox="0 0 24 24">158 <rect x="6" y="6" width="12" height="12" stroke="#333" stroke-width="2" fill="none"/>159 <path d="M3 8V3h5M21 8V3h-5M3 16v5h5M21 16v5h-5" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>160 </svg>161 </div>162 </div>163 </div>164 </div>165 166 <!-- Location and filters -->167 <div class="location-row">168 <div class="loc-left">169 <svg width="36" height="36" viewBox="0 0 24 24">170 <path d="M12 22s-7-8-7-12a7 7 0 0 1 14 0c0 4-7 12-7 12z" fill="#333"/>171 </svg>172 <div>Deliver to Loni 201102</div>173 <svg width="28" height="28" viewBox="0 0 24 24">174 <path d="M6 9l6 6 6-6" stroke="#333" stroke-width="2" fill="none"/>175 </svg>176 </div>177 <div class="filters">178 <div class="prime-toggle">179 <svg width="72" height="28" viewBox="0 0 72 28">180 <text x="0" y="22" font-size="22" fill="#ff9900">prime</text>181 </svg>182 <div class="toggle"></div>183 </div>184 <div class="filter-pill">Filters185 <svg width="24" height="24" viewBox="0 0 24 24" style="margin-left:8px;">186 <path d="M6 9l6 6 6-6" stroke="#555" stroke-width="2" fill="none"/>187 </svg>188 </div>189 </div>190 </div>191 192 <div class="color-strip"></div>193 194 <!-- Explore more -->195 <div class="explore">196 <div class="explore-head">197 <div class="explore-title">Explore More With Tulsi</div>198 </div>199 <div class="explore-grid">200 <div class="explore-card">201 <div class="img-box">[IMG: Tulsi Dry fruits pack]</div>202 <div class="explore-label">Dry fruits</div>203 </div>204 <div class="explore-card">205 <div class="img-box">[IMG: Tulsi Nuts pack]</div>206 <div class="explore-label">Nuts</div>207 </div>208 <div class="explore-card">209 <div class="img-box">[IMG: Tulsi Walnuts pack]</div>210 <div class="explore-label">Home</div>211 </div>212 </div>213 </div>214 215 <div class="shop-row">216 <div>Shop the Tulsi Store on Amazon ›</div>217 <div class="sponsored-tag">Sponsored</div>218 </div>219 220 <!-- Product card 1 -->221 <div class="product-card">222 <div class="product-img">[IMG: Taj Mahal Tea Pack]</div>223 <div class="product-info">224 <div class="sponsored">Sponsored</div>225 <div class="product-title">Taj Mahal South Tea 500 g Pack, Rich and Flavourful Chai - Premium Blend of Powdered Fresh Tea</div>226 <div class="meta">Black · 500 g (Pack of 1)</div>227 <div class="rating">228 <span style="font-weight:700; color:#1577d2;">4.4</span>229 <span class="stars">★★★★★</span>230 <span style="color:#666;">(9,460)</span>231 <span style="color:#666; margin-left:12px;">1K+ bought in past month</span>232 </div>233 <div class="badge">Deal of the Day</div>234 <div class="price-row">235 <div class="price">₹380</div>236 <div class="subprice">(₹76/100 g)</div>237 <div class="mrp">M.R.P: <span class="strike">₹425</span> (11% off)</div>238 </div>239 <div class="delivery">Get it by <strong>Sunday, 9 July</strong></div>240 <div class="free">FREE Delivery by Amazon</div>241 </div>242 </div>243 244 <!-- Product card 2 preview -->245 <div class="product-card small">246 <div class="product-img" style="height:320px;">[IMG: Solimo Cranberry Muesli]</div>247 <div class="product-info">248 <div class="sponsored">Sponsored</div>249 <div class="product-title small">Amazon Brand Solimo - Cranberry Muesli 1kg</div>250 <div class="meta">Cranberry, 1 kg (Pack of 1)</div>251 </div>252 </div>253 254 <!-- Bottom navigation bar -->255 <div class="bottom-nav">256 <div class="nav-item">257 <svg class="nav-icon" viewBox="0 0 24 24">258 <path d="M3 11l9-8 9 8v10H3V11z" fill="#333"/>259 </svg>260 <div>Home</div>261 </div>262 <div class="nav-item">263 <svg class="nav-icon" viewBox="0 0 24 24">264 <circle cx="12" cy="8" r="5" fill="#333"/>265 <path d="M3 22c2-6 16-6 18 0" fill="#333"/>266 </svg>267 <div>Account</div>268 </div>269 <div class="nav-item">270 <svg class="nav-icon" viewBox="0 0 24 24">271 <path d="M12 2a8 8 0 1 1-8 8h3l-4-4-4 4h3a11 11 0 1 0 11-11z" fill="#333"/>272 </svg>273 <div>Refresh</div>274 </div>275 <div class="nav-item">276 <svg class="nav-icon" viewBox="0 0 24 24">277 <path d="M6 6h15l-2 13H7L6 6z" fill="#333"/>278 <circle cx="9" cy="21" r="2" fill="#333"/>279 <circle cx="17" cy="21" r="2" fill="#333"/>280 </svg>281 <div>Cart</div>282 </div>283 <div class="nav-item">284 <svg class="nav-icon" viewBox="0 0 24 24">285 <path d="M4 6h16M4 12h16M4 18h16" stroke="#333" stroke-width="2" />286 </svg>287 <div>Menu</div>288 </div>289 </div>290 291</div>292</body>293</html>