GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Product Details - Beach Volleyball</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15    border-radius: 0;16    box-shadow: none;17    color: #333;18  }19  .status-bar {20    height: 120px;21    background: #D9D9D9;22    padding: 0 40px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #fff;27    font-weight: 600;28    font-size: 40px;29  }30  .status-icons { display: flex; gap: 26px; align-items: center; }31  .header {32    height: 120px;33    display: flex;34    align-items: center;35    justify-content: space-between;36    padding: 0 40px;37  }38  .header-left, .header-right {39    display: flex;40    align-items: center;41    gap: 30px;42  }43  .icon-btn { width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center; }44  .price-card {45    margin: 20px 30px;46    background: #F1F3F4;47    border-radius: 20px;48    padding: 40px 30px 50px 30px;49    box-sizing: border-box;50  }51  .progress-track {52    height: 20px;53    background: #E6ECF3;54    border-radius: 10px;55    overflow: hidden;56    margin: 0 10px 30px 10px;57  }58  .progress-fill {59    width: 28%;60    height: 100%;61    background: #4A90E2;62    border-radius: 10px;63  }64  .price-row {65    display: flex;66    align-items: center;67    justify-content: space-between;68    padding: 0 10px;69  }70  .price-text {71    font-size: 42px;72    font-weight: 700;73    color: #333;74  }75  .primary-btn {76    background: #2F6FB2;77    color: #fff;78    border-radius: 20px;79    padding: 24px 50px;80    font-size: 38px;81    font-weight: 700;82    letter-spacing: 0.5px;83    border: none;84  }85  .tabs {86    display: flex;87    gap: 40px;88    padding: 20px 30px 0 30px;89    border-bottom: 2px solid #E5E5E5;90  }91  .tab {92    font-size: 44px;93    font-weight: 800;94    padding: 26px 10px;95    color: #7A7A7A;96    position: relative;97  }98  .tab.active {99    color: #2D74B7;100  }101  .tab.active::after {102    content: "";103    position: absolute;104    left: 0;105    bottom: -2px;106    height: 6px;107    width: 88%;108    background: #2D74B7;109    border-radius: 3px;110  }111  .section {112    padding: 30px;113  }114  .section h2 {115    font-size: 44px;116    margin: 20px 0 10px 0;117    color: #4A4A4A;118    font-weight: 800;119  }120  .section p {121    font-size: 38px;122    line-height: 1.35;123    color: #555;124    margin: 10px 0 30px 0;125  }126  .advantages-header {127    display: flex;128    align-items: center;129    gap: 20px;130    margin-top: 20px;131  }132  .advantages-header h3 {133    font-size: 44px;134    font-weight: 800;135    margin: 0;136    color: #333;137  }138  .divider {139    height: 3px;140    background: #E6E6E6;141    flex: 1;142  }143  .adv-grid {144    display: grid;145    grid-template-columns: 1fr 1fr;146    gap: 30px 50px;147    padding-right: 30px;148    margin-top: 20px;149  }150  .adv-item {151    display: grid;152    grid-template-columns: 120px 1fr;153    gap: 20px;154    align-items: start;155  }156  .adv-icon {157    width: 120px;158    height: 120px;159    display: flex;160    align-items: center;161    justify-content: center;162  }163  .adv-content h4 {164    font-size: 42px;165    font-weight: 800;166    margin: 0 0 10px 0;167    color: #2F2F2F;168  }169  .adv-content p {170    font-size: 34px;171    color: #666;172    margin: 0;173  }174  .similar {175    padding: 20px 30px;176    border-top: 16px solid #EFEFEF;177  }178  .similar h3 {179    font-size: 44px;180    font-weight: 800;181    color: #4A4A4A;182    margin: 20px 0 30px 0;183  }184  .product-list {185    display: grid;186    grid-template-columns: repeat(3, 1fr);187    gap: 30px;188  }189  .product-card {190    border: 2px solid #E6E6E6;191    border-radius: 10px;192    padding: 10px;193    height: 430px;194    box-sizing: border-box;195    background: #fff;196    position: relative;197  }198  .img-ph {199    width: 100%;200    height: 100%;201    background: #E0E0E0;202    border: 1px solid #BDBDBD;203    display: flex;204    justify-content: center;205    align-items: center;206    color: #757575;207    font-size: 34px;208    border-radius: 6px;209  }210  /* Chat bubble */211  .chat-bubble {212    position: absolute;213    right: 110px;214    top: 1460px;215    background: #FFFFFF;216    border-radius: 16px;217    box-shadow: 0 8px 24px rgba(0,0,0,0.15);218    padding: 26px 26px 26px 26px;219    width: 420px;220    z-index: 10;221  }222  .chat-close {223    position: absolute;224    left: -28px;225    top: -28px;226    width: 54px;227    height: 54px;228    border-radius: 27px;229    background: #EDEDED;230    display: flex;231    align-items: center;232    justify-content: center;233    box-shadow: 0 4px 10px rgba(0,0,0,0.12);234  }235  .chat-content {236    display: grid;237    grid-template-columns: 1fr 110px;238    gap: 20px;239    align-items: center;240  }241  .avatar {242    width: 110px;243    height: 110px;244    border-radius: 55px;245    overflow: hidden;246    border: 1px solid #BDBDBD;247    background: #E0E0E0;248    display: flex;249    align-items: center;250    justify-content: center;251    color: #757575;252    font-size: 26px;253  }254  .chat-text {255    font-size: 34px;256    color: #333;257  }258  /* Bottom bar */259  .bottom-bar {260    position: absolute;261    left: 30px;262    right: 30px;263    bottom: 160px;264    background: #FFFFFF;265    border-radius: 24px;266    box-shadow: 0 10px 30px rgba(0,0,0,0.15);267    padding: 22px;268    display: flex;269    align-items: center;270    gap: 26px;271  }272  .wish-tile {273    width: 140px;274    height: 120px;275    border-radius: 18px;276    background: #F6F7F9;277    display: flex;278    align-items: center;279    justify-content: center;280  }281  .cart-cta {282    flex: 1;283    background: #F5D54A;284    color: #000;285    border-radius: 18px;286    padding: 34px;287    font-size: 42px;288    font-weight: 800;289    display: flex;290    align-items: center;291    justify-content: center;292    gap: 24px;293  }294  .home-pill {295    position: absolute;296    bottom: 72px;297    left: 50%;298    transform: translateX(-50%);299    width: 360px;300    height: 16px;301    background: #000;302    border-radius: 8px;303    opacity: 0.2;304  }305  /* Utility */306  .muted { color: #7A7A7A; }307</style>308</head>309<body>310<div id="render-target">311  <!-- Status Bar -->312  <div class="status-bar">313    <div>10:41</div>314    <div class="status-icons">315      <!-- simple status dots to mimic icons -->316      <svg width="40" height="40"><circle cx="20" cy="20" r="8" fill="#fff"/></svg>317      <svg width="40" height="40"><circle cx="20" cy="20" r="8" fill="#fff" opacity="0.8"/></svg>318      <svg width="40" height="40"><circle cx="20" cy="20" r="8" fill="#fff" opacity="0.6"/></svg>319      <svg width="40" height="40"><circle cx="20" cy="20" r="8" fill="#fff" opacity="0.4"/></svg>320      <!-- wifi -->321      <svg width="56" height="40" viewBox="0 0 56 40">322        <path d="M4 16c10-8 38-8 48 0" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>323        <path d="M12 24c7-6 25-6 32 0" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>324        <circle cx="28" cy="31" r="4" fill="#fff"/>325      </svg>326      <!-- battery -->327      <svg width="68" height="36" viewBox="0 0 68 36">328        <rect x="2" y="6" width="56" height="24" rx="4" stroke="#fff" stroke-width="4" fill="none"/>329        <rect x="8" y="12" width="40" height="12" rx="2" fill="#fff"/>330        <rect x="60" y="12" width="6" height="12" rx="2" fill="#fff"/>331      </svg>332    </div>333  </div>334 335  <!-- Top Header -->336  <div class="header">337    <div class="header-left">338      <!-- Back arrow -->339      <div class="icon-btn">340        <svg width="60" height="60" viewBox="0 0 60 60">341          <path d="M36 14 L20 30 L36 46" stroke="#000" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>342        </svg>343      </div>344    </div>345    <div class="header-right">346      <!-- Search -->347      <div class="icon-btn">348        <svg width="60" height="60" viewBox="0 0 60 60">349          <circle cx="26" cy="26" r="16" stroke="#000" stroke-width="4" fill="none"/>350          <path d="M40 40 L54 54" stroke="#000" stroke-width="4" stroke-linecap="round"/>351        </svg>352      </div>353      <!-- Heart -->354      <div class="icon-btn">355        <svg width="60" height="60" viewBox="0 0 60 60">356          <path d="M30 48 C16 36 12 32 12 24 C12 18 16 14 22 14 C26 14 28 16 30 18 C32 16 34 14 38 14 C44 14 48 18 48 24 C48 32 44 36 30 48 Z" stroke="#000" stroke-width="4" fill="none"/>357        </svg>358      </div>359      <!-- Cart -->360      <div class="icon-btn">361        <svg width="60" height="60" viewBox="0 0 60 60">362          <circle cx="22" cy="50" r="5" fill="#000"/>363          <circle cx="42" cy="50" r="5" fill="#000"/>364          <path d="M10 14 H16 L20 36 H46 L50 22 H22" stroke="#000" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>365        </svg>366      </div>367    </div>368  </div>369 370  <!-- Price Card -->371  <div class="price-card">372    <div class="progress-track">373      <div class="progress-fill"></div>374    </div>375    <div class="price-row">376      <div class="price-text">Total Price: ₹797</div>377      <button class="primary-btn">SELECT PRODUCTS</button>378    </div>379  </div>380 381  <!-- Tabs -->382  <div class="tabs">383    <div class="tab active">PRODUCT DETAILS</div>384    <div class="tab">TECHNICAL INFORMATION</div>385  </div>386 387  <!-- Content -->388  <div class="section">389    <h2>Made For</h2>390    <p>This ball has been developed by our design teams for playing recreational beach volleyball as a family or with friends.</p>391 392    <div class="advantages-header">393      <h3>Advantages</h3>394      <div class="divider"></div>395    </div>396 397    <div class="adv-grid">398      <!-- ball touch -->399      <div class="adv-item">400        <div class="adv-icon">401          <svg width="120" height="120" viewBox="0 0 120 120">402            <circle cx="60" cy="60" r="40" stroke="#000" stroke-width="6" fill="none"/>403            <path d="M60 20 L60 100" stroke="#000" stroke-width="6" stroke-linecap="round"/>404          </svg>405        </div>406        <div class="adv-content">407          <h4>ball touch</h4>408          <p>A very soft, comfortable ball feel for reassuring contact.</p>409        </div>410      </div>411 412      <!-- durability -->413      <div class="adv-item">414        <div class="adv-icon">415          <svg width="120" height="120" viewBox="0 0 120 120">416            <path d="M20 80 Q60 40 100 80" stroke="#000" stroke-width="8" fill="none" stroke-linecap="round"/>417            <path d="M80 40 L100 20" stroke="#000" stroke-width="8" fill="none" stroke-linecap="round"/>418            <path d="M84 22 L98 22 L98 36" stroke="#000" stroke-width="8" fill="none" stroke-linecap="round"/>419          </svg>420        </div>421        <div class="adv-content">422          <h4>durability</h4>423          <p>Machine-stitched assembly of ball.</p>424        </div>425      </div>426 427      <!-- waterproof -->428      <div class="adv-item">429        <div class="adv-icon">430          <svg width="120" height="120" viewBox="0 0 120 120">431            <path d="M60 20 C40 50 36 58 36 72 C36 88 46 100 60 100 C74 100 84 88 84 72 C84 58 80 50 60 20 Z" stroke="#000" stroke-width="6" fill="none"/>432            <path d="M24 86 Q40 70 56 74" stroke="#000" stroke-width="6" fill="none" stroke-linecap="round"/>433          </svg>434        </div>435        <div class="adv-content">436          <h4>waterproof</h4>437          <p>Limits absorption of water to up to 15% of the ball's initial weight.</p>438        </div>439      </div>440    </div>441  </div>442 443  <!-- Similar Products -->444  <div class="similar">445    <h3>SIMILAR PRODUCTS</h3>446    <div class="product-list">447      <div class="product-card">448        <div class="img-ph">[IMG: Beach Volleyball - Blue/Orange]</div>449      </div>450      <div class="product-card">451        <div class="img-ph">[IMG: Beach Volleyball - Yellow/Blue]</div>452      </div>453      <div class="product-card">454        <div class="img-ph">[IMG: Beach Volleyball - Assorted]</div>455      </div>456    </div>457  </div>458 459  <!-- Chat bubble near second product -->460  <div class="chat-bubble">461    <div class="chat-close">462      <svg width="34" height="34" viewBox="0 0 34 34">463        <path d="M8 8 L26 26 M26 8 L8 26" stroke="#777" stroke-width="4" stroke-linecap="round"/>464      </svg>465    </div>466    <div class="chat-content">467      <div class="chat-text">468        <div style="font-weight:800; margin-bottom:8px;">Hi There,</div>469        <div>Please click here to sign in & chat with me:)</div>470      </div>471      <div class="avatar">[IMG: Support Agent Avatar]</div>472    </div>473  </div>474 475  <!-- Bottom floating bar -->476  <div class="bottom-bar">477    <div class="wish-tile">478      <svg width="60" height="60" viewBox="0 0 60 60">479        <path d="M30 48 C16 36 12 32 12 24 C12 18 16 14 22 14 C26 14 28 16 30 18 C32 16 34 14 38 14 C44 14 48 18 48 24 C48 32 44 36 30 48 Z" stroke="#2D74B7" stroke-width="4" fill="none"/>480        <path d="M16 10 L16 22 L28 22" stroke="#2D74B7" stroke-width="4" fill="none"/>481      </svg>482    </div>483    <div class="cart-cta">484      ADD TO CART485      <svg width="60" height="60" viewBox="0 0 60 60">486        <circle cx="22" cy="50" r="5" fill="#000"/>487        <circle cx="42" cy="50" r="5" fill="#000"/>488        <path d="M10 14 H16 L20 36 H46 L50 22 H22" stroke="#000" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>489      </svg>490    </div>491  </div>492 493  <!-- Home pill indicator -->494  <div class="home-pill"></div>495</div>496</body>497</html>