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 - Offer</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    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Header */18  .topbar {19    background: #11a6aa;20    height: 180px;21    padding: 40px 36px 28px 36px;22    box-sizing: border-box;23    color: #fff;24  }25  .topbar .row {26    display: flex;27    align-items: center;28    justify-content: space-between;29  }30  .left-group, .right-group { display: flex; align-items: center; gap: 28px; }31  .icon-btn {32    width: 72px; height: 72px; border-radius: 36px;33    display: flex; align-items: center; justify-content: center;34    background: rgba(255,255,255,0.0);35  }36  .icon-white { fill: none; stroke: #ffffff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }37  .icon-white-fill { fill: #ffffff; }38 39  /* Content area */40  .content {41    position: absolute;42    top: 180px;43    left: 0;44    right: 0;45    bottom: 190px; /* leave room for footer bar */46    overflow: hidden;47  }48  .scroll {49    height: 100%;50    overflow-y: auto;51    padding: 28px 40px 80px 40px;52    box-sizing: border-box;53  }54 55  .price-row {56    display: flex;57    align-items: center;58    gap: 18px;59    margin-top: 12px;60  }61  .price {62    font-size: 64px; font-weight: 700;63  }64  .mrp {65    font-size: 40px; color: #7a7a7a; text-decoration: line-through;66  }67  .off {68    font-size: 40px; color: #0ea3a7; font-weight: 600;69  }70  .tax-note { color: #7b7b7b; margin-top: 8px; font-size: 34px; }71 72  .badge {73    display: inline-flex;74    align-items: center;75    gap: 14px;76    padding: 8px 14px;77    background: #E0E0E0;78    border: 1px solid #BDBDBD;79    color: #4b4b4b;80    border-radius: 8px;81    font-size: 30px;82  }83 84  /* Promo box */85  .promo {86    margin-top: 26px;87    border: 4px solid #1bbcc1;88    border-radius: 12px;89    padding: 24px;90  }91  .promo .headline {92    display: flex; align-items: center; gap: 16px;93    font-size: 42px; color: #1aaeb2; font-weight: 600;94    margin-bottom: 18px;95  }96  .promo .headline .amount { color: #12a6aa; font-weight: 800; }97  .table-box {98    border: 4px solid #2db7bb;99    border-radius: 6px;100    overflow: hidden;101  }102  .table-header {103    background: #f4fbfb;104    padding: 16px;105    text-align: center;106    font-size: 34px;107    color: #666;108    border-bottom: 3px solid #2db7bb;109  }110  .grid {111    display: grid;112    grid-template-columns: 1.2fr 1fr 1fr 1fr;113    border-top: none;114  }115  .cell {116    border-right: 3px solid #2db7bb;117    padding: 18px;118    min-height: 120px;119    display: flex; align-items: center; justify-content: center;120    text-align: center;121    font-size: 36px; color: #555;122  }123  .cell:last-child { border-right: none; }124  .values {125    display: grid;126    grid-template-columns: 1.2fr 1fr 1fr 1fr;127    border-top: 3px solid #2db7bb;128  }129  .val {130    padding: 22px;131    text-align: center;132    font-size: 40px;133    font-weight: 700;134    color: #222;135    border-right: 3px solid #2db7bb;136  }137  .val:last-child { border-right: none; color: #12a6aa; }138  .promo-foot {139    color: #8a8a8a; font-size: 30px; margin-top: 10px;140  }141  .promo-foot a { color: #1aaeb2; text-decoration: none; }142 143  /* Offers */144  .offers {145    margin-top: 32px;146    border-top: 10px solid #efefef;147    padding-top: 32px;148  }149  .offers .title {150    display: flex; align-items: center; gap: 20px; font-size: 44px; font-weight: 700;151  }152  .offer-desc { margin-top: 18px; color: #444; font-size: 36px; }153  .offer-sub { margin-top: 8px; color: #9a9a9a; font-size: 32px; }154  .coupon-row {155    display: flex; align-items: center; gap: 24px; margin-top: 22px;156  }157  .coupon {158    border: 3px dashed #1bbcc1;159    color: #0ea3a7;160    padding: 18px 28px;161    border-radius: 18px;162    font-size: 36px; font-weight: 700;163    background: #f2ffff;164  }165  .tap-copy { color: #b3b3b3; font-size: 34px; }166  .tnc { color: #0ea3a7; font-weight: 700; float: right; font-size: 34px; text-decoration: none; }167 168  /* Info banner */169  .info-card {170    margin-top: 32px;171    border-top: 10px solid #efefef;172    border-bottom: 10px solid #efefef;173    padding: 24px 0;174  }175  .info-inner {176    background: #ffffff;177    border: 1px solid #e6e6e6;178    border-left: 5px solid #18b2b5;179    border-right: 5px solid #18b2b5;180    padding: 28px;181    display: flex; gap: 22px; align-items: flex-start;182  }183  .info-text { font-size: 34px; color: #4c4c4c; }184 185  /* Key features */186  .key {187    padding-top: 30px;188  }189  .key h3 { margin: 0; font-size: 46px; }190  .list { margin-top: 22px; color: #7a7a7a; font-size: 36px; line-height: 1.6; }191  .details-link { margin-top: 26px; color: #1aaeb2; font-weight: 600; font-size: 36px; text-decoration: none; display: inline-flex; align-items: center; gap: 16px; }192 193  /* Footer CTAs */194  .footer {195    position: absolute;196    height: 190px;197    left: 0; right: 0; bottom: 0;198    display: flex;199    box-shadow: 0 -2px 10px rgba(0,0,0,0.06);200    background: #fff;201  }202  .btn {203    flex: 1;204    display: flex; align-items: center; justify-content: center;205    font-size: 44px; font-weight: 800; letter-spacing: 1px;206  }207  .btn-cart { color: #ff7a00; background: linear-gradient(0deg, #fff, #fff); border-right: 1px solid #f0f0f0; }208  .btn-buy { color: #ffffff; background: linear-gradient(90deg, #ff7a00, #ff3366); }209 210  /* Utility */211  .muted { color: #9e9e9e; }212</style>213</head>214<body>215<div id="render-target">216  <!-- Top Bar -->217  <div class="topbar">218    <div class="row">219      <div class="left-group">220        <div class="icon-btn">221          <svg width="44" height="44" viewBox="0 0 48 48" class="icon-white">222            <path d="M30 8 L14 24 L30 40"></path>223          </svg>224        </div>225      </div>226      <div class="right-group">227        <div class="icon-btn" title="Search">228          <svg width="48" height="48" viewBox="0 0 48 48" class="icon-white">229            <circle cx="22" cy="22" r="12"></circle>230            <path d="M33 33 L42 42"></path>231          </svg>232        </div>233        <div class="icon-btn" title="Cart">234          <svg width="48" height="48" viewBox="0 0 48 48" class="icon-white">235            <path d="M6 10 H12 L16 32 H36 L40 18 H18"></path>236            <circle cx="20" cy="38" r="2.8" class="icon-white-fill"></circle>237            <circle cx="34" cy="38" r="2.8" class="icon-white-fill"></circle>238          </svg>239        </div>240      </div>241    </div>242  </div>243 244  <!-- Content -->245  <div class="content">246    <div class="scroll">247      <div class="badge" style="width: 210px;">248        <div style="width: 40px; height: 40px; border-radius: 20px; background:#12a6aa;"></div>249        <span>[IMG: Made in India badge]</span>250      </div>251 252      <div class="price-row">253        <div class="price">₹649</div>254        <div class="mrp">MRP: ₹899</div>255        <div class="off">27% off</div>256      </div>257      <div class="tax-note">Inclusive of all taxes</div>258 259      <!-- Promo Box -->260      <div class="promo">261        <div class="headline">262          <svg width="38" height="38" viewBox="0 0 24 24" style="stroke:#12a6aa; fill:none; stroke-width:2">263            <path d="M12 2l2.39 4.84L20 8l-4 3.9.95 5.6L12 15.9 7.05 17.5 8 11.9 4 8l5.61-1.16z"></path>264          </svg>265        <span>Get this for as low as: <span class="amount">₹573</span></span>266        </div>267 268        <div class="table-box">269          <div class="table-header">Applicable for All Users</div>270          <div class="grid">271            <div class="cell">Original Price</div>272            <div class="cell">Discount by<br><b>CB+</b></div>273            <div class="cell">Use Coupon<br><b>MYSHOPCLUES</b></div>274            <div class="cell">Deal Price</div>275          </div>276          <div class="values">277            <div class="val">₹649</div>278            <div class="val">( ₹11 )</div>279            <div class="val">( ₹65 )</div>280            <div class="val">= ₹573</div>281          </div>282        </div>283        <div class="promo-foot">*All discounts can avail in cart page | <a href="#">Earn CluesBucks+</a>!</div>284      </div>285 286      <!-- Offers -->287      <div class="offers">288        <div class="title">289          <svg width="44" height="44" viewBox="0 0 24 24" style="stroke:#12a6aa; fill:none; stroke-width:2">290            <path d="M20 10l-8 8-8-8V6h6l2-2 2 2h6z"></path>291          </svg>292          <span>1 Offers available for you</span>293          <a class="tnc" href="#">T&C</a>294        </div>295        <div class="offer-desc">Get Extra 10 percent off on Prepaid Orders</div>296        <div class="offer-sub">Use code "MYSHOPCLUES"</div>297        <div class="coupon-row">298          <div class="coupon">MYSHOPCLUES</div>299          <div class="tap-copy">Tap to copy</div>300        </div>301      </div>302 303      <!-- Info banner -->304      <div class="info-card">305        <div class="info-inner">306          <svg width="56" height="56" viewBox="0 0 24 24" style="stroke:#18b2b5; fill:none; stroke-width:2">307            <path d="M4 12a8 8 0 0 1 13.9-5.66"></path>308            <path d="M20 12a8 8 0 0 1-13.9 5.66"></path>309            <path d="M4 4v4h4"></path>310            <path d="M20 20v-4h-4"></path>311          </svg>312          <div class="info-text">313            Free Replacement for size-related issues: You can replace the product for free within 10 days of order delivery, if it does not fit your size314          </div>315        </div>316      </div>317 318      <!-- Key Features -->319      <div class="key">320        <h3>Key Feature</h3>321        <div class="list">322          Product id: 151324261<br>323          • Color : Black<br>324          • Upper Material : Faux Leather<br>325          • Casual Shoes Type : Sneakers326        </div>327        <a class="details-link" href="#">328          View all details329          <svg width="28" height="28" viewBox="0 0 24 24" style="stroke:#1aaeb2; fill:none; stroke-width:2">330            <path d="M8 5l8 7-8 7"></path>331          </svg>332        </a>333      </div>334    </div>335  </div>336 337  <!-- Footer CTA -->338  <div class="footer">339    <div class="btn btn-cart">ADD TO CART</div>340    <div class="btn btn-buy">BUY NOW</div>341  </div>342</div>343</body>344</html>