GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1440, 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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13    color: #111;14    -webkit-font-smoothing: antialiased;15    -moz-osx-font-smoothing: grayscale;16  }17 18  #render-target {19    width: 1440px;20    height: 3120px;21    position: relative;22    overflow: hidden;23    background: #ffffff;24  }25 26  /* Top dark area */27  .topbar {28    width: 100%;29    background: #1f1f1f;30    color: #fff;31    padding-top: 24px;32    box-sizing: border-box;33  }34  .status-row, .toolbar {35    display: flex;36    align-items: center;37    padding: 24px 40px;38  }39  .status-row {40    justify-content: space-between;41    font-weight: 600;42    font-size: 42px;43    line-height: 1;44  }45  .status-icons {46    display: flex;47    align-items: center;48    gap: 26px;49  }50  .toolbar {51    justify-content: space-between;52    padding-top: 16px;53    padding-bottom: 36px;54  }55  .toolbar-left, .toolbar-right {56    display: flex;57    align-items: center;58    gap: 36px;59  }60  .icon {61    width: 56px;62    height: 56px;63    display: inline-flex;64  }65  .icon svg {66    width: 100%;67    height: 100%;68    stroke: currentColor;69    fill: none;70    stroke-width: 4;71    stroke-linecap: round;72    stroke-linejoin: round;73  }74 75  /* Content area */76  .content {77    padding: 36px 40px 220px;78    box-sizing: border-box;79    background: #fff;80  }81 82  .card {83    background: #fff;84    border: 1px solid #E6E6E6;85    border-radius: 28px;86    padding: 36px;87    box-sizing: border-box;88    margin-bottom: 28px;89  }90 91  .address-card {92    display: flex;93    align-items: center;94    justify-content: space-between;95    font-size: 44px;96    font-weight: 600;97    color: #2b2b2b;98  }99  .address-card .change {100    color: #E91E63;101    font-weight: 700;102    margin-left: 28px;103    white-space: nowrap;104  }105  .address-div {106    flex: 1;107  }108  .v-divider {109    width: 2px;110    height: 64px;111    background: #E6E6E6;112    margin: 0 24px;113  }114 115  .info-row {116    display: flex;117    align-items: center;118    gap: 24px;119    font-size: 38px;120    color: #4A4A4A;121    margin: 22px 0;122  }123  .info-row strong {124    color: #111;125  }126  .info-row .sub {127    color: #E91E63;128    font-weight: 700;129    margin-left: 10px;130  }131 132  .sold-card {133    display: flex;134    align-items: center;135    justify-content: space-between;136    font-size: 44px;137    font-weight: 700;138  }139  .chevron {140    width: 44px;141    height: 44px;142  }143  .chevron svg {144    width: 100%;145    height: 100%;146    stroke: #6b6b6b;147    fill: none;148    stroke-width: 4;149  }150 151  .section-card .section-header {152    display: flex;153    align-items: center;154    justify-content: space-between;155    font-size: 46px;156    font-weight: 800;157    margin-bottom: 16px;158  }159  .section-card .desc {160    font-size: 34px;161    line-height: 1.6;162    color: #666;163    margin-bottom: 26px;164  }165 166  .specs {167    display: grid;168    grid-template-columns: 1fr 1fr;169    gap: 18px 28px;170    align-items: center;171  }172  .chip {173    display: inline-flex;174    align-items: center;175    padding: 18px 24px;176    border-radius: 18px;177    background: linear-gradient(90deg, #E7F3F3, rgba(231,243,243,0));178    color: #2c6f6a;179    font-weight: 700;180    font-size: 32px;181    border: 1px solid #d8e7e6;182    width: fit-content;183  }184  .spec-val {185    font-size: 34px;186    color: #444;187  }188 189  .divider {190    width: 100%;191    height: 2px;192    background: #EDEDED;193    margin: 24px 0 30px;194  }195 196  .overview-card .section-header,197  .product-heading {198    font-size: 48px;199    font-weight: 800;200    color: #1a1a1a;201  }202 203  .brand-block {204    background: linear-gradient(180deg, #FCE7EF 0%, #FFEFF6 100%);205    border-radius: 28px;206    padding: 20px;207    margin-top: 16px;208  }209  .brand-inner {210    background: #fff;211    border: 1px solid #F1D7E3;212    border-radius: 28px;213    padding: 28px;214  }215  .brand-top {216    display: grid;217    grid-template-columns: 220px 1fr;218    gap: 28px;219    align-items: center;220    margin-bottom: 14px;221  }222  .img-placeholder {223    width: 220px;224    height: 120px;225    background: #E0E0E0;226    border: 1px solid #BDBDBD;227    border-radius: 12px;228    display: flex;229    align-items: center;230    justify-content: center;231    color: #757575;232    font-weight: 700;233    font-size: 28px;234    text-align: center;235  }236  .brand-name {237    font-size: 42px;238    font-weight: 800;239    color: #1a1a1a;240  }241  .brand-desc {242    font-size: 34px;243    line-height: 1.6;244    color: #555;245  }246 247  /* Bottom actions */248  .bottom-actions {249    position: absolute;250    bottom: 110px;251    left: 40px;252    right: 40px;253    display: grid;254    grid-template-columns: 1fr 1.2fr;255    gap: 28px;256  }257  .btn {258    height: 140px;259    border-radius: 24px;260    font-size: 44px;261    font-weight: 800;262    display: flex;263    align-items: center;264    justify-content: center;265    gap: 22px;266    cursor: default;267  }268  .btn-outline {269    border: 2px solid #E6E6E6;270    color: #333;271    background: #fff;272  }273  .btn-primary {274    background: #E21455;275    color: #fff;276  }277 278  .heart-icon {279    width: 52px;280    height: 52px;281  }282  .home-indicator {283    position: absolute;284    left: 50%;285    transform: translateX(-50%);286    bottom: 34px;287    width: 360px;288    height: 14px;289    background: #000;290    opacity: 0.15;291    border-radius: 10px;292  }293</style>294</head>295<body>296<div id="render-target">297  <!-- Dark top area -->298  <div class="topbar">299    <div class="status-row">300      <div>9:45</div>301      <div class="status-icons">302        <!-- simple search-looking placeholder in status, then alert, then wifi/battery - stylistic -->303        <span class="icon" aria-hidden="true">304          <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#fff"></circle><line x1="16" y1="16" x2="22" y2="22" stroke="#fff"></line></svg>305        </span>306        <span class="icon" aria-hidden="true">307          <svg viewBox="0 0 24 24"><path d="M12 3L2 21h20L12 3z" stroke="#fff"></path><line x1="12" y1="9" x2="12" y2="13" stroke="#fff"></line><circle cx="12" cy="17" r="1.4" fill="#fff" stroke="none"></circle></svg>308        </span>309        <span class="icon" aria-hidden="true">310          <svg viewBox="0 0 24 24"><path d="M2 10c5-5 15-5 20 0" stroke="#fff"></path><path d="M6 14c3-3 9-3 12 0" stroke="#fff"></path><circle cx="12" cy="18" r="1.4" fill="#fff" stroke="none"></circle></svg>311        </span>312        <span class="icon" aria-hidden="true">313          <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2" stroke="#fff"></rect><rect x="8" y="3" width="8" height="3" rx="1.2" fill="#fff" stroke="none"></rect></svg>314        </span>315      </div>316    </div>317    <div class="toolbar">318      <div class="toolbar-left">319        <span class="icon" aria-label="Back">320          <svg viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7" stroke="#fff"></path></svg>321        </span>322      </div>323      <div class="toolbar-right">324        <span class="icon">325          <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#fff"></circle><line x1="16" y1="16" x2="22" y2="22" stroke="#fff"></line></svg>326        </span>327        <span class="icon">328          <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z" stroke="#fff"></path></svg>329        </span>330        <span class="icon">331          <svg viewBox="0 0 24 24"><circle cx="12" cy="9" r="4" stroke="#fff"></circle><path d="M4 22a8 8 0 0 1 16 0" stroke="#fff"></path></svg>332        </span>333      </div>334    </div>335  </div>336 337  <!-- Main content -->338  <div class="content">339    <!-- Address -->340    <div class="card address-card">341      <div class="address-div">Delhi, 110001</div>342      <div class="v-divider"></div>343      <div class="change">Change</div>344    </div>345 346    <!-- Delivery info -->347    <div class="info-row">348      <span class="icon" style="width:56px;height:56px;color:#555">349        <svg viewBox="0 0 24 24"><rect x="1" y="5" width="13" height="10" rx="2" stroke="#555"></rect><path d="M14 8h4l4 4v3h-4" stroke="#555"></path><circle cx="6" cy="18" r="2" stroke="#555"></circle><circle cx="18" cy="18" r="2" stroke="#555"></circle></svg>350      </span>351      <span>Delivery by <strong>1st Dec</strong></span>352    </div>353 354    <div class="info-row">355      <span class="icon" style="width:56px;height:56px;color:#555">356        <svg viewBox="0 0 24 24"><path d="M12 6v6l4 2" stroke="#555"></path><circle cx="12" cy="12" r="9" stroke="#555"></circle></svg>357      </span>358      <span><strong>15 Days Easy Return</strong> <span class="sub">Know More</span></span>359    </div>360 361    <!-- Sold by -->362    <div class="card sold-card">363      <div>Sold by RedTape Limited</div>364      <div class="chevron">365        <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" /></svg>366      </div>367    </div>368 369    <div class="divider"></div>370 371    <!-- Product Details expanded -->372    <div class="card section-card">373      <div class="section-header">374        <div>Product Details</div>375        <span class="icon" style="width:44px;height:44px;color:#666">376          <svg viewBox="0 0 24 24"><path d="M6 10l6 6 6-6" stroke="#666" fill="none" stroke-width="3"></path></svg>377        </span>378      </div>379      <div class="desc">380        A perfect pair for your aerobic workout session, this pair of white running shoes from Red Tape is designed for absolute comfort and robust performance. The ...381      </div>382      <div class="specs">383        <div class="chip">Sole Material</div>384        <div class="spec-val">EVA</div>385        <div class="chip">Color Family</div>386        <div class="spec-val">White</div>387      </div>388    </div>389 390    <!-- Product Overview collapsed -->391    <div class="card overview-card">392      <div class="section-header">393        <div>Product Overview</div>394        <span class="icon" style="width:44px;height:44px;color:#666">395          <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#666" fill="none" stroke-width="3"></path></svg>396        </span>397      </div>398    </div>399 400    <div class="divider"></div>401 402    <div class="product-heading" style="margin: 36px 8px 16px;">Product Details</div>403 404    <!-- Brand block -->405    <div class="brand-block">406      <div class="brand-inner">407        <div class="brand-top">408          <div class="img-placeholder">[IMG: REDTAPE Logo]</div>409          <div class="brand-name">Red Tape</div>410        </div>411        <div class="brand-desc">412          A perfect amalgamation of unparalleled comfort and latest fashion trends, Red Tape is an undisputed leader in the high-end footwear segment.413        </div>414      </div>415    </div>416  </div>417 418  <!-- Bottom action bar -->419  <div class="bottom-actions">420    <div class="btn btn-outline">421      <span class="heart-icon">422        <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z" stroke="#333" fill="none" stroke-width="2.2"></path></svg>423      </span>424      Wishlist425    </div>426    <div class="btn btn-primary">Add to Bag</div>427  </div>428 429  <div class="home-indicator"></div>430</div>431</body>432</html>