GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Product Detail - 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;11 position: relative; overflow: hidden;12 background: #ffffff;13 color: #212121;14 }15 16 /* Status bar */17 .status-bar {18 height: 80px;19 padding: 0 32px;20 display: flex; align-items: center; justify-content: space-between;21 color: #616161; font-size: 30px;22 }23 .status-icons { display: flex; align-items: center; gap: 18px; }24 .dot { width: 10px; height: 10px; background:#9e9e9e; border-radius:50%; display:inline-block; }25 .battery {26 width: 28px; height: 18px; border:2px solid #757575; border-radius:4px; position: relative;27 }28 .battery::after {29 content:""; position:absolute; right:-6px; top:5px; width:4px; height:8px; background:#757575; border-radius:1px;30 }31 32 /* App bar */33 .app-bar {34 height: 110px; border-bottom: 1px solid #e0e0e0; background: #ffffff;35 display: flex; align-items: center; justify-content: space-between;36 padding: 0 24px;37 }38 .icon-btn { width: 72px; height: 72px; display:flex; align-items:center; justify-content:center; }39 .icon-svg { width: 48px; height: 48px; }40 .search { width: 60px; height: 60px; }41 42 /* Product summary */43 .product-summary {44 padding: 28px 32px 22px 32px;45 border-bottom: 1px solid #e0e0e0;46 background:#ffffff;47 }48 .product-title {49 font-size: 38px; line-height: 50px; color:#424242; margin: 6px 0 18px 0;50 }51 .price-row { display:flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }52 .price { font-size: 44px; font-weight: bold; color:#111; }53 .per-price { font-size: 28px; color:#757575; }54 .strike { font-size: 30px; color:#9e9e9e; text-decoration: line-through; }55 .off { font-size: 30px; color:#d32f2f; font-weight: bold; }56 57 /* Info cards */58 .info-card {59 margin: 18px 16px;60 background:#ffffff; border:1px solid #e0e0e0; border-radius: 14px;61 overflow: hidden;62 }63 .info-row {64 padding: 30px; position: relative;65 border-top: 1px solid #eeeeee;66 }67 .info-row:first-child { border-top: none; }68 .row-title { font-size: 36px; color:#757575; }69 .row-content { margin-top: 22px; font-size: 30px; color:#757575; }70 .view-more { position: absolute; right: 30px; bottom: 30px; color:#1e88e5; font-size: 28px; }71 .plus-icon {72 position: absolute; right: 30px; top: 28px;73 width: 44px; height: 44px;74 }75 .know-more {76 text-align:center; color:#1e88e5; font-size: 32px; padding: 26px 0;77 border-top:1px solid #eeeeee;78 }79 .chev { width: 24px; height: 24px; vertical-align: middle; margin-left: 10px; }80 81 /* Purchase bar */82 .purchase-bar {83 display:flex; height: 120px; margin-top: 10px;84 }85 .buy-once {86 flex:1; background:#37474F; color:#ffffff;87 display:flex; align-items:center; justify-content:center; font-size:34px; font-weight:600;88 }89 .subscribe {90 flex:1; background:#d86b6b; color:#ffffff;91 display:flex; align-items:center; justify-content:center; font-size:34px; font-weight:600;92 }93 94 /* Ratings section */95 .ratings-section { padding: 26px 28px; background:#ffffff; }96 .section-title { font-size: 40px; color:#212121; margin: 12px 0 24px; }97 .rating-summary { display:flex; align-items:center; gap: 18px; color:#4CAF50; }98 .rating-value { font-size: 64px; font-weight: 700; }99 .star-icon { width: 42px; height: 42px; }100 .rating-sub { font-size: 28px; color:#757575; margin-top: 8px; }101 102 /* Reviews */103 .review-card {104 margin: 12px 0; padding: 26px 28px; background:#ffffff; border-top:1px solid #eeeeee;105 }106 .pill {107 display:inline-block; padding: 8px 14px; background:#e6f4ea; border:1px solid #a5d6a7; color:#2e7d32;108 border-radius: 8px; font-size: 26px; font-weight: 700;109 }110 .review-header { display:flex; align-items:center; justify-content:space-between; }111 .review-text { font-size: 32px; color:#424242; margin: 18px 0; }112 .review-meta { font-size: 26px; color:#9e9e9e; }113 .review-actions { display:flex; align-items:center; gap: 20px; color:#757575; }114 .action-icon { width: 40px; height: 40px; }115 .divider { height: 20px; background:#f5f5f5; }116 117 /* Bottom safe area indicator (android style) */118 .home-indicator {119 position:absolute; bottom: 18px; left:50%; transform:translateX(-50%);120 width: 240px; height: 10px; background:#000000; border-radius: 6px; opacity: 0.2;121 }122</style>123</head>124<body>125<div id="render-target">126 <!-- Status bar -->127 <div class="status-bar">128 <div>11:49</div>129 <div class="status-icons">130 <span class="dot"></span>131 <span class="dot"></span>132 <span class="dot"></span>133 <span class="dot"></span>134 <svg class="icon-svg" viewBox="0 0 24 24">135 <path d="M4 12h16" stroke="#757575" stroke-width="2" fill="none"/>136 <circle cx="12" cy="12" r="3" fill="#757575"/>137 </svg>138 <svg class="icon-svg" viewBox="0 0 24 24">139 <path d="M4 4l16 8-16 8z" fill="#757575"/>140 </svg>141 <div class="battery"></div>142 </div>143 </div>144 145 <!-- App bar -->146 <div class="app-bar">147 <div class="icon-btn">148 <svg class="icon-svg" viewBox="0 0 24 24">149 <path d="M15 6L9 12l6 6" stroke="#424242" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>150 </svg>151 </div>152 <div class="icon-btn">153 <svg class="search" viewBox="0 0 24 24">154 <circle cx="11" cy="11" r="7" stroke="#424242" stroke-width="2" fill="none"/>155 <path d="M16 16l5 5" stroke="#424242" stroke-width="2" fill="none" stroke-linecap="round"/>156 </svg>157 </div>158 </div>159 160 <!-- Product summary -->161 <div class="product-summary">162 <div class="product-title">Oats - Tasty Evening Snack, Fibre Rich, Classic Masala, 1 kg - Pouch</div>163 <div class="price-row">164 <div class="price">₹368.18</div>165 <div class="per-price">(₹368.18/kg)</div>166 <div class="strike">₹449</div>167 <div class="off">18% OFF</div>168 </div>169 </div>170 171 <!-- Info card with rows -->172 <div class="info-card">173 <div class="info-row">174 <div class="row-title">How to Use</div>175 <svg class="plus-icon" viewBox="0 0 24 24">176 <path d="M12 5v14M5 12h14" stroke="#9e9e9e" stroke-width="2" fill="none" stroke-linecap="round"/>177 </svg>178 <div class="row-content">1) For every cup of Saffola Masala Oats, add 3 cups (240ml) of water to a pan.</div>179 <div class="view-more">View More</div>180 </div>181 <div class="info-row">182 <div class="row-title">Nutritional Facts</div>183 <svg class="plus-icon" viewBox="0 0 24 24">184 <path d="M12 5v14M5 12h14" stroke="#9e9e9e" stroke-width="2" fill="none" stroke-linecap="round"/>185 </svg>186 <div class="row-content">Per (100 g) Approximate value:</div>187 <div class="view-more">View More</div>188 </div>189 <div class="info-row">190 <div class="row-title">Other Product Info</div>191 <svg class="plus-icon" viewBox="0 0 24 24">192 <path d="M12 5v14M5 12h14" stroke="#9e9e9e" stroke-width="2" fill="none" stroke-linecap="round"/>193 </svg>194 <div class="row-content">195 EAN Code: 40220361<br>196 Country Of Origin: India197 </div>198 <div class="view-more">View More</div>199 </div>200 <div class="know-more">201 Know more about this product202 <svg class="chev" viewBox="0 0 24 24">203 <path d="M6 9l6 6 6-6" stroke="#1e88e5" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>204 </svg>205 </div>206 </div>207 208 <!-- Purchase bar -->209 <div class="purchase-bar">210 <div class="buy-once">BUY ONCE</div>211 <div class="subscribe">SUBSCRIBE @ ₹368.18</div>212 </div>213 214 <!-- Ratings and reviews -->215 <div class="ratings-section">216 <div class="section-title">Ratings & Reviews</div>217 <div class="rating-summary">218 <div class="rating-value">4.2</div>219 <svg class="star-icon" viewBox="0 0 24 24">220 <path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1z" fill="#4CAF50"/>221 </svg>222 </div>223 <div class="rating-sub">2392 ratings & 26 reviews</div>224 </div>225 226 <!-- Review 1 -->227 <div class="review-card">228 <div class="review-header">229 <div class="pill">5 ★</div>230 <div class="review-actions">231 <span style="font-size:26px;color:#757575;">1</span>232 <svg class="action-icon" viewBox="0 0 24 24">233 <path d="M3 12h8l2-6h6v12H8l-5-5z" fill="#9e9e9e"/>234 </svg>235 <svg class="action-icon" viewBox="0 0 24 24">236 <path d="M6 3h8l3 3v12H6z" fill="none" stroke="#9e9e9e" stroke-width="2"/>237 <path d="M14 3v6l-3-2-3 2V3z" fill="#9e9e9e"/>238 </svg>239 </div>240 </div>241 <div class="review-text">tasty and easy to make</div>242 <div class="review-meta">Shweta (7 months ago)</div>243 </div>244 <div class="divider"></div>245 246 <!-- Review 2 -->247 <div class="review-card">248 <div class="review-header">249 <div class="pill">5 ★</div>250 <div class="review-actions">251 <span style="font-size:26px;color:#757575;">1</span>252 <svg class="action-icon" viewBox="0 0 24 24">253 <path d="M3 12h8l2-6h6v12H8l-5-5z" fill="#9e9e9e"/>254 </svg>255 <svg class="action-icon" viewBox="0 0 24 24">256 <path d="M6 3h8l3 3v12H6z" fill="none" stroke="#9e9e9e" stroke-width="2"/>257 <path d="M14 3v6l-3-2-3 2V3z" fill="#9e9e9e"/>258 </svg>259 </div>260 </div>261 <div class="review-text"><strong>Good BF</strong><br>good food ... my breakfast... healthy one ... having almost daily</div>262 <div class="review-meta">Abhijit Das, Kolkata (1 year ago)</div>263 </div>264 265 <div class="home-indicator"></div>266</div>267</body>268</html>