GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Grocery UI - Oats Listing</title>5<style>6  body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#ffffff; color:#1e1e1e;11  }12 13  /* Status bar */14  .status-bar{15    height:90px;16    padding:0 32px;17    display:flex; align-items:center; justify-content:space-between;18    font-weight:600; font-size:34px; color:#111;19  }20  .right-icons{ display:flex; gap:26px; align-items:center; }21  .icon{22    width:34px; height:34px; color:#444;23  }24  .dot{ width:10px; height:10px; background:#666; border-radius:50%; display:inline-block; }25 26  /* Search area */27  .search-wrap{28    padding:20px 28px 18px 28px;29  }30  .search-bar{31    display:flex; align-items:center;32    background:#F3F5F7; border-radius:60px;33    height:112px; padding:0 26px; gap:22px;34    box-shadow: inset 0 0 0 1px #E2E6EA;35  }36  .back{37    width:44px; height:44px;38  }39  .search-input{40    flex:1; color:#222; font-size:40px; font-weight:600;41    opacity:.95;42  }43  .search-actions{ display:flex; gap:24px; align-items:center; }44  .chip-note{ font-size:30px; color:#666; margin:14px 0 0 0; }45 46  /* Headings */47  .section-title{48    font-size:46px; font-weight:800; color:#222; padding:10px 28px 0 28px;49  }50 51  /* Product rows */52  .row{53    display:flex; gap:22px; padding:18px 18px 6px 18px; overflow-x:auto;54  }55  .card{56    width:320px; background:#fff; border:1px solid #e6e6e6; border-radius:22px;57    padding:14px; position:relative; flex:0 0 auto;58    box-shadow: 0 2px 6px rgba(0,0,0,0.04);59  }60  .img{61    width:100%; height:320px; background:#E0E0E0; border:1px solid #BDBDBD;62    border-radius:18px; display:flex; align-items:center; justify-content:center;63    color:#757575; font-size:28px; text-align:center; padding:12px;64  }65  .badge{66    position:absolute; left:24px; top:24px;67    background:#3B7BFF; color:#fff; font-weight:800;68    padding:12px 14px; border-radius:10px; font-size:26px; line-height:1.1;69    text-align:center;70  }71  .timer{72    display:inline-flex; align-items:center; gap:10px;73    background:#E9F6E9; color:#2f7a32; border-radius:26px; padding:10px 16px;74    font-size:26px; font-weight:700; margin-top:12px;75  }76  .title{77    font-size:36px; font-weight:800; line-height:1.18; margin-top:14px; color:#222;78  }79  .sub{ font-size:30px; color:#4a4a4a; margin-top:6px; }80  .price-row{81    display:flex; align-items:center; gap:22px; margin-top:12px;82  }83  .price{ font-size:38px; font-weight:800; color:#222; }84  .mrp{ font-size:30px; color:#9b9b9b; text-decoration:line-through; }85  .add-btn{86    margin-top:14px; width:100%; height:84px; border-radius:60px;87    background:#3BAA36; color:#fff; font-weight:800; font-size:34px; border:none;88  }89 90  /* Secondary section cards (slightly taller image look) */91  .card.tall .img{ height:300px; }92 93  /* Sticky add-to-cart bar */94  .sticky{95    position:absolute; left:0; right:0; bottom:0;96    background:#ffffff; border-top:1px solid #e6e6e6;97    padding:26px 28px; display:flex; align-items:center; justify-content:space-between; gap:20px;98    box-shadow: 0 -6px 20px rgba(0,0,0,0.06);99  }100  .sticky .meta{101    display:flex; flex-direction:column; gap:6px;102    font-size:36px; color:#111; font-weight:700;103  }104  .sticky .meta small{ font-size:30px; color:#666; font-weight:700; }105  .cta{106    background:#2FAE43; color:#fff; font-weight:800; border:none;107    padding:28px 44px; border-radius:22px; font-size:44px;108  }109 110  /* Helpers for small SVG icons */111  svg{ display:block; }112  .clock{ width:28px; height:28px; }113</style>114</head>115<body>116<div id="render-target">117 118  <!-- Status Bar -->119  <div class="status-bar">120    <div>11:24</div>121    <div class="right-icons">122      <span class="dot"></span>123      <svg class="icon" viewBox="0 0 24 24"><path fill="#444" d="M12 2a7 7 0 0 0-7 7v4l-2 2v1h18v-1l-2-2V9a7 7 0 0 0-7-7zm0 20a2.5 2.5 0 0 0 2.45-2h-4.9A2.5 2.5 0 0 0 12 22z"/></svg>124      <svg class="icon" viewBox="0 0 24 24"><path fill="#444" d="M12 3a9 9 0 0 0-9 9h2a7 7 0 0 1 14 0h2a9 9 0 0 0-9-9zM3 13a9 9 0 0 0 9 9v-2a7 7 0 0 1-7-7H3z"/></svg>125      <svg class="icon" viewBox="0 0 24 24"><path fill="#444" d="M9 5l7 7-7 7-1.5-1.5L12 12 7.5 6.5 9 5z"/></svg>126    </div>127  </div>128 129  <!-- Search Bar -->130  <div class="search-wrap">131    <div class="search-bar">132      <svg class="back" viewBox="0 0 24 24"><path fill="#333" d="M15.5 19l-7-7 7-7 1.5 1.5L11.5 12l5.5 5.5L15.5 19z"/></svg>133      <div class="search-input">Saffola Classic Masala oats</div>134      <div class="search-actions">135        <svg class="icon" viewBox="0 0 24 24"><path fill="#666" d="M18.3 5.71L12 12.01 5.7 5.7 4.29 7.11 10.59 13.4 4.3 19.7l1.41 1.41 6.29-6.29 6.29 6.29 1.41-1.41-6.29-6.29 6.29-6.3z"/></svg>136        <svg class="icon" viewBox="0 0 24 24"><path fill="#666" d="M12 2a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3zm-5 9v1a5 5 0 0 0 10 0v-1h-2v1a3 3 0 0 1-6 0v-1H7z"/></svg>137      </div>138    </div>139    <div class="chip-note"></div>140  </div>141 142  <!-- Result heading -->143  <div class="section-title">Showing results for "saffola classic masala oats"</div>144 145  <!-- First Row of cards -->146  <div class="row" style="margin-top:12px;">147    <div class="card">148      <div class="img">[IMG: Saffola Masala Veggie Twist Oats - Small Pack]</div>149      <div class="badge">12% OFF</div>150      <div class="timer">151        <svg class="clock" viewBox="0 0 24 24"><path fill="#2f7a32" d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm1 5h-2v6l5 3 .9-1.45L13 12.2V7z"/></svg>152        9 MINS153      </div>154      <div class="title">Saffola Masala Veggie Twist Oats</div>155      <div class="sub">38 g</div>156      <div class="price-row">157        <div class="price">₹17</div>158      </div>159      <button class="add-btn">ADD</button>160    </div>161 162    <div class="card">163      <div class="img">[IMG: Saffola Masala Veggie Twist Oats 500 g]</div>164      <div class="badge">12% OFF</div>165      <div class="timer">166        <svg class="clock" viewBox="0 0 24 24"><path fill="#2f7a32" d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm1 5h-2v6l5 3 .9-1.45L13 12.2V7z"/></svg>167        9 MINS168      </div>169      <div class="title">Saffola Masala Veggie Twist Oats</div>170      <div class="sub">500 g</div>171      <div class="price-row">172        <div class="price">₹198</div>173        <div class="mrp">₹225</div>174      </div>175      <button class="add-btn">ADD</button>176    </div>177 178    <div class="card">179      <div class="img">[IMG: Saffola Karara Crunch Classic Masala 500 g]</div>180      <div class="badge">20% OFF</div>181      <div class="timer">182        <svg class="clock" viewBox="0 0 24 24"><path fill="#2f7a32" d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm1 5h-2v6l5 3 .9-1.45L13 12.2V7z"/></svg>183        9 MINS184      </div>185      <div class="title">Saffola Karara Crunch Classic Masala</div>186      <div class="sub">500 g</div>187      <div class="price-row">188        <div class="price">₹180</div>189        <div class="mrp">₹225</div>190      </div>191      <button class="add-btn">ADD</button>192    </div>193  </div>194 195  <!-- Second Section Title -->196  <div class="section-title" style="margin-top:18px;">Top 10 Products in this Category</div>197 198  <!-- Second Row of cards -->199  <div class="row" style="margin-top:10px;">200    <div class="card tall">201      <div class="img">[IMG: Quaker Rolled Oats 1 kg]</div>202      <div class="badge">18% OFF</div>203      <div class="title" style="margin-top:18px;">Quaker Rolled Oats</div>204      <div class="sub">1 kg</div>205      <div class="price-row">206        <div class="price">₹163</div>207        <div class="mrp">₹199</div>208      </div>209      <button class="add-btn">ADD</button>210    </div>211 212    <div class="card tall">213      <div class="img">[IMG: Quaker Rolled Oats 400 g]</div>214      <div class="title" style="margin-top:18px;">Quaker Rolled Oats</div>215      <div class="sub">400 g</div>216      <div class="price-row">217        <div class="price">₹79</div>218      </div>219      <button class="add-btn">ADD</button>220    </div>221 222    <div class="card tall">223      <div class="img">[IMG: Saffola Masala Veggie Twist Oats 38 g]</div>224      <div class="title" style="margin-top:18px;">Saffola Masala Veggie Twist Oats</div>225      <div class="sub">38 g</div>226      <div class="price-row">227        <div class="price">₹17</div>228      </div>229      <button class="add-btn">ADD</button>230    </div>231  </div>232 233  <!-- Brands section heading -->234  <div class="section-title" style="margin-top:22px;">Brands in this Category</div>235 236  <!-- Simple brand placeholder row -->237  <div class="row" style="padding-bottom:200px;">238    <div class="img" style="width:320px; height:180px; border-radius:20px;">[IMG: Brand Logo - Saffola]</div>239    <div class="img" style="width:320px; height:180px; border-radius:20px;">[IMG: Brand Logo - Quaker]</div>240    <div class="img" style="width:320px; height:180px; border-radius:20px;">[IMG: Brand Logo - Kellogg's]</div>241  </div>242 243  <!-- Sticky footer add-to-cart -->244  <div class="sticky">245    <div class="meta">246      <span>38 g</span>247      <small>MRP ₹17</small>248    </div>249    <button class="cta">Add to cart</button>250  </div>251 252</div>253</body>254</html>