GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Blinkit - Product Details Overlay</title>5<style>6  body { margin:0; padding:0; background:transparent; }7  #render-target{8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#ffffff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;10    color:#222;11  }12 13  /* Top system/status bar */14  .status-bar{15    height:80px; padding:0 28px; display:flex; align-items:center; justify-content:space-between;16    color:#222; font-size:32px; background:#fff;17  }18  .status-icons span{ display:inline-block; width:18px; height:18px; margin-left:16px; background:#222; border-radius:50%; opacity:.9; }19 20  /* Search bar */21  .search-wrap{ padding:14px 24px 24px; background:#fff; }22  .search-bar{23    height:100px; border-radius:18px; background:#f2f4f6; display:flex; align-items:center;24    padding:0 20px; box-shadow: inset 0 0 0 1px #e3e6ea;25  }26  .icon{ width:56px; height:56px; display:flex; justify-content:center; align-items:center; color:#444; }27  .query{28    flex:1; color:#111; font-size:36px; padding:0 12px;29    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;30  }31  .pill{32    padding:8px 18px; border-radius:20px; font-size:26px; background:#e8eef7; color:#234; margin-left:8px;33  }34 35  /* Dimmed overlay and sheet */36  .scrim{37    position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,.55);38  }39  .close-big{40    position:absolute; top:190px; left:50%; transform:translateX(-50%);41    width:120px; height:120px; border-radius:60px; background:#1e1e1e; color:#fff;42    display:flex; align-items:center; justify-content:center; font-size:68px; font-weight:600;43    box-shadow:0 6px 16px rgba(0,0,0,.35);44  }45  .sheet{46    position:absolute; left:0; right:0; bottom:190px; top:320px;47    background:#fff; border-top-left-radius:28px; border-top-right-radius:28px;48    box-shadow:0 -8px 24px rgba(0,0,0,.25); padding:34px 36px 24px; overflow-y:auto;49  }50  .sheet h2{51    font-size:42px; margin:8px 0 22px; font-weight:800;52  }53  .sec-title{ font-size:34px; font-weight:700; margin:24px 0 8px; }54  .sec-text{ font-size:30px; line-height:1.45; color:#444; }55  .muted{ color:#6b6f75; }56  .link{57    color:#1a8f3a; font-weight:700; margin-top:12px; display:inline-flex; align-items:center; gap:8px; font-size:30px;58  }59  .chev-up{ display:inline-block; width:0;height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:12px solid #1a8f3a; }60 61  /* People also bought */62  .subtitle{ font-size:44px; font-weight:800; margin:30px 0 18px; }63  .cards{ display:flex; gap:28px; overflow-x:auto; padding-bottom:16px; }64  .card{65    width:320px; border:1px solid #e5e7ea; border-radius:22px; background:#fff; padding:16px; flex:0 0 auto;66  }67  .img{68    width:100%; height:260px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:14px;69    display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px; text-align:center; padding:8px;70  }71  .chip{72    margin-top:14px; display:inline-flex; align-items:center; gap:8px; background:#ecfff0; color:#207a2e;73    border:1px solid #bfe9c8; border-radius:18px; padding:6px 12px; font-size:24px; font-weight:700;74  }75  .card h4{ font-size:34px; margin:12px 0 4px; font-weight:800; }76  .meta{ font-size:28px; color:#5b6067; }77  .price-row{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; }78  .price{ font-size:34px; font-weight:800; }79  .strike{ font-size:28px; color:#9aa1a9; text-decoration:line-through; margin-left:10px; }80  .btn{81    padding:14px 26px; border-radius:14px; color:#1a8f3a; border:2px solid #1a8f3a; font-weight:800; background:#fff; font-size:30px;82  }83 84  /* bottom sticky bar */85  .bottom-bar{86    position:absolute; left:0; right:0; bottom:0; height:180px; background:#fff; border-top:1px solid #e9edf2;87    display:flex; align-items:center; justify-content:space-between; padding:0 36px;88  }89  .bar-left{ font-size:34px; }90  .muted-small{ color:#6b7076; font-size:30px; margin-top:6px; }91  .cta{92    background:#2fbf46; color:#fff; font-weight:800; border:none; font-size:40px; padding:26px 46px; border-radius:26px;93    box-shadow:0 6px 14px rgba(47,191,70,.35);94  }95 96  /* Simple icons */97  svg{ display:block; }98  .icon svg{ width:40px; height:40px; }99</style>100</head>101<body>102<div id="render-target">103 104  <!-- Background app header -->105  <div class="status-bar">106    <div>11:26</div>107    <div class="status-icons">108      <span></span><span></span><span></span><span></span>109    </div>110  </div>111 112  <div class="search-wrap">113    <div class="search-bar">114      <div class="icon">115        <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>116      </div>117      <div class="query">Saffola Classic Masala oats</div>118      <div class="icon">119        <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#444" stroke-width="2" stroke-linecap="round"/></svg>120      </div>121      <div class="icon">122        <svg viewBox="0 0 24 24">123          <path d="M12 3a3 3 0 013 3v5a3 3 0 01-6 0V6a3 3 0 013-3z" fill="#444"/>124          <path d="M8 12a4 4 0 008 0M12 16v3" stroke="#444" stroke-width="2" stroke-linecap="round"/>125        </svg>126      </div>127    </div>128  </div>129 130  <!-- Dimmed overlay + bottom sheet -->131  <div class="scrim"></div>132 133  <div class="close-big">×</div>134 135  <div class="sheet">136    <h2>Showing results for "saffola classic masala oats"</h2>137 138    <div class="sec-title">Country of Origin</div>139    <div class="sec-text">India</div>140 141    <div class="sec-title">Customer Care Details</div>142    <div class="sec-text">Email: info@blinkit.com</div>143 144    <div class="sec-title">Return Policy</div>145    <div class="sec-text">146      This Item is non-returnable. For a damaged, defective, incorrect or expired item, you can request a replacement within 72 hours of delivery.147      In case of an incorrect item, you may raise a replacement or return request only if the item is sealed/ unopened/ unused and in original condition.148    </div>149 150    <div class="sec-title">Expiry Date</div>151    <div class="sec-text">Please refer to the packaging of the product for expiry date.</div>152 153    <div class="sec-title">Seller</div>154    <div class="sec-text">Bigway Marketing Private Limited</div>155 156    <div class="sec-title">Seller FSSAI</div>157    <div class="sec-text">13323999000312</div>158 159    <div class="link">View less details <span class="chev-up"></span></div>160 161    <div class="subtitle">People also bought</div>162 163    <div class="cards">164      <!-- Card 1 -->165      <div class="card">166        <div class="img">[IMG: Amul Gold Full Cream Milk Pack]</div>167        <div class="chip">168          <svg viewBox="0 0 24 24" width="22" height="22"><circle cx="12" cy="12" r="9" fill="none" stroke="#207a2e" stroke-width="2"/><path d="M12 7v6l4 2" stroke="#207a2e" stroke-width="2" stroke-linecap="round"/></svg>169          9 MINS170        </div>171        <h4>Amul Gold Full</h4>172        <div class="meta">Cream Fresh Milk</div>173        <div class="meta">500 ml</div>174        <div class="price-row">175          <div class="price">₹33</div>176          <button class="btn">ADD</button>177        </div>178      </div>179 180      <!-- Card 2 -->181      <div class="card">182        <div class="img">[IMG: Rajdhani Daliya Pack]</div>183        <div class="chip">184          <svg viewBox="0 0 24 24" width="22" height="22"><circle cx="12" cy="12" r="9" fill="none" stroke="#207a2e" stroke-width="2"/><path d="M12 7v6l4 2" stroke="#207a2e" stroke-width="2" stroke-linecap="round"/></svg>185          9 MINS186        </div>187        <h4>Rajdhani Daliya</h4>188        <div class="meta">500 g</div>189        <div class="price-row">190          <div>191            <span class="price">₹40</span>192            <span class="strike">₹45</span>193          </div>194          <button class="btn">ADD</button>195        </div>196      </div>197 198      <!-- Card 3 -->199      <div class="card">200        <div class="img">[IMG: Harvest Gold Brown Bread Loaf]</div>201        <div class="chip">202          <svg viewBox="0 0 24 24" width="22" height="22"><circle cx="12" cy="12" r="9" fill="none" stroke="#207a2e" stroke-width="2"/><path d="M12 7v6l4 2" stroke="#207a2e" stroke-width="2" stroke-linecap="round"/></svg>203          9 MINS204        </div>205        <h4>Harvest Gold Healthy</h4>206        <div class="meta">Brown Bread</div>207        <div class="meta">400 g</div>208        <div class="price-row">209          <div class="price">₹50</div>210          <button class="btn">ADD</button>211        </div>212      </div>213    </div>214  </div>215 216  <!-- bottom sticky cart bar -->217  <div class="bottom-bar">218    <div>219      <div class="bar-left">38 g</div>220      <div class="muted-small">MRP ₹17</div>221    </div>222    <button class="cta">Add to cart</button>223  </div>224 225</div>226</body>227</html>