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; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #ffffff;15    font-family: Arial, Helvetica, sans-serif;16    color: #333;17  }18 19  /* Status bar */20  .status-bar {21    height: 120px;22    background: #ffffff;23    display: flex;24    align-items: center;25    justify-content: space-between;26    padding: 0 40px;27    color: #616161;28    font-size: 36px;29  }30  .status-icons {31    display: flex;32    align-items: center;33    gap: 26px;34  }35  .dot { width: 14px; height: 14px; background: #9e9e9e; border-radius: 50%; display: inline-block; }36  .battery {37    width: 48px; height: 26px; border: 3px solid #757575; border-radius: 6px; position: relative;38  }39  .battery:after { content: ""; position: absolute; right: -10px; top: 6px; width: 6px; height: 14px; background: #757575; border-radius: 2px; }40  .wifi {41    width: 34px; height: 24px; border-top: 3px solid #757575; border-left: 3px solid transparent; border-right: 3px solid transparent; border-radius: 24px 24px 0 0;42  }43 44  /* Toolbar */45  .toolbar {46    height: 120px;47    background: #ffffff;48    display: flex;49    align-items: center;50    padding: 0 30px;51    box-shadow: 0 2px 6px rgba(0,0,0,0.08);52  }53  .tb-left, .tb-right { display: flex; align-items: center; }54  .tb-title { flex: 1; text-align: center; color: #757575; font-size: 34px; }55  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }56 57  /* Content */58  .content { padding: 24px 40px 0 40px; }59  .product-title {60    font-size: 44px;61    line-height: 58px;62    color: #4a4a4a;63    margin: 18px 0 16px 0;64  }65  .price-row {66    display: flex;67    align-items: baseline;68    gap: 22px;69    font-size: 40px;70    margin-bottom: 24px;71  }72  .price-main { font-weight: 700; color: #111; }73  .price-sub { color: #8e8e8e; font-size: 32px; }74  .price-strike { color: #9e9e9e; text-decoration: line-through; font-size: 34px; }75  .price-off { color: #e53935; font-weight: 700; font-size: 34px; }76  .divider { height: 2px; background: #e0e0e0; margin: 18px -40px 0 -40px; }77 78  /* Panels */79  .panel {80    background: #f7f7f7;81    border: 1px solid #e0e0e0;82    border-radius: 20px;83    padding: 24px;84    margin: 24px 0;85  }86  .panel-header {87    display: flex;88    justify-content: space-between;89    align-items: center;90    padding: 12px 12px 10px 12px;91  }92  .panel-title { font-size: 44px; color: #666; }93  .panel-body {94    background: #ffffff;95    border: 1px solid #e0e0e0;96    border-radius: 14px;97    padding: 28px;98    color: #777;99    font-size: 34px;100    line-height: 52px;101  }102  .row-divider { height: 2px; background: #e0e0e0; margin: 26px 0; }103 104  .link-more {105    text-align: center;106    color: #1e88e5;107    font-size: 36px;108    padding: 34px 0 18px 0;109  }110 111  /* CTA bar */112  .cta-bar {113    display: flex;114    margin: 24px -40px 0 -40px;115    height: 140px;116  }117  .btn-left {118    flex: 1;119    background: #37474f;120    color: #fff;121    font-weight: 700;122    font-size: 40px;123    display: flex;124    align-items: center;125    justify-content: center;126  }127  .btn-right {128    flex: 1;129    background: #d56a72;130    color: #fff;131    font-weight: 700;132    font-size: 40px;133    display: flex;134    align-items: center;135    justify-content: center;136  }137 138  /* Ratings */139  .ratings-section {140    padding: 30px 40px;141    background: #ffffff;142  }143  .ratings-title {144    font-size: 44px;145    color: #333;146    margin: 20px 0 30px 0;147  }148  .rating-row {149    display: flex;150    align-items: center;151    gap: 20px;152  }153  .rating-score {154    font-size: 92px;155    color: #4CAF50;156    font-weight: 700;157  }158  .rating-sub {159    color: #757575;160    font-size: 34px;161  }162 163  /* Bottom navigation pill */164  .nav-pill {165    position: absolute;166    bottom: 24px;167    left: 50%;168    transform: translateX(-50%);169    width: 250px;170    height: 18px;171    background: #000000;172    opacity: 0.2;173    border-radius: 12px;174  }175 176  /* Simple icon strokes */177  svg { display: block; }178</style>179</head>180<body>181<div id="render-target">182 183  <!-- Status bar -->184  <div class="status-bar">185    <div class="status-left">11:51</div>186    <div class="status-icons">187      <span class="dot"></span>188      <span class="dot"></span>189      <span class="dot"></span>190      <div class="wifi"></div>191      <div class="battery"></div>192    </div>193  </div>194 195  <!-- Toolbar -->196  <div class="toolbar">197    <div class="tb-left icon-btn">198      <!-- Back arrow -->199      <svg width="44" height="44" viewBox="0 0 44 44">200        <path d="M26 8 L12 22 L26 36" stroke="#616161" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>201      </svg>202    </div>203    <div class="tb-title"></div>204    <div class="tb-right icon-btn" style="margin-left:auto;">205      <!-- Search icon -->206      <svg width="44" height="44" viewBox="0 0 44 44">207        <circle cx="18" cy="18" r="12" stroke="#616161" stroke-width="3" fill="none"></circle>208        <line x1="28" y1="28" x2="38" y2="38" stroke="#616161" stroke-width="3" stroke-linecap="round"></line>209      </svg>210    </div>211  </div>212 213  <!-- Content -->214  <div class="content">215    <div class="product-title">216      Oats - Tasty Evening Snack, Fibre Rich, Classic Masala, 1 kg - Pouch217    </div>218 219    <div class="price-row">220      <div class="price-main">₹368.18</div>221      <div class="price-sub">(₹368.18/kg)</div>222      <div class="price-strike">₹449</div>223      <div class="price-off">18% OFF</div>224    </div>225 226    <div class="divider"></div>227 228    <!-- Ingredients panel (expanded) -->229    <div class="panel">230      <div class="panel-header">231        <div class="panel-title">Ingredients</div>232        <!-- Minus icon -->233        <svg width="54" height="54" viewBox="0 0 54 54">234          <line x1="14" y1="27" x2="40" y2="27" stroke="#9e9e9e" stroke-width="4" stroke-linecap="round"></line>235        </svg>236      </div>237      <div class="panel-body">238        Oats (73.9%), Maltodextrin, Salt, Spices And Condiments (3.4%) (Onion, Tumeric, Pepper Cumin, Garlic, Fenugreek, Clove, Nutmeg, Red Chilli)), Dried Vegetables (Carrots(L .15%), Onion Flakes (1.15%), Green Peas(0.69%)) Sugar, Starch, Hydrolysed Vegetable Protein, Wheat Power, Edible Vegetable Oil, Flavour Enhancer (627, 631 Antioxidant (320). Contains Added Natural And Nature Identical Flavouring Substances.239      </div>240    </div>241 242    <!-- How to Use (collapsed) -->243    <div class="panel">244      <div class="panel-header">245        <div class="panel-title">How to Use</div>246        <!-- Plus icon -->247        <svg width="54" height="54" viewBox="0 0 54 54">248          <line x1="27" y1="14" x2="27" y2="40" stroke="#9e9e9e" stroke-width="4" stroke-linecap="round"></line>249          <line x1="14" y1="27" x2="40" y2="27" stroke="#9e9e9e" stroke-width="4" stroke-linecap="round"></line>250        </svg>251      </div>252      <div class="panel-body" style="color:#777;">253        1) For every cup of Saffola Masala Oats, add 3 cups (240ml) of water to a pan.254        <div class="row-divider"></div>255        <div style="color:#1e88e5; font-size:34px;">View More</div>256      </div>257    </div>258 259    <!-- Nutritional Facts (collapsed) -->260    <div class="panel">261      <div class="panel-header">262        <div class="panel-title">Nutritional Facts</div>263        <!-- Plus icon -->264        <svg width="54" height="54" viewBox="0 0 54 54">265          <line x1="27" y1="14" x2="27" y2="40" stroke="#9e9e9e" stroke-width="4" stroke-linecap="round"></line>266          <line x1="14" y1="27" x2="40" y2="27" stroke="#9e9e9e" stroke-width="4" stroke-linecap="round"></line>267        </svg>268      </div>269      <div class="panel-body">270        Per (100 g) Approximate value:271        <div class="row-divider"></div>272        <div style="color:#1e88e5; font-size:34px;">View More</div>273      </div>274    </div>275 276    <!-- Other Product Info (collapsed) -->277    <div class="panel">278      <div class="panel-header">279        <div class="panel-title">Other Product Info</div>280        <!-- Plus icon -->281        <svg width="54" height="54" viewBox="0 0 54 54">282          <line x1="27" y1="14" x2="27" y2="40" stroke="#9e9e9e" stroke-width="4" stroke-linecap="round"></line>283          <line x1="14" y1="27" x2="40" y2="27" stroke="#9e9e9e" stroke-width="4" stroke-linecap="round"></line>284        </svg>285      </div>286      <div class="panel-body">287        EAN Code: 40220361<br>288        Country Of Origin: India289        <div class="row-divider"></div>290        <div style="color:#1e88e5; font-size:34px;">View More</div>291      </div>292    </div>293 294    <div class="panel" style="background:#ffffff; border:none; padding:0; margin-top:8px;">295      <div class="link-more">296        Know more about this product297        <!-- chevron down -->298        <svg width="28" height="28" viewBox="0 0 28 28" style="display:inline-block; vertical-align:middle; margin-left:10px;">299          <polyline points="6,10 14,18 22,10" fill="none" stroke="#1e88e5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></polyline>300        </svg>301      </div>302    </div>303 304    <!-- CTA buttons -->305    <div class="cta-bar">306      <div class="btn-left">BUY ONCE</div>307      <div class="btn-right">SUBSCRIBE @ ₹368.18</div>308    </div>309 310    <!-- Ratings & Reviews -->311    <div class="ratings-section">312      <div class="ratings-title">Ratings & Reviews</div>313      <div class="rating-row">314        <div class="rating-score">4.2</div>315        <!-- Star icon -->316        <svg width="60" height="60" viewBox="0 0 60 60">317          <polygon points="30,6 36,22 54,22 40,32 46,48 30,38 14,48 20,32 6,22 24,22" fill="#4CAF50"></polygon>318        </svg>319      </div>320      <div class="rating-sub">2392 ratings & 26 reviews</div>321    </div>322 323  </div>324 325  <!-- Bottom navigation pill -->326  <div class="nav-pill"></div>327</div>328</body>329</html>