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 Detail Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, Helvetica, sans-serif;13    color: #111;14  }15  #render-target {16    position: relative;17    overflow: hidden;18    width: 1080px;19    height: 2400px;20    background: #ffffff;21  }22  .header {23    height: 220px;24    background: linear-gradient(90deg, #96e2d4 0%, #b9f0e4 100%);25    padding: 28px 32px 24px 32px;26    box-sizing: border-box;27  }28  .search-row {29    display: flex;30    align-items: center;31    gap: 24px;32    margin-top: 58px;33  }34  .icon-btn {35    width: 60px;36    height: 60px;37    border-radius: 30px;38    display: flex;39    align-items: center;40    justify-content: center;41  }42  .search-input {43    flex: 1;44    background: #fff;45    border-radius: 20px;46    box-shadow: 0 2px 0 rgba(0,0,0,0.08), 0 6px 16px rgba(0,0,0,0.08);47    height: 84px;48    display: flex;49    align-items: center;50    padding: 0 28px;51    box-sizing: border-box;52    font-size: 38px;53    color: #444;54  }55  .search-input .placeholder {56    flex: 1;57  }58  .scan-btn {59    width: 84px;60    height: 84px;61    border-radius: 18px;62    background: #ffffff;63    box-shadow: 0 2px 0 rgba(0,0,0,0.08), 0 6px 16px rgba(0,0,0,0.08);64    display: flex;65    align-items: center;66    justify-content: center;67  }68  .content {69    padding: 32px;70    box-sizing: border-box;71  }72  .deal-pill {73    display: inline-block;74    background: #d81b60;75    color: #fff;76    font-weight: bold;77    font-size: 34px;78    padding: 12px 20px;79    border-radius: 12px;80    margin-top: 20px;81  }82  .price-row {83    display: flex;84    align-items: baseline;85    gap: 24px;86    margin-top: 24px;87  }88  .discount {89    color: #d32f2f;90    font-weight: bold;91    font-size: 120px;92    line-height: 1;93  }94  .price {95    font-size: 96px;96    font-weight: 700;97    color: #111;98  }99  .mrp {100    margin-top: 12px;101    color: #777;102    font-size: 34px;103  }104  .mrp .strike {105    text-decoration: line-through;106  }107  .fulfilled {108    display: inline-flex;109    align-items: center;110    gap: 12px;111    background: #2c3e50;112    color: #fff;113    padding: 10px 16px;114    border-radius: 12px;115    font-size: 30px;116    margin-top: 18px;117  }118  .fulfilled .a-icon {119    width: 36px;120    height: 36px;121    background: #f3a847;122    border-radius: 6px;123    color: #111;124    display: flex;125    align-items: center;126    justify-content: center;127    font-weight: bold;128  }129  .subtext {130    margin-top: 18px;131    color: #333;132    font-size: 36px;133  }134  .divider {135    height: 18px;136    background: #e9e9e9;137    margin: 28px -32px;138  }139  .offer-row {140    display: flex;141    align-items: center;142    justify-content: space-between;143    padding: 24px 0;144  }145  .offer-left {146    display: flex;147    align-items: center;148    gap: 22px;149  }150  .percent-icon {151    width: 64px;152    height: 64px;153    border-radius: 32px;154    border: 2px dashed #ffa726;155    display: flex;156    align-items: center;157    justify-content: center;158    color: #ffa726;159    font-weight: bold;160  }161  .offer-text .title {162    font-size: 40px;163    font-weight: 700;164  }165  .offer-text .desc {166    font-size: 32px;167    color: #777;168    margin-top: 8px;169  }170  .shipping {171    font-size: 36px;172    line-height: 1.5;173  }174  .shipping .highlight {175    color: #007185;176    font-weight: 700;177  }178  .shipping .green {179    color: #2e7d32;180  }181  .link {182    color: #007185;183  }184  .location {185    display: flex;186    align-items: center;187    gap: 14px;188    margin-top: 18px;189    color: #007185;190    font-size: 38px;191  }192  .stock {193    color: #2e7d32;194    font-size: 48px;195    font-weight: 700;196    margin-top: 48px;197    margin-bottom: 20px;198  }199  .qty {200    display: inline-flex;201    align-items: center;202    gap: 16px;203    background: #fff;204    border: 1px solid #ddd;205    border-radius: 18px;206    padding: 18px 24px;207    box-shadow: 0 6px 16px rgba(0,0,0,0.08);208    font-size: 36px;209    color: #333;210  }211  .cta {212    margin-top: 46px;213  }214  .btn {215    height: 120px;216    border-radius: 60px;217    display: flex;218    align-items: center;219    justify-content: center;220    font-size: 44px;221    font-weight: 700;222    border: none;223    margin: 22px 0;224    cursor: pointer;225  }226  .btn.cart {227    background: #ffd814;228    color: #111;229  }230  .btn.buy {231    background: #ffa41c;232    color: #111;233  }234  .secure {235    display: flex;236    align-items: center;237    gap: 18px;238    margin-top: 18px;239    color: #007185;240    font-size: 38px;241  }242  .seller {243    margin-top: 24px;244    font-size: 36px;245    color: #333;246  }247  .seller .link {248    font-weight: 700;249  }250  .info {251    margin-top: 22px;252    font-size: 36px;253    line-height: 1.5;254  }255  /* Bottom navigation */256  .bottom-nav {257    position: absolute;258    left: 0;259    bottom: 80px;260    width: 100%;261    background: #ffffff;262    border-top: 1px solid #e0e0e0;263    height: 170px;264    display: flex;265    align-items: center;266    justify-content: space-around;267  }268  .nav-item {269    display: flex;270    flex-direction: column;271    align-items: center;272    gap: 12px;273    color: #007185;274    font-size: 32px;275  }276  .nav-item .label {277    font-size: 32px;278  }279  .handle {280    position: absolute;281    left: 50%;282    bottom: 20px;283    transform: translateX(-50%);284    width: 280px;285    height: 14px;286    background: #bdbdbd;287    border-radius: 7px;288    opacity: 0.7;289  }290  /* Simple utility */291  svg {292    display: block;293  }294</style>295</head>296<body>297<div id="render-target">298  <div class="header">299    <div class="search-row">300      <div class="icon-btn">301        <svg width="44" height="44" viewBox="0 0 24 24">302          <path d="M15 19L8 12l7-7" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>303        </svg>304      </div>305      <div class="search-input">306        <div class="placeholder">yoga mats for women</div>307        <div class="scan-btn">308          <svg width="36" height="36" viewBox="0 0 24 24">309            <rect x="4" y="4" width="8" height="8" stroke="#333" stroke-width="2" fill="none"></rect>310            <path d="M3 8V4h4M21 8V4h-4M3 16v4h4M21 16v4h-4" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"></path>311          </svg>312        </div>313      </div>314    </div>315  </div>316 317  <div class="content">318    <span class="deal-pill">Deal</span>319 320    <div class="price-row">321      <div class="discount">-61%</div>322      <div class="price">₹347</div>323    </div>324 325    <div class="mrp">M.R.P.: <span class="strike">₹899</span></div>326 327    <div class="fulfilled">328      <div class="a-icon">a</div>329      Fulfilled330    </div>331 332    <div class="subtext">Inclusive of all taxes</div>333 334    <div class="divider"></div>335 336    <div class="offer-row">337      <div class="offer-left">338        <div class="percent-icon">%</div>339        <div class="offer-text">340          <div class="title">Save Extra with Offers</div>341          <div class="desc">Buy More, Save More, Bank Offers and Part...</div>342        </div>343      </div>344      <svg width="40" height="40" viewBox="0 0 24 24">345        <path d="M6 9l6 6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>346      </svg>347    </div>348 349    <div class="divider"></div>350 351    <div class="shipping">352      <span class="highlight">FREE delivery</span> <strong>Saturday, 30 September</strong> on orders dispatched by Amazon over ₹499. Order within <span class="green">31 mins</span>. <span class="link">Details</span>353    </div>354 355    <div class="location">356      <svg width="36" height="36" viewBox="0 0 24 24">357        <path d="M12 2c3.3 0 6 2.7 6 6 0 4.5-6 12-6 12S6 12.5 6 8c0-3.3 2.7-6 6-6z" stroke="#007185" stroke-width="2" fill="none"></path>358        <circle cx="12" cy="8" r="2" fill="#007185"></circle>359      </svg>360      Select delivery location361    </div>362 363    <div class="stock">In stock</div>364 365    <div class="qty">366      Qty: 1367      <svg width="28" height="28" viewBox="0 0 24 24">368        <path d="M6 9l6 6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>369      </svg>370    </div>371 372    <div class="cta">373      <button class="btn cart">Add to Cart</button>374      <button class="btn buy">Buy Now</button>375    </div>376 377    <div class="secure">378      <svg width="34" height="34" viewBox="0 0 24 24">379        <rect x="5" y="10" width="14" height="10" rx="2" stroke="#007185" stroke-width="2" fill="none"></rect>380        <path d="M8 10V7a4 4 0 018 0v3" stroke="#007185" stroke-width="2" fill="none"></path>381      </svg>382      Secure transaction383    </div>384 385    <div class="seller">386      Sold by <span class="link">RetailEZ Pvt Ltd</span> and <span class="link">Fulfilled by Amazon</span>.387    </div>388 389    <div class="info">390      <strong>Shows what is inside.</strong> Item often ships in manufacturer container to reduce packaging. If this is a gift, consider selecting a different option.391    </div>392  </div>393 394  <div class="bottom-nav">395    <div class="nav-item">396      <svg width="48" height="48" viewBox="0 0 24 24">397        <path d="M3 11l9-7 9 7v9H3z" stroke="#007185" stroke-width="2" fill="none" stroke-linejoin="round"></path>398      </svg>399      <div class="label">Home</div>400    </div>401    <div class="nav-item">402      <svg width="48" height="48" viewBox="0 0 24 24">403        <circle cx="12" cy="8" r="4" stroke="#007185" stroke-width="2" fill="none"></circle>404        <path d="M4 21c1.8-4 6-5 8-5s6.2 1 8 5" stroke="#007185" stroke-width="2" fill="none" stroke-linecap="round"></path>405      </svg>406      <div class="label">You</div>407    </div>408    <div class="nav-item">409      <svg width="48" height="48" viewBox="0 0 24 24">410        <path d="M5 12h14M5 6h14M5 18h14" stroke="#007185" stroke-width="2" fill="none" stroke-linecap="round"></path>411      </svg>412      <div class="label">More</div>413    </div>414    <div class="nav-item">415      <svg width="48" height="48" viewBox="0 0 24 24">416        <path d="M6 6h14l-2 10H8L6 6z" stroke="#007185" stroke-width="2" fill="none"></path>417        <circle cx="9" cy="20" r="2" stroke="#007185" stroke-width="2" fill="none"></circle>418        <circle cx="17" cy="20" r="2" stroke="#007185" stroke-width="2" fill="none"></circle>419      </svg>420      <div class="label">Cart</div>421    </div>422    <div class="nav-item">423      <svg width="48" height="48" viewBox="0 0 24 24">424        <path d="M4 6h16M4 12h16M4 18h16" stroke="#007185" stroke-width="2" fill="none" stroke-linecap="round"></path>425      </svg>426      <div class="label">Menu</div>427    </div>428  </div>429 430  <div class="handle"></div>431</div>432</body>433</html>