GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Product Details - Oats</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #FAFAFA;15 border-radius: 0;16 box-shadow: 0 0 0 rgba(0,0,0,0);17 font-family: Arial, Helvetica, sans-serif;18 color: #212121;19 }20 21 /* Top status bar */22 .status-bar {23 height: 80px;24 background: #FFFFFF;25 display: flex;26 align-items: center;27 padding: 0 32px;28 font-size: 30px;29 color: #4a4a4a;30 }31 .status-icons {32 margin-left: auto;33 display: flex;34 align-items: center;35 gap: 22px;36 color: #757575;37 font-size: 26px;38 }39 .iconify { width: 38px; height: 38px; }40 41 /* App bar */42 .app-bar {43 height: 120px;44 background: #FFFFFF;45 display: flex;46 align-items: center;47 padding: 0 24px;48 box-shadow: 0 2px 6px rgba(0,0,0,0.08);49 }50 .app-bar .title {51 margin-left: 12px;52 font-size: 32px;53 color: #424242;54 }55 .app-actions {56 margin-left: auto;57 display: flex;58 align-items: center;59 gap: 24px;60 }61 .icon-btn {62 width: 72px;63 height: 72px;64 display: flex;65 align-items: center;66 justify-content: center;67 }68 69 /* Product summary */70 .summary-card {71 background: #FFFFFF;72 margin: 0;73 padding: 28px 32px 18px 32px;74 border-bottom: 1px solid #E0E0E0;75 }76 .product-title {77 font-size: 34px;78 line-height: 44px;79 color: #333333;80 margin-bottom: 14px;81 }82 .price-row {83 display: flex;84 align-items: baseline;85 gap: 16px;86 flex-wrap: wrap;87 }88 .price {89 font-size: 44px;90 font-weight: bold;91 color: #000000;92 }93 .per-kg {94 font-size: 28px;95 color: #9E9E9E;96 }97 .old-price {98 font-size: 30px;99 color: #9E9E9E;100 text-decoration: line-through;101 }102 .discount {103 font-size: 28px;104 color: #D32F2F;105 font-weight: bold;106 }107 108 /* Accordion sections */109 .section-list {110 background: #F5F5F5;111 padding-top: 12px;112 }113 .section-card {114 background: #FFFFFF;115 margin: 0 16px 12px 16px;116 border: 1px solid #E0E0E0;117 border-radius: 8px;118 }119 .section-header {120 display: flex;121 align-items: center;122 padding: 28px 24px;123 font-size: 34px;124 color: #616161;125 border-bottom: 1px solid #EEEEEE;126 }127 .section-header .spacer { margin-left: auto; }128 .section-content {129 padding: 18px 24px 24px 24px;130 font-size: 28px;131 line-height: 40px;132 color: #757575;133 }134 .view-more {135 color: #9E9E9E;136 font-size: 28px;137 margin-top: 6px;138 text-align: right;139 }140 141 .learn-more {142 margin: 12px 22px 24px 22px;143 background: #FFFFFF;144 border: 1px solid #E0E0E0;145 border-radius: 10px;146 padding: 28px 24px;147 color: #1E88E5;148 font-size: 30px;149 display: flex;150 align-items: center;151 justify-content: center;152 gap: 12px;153 }154 155 /* Purchase bar */156 .purchase-bar {157 display: flex;158 height: 130px;159 margin-top: 8px;160 }161 .buy-once {162 width: 50%;163 background: #37474F;164 color: #FFFFFF;165 display: flex;166 align-items: center;167 justify-content: center;168 font-size: 34px;169 font-weight: 600;170 }171 .subscribe {172 width: 50%;173 background: #D96C72;174 color: #FFFFFF;175 display: flex;176 align-items: center;177 justify-content: center;178 font-size: 34px;179 font-weight: 600;180 }181 182 /* Ratings & Reviews */183 .ratings-block {184 background: #FFFFFF;185 padding: 30px 28px;186 border-top: 1px solid #E0E0E0;187 }188 .ratings-title {189 font-size: 36px;190 color: #333333;191 margin-bottom: 28px;192 }193 .rating-summary {194 display: flex;195 align-items: center;196 gap: 18px;197 margin-bottom: 14px;198 }199 .rating-value {200 font-size: 64px;201 color: #4CAF50;202 font-weight: 700;203 }204 .rating-count {205 font-size: 28px;206 color: #777777;207 margin-top: 6px;208 }209 .divider {210 height: 1px;211 background: #EEEEEE;212 margin: 24px 0;213 }214 .review-card {215 padding: 10px 0 24px 0;216 }217 .badge {218 display: inline-flex;219 align-items: center;220 gap: 8px;221 background: #E8F5E9;222 color: #2E7D32;223 font-size: 26px;224 padding: 8px 12px;225 border-radius: 6px;226 margin-bottom: 18px;227 }228 .review-text {229 font-size: 30px;230 color: #444444;231 margin-bottom: 20px;232 }233 .review-meta {234 font-size: 26px;235 color: #9E9E9E;236 }237 .review-actions {238 margin-top: 20px;239 display: flex;240 align-items: center;241 gap: 16px;242 justify-content: flex-end;243 }244 .count {245 font-size: 26px;246 color: #616161;247 margin-right: 6px;248 }249 .circle-btn {250 width: 60px;251 height: 60px;252 border-radius: 50%;253 background: #EDEDED;254 display: flex;255 align-items: center;256 justify-content: center;257 }258 .circle-btn.green { background: #E8F5E9; }259 /* Bottom gesture bar */260 .gesture-bar {261 position: absolute;262 bottom: 24px;263 left: 50%;264 transform: translateX(-50%);265 width: 320px;266 height: 10px;267 background: #CFCFCF;268 border-radius: 5px;269 }270</style>271</head>272<body>273<div id="render-target">274 275 <!-- Status bar -->276 <div class="status-bar">277 <div>11:50</div>278 <div class="status-icons">279 <span>•</span>280 <span>ib</span>281 <span>⋯</span>282 <span style="font-size:28px;">🔇</span>283 <span style="font-size:28px;">📶</span>284 <span style="font-size:28px;">🔋</span>285 </div>286 </div>287 288 <!-- App bar -->289 <div class="app-bar">290 <div class="icon-btn" aria-label="Back">291 <svg class="iconify" viewBox="0 0 24 24">292 <path d="M15 18l-6-6 6-6" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>293 </svg>294 </div>295 <div class="title"></div>296 <div class="app-actions">297 <div class="icon-btn" aria-label="Search">298 <svg class="iconify" viewBox="0 0 24 24">299 <circle cx="11" cy="11" r="7" fill="none" stroke="#616161" stroke-width="2"/>300 <path d="M20 20l-4.5-4.5" stroke="#616161" stroke-width="2" stroke-linecap="round"/>301 </svg>302 </div>303 </div>304 </div>305 306 <!-- Summary -->307 <div class="summary-card">308 <div class="product-title">Oats - Tasty Evening Snack, Fibre Rich, Classic Masala, 1 kg - Pouch</div>309 <div class="price-row">310 <div class="price">₹368.18</div>311 <div class="per-kg">(₹368.18/kg)</div>312 <div class="old-price">₹449</div>313 <div class="discount">18% OFF</div>314 </div>315 </div>316 317 <!-- Details sections -->318 <div class="section-list">319 <div class="section-card">320 <div class="section-header">321 Ingredients322 <div class="spacer"></div>323 <svg width="36" height="36" viewBox="0 0 24 24">324 <path d="M12 5v14M5 12h14" stroke="#9E9E9E" stroke-width="2" stroke-linecap="round"/>325 </svg>326 </div>327 <div class="section-content">328 Oats (73.9%), Maltodextrin, Salt, Spices And Condiments (3.4%) (Onion, Turmeric, Pepper Cumin, Garlic, Fenugreek...)<span class="view-more">View More</span>329 </div>330 </div>331 332 <div class="section-card">333 <div class="section-header">334 How to Use335 <div class="spacer"></div>336 <svg width="36" height="36" viewBox="0 0 24 24">337 <path d="M12 5v14M5 12h14" stroke="#9E9E9E" stroke-width="2" stroke-linecap="round"/>338 </svg>339 </div>340 <div class="section-content">341 1) For every cup of Saffola Masala Oats, add 3 cups (240ml) of water to a pan. <span class="view-more">View More</span>342 </div>343 </div>344 345 <div class="section-card">346 <div class="section-header">347 Nutritional Facts348 <div class="spacer"></div>349 <svg width="36" height="36" viewBox="0 0 24 24">350 <path d="M12 5v14M5 12h14" stroke="#9E9E9E" stroke-width="2" stroke-linecap="round"/>351 </svg>352 </div>353 <div class="section-content">354 Per (100 g) Approximate value:355 <div class="view-more">View More</div>356 </div>357 </div>358 359 <div class="section-card">360 <div class="section-header">361 Other Product Info362 <div class="spacer"></div>363 <svg width="36" height="36" viewBox="0 0 24 24">364 <path d="M12 5v14M5 12h14" stroke="#9E9E9E" stroke-width="2" stroke-linecap="round"/>365 </svg>366 </div>367 <div class="section-content">368 EAN Code: 40220361<br/>369 Country Of Origin: India370 <div class="view-more">View More</div>371 </div>372 </div>373 374 <div class="learn-more">375 Know more about this product376 <svg width="24" height="24" viewBox="0 0 24 24">377 <path d="M6 9l6 6 6-6" fill="none" stroke="#1E88E5" stroke-width="2" stroke-linecap="round"/>378 </svg>379 </div>380 </div>381 382 <!-- Purchase bar -->383 <div class="purchase-bar">384 <div class="buy-once">BUY ONCE</div>385 <div class="subscribe">SUBSCRIBE @ ₹368.18</div>386 </div>387 388 <!-- Ratings & reviews -->389 <div class="ratings-block">390 <div class="ratings-title">Ratings & Reviews</div>391 <div class="rating-summary">392 <div class="rating-value">4.2</div>393 <svg width="40" height="40" viewBox="0 0 24 24">394 <path d="M12 17.3l-5.3 3 1.4-5.9-4.4-3.7 5.8-.5 2.5-5.4 2.5 5.4 5.8.5-4.4 3.7 1.4 5.9z" fill="#4CAF50"/>395 </svg>396 </div>397 <div class="rating-count">2392 ratings & 26 reviews</div>398 399 <div class="divider"></div>400 401 <div class="review-card">402 <div class="badge">403 <span>5</span>404 <svg width="24" height="24" viewBox="0 0 24 24">405 <path d="M12 17.3l-5.3 3 1.4-5.9-4.4-3.7 5.8-.5 2.5-5.4 2.5 5.4 5.8.5-4.4 3.7 1.4 5.9z" fill="#43A047"/>406 </svg>407 </div>408 <div class="review-text">tasty and easy to make</div>409 <div class="review-meta">Shweta (7 months ago)</div>410 <div class="review-actions">411 <span class="count">1</span>412 <div class="circle-btn green" title="Helpful">413 <svg width="28" height="28" viewBox="0 0 24 24">414 <path d="M9 21H5c-1 0-1-1-1-1l1-7c0-1 1-1 1-1h4v9zM14 9l1-5c0-1 1-1 1-1h2c1 0 1 1 1 1l-1 6 2 1v8c0 1-1 1-1 1H11l3-10z" fill="#2E7D32"/>415 </svg>416 </div>417 <div class="circle-btn" title="Report">418 <svg width="26" height="26" viewBox="0 0 24 24">419 <path d="M4 5h16l-6 5 6 5H4V5zM8 19v2" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>420 </svg>421 </div>422 </div>423 </div>424 </div>425 426 <div class="gesture-bar"></div>427</div>428</body>429</html>