GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Product Detail - Oats</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15    box-shadow: 0 2px 6px rgba(0,0,0,0.08);16    border-radius: 16px;17  }18  .status-bar {19    height: 90px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #212121;25    font-size: 30px;26  }27  .status-left, .status-right {28    display: flex;29    align-items: center;30    gap: 20px;31  }32  .tiny-dot {33    width: 14px; height: 14px; background: #616161; border-radius: 50%;34    opacity: 0.7;35  }36  .header {37    height: 120px;38    display: flex;39    align-items: center;40    padding: 0 24px 0 12px;41    border-bottom: 1px solid #E0E0E0;42    position: relative;43    background: #FFFFFF;44  }45  .header .left {46    width: 80px;47    display: flex;48    align-items: center;49    justify-content: center;50  }51  .header .title-area {52    flex: 1;53  }54  .header .right {55    width: 120px;56    display: flex;57    align-items: center;58    justify-content: center;59  }60  .content {61    padding: 12px 36px 0 36px;62  }63  .product-title {64    font-size: 38px;65    line-height: 1.3;66    color: #424242;67    margin: 10px 0 18px 0;68  }69  .price-row {70    display: flex;71    align-items: baseline;72    gap: 18px;73    font-size: 34px;74    color: #212121;75    margin-bottom: 18px;76  }77  .price-main { font-weight: 700; font-size: 44px; }78  .price-per { color: #757575; font-size: 28px; }79  .price-old { color: #9E9E9E; text-decoration: line-through; font-size: 30px; }80  .discount { color: #D32F2F; font-weight: 700; font-size: 30px; }81  .variant-card {82    border: 1px solid #E0E0E0;83    border-radius: 16px;84    padding: 28px 30px;85    display: flex;86    justify-content: space-between;87    align-items: center;88    background: #FAFAFA;89    margin: 24px 0 28px 0;90  }91  .variant-left { color: #616161; font-size: 34px; }92  .variant-right { text-align: right; }93  .variant-price { font-size: 34px; font-weight: 700; color: #212121; }94  .variant-old { font-size: 30px; color: #9E9E9E; text-decoration: line-through; margin-left: 12px; }95  .variant-off { font-size: 28px; color: #D32F2F; margin-top: 6px; }96  .delivery-row {97    background: #F5F5F5;98    border-radius: 14px;99    padding: 26px 30px;100    display: flex;101    align-items: center;102    gap: 20px;103    color: #424242;104    font-size: 32px;105    margin-bottom: 24px;106  }107  .section-title {108    font-size: 40px;109    font-weight: 700;110    color: #212121;111    margin: 18px 0 8px;112  }113  .info-card {114    border: 1px solid #E0E0E0;115    border-radius: 16px;116    background: #FFFFFF;117    overflow: hidden;118  }119  .info-row {120    padding: 26px 30px;121    position: relative;122  }123  .info-row + .info-row { border-top: 1px solid #E0E0E0; }124  .info-label {125    font-size: 34px;126    color: #616161;127    margin-bottom: 12px;128  }129  .info-text {130    font-size: 30px;131    color: #757575;132    line-height: 1.5;133  }134  .view-more {135    color: #1E88E5;136    font-size: 30px;137    text-decoration: none;138  }139  .row-end-icon {140    position: absolute;141    right: 24px;142    top: 30px;143  }144  .divider {145    height: 1px;146    background: #E0E0E0;147    margin: 22px 0;148  }149  .know-more {150    text-align: center;151    color: #1E88E5;152    font-weight: 600;153    font-size: 32px;154    padding: 30px 0;155  }156  .nav-pill {157    position: absolute;158    bottom: 28px;159    left: 50%;160    transform: translateX(-50%);161    width: 220px;162    height: 12px;163    background: #BDBDBD;164    border-radius: 6px;165    opacity: 0.7;166  }167  /* Simple utility for inline icons color */168  .icon-gray path, .icon-gray circle, .icon-gray line { stroke: #616161; }169</style>170</head>171<body>172<div id="render-target">173 174  <!-- Status bar -->175  <div class="status-bar">176    <div class="status-left">177      <div>11:48</div>178      <div class="tiny-dot"></div>179      <div class="tiny-dot"></div>180      <div class="tiny-dot"></div>181      <div style="font-weight:600; color:#616161;">ib</div>182      <div style="font-weight:700; color:#616161;">N</div>183      <div class="tiny-dot" style="opacity:.4;"></div>184    </div>185    <div class="status-right">186      <!-- Mute icon (simple) -->187      <svg width="32" height="32" viewBox="0 0 48 48" class="icon-gray">188        <path d="M8 18h10l10-8v28l-10-8H8z" fill="none" stroke="#616161" stroke-width="3" stroke-linejoin="round"/>189        <line x1="34" y1="14" x2="44" y2="24" stroke="#616161" stroke-width="3"/>190      </svg>191      <!-- Wi-Fi -->192      <svg width="32" height="32" viewBox="0 0 48 48" class="icon-gray">193        <path d="M6 18c8-8 28-8 36 0M12 24c6-6 18-6 24 0M18 30c3-3 9-3 12 0" fill="none" stroke="#616161" stroke-width="3" stroke-linecap="round"/>194        <circle cx="24" cy="36" r="2.5" fill="#616161"/>195      </svg>196      <!-- Battery -->197      <svg width="40" height="32" viewBox="0 0 60 40" class="icon-gray">198        <rect x="4" y="10" width="44" height="20" rx="4" ry="4" fill="none" stroke="#616161" stroke-width="3"/>199        <rect x="8" y="14" width="28" height="12" fill="#616161"/>200        <rect x="50" y="15" width="6" height="10" rx="2" fill="#616161"/>201      </svg>202    </div>203  </div>204 205  <!-- Header bar -->206  <div class="header">207    <div class="left">208      <!-- Back arrow -->209      <svg width="56" height="56" viewBox="0 0 48 48">210        <path d="M30 10 L12 24 L30 38" stroke="#616161" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>211      </svg>212    </div>213    <div class="title-area"></div>214    <div class="right">215      <!-- Search icon -->216      <svg width="56" height="56" viewBox="0 0 48 48">217        <circle cx="20" cy="20" r="12" stroke="#616161" stroke-width="4" fill="none"/>218        <line x1="30" y1="30" x2="42" y2="42" stroke="#616161" stroke-width="4" stroke-linecap="round"/>219      </svg>220    </div>221  </div>222 223  <!-- Main content -->224  <div class="content">225    <div class="product-title">Oats - Tasty Evening Snack, Fibre Rich, Classic Masala, 1 kg - Pouch</div>226 227    <div class="price-row">228      <div class="price-main">₹368.18</div>229      <div class="price-per">(₹368.18/kg)</div>230      <div class="price-old">₹449</div>231      <div class="discount">18% OFF</div>232    </div>233 234    <div class="variant-card">235      <div class="variant-left">500 g</div>236      <div class="variant-right">237        <div><span class="variant-price">₹198</span><span class="variant-old">₹225</span></div>238        <div class="variant-off">12% OFF</div>239      </div>240    </div>241 242    <div class="delivery-row">243      <!-- Truck icon -->244      <svg width="48" height="48" viewBox="0 0 48 48">245        <rect x="6" y="14" width="22" height="14" rx="2" fill="none" stroke="#616161" stroke-width="3"/>246        <rect x="28" y="18" width="10" height="10" rx="1" fill="none" stroke="#616161" stroke-width="3"/>247        <circle cx="14" cy="30" r="3" fill="#616161"/>248        <circle cx="34" cy="30" r="3" fill="#616161"/>249      </svg>250      <div>Tomorrow Morning Delivery</div>251    </div>252 253    <div class="section-title">About the product</div>254 255    <div class="info-card">256      <!-- About the Product -->257      <div class="info-row">258        <div class="info-label">About the Product</div>259        <div class="info-text">260          Saffola Masala Oats brings to you a range of delightful flavours making for a perfect evening snack. Made w...261          <a href="#" class="view-more">View More</a>262        </div>263        <div class="row-end-icon">264          <svg width="36" height="36" viewBox="0 0 48 48">265            <line x1="24" y1="10" x2="24" y2="38" stroke="#9E9E9E" stroke-width="4" stroke-linecap="round"/>266            <line x1="10" y1="24" x2="38" y2="24" stroke="#9E9E9E" stroke-width="4" stroke-linecap="round"/>267          </svg>268        </div>269      </div>270 271      <!-- Ingredients -->272      <div class="info-row">273        <div class="info-label">Ingredients</div>274        <div class="info-text">275          Oats (73.9%), Maltodextrin, Salt, Spices And Condiments (3.4%) (Onion, Tumeric, Pepper Cumin, Garlic, Fenugr...276          <a href="#" class="view-more">View More</a>277        </div>278        <div class="row-end-icon">279          <svg width="36" height="36" viewBox="0 0 48 48">280            <line x1="24" y1="10" x2="24" y2="38" stroke="#9E9E9E" stroke-width="4" stroke-linecap="round"/>281            <line x1="10" y1="24" x2="38" y2="24" stroke="#9E9E9E" stroke-width="4" stroke-linecap="round"/>282          </svg>283        </div>284      </div>285 286      <!-- How to Use -->287      <div class="info-row">288        <div class="info-label">How to Use</div>289        <div class="info-text">290          1) For every cup of Saffola Masala Oats, add 3 cups (240ml) of water to a pan.291          <a href="#" class="view-more">View More</a>292        </div>293        <div class="row-end-icon">294          <svg width="36" height="36" viewBox="0 0 48 48">295            <line x1="24" y1="10" x2="24" y2="38" stroke="#9E9E9E" stroke-width="4" stroke-linecap="round"/>296            <line x1="10" y1="24" x2="38" y2="24" stroke="#9E9E9E" stroke-width="4" stroke-linecap="round"/>297          </svg>298        </div>299      </div>300 301      <!-- Nutritional Facts -->302      <div class="info-row">303        <div class="info-label">Nutritional Facts</div>304        <div class="info-text">305          Per (100 g) Approximate