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 Offers UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 .status-bar {17 height: 120px;18 background: #000;19 color: #fff;20 display: flex;21 align-items: center;22 padding: 0 40px;23 font-size: 40px;24 justify-content: space-between;25 }26 .status-icons { display: flex; gap: 26px; align-items: center; }27 .app-bar {28 height: 140px;29 background: #fff;30 border-bottom: 2px solid #e5e5e5;31 display: flex;32 align-items: center;33 padding: 0 36px;34 color: #4b4321;35 }36 .app-bar .left, .app-bar .right { display: flex; align-items: center; }37 .app-bar .left { gap: 24px; }38 .app-bar .right { margin-left: auto; gap: 42px; }39 .icon-btn { width: 70px; height: 70px; display: inline-flex; align-items: center; justify-content: center; }40 .cart {41 position: relative;42 }43 .badge {44 position: absolute;45 top: -10px;46 right: -10px;47 background: #c01564;48 color: #fff;49 width: 52px; height: 52px;50 border-radius: 50%;51 display: flex; align-items: center; justify-content: center;52 font-size: 32px; font-weight: bold;53 }54 55 .search-wrap {56 padding: 22px 36px;57 background: #fff;58 }59 .search-pill {60 height: 120px;61 background: #8BC34A;62 border-radius: 60px;63 padding: 16px;64 display: flex; align-items: center;65 }66 .search-inner {67 flex: 1;68 height: 88px;69 background: #efefef;70 border-radius: 44px;71 display: flex; align-items: center;72 padding: 0 30px;73 color: #555;74 font-size: 44px;75 }76 .section-title {77 font-size: 48px;78 letter-spacing: 1px;79 color: #6a4f18;80 padding: 18px 40px;81 font-weight: bold;82 }83 84 .list { padding: 0 26px; }85 .item {86 display: grid;87 grid-template-columns: 220px 1fr 220px;88 grid-gap: 30px;89 padding: 34px 14px;90 border-top: 2px solid #ececec;91 }92 .item:first-child { border-top: none; }93 .img {94 width: 220px; height: 220px;95 background: #E0E0E0;96 border: 1px solid #BDBDBD;97 border-radius: 8px;98 box-shadow: 0 8px 18px rgba(0,0,0,0.08);99 display: flex; align-items: center; justify-content: center;100 color: #757575; font-size: 32px; text-align: center; padding: 12px;101 }102 .content { position: relative; }103 .title {104 font-size: 46px;105 color: #3e2d12;106 margin-bottom: 8px;107 line-height: 1.2;108 }109 .qty { font-size: 40px; color: #463f30; margin: 10px 0 20px 0; }110 .price-row { font-size: 44px; color: #9e9e9e; margin-bottom: 18px; }111 .mrp-strike {112 text-decoration: line-through;113 margin-right: 12px;114 color: #8d8d8d;115 }116 .sale { color: #d81b60; font-weight: bold; }117 .buy-pill {118 display: inline-block;119 background: #c7d98e;120 color: #3f5f1e;121 border: 2px solid #9bb86a;122 padding: 14px 28px;123 border-radius: 40px;124 font-size: 36px;125 }126 .actions {127 display: flex; align-items: center; justify-content: flex-end;128 }129 .add-btn {130 width: 200px; height: 100px;131 background: #78B33A;132 color: #fff;133 border-radius: 14px;134 display: flex; align-items: center; justify-content: center;135 font-size: 44px; font-weight: bold;136 }137 .star {138 position: absolute;139 right: 20px; top: 0;140 width: 64px; height: 64px;141 }142 143 .home-indicator {144 position: absolute;145 bottom: 24px; left: 50%;146 transform: translateX(-50%);147 width: 360px; height: 14px;148 background: #000;149 border-radius: 8px;150 opacity: 0.3;151 }152</style>153</head>154<body>155<div id="render-target">156 <!-- Status Bar -->157 <div class="status-bar">158 <div>12:41</div>159 <div class="status-icons">160 <span>✉️</span>161 <span>🔔</span>162 <span>🛜</span>163 <span>🔋</span>164 </div>165 </div>166 167 <!-- App Bar -->168 <div class="app-bar">169 <div class="left">170 <div class="icon-btn">171 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#4b4321" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">172 <path d="M15 18l-6-6 6-6"/>173 </svg>174 </div>175 </div>176 <div class="right">177 <div class="icon-btn">178 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#4b4321" stroke-width="2">179 <circle cx="11" cy="11" r="7"></circle>180 <path d="M21 21l-4.3-4.3"></path>181 </svg>182 </div>183 <div class="icon-btn cart">184 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#4b4321" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">185 <path d="M6 6h15l-1.5 9H7.5L6 6z"></path>186 <circle cx="9" cy="20" r="1.5"></circle>187 <circle cx="18" cy="20" r="1.5"></circle>188 </svg>189 <div class="badge">1</div>190 </div>191 <div class="icon-btn">192 <svg width="56" height="56" viewBox="0 0 24 24" fill="#4b4321">193 <circle cx="12" cy="5" r="2"></circle>194 <circle cx="12" cy="12" r="2"></circle>195 <circle cx="12" cy="19" r="2"></circle>196 </svg>197 </div>198 </div>199 </div>200 201 <!-- Search -->202 <div class="search-wrap">203 <div class="search-pill">204 <div class="icon-btn" style="margin-left:12px;margin-right:8px;">205 <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#4b4321" stroke-width="2">206 <circle cx="11" cy="11" r="7"></circle>207 <path d="M21 21l-4.3-4.3"></path>208 </svg>209 </div>210 <div class="search-inner">Search</div>211 </div>212 </div>213 214 <div class="section-title">LATEST OFFERS</div>215 216 <!-- List -->217 <div class="list">218 <!-- Item 1 -->219 <div class="item">220 <div class="img">[IMG: Product Packet]</div>221 <div class="content">222 <div class="title">1 Pc</div>223 <div class="price-row"><span class="mrp-strike">MRP ₹235</span><span class="sale">₹223.25</span></div>224 <div class="buy-pill">Buy @ Rs.223.25/-</div>225 </div>226 <div class="actions">227 <div class="add-btn">ADD</div>228 </div>229 </div>230 231 <!-- Item 2 -->232 <div class="item">233 <div class="img">[IMG: Cold Coffee Bottle]</div>234 <div class="content">235 <svg class="star" viewBox="0 0 24 24">236 <path d="M12 3l3.1 6.7 7 .9-5 4.8 1.3 7.1L12 18l-6.4 4.5 1.3-7.1-5-4.8 7-.9L12 3z" fill="#cfcfcf"/>237 </svg>238 <div class="title">Raw Pressery Cold Coffee, 200Ml Bottle</div>239 <div class="qty">1 Pc</div>240 <div class="price-row"><span class="sale">MRP ₹90</span></div>241 <div class="buy-pill">Buy @ Rs.90.00/-</div>242 </div>243 <div class="actions">244 <div class="add-btn">ADD</div>245 </div>246 </div>247 248 <!-- Item 3 -->249 <div class="item">250 <div class="img">[IMG: Rock Salt Grinder]</div>251 <div class="content">252 <svg class="star" viewBox="0 0 24 24">253 <path d="M12 3l3.1 6.7 7 .9-5 4.8 1.3 7.1L12 18l-6.4 4.5 1.3-7.1-5-4.8 7-.9L12 3z" fill="#cfcfcf"/>254 </svg>255 <div class="title">Keya Rock Salt Grinder, 100G Bottle</div>256 <div class="qty">1 Pc</div>257 <div class="price-row"><span class="mrp-strike">MRP ₹99</span><span class="sale">₹49.5</span></div>258 <div class="buy-pill">Buy @ Rs.49.50/-</div>259 </div>260 <div class="actions">261 <div class="add-btn">ADD</div>262 </div>263 </div>264 265 <!-- Item 4 -->266 <div class="item">267 <div class="img">[IMG: Lemon Tea Syrup Bottle]</div>268 <div class="content">269 <svg class="star" viewBox="0 0 24 24">270 <path d="M12 3l3.1 6.7 7 .9-5 4.8 1.3 7.1L12 18l-6.4 4.5 1.3-7.1-5-4.8 7-.9L12 3z" fill="#cfcfcf"/>271 </svg>272 <div class="title">Monin Lemon Tea Syrup, 250Ml Bottle</div>273 <div class="qty">1 Pc</div>274 <div class="price-row"><span class="mrp-strike">MRP ₹395</span><span class="sale">₹370</span></div>275 <div class="buy-pill">Buy @ Rs.370.00/-</div>276 </div>277 <div class="actions">278 <div class="add-btn">ADD</div>279 </div>280 </div>281 </div>282 283 <!-- Home Indicator -->284 <div class="home-indicator"></div>285</div>286</body>287</html>