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.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;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    color: #212121;16  }17 18  /* Top status bar */19  .status-bar {20    height: 96px;21    padding: 0 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    font-size: 34px;26    color: #616161;27  }28  .status-right {29    display: flex;30    align-items: center;31    gap: 24px;32  }33  .status-icon {34    width: 32px; height: 32px; border-radius: 50%; background: #BDBDBD;35  }36 37  /* App bar */38  .appbar {39    height: 120px;40    padding: 0 24px;41    display: flex;42    align-items: center;43    justify-content: space-between;44    box-shadow: 0 2px 6px rgba(0,0,0,0.08);45    background: #ffffff;46  }47  .icon-btn {48    width: 96px; height: 96px; display: flex; align-items: center; justify-content: center;49  }50  .appbar svg { stroke: #424242; }51 52  /* Title and price section */53  .title-section {54    padding: 24px 36px 18px 36px;55    border-bottom: 1px solid #E0E0E0;56  }57  .product-title {58    font-size: 40px;59    line-height: 1.25;60    color: #424242;61    margin: 10px 0 18px 0;62  }63  .price-line {64    display: flex;65    align-items: baseline;66    gap: 18px;67    font-size: 40px;68  }69  .price-main {70    font-weight: 700;71    color: #1a1a1a;72    font-size: 48px;73  }74  .per-kg {75    color: #757575;76    font-size: 32px;77  }78  .old-price {79    color: #9E9E9E;80    text-decoration: line-through;81    font-size: 34px;82  }83  .discount {84    color: #D32F2F;85    font-weight: 700;86    font-size: 32px;87  }88 89  /* Variant card */90  .card {91    margin: 24px 24px;92    padding: 28px 36px;93    background: #ffffff;94    border: 1px solid #E0E0E0;95    border-radius: 20px;96  }97  .variant-row {98    display: flex;99    align-items: center;100    justify-content: space-between;101  }102  .variant-name {103    font-size: 36px; color: #616161;104  }105  .variant-prices {106    text-align: right;107  }108  .variant-current {109    font-size: 40px; font-weight: 700; color: #1a1a1a;110  }111  .variant-old {112    font-size: 34px; color: #9E9E9E; text-decoration: line-through; margin-left: 12px;113  }114  .variant-off {115    margin-top: 6px;116    color: #D32F2F;117    font-size: 28px;118    font-weight: 700;119  }120 121  /* Delivery info */122  .delivery {123    margin: 18px 24px;124    background: #F5F5F5;125    border-radius: 18px;126    padding: 26px 32px;127    display: flex;128    align-items: center;129    gap: 22px;130    color: #616161;131    font-size: 34px;132  }133  .truck svg { stroke: #757575; }134 135  /* Section headers */136  .section-header {137    margin: 18px 0 0 0;138    padding: 24px 36px;139    background: #ffffff;140    border-top: 1px solid #E0E0E0;141    border-bottom: 1px solid #E0E0E0;142    display: flex;143    align-items: center;144    justify-content: space-between;145  }146  .section-title {147    font-size: 44px;148    font-weight: 700;149    color: #212121;150  }151  .section-subtitle {152    color: #9E9E9E;153    font-size: 36px;154    padding: 24px 36px 0 36px;155  }156  .description {157    margin: 0 24px 24px 24px;158    padding: 22px 24px;159    background: #FAFAFA;160    border: 1px solid #EEEEEE;161    border-radius: 14px;162    color: #616161;163    font-size: 34px;164    line-height: 1.55;165  }166 167  /* Ingredients row */168  .row {169    padding: 28px 36px;170    display: flex;171    align-items: center;172    justify-content: space-between;173    border-top: 1px solid #E0E0E0;174  }175  .row-title { font-size: 42px; color: #424242; }176 177  /* Bottom purchase bar */178  .bottom-bar {179    position: absolute;180    left: 0; right: 0; bottom: 72px;181    height: 170px;182    background: #212121;183    display: flex;184  }185  .btn {186    flex: 1;187    display: flex;188    align-items: center;189    justify-content: center;190    font-size: 40px;191    font-weight: 700;192    letter-spacing: 1px;193    color: #ffffff;194  }195  .btn.subscribe { background: #D65C5C; }196  .btn.once { background: #303437; }197  /* Gesture pill */198  .gesture-pill {199    position: absolute;200    left: 50%; transform: translateX(-50%);201    bottom: 18px;202    width: 240px; height: 18px;203    border-radius: 12px;204    background: #E0E0E0;205  }206</style>207</head>208<body>209<div id="render-target">210 211  <!-- Status bar -->212  <div class="status-bar">213    <div>11:49</div>214    <div class="status-right">215      <div class="status-icon"></div>216      <div class="status-icon"></div>217      <div class="status-icon"></div>218      <svg width="36" height="36" viewBox="0 0 24 24">219        <path d="M3 12h18" stroke="#616161" stroke-width="2" />220      </svg>221      <svg width="36" height="36" viewBox="0 0 24 24">222        <rect x="3" y="5" width="18" height="14" rx="2" stroke="#616161" stroke-width="2" fill="none"/>223        <path d="M7 9h10" stroke="#616161" stroke-width="2"/>224      </svg>225    </div>226  </div>227 228  <!-- App bar -->229  <div class="appbar">230    <div class="icon-btn">231      <svg width="64" height="64" viewBox="0 0 48 48">232        <path d="M30 8 L14 24 L30 40" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>233      </svg>234    </div>235    <div class="icon-btn">236      <svg width="64" height="64" viewBox="0 0 48 48">237        <circle cx="22" cy="22" r="14" stroke-width="4" fill="none"/>238        <path d="M36 36 L44 44" stroke-width="4"/>239      </svg>240    </div>241  </div>242 243  <!-- Title and price -->244  <div class="title-section">245    <div class="product-title">246      Oats - Tasty Evening Snack, Fibre Rich, Classic Masala, 1 kg - Pouch247    </div>248    <div class="price-line">249      <span class="price-main">₹368.18</span>250      <span class="per-kg">(₹368.18/kg)</span>251      <span class="old-price">₹449</span>252      <span class="discount">18% OFF</span>253    </div>254  </div>255 256  <!-- Variant card -->257  <div class="card">258    <div class="variant-row">259      <div class="variant-name">500 g</div>260      <div class="variant-prices">261        <div><span class="variant-current">₹198</span> <span class="variant-old">₹225</span></div>262        <div class="variant-off">12% OFF</div>263      </div>264    </div>265  </div>266 267  <!-- Delivery info -->268  <div class="delivery">269    <div class="truck">270      <svg width="52" height="52" viewBox="0 0 48 48">271        <rect x="6" y="16" width="20" height="14" rx="2" fill="none" stroke-width="3"/>272        <rect x="28" y="20" width="10" height="10" rx="2" fill="none" stroke-width="3"/>273        <circle cx="14" cy="34" r="3" fill="none" stroke-width="3"/>274        <circle cx="34" cy="34" r="3" fill="none" stroke-width="3"/>275      </svg>276    </div>277    <div>Tomorrow Morning Delivery</div>278  </div>279 280  <!-- About the product header -->281  <div class="section-header">282    <div class="section-title">About the product</div>283    <svg width="48" height="48" viewBox="0 0 24 24">284      <path d="M5 12h14" stroke="#9E9E9E" stroke-width="3" stroke-linecap="round"/>285    </svg>286  </div>287 288  <div class="section-subtitle">About the Product</div>289  <div class="description">290    Saffola Masala Oats brings to you a range of delightful flavours making for a perfect evening snack. Made with whole grain oats, real vegetables and a tasty mix of authentic desi spices, Saffola Masala Oats forms a delectable warm bowl of joy. What's more, is that it is ready to eat in just 3 minutes — super convenient to make, super tasty to eat, and super hard to resist!<br><br>291    You can also enjoy Saffola Masala Oats in a variety of tasty recipes like Crispy Cutlets, Penne Pasta, or just as a delicious bowl of joy with crunchy toppings like namkeen, peanuts or crushed papad. Saffola Masala Oats is available in a range of lip-smacking flavours — Classic Masala for the classic masaledar experience | Veggie Twist for the comforting blend of spices and vegetables | Peppy tomato for a tangy indulgence | Masala Coriander for the tasty mix of desi spices with coriander notes | Curry & Pepper with a lingering aroma of curry leaves.<br><br>292    Made with wholegrain oats and real vegetables, Saffola Masala Oats is high in fibre and protein keeping you fuller for longer, helping you control your hunger pangs and manage weight.293  </div>294 295  <!-- Ingredients collapsed -->296  <div class="row">297    <div class="row-title">Ingredients</div>298    <svg width="48" height="48" viewBox="0 0 24 24">299      <path d="M12 5v14M5 12h14" stroke="#757575" stroke-width="3" stroke-linecap="round"/>300    </svg>301  </div>302 303  <!-- Bottom purchase bar -->304  <div class="bottom-bar">305    <div class="btn once">BUY ONCE</div>306    <div class="btn subscribe">SUBSCRIBE @ ₹368.18</div>307  </div>308 309  <!-- Gesture pill -->310  <div class="gesture-pill"></div>311</div>312</body>313</html>