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 { margin: 0; padding: 0; background: transparent; font-family: Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #f1f3f4;15    box-shadow: 0 0 0 rgba(0,0,0,0);16    border-radius: 0;17  }18  /* Top bars */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 100px;25    background: #1976d2;26    color: #fff;27    display: flex;28    align-items: center;29    padding: 0 32px;30    box-sizing: border-box;31    font-size: 36px;32    letter-spacing: 0.5px;33  }34  .status-right {35    margin-left: auto;36    display: flex;37    align-items: center;38    gap: 24px;39    font-weight: 600;40  }41  .app-bar {42    position: absolute;43    top: 100px;44    left: 0;45    width: 1080px;46    height: 140px;47    background: #1976d2;48    color: #fff;49    display: flex;50    align-items: center;51    padding: 0 32px;52    box-sizing: border-box;53    box-shadow: 0 2px 0 rgba(0,0,0,0.08);54  }55  .app-bar svg { margin-right: 28px; }56  .title {57    font-size: 44px;58    font-weight: 600;59    white-space: nowrap;60    overflow: hidden;61    text-overflow: ellipsis;62  }63 64  /* Content */65  .content {66    position: absolute;67    top: 240px;68    left: 0;69    width: 1080px;70    padding: 24px 20px 240px;71    box-sizing: border-box;72  }73  .card {74    background: #fff;75    border-radius: 10px;76    box-shadow: 0 1px 0 rgba(0,0,0,0.08);77    border: 1px solid #e0e0e0;78  }79  .product-card {80    display: flex;81    padding: 24px;82    align-items: center;83    gap: 24px;84  }85  .img-placeholder {86    width: 220px;87    height: 170px;88    background: #E0E0E0;89    border: 1px solid #BDBDBD;90    display: flex;91    justify-content: center;92    align-items: center;93    color: #757575;94    font-size: 28px;95  }96  .prod-info {97    flex: 1;98  }99  .prod-title {100    font-size: 38px;101    font-weight: 700;102    margin-bottom: 8px;103    color: #212121;104  }105  .prod-sub {106    font-size: 30px;107    color: #9e9e9e;108    margin-bottom: 12px;109  }110  .price-row {111    display: flex;112    align-items: baseline;113    gap: 18px;114    font-size: 36px;115  }116  .strike {117    color: #b0b0b0;118    text-decoration: line-through;119    font-weight: 600;120  }121  .new-price {122    color: #212121;123    font-weight: 800;124  }125  .off {126    color: #2e7d32;127    font-size: 32px;128    font-weight: 700;129  }130 131  .pincode-row {132    margin-top: 24px;133    padding: 28px 24px;134    display: flex;135    align-items: center;136    justify-content: space-between;137  }138  .pin-text {139    font-size: 34px;140    color: #424242;141  }142  .pin-btn {143    background: #fff;144    border: 2px solid #dadce0;145    color: #1976d2;146    border-radius: 8px;147    padding: 18px 28px;148    font-size: 34px;149    font-weight: 700;150  }151 152  .seller-card {153    margin-top: 24px;154    padding: 28px 24px 32px;155    position: relative;156  }157  .seller-top {158    display: flex;159    align-items: center;160    gap: 18px;161    margin-bottom: 18px;162  }163  .seller-name {164    font-size: 34px;165    font-weight: 800;166    color: #1976d2;167  }168  .rating-pill {169    display: inline-flex;170    align-items: center;171    gap: 8px;172    background: #1976d2;173    color: #fff;174    border-radius: 22px;175    padding: 6px 12px;176    font-size: 28px;177    font-weight: 700;178  }179  .radio {180    position: absolute;181    right: 24px;182    top: 28px;183    width: 46px;184    height: 46px;185    border: 5px solid #1976d2;186    border-radius: 50%;187    background: #fff;188  }189  .green-title {190    color: #2e7d32;191    font-size: 36px;192    font-weight: 800;193    margin-top: 4px;194  }195  .seller-price-row {196    display: flex;197    align-items: baseline;198    gap: 18px;199    margin: 10px 0;200  }201  .seller-sub {202    font-size: 32px;203    color: #757575;204    margin: 6px 0;205  }206  .assured-badge {207    display: inline-block;208    background: #e3f2fd;209    color: #1976d2;210    border: 1px solid #90caf9;211    border-radius: 18px;212    padding: 6px 14px;213    font-size: 30px;214    font-weight: 800;215  }216  .benefit-row {217    margin-top: 24px;218    padding-top: 20px;219    border-top: 1px solid #ececec;220    display: flex;221    align-items: center;222    gap: 16px;223    color: #424242;224    font-size: 32px;225  }226  .tag-icon {227    width: 36px; height: 36px;228  }229 230  /* Bottom purchase bar */231  .purchase-bar {232    position: absolute;233    left: 0;234    right: 0;235    bottom: 120px;236    height: 140px;237    display: flex;238    box-shadow: 0 -1px 0 rgba(0,0,0,0.08);239    border-top: 1px solid #e0e0e0;240  }241  .btn-cart, .btn-buy {242    flex: 1;243    display: flex;244    align-items: center;245    justify-content: center;246    font-size: 40px;247    font-weight: 800;248  }249  .btn-cart {250    background: #ffffff;251    color: #212121;252  }253  .btn-buy {254    background: #ff6f00;255    color: #ffffff;256  }257 258  /* Gesture bar area */259  .gesture-area {260    position: absolute;261    bottom: 0;262    left: 0;263    width: 1080px;264    height: 120px;265    background: #000;266    display: flex;267    align-items: center;268    justify-content: center;269  }270  .gesture-pill {271    width: 300px;272    height: 12px;273    background: #c7c7c7;274    border-radius: 6px;275  }276</style>277</head>278<body>279<div id="render-target">280  <!-- Status bar -->281  <div class="status-bar">282    <div>8:38</div>283    <div class="status-right">284      <span>LR</span>285      <span style="width:22px;height:22px;border:2px solid #fff;border-radius:3px;display:inline-block;"></span>286      <span style="display:flex;align-items:center;gap:8px;">287        <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff"><path d="M12 3l8 8-8 8-8-8 8-8z"/></svg>288        32%289      </span>290    </div>291  </div>292 293  <!-- App bar -->294  <div class="app-bar">295    <svg width="48" height="48" viewBox="0 0 24 24" fill="#fff"><path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>296    <div class="title">URBANBOX Trending Stylish Casual Outdo...</div>297  </div>298 299  <!-- Content -->300  <div class="content">301    <!-- Product card -->302    <div class="card product-card">303      <div class="img-placeholder">[IMG: White Casual Shoes]</div>304      <div class="prod-info">305        <div class="prod-title">URBANBOX Trending Stylish Casual...</div>306        <div class="prod-sub">Size: 7 White, Black</div>307        <div class="price-row">308          <div class="strike">495</div>309          <div class="new-price">₹448</div>310          <div class="off">55% off</div>311        </div>312      </div>313    </div>314 315    <!-- Pincode row -->316    <div class="card pincode-row">317      <div class="pin-text">Find a seller that delivers to you</div>318      <div class="pin-btn">Enter pincode</div>319    </div>320 321    <!-- Seller card -->322    <div class="card seller-card">323      <div class="seller-top">324        <div class="seller-name">ONLINETRUSTEDSELLER</div>325        <div class="rating-pill">326          4.7327          <svg width="22" height="22" viewBox="0 0 24 24" fill="#fff"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>328        </div>329      </div>330      <div class="radio"></div>331 332      <div class="green-title">Special Price</div>333      <div class="seller-price-row">334        <div class="strike">495</div>335        <div class="new-price">₹448</div>336        <div class="off">55% off</div>337      </div>338      <div class="seller-sub">Debit/Credit Card</div>339      <div class="seller-sub">Usually delivered in <span class="assured-badge">Assured</span></div>340 341      <div class="benefit-row">342        <svg class="tag-icon" viewBox="0 0 24 24" fill="#2e7d32"><path d="M20 10l-8-8H4v8l8 8 8-8zM6 6h4V4H6v2z"/></svg>343        <span>Special Price & more</span>344      </div>345    </div>346  </div>347 348  <!-- Purchase bar -->349  <div class="purchase-bar">350    <div class="btn-cart">Add to cart</div>351    <div class="btn-buy">Buy Now</div>352  </div>353 354  <!-- Gesture area -->355  <div class="gesture-area">356    <div class="gesture-pill"></div>357  </div>358</div>359</body>360</html>