GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Product Details - Mobile UI</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 position: relative;9 overflow: hidden;10 width: 1080px;11 height: 2400px;12 background: #f7f7f9;13 color: #222;14 }15 16 /* Top status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 88px;23 padding: 0 40px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 font-size: 36px;28 color: #111;29 }30 .status-left { display:flex; align-items:center; gap:20px; }31 .status-right { display:flex; align-items:center; gap:22px; }32 .icon {33 width: 36px; height: 36px;34 }35 36 /* Search bar */37 .search-row {38 position: absolute;39 top: 100px;40 left: 24px;41 width: 1032px;42 height: 100px;43 display: flex;44 align-items: center;45 gap: 22px;46 }47 .back-btn {48 width: 70px; height: 70px; border-radius: 35px;49 background: #eeeeef;50 display:flex; align-items:center; justify-content:center;51 }52 .search-input {53 flex: 1;54 height: 100px;55 background: #ffffff;56 border-radius: 16px;57 box-shadow: 0 1px 0 rgba(0,0,0,0.06);58 border: 1px solid #e3e3e6;59 display:flex; align-items:center; padding: 0 26px;60 gap: 20px;61 }62 .search-input .text {63 flex:1; font-size:38px; color:#222;64 }65 .search-actions { display:flex; align-items:center; gap:24px; }66 67 .results-line {68 position: absolute;69 top: 210px;70 left: 24px;71 width: 1032px;72 font-size: 34px;73 color:#4b4b4d;74 }75 76 /* Close overlay button */77 .close-circle {78 position: absolute;79 top: 190px;80 left: 480px;81 width: 120px;82 height: 120px;83 border-radius: 60px;84 background: #1f1f22;85 display:flex; align-items:center; justify-content:center;86 box-shadow: 0 6px 14px rgba(0,0,0,0.25);87 }88 .close-circle svg { width: 62px; height: 62px; stroke: #fff; stroke-width: 8; }89 90 /* Bottom sheet (product details) */91 .sheet {92 position: absolute;93 top: 270px;94 left: 0;95 width: 1080px;96 height: 1790px;97 background: #ffffff;98 border-top-left-radius: 32px;99 border-top-right-radius: 32px;100 box-shadow: 0 -10px 20px rgba(0,0,0,0.08);101 padding: 40px 40px 220px;102 overflow: hidden;103 }104 .sheet h1 {105 margin: 0 0 18px;106 font-size: 50px;107 font-weight: 800;108 color: #111;109 }110 .section-title {111 font-size: 40px; font-weight: 700; margin:40px 0 10px; color:#111;112 }113 .para {114 font-size: 36px; line-height: 1.52; color:#333;115 }116 .bullet-list {117 margin: 10px 0 0 0;118 padding-left: 26px;119 font-size: 36px;120 line-height: 1.6;121 }122 .unit-row, .shelf-row, .manufacturer, .license, .disclaimer, .origin, .care, .return {123 font-size: 36px; line-height: 1.6; color:#333; margin-top: 28px;124 }125 126 /* Bottom sticky bar */127 .bottom-bar {128 position: absolute;129 left: 0;130 bottom: 0;131 width: 1080px;132 height: 190px;133 background: #ffffff;134 border-top: 1px solid #e6e6ea;135 display:flex; align-items:center; justify-content:space-between;136 padding: 0 40px;137 }138 .price-info {139 display:flex; flex-direction:column; gap:10px;140 font-size: 40px; color:#111;141 }142 .add-btn {143 width: 420px; height: 120px; border-radius: 28px;144 background: #3aa64b;145 display:flex; align-items:center; justify-content:center;146 color:#fff; font-size: 44px; font-weight: 700;147 box-shadow: 0 6px 12px rgba(58,166,75,0.35);148 }149 150 /* Simple separators */151 .divider { height: 1px; background:#eee; margin: 24px 0; }152</style>153</head>154<body>155<div id="render-target">156 157 <!-- Status Bar -->158 <div class="status-bar">159 <div class="status-left">160 <div>11:25</div>161 <!-- small app icons placeholders -->162 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#999"/></svg>163 <svg class="icon" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" fill="#888"/></svg>164 <svg class="icon" viewBox="0 0 24 24"><path d="M4 20 L20 4" stroke="#777" stroke-width="3"/></svg>165 </div>166 <div class="status-right">167 <svg class="icon" viewBox="0 0 24 24"><path d="M2 8h20" stroke="#333" stroke-width="3"/><path d="M4 14h16" stroke="#333" stroke-width="3"/></svg>168 <svg class="icon" viewBox="0 0 24 24"><path d="M2 14h14" stroke="#333" stroke-width="3"/><rect x="16" y="10" width="6" height="8" fill="#333"/></svg>169 <svg class="icon" viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="14" rx="2" ry="2" fill="#333"/></svg>170 </div>171 </div>172 173 <!-- Search Row -->174 <div class="search-row">175 <div class="back-btn">176 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M15 5 L8 12 L15 19" fill="none" stroke="#333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>177 </div>178 <div class="search-input">179 <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="10" cy="10" r="7" stroke="#777" stroke-width="2" fill="none"/><path d="M15 15 L22 22" stroke="#777" stroke-width="2"/></svg>180 <div class="text">Saffola Classic Masala oats</div>181 <div class="search-actions">182 <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#efefef" stroke="#ccc"/><path d="M8 8 L16 16 M16 8 L8 16" stroke="#555" stroke-width="2"/></svg>183 <svg width="40" height="40" viewBox="0 0 24 24"><rect x="10" y="4" width="4" height="10" fill="#555"/><path d="M8 16 L16 16" stroke="#555" stroke-width="2"/></svg>184 </div>185 </div>186 </div>187 188 <div class="results-line">Showing results for "saffola classic masala oats"</div>189 190 <!-- Close Circle -->191 <div class="close-circle">192 <svg viewBox="0 0 24 24"><path d="M6 6 L18 18 M18 6 L6 18" fill="none"/></svg>193 </div>194 195 <!-- Bottom Sheet -->196 <div class="sheet">197 <h1>Product Details</h1>198 199 <div class="section-title">Description</div>200 <div class="para">201 Saffola Masala Oats is made with wholegrain oats, real vegetables & a tasty mix of authentic desi spices which provides a range of delightful flavours making for a perfect evening snack. It is ready to eat in just 3 minutes - super convenient to make, super tasty to eat, and super hard to resist! You can enjoy this delicious bowl as it is or with crunchy topping like namkeen or crushed papad.202 </div>203 204 <div class="section-title">Key Features</div>205 <ul class="bullet-list">206 <li>Tasty blend of authentic Indian spices.</li>207 <li>Crunchy mix of carrots, onions and french beans.</li>208 <li>High in fibre & Protein.</li>209 <li>Controls your hunger pangs and manage weight.</li>210 <li>Upto 70% Less Fat.</li>211 <li>No Added Preservatives.</li>212 </ul>213 214 <div class="section-title">Unit</div>215 <div class="unit-row">38 g</div>216 217 <div class="section-title">Shelf Life</div>218 <div class="shelf-row">9 months</div>219 220 <div class="section-title">Manufacturer Details</div>221 <div class="manufacturer">222 Ameya Foods, S.F. No - 315, Angels Garden, Nagamanaicken Palayam, Pattanam (PO), Ondipudur (Via), Coimbatore - 641016223 </div>224 225 <div class="section-title">FSSAI License</div>226 <div class="license">100120022000258</div>227 228 <div class="section-title">Disclaimer</div>229 <div class="disclaimer">230 Every effort is made to maintain the accuracy of all information. However, actual product packaging and materials may contain more and/or different information. It is recommended not to solely rely on the information presented.231 </div>232 233 <div class="section-title">Country of Origin</div>234 <div class="origin">India</div>235 236 <div class="section-title">Customer Care Details</div>237 <div class="care">Email: info@blinkit.com</div>238 239 <div class="section-title">Return Policy</div>240 <div class="return">241 This Item is non-returnable. For a damaged, defective, incorrect or expired item, you can request a replacement within 72 hours of delivery.242 </div>243 244 <div class="divider"></div>245 </div>246 247 <!-- Bottom Bar -->248 <div class="bottom-bar">249 <div class="price-info">250 <div>38 g</div>251 <div>MRP ₹17</div>252 </div>253 <div class="add-btn">Add to cart</div>254 </div>255 256</div>257</body>258</html>