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 - Sofa</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #ffffff;15    color: #212121;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    background: #202124;26    color: #fff;27    display: flex;28    align-items: center;29    padding: 0 28px;30    box-sizing: border-box;31    font-size: 34px;32  }33  .status-left { flex: 1; }34  .status-right { display: flex; gap: 24px; align-items: center; }35 36  /* Hero image area */37  .hero {38    position: absolute;39    top: 120px;40    left: 0;41    width: 1080px;42    height: 980px;43  }44  .hero-img {45    width: 100%;46    height: 100%;47    background: #E0E0E0;48    border: 1px solid #BDBDBD;49    display: flex;50    justify-content: center;51    align-items: center;52    color: #757575;53    font-size: 40px;54  }55 56  /* Overlay controls on hero */57  .top-icons {58    position: absolute;59    top: 24px;60    right: 24px;61    display: flex;62    gap: 36px;63    align-items: center;64  }65  .icon-btn svg { width: 52px; height: 52px; stroke: #ffffff; fill: none; stroke-width: 4; }66 67  .back-btn {68    position: absolute;69    top: 220px;70    left: 22px;71    width: 64px;72    height: 64px;73    border-radius: 32px;74    display: flex;75    align-items: center;76    justify-content: center;77  }78  .back-btn svg { width: 44px; height: 44px; stroke: #ffffff; fill: none; stroke-width: 6; }79 80  .offer-badge {81    position: absolute;82    top: 300px;83    left: 24px;84    background: #e83d66;85    color: #fff;86    padding: 16px 28px;87    border-radius: 24px;88    font-size: 36px;89    font-weight: 700;90    box-shadow: 0 4px 10px rgba(0,0,0,0.2);91  }92 93  .pager-dots {94    position: absolute;95    bottom: 90px;96    left: 40px;97    display: flex;98    gap: 18px;99  }100  .pager-dots span {101    width: 16px;102    height: 16px;103    background: #d0d0d0;104    border-radius: 50%;105    display: inline-block;106  }107  .pager-dots span.active { background: #444; }108 109  .share-fab {110    position: absolute;111    right: 36px;112    bottom: 140px;113    width: 120px;114    height: 120px;115    background: #ffffff;116    border-radius: 28px;117    border: 1px solid #e0e0e0;118    box-shadow: 0 8px 20px rgba(0,0,0,0.18);119    display: flex;120    align-items: center;121    justify-content: center;122  }123  .share-fab svg { width: 58px; height: 58px; stroke: #555; fill: none; stroke-width: 4; }124 125  .view-similar {126    position: absolute;127    right: 200px;128    bottom: 90px;129    display: flex;130    align-items: center;131    gap: 18px;132    background: #ffffff;133    border: 1px solid #e0e0e0;134    border-radius: 32px;135    padding: 22px 28px;136    font-size: 38px;137    color: #333;138    box-shadow: 0 8px 20px rgba(0,0,0,0.12);139  }140  .view-similar svg { width: 44px; height: 44px; stroke: #555; fill: none; stroke-width: 4; }141 142  /* Details section */143  .details {144    position: absolute;145    top: 1100px;146    left: 0;147    width: 100%;148    padding: 40px 48px 20px;149    box-sizing: border-box;150    background: #ffffff;151  }152  .brand-row {153    display: flex;154    align-items: center;155    justify-content: space-between;156  }157  .brand {158    font-size: 54px;159    font-weight: 700;160    color: #111;161  }162  .follow {163    color: #e83d66;164    font-size: 36px;165    font-weight: 700;166  }167  .title {168    margin-top: 10px;169    font-size: 38px;170    color: #333;171  }172 173  .price-row {174    margin-top: 28px;175    display: flex;176    align-items: baseline;177    gap: 18px;178    flex-wrap: wrap;179  }180  .price {181    font-size: 56px;182    font-weight: 800;183  }184  .mrp {185    font-size: 36px;186    color: #8a8a8a;187    text-decoration: line-through;188  }189  .discount {190    font-size: 36px;191    color: #2e7d32;192    font-weight: 700;193  }194  .muted {195    margin-top: 12px;196    font-size: 34px;197    color: #7a7a7a;198  }199  .emi-red {200    margin-top: 16px;201    color: #e83d66;202    font-size: 34px;203    font-weight: 600;204  }205 206  .rating-row {207    margin-top: 22px;208    display: flex;209    align-items: center;210    gap: 18px;211  }212  .rating-pill {213    background: #e7f6ea;214    color: #2e7d32;215    border-radius: 24px;216    padding: 10px 16px;217    display: inline-flex;218    align-items: center;219    gap: 10px;220    font-size: 34px;221    font-weight: 700;222  }223  .rating-row .count {224    color: #8a8a8a;225    font-size: 34px;226  }227 228  .divider {229    height: 2px;230    background: #eeeeee;231    margin: 36px 0;232  }233 234  .emi-info {235    font-size: 36px;236    color: #555;237    margin-bottom: 24px;238  }239 240  .action-row {241    display: flex;242    align-items: center;243    gap: 28px;244    margin-top: 12px;245  }246  .wish-btn {247    width: 140px;248    height: 120px;249    border: 2px solid #e0e0e0;250    border-radius: 24px;251    display: flex;252    align-items: center;253    justify-content: center;254    background: #fff;255  }256  .wish-btn svg { width: 56px; height: 56px; stroke: #e83d66; fill: none; stroke-width: 4; }257 258  .buy-btn {259    flex: 1;260    height: 120px;261    border: 3px solid #e83d66;262    color: #e83d66;263    background: #fff;264    border-radius: 26px;265    font-size: 44px;266    font-weight: 800;267    display: flex;268    align-items: center;269    justify-content: center;270  }271  .bag-btn {272    flex: 1;273    height: 120px;274    background: #e83d66;275    color: #fff;276    border-radius: 26px;277    font-size: 44px;278    font-weight: 800;279    border: 3px solid #e83d66;280    display: flex;281    align-items: center;282    justify-content: center;283  }284 285  /* Bottom gesture bar for realism */286  .gesture {287    position: absolute;288    bottom: 18px;289    left: 50%;290    transform: translateX(-50%);291    width: 340px;292    height: 10px;293    background: #000;294    opacity: 0.35;295    border-radius: 10px;296  }297</style>298</head>299<body>300<div id="render-target">301 302  <!-- Status Bar -->303  <div class="status-bar">304    <div class="status-left">3:57</div>305    <div class="status-right">306      <!-- Simple small icons -->307      <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="#fff" stroke-width="2"><circle cx="12" cy="12" r="9"/></svg>308      <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="#fff" stroke-width="2"><path d="M2 18c3-4 7-6 10-6s7 2 10 6"/><path d="M8 18c1.5-2 3-3 4-3s2.5 1 4 3"/></svg>309      <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="#fff" stroke-width="2"><rect x="3" y="7" width="16" height="10" rx="2"/><rect x="20" y="10" width="2" height="4"/></svg>310    </div>311  </div>312 313  <!-- Hero Image -->314  <div class="hero">315    <div class="hero-img">[IMG: Beige Sofa in Living Room]</div>316 317    <div class="top-icons">318      <div class="icon-btn">319        <!-- Search -->320        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>321      </div>322      <div class="icon-btn">323        <!-- Heart -->324        <svg viewBox="0 0 24 24"><path d="M12 20s-7-4.6-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.4-7 10-7 10z"/></svg>325      </div>326      <div class="icon-btn">327        <!-- Bag -->328        <svg viewBox="0 0 24 24"><path d="M6 7h12l-1 13H7L6 7z"/><path d="M9 7a3 3 0 0 1 6 0"/></svg>329      </div>330    </div>331 332    <div class="back-btn">333      <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg>334    </div>335 336    <div class="offer-badge">45% Off</div>337 338    <div class="pager-dots">339      <span class="active"></span>340      <span></span><span></span><span></span><span></span>341      <span></span><span></span><span></span><span></span>342    </div>343 344    <div class="share-fab">345      <svg viewBox="0 0 24 24"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8.6 10.8l6.8-3.6M8.6 13.2l6.8 3.6"/></svg>346    </div>347 348    <div class="view-similar">349      <svg viewBox="0 0 24 24"><rect x="3" y="4" width="8" height="12" rx="2"/><rect x="13" y="8" width="8" height="12" rx="2"/></svg>350      <span>View Similar</span>351    </div>352  </div>353 354  <!-- Details Section -->355  <div class="details">356    <div class="brand-row">357      <div class="brand">Duroflex</div>358      <div class="follow">+ Follow</div>359    </div>360    <div class="title">Duroflex Utopia Beige Pinewood 3 Seater Sofa</div>361 362    <div class="price-row">363      <div class="price">₹26862</div>364      <div class="mrp">MRP: ₹48840</div>365      <div class="discount">(45%)</div>366    </div>367    <div class="muted">inclusive of all taxes</div>368    <div class="emi-red">No Cost EMI Available</div>369 370    <div class="rating-row">371      <div class="rating-pill">372        <span>5.0</span>373        <svg viewBox="0 0 24 24" width="28" height="28" fill="#2e7d32" stroke="none">374          <path d="M12 17.3l-5.4 3.2 1.5-6.1L3 9.8l6.2-.5L12 3.8l2.8 5.5 6.2.5-5.1 4.6 1.5 6.1z"/>375        </svg>376      </div>377      <div class="count">1 Rating</div>378    </div>379 380    <div class="divider"></div>381 382    <div class="emi-info">EMI Starting from ₹944/month</div>383 384    <div class="action-row">385      <div class="wish-btn">386        <svg viewBox="0 0 24 24"><path d="M12 20s-7-4.6-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.4-7 10-7 10z"/></svg>387      </div>388      <div class="buy-btn">Buy Now</div>389      <div class="bag-btn">Add to Bag</div>390    </div>391  </div>392 393  <div class="gesture"></div>394</div>395</body>396</html>