GD-ML/AndroidCode

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 - Toblerone</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: #ffffff;12  }13  .status-bar {14    height: 120px; background: #167A3A; color: #fff; padding: 0 32px;15    display: flex; align-items: center; justify-content: space-between;16    font-weight: 600; letter-spacing: 0.3px;17  }18  .status-left { display: flex; align-items: center; gap: 24px; }19  .status-right { display: flex; align-items: center; gap: 22px; }20  .sb-icon { width: 36px; height: 36px; opacity: 0.95; }21  .appbar {22    height: 140px; background: #ffffff; display: flex; align-items: center;23    justify-content: space-between; padding: 0 36px; box-shadow: 0 2px 0 rgba(0,0,0,0.06);24  }25  .back-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }26  .right-actions { display: flex; gap: 26px; }27  .circle-icon {28    width: 88px; height: 88px; border-radius: 50%; border: 1px solid #e3e3e3;29    display: flex; align-items: center; justify-content: center;30  }31 32  .content { padding: 0 48px; }33  .brand-row { display: flex; align-items: center; gap: 18px; margin-top: 24px; }34  .brand-row .line { width: 4px; height: 40px; background: #5598ff; border-radius: 2px; }35  .brand-row a { color: #2a79ff; font-size: 38px; text-decoration: none; }36 37  .title { font-size: 52px; font-weight: 700; color: #333; margin: 24px 0 18px 0; }38  .veg-symbol { width: 48px; height: 48px; border: 4px solid #e23b3b; display: flex; align-items: center; justify-content: center; margin: 12px 0 12px 6px; }39  .veg-symbol .dot { width: 22px; height: 22px; background: #e23b3b; border-radius: 50%; }40 41  .img-wrap { display: flex; justify-content: center; margin-top: 36px; }42  .img-placeholder {43    width: 800px; height: 190px; background: #E0E0E0; border: 1px solid #BDBDBD;44    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px;45  }46  .dots { display: flex; justify-content: center; gap: 20px; margin: 40px 0 20px 0; }47  .dot { width: 20px; height: 20px; border-radius: 50%; background: #d2d2d2; }48  .dot.active { background: #2ea24f; }49 50  .price-section { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 20px; margin-top: 24px; }51  .offer { display: flex; align-items: center; gap: 18px; color: #ff8a00; font-size: 42px; font-weight: 700; }52  .offer-note { color: #999; font-size: 28px; margin-top: 8px; }53  .price-right { text-align: left; }54  .price-right .dmart { color: #1f9d47; font-size: 48px; font-weight: 700; }55  .price-right .mrp { color: #9b9b9b; font-size: 38px; text-decoration: line-through; margin-top: 10px; }56  .price-right .tax { color: #9b9b9b; font-size: 28px; margin-top: 16px; }57 58  .variant { margin-top: 54px; }59  .variant h3 { font-size: 44px; color: #333; margin: 0 0 24px 0; }60  .variant .btn {61    width: 320px; height: 110px; border: 2px solid #1f9d47; border-radius: 16px;62    display: flex; align-items: center; justify-content: center; color: #1f9d47; font-size: 40px; font-weight: 700;63  }64  .variant .unit-price { color: #9b9b9b; font-size: 30px; margin-top: 16px; }65 66  .divider { height: 2px; background: #e6e6e6; margin: 40px 0; }67 68  .tabs { display: flex; gap: 36px; padding: 0 4px; }69  .tab { font-size: 40px; color: #777; padding-bottom: 18px; }70  .tab.active { color: #1f9d47; border-bottom: 6px solid #1f9d47; }71  .section { margin-top: 32px; }72  .section h4 { font-size: 42px; color: #222; margin: 0 0 16px 0; }73  .section p { font-size: 32px; color: #555; line-height: 1.6; }74 75  .add-to-cart {76    position: absolute; left: 24px; right: 24px; bottom: 120px;77    height: 136px; background: #1f9d47; border-radius: 8px;78    display: flex; align-items: center; justify-content: center; gap: 24px;79    color: #fff; font-size: 44px; font-weight: 700;80  }81  .gesture { position: absolute; left: 50%; transform: translateX(-50%); bottom: 36px; width: 240px; height: 18px; background: #cfcfcf; border-radius: 10px; }82 83  /* Utility */84  .muted { color: #9b9b9b; }85</style>86</head>87<body>88<div id="render-target">89 90  <!-- Status bar -->91  <div class="status-bar">92    <div class="status-left">93      <div style="font-size: 42px;">10:12</div>94      <!-- simple placeholders mimicking status icons -->95      <svg class="sb-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><circle cx="12" cy="12" r="9"/></svg>96      <svg class="sb-icon" viewBox="0 0 24 24" fill="#fff"><rect x="3" y="8" width="18" height="8" rx="2"/></svg>97      <svg class="sb-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M3 12h18M12 3v18"/></svg>98    </div>99    <div class="status-right">100      <svg class="sb-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M2 9l10-7 10 7v7a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3z"/></svg>101      <svg class="sb-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M3 6h18"/><path d="M12 6v14"/><path d="M6 20h12"/></svg>102    </div>103  </div>104 105  <!-- App bar -->106  <div class="appbar">107    <div class="back-btn">108      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">109        <path d="M15 18l-6-6 6-6"/>110      </svg>111    </div>112    <div class="right-actions">113      <div class="circle-icon">114        <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#1f9d47" stroke-width="2">115          <circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/>116        </svg>117      </div>118      <div class="circle-icon">119        <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#1f9d47" stroke-width="2">120          <path d="M6 6h15l-2 8H7z"/><circle cx="9" cy="19" r="1.5"/><circle cx="17" cy="19" r="1.5"/>121        </svg>122      </div>123      <div class="circle-icon">124        <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#1f9d47" stroke-width="2">125          <circle cx="12" cy="8" r="4"/><path d="M4 20c1.5-4 6-6 8-6s6.5 2 8 6"/>126        </svg>127      </div>128    </div>129  </div>130 131  <!-- Content -->132  <div class="content">133    <div class="brand-row">134      <div class="line"></div>135      <a href="#">Toblerone</a>136    </div>137 138    <div class="title">Toblerone Milk Chocolate : 100 gms</div>139 140    <div class="veg-symbol"><div class="dot"></div></div>141 142    <div class="img-wrap">143      <div class="img-placeholder">[IMG: Toblerone chocolate pack]</div>144    </div>145 146    <div class="dots">147      <div class="dot active"></div>148      <div class="dot"></div>149      <div class="dot"></div>150    </div>151 152    <div class="price-section">153      <div>154        <div class="offer">155          <svg width="48" height="48" viewBox="0 0 24 24" fill="#ff8a00">156            <path d="M12 2l2.2 4.5 5 .7-3.6 3.5.9 5.1L12 14.8 6.5 16.8l.9-5.1L3.8 7.2l5-.7L12 2z"/>157          </svg>158          ₹ 30.00 OFF159        </div>160      </div>161      <div class="price-right">162        <div class="dmart">DMart ₹ 245.00</div>163        <div class="mrp">MRP ₹ 275.00</div>164        <div class="tax">(MRP inclusive of all taxes)</div>165      </div>166    </div>167 168    <div class="variant">169      <h3>Variant</h3>170      <div class="btn">100 gm</div>171      <div class="unit-price">(₹ 2.45 / 1 gm)</div>172    </div>173 174    <div class="divider"></div>175 176    <div class="tabs">177      <div class="tab active">Description</div>178      <div class="tab">Disclaimer</div>179      <div class="tab">Country Of Origin</div>180    </div>181 182    <div class="section">183      <h4>Overview</h4>184      <p>185        Toblerone Milk Chocolate is a classic Toblerone milk chocolate in the distinctive beige packaging.186        Enjoy the unique honey and almond nougat blend in triangular pieces perfect for sharing or treating yourself.187      </p>188    </div>189  </div>190 191  <!-- Add to cart bar -->192  <div class="add-to-cart">193    <svg width="54" height="54" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">194      <path d="M6 6h15l-2 8H7z"/><circle cx="9" cy="19" r="1.5"/><circle cx="17" cy="19" r="1.5"/>195    </svg>196    ADD TO CART197  </div>198 199  <div class="gesture"></div>200 201</div>202</body>203</html>