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 - DMart Style</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #222; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #ffffff;15  }16 17  /* Top bars */18  .status-bar {19    height: 140px;20    background: #0b7a3b;21    color: #fff;22    display: flex;23    align-items: center;24    padding: 0 40px;25    font-weight: 600;26    font-size: 38px;27    letter-spacing: 1px;28  }29  .status-right {30    margin-left: auto;31    display: flex;32    align-items: center;33    gap: 28px;34  }35  .app-bar {36    height: 120px;37    background: #fff;38    display: flex;39    align-items: center;40    padding: 0 32px;41    border-bottom: 1px solid #e6e6e6;42  }43  .app-bar .spacer { flex: 1; }44  .icon-btn {45    width: 92px;46    height: 92px;47    display: inline-flex;48    align-items: center;49    justify-content: center;50    border-radius: 50%;51  }52  .icon {53    width: 56px;54    height: 56px;55    fill: #2f7d45;56  }57  .icon.gray { fill: #5f6368; }58  .back {59    width: 72px;60    height: 72px;61    display: inline-flex;62    align-items: center;63    justify-content: center;64    margin-right: 8px;65  }66 67  /* Product image placeholder */68  .image-area {69    padding: 24px 40px 0;70  }71  .img-ph {72    width: 100%;73    height: 520px;74    background: #E0E0E0;75    border: 1px solid #BDBDBD;76    border-radius: 12px;77    display: flex;78    align-items: center;79    justify-content: center;80    color: #757575;81    font-size: 40px;82    letter-spacing: 0.2px;83  }84  .dots {85    display: flex;86    gap: 18px;87    padding: 24px 0 8px 0;88    justify-content: center;89    align-items: center;90  }91  .dot {92    width: 16px;93    height: 16px;94    background: #d0d0d0;95    border-radius: 50%;96  }97  .dot.active { background: #2f7d45; }98 99  /* Offer and price */100  .price-offer {101    display: flex;102    padding: 24px 40px;103    align-items: flex-start;104  }105  .offer {106    display: flex;107    align-items: center;108    gap: 18px;109    color: #ff8a00;110    font-size: 44px;111    font-weight: 700;112  }113  .offer .badge {114    width: 48px;115    height: 48px;116  }117  .price-side {118    margin-left: auto;119    text-align: right;120  }121  .price-side .brand-price {122    font-size: 48px;123    color: #2f7d45;124    font-weight: 800;125  }126  .price-side .mrp {127    color: #9E9E9E;128    font-size: 34px;129    text-decoration: line-through;130    margin-top: 8px;131  }132  .price-side .tax {133    color: #9E9E9E;134    font-size: 30px;135    margin-top: 10px;136  }137 138  /* Variant */139  .section {140    padding: 24px 40px;141  }142  .section-title {143    font-size: 44px;144    font-weight: 800;145    margin-bottom: 22px;146  }147  .variant-btn {148    width: 260px;149    height: 110px;150    border: 4px solid #2f7d45;151    color: #2f7d45;152    border-radius: 12px;153    display: flex;154    align-items: center;155    justify-content: center;156    font-size: 42px;157    font-weight: 700;158  }159  .per-unit {160    color: #9E9E9E;161    font-size: 32px;162    margin-top: 16px;163  }164 165  /* Tabs */166  .tabs {167    display: flex;168    border-top: 1px solid #e6e6e6;169    border-bottom: 1px solid #e6e6e6;170    margin-top: 28px;171  }172  .tab {173    padding: 32px 40px;174    font-size: 42px;175    font-weight: 800;176    color: #424242;177    position: relative;178  }179  .tab.active {180    color: #2f7d45;181  }182  .tab.active::after {183    content: "";184    position: absolute;185    left: 40px;186    right: 40px;187    bottom: -2px;188    height: 8px;189    background: #2f7d45;190    border-radius: 8px;191  }192 193  /* Description content */194  .content {195    padding: 32px 40px 280px;196    line-height: 1.6;197  }198  .h3 {199    font-size: 44px;200    font-weight: 800;201    margin: 26px 0 8px;202  }203  .p {204    font-size: 38px;205    color: #333;206    margin: 4px 0 12px;207  }208 209  /* Bottom add-to-cart bar */210  .bottom-bar {211    position: absolute;212    left: 0;213    right: 0;214    bottom: 90px;215    height: 170px;216    background: #ffffff;217    border-top: 1px solid #e6e6e6;218    display: flex;219    align-items: center;220    justify-content: center;221    padding: 0 32px;222  }223  .cta {224    width: 100%;225    height: 120px;226    background: #2f7d45;227    color: #fff;228    border: none;229    border-radius: 10px;230    font-size: 44px;231    font-weight: 800;232    display: flex;233    align-items: center;234    justify-content: center;235    gap: 20px;236    letter-spacing: 1px;237  }238  .cta .cart {239    width: 56px;240    height: 56px;241    fill: #ffffff;242  }243 244  /* Gesture pill */245  .gesture {246    position: absolute;247    left: 50%;248    transform: translateX(-50%);249    bottom: 24px;250    width: 260px;251    height: 14px;252    background: #cfcfcf;253    border-radius: 14px;254  }255</style>256</head>257<body>258<div id="render-target">259  <!-- Status bar -->260  <div class="status-bar">261    10:13262    <div class="status-right">263      <!-- tiny placeholders for status icons -->264      <svg width="42" height="42" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="rgba(255,255,255,0.85)"/></svg>265      <svg width="42" height="42" viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2" fill="rgba(255,255,255,0.85)"/></svg>266      <svg width="42" height="42" viewBox="0 0 24 24"><path d="M3 18h18v2H3zM5 14h14v2H5zM7 10h10v2H7zM9 6h6v2H9z" fill="rgba(255,255,255,0.85)"/></svg>267      <svg width="42" height="42" viewBox="0 0 24 24"><path d="M18 7V3H6v4H3v14h18V7h-3zM8 5h8v2H8V5z" fill="rgba(255,255,255,0.85)"/></svg>268      <svg width="42" height="42" viewBox="0 0 24 24"><path d="M3 12l18-9-9 18-2-7z" fill="rgba(255,255,255,0.85)"/></svg>269      <svg width="42" height="42" viewBox="0 0 24 24"><path d="M18 7h-2V5a4 4 0 10-8 0v2H6a2 2 0 00-2 2v9a2 2 0 002 2h12a2 2 0 002-2V9a2 2 0 00-2-2zm-8-2a2 2 0 114 0v2h-4V5z" fill="rgba(255,255,255,0.85)"/></svg>270    </div>271  </div>272 273  <!-- App bar -->274  <div class="app-bar">275    <div class="back">276      <svg class="icon gray" viewBox="0 0 24 24"><path d="M15.5 5l-7 7 7 7" stroke="#5f6368" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>277    </div>278    <div class="spacer"></div>279    <div class="icon-btn">280      <svg class="icon" viewBox="0 0 24 24"><path d="M21 21l-4.3-4.3M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"/></svg>281    </div>282    <div class="icon-btn">283      <svg class="icon" viewBox="0 0 24 24"><path d="M7 7h14l-2 10H7L5 3H2" stroke="#2f7d45" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/><circle cx="9" cy="21" r="1.6" fill="#2f7d45"/><circle cx="17" cy="21" r="1.6" fill="#2f7d45"/></svg>284    </div>285    <div class="icon-btn">286      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 20a8 8 0 0116 0" /></svg>287    </div>288  </div>289 290  <!-- Product hero image -->291  <div class="image-area">292    <div class="img-ph">[IMG: Toblerone Milk Chocolate]</div>293    <div class="dots">294      <div class="dot active"></div>295      <div class="dot"></div>296      <div class="dot"></div>297    </div>298  </div>299 300  <!-- Offer and price -->301  <div class="price-offer">302    <div class="offer">303      <svg class="badge" viewBox="0 0 24 24">304        <path d="M12 2l2.1 3.9L18 7l-3 3 .7 4-3.7-2-3.7 2 .7-4-3-3 3.9-1.1L12 2z" fill="#ff8a00"/>305      </svg>306      ₹ 30.00 OFF307    </div>308    <div class="price-side">309      <div class="brand-price">DMart ₹ 245.00</div>310      <div class="mrp">MRP ₹ 275.00</div>311      <div class="tax">(MRP inclusive of all taxes)</div>312    </div>313  </div>314 315  <!-- Variant -->316  <div class="section">317    <div class="section-title">Variant</div>318    <div class="variant-btn">100 gm</div>319    <div class="per-unit">(₹ 2.45 / 1 gm)</div>320  </div>321 322  <!-- Tabs -->323  <div class="tabs">324    <div class="tab active">Description</div>325    <div class="tab">Disclaimer</div>326    <div class="tab">Country Of Origin</div>327  </div>328 329  <!-- Content -->330  <div class="content">331    <div class="h3">Overview</div>332    <div class="p">333      Toblerone Milk Chocolate is a classic Toblerone milk chocolate in the distinctive beige packaging is a combination of the finest Swiss milk chocolate with honey and almond nougat. Toblerone milk chocolate is available as a plate, mini, bundle and bar. This iconic triangular chocolate from Switzerland. It is an ideal treat for sharing and snacking while travelling or at home.334    </div>335 336    <div class="h3">Ingredients</div>337    <div class="p">338      Sugar, Whole Milk Powder, Cocoa Butter, Cocoa Mass, Honey, Milk Fat, Almonds, Emulsifier (Soya Lecithin), Egg White, Flavouring (Vanillin), Milk Chocolate, and Milk Solids.339    </div>340 341    <div class="h3">Disclaimer</div>342    <div class="p">343      - Allergen advice: Contains milk, tree nuts (almonds), soy and egg344    </div>345  </div>346 347  <!-- Bottom Add to Cart -->348  <div class="bottom-bar">349    <button class="cta">350      <svg class="cart" viewBox="0 0 24 24"><path d="M7 7h14l-2 10H7L5 3H2" stroke="#fff" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/><circle cx="9" cy="21" r="1.6" fill="#fff"/><circle cx="17" cy="21" r="1.6" fill="#fff"/></svg>351      ADD TO CART352    </button>353  </div>354 355  <div class="gesture"></div>356</div>357</body>358</html>