GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Product Page - Potato Carisma</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px; height: 2400px;9 position: relative; overflow: hidden;10 background: #ffffff; border-radius: 24px;11 box-shadow: 0 8px 24px rgba(0,0,0,0.15);12 }13 /* Top App Bar */14 .app-bar {15 position: absolute; left: 0; top: 0; width: 100%; height: 200px;16 background: #6FA656; color: #fff;17 }18 .status-row {19 position: absolute; left: 30px; right: 30px; top: 20px; height: 40px;20 display: flex; align-items: center; justify-content: space-between; color: #fff; font-weight: 600;21 font-size: 28px;22 }23 .status-icons { display: flex; gap: 26px; align-items: center; }24 .icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }25 .toolbar {26 position: absolute; left: 20px; right: 20px; bottom: 20px; height: 60px; display: flex; align-items: center; justify-content: space-between;27 }28 .toolbar-left { display: flex; align-items: center; gap: 16px; }29 .toolbar-right { display: flex; align-items: center; gap: 36px; }30 .icon-btn { width: 52px; height: 52px; background: rgba(255,255,255,0.15); border-radius: 26px; display: flex; align-items: center; justify-content: center; }31 .cart-wrap { position: relative; }32 .badge {33 position: absolute; right: -6px; top: -6px; background: #E56A6A; color: #fff; font-size: 24px; font-weight: 700;34 width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.25);35 }36 37 /* Title and pricing */38 .title-wrap {39 position: absolute; left: 0; right: 0; top: 200px; padding: 28px 32px 20px 32px; background: #fff; border-bottom: 1px solid #e6e6e6;40 }41 .product-title { font-size: 48px; line-height: 1.2; color: #212121; font-weight: 700; }42 .price-row { margin-top: 12px; display: flex; align-items: center; gap: 18px; font-size: 30px; }43 .price { font-size: 42px; font-weight: 800; color: #222; }44 .muted { color: #777; }45 .mrp { color: #999; text-decoration: line-through; }46 .discount {47 background: #E86C6C; color: #fff; padding: 8px 14px; border-radius: 10px; font-size: 28px; font-weight: 700;48 }49 50 /* Image area */51 .main-image {52 position: absolute; left: 0; right: 0; top: 360px; height: 520px; background: #E0E0E0;53 border-top: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 36px;54 }55 .thumbs {56 position: absolute; left: 20px; right: 20px; top: 900px; display: flex; gap: 28px;57 }58 .thumb {59 width: 150px; height: 150px; background: #E0E0E0; border: 2px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px; border-radius: 12px;60 }61 .thumb.active { border-color: #78B760; box-shadow: 0 0 0 4px rgba(120,183,96,0.25); }62 63 /* Sections */64 .section-title {65 position: absolute; left: 0; right: 0; top: 1070px; padding: 26px 32px; font-size: 40px; font-weight: 800; color: #222;66 }67 .accordion {68 position: absolute; left: 0; right: 0; top: 1140px;69 border-top: 1px solid #eee;70 }71 .acc-item {72 padding: 26px 32px; border-bottom: 1px solid #eee; background: #fff;73 }74 .acc-head { display: flex; align-items: center; justify-content: space-between; font-size: 34px; font-weight: 700; color: #222; }75 .acc-content { margin-top: 16px; color: #555; font-size: 30px; line-height: 1.5; }76 .bullet { margin-left: 20px; }77 .policy {78 position: absolute; left: 0; right: 0; top: 1610px; padding: 24px 32px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; background: #fafafa;79 }80 .policy-row { display: flex; gap: 22px; align-items: flex-start; color: #444; font-size: 30px; line-height: 1.5; }81 .scale-icon { width: 44px; height: 44px; }82 /* Save for later & Quantity */83 .action-row {84 position: absolute; left: 0; right: 0; top: 1720px; padding: 24px 32px; display: flex; align-items: center; justify-content: space-between;85 }86 .save-left { display: flex; align-items: center; gap: 18px; color: #333; font-size: 34px; font-weight: 700; }87 .bookmark { width: 40px; height: 40px; border: 2px solid #bbb; border-radius: 8px; display: flex; align-items: center; justify-content: center; }88 .qty {89 display: flex; align-items: center; overflow: hidden; border-radius: 16px; border: 1px solid #e3a5a5;90 }91 .qty button {92 width: 180px; height: 120px; border: none; background: #E06B6B; color: #fff; font-size: 56px; font-weight: 800;93 }94 .qty .count {95 width: 180px; height: 120px; background: #C95555; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 56px; font-weight: 800;96 }97 /* Recommendations */98 .more-header {99 position: absolute; left: 0; right: 0; top: 1870px; padding: 18px 32px; font-size: 42px; font-weight: 800; color: #222;100 }101 .view-all {102 position: absolute; left: 32px; top: 1930px; padding: 16px 22px; border: 1px solid #cfcfcf; border-radius: 12px; font-size: 30px; color: #666; background: #fff;103 }104 .rec-list {105 position: absolute; left: 32px; right: 32px; top: 2000px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;106 }107 .rec-card { border: 1px solid #e0e0e0; border-radius: 16px; background: #fff; overflow: hidden; }108 .rec-img { height: 140px; background: #E0E0E0; border-bottom: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; }109 .rec-body { padding: 14px; font-size: 26px; color: #333; }110 /* Simple chevron */111 .chev {112 width: 36px; height: 36px; transform: rotate(45deg);113 border-right: 6px solid #888; border-bottom: 6px solid #888;114 }115 /* Back arrow icon */116 .back-arrow {117 width: 52px; height: 52px;118 }119 .simple-icon path { fill: #fff; }120</style>121</head>122<body>123<div id="render-target">124 125 <!-- Green App Bar -->126 <div class="app-bar">127 <div class="status-row">128 <div>10:22</div>129 <div class="status-icons">130 <div class="icon">131 <!-- search-like small dot -->132 <svg width="28" height="28"><circle cx="14" cy="14" r="12" fill="none" stroke="#fff" stroke-width="3"/></svg>133 </div>134 <div class="icon">135 <svg width="28" height="28"><rect x="4" y="6" width="20" height="16" fill="none" stroke="#fff" stroke-width="3"/></svg>136 </div>137 <div class="icon">138 <svg width="30" height="30"><path d="M4 15 L14 5 L26 15 L26 26 L4 26 Z" fill="none" stroke="#fff" stroke-width="3"/></svg>139 </div>140 <div class="icon">141 <svg width="24" height="24"><circle cx="12" cy="12" r="10" fill="#fff"/></svg>142 </div>143 <div class="icon">144 <svg width="24" height="24"><rect x="5" y="3" width="14" height="18" rx="3" fill="none" stroke="#fff" stroke-width="3"/></svg>145 </div>146 </div>147 </div>148 149 <div class="toolbar">150 <div class="toolbar-left">151 <div class="icon-btn">152 <svg class="back-arrow" viewBox="0 0 24 24">153 <path d="M15 6 L9 12 L15 18" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>154 </svg>155 </div>156 </div>157 <div class="toolbar-right">158 <div class="icon-btn">159 <svg class="simple-icon" viewBox="0 0 24 24">160 <circle cx="11" cy="11" r="6" fill="none" stroke="#fff" stroke-width="3"/>161 <line x1="16" y1="16" x2="22" y2="22" stroke="#fff" stroke-width="3"/>162 </svg>163 </div>164 <div class="icon-btn">165 <svg class="simple-icon" viewBox="0 0 24 24">166 <circle cx="6" cy="12" r="3" fill="none" stroke="#fff" stroke-width="3"/>167 <circle cx="18" cy="6" r="3" fill="none" stroke="#fff" stroke-width="3"/>168 <line x1="9" y1="11" x2="15" y2="7" stroke="#fff" stroke-width="3"/>169 <circle cx="18" cy="18" r="3" fill="none" stroke="#fff" stroke-width="3"/>170 <line x1="9" y1="13" x2="15" y2="17" stroke="#fff" stroke-width="3"/>171 </svg>172 </div>173 <div class="icon-btn cart-wrap">174 <svg class="simple-icon" viewBox="0 0 24 24">175 <path d="M3 5 H6 L7 18 H19 L21 8 H8" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>176 <circle cx="9" cy="21" r="2" fill="#fff"/>177 <circle cx="18" cy="21" r="2" fill="#fff"/>178 </svg>179 <div class="badge">1</div>180 </div>181 </div>182 </div>183 </div>184 185 <!-- Title & Price -->186 <div class="title-wrap">187 <div class="product-title">Potato Carisma - Lower Glycemic Index, 1 Kg</div>188 <div class="price-row">189 <div class="price">₹60.59</div>190 <div class="muted">(₹60.59/kg)</div>191 <div class="muted">MRP: <span class="mrp">₹73</span></div>192 <div class="discount">17% OFF</div>193 </div>194 </div>195 196 <!-- Main Image -->197 <div class="main-image">[IMG: Potatoes - Product Hero]</div>198 199 <!-- Thumbnails -->200 <div class="thumbs">201 <div class="thumb active">[IMG: Potatoes]</div>202 <div class="thumb">[IMG: Potato close-up]</div>203 <div class="thumb">[IMG: Brand bag]</div>204 <div class="thumb">[IMG: Pack & Bag]</div>205 </div>206 207 <!-- Sections -->208 <div class="section-title">About this product</div>209 210 <div class="accordion">211 <div class="acc-item">212 <div class="acc-head">213 <span>About the Product</span>214 <div class="chev"></div>215 </div>216 <div class="acc-content">217 • It is Non-GMO Potato - Farmed from traditional seed originated in the Netherlands that are not genetically engineered.218 </div>219 </div>220 <div class="acc-item">221 <div class="acc-head">222 <span>Benefits</span>223 <div class="chev"></div>224 </div>225 <div class="acc-content">226 • CARISMA Potatoes are also rich in Vitamin C and Potassium contents.227 </div>228 </div>229 <div class="acc-item">230 <div class="acc-head">231 <span>Other Product Info</span>232 <div class="chev"></div>233 </div>234 <div class="acc-content">235 EAN Code: 40231072 FSSAI No: 10015042002228<br/>236 Manufactured & Marketed by: Supermarket Grocery Supplies Pvt. Ltd237 </div>238 </div>239 </div>240 241 <div class="policy">242 <div class="policy-row">243 <svg class="scale-icon" viewBox="0 0 24 24">244 <path d="M12 3 L12 14" stroke="#555" stroke-width="2" fill="none"/>245 <path d="M6 14 C6 10 10 10 10 14 Z" fill="none" stroke="#555" stroke-width="2"/>246 <path d="M14 14 C14 10 18 10 18 14 Z" fill="none" stroke="#555" stroke-width="2"/>247 <rect x="8" y="18" width="8" height="3" fill="#555"/>248 </svg>249 <div>250 Please note that the item(s) in this product may vary slightly in size and weight. Hence, the actual weight of the product delivered can vary.251 </div>252 </div>253 </div>254 255 <div class="action-row">256 <div class="save-left">257 <div class="bookmark">258 <svg width="26" height="26" viewBox="0 0 24 24">259 <path d="M6 4 H18 V22 L12 18 L6 22 Z" fill="none" stroke="#888" stroke-width="2"/>260 </svg>261 </div>262 <span>Save for later</span>263 </div>264 <div class="qty">265 <button>-</button>266 <div class="count">1</div>267 <button>+</button>268 </div>269 </div>270 271 <div class="more-header">You may like to view more in</div>272 <div class="view-all">View All</div>273 274 <div class="rec-list">275 <div class="rec-card">276 <div class="rec-img">[IMG: Fresh Potato]</div>277 <div class="rec-body">Potato - 1 Kg</div>278 </div>279 <div class="rec-card">280 <div class="rec-img">[IMG: Organic Potato]</div>281 <div class="rec-body">Organic Potatoes - 1 Kg</div>282 </div>283 <div class="rec-card">284 <div class="rec-img">[IMG: Sweet Potato]</div>285 <div class="rec-body">Sweet Potato - 500 g</div>286 </div>287 </div>288 289</div>290</body>291</html>