GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Product Detail - Saffola Oats</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#FAFAFA; border-radius:24px;12 box-shadow: 0 2px 12px rgba(0,0,0,0.08);13 }14 .status-bar {15 height:90px; padding:0 36px; display:flex; align-items:center; color:#616161; font-size:34px;16 }17 .status-icons { margin-left:auto; display:flex; align-items:center; gap:26px; }18 .dot { width:10px; height:10px; background:#9E9E9E; border-radius:50%; display:inline-block; }19 .app-bar {20 height:120px; display:flex; align-items:center;21 padding:0 24px; background:#FFFFFF; border-bottom:1px solid #E0E0E0;22 }23 .app-bar .title { flex:1; text-align:center; font-size:36px; color:#424242; font-weight:600; opacity:0; }24 .icon-btn { width:96px; height:96px; display:flex; align-items:center; justify-content:center; }25 .icon { width:44px; height:44px; fill:#616161; }26 .content { padding:24px; }27 .card {28 background:#FFFFFF; border:1px solid #E0E0E0; border-radius:16px;29 box-shadow:0 2px 6px rgba(0,0,0,0.04);30 }31 .product-info { padding:28px; }32 .brand-link { color:#1E88E5; font-size:32px; margin-bottom:8px; }33 .product-title { color:#424242; font-size:40px; line-height:1.25; margin:6px 0 18px; }34 .price-row { display:flex; align-items:baseline; gap:18px; }35 .price { color:#000; font-size:48px; font-weight:700; }36 .perkg { color:#757575; font-size:30px; }37 .strike { color:#9E9E9E; font-size:32px; text-decoration:line-through; }38 .discount { color:#D32F2F; font-size:32px; font-weight:700; }39 .tax { color:#757575; font-size:28px; margin:10px 0 18px; }40 .rating-row { display:flex; align-items:center; gap:14px; }41 .rating-badge {42 padding:10px 16px; border-radius:8px; background:#E8F5E9; color:#2E7D32; font-size:30px; display:flex; align-items:center; gap:10px; border:1px solid #C8E6C9;43 }44 .rating-text { color:#616161; font-size:30px; }45 .star { width:28px; height:28px; fill:#2E7D32; }46 .image-section { margin-top:26px; padding:24px; }47 .main-image {48 height:680px; border:1px solid #BDBDBD; background:#E0E0E0;49 border-radius:12px; display:flex; align-items:center; justify-content:center; color:#757575; font-size:34px;50 }51 .right-banner {52 position:absolute; right:48px; top:780px; width:180px; height:540px;53 background:#E0E0E0; border:1px solid #BDBDBD; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#757575; writing-mode:vertical-rl; text-orientation:mixed; font-weight:700;54 }55 .veg-symbol {56 margin-top:18px; width:68px; height:68px; border:4px solid #4CAF50; border-radius:8px; display:flex; align-items:center; justify-content:center;57 }58 .veg-symbol .circle { width:28px; height:28px; background:#4CAF50; border-radius:50%; }59 .thumbs { margin-top:28px; display:flex; gap:20px; padding:0 12px; }60 .thumb {61 width:150px; height:150px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:12px;62 display:flex; align-items:center; justify-content:center; color:#757575; font-size:22px;63 }64 .thumb.selected { border:3px solid #66BB6A; }65 .pack-sizes { margin-top:34px; padding:28px; }66 .section-title { font-size:40px; color:#424242; font-weight:700; margin-bottom:20px; }67 .pack-option {68 border:1px solid #E0E0E0; border-radius:16px; padding:24px; margin-bottom:20px; background:#FFFFFF; display:flex; align-items:flex-start; justify-content:space-between;69 }70 .pack-option.selected { border-color:#66BB6A; box-shadow:0 0 0 3px rgba(102,187,106,0.25) inset; }71 .pack-left .size { font-size:36px; color:#212121; font-weight:700; }72 .pack-left .type { font-size:28px; color:#757575; }73 .pack-right { text-align:right; }74 .pack-right .p-now { font-size:36px; color:#000; font-weight:700; }75 .pack-right .p-strike { font-size:30px; color:#9E9E9E; text-decoration:line-through; margin-left:10px; }76 .pack-right .off { font-size:28px; color:#D32F2F; font-weight:700; margin-top:6px; }77 .check-icon { width:48px; height:48px; margin-left:18px; }78 .bottom-bar {79 position:absolute; left:0; bottom:80px; width:100%; height:170px; display:flex;80 box-shadow:0 -2px 8px rgba(0,0,0,0.08);81 }82 .cta {83 flex:1; display:flex; align-items:center; justify-content:center; font-size:38px; font-weight:700; color:#FFFFFF;84 }85 .cta.once { background:#37474F; }86 .cta.subscribe { background:#D85B5B; }87 .home-indicator {88 position:absolute; left:50%; transform:translateX(-50%);89 bottom:20px; width:200px; height:14px; background:#D0D0D0; border-radius:7px;90 }91</style>92</head>93<body>94<div id="render-target">95 <!-- Status bar -->96 <div class="status-bar">97 <div>11:47</div>98 <div class="status-icons">99 <span class="dot"></span>100 <span class="dot"></span>101 <span class="dot"></span>102 <span class="dot"></span>103 <span class="dot"></span>104 </div>105 </div>106 107 <!-- App bar -->108 <div class="app-bar">109 <div class="icon-btn">110 <svg class="icon" viewBox="0 0 24 24">111 <path d="M15.5 5l-7 7 7 7" stroke="#616161" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>112 </svg>113 </div>114 <div class="title"></div>115 <div class="icon-btn">116 <svg class="icon" viewBox="0 0 24 24">117 <circle cx="10" cy="10" r="7" stroke="#616161" stroke-width="2" fill="none"/>118 <path d="M16 16l6 6" stroke="#616161" stroke-width="2" fill="none" stroke-linecap="round"/>119 </svg>120 </div>121 </div>122 123 <!-- Main content -->124 <div class="content">125 <div class="card product-info">126 <div class="brand-link">Saffola</div>127 <div class="product-title">Oats - Tasty Evening Snack, Fibre Rich, Classic Masala, 1 kg - Pouch</div>128 <div class="price-row">129 <div class="price">₹368.18</div>130 <div class="perkg">(₹368.18/kg)</div>131 <div class="strike">₹449</div>132 <div class="discount">18% OFF</div>133 </div>134 <div class="tax">Inclusive of all taxes</div>135 <div class="rating-row">136 <div class="rating-badge">137 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7 7 .6-5 4.3 1.6 7.1L12 17l-6.6 4 1.6-7.1-5-4.3L9 9l3-7z"/></svg>138 <span>4.2</span>139 </div>140 <div class="rating-text">2392 Ratings & 26 reviews</div>141 </div>142 </div>143 144 <div class="image-section card" style="position:relative;">145 <div class="main-image">[IMG: Saffola Oats Pack]</div>146 <div class="veg-symbol"><div class="circle"></div></div>147 <div class="thumbs">148 <div class="thumb selected">[IMG 1]</div>149 <div class="thumb">[IMG 2]</div>150 <div class="thumb">[IMG 3]</div>151 <div class="thumb">[IMG 4]</div>152 <div class="thumb">[IMG 5]</div>153 <div class="thumb">[IMG 6]</div>154 <div class="thumb">[IMG 7]</div>155 </div>156 <div class="right-banner">Classic Masala</div>157 </div>158 159 <div class="pack-sizes card">160 <div class="section-title">Pack Sizes</div>161 162 <div class="pack-option selected">163 <div class="pack-left">164 <div class="size">1 kg</div>165 <div class="type">Pouch</div>166 </div>167 <div style="display:flex; align-items:flex-start;">168 <div class="pack-right">169 <div><span class="p-now">₹368.18</span> <span class="p-strike">₹449</span></div>170 <div class="off">18% OFF</div>171 </div>172 <svg class="check-icon" viewBox="0 0 24 24">173 <circle cx="12" cy="12" r="11" fill="#66BB6A"/>174 <path d="M6.5 12l3.5 3.5L17.5 8.5" stroke="#FFFFFF" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>175 </svg>176 </div>177 </div>178 179 <div class="pack-option">180 <div class="pack-left">181 <div class="size">38 g</div>182 <div class="type">Pouch</div>183 </div>184 <div class="pack-right">185 <div><span class="p-now">₹15.81</span> <span class="p-strike">₹17</span></div>186 </div>187 </div>188 </div>189 </div>190 191 <!-- Sticky CTA bar -->192 <div class="bottom-bar">193 <div class="cta once">BUY ONCE</div>194 <div class="cta subscribe">SUBSCRIBE @ ₹368.18</div>195 </div>196 197 <!-- Home indicator -->198 <div class="home-indicator"></div>199</div>200</body>201</html>