GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Saffola Classic Masala Oats - UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #f5f5f7;12 }13 14 /* Top status bar */15 .status-bar {16 height: 80px; padding: 0 32px;17 display: flex; align-items: center; justify-content: space-between;18 color: #111; font-size: 32px;19 }20 .status-icons { display: flex; gap: 24px; align-items: center; color: #444; }21 .dot { width: 10px; height: 10px; background:#444; border-radius:50%; display:inline-block; }22 23 /* Search row */24 .search-row {25 height: 100px; display: flex; align-items: center; gap: 20px;26 padding: 0 24px;27 }28 .icon-btn {29 width: 72px; height: 72px; border-radius: 36px;30 display: flex; align-items: center; justify-content: center;31 background: #ffffff; border: 1px solid #e0e0e0;32 }33 .search-box {34 flex: 1; height: 80px; border-radius: 40px;35 background: #ffffff; border: 1px solid #e0e0e0;36 display: flex; align-items: center; padding: 0 24px; gap: 18px;37 }38 .search-input-text {39 flex: 1; color: #222; font-size: 34px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;40 }41 .search-actions { display: flex; gap: 16px; align-items: center; }42 .icon-24 { width: 48px; height: 48px; }43 44 /* Overlay sheet */45 .sheet {46 position: absolute; left: 0; right: 0; top: 190px;47 background: #ffffff;48 border-top-left-radius: 36px; border-top-right-radius: 36px;49 min-height: 1750px;50 box-shadow: 0 2px 8px rgba(0,0,0,0.08);51 }52 .close-x {53 position: absolute; top: -40px; left: 50%; transform: translateX(-50%);54 width: 96px; height: 96px; border-radius: 48px;55 background: #222; color: #fff; font-size: 56px; line-height: 96px; text-align: center;56 box-shadow: 0 8px 24px rgba(0,0,0,0.25);57 }58 59 /* Product image area */60 .hero {61 margin: 40px auto 16px auto;62 width: 940px; height: 830px;63 border: 1px solid #BDBDBD; background: #E0E0E0;64 display: flex; align-items: center; justify-content: center;65 color: #555; font-size: 38px; text-align: center; border-radius: 8px;66 }67 .carousel-dots {68 display: flex; justify-content: center; gap: 18px; margin: 14px 0 6px 0;69 }70 .carousel-dots span {71 width: 18px; height: 18px; border-radius: 9px; background: #cfd8dc;72 }73 .carousel-dots span.active { background: #424242; }74 75 /* Title & actions */76 .title-row {77 display: flex; align-items: flex-start; justify-content: space-between;78 padding: 16px 40px 0 40px;79 }80 .title-text { font-size: 58px; font-weight: 700; color: #222; line-height: 1.2; }81 .share-btn {82 width: 88px; height: 88px; border-radius: 44px;83 border: 1px solid #e0e0e0; display: flex; align-items: center; justify-content: center; background: #fff;84 }85 .meta-row { display: flex; align-items: center; gap: 16px; padding: 8px 40px 0 40px; color: #444; font-size: 32px; }86 .pill {87 display: inline-flex; align-items: center; gap: 12px; color: #333; font-size: 30px;88 }89 .clock {90 width: 40px; height: 40px;91 border-radius: 20px; background: #e8f5e9; border: 1px solid #c8e6c9; display: flex; align-items: center; justify-content: center;92 }93 94 /* Brand row */95 .brand-row {96 margin: 24px 40px 0 40px; padding: 24px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee;97 display: flex; align-items: center; justify-content: space-between;98 }99 .brand-left { display: flex; align-items: center; gap: 22px; }100 .avatar {101 width: 72px; height: 72px; border-radius: 36px; background: #E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#666; font-size:24px;102 }103 .brand-text { display: flex; flex-direction: column; }104 .brand-name { font-size: 40px; font-weight: 700; color: #222; }105 .brand-link { font-size: 34px; color: #2e7d32; }106 .arrow-right { width: 56px; height: 56px; }107 108 /* Select Unit section */109 .section-title { padding: 28px 40px 16px 40px; font-size: 48px; font-weight: 800; color: #222; }110 .chips { display: flex; gap: 24px; padding: 0 40px 12px 40px; flex-wrap: nowrap; overflow-x: auto; }111 .chip {112 min-width: 240px; height: 140px; border-radius: 28px; border: 2px solid #dfe3e6;113 background: #fafafa; display: flex; flex-direction: column; align-items: center; justify-content: center;114 color: #333; font-size: 38px; gap: 6px;115 }116 .chip.selected { border-color: #59c174; background: #e8f5e9; }117 .price { font-size: 40px; font-weight: 700; }118 .strike { color: #999; text-decoration: line-through; font-size: 32px; }119 .chip.disabled { opacity: 0.5; }120 .badge {121 position: absolute; top: -20px; left: 24px; background: #3498db; color:#fff; padding: 8px 16px; border-radius: 16px; font-size: 28px; font-weight: 700;122 }123 .chip-wrap { position: relative; }124 125 /* Similar products */126 .similar-title { padding: 28px 40px 16px 40px; font-size: 48px; font-weight: 800; color: #222; }127 .cards { display: flex; gap: 28px; padding: 0 40px 220px 40px; }128 .card {129 width: 310px; border: 1px solid #e0e0e0; border-radius: 20px; background: #fff; overflow: hidden;130 position: relative;131 }132 .thumb {133 width: 100%; height: 220px; background: #E0E0E0; border-bottom: 1px solid #BDBDBD;134 display: flex; align-items: center; justify-content: center; color: #666; font-size: 24px;135 }136 .card-body { padding: 18px; font-size: 30px; color: #333; }137 .corner-badge {138 position: absolute; top: 12px; left: 12px; background: #2e7d32; color:#fff; padding: 8px 14px; font-size: 26px; border-radius: 12px; font-weight: 800;139 }140 .corner-badge.orange { background: #ff9800; }141 .corner-badge.blue { background: #2196f3; }142 143 /* Sticky bottom bar */144 .bottom-bar {145 position: absolute; left: 0; bottom: 0; width: 100%; height: 160px;146 background: #ffffff; border-top: 1px solid #e0e0e0;147 display: flex; align-items: center; justify-content: space-between; padding: 0 40px;148 }149 .bottom-left { font-size: 38px; color: #222; }150 .btn-primary {151 height: 112px; padding: 0 54px; border-radius: 56px; background: #2e7d32; color: #fff; font-size: 44px; font-weight: 800; border: none;152 display: inline-flex; align-items: center; justify-content: center;153 box-shadow: 0 8px 16px rgba(46,125,50,0.25);154 }155 156 /* Simple SVG icons styling */157 svg { display: block; }158</style>159</head>160<body>161<div id="render-target">162 163 <!-- Status bar -->164 <div class="status-bar">165 <div>11:24</div>166 <div class="status-icons">167 <span class="dot"></span>168 <span class="dot"></span>169 <span class="dot"></span>170 <svg width="34" height="34" viewBox="0 0 24 24"><path fill="#444" d="M12 4a8 8 0 100 16 8 8 0 000-16zm1 8V7h-2v6h5v-2h-3z"/></svg>171 </div>172 </div>173 174 <!-- Search row -->175 <div class="search-row">176 <div class="icon-btn">177 <svg class="icon-24" viewBox="0 0 24 24"><path fill="#333" d="M15.5 19l-7-7 7-7 1.5 1.5L11 12l6 6z"/></svg>178 </div>179 <div class="search-box">180 <div class="search-input-text">Saffola Classic Masala oats</div>181 <div class="search-actions">182 <svg class="icon-24" viewBox="0 0 24 24"><path fill="#333" d="M12 3a6 6 0 00-6 6c0 4.5 6 9 6 9s6-4.5 6-9a6 6 0 00-6-6zm0 8a2 2 0 110-4 2 2 0 010 4z"/></svg>183 <svg class="icon-24" viewBox="0 0 24 24"><path fill="#777" d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z"/></svg>184 <svg class="icon-24" viewBox="0 0 24 24"><path fill="#333" d="M19 11h-1.5a6.5 6.5 0 10-13 0H3v2h1.5a6.5 6.5 0 0013 0H19v-2zm-7 5a5 5 0 110-10 5 5 0 010 10z"/></svg>185 </div>186 </div>187 </div>188 189 <!-- Overlay sheet content -->190 <div class="sheet">191 <div class="close-x">×</div>192 193 <!-- Product hero -->194 <div class="hero">[IMG: Saffola Classic Masala Oats pack]</div>195 196 <!-- Carousel dots -->197 <div class="carousel-dots">198 <span class="active"></span><span></span><span></span><span></span><span></span>199 </div>200 201 <!-- Title and share -->202 <div class="title-row">203 <div class="title-text">Saffola Classic Masala Oats</div>204 <div class="share-btn">205 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#333" d="M14 3h7v7h-2V6.41l-7.29 7.3-1.42-1.42L17.59 5H14V3z"/><path fill="#333" d="M19 19H5V5h7V3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7h-2v7z"/></svg>206 </div>207 </div>208 209 <!-- Meta -->210 <div class="meta-row">211 <div class="pill">212 <div class="clock">213 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#2e7d32" d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 11h5v-2h-4V6h-2v7z"/></svg>214 </div>215 <span>9 MINS</span>216 </div>217 </div>218 219 <!-- Brand row -->220 <div class="brand-row">221 <div class="brand-left">222 <div class="avatar">Logo</div>223 <div class="brand-text">224 <div class="brand-name">Saffola</div>225 <div class="brand-link">Explore all products</div>226 </div>227 </div>228 <svg class="arrow-right" viewBox="0 0 24 24"><path fill="#333" d="M8 5l7 7-7 7-1.5-1.5L12 12 6.5 6.5z"/></svg>229 </div>230 231 <!-- Select Unit -->232 <div class="section-title">Select Unit</div>233 <div class="chips">234 <div class="chip selected">235 <div>38 g</div>236 <div class="price">₹17</div>237 </div>238 239 <div class="chip-wrap">240 <div class="badge">11% OFF</div>241 <div class="chip">242 <div>500 g</div>243 <div class="price">₹190 <span class="strike">₹215</span></div>244 </div>245 </div>246 247 <div class="chip disabled">248 <div>2 x 500 g</div>249 <div>Out of stock</div>250 </div>251 252 <div class="chip disabled">253 <div>4 x 38 g</div>254 <div>Out of stock</div>255 </div>256 </div>257 258 <!-- Similar Products -->259 <div class="similar-title">Similar Products</div>260 <div class="cards">261 <div class="card">262 <div class="corner-badge blue">12% OFF</div>263 <div class="thumb">[IMG: Oats Variant Green]</div>264 <div class="card-body">Saffola Veggie Twist Oats • 38 g</div>265 </div>266 <div class="card">267 <div class="corner-badge">20% OFF</div>268 <div class="thumb">[IMG: Oats Variant Red]</div>269 <div class="card-body">Saffola Masala Oats • 500 g</div>270 </div>271 <div class="card">272 <div class="corner-badge orange">10% OFF</div>273 <div class="thumb">[IMG: Oats Variant Yellow]</div>274 <div class="card-body">Saffola Curry Oats • 38 g</div>275 </div>276 </div>277 </div>278 279 <!-- Bottom bar -->280 <div class="bottom-bar">281 <div class="bottom-left">282 <div>38 g</div>283 <div>MRP ₹17</div>284 </div>285 <button class="btn-primary">Add to cart</button>286 </div>287 288</div>289</body>290</html>