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 - Add to Cart Section</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, 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  /* Status bar */18  .status-bar {19    height: 96px;20    background: #000;21    color: #fff;22    display: flex;23    align-items: center;24    padding: 0 36px;25    font-weight: 600;26    letter-spacing: 0.5px;27    box-sizing: border-box;28  }29  .status-time { font-size: 44px; }30  .status-icons {31    margin-left: auto;32    display: flex;33    align-items: center;34    gap: 28px;35  }36  .dot { width: 12px; height: 12px; background: #fff; border-radius: 50%; opacity: .8; }37  .icon-pill {38    width: 34px; height: 34px; border: 2px solid #fff; border-radius: 8px; opacity: .9;39  }40  .icon-circle { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; opacity: .9; }41  .battery {42    width: 56px; height: 28px; border: 3px solid #fff; border-radius: 6px; position: relative;43  }44  .battery::after {45    content: ""; position: absolute; right: -8px; top: 8px; width: 6px; height: 12px; background: #fff; border-radius: 2px;46  }47  .battery-fill { width: 34px; height: 100%; background: #fff; }48 49  /* Content area */50  .page {51    padding: 0 36px 36px;52    box-sizing: border-box;53  }54 55  /* Size grid */56  .sizes-grid {57    display: grid;58    grid-template-columns: repeat(4, 1fr);59    gap: 24px;60    margin-top: 24px;61  }62  .size-box {63    height: 128px;64    border: 2px solid #D5D5D5;65    display: flex;66    align-items: center;67    justify-content: center;68    font-size: 44px;69    border-radius: 8px;70    background: #fff;71  }72  .size-box.sold {73    position: relative;74    background: #fdecef;75    border-color: #e6b9c0;76    color: #e8838d;77  }78  .size-box.sold::before {79    content: "";80    position: absolute;81    left: 0; top: 0; right: 0; bottom: 0;82    background: linear-gradient(135deg, transparent 49%, rgba(230,150,160,.4) 50%, transparent 51%);83    border-radius: 8px;84    pointer-events: none;85  }86  .sold-label {87    font-size: 32px;88    color: #7a7a7a;89    margin: 10px 0 10px 6px;90  }91 92  hr.sep { border: none; border-top: 2px solid #e6e6e6; margin: 36px 0; }93 94  /* Free Delivery section */95  .section-title {96    font-size: 56px;97    font-weight: 700;98    margin: 18px 0 12px;99  }100  .section-sub {101    font-size: 36px;102    color: #555;103    line-height: 1.4;104    margin-bottom: 28px;105  }106 107  .pincode {108    height: 120px;109    background: #f3f3f3;110    border: 2px solid #e7e7e7;111    border-radius: 8px;112    display: flex;113    align-items: center;114    padding: 0 28px;115    box-sizing: border-box;116    margin-bottom: 28px;117  }118  .pincode .placeholder { color: #b7b7b7; font-size: 40px; }119  .pincode .check {120    margin-left: auto;121    color: #2b7a46;122    font-weight: 700;123    font-size: 40px;124  }125 126  .cart-row {127    display: grid;128    grid-template-columns: 220px 1fr 120px;129    gap: 24px;130    align-items: center;131    margin-bottom: 36px;132  }133  .qty {134    height: 120px;135    border: 2px solid #e7e7e7;136    border-radius: 8px;137    display: flex;138    align-items: center;139    padding: 0 28px;140    font-size: 40px;141    color: #333;142    background: #f7f7f7;143  }144  .qty .dd {145    margin-left: auto;146    width: 28px; height: 28px;147  }148  .add-cart {149    height: 120px;150    background: #2f6b3b;151    color: #fff;152    border-radius: 8px;153    display: flex;154    align-items: center;155    justify-content: center;156    gap: 22px;157    font-size: 42px;158    font-weight: 700;159    letter-spacing: 1px;160    text-transform: uppercase;161  }162  .add-cart svg { width: 52px; height: 52px; fill: #fff; }163  .wish {164    height: 120px;165    border: 2px solid #e7e7e7;166    border-radius: 8px;167    display: flex;168    align-items: center;169    justify-content: center;170    background: #f7f7f7;171  }172  .wish svg { width: 44px; height: 44px; stroke: #777; fill: none; stroke-width: 36; }173 174  /* Accordions */175  .accordion {176    border-top: 2px solid #e6e6e6;177    padding: 30px 0;178  }179  .accordion + .accordion { border-top: none; border-bottom: 2px solid #e6e6e6; }180  .acc-row {181    display: flex; align-items: center;182    font-size: 46px; font-weight: 800; letter-spacing: 1px;183  }184  .acc-row .plus { margin-left: auto; }185  .acc-row .plus svg { width: 40px; height: 40px; }186  .muted-link {187    margin-top: 30px;188    font-size: 34px;189    color: #9a9a9a;190    text-decoration: underline;191  }192 193  .recommend {194    text-align: center;195    color: #2f6b3b;196    font-size: 48px;197    font-weight: 800;198    margin: 80px 0 32px;199  }200 201  /* Green banner/footer */202  .green-banner {203    background: #1e5a33;204    padding: 56px 36px 48px;205    color: #fff;206    border-top: 2px solid #e6e6e6;207  }208  .brand-logo {209    width: 100%;210    height: 200px;211    background: rgba(255,255,255,0.06);212    border: 1px solid rgba(255,255,255,0.25);213    display: flex; align-items: center; justify-content: center;214    color: #e0e0e0;215    border-radius: 8px;216    font-size: 40px;217    margin-bottom: 36px;218  }219  .banner-title {220    font-size: 50px;221    font-weight: 800;222    margin-bottom: 10px;223  }224  .banner-sub { font-size: 36px; color: #d6eadc; margin-bottom: 24px; }225  .email-row {226    height: 112px;227    background: rgba(255,255,255,0.15);228    border: 1px solid rgba(255,255,255,0.35);229    border-radius: 8px;230    display: flex; align-items: center;231    padding: 0 24px;232    box-sizing: border-box;233    color: #e9f5ee;234    font-size: 38px;235  }236 237  /* Android pill (visual hint) */238  .nav-pill {239    position: absolute; bottom: 22px; left: 50%;240    width: 300px; height: 10px; background: #d8d8d8;241    border-radius: 8px; transform: translateX(-50%);242  }243</style>244</head>245<body>246<div id="render-target">247 248  <!-- Status bar -->249  <div class="status-bar">250    <div class="status-time">6:40</div>251    <div class="status-icons">252      <div class="icon-pill"></div>253      <div class="icon-circle"></div>254      <div class="icon-pill"></div>255      <div class="dot"></div>256      <div class="battery"><div class="battery-fill"></div></div>257    </div>258  </div>259 260  <div class="page">261    <!-- Sizes grid -->262    <div class="sizes-grid">263      <div class="size-box sold">35</div>264      <div class="size-box">36</div>265      <div class="size-box">37</div>266      <div class="size-box">38</div>267      <div class="size-box">39</div>268      <div class="size-box">40</div>269      <div class="size-box">41</div>270    </div>271    <div class="sold-label">Sold out</div>272 273    <hr class="sep">274 275    <div class="section-title">Free Delivery</div>276    <div class="section-sub">For orders above ₹1000. Delivery in 3–7 working days.</div>277 278    <div class="pincode">279      <div class="placeholder">Enter Pincode</div>280      <div class="check">Check</div>281    </div>282 283    <div class="cart-row">284      <div class="qty">285        <span>Qty</span>286        <span style="margin-left: 18px; font-weight:700;">1</span>287        <svg class="dd" viewBox="0 0 24 24"><path fill="#666" d="M6 9l6 6 6-6z"/></svg>288      </div>289 290      <div class="add-cart">291        <svg viewBox="0 0 24 24">292          <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2S15.9 22 17 22s2-.9 2-2-.9-2-2-2zM7.2 13h9.9c.8 0 1.5-.5 1.7-1.2l1.1-4.8H6.5L5.9 4H3v2h2l3 9z"/>293        </svg>294        <span>Add to Cart</span>295      </div>296 297      <div class="wish">298        <svg viewBox="0 0 24 24">299          <path d="M12 21s-6.7-4.4-9.2-7.6C.6 10.9 2 7.2 5.2 6.7 7.1 6.4 8.8 7.5 9.6 9c.8-1.5 2.5-2.6 4.4-2.3 3.2.5 4.6 4.2 2.4 6.7C18.7 16.6 12 21 12 21z"/>300        </svg>301      </div>302    </div>303 304    <div class="accordion">305      <div class="acc-row">306        <div>MORE ABOUT THE PRODUCT</div>307        <div class="plus">308          <svg viewBox="0 0 24 24"><path fill="#222" d="M10 3h4v18h-4z"/><path fill="#222" d="M3 10h18v4H3z"/></svg>309        </div>310      </div>311    </div>312 313    <div class="accordion">314      <div class="acc-row">315        <div>SHIPPING & RETURNS</div>316        <div class="plus">317          <svg viewBox="0 0 24 24"><path fill="#222" d="M10 3h4v18h-4z"/><path fill="#222" d="M3 10h18v4H3z"/></svg>318        </div>319      </div>320    </div>321 322    <div class="muted-link">IMPORT, MANUFACTURING &amp; PACKAGING INFO</div>323 324    <div class="recommend">Top Sellers recommended for you</div>325  </div>326 327  <div class="green-banner">328    <div class="brand-logo">[IMG: Woodland Logo]</div>329    <div class="banner-title">Always keep exploring more!</div>330    <div class="banner-sub">Get alerts for new arrivals, offers, and more!</div>331    <div class="email-row">Enter email address</div>332  </div>333 334  <div class="nav-pill"></div>335</div>336</body>337</html>