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 - Daawat Super Basmati Rice</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif;13    color: #212121;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #ffffff;21  }22 23  /* Layout helpers */24  .container {25    padding: 0 48px;26  }27 28  /* Overlay action icons (wishlist/share) */29  .overlay-actions {30    position: absolute;31    right: 32px;32    top: 220px;33    display: flex;34    flex-direction: column;35    gap: 28px;36    z-index: 5;37  }38  .icon-btn {39    width: 72px;40    height: 72px;41    border-radius: 36px;42    background: #ffffffcc;43    display: flex;44    align-items: center;45    justify-content: center;46    box-shadow: 0 2px 8px rgba(0,0,0,0.1);47  }48  .icon {49    width: 40px;50    height: 40px;51    color: #424242;52  }53 54  /* Product image */55  .image-wrap {56    padding-top: 40px;57  }58  .product-image {59    width: calc(100% - 96px);60    height: 1180px;61    margin: 0 auto;62    background: #E0E0E0;63    border: 1px solid #BDBDBD;64    border-radius: 18px;65    display: flex;66    align-items: center;67    justify-content: center;68    color: #757575;69    font-size: 40px;70    text-align: center;71  }72  .pager-dots {73    display: flex;74    justify-content: center;75    gap: 16px;76    margin: 24px 0 8px;77  }78  .pager-dots span {79    width: 18px;80    height: 18px;81    border-radius: 9px;82    background: #cfcfcf;83    display: inline-block;84  }85  .pager-dots span.active {86    background: #9e9e9e;87  }88 89  /* Title */90  .title-row {91    margin-top: 24px;92    display: flex;93    align-items: flex-start;94    gap: 12px;95  }96  .title-row .brand {97    font-weight: 700;98  }99  .title {100    font-size: 44px;101    line-height: 1.3;102  }103 104  /* Ratings row */105  .ratings-row {106    margin-top: 12px;107    display: flex;108    align-items: center;109    gap: 20px;110  }111  .stars {112    display: flex;113    gap: 6px;114    align-items: center;115  }116  .star {117    width: 32px;118    height: 32px;119    color: #2e7d32; /* green */120  }121  .star.grey {122    color: #BDBDBD;123  }124  .link {125    color: #1976D2;126    font-size: 36px;127  }128  .assured {129    margin-left: auto;130    display: inline-flex;131    align-items: center;132    gap: 8px;133    color: #0D47A1;134    font-weight: 600;135    font-size: 30px;136    background: #E3F2FD;137    padding: 8px 14px;138    border-radius: 999px;139  }140  .assured .badge {141    width: 30px;142    height: 30px;143    color: #0D47A1;144  }145 146  /* Price row */147  .price-row {148    margin-top: 28px;149    display: flex;150    align-items: baseline;151    gap: 18px;152    flex-wrap: wrap;153  }154  .offer {155    color: #2e7d32;156    font-weight: 800;157    font-size: 48px;158  }159  .mrp {160    color: #9e9e9e;161    text-decoration: line-through;162    font-size: 42px;163  }164  .price {165    font-size: 56px;166    font-weight: 800;167  }168 169  /* Quantity */170  .qty-header {171    margin-top: 36px;172    display: flex;173    align-items: center;174    gap: 8px;175    font-size: 40px;176  }177  .qty-header .value {178    font-weight: 700;179  }180  .qty-header .chev {181    margin-left: auto;182    width: 36px;183    height: 36px;184    color: #616161;185  }186 187  .qty-options {188    margin-top: 24px;189    display: flex;190    gap: 28px;191  }192  .qty-card {193    flex: 1;194    min-width: 0;195    border: 2px solid #E0E0E0;196    border-radius: 16px;197    padding: 28px;198    background: #FAFAFA;199  }200  .qty-card.selected {201    border-color: #1976D2;202    background: #FFFFFF;203    box-shadow: 0 2px 0 0 rgba(25, 118, 210, 0.1);204  }205  .qty-card .tag {206    position: absolute;207  }208  .qty-card .label {209    font-size: 40px;210    font-weight: 700;211    margin-bottom: 10px;212    color: #1976D2;213  }214  .qty-card p {215    margin: 0;216    font-size: 38px;217    color: #424242;218  }219  .qty-card .ribbon {220    position: absolute;221    transform: translateY(-50%);222    left: 40px;223    top: -2px;224    background: #2fb9a8;225    color: #fff;226    font-weight: 700;227    font-size: 28px;228    padding: 8px 14px;229    border-radius: 10px;230  }231  .qty-card.wrap {232    position: relative;233  }234 235  /* Floating help/chat button */236  .fab {237    position: absolute;238    right: 40px;239    bottom: 290px;240    width: 120px;241    height: 120px;242    border-radius: 60px;243    background: #ffea00;244    border: 8px solid #1976D2;245    display: flex;246    align-items: center;247    justify-content: center;248    box-shadow: 0 8px 20px rgba(0,0,0,0.2);249    z-index: 9;250  }251  .fab .f {252    font-weight: 900;253    color: #1976D2;254    font-size: 60px;255    line-height: 1;256  }257 258  /* Bottom bar */259  .bottom-bar {260    position: absolute;261    left: 0;262    right: 0;263    bottom: 0;264    height: 168px;265    display: flex;266    border-top: 1px solid #E0E0E0;267    background: #fff;268  }269  .bottom-bar .btn {270    flex: 1;271    display: flex;272    align-items: center;273    justify-content: center;274    font-size: 46px;275    font-weight: 800;276  }277  .bottom-bar .btn.buy {278    background: #FFC107;279    color: #212121;280  }281  .bottom-bar .btn.cart {282    background: #ffffff;283    color: #212121;284  }285 286  /* Provide space for bottom bar */287  .spacer {288    height: 220px;289  }290</style>291</head>292<body>293<div id="render-target">294 295  <!-- Action icons on image -->296  <div class="overlay-actions">297    <div class="icon-btn" aria-label="Wishlist">298      <svg class="icon" viewBox="0 0 24 24">299        <path fill="none" stroke="currentColor" stroke-width="2" d="M12 21s-7-4.6-9.2-8.2C1 10 2.2 6.8 5.4 6.2 7.2 5.8 9 6.6 10 8c1-1.4 2.8-2.2 4.6-1.8 3.2.6 4.4 3.8 2.6 6.6C19 16.4 12 21 12 21z"/>300      </svg>301    </div>302    <div class="icon-btn" aria-label="Share">303      <svg class="icon" viewBox="0 0 24 24">304        <path fill="currentColor" d="M18 16.1c-.8 0-1.5.3-2 .8L8.9 12c.1-.3.1-.6.1-.9s0-.6-.1-.9l7-4.1c.6.5 1.3.8 2.1.8 1.9 0 3.4-1.5 3.4-3.4S19.9 0 18 0s-3.4 1.5-3.4 3.4c0 .3 0 .6.1.9l-7 4.1c-.6-.5-1.3-.8-2.1-.8C3.7 7.6 2.2 9.1 2.2 11s1.5 3.4 3.4 3.4c.8 0 1.5-.3 2.1-.8l7.1 4.1c0 .2-.1.5-.1.8 0 1.9 1.5 3.4 3.4 3.4s3.4-1.5 3.4-3.4S19.9 16.1 18 16.1z"/>305      </svg>306    </div>307  </div>308 309  <!-- Product visual -->310  <div class="image-wrap container">311    <div class="product-image">[IMG: Daawat Basmati Rice Bag]</div>312    <div class="pager-dots">313      <span></span>314      <span class="active"></span>315      <span></span>316      <span></span>317      <span></span>318    </div>319  </div>320 321  <!-- Details -->322  <div class="container">323    <div class="title-row">324      <div class="title">325        <span class="brand">Daawat</span> Super Basmati Rice (Long Grain) (1 kg)326      </div>327    </div>328 329    <div class="ratings-row">330      <div class="stars" aria-label="4.5 out of 5 stars">331        <!-- 4 filled stars -->332        <svg class="star" viewBox="0 0 24 24"><path fill="currentColor" d="M12 17.3l-6.2 3.7 1.6-6.9-5.4-4.6 7.1-.6L12 2l2.9 6.9 7.1.6-5.4 4.6 1.6 6.9z"/></svg>333        <svg class="star" viewBox="0 0 24 24"><path fill="currentColor" d="M12 17.3l-6.2 3.7 1.6-6.9-5.4-4.6 7.1-.6L12 2l2.9 6.9 7.1.6-5.4 4.6 1.6 6.9z"/></svg>334        <svg class="star" viewBox="0 0 24 24"><path fill="currentColor" d="M12 17.3l-6.2 3.7 1.6-6.9-5.4-4.6 7.1-.6L12 2l2.9 6.9 7.1.6-5.4 4.6 1.6 6.9z"/></svg>335        <svg class="star" viewBox="0 0 24 24"><path fill="currentColor" d="M12 17.3l-6.2 3.7 1.6-6.9-5.4-4.6 7.1-.6L12 2l2.9 6.9 7.1.6-5.4 4.6 1.6 6.9z"/></svg>336        <!-- one grey star (approx half) -->337        <svg class="star grey" viewBox="0 0 24 24"><path fill="currentColor" d="M12 17.3l-6.2 3.7 1.6-6.9-5.4-4.6 7.1-.6L12 2l2.9 6.9 7.1.6-5.4 4.6 1.6 6.9z"/></svg>338      </div>339      <a class="link" href="#">675 ratings</a>340      <div class="assured">341        <svg class="badge" viewBox="0 0 24 24">342          <path fill="currentColor" d="M12 2l8 4v6c0 5-3.5 9.5-8 10-4.5-.5-8-5-8-10V6l8-4z"/>343          <path fill="#fff" d="M11 7h2v10h-2zM7 11h10v2H7z"/>344        </svg>345        Plus Assured346      </div>347    </div>348 349    <div class="price-row">350      <div class="offer">25% off</div>351      <div class="mrp">₹220</div>352      <div class="price">₹164</div>353    </div>354 355    <div class="qty-header">356      Quantity: <span class="value">1 kg</span>357      <svg class="chev" viewBox="0 0 24 24">358        <path fill="currentColor" d="M7 15l5-5 5 5H7z"/>359      </svg>360    </div>361 362    <div class="qty-options">363      <div class="qty-card selected">364        <div class="label">1 kg</div>365        <p>₹164</p>366      </div>367      <div class="qty-card wrap">368        <div class="ribbon">POPULAR</div>369        <div class="label" style="color:#424242;">5 kg</div>370        <p>₹821</p>371      </div>372    </div>373 374    <div class="spacer"></div>375  </div>376 377  <!-- Floating help/chat button -->378  <div class="fab" aria-label="Support">379    <div class="f">f</div>380  </div>381 382  <!-- Bottom action bar -->383  <div class="bottom-bar">384    <div class="btn cart">Add to cart</div>385    <div class="btn buy">Buy now</div>386  </div>387 388</div>389</body>390</html>