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 - Navy Blue Vest</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #111;17  }18 19  /* Status bar */20  .status-bar {21    height: 80px;22    padding: 0 32px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    font-size: 30px;27    color: #555;28  }29  .status-icons {30    display: flex;31    align-items: center;32    gap: 18px;33  }34  .dot { width: 10px; height: 10px; background:#777; border-radius:50%; display:inline-block; }35 36  /* Header with back + actions */37  .header {38    height: 96px;39    padding: 0 24px;40    display: flex;41    align-items: center;42    border-bottom: 1px solid #eee;43  }44  .header-left {45    display: flex;46    align-items: center;47    gap: 18px;48    flex: 1;49  }50  .price-line {51    font-size: 38px;52    font-weight: 600;53    display: flex;54    align-items: baseline;55    gap: 12px;56  }57  .off {58    font-size: 32px;59    color: #1a9d45;60    font-weight: 700;61  }62  .actions {63    display: flex;64    align-items: center;65    gap: 28px;66  }67  .icon {68    width: 44px;69    height: 44px;70    display: inline-flex;71  }72  .icon svg { width: 100%; height: 100%; fill: none; stroke: #111; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }73 74  /* Promo banner */75  .promo {76    height: 140px;77    background: linear-gradient(90deg, #f6e49d 0%, #f3c8d6 100%);78    display: flex;79    align-items: center;80    justify-content: space-between;81    padding: 0 28px;82  }83  .promo .text {84    font-size: 36px;85    font-weight: 700;86    color: #111;87    line-height: 1.2;88  }89  .promo .sub {90    font-size: 26px;91    font-weight: 500;92  }93  .code-box {94    background: #ffffff;95    border: 2px solid #111;96    border-radius: 12px;97    padding: 16px 22px;98    text-align: center;99    min-width: 250px;100  }101  .code-box .label {102    font-size: 24px;103    font-weight: 700;104  }105  .code-box .code {106    font-size: 32px;107    font-weight: 900;108    letter-spacing: 1px;109  }110 111  /* Product image placeholder */112  .img-wrap {113    position: relative;114    width: 1080px;115    height: 1500px;116    background: #F6F7F9;117    border-bottom: 1px solid #eee;118    display: flex;119    align-items: center;120    justify-content: center;121  }122  .img-ph {123    width: 1000px;124    height: 1400px;125    background: #E0E0E0;126    border: 1px solid #BDBDBD;127    display: flex;128    align-items: center;129    justify-content: center;130    color: #555;131    font-size: 40px;132    text-align: center;133    border-radius: 8px;134  }135  .view-similar {136    position: absolute;137    right: 28px;138    bottom: 36px;139    background: #ffffff;140    padding: 18px 26px;141    border-radius: 28px;142    box-shadow: 0 6px 18px rgba(0,0,0,0.12);143    display: flex;144    align-items: center;145    gap: 12px;146    font-size: 28px;147    font-weight: 600;148    color: #333;149    border: 1px solid #eee;150  }151  .view-similar .icon svg { stroke: #333; }152 153  /* Dots */154  .dots {155    display: flex;156    gap: 12px;157    justify-content: center;158    align-items: center;159    height: 54px;160  }161  .dot-pg {162    width: 14px; height: 14px; border-radius: 50%;163    background: #C8C8C8;164  }165  .dot-pg.active { background: #666; }166 167  /* Product info */168  .info {169    background: #fff;170    padding: 24px 28px 220px; /* leave space for sticky bar */171  }172  .tags {173    color: #3d6bfd;174    font-weight: 700;175    letter-spacing: 0.5px;176    font-size: 26px;177  }178  .brand-row {179    margin-top: 18px;180    display: flex;181    align-items: flex-start;182    justify-content: space-between;183  }184  .brand-name {185    font-size: 42px;186    font-weight: 800;187    color: #111;188  }189  .view-brand {190    font-size: 30px;191    color: #ff6f91;192    font-weight: 700;193  }194  .product-title {195    margin-top: 6px;196    font-size: 30px;197    color: #666;198  }199 200  /* Sticky Add to Bag */201  .sticky {202    position: absolute;203    left: 0;204    right: 0;205    bottom: 88px; /* keep above gesture bar */206    padding: 0 28px;207  }208  .sticky-inner {209    background: #fff;210    border: 2px solid #e6e6e6;211    border-radius: 18px;212    padding: 18px;213    box-shadow: 0 8px 22px rgba(0,0,0,0.08);214    display: flex;215    align-items: center;216    gap: 18px;217    height: 130px;218  }219  .wish {220    width: 130px;221    height: 94px;222    border: 2px solid #111;223    border-radius: 12px;224    display: flex;225    align-items: center;226    justify-content: center;227  }228  .wish .icon svg { stroke: #111; }229  .cta {230    flex: 1;231    height: 94px;232    background: #000;233    color: #fff;234    border-radius: 12px;235    display: flex;236    align-items: center;237    justify-content: center;238    font-size: 36px;239    font-weight: 800;240    letter-spacing: 0.5px;241  }242 243  /* Gesture bar */244  .gesture {245    position: absolute;246    bottom: 18px;247    left: 50%;248    transform: translateX(-50%);249    width: 340px;250    height: 10px;251    background: #cfcfcf;252    border-radius: 10px;253  }254</style>255</head>256<body>257<div id="render-target">258  <!-- Status Bar -->259  <div class="status-bar">260    <div class="time">12:01</div>261    <div class="status-icons">262      <span class="dot"></span>263      <span class="dot"></span>264      <span class="dot"></span>265      <span class="dot"></span>266      <span class="dot"></span>267    </div>268  </div>269 270  <!-- Header Row -->271  <div class="header">272    <div class="header-left">273      <div class="icon" aria-label="Back">274        <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg>275      </div>276      <div class="price-line">277        <span>₹150</span>278        <span class="off">50% Off</span>279      </div>280    </div>281    <div class="actions">282      <div class="icon" aria-label="Search">283        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><path d="M21 21l-4.3-4.3"/></svg>284      </div>285      <div class="icon" aria-label="Share">286        <svg viewBox="0 0 24 24"><circle cx="6" cy="12" r="2"></circle><circle cx="18" cy="6" r="2"></circle><circle cx="18" cy="18" r="2"></circle><path d="M8 12l8-6M8 12l8 6"/></svg>287      </div>288      <div class="icon" aria-label="Wishlist">289        <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z"/></svg>290      </div>291      <div class="icon" aria-label="Bag">292        <svg viewBox="0 0 24 24"><path d="M6 8h12l-1 12H7L6 8z"></path><path d="M9 8V6a3 3 0 0 1 6 0v2"></path></svg>293      </div>294    </div>295  </div>296 297  <!-- Promo Banner -->298  <div class="promo">299    <div class="text">300      Get Flat 10% off301      <div class="sub">on your first purchase</div>302    </div>303    <div class="code-box">304      <div class="label">Use Code:</div>305      <div class="code">NFFLAT10</div>306    </div>307  </div>308 309  <!-- Product Image Placeholder -->310  <div class="img-wrap">311    <div class="img-ph">[IMG: Navy Blue Vest on Model]</div>312    <div class="view-similar">313      <span class="icon" aria-hidden="true">314        <svg viewBox="0 0 24 24"><rect x="3" y="7" width="10" height="10" rx="2"></rect><rect x="11" y="3" width="10" height="10" rx="2"></rect></svg>315      </span>316      View Similar317    </div>318  </div>319 320  <!-- Pagination Dots -->321  <div class="dots">322    <div class="dot-pg active"></div>323    <div class="dot-pg"></div>324    <div class="dot-pg"></div>325    <div class="dot-pg"></div>326    <div class="dot-pg"></div>327  </div>328 329  <!-- Product Info -->330  <div class="info">331    <div class="tags">BESTSELLER | EXPRESS SHIPPING</div>332    <div class="brand-row">333      <div>334        <div class="brand-name">Bewakoof</div>335        <div class="product-title">Navy Blue Vest</div>336      </div>337      <div class="view-brand">View Brand</div>338    </div>339  </div>340 341  <!-- Sticky Add to Bag -->342  <div class="sticky">343    <div class="sticky-inner">344      <div class="wish" aria-label="Add to Wishlist">345        <span class="icon">346          <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z"/></svg>347        </span>348      </div>349      <div class="cta">Add to Bag</div>350    </div>351  </div>352 353  <!-- Gesture Bar -->354  <div class="gesture"></div>355</div>356</body>357</html>