GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>bbdaily - Masala Oats</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #f3f5f7;13 color: #333;14 }15 16 /* Status bar */17 .status-bar {18 height: 90px;19 background: #ffffff;20 padding: 0 36px;21 display: flex;22 align-items: center;23 font-size: 34px;24 color: #222;25 }26 .status-left, .status-right { display: flex; align-items: center; }27 .status-left span { margin-right: 22px; }28 .status-icons svg { margin-right: 16px; }29 .status-bar .status-right { margin-left: auto; }30 .status-right svg { margin-left: 22px; }31 32 /* Header */33 .header {34 height: 130px;35 background: #ffffff;36 display: flex;37 align-items: center;38 padding: 0 28px;39 border-bottom: 1px solid #e6eaee;40 }41 .back-btn {42 width: 90px; height: 90px;43 display: flex; align-items: center; justify-content: center;44 }45 .header-title {46 position: absolute; left: 0; right: 0;47 text-align: center;48 font-weight: 600; font-size: 48px; color: #3a4a54;49 }50 51 /* Search */52 .search-row {53 background: #ffffff;54 padding: 24px 32px 20px 32px;55 }56 .search-pill {57 height: 110px; border-radius: 55px;58 background: #e3e7ea; color: #6c7a83;59 display: flex; align-items: center;60 padding: 0 36px;61 font-size: 38px;62 }63 .search-pill svg { margin-right: 24px; }64 65 /* Items + Filter */66 .filter-bar {67 height: 100px;68 background: #eef1f4;69 display: flex; align-items: center;70 padding: 0 32px;71 font-size: 36px; color: #5b6872;72 border-top: 1px solid #e5e9ec;73 border-bottom: 1px solid #e5e9ec;74 }75 .filter-bar .items-count { font-weight: 500; }76 .filter-btn {77 margin-left: auto;78 display: inline-flex; align-items: center;79 border: 2px solid #c7ced4;80 background: #ffffff;81 border-radius: 20px;82 padding: 14px 22px;83 color: #6a7680; font-size: 34px;84 box-shadow: 0 2px 0 #d0d6da;85 }86 .filter-btn svg { margin-right: 14px; }87 88 /* Product list area */89 .list-area {90 background: #e7edf1;91 padding: 26px 26px 0 26px;92 }93 .product-card {94 background: #ffffff;95 border-radius: 20px;96 border: 1px solid #dfe6ea;97 box-shadow: 0 2px 0 rgba(0,0,0,0.05);98 padding: 26px;99 margin-bottom: 24px;100 }101 .card-inner { display: flex; }102 .prod-media {103 width: 300px;104 position: relative;105 margin-right: 26px;106 }107 .img-box {108 width: 300px; height: 320px;109 background: #E0E0E0;110 border: 1px solid #BDBDBD;111 border-radius: 16px;112 display: flex; justify-content: center; align-items: center;113 color: #757575; font-size: 32px; text-align: center; padding: 10px;114 }115 .discount-tag {116 position: absolute; left: 12px; top: 12px;117 background: #4caf50; color: #fff;118 padding: 10px 16px;119 font-size: 30px; font-weight: 700;120 border-radius: 16px;121 }122 .vertical-label {123 position: absolute; right: 8px; top: 12px;124 width: 70px; height: 300px;125 background: #e86d2f; color: #fff;126 border-radius: 12px;127 display: flex; align-items: center; justify-content: center;128 writing-mode: vertical-rl; text-orientation: mixed;129 font-size: 28px; font-weight: 700;130 }131 132 .prod-info { flex: 1; }133 .brand {134 font-size: 46px; font-weight: 700; color: #1f2a33;135 }136 .title {137 font-size: 40px; color: #2e3a44; margin-top: 6px;138 }139 .rating-row {140 display: flex; align-items: center; margin-top: 14px;141 font-size: 34px; color: #7a8791;142 }143 .rating-chip {144 display: inline-flex; align-items: center;145 background: #e7f4ea; color: #3c8d46;146 font-weight: 700; border-radius: 22px;147 padding: 8px 16px; margin-right: 14px;148 }149 .rating-chip svg { margin-right: 8px; }150 .variant-select {151 margin-top: 18px;152 width: 520px; height: 90px;153 border: 2px solid #d8dee3; border-radius: 16px;154 display: flex; align-items: center; justify-content: space-between;155 padding: 0 18px; color: #6d7983; font-size: 34px;156 }157 .price-row {158 margin-top: 18px; display: flex; align-items: baseline;159 }160 .price-now {161 font-size: 52px; font-weight: 800; color: #222;162 margin-right: 18px;163 }164 .price-old {165 font-size: 40px; color: #8b95a0; text-decoration: line-through;166 }167 168 .btn-row {169 margin-top: 26px; display: flex; align-items: center;170 }171 .btn-outline {172 flex: 0 0 420px;173 height: 90px; border-radius: 60px;174 border: 3px solid #5a7680;175 color: #3d5460; background: #ffffff;176 font-size: 36px; font-weight: 700;177 display: flex; align-items: center; justify-content: center;178 margin-right: 26px;179 }180 .btn-subscribe {181 flex: 1; height: 90px; border-radius: 60px;182 background: #d86a71; color: #ffffff;183 font-size: 36px; font-weight: 700;184 display: flex; align-items: center; justify-content: center;185 }186 187 /* Divider area and end text */188 .end-area {189 background: #e9edf0;190 height: 480px;191 display: flex; align-items: center; justify-content: center;192 color: #4b5863; font-size: 42px;193 }194 195 /* Bottom nav */196 .bottom-nav {197 position: absolute; left: 0; right: 0; bottom: 70px;198 height: 180px; background: #ffffff;199 border-top: 1px solid #e2e7ea;200 display: flex; align-items: center; justify-content: space-around;201 padding: 0 30px;202 color: #8a95a0;203 }204 .tab {205 display: flex; flex-direction: column; align-items: center; justify-content: center;206 font-size: 32px;207 }208 .tab svg { width: 60px; height: 60px; margin-bottom: 12px; }209 .badge {210 position: absolute; margin-left: 52px; margin-top: -18px;211 background: #e05b64; color: #fff; font-size: 26px; font-weight: 700;212 border-radius: 40px; padding: 6px 12px; border: 2px solid #ffffff;213 }214 /* Gesture bar */215 .gesture {216 position: absolute; left: 50%; transform: translateX(-50%);217 bottom: 16px; width: 340px; height: 14px; background: #000;218 border-radius: 10px;219 }220</style>221</head>222<body>223<div id="render-target">224 225 <!-- Status Bar -->226 <div class="status-bar">227 <div class="status-left">228 <span>11:44</span>229 <div class="status-icons">230 <!-- simple bell icons -->231 <svg width="28" height="28" viewBox="0 0 24 24" fill="#8c939a"><path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm7-6V11a7 7 0 1 0-14 0v5l-2 2v1h20v-1l-2-2z"/></svg>232 <svg width="28" height="28" viewBox="0 0 24 24" fill="#8c939a"><path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm7-6V11a7 7 0 1 0-14 0v5l-2 2v1h20v-1l-2-2z"/></svg>233 <svg width="28" height="28" viewBox="0 0 24 24" fill="#8c939a"><circle cx="12" cy="12" r="10"/></svg>234 <span style="font-weight:700; color:#7a8086;">ib</span>235 <span style="margin-left:10px; font-weight:700; color:#7a8086;">N</span>236 <span style="margin-left:10px;">•</span>237 </div>238 </div>239 <div class="status-right">240 <!-- silent -->241 <svg width="28" height="28" viewBox="0 0 24 24" fill="#7a8086"><path d="M12 3 6 9H3v6h3l6 6V3zm8 9a8 8 0 0 1-2.3 5.7l1.4 1.4A10 10 0 0 0 22 12h-2zM4.3 4.3 3 5.6 18.4 21l1.3-1.3L4.3 4.3z"/></svg>242 <!-- wifi -->243 <svg width="28" height="28" viewBox="0 0 24 24" fill="#7a8086"><path d="M12 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7-7 2 2a9 9 0 0 1 12 0l2-2c-5-4-13-4-16 0zm3.5 3.5 2 2a5 5 0 0 1 7 0l2-2c-3.5-3-9.5-3-13 0z"/></svg>244 <!-- battery -->245 <svg width="34" height="34" viewBox="0 0 24 24" fill="#7a8086"><path d="M20 7h1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-1v2H4V5h16v2z"/></svg>246 </div>247 </div>248 249 <!-- Header -->250 <div class="header">251 <div class="back-btn">252 <svg width="44" height="44" viewBox="0 0 24 24" fill="#4b5963"><path d="M15 18l-6-6 6-6" stroke="#4b5963" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>253 </div>254 <div class="header-title">bbdaily</div>255 </div>256 257 <!-- Search -->258 <div class="search-row">259 <div class="search-pill">260 <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#6c7a83" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>261 <span>Saffola Classic Masala oats</span>262 </div>263 </div>264 265 <!-- Items and Filter -->266 <div class="filter-bar">267 <span class="items-count">2 Items</span>268 <div class="filter-btn">269 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#6a7680" stroke-width="2"><path d="M3 6h14M7 12h14M11 18h10"/><circle cx="17" cy="6" r="2"/><circle cx="11" cy="12" r="2"/><circle cx="15" cy="18" r="2"/></svg>270 <span>Filter</span>271 </div>272 </div>273 274 <!-- Product list -->275 <div class="list-area">276 277 <!-- Card 1 -->278 <div class="product-card">279 <div class="card-inner">280 <div class="prod-media">281 <div class="img-box">[IMG: Saffola Oats Pack]</div>282 <div class="discount-tag">18% OFF</div>283 <div class="vertical-label">Classic Masala</div>284 </div>285 <div class="prod-info">286 <div class="brand">SAFFOLA</div>287 <div class="title">Oats - Tasty Evening</div>288 <div class="rating-row">289 <div class="rating-chip">290 <svg width="28" height="28" viewBox="0 0 24 24" fill="#3c8d46"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>291 <span>4.2</span>292 </div>293 <span>2392 Ratings</span>294 </div>295 <div class="variant-select">296 <span>1 kg - Pouch</span>297 <svg width="32" height="32" viewBox="0 0 24 24" fill="#8a95a0"><path d="M7 10l5 5 5-5z"/></svg>298 </div>299 <div class="price-row">300 <div class="price-now">₹368.18</div>301 <div class="price-old">₹449</div>302 </div>303 <div class="btn-row">304 <div class="btn-outline">Buy Once</div>305 <div class="btn-subscribe">Subscribe @ ₹368.18</div>306 </div>307 </div>308 </div>309 </div>310 311 <!-- Card 2 -->312 <div class="product-card">313 <div class="card-inner">314 <div class="prod-media">315 <div class="img-box">[IMG: Saffola Crunch Oats Pack]</div>316 <div class="discount-tag" style="background:#4caf50;">20% OFF</div>317 <div class="vertical-label" style="background:#a33c35;">Masala Oats Karara Crunch</div>318 </div>319 <div class="prod-info">320 <div class="brand">SAFFOLA</div>321 <div class="title">Masala Oats - Karara</div>322 <div class="rating-row">323 <div class="rating-chip">324 <svg width="28" height="28" viewBox="0 0 24 24" fill="#3c8d46"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>325 <span>4.1</span>326 </div>327 <span>196 Ratings</span>328 </div>329 <div class="variant-select" style="width: 400px;">330 <span>500 g</span>331 <svg width="32" height="32" viewBox="0 0 24 24" fill="#8a95a0"><path d="M7 10l5 5 5-5z"/></svg>332 </div>333 <div class="price-row">334 <div class="price-now">₹180</div>335 <div class="price-old">₹225</div>336 </div>337 <div class="btn-row">338 <div class="btn-outline">Buy Once</div>339 <div class="btn-subscribe">Subscribe @ ₹180</div>340 </div>341 </div>342 </div>343 </div>344 345 </div>346 347 <!-- End area -->348 <div class="end-area">349 That's all folks!350 </div>351 352 <!-- Bottom navigation -->353 <div class="bottom-nav">354 <div class="tab">355 <svg viewBox="0 0 24 24" fill="none" stroke="#8a95a0" stroke-width="2"><path d="M3 10l9-7 9 7v10a2 2 0 0 1-2 2h-4V12H9v10H5a2 2 0 0 1-2-2z"/></svg>356 <div>Home</div>357 </div>358 <div class="tab">359 <svg viewBox="0 0 24 24" fill="none" stroke="#8a95a0" stroke-width="2"><rect x="5" y="3" width="14" height="18" rx="2"/><path d="M9 7h6M9 11h6M9 15h6"/></svg>360 <div>Orders</div>361 </div>362 <div class="tab" style="position: relative;">363 <svg viewBox="0 0 24 24" fill="none" stroke="#8a95a0" stroke-width="2"><path d="M3 7h18v10H3z"/><path d="M7 7v-2h10v2"/></svg>364 <div class="badge">₹0</div>365 <div>Wallet</div>366 </div>367 <div class="tab">368 <svg viewBox="0 0 24 24" fill="none" stroke="#8a95a0" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 17h0"/><path d="M9.5 8.5a3.5 3.5 0 0 1 6 2.1c0 2-2 2.6-2 3.4"/></svg>369 <div>Help</div>370 </div>371 </div>372 373 <!-- Gesture Bar -->374 <div class="gesture"></div>375 376</div>377</body>378</html>