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>Buttermilk - Product Detail</title>7<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">8<style>9 body { margin: 0; padding: 0; background: transparent; font-family: 'Inter', Arial, sans-serif; }10 #render-target {11 width: 1080px; height: 2400px;12 position: relative; overflow: hidden;13 background: #ffffff; border-radius: 24px;14 box-shadow: 0 20px 40px rgba(0,0,0,0.2);15 }16 /* Top search/header */17 .search-bar {18 position: relative;19 padding: 24px 32px;20 background: #ffffff;21 }22 .search-input {23 display: flex; align-items: center;24 gap: 20px;25 background: #f2f3f5;26 border-radius: 28px;27 padding: 20px 24px;28 height: 88px;29 }30 .icon-btn { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }31 .search-text { color: #222; font-size: 36px; flex: 1; }32 .muted-icon { opacity: 0.7; }33 /* Dark overlay and close */34 .top-overlay {35 position: absolute; left: 0; top: 0; width: 100%; height: 380px;36 background: rgba(0,0,0,0.55);37 }38 .close-chip {39 position: absolute; left: 50%; top: 190px; transform: translate(-50%, -50%);40 width: 120px; height: 120px; border-radius: 60px; background: #111;41 display: flex; align-items: center; justify-content: center;42 box-shadow: 0 8px 20px rgba(0,0,0,0.4);43 }44 .results-text {45 margin: 0; padding: 16px 32px 0 32px;46 color: #1a1a1a; font-size: 40px; font-weight: 700;47 }48 /* Sections */49 .section { padding: 36px 32px 12px 32px; }50 .section h2 {51 margin: 0 0 24px 0; font-size: 44px; color: #121212; font-weight: 700;52 }53 /* Product cards row */54 .product-row { display: flex; gap: 24px; }55 .card {56 width: 300px; background: #fff; border: 1px solid #e6e6e6;57 border-radius: 28px; padding: 20px; box-shadow: 0 6px 12px rgba(0,0,0,0.06);58 }59 .product-img {60 width: 100%; height: 280px; border: 1px solid #BDBDBD; border-radius: 24px;61 background: #E0E0E0; display: flex; align-items: center; justify-content: center;62 color: #757575; font-size: 28px; text-align: center;63 position: relative;64 }65 .badge-off {66 position: absolute; left: 12px; top: 12px;67 background: #2476ff; color: #fff; font-size: 26px; font-weight: 700;68 padding: 8px 12px; border-radius: 10px;69 }70 .meta-row { display: flex; align-items: center; gap: 10px; margin-top: 16px; color: #4a4a4a; font-size: 28px; }71 .title { margin-top: 12px; font-size: 34px; font-weight: 700; color: #111; line-height: 1.2; }72 .sub { margin-top: 6px; color: #6f6f6f; font-size: 28px; }73 .price-row { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; }74 .price { font-size: 36px; font-weight: 700; color: #111; }75 .old-price { font-size: 28px; color: #9aa1a8; text-decoration: line-through; margin-left: 8px; }76 .add-btn {77 border: 2px solid #4F8F39; color: #4F8F39; background: #fff;78 border-radius: 20px; height: 72px; min-width: 150px;79 display: inline-flex; align-items: center; justify-content: center;80 font-size: 32px; font-weight: 700;81 }82 /* Product details */83 .details { padding: 24px 32px; }84 .details h3 { margin: 0 0 16px 0; font-size: 42px; font-weight: 700; color: #111; }85 .details .label { font-size: 32px; font-weight: 600; color: #222; }86 .details p { margin: 8px 0 16px 0; font-size: 32px; color: #333; line-height: 1.5; }87 .more-link { color: #2a7a2e; font-size: 32px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }88 /* Brands */89 .brands { padding: 24px 32px 220px 32px; }90 .brands h2 { margin: 0 0 28px 0; font-size: 44px; font-weight: 700; }91 .brand-row { display: flex; gap: 40px; }92 .brand { width: 220px; text-align: center; }93 .brand .brand-img {94 width: 220px; height: 140px; background: #E0E0E0; border: 1px solid #BDBDBD;95 display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 18px;96 }97 .brand .name { margin-top: 10px; font-size: 30px; color: #222; }98 /* Sticky bottom bar */99 .bottom-bar {100 position: absolute; left: 0; right: 0; bottom: 76px;101 height: 160px; background: #fff; border-top: 1px solid #e6e6e6;102 display: flex; align-items: center; justify-content: space-between;103 padding: 0 40px;104 box-shadow: 0 -8px 16px rgba(0,0,0,0.08);105 }106 .bar-left { display: flex; flex-direction: column; gap: 8px; }107 .bar-left .size { font-size: 34px; color: #111; }108 .bar-left .mrp { font-size: 30px; color: #333; }109 .qty {110 background: #4F8F39; color: #fff; height: 104px; border-radius: 22px;111 display: flex; align-items: center; gap: 24px; padding: 0 24px;112 min-width: 380px; justify-content: center;113 }114 .qty .num { font-size: 42px; font-weight: 700; }115 .qty-btn {116 width: 72px; height: 72px; border-radius: 16px; background: rgba(255,255,255,0.18);117 display: flex; align-items: center; justify-content: center;118 }119 /* Home indicator */120 .home-indicator {121 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);122 width: 320px; height: 12px; background: #111; opacity: 0.8; border-radius: 6px;123 }124</style>125</head>126<body>127<div id="render-target">128 <!-- Top search header -->129 <div class="search-bar">130 <div class="search-input">131 <div class="icon-btn">132 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">133 <path d="M15 18l-6-6 6-6" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>134 </svg>135 </div>136 <div class="search-text">buttermilk</div>137 <div class="icon-btn muted-icon">138 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">139 <path d="M11 5a3 3 0 013 3v4a3 3 0 01-6 0V8a3 3 0 013-3z" stroke="#333" stroke-width="2"/>140 <path d="M7 10v1a5 5 0 0010 0v-1" stroke="#333" stroke-width="2" stroke-linecap="round"/>141 </svg>142 </div>143 </div>144 </div>145 146 <!-- Dark overlay with close -->147 <div class="top-overlay"></div>148 <div class="close-chip">149 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">150 <path d="M6 6l12 12M18 6L6 18" stroke="#fff" stroke-width="2" stroke-linecap="round"/>151 </svg>152 </div>153 154 <h1 class="results-text">Showing results for "buttermilk"</h1>155 156 <!-- People also bought -->157 <div class="section">158 <h2>People also bought</h2>159 <div class="product-row">160 <!-- Card 1 -->161 <div class="card">162 <div class="product-img">163 [IMG: Mother Dairy Classic Curd Pack]164 </div>165 <div class="meta-row">166 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">167 <circle cx="12" cy="12" r="9" stroke="#5b5b5b" stroke-width="2"/>168 <path d="M12 7v6l4 2" stroke="#5b5b5b" stroke-width="2" stroke-linecap="round"/>169 </svg>170 <span>13 MINS</span>171 </div>172 <div class="title">Mother Dairy Classic Curd</div>173 <div class="sub">400 g</div>174 <div class="price-row">175 <div class="price">₹34</div>176 <button class="add-btn">ADD</button>177 </div>178 </div>179 180 <!-- Card 2 -->181 <div class="card">182 <div class="product-img">183 <div class="badge-off">43% OFF</div>184 [IMG: Fresca Hazam Jeera Juice Bottle]185 </div>186 <div class="meta-row">187 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">188 <circle cx="12" cy="12" r="9" stroke="#5b5b5b" stroke-width="2"/>189 <path d="M12 7v6l4 2" stroke="#5b5b5b" stroke-width="2" stroke-linecap="round"/>190 </svg>191 <span>13 MINS</span>192 </div>193 <div class="title">Fresca Hazam Jeera Juice</div>194 <div class="sub">1 l</div>195 <div class="price-row">196 <div>197 <span class="price">₹51</span>198 <span class="old-price">₹90</span>199 </div>200 <button class="add-btn">ADD</button>201 </div>202 </div>203 204 <!-- Card 3 -->205 <div class="card">206 <div class="product-img">207 <div class="badge-off">12% OFF</div>208 [IMG: Catch Lemon Juice With Shikanji Pack]209 </div>210 <div class="meta-row">211 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">212 <circle cx="12" cy="12" r="9" stroke="#5b5b5b" stroke-width="2"/>213 <path d="M12 7v6l4 2" stroke="#5b5b5b" stroke-width="2" stroke-linecap="round"/>214 </svg>215 <span>13 MINS</span>216 </div>217 <div class="title">Catch Lemon Juice With Shikanji Masala</div>218 <div class="sub">12 x 300 ml</div>219 <div class="price-row">220 <div>221 <span class="price">₹209</span>222 <span class="old-price">₹240</span>223 </div>224 <button class="add-btn">ADD</button>225 </div>226 </div>227 </div>228 </div>229 230 <!-- Product details -->231 <div class="details">232 <h3>Product Details</h3>233 <div class="label">Description</div>234 <p>Made from spices like ginger, green chilli and Jeera, Mother Dairy Tadka Buttermilk is both delicious and refreshing. Made from the best quality milk, it makes for a healthy addition to everyday meals and tastes best when served chilled.</p>235 <div class="more-link">236 <span>View more details</span>237 <svg width="22" height="22" viewBox="0 0 24 24" fill="none">238 <path d="M6 9l6 6 6-6" stroke="#2a7a2e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>239 </svg>240 </div>241 </div>242 243 <!-- Brands -->244 <div class="brands">245 <h2>Brands in this category</h2>246 <div class="brand-row">247 <div class="brand">248 <div class="brand-img">[IMG: Amul Logo]</div>249 <div class="name">Amul</div>250 </div>251 <div class="brand">252 <div class="brand-img">[IMG: Britannia Logo]</div>253 <div class="name">Britannia</div>254 </div>255 <div class="brand">256 <div class="brand-img">[IMG: FruBon Logo]</div>257 <div class="name">FruBon</div>258 </div>259 <div class="brand">260 <div class="brand-img">[IMG: Go Logo]</div>261 <div class="name">Go</div>262 </div>263 </div>264 </div>265 266 <!-- Bottom action bar -->267 <div class="bottom-bar">268 <div class="bar-left">269 <div class="size">250 ml</div>270 <div class="mrp">MRP ₹10</div>271 </div>272 <div class="qty">273 <div class="qty-btn">274 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">275 <path d="M5 12h14" stroke="#fff" stroke-width="2" stroke-linecap="round"/>276 </svg>277 </div>278 <div class="num">1</div>279 <div class="qty-btn">280 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">281 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2" stroke-linecap="round"/>282 </svg>283 </div>284 </div>285 </div>286 287 <div class="home-indicator"></div>288</div>289</body>290</html>