GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Grocery Offers - Mock UI</title>5<style>6  body{margin:0;padding:0;background:transparent;font-family: Arial, Helvetica, sans-serif;color:#111;}7  #render-target{8    width:1080px;height:2400px;position:relative;overflow:hidden;9    background:#ffffff;border-radius:0;10  }11  /* Top gradient area */12  .top-gradient{13    position:absolute;left:0;top:0;width:100%;height:280px;14    background:linear-gradient(180deg,#a9e4e2 0%, #d7f1ef 50%, #ffffff 100%);15  }16  /* Status bar */17  .status-bar{18    position:absolute;left:0;top:0;width:100%;height:64px;padding:0 28px;19    display:flex;align-items:center;justify-content:space-between;color:#1b1b1b;font-weight:600;20    font-size:28px;21  }22  .status-right{display:flex;gap:26px;align-items:center;color:#2c2c2c;}23  /* Search Row */24  .search-row{25    position:absolute;left:24px;right:24px;top:88px;height:104px;display:flex;align-items:center;gap:20px;26  }27  .icon-btn{28    width:84px;height:84px;border-radius:42px;background:#eaf6f5;display:flex;align-items:center;justify-content:center;29  }30  .search-field{31    flex:1;height:100%;background:#ffffff;border-radius:54px;border:1px solid #d6d6d6;32    display:flex;align-items:center;padding:0 26px;gap:18px;box-shadow:0 2px 6px rgba(0,0,0,0.06) inset;33  }34  .search-placeholder{font-size:34px;color:#4a4a4a;flex:1;}35  /* Content area */36  .content{37    position:absolute;left:0;top:280px;right:0;bottom:140px;overflow:hidden;padding:0 18px;38  }39  .note-strip{40    height:56px;display:flex;align-items:center;color:#7a7a7a;font-size:24px;margin:6px 10px;41  }42  .card{43    background:#fff;border:1px solid #ececec;border-radius:22px;44    display:flex;gap:24px;padding:24px;margin:14px 6px;45    box-shadow:0 2px 0 rgba(0,0,0,0.03);46  }47  .img{48    width:260px;height:260px;background:#E0E0E0;border:1px solid #BDBDBD;border-radius:14px;49    display:flex;align-items:center;justify-content:center;color:#5a5a5a;text-align:center;font-size:24px;padding:8px;50  }51  .txt{flex:1;}52  .small-cap{font-size:24px;color:#7c7c7c;margin-bottom:6px;}53  .title{font-size:36px;line-height:46px;font-weight:700;color:#1c1c1c;}54  .variant{font-size:28px;color:#333;margin-top:6px;}55  .rating{display:flex;align-items:center;gap:10px;margin:12px 0;}56  .stars{color:#f6a800;font-size:28px;letter-spacing:3px;}57  .count{color:#6e6e6e;font-size:26px;}58  .price-row{display:flex;align-items:flex-end;gap:12px;margin:6px 0 4px 0;}59  .price{font-size:40px;font-weight:800;}60  .striked{font-size:26px;color:#8b8b8b;text-decoration:line-through;}61  .green{color:#0a8f2f;font-weight:700;font-size:24px;}62  .meta{color:#424242;font-size:26px;margin-top:8px;}63  .linklike{color:#0a70c2;}64  .option-row{margin-top:10px;font-size:28px;}65  /* Bottom nav */66  .bottom-nav{67    position:absolute;left:0;right:0;bottom:0;height:130px;background:#fff;border-top:1px solid #e8e8e8;68    display:flex;justify-content:space-around;align-items:center;69  }70  .nav-item{display:flex;flex-direction:column;align-items:center;color:#1e1e1e;font-size:24px;gap:6px;}71  /* Helpers */72  .muted{color:#7a7a7a;}73</style>74</head>75<body>76<div id="render-target">77  <div class="top-gradient"></div>78 79  <!-- Status bar -->80  <div class="status-bar">81    <div>1:33</div>82    <div class="status-right">83      <!-- simple status icons -->84      <svg width="30" height="30" viewBox="0 0 24 24"><path fill="#2c2c2c" d="M3 6h18v2H3zm2 4h14v2H5zm3 4h8v2H8z"/></svg>85      <svg width="30" height="30" viewBox="0 0 24 24"><path fill="#2c2c2c" d="M12 3C7 3 3 7 3 12h2a7 7 0 1 1 7 7v2c5 0 9-4 9-9s-4-9-9-9z"/></svg>86      <svg width="30" height="30" viewBox="0 0 24 24"><path fill="#2c2c2c" d="M21 7H3v10h18V7zm-2 2v6H5V9h14z"/></svg>87    </div>88  </div>89 90  <!-- Search row -->91  <div class="search-row">92    <div class="icon-btn">93      <!-- back arrow -->94      <svg width="34" height="34" viewBox="0 0 24 24"><path fill="#1e1e1e" d="M14 7l-5 5 5 5V7z"/></svg>95    </div>96    <div class="search-field">97      <!-- search icon -->98      <svg width="36" height="36" viewBox="0 0 24 24"><path fill="#4a4a4a" d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 14 15.5l.27.28v.79L20 21l1-1-5.5-5.5zM6.5 11A4.5 4.5 0 1 1 11 15.5 4.5 4.5 0 0 1 6.5 11z"/></svg>99      <div class="search-placeholder">Special offers on groceries</div>100      <!-- camera/scan icon -->101      <svg width="40" height="40" viewBox="0 0 24 24">102        <path fill="#1e1e1e" d="M7 4H4v3H2V2h5v2zm10 0h5v5h-2V4h-3V2zM4 17H2v5h5v-2H4v-3zm18 0v5h-5v-2h3v-3h2zM7 7h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2zm5 2.5A3.5 3.5 0 1 0 15.5 13 3.5 3.5 0 0 0 12 9.5z"/>103      </svg>104    </div>105  </div>106 107  <!-- Content -->108  <div class="content">109    <!-- Subtle divider text (partially visible top result) -->110    <div class="note-strip">FREE Delivery by Amazon</div>111 112    <!-- Card 1 -->113    <div class="card">114      <div class="img">[IMG: Cranberry Muesli Jar]</div>115      <div class="txt">116        <div class="small-cap">Sponsored</div>117        <div class="title">Amazon Brand Solimo - Cranberry Muesli 1kg</div>118        <div class="variant">Cranberry · 1 kg (Pack of 1)</div>119        <div class="rating">120          <div class="muted" style="font-size:28px;">4.0</div>121          <div class="stars">★★★★☆</div>122          <div class="count">(13,359)</div>123        </div>124        <div class="price-row">125          <div class="price">₹435</div>126          <div class="muted">(₹435/kg)</div>127          <div class="muted">M.R.P:</div>128          <div class="striked">₹600</div>129          <div class="muted">(28% off)</div>130        </div>131        <div class="meta">Buy 2 items, get 3% off</div>132        <div class="meta">Get it by <b>Friday, 7 July</b></div>133        <div class="meta green">FREE Delivery by Amazon</div>134        <div class="meta">₹413.25 with Subscribe & Save discount</div>135      </div>136    </div>137 138    <!-- Card 2 -->139    <div class="card">140      <div class="img">[IMG: Spice Pack Photos]</div>141      <div class="txt">142        <div class="title">Mittal Organics Special Pack of Daily Use Spices and Grocery</div>143        <div class="variant">Turmeric · 1 Count (Pack of 8)</div>144        <div class="rating">145          <div class="muted" style="font-size:28px;">1.0</div>146          <div class="stars" style="color:#ff9f00;">★☆☆☆☆</div>147          <div class="count">(1)</div>148        </div>149        <div class="price-row">150          <div class="price">₹294</div>151          <div class="muted">(₹36.75/count)</div>152          <div class="muted">M.R.P:</div>153          <div class="striked">₹300</div>154          <div class="muted">(2% off)</div>155        </div>156        <div class="meta">Get it by <b>Monday, 10 July</b></div>157        <div class="option-row">Options: <span class="linklike">3 flavours</span></div>158      </div>159    </div>160 161    <!-- Card 3 -->162    <div class="card">163      <div class="img">[IMG: Bowl of Almonds]</div>164      <div class="txt">165        <div class="title">Organic Grocery California Almonds (American Badam) (1kg) | Special For Diwali Festival...</div>166        <div class="variant">1 Kilograms</div>167        <div class="rating">168          <div class="muted" style="font-size:28px;">2.9</div>169          <div class="stars">★★★☆☆</div>170          <div class="count">(8)</div>171        </div>172        <div class="price-row">173          <div class="price">₹829</div>174          <div class="muted">(₹82,900/100 g)</div>175          <div class="muted">M.R.P:</div>176          <div class="striked">₹1,599</div>177          <div class="muted">(48% off)</div>178        </div>179        <div class="meta green">prime Get it by Sunday, 9 July</div>180      </div>181    </div>182 183    <!-- spacer to keep content from bottom nav -->184    <div style="height:80px;"></div>185  </div>186 187  <!-- Bottom navigation -->188  <div class="bottom-nav">189    <div class="nav-item">190      <svg width="36" height="36" viewBox="0 0 24 24"><path fill="#1e1e1e" d="M12 3l9 8h-2v9h-6v-6H11v6H5v-9H3l9-8z"/></svg>191      <div>Home</div>192    </div>193    <div class="nav-item">194      <svg width="36" height="36" viewBox="0 0 24 24"><path fill="#1e1e1e" d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4 0-8 2-8 5v3h16v-3c0-3-4-5-8-5z"/></svg>195      <div>Account</div>196    </div>197    <div class="nav-item">198      <svg width="36" height="36" viewBox="0 0 24 24"><path fill="#1e1e1e" d="M7 6h14l-1.5 9h-11zM6 6l-2-3H1v2h2l3.6 7.59-1.35 2.45A2 2 0 0 0 7 18h12v-2H7.42l1.1-2H18a2 2 0 0 0 2-1.67L21 6H6zM7 20a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>199      <div>Cart</div>200    </div>201    <div class="nav-item">202      <svg width="36" height="36" viewBox="0 0 24 24"><path fill="#1e1e1e" d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>203      <div>Menu</div>204    </div>205  </div>206</div>207</body>208</html>