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 - Wireless Mouse</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Inter, Arial, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #121212;15    border-radius: 18px;16    box-shadow: 0 8px 30px rgba(0,0,0,0.35);17    color: #fff;18  }19  .status-bar {20    height: 110px;21    background: #3a3a3a;22    color: #fff;23    display: flex;24    align-items: center;25    padding: 0 36px;26    font-size: 36px;27  }28  .status-right {29    margin-left: auto;30    display: flex;31    align-items: center;32    gap: 26px;33  }34  .app-bar {35    height: 120px;36    background: #1E1E1E;37    display: flex;38    align-items: center;39    padding: 0 30px;40    position: relative;41  }42  .app-actions-left {43    display: flex;44    align-items: center;45    gap: 30px;46  }47  .icon {48    width: 56px;49    height: 56px;50    fill: none;51    stroke: #fff;52    stroke-width: 4;53  }54  .cart-wrap {55    margin-left: auto;56    position: relative;57    width: 72px;58    height: 72px;59    display: flex;60    align-items: center;61    justify-content: center;62    border-radius: 14px;63    border: 2px solid #505050;64  }65  .badge {66    position: absolute;67    top: -6px;68    right: -6px;69    background: #F5A623;70    color: #000;71    width: 40px;72    height: 40px;73    border-radius: 20px;74    font-size: 26px;75    font-weight: 700;76    display: flex;77    align-items: center;78    justify-content: center;79    border: 2px solid #222;80  }81  .image-area {82    position: relative;83    padding: 40px 80px 0 80px;84  }85  .product-image {86    width: 920px;87    height: 1020px;88    background: #E0E0E0;89    border: 1px solid #BDBDBD;90    display: flex;91    align-items: center;92    justify-content: center;93    color: #757575;94    font-size: 40px;95    letter-spacing: 0.5px;96  }97  .chip {98    position: absolute;99    right: 80px;100    top: 60px;101    background: #6B6B6B;102    color: #fff;103    padding: 18px 26px;104    border-radius: 16px;105    font-size: 32px;106    font-weight: 600;107  }108  .dots-bar {109    height: 110px;110    background: #232323;111    display: flex;112    align-items: center;113    justify-content: center;114    gap: 22px;115  }116  .dot {117    width: 22px;118    height: 22px;119    border-radius: 50%;120    background: #3f3f3f;121  }122  .dot.active { background: #F5A623; }123  .content-card {124    position: relative;125    background: #1F1F1F;126    margin: 0 0;127    padding: 44px 60px 220px 60px;128    border-top-left-radius: 42px;129    border-top-right-radius: 42px;130  }131  .title {132    font-size: 46px;133    line-height: 62px;134    font-weight: 800;135    color: #fafafa;136    margin-top: 18px;137    margin-bottom: 24px;138  }139  .price-row {140    display: flex;141    align-items: baseline;142    gap: 24px;143    margin-top: 8px;144    margin-bottom: 22px;145  }146  .price {147    color: #F5A623;148    font-size: 44px;149    font-weight: 800;150  }151  .cut {152    color: #9e9e9e;153    font-size: 34px;154    text-decoration: line-through;155  }156  .offer-pill {157    background: #fff;158    color: #000;159    padding: 12px 20px;160    border-radius: 16px;161    font-weight: 800;162    font-size: 28px;163    border: 2px solid #f0f0f0;164  }165  .meta {166    font-size: 34px;167    color: #d0d0d0;168    margin: 6px 0;169  }170  .meta .label { color: #bdbdbd; }171  .meta .accent { color: #F5C144; font-weight: 700; }172  .stock {173    color: #E53935;174    font-size: 34px;175    margin: 12px 0 26px 0;176    font-weight: 700;177  }178  .import-row {179    display: flex;180    align-items: center;181    gap: 18px;182    margin: 6px 0 12px 0;183    font-size: 34px;184    font-weight: 700;185  }186  .flag {187    width: 56px;188    height: 56px;189    background: #E0E0E0;190    border: 1px solid #BDBDBD;191    border-radius: 28px;192    color: #757575;193    display: flex;194    align-items: center;195    justify-content: center;196    font-size: 22px;197  }198  .delivery {199    color: #4CAF50;200    font-size: 34px;201    font-weight: 800;202    margin: 16px 0 28px 0;203    text-decoration: underline;204  }205  .qty-row {206    display: flex;207    align-items: center;208    gap: 18px;209    margin: 24px 0 18px 0;210  }211  .circle-btn {212    width: 72px;213    height: 72px;214    border-radius: 36px;215    border: 2px solid #7a7a7a;216    display: flex;217    align-items: center;218    justify-content: center;219    background: #2a2a2a;220  }221  .qty-box {222    width: 96px;223    height: 72px;224    border-radius: 14px;225    border: 2px solid #c0c0c0;226    display: flex;227    align-items: center;228    justify-content: center;229    font-size: 34px;230    font-weight: 800;231    color: #fff;232    background: #2a2a2a;233  }234  .divider {235    height: 4px;236    background: #3a3a3a;237    margin: 20px 0 24px 0;238  }239  .bottom-actions {240    position: absolute;241    left: 0;242    right: 0;243    bottom: 84px;244    display: flex;245    align-items: center;246    justify-content: space-between;247    padding: 0 40px;248  }249  .quick-actions {250    display: flex;251    align-items: center;252    gap: 40px;253  }254  .heart {255    width: 80px;256    height: 80px;257    border-radius: 18px;258    background: #1f1f1f;259    border: 2px solid #4a4a4a;260    display: flex;261    align-items: center;262    justify-content: center;263  }264  .share {265    width: 80px;266    height: 80px;267    border-radius: 18px;268    background: #1f1f1f;269    border: 2px solid #4a4a4a;270    display: flex;271    align-items: center;272    justify-content: center;273  }274  .add-btn {275    margin-left: auto;276    background: transparent;277    border: none;278    color: #fff;279    font-size: 44px;280    font-weight: 900;281    letter-spacing: 1px;282  }283  .wish-toast {284    position: absolute;285    left: 110px;286    top: 1500px;287    width: 860px;288    background: #EEEEEE;289    color: #2a2a2a;290    border-radius: 8px;291    box-shadow: 0 6px 20px rgba(0,0,0,0.3);292    padding: 34px 28px;293    text-align: center;294    font-size: 32px;295    font-weight: 700;296    border: 1px solid #dcdcdc;297  }298  .home-indicator {299    position: absolute;300    bottom: 24px;301    left: 50%;302    transform: translateX(-50%);303    width: 360px;304    height: 14px;305    background: #E0E0E0;306    border-radius: 10px;307    opacity: 0.7;308  }309  .heart svg path { fill: #FFC107; stroke: none; }310  .share svg { stroke: #d0d0d0; }311</style>312</head>313<body>314<div id="render-target">315 316  <div class="status-bar">317    <div>8:31</div>318    <div class="status-right">319      <!-- simple status glyphs -->320      <svg width="38" height="38"><circle cx="19" cy="19" r="9" fill="#fff"/></svg>321      <svg width="38" height="38"><circle cx="19" cy="19" r="9" fill="#fff"/></svg>322      <svg width="38" height="38"><rect x="4" y="8" width="30" height="22" fill="#fff"/><rect x="22" y="4" width="8" height="6" fill="#fff"/></svg>323    </div>324  </div>325 326  <div class="app-bar">327    <div class="app-actions-left">328      <!-- Back chevron -->329      <svg class="icon" viewBox="0 0 24 24">330        <path d="M15 4 L7 12 L15 20" stroke-linecap="round" stroke-linejoin="round"/>331      </svg>332      <!-- Hamburger -->333      <svg class="icon" viewBox="0 0 24 24">334        <path d="M3 6 H21 M3 12 H21 M3 18 H21" stroke-linecap="round"/>335      </svg>336    </div>337    <div class="cart-wrap">338      <svg width="44" height="44" viewBox="0 0 24 24" style="stroke:#fff;stroke-width:2;fill:none;">339        <path d="M6 6 H21 L19 14 H8 L6 6 Z" stroke-linejoin="round"/>340        <circle cx="9" cy="19" r="2" fill="#fff"/>341        <circle cx="17" cy="19" r="2" fill="#fff"/>342      </svg>343      <div class="badge">0</div>344    </div>345  </div>346 347  <div class="image-area">348    <div class="product-image">[IMG: Blue Wireless Mouse]</div>349    <div class="chip">1 of 6</div>350  </div>351 352  <div class="dots-bar">353    <span class="dot active"></span>354    <span class="dot"></span>355    <span class="dot"></span>356    <span class="dot"></span>357    <span class="dot"></span>358  </div>359 360  <div class="content-card">361    <div class="title">362      Microsoft Wireless Bluetooth Mouse (2022), Sculpted Design for Ultimate Comfort and Smooth Scrolling, up to 1 Year of Battery Life, 2.4G Range, Sapphire Color363    </div>364 365    <div class="price-row">366      <div class="price">INR 4102.00</div>367      <div class="cut">INR 4626.00</div>368      <div class="offer-pill">11% OFF</div>369    </div>370 371    <div class="meta"><span class="label">By:</span> Microsoft</div>372    <div class="meta"><span class="label">Item Id :</span> <span class="accent">22664154</span></div>373 374    <div class="stock">Only 19 items left in stock.</div>375 376    <div class="import-row">377      <div class="flag">[US]</div>378      <div>Imported from US Store</div>379    </div>380 381    <div class="delivery">Order now and get it around Tuesday, December 05</div>382 383    <div class="divider"></div>384 385    <div class="qty-row">386      <div class="circle-btn">387        <svg width="40" height="40" viewBox="0 0 24 24" style="stroke:#fff;stroke-width:2;fill:none;">388          <path d="M5 12 H19" stroke-linecap="round"/>389        </svg>390      </div>391      <div class="qty-box">1</div>392      <div class="circle-btn">393        <svg width="40" height="40" viewBox="0 0 24 24" style="stroke:#fff;stroke-width:2;fill:none;">394          <path d="M12 5 V19 M5 12 H19" stroke-linecap="round"/>395        </svg>396      </div>397    </div>398 399    <div class="bottom-actions">400      <div class="quick-actions">401        <div class="heart">402          <svg width="42" height="42" viewBox="0 0 24 24">403            <path d="M12 21 C12 21 5 16 5 10 C5 7.5 7 6 9 6 C10.5 6 12 7 12 8.5 C12 7 13.5 6 15 6 C17 6 19 7.5 19 10 C19 16 12 21 12 21"/>404          </svg>405        </div>406        <div class="share">407          <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke-width="2">408            <circle cx="6" cy="12" r="3"></circle>409            <circle cx="18" cy="6" r="3"></circle>410            <circle cx="18" cy="18" r="3"></circle>411            <path d="M8.5 10.8 L15.5 7.2 M8.5 13.2 L15.5 16.8" stroke-linecap="round"></path>412          </svg>413        </div>414      </div>415      <button class="add-btn">ADD TO CART</button>416    </div>417  </div>418 419  <div class="wish-toast">Product added in your wishlist successfully.</div>420 421  <div class="home-indicator"></div>422</div>423</body>424</html>