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 - Mockup</title>7<style>8  /* Body reset and transparency */9  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #111; }10 11  /* Root container as per spec */12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #ffffff;18  }19 20  /* Header gradient */21  .header {22    height: 220px;23    background: linear-gradient(90deg, #8ed8d0, #b0e8e8);24    position: relative;25  }26 27  .back-btn {28    position: absolute;29    top: 88px;30    left: 28px;31    width: 72px;32    height: 72px;33    display: flex;34    align-items: center;35    justify-content: center;36    cursor: default;37  }38  .search-wrap {39    position: absolute;40    left: 90px;41    right: 90px;42    top: 78px;43    height: 110px;44    background: #fff;45    border-radius: 60px;46    box-shadow: 0 6px 18px rgba(0,0,0,0.15);47    display: flex;48    align-items: center;49    padding: 0 36px;50    gap: 22px;51  }52  .search-text {53    flex: 1;54    color: #444;55    font-size: 38px;56  }57  .icon-btn {58    width: 72px;59    height: 72px;60    border-radius: 16px;61    display: flex;62    align-items: center;63    justify-content: center;64    background: #f2f4f5;65  }66 67  /* Product image area */68  .hero {69    height: 360px;70    background: #f5f5f5;71    position: relative;72    border-bottom: 1px solid #e5e5e5;73  }74  .hero .img {75    position: absolute;76    left: 60px;77    right: 60px;78    top: 40px;79    bottom: 30px;80    background: #E0E0E0;81    border: 1px solid #BDBDBD;82    display: flex;83    align-items: center;84    justify-content: center;85    color: #666;86    font-size: 34px;87    border-radius: 16px;88  }89  .fav {90    position: absolute;91    left: 38px;92    bottom: -42px;93    width: 92px;94    height: 92px;95    border-radius: 46px;96    border: 2px solid #d9d9d9;97    background: #fff;98    display: flex;99    align-items: center;100    justify-content: center;101  }102 103  /* Carousel dots */104  .dots {105    height: 60px;106    display: flex;107    align-items: center;108    justify-content: center;109    gap: 28px;110  }111  .dot {112    width: 22px; height: 22px; border-radius: 50%;113    border: 3px solid #c7c7c7;114    background: #fff;115  }116  .dot.active { background: #5a5a5a; border-color: #5a5a5a; }117 118  /* Sections */119  .section {120    padding: 32px 48px;121    border-top: 1px solid #efefef;122  }123  .title {124    font-size: 42px;125    margin-bottom: 26px;126  }127  .title b { font-weight: 700; }128 129  /* Color options */130  .color-row {131    display: flex;132    gap: 38px;133  }134  .color-card {135    width: 220px;136    text-align: center;137  }138  .circle-img {139    width: 210px; height: 210px; border-radius: 50%;140    background: #E0E0E0;141    border: 2px solid #d9d9d9;142    display: flex; align-items: center; justify-content: center;143    color: #666; font-size: 26px;144    margin: 0 auto 10px;145  }146  .circle-img.selected { border: 6px solid #000; }147  .badge {148    display: inline-block;149    background: #d81b60;150    color: #fff;151    padding: 10px 18px;152    font-size: 28px;153    border-radius: 14px;154    margin-top: -6px;155  }156  .price {157    font-size: 34px;158    margin-top: 8px;159  }160  .old {161    color: #9e9e9e;162    text-decoration: line-through;163    font-size: 30px;164  }165 166  /* Size selector */167  .size-title { font-size: 42px; margin: 10px 0 24px; }168  .size-row {169    display: flex;170    gap: 22px;171    flex-wrap: wrap;172  }173  .chip {174    padding: 28px 44px;175    border: 2px solid #cfcfcf;176    border-radius: 18px;177    font-size: 36px;178    color: #333;179    background: #fff;180  }181  .chip.selected {182    background: #111;183    color: #fff;184    border-color: #111;185  }186 187  .link {188    color: #1a9ca2;189    font-weight: 600;190    font-size: 38px;191    padding: 22px 0 8px;192  }193 194  /* Deal section */195  .deal {196    padding: 28px 48px 12px;197  }198  .deal-badge {199    display: inline-block;200    background: #d81b60;201    color: #fff;202    font-weight: 700;203    padding: 14px 22px;204    border-radius: 14px;205    font-size: 32px;206    margin-bottom: 14px;207  }208  .deal-row {209    display: flex;210    align-items: baseline;211    gap: 18px;212    margin: 14px 0 6px;213  }214  .off {215    color: #d32f2f;216    font-size: 90px;217    font-weight: 700;218  }219  .amount {220    font-size: 86px;221    font-weight: 700;222  }223  .mrp {224    color: #666;225    font-size: 34px;226    margin: 12px 0;227  }228  .tax {229    font-size: 40px;230    margin-top: 8px;231  }232 233  /* Offer card */234  .offer {235    border-top: 1px solid #e7e7e7;236    border-bottom: 1px solid #e7e7e7;237    background: #f9f9f9;238    padding: 26px 48px;239    display: flex;240    align-items: center;241    gap: 26px;242  }243  .offer .circle {244    width: 66px; height: 66px; border: 2px dashed #c9c9c9; border-radius: 50%;245    display: flex; align-items: center; justify-content: center; color: #d08124; font-weight: 700;246  }247  .offer .text {248    flex: 1;249  }250  .offer .title {251    font-size: 40px; margin: 0; font-weight: 700;252  }253  .offer .sub {254    font-size: 34px; color: #666; margin-top: 6px;255  }256  .chev {257    width: 50px; height: 50px;258  }259 260  /* Bottom navigation */261  .bottom-nav {262    position: absolute;263    bottom: 0;264    left: 0;265    right: 0;266    height: 200px;267    background: #fff;268    border-top: 1px solid #e1e1e1;269    display: flex;270    justify-content: space-around;271    align-items: center;272    padding-bottom: 26px;273  }274  .nav-item {275    width: 140px;276    text-align: center;277    color: #555;278    font-size: 28px;279  }280  .nav-item.active { color: #0aa0a6; }281  .nav-icon {282    width: 56px; height: 56px; margin: 0 auto 12px;283  }284 285  .home-indicator {286    position: absolute;287    bottom: 212px;288    left: 50%; transform: translateX(-50%);289    width: 360px;290    height: 12px;291    background: #7e7e7e;292    border-radius: 8px;293    opacity: .6;294  }295 296  /* Content padding to avoid being hidden by nav */297  .content { padding-bottom: 240px; }298</style>299</head>300<body>301<div id="render-target">302 303  <div class="header">304    <div class="back-btn" aria-hidden="true">305      <svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">306        <path d="M15 18l-6-6 6-6"/>307      </svg>308    </div>309 310    <div class="search-wrap">311      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">312        <circle cx="10" cy="10" r="7"></circle>313        <path d="M21 21l-5.2-5.2"></path>314      </svg>315      <div class="search-text">party wear shoes for mens</div>316      <div class="icon-btn" aria-hidden="true">317        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">318          <rect x="4" y="4" width="16" height="16" rx="3"></rect>319          <circle cx="12" cy="12" r="3"></circle>320        </svg>321      </div>322    </div>323  </div>324 325  <div class="content">326    <div class="hero">327      <div class="img">[IMG: Shoe Closeup]</div>328      <div class="fav">329        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#b0b0b0" stroke-width="2">330          <path d="M12 21s-6.5-4.2-9-7.7C-0.5 8.6 2.1 4 6 4c2.1 0 3.4 1.1 4 2 0.6-0.9 1.9-2 4-2 3.9 0 6.5 4.6 3 9.3-2.5 3.5-9 7.7-9 7.7z"/>331        </svg>332      </div>333    </div>334 335    <div class="dots">336      <div class="dot"></div>337      <div class="dot active"></div>338      <div class="dot"></div>339      <div class="dot"></div>340      <div class="dot"></div>341      <div class="dot"></div>342      <div class="dot"></div>343      <div class="dot"></div>344    </div>345 346    <div class="section">347      <div class="title">Colour: <b>Tan</b></div>348      <div class="color-row">349        <div class="color-card">350          <div class="circle-img">[IMG: Black Shoe]</div>351          <div class="badge">Limited Time</div>352          <div class="price">₹709.00</div>353          <div class="old">₹2,499.00</div>354        </div>355        <div class="color-card">356          <div class="circle-img">[IMG: Brown Shoe]</div>357          <div class="price">₹759.00</div>358          <div class="old">₹2,499.00</div>359        </div>360        <div class="color-card">361          <div class="circle-img selected">[IMG: Tan Shoe]</div>362          <div class="badge">Limited Time</div>363          <div class="price">₹709.00</div>364          <div class="old">₹2,499.00</div>365        </div>366      </div>367    </div>368 369    <div class="section">370      <div class="size-title">Size: <b>9 UK</b></div>371      <div class="size-row">372        <div class="chip">UK</div>373        <div class="chip">7 UK</div>374        <div class="chip">8 UK</div>375        <div class="chip selected">9 UK</div>376        <div class="chip">10 UK</div>377        <div class="chip">11 UK</div>378      </div>379    </div>380 381    <div class="section">382      <div class="link">Size guide</div>383    </div>384 385    <div class="deal">386      <div class="deal-badge">Deal of the Day</div>387      <div class="deal-row">388        <div class="off">-72%</div>389        <div class="amount">₹709</div>390      </div>391      <div class="mrp">M.R.P.: <span class="old">₹2,499</span></div>392      <div class="tax">Inclusive of all taxes</div>393    </div>394 395    <div class="offer">396      <div class="circle">%</div>397      <div class="text">398        <p class="title">Save Extra with Offers</p>399        <div class="sub">Bank Offers and Partner Offers</div>400      </div>401      <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">402        <path d="M6 9l6 6 6-6"/>403      </svg>404    </div>405  </div>406 407  <div class="home-indicator"></div>408 409  <div class="bottom-nav">410    <div class="nav-item active">411      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#0aa0a6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">412        <path d="M3 11l9-8 9 8"></path>413        <path d="M5 10v10h14V10"></path>414      </svg>415      Home416    </div>417    <div class="nav-item">418      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2">419        <circle cx="12" cy="8" r="4"></circle>420        <path d="M4 22c2-4 6-6 8-6s6 2 8 6"></path>421      </svg>422      You423    </div>424    <div class="nav-item">425      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2">426        <rect x="3" y="3" width="18" height="6"></rect>427        <rect x="3" y="10" width="18" height="6"></rect>428        <rect x="3" y="17" width="18" height="4"></rect>429      </svg>430      More431    </div>432    <div class="nav-item">433      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2">434        <path d="M6 6h15l-2 12H7L5 3H2"></path>435        <circle cx="9" cy="20" r="1.5"></circle>436        <circle cx="17" cy="20" r="1.5"></circle>437      </svg>438      Cart439    </div>440    <div class="nav-item">441      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2">442        <path d="M3 6h18"></path>443        <path d="M3 12h18"></path>444        <path d="M3 18h18"></path>445      </svg>446      Menu447    </div>448  </div>449 450</div>451</body>452</html>