GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Product Page - iBELL Cordless Screwdriver</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    color: #222;15  }16 17  /* Status bar (simulated) */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 90px;24    background: #111;25    color: #fff;26    display: flex;27    align-items: center;28    padding: 0 30px;29    box-sizing: border-box;30    font-size: 28px;31  }32  .status-right {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 24px;37  }38  .dot {39    width: 12px; height: 12px; border-radius: 50%; background: #bbb;40  }41  .battery {42    width: 38px; height: 18px; border: 2px solid #fff; position: relative; border-radius: 2px;43  }44  .battery:after {45    content: ""; position: absolute; right: -6px; top: 4px; width: 4px; height: 10px; background: #fff; border-radius: 1px;46  }47  .battery .level { width: 28px; height: 100%; background: #4caf50; }48 49  /* Top action icons */50  .top-actions {51    position: absolute;52    top: 110px;53    right: 30px;54    display: flex;55    gap: 28px;56  }57  .icon-btn {58    width: 60px; height: 60px; display: flex; justify-content: center; align-items: center;59    border-radius: 50%;60    background: #fff;61    box-shadow: 0 2px 6px rgba(0,0,0,0.15);62    border: 1px solid #eee;63  }64  .icon {65    width: 34px; height: 34px; fill: none; stroke: #333; stroke-width: 2;66  }67  .back-btn {68    position: absolute; top: 110px; left: 30px;69    width: 60px; height: 60px; display: flex; justify-content: center; align-items: center;70    background: #fff; border-radius: 50%; border: 1px solid #eee; box-shadow: 0 2px 6px rgba(0,0,0,0.15);71  }72 73  /* Product image area */74  .image-area {75    position: absolute;76    top: 190px;77    left: 120px;78    width: 840px;79    height: 980px;80    background: #E0E0E0;81    border: 1px solid #BDBDBD;82    display: flex;83    justify-content: center;84    align-items: center;85    color: #757575;86    font-size: 30px;87    text-align: center;88  }89  .share-fab {90    position: absolute;91    right: 30px;92    top: 640px;93    width: 110px; height: 110px;94    background: #fff;95    border-radius: 24px;96    border: 1px solid #eee;97    box-shadow: 0 4px 10px rgba(0,0,0,0.12);98    display: flex; justify-content: center; align-items: center;99  }100  .chain-icon { width: 48px; height: 48px; stroke: #444; fill: none; stroke-width: 2; }101 102  .carousel-dots {103    position: absolute;104    top: 1120px;105    left: 36px;106    display: flex; gap: 18px;107  }108  .carousel-dots .c-dot {109    width: 16px; height: 16px; border-radius: 50%; background: #bdbdbd;110  }111 112  /* View similar pill */113  .view-similar {114    position: absolute;115    top: 1200px;116    right: 30px;117    display: flex;118    align-items: center;119    gap: 18px;120    background: #fff;121    border: 1px solid #eee;122    box-shadow: 0 2px 8px rgba(0,0,0,0.08);123    border-radius: 20px;124    padding: 18px 24px;125    color: #333;126    font-size: 30px;127  }128  .view-similar .doc {129    width: 44px; height: 44px; border: 2px solid #333; border-radius: 6px; position: relative;130  }131  .view-similar .doc:before {132    content: ""; position: absolute; top: 10px; left: 8px; width: 28px; height: 2px; background: #333;133  }134  .view-similar .doc:after {135    content: ""; position: absolute; top: 20px; left: 8px; width: 24px; height: 2px; background: #333;136  }137 138  /* Product details */139  .details {140    position: absolute;141    top: 1320px;142    left: 30px;143    width: 1020px;144  }145  .brand {146    font-size: 40px; font-weight: 700; margin-bottom: 20px;147  }148  .follow {149    float: right; color: #e91e63; font-weight: 700; font-size: 32px;150  }151  .title {152    font-size: 38px; line-height: 1.3; color: #333; margin-bottom: 22px;153  }154  .price-row {155    display: flex; align-items: baseline; gap: 18px; margin-bottom: 10px;156  }157  .price {158    font-size: 44px; font-weight: 700;159  }160  .mrp {161    font-size: 30px; color: #777; text-decoration: line-through;162  }163  .discount {164    font-size: 30px; color: #4CAF50; font-weight: 700;165  }166  .tax-note { font-size: 28px; color: #666; margin-top: 8px; }167 168  .rating-row {169    margin-top: 24px; display: flex; align-items: center; gap: 24px; font-size: 30px;170  }171  .star {172    width: 28px; height: 28px; background: #4CAF50; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); 173  }174  .star.gray { background: #c8e6c9; }175  .rating-box {176    padding: 6px 16px; border-radius: 18px; background: #e8f5e9; color: #2e7d32; font-weight: 700; display: flex; align-items: center; gap: 8px;177  }178  .review-note { color: #666; }179 180  /* Offers section */181  .section-title {182    margin-top: 50px; font-size: 36px; font-weight: 700;183  }184  .offer-card {185    margin-top: 20px;186    width: 980px;187    border: 1px solid #eee;188    border-radius: 18px;189    padding: 26px;190    box-shadow: 0 2px 8px rgba(0,0,0,0.06);191    display: flex; align-items: center; gap: 26px;192  }193  .offer-icon {194    width: 44px; height: 44px; border-radius: 50%; background: #ff7043;195  }196  .offer-text {197    font-size: 32px; color: #333; line-height: 1.4;198  }199  .coupon {200    display: inline-block; margin-left: 16px; padding: 6px 14px; border: 2px dashed #7e57c2; border-radius: 10px; font-weight: 700; background: #f7f4ff;201  }202  .min-note { color: #666; font-size: 28px; margin-left: 10px; }203 204  .offer-card.secondary {205    width: 980px; opacity: 0.8;206  }207  .green-badge {208    width: 44px; height: 44px; border-radius: 50%; background: #4caf50;209  }210 211  /* Bottom action bar */212  .bottom-bar {213    position: absolute;214    bottom: 40px;215    left: 30px;216    width: 1020px;217    display: flex;218    align-items: center;219    gap: 28px;220  }221  .wish {222    width: 120px; height: 120px; border: 1px solid #e0e0e0; border-radius: 24px; display: flex; justify-content: center; align-items: center;223  }224  .btn {225    flex: 1;226    height: 120px;227    border-radius: 24px;228    font-size: 36px; font-weight: 700;229    display: flex; justify-content: center; align-items: center;230    box-shadow: 0 3px 10px rgba(0,0,0,0.12);231  }232  .btn.buy { background: #ff5252; color: #fff; }233  .btn.bag { background: #e91e63; color: #fff; }234 235</style>236</head>237<body>238<div id="render-target">239 240  <!-- Simulated device status bar -->241  <div class="status-bar">242    4:11243    <div class="status-right">244      <div class="dot"></div>245      <div class="dot"></div>246      <div class="dot"></div>247      <div class="battery"><div class="level"></div></div>248    </div>249  </div>250 251  <!-- Back / top actions -->252  <div class="back-btn">253    <svg class="icon" viewBox="0 0 24 24"><path d="M15 6 L9 12 L15 18" stroke-linecap="round" stroke-linejoin="round"/></svg>254  </div>255  <div class="top-actions">256    <div class="icon-btn">257      <svg class="icon" viewBox="0 0 24 24"><path d="M12 21 C12 21 4 14 4 9 A4 4 0 0 1 8 5 C10 5 12 7 12 7 C12 7 14 5 16 5 A4 4 0 0 1 20 9 C20 14 12 21 12 21" stroke-linecap="round" stroke-linejoin="round"/></svg>258    </div>259    <div class="icon-btn">260      <svg class="icon" viewBox="0 0 24 24">261        <path d="M6 6 H20 L19 14 H7 Z" stroke-linecap="round" stroke-linejoin="round"/>262        <circle cx="9" cy="19" r="2"></circle>263        <circle cx="17" cy="19" r="2"></circle>264      </svg>265    </div>266  </div>267 268  <!-- Product image -->269  <div class="image-area">[IMG: iBELL Cordless Rechargeable Electric Screwdriver kit]</div>270 271  <!-- Share floating button -->272  <div class="share-fab">273    <svg class="chain-icon" viewBox="0 0 24 24">274      <path d="M10 14 L14 10" />275      <path d="M7 17 C5 19 3 19 2 18 C1 17 1 15 3 13 L6 10 C8 8 10 8 11 9" />276      <path d="M17 7 C19 5 21 5 22 6 C23 7 23 9 21 11 L18 14 C16 16 14 16 13 15" />277    </svg>278  </div>279 280  <!-- Carousel dots -->281  <div class="carousel-dots">282    <div class="c-dot"></div>283    <div class="c-dot"></div>284    <div class="c-dot"></div>285    <div class="c-dot"></div>286    <div class="c-dot"></div>287  </div>288 289  <!-- View similar pill -->290  <div class="view-similar">291    <div class="doc"></div>292    <div>View Similar</div>293  </div>294 295  <!-- Details section -->296  <div class="details">297    <div class="brand">iBELL <span class="follow">+ Follow</span></div>298    <div class="title">iBELL MS06-16 Cordless Rechargeable Electric Screwdriver (Red/Black)</div>299 300    <div class="price-row">301      <div class="price">₹1749</div>302      <div class="mrp">MRP: ₹2200</div>303      <div class="discount">(21%)</div>304    </div>305    <div class="tax-note">inclusive of all taxes</div>306 307    <div class="rating-row">308      <div class="rating-box"><span>5.0</span><div class="star"></div></div>309      <div class="review-note">1 Rating & 1 Review</div>310    </div>311 312    <div class="section-title">Available Offers</div>313 314    <div class="offer-card">315      <div class="offer-icon"></div>316      <div class="offer-text">317        15% off on ICICI Credit Cards318        <span class="coupon">ICICIWEEKEND</span>319        <span class="min-note">Min Purchase: ₹1500</span>320      </div>321    </div>322 323    <div class="offer-card secondary">324      <div class="green-badge"></div>325      <div class="offer-text">326        Up to 5% NeuCoins on Tata Neu HDFC Bank Credit …327      </div>328    </div>329  </div>330 331  <!-- Bottom action bar -->332  <div class="bottom-bar">333    <div class="wish">334      <svg class="icon" viewBox="0 0 24 24"><path d="M12 21 C12 21 4 14 4 9 A4 4 0 0 1 8 5 C10 5 12 7 12 7 C12 7 14 5 16 5 A4 4 0 0 1 20 9 C20 14 12 21 12 21" stroke-linecap="round" stroke-linejoin="round"/></svg>335    </div>336    <div class="btn buy">Buy Now</div>337    <div class="btn bag">Add to Bag</div>338  </div>339 340</div>341</body>342</html>