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>Product Page - Buttermilk</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: #F4F5F7;15 border-radius: 0;16 }17 18 /* Top overlay and search */19 .overlay {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 430px;25 background: rgba(0,0,0,0.55);26 }27 .status-bar {28 position: absolute;29 top: 22px;30 left: 32px;31 right: 32px;32 color: #fff;33 font-size: 36px;34 display: flex;35 align-items: center;36 justify-content: space-between;37 opacity: 0.9;38 }39 .status-icons { display: flex; gap: 18px; align-items: center; }40 .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.9; }41 42 .searchbar {43 position: absolute;44 top: 110px;45 left: 32px;46 right: 32px;47 height: 120px;48 background: #ffffff;49 border-radius: 30px;50 display: flex;51 align-items: center;52 padding: 0 28px;53 }54 .searchbar .left {55 display: flex; align-items: center; gap: 24px; color: #333;56 }57 .searchbar .text { font-size: 40px; color: #333; }58 .searchbar .right {59 margin-left: auto; display: flex; align-items: center; gap: 24px;60 }61 .icon {62 width: 48px; height: 48px;63 }64 .close-bubble {65 position: absolute;66 top: 240px;67 left: 50%;68 transform: translateX(-50%);69 width: 110px; height: 110px;70 background: #121212;71 border-radius: 55px;72 display: flex; align-items: center; justify-content: center;73 }74 .close-bubble svg { width: 52px; height: 52px; }75 76 /* Main sheet */77 .sheet {78 position: absolute;79 top: 340px;80 left: 0;81 width: 1080px;82 height: calc(2400px - 340px);83 background: #FFFFFF;84 border-top-left-radius: 36px;85 border-top-right-radius: 36px;86 box-shadow: 0 -2px 12px rgba(0,0,0,0.08);87 overflow-y: auto;88 }89 .sheet-content { padding: 36px 32px 220px 32px; }90 91 .hint {92 font-size: 38px;93 font-weight: 700;94 color: #111;95 margin-bottom: 30px;96 }97 98 /* People also bought */99 .section-title {100 font-size: 48px;101 font-weight: 700;102 color: #111;103 margin: 12px 0 24px 0;104 }105 .cards {106 display: flex;107 gap: 24px;108 margin-bottom: 40px;109 }110 .card {111 position: relative;112 width: 328px;113 background: #fff;114 border: 1px solid #E6E6E6;115 border-radius: 26px;116 padding: 18px;117 box-shadow: 0 2px 6px rgba(0,0,0,0.03);118 }119 .card .img {120 width: 100%;121 height: 300px;122 background: #E0E0E0;123 border: 1px solid #BDBDBD;124 border-radius: 22px;125 display: flex; align-items: center; justify-content: center;126 color: #757575; font-size: 28px;127 }128 .badge {129 position: absolute; top: 18px; left: 18px;130 background: #2D6CF6; color: #fff;131 font-size: 24px; font-weight: 700;132 padding: 10px 14px; border-radius: 12px;133 }134 .meta {135 display: inline-flex; align-items: center; gap: 8px;136 color: #4CAF50; font-weight: 700; font-size: 26px;137 margin-top: 16px;138 }139 .card h3 {140 margin: 12px 0 8px 0;141 font-size: 34px; color: #222; line-height: 1.2; font-weight: 700;142 }143 .sub { font-size: 28px; color: #666; }144 .price-row {145 display: flex; align-items: center; justify-content: space-between;146 margin-top: 18px;147 }148 .price {149 font-size: 36px; font-weight: 700; color: #111;150 }151 .old-price {152 font-size: 30px; color: #9AA0A6; text-decoration: line-through; margin-left: 10px;153 }154 .add-btn {155 background: #2E7D32; color: #fff; font-weight: 700;156 border: none; border-radius: 18px; padding: 16px 28px; font-size: 32px;157 }158 159 /* Product Details */160 .details p {161 font-size: 34px; color: #444; line-height: 1.45;162 margin: 8px 0 18px 0;163 }164 .link {165 color: #2E7D32; font-weight: 700; font-size: 34px;166 }167 168 /* Brands */169 .brands-row {170 display: flex; gap: 40px; margin-top: 24px;171 align-items: flex-start;172 }173 .brand {174 width: 220px;175 text-align: center;176 }177 .brand .logo {178 width: 220px; height: 140px;179 background: #E0E0E0; border: 1px solid #BDBDBD;180 display: flex; align-items: center; justify-content: center;181 color: #757575; font-size: 28px; border-radius: 12px;182 }183 .brand-name {184 margin-top: 16px; font-size: 32px; color: #222;185 }186 187 /* Bottom bar */188 .bottom-bar {189 position: absolute;190 bottom: 0; left: 0;191 width: 1080px; height: 170px;192 background: #FFFFFF;193 box-shadow: 0 -6px 16px rgba(0,0,0,0.08);194 display: flex; align-items: center;195 padding: 0 32px;196 }197 .bar-left {198 display: flex; flex-direction: column; gap: 6px;199 color: #111;200 }201 .bar-left .line1 { font-size: 36px; }202 .bar-left .line2 { font-size: 34px; color: #333; }203 .bar-right {204 margin-left: auto;205 }206 .cta {207 background: #2E7D32; color: #fff;208 font-size: 38px; font-weight: 700;209 padding: 26px 38px; border-radius: 18px; border: none;210 }211 212 /* Simple SVG coloring */213 svg { display: block; }214 215</style>216</head>217<body>218<div id="render-target">219 <!-- Dark overlay area -->220 <div class="overlay"></div>221 222 <!-- Status bar mock -->223 <div class="status-bar">224 <div>12:16</div>225 <div class="status-icons">226 <div class="dot"></div>227 <div class="dot"></div>228 <div class="dot"></div>229 <div class="dot"></div>230 </div>231 </div>232 233 <!-- Search bar -->234 <div class="searchbar">235 <div class="left">236 <svg class="icon" viewBox="0 0 24 24">237 <path d="M15 6l-6 6 6 6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>238 </svg>239 <div class="text">buttermilk</div>240 </div>241 <div class="right">242 <svg class="icon" viewBox="0 0 24 24">243 <circle cx="12" cy="12" r="9" stroke="#777" stroke-width="2" fill="none"/>244 <path d="M12 7v6l4 2" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>245 </svg>246 <svg class="icon" viewBox="0 0 24 24">247 <path d="M12 4c2.2 0 4 1.8 4 4v4c0 2.7-2.2 3.7-4 3.7S8 14.7 8 12V8c0-2.2 1.8-4 4-4zM10 18h4" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>248 </svg>249 </div>250 </div>251 252 <!-- Center close bubble -->253 <div class="close-bubble">254 <svg viewBox="0 0 24 24">255 <path d="M6 6l12 12M18 6L6 18" stroke="#fff" stroke-width="2" stroke-linecap="round"/>256 </svg>257 </div>258 259 <!-- Main white sheet -->260 <div class="sheet">261 <div class="sheet-content">262 <div class="hint">Showing results for "buttermilk"</div>263 264 <div class="section-title">People also bought</div>265 <div class="cards">266 <!-- Card 1 -->267 <div class="card">268 <div class="img">[IMG: Mother Dairy Classic Curd Pack]</div>269 <div class="meta">270 <svg width="26" height="26" viewBox="0 0 24 24">271 <circle cx="12" cy="12" r="9" stroke="#4CAF50" stroke-width="2" fill="none"/>272 <path d="M12 8v5h5" stroke="#4CAF50" stroke-width="2" fill="none" stroke-linecap="round"/>273 </svg>274 <span>13 MINS</span>275 </div>276 <h3>Mother Dairy Classic Curd</h3>277 <div class="sub">400 g</div>278 <div class="price-row">279 <div class="price">₹34</div>280 <button class="add-btn">ADD</button>281 </div>282 </div>283 284 <!-- Card 2 -->285 <div class="card">286 <div class="badge">43% OFF</div>287 <div class="img">[IMG: Fresca Hazam Jeera Juice Bottle]</div>288 <div class="meta">289 <svg width="26" height="26" viewBox="0 0 24 24">290 <circle cx="12" cy="12" r="9" stroke="#4CAF50" stroke-width="2" fill="none"/>291 <path d="M12 8v5h5" stroke="#4CAF50" stroke-width="2" fill="none" stroke-linecap="round"/>292 </svg>293 <span>13 MINS</span>294 </div>295 <h3>Fresca Hazam Jeera Juice</h3>296 <div class="sub">1 l</div>297 <div class="price-row">298 <div style="display:flex; align-items:center;">299 <div class="price">₹51</div>300 <div class="old-price">₹90</div>301 </div>302 <button class="add-btn">ADD</button>303 </div>304 </div>305 306 <!-- Card 3 -->307 <div class="card">308 <div class="badge" style="background:#3A75FF;">12% OFF</div>309 <div class="img">[IMG: Catch Lemon Juice With Shikanji]</div>310 <div class="meta">311 <svg width="26" height="26" viewBox="0 0 24 24">312 <circle cx="12" cy="12" r="9" stroke="#4CAF50" stroke-width="2" fill="none"/>313 <path d="M12 8v5h5" stroke="#4CAF50" stroke-width="2" fill="none" stroke-linecap="round"/>314 </svg>315 <span>13 MINS</span>316 </div>317 <h3>Catch Lemon Juice With Shikanji Masala</h3>318 <div class="sub">12 x 300 ml</div>319 <div class="price-row">320 <div style="display:flex; align-items:center;">321 <div class="price">₹209</div>322 <div class="old-price">₹240</div>323 </div>324 <button class="add-btn">ADD</button>325 </div>326 </div>327 </div>328 329 <!-- Product Details -->330 <div class="section-title">Product Details</div>331 <div class="details">332 <div style="font-size:36px; font-weight:700; color:#333;">Description</div>333 <p>334 Made from spices like ginger, green chilli and Jeera, Mother Dairy Tadka Buttermilk is both delicious and refreshing.335 Made from the best quality milk, it makes for a healthy addition to everyday meals and tastes best when served chilled.336 </p>337 <div class="link">View more details ▾</div>338 </div>339 340 <!-- Brands -->341 <div class="section-title">Brands in this category</div>342 <div class="brands-row">343 <div class="brand">344 <div class="logo">[IMG: Amul Logo]</div>345 <div class="brand-name">Amul</div>346 </div>347 <div class="brand">348 <div class="logo">[IMG: Britannia Logo]</div>349 <div class="brand-name">Britannia</div>350 </div>351 <div class="brand">352 <div class="logo">[IMG: FruBon Logo]</div>353 <div class="brand-name">FruBon</div>354 </div>355 <div class="brand">356 <div class="logo">[IMG: Go Logo]</div>357 <div class="brand-name">Go</div>358 </div>359 </div>360 </div>361 </div>362 363 <!-- Bottom Add to cart bar -->364 <div class="bottom-bar">365 <div class="bar-left">366 <div class="line1">250 ml</div>367 <div class="line2">MRP ₹10</div>368 </div>369 <div class="bar-right">370 <button class="cta">Add to cart</button>371 </div>372 </div>373</div>374</body>375</html>