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 - Similar Products</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: #F5F5F5;15    color: #212121;16  }17 18  /* Status bar */19  .status-bar {20    height: 110px;21    padding: 0 28px;22    display: flex;23    align-items: center;24    color: #424242;25    font-size: 42px;26  }27  .status-left { flex: 1; }28  .status-icons {29    display: inline-flex;30    gap: 22px;31    align-items: center;32  }33  .icon-dot {34    width: 16px; height: 16px; border-radius: 50%; background: #757575;35    display: inline-block;36  }37 38  /* Video black bar with play */39  .video-bar {40    height: 130px;41    background: #111;42    display: flex;43    align-items: center;44    justify-content: center;45  }46  .play-icon svg { width: 60px; height: 60px; fill: #E0E0E0; }47 48  /* Product image area */49  .image-area {50    position: relative;51    height: 940px;52    background: #E0E0E0;53    border-top: 1px solid #BDBDBD;54    border-bottom: 1px solid #BDBDBD;55    display: flex;56    align-items: center;57    justify-content: center;58    color: #616161;59    font-size: 42px;60  }61 62  .overlay-btn {63    position: absolute;64    right: 24px;65    width: 96px; height: 96px;66    background: #FFF;67    border-radius: 50%;68    box-shadow: 0 4px 10px rgba(0,0,0,0.2);69    display: flex; align-items: center; justify-content: center;70  }71  .overlay-btn svg { width: 46px; height: 46px; fill: #616161; }72 73  .overlay-heart { top: 150px; }74  .overlay-share { top: 270px; }75 76  .carousel-dots {77    position: absolute;78    bottom: 28px;79    left: 0; right: 0;80    display: flex; justify-content: center; gap: 18px;81  }82  .dot {83    width: 20px; height: 20px; border-radius: 50%;84    background: #9E9E9E;85    opacity: 0.6;86  }87  .dot.active { background: #616161; opacity: 1; }88 89  /* Title (partially hidden by sheet) */90  .product-title {91    padding: 28px 36px 24px;92    font-size: 46px;93    line-height: 60px;94    color: #212121;95  }96 97  /* Bottom sheet */98  .sheet {99    position: absolute;100    left: 0; right: 0;101    top: 1120px;102    height: 1280px;103    background: #FFFFFF;104    border-top-left-radius: 28px;105    border-top-right-radius: 28px;106    box-shadow: 0 -6px 20px rgba(0,0,0,0.15);107    display: flex;108    flex-direction: column;109  }110 111  .sheet-header {112    height: 120px;113    display: flex;114    align-items: center;115    padding: 0 24px;116    border-bottom: 1px solid #EEEEEE;117  }118  .close-btn {119    width: 96px; height: 96px; border-radius: 50%;120    display: flex; align-items: center; justify-content: center;121    color: #616161; font-size: 64px; line-height: 1;122  }123 124  .sheet-title-row {125    display: flex;126    align-items: center;127    justify-content: space-between;128    padding: 28px 36px;129  }130  .sheet-title-row h2 {131    margin: 0;132    font-size: 52px;133    font-weight: 700;134    color: #212121;135  }136  .view-all {137    padding: 22px 34px;138    border: 2px solid #E0E0E0;139    border-radius: 14px;140    background: #FFFFFF;141    color: #1565C0;142    font-size: 40px;143  }144 145  /* Cards */146  .cards {147    padding: 10px 24px 0;148    display: flex;149    gap: 26px;150    overflow: hidden;151  }152  .card {153    width: 324px;154  }155  .thumb {156    width: 100%;157    height: 210px;158    background: #E0E0E0;159    border: 1px solid #BDBDBD;160    border-radius: 8px;161    display: flex; align-items: center; justify-content: center;162    color: #757575;163    font-size: 32px;164    position: relative;165  }166  .ad-pill {167    position: absolute;168    top: -16px; left: 16px;169    padding: 6px 16px;170    background: #EEEEEE;171    color: #616161;172    font-size: 28px;173    border-radius: 10px;174    border: 1px solid #E0E0E0;175  }176  .brand {177    margin-top: 18px;178    font-weight: 700;179    color: #424242;180    font-size: 36px;181  }182  .name {183    margin-top: 6px;184    color: #424242;185    font-size: 34px;186    line-height: 44px;187  }188  .price-row {189    margin-top: 8px;190    display: flex; align-items: baseline; gap: 12px;191    flex-wrap: wrap;192  }193  .discount { color: #2E7D32; font-weight: 700; font-size: 34px; }194  .mrp {195    color: #9E9E9E; text-decoration: line-through; font-size: 32px;196  }197  .price { color: #212121; font-weight: 700; font-size: 36px; }198 199  .rating {200    margin-top: 6px; color: #2E7D32; font-size: 34px;201  }202  .rating small { color: #616161; font-size: 28px; }203 204  /* Gesture bar */205  .home-indicator {206    position: absolute;207    bottom: 22px; left: 50%;208    transform: translateX(-50%);209    width: 380px; height: 12px;210    background: rgba(0,0,0,0.85);211    border-radius: 8px;212  }213</style>214</head>215<body>216<div id="render-target">217 218  <!-- Status Bar -->219  <div class="status-bar">220    <div class="status-left">8:52</div>221    <div class="status-icons">222      <span class="icon-dot"></span>223      <span class="icon-dot"></span>224      <span class="icon-dot"></span>225      <span class="icon-dot"></span>226      <span class="icon-dot"></span>227    </div>228  </div>229 230  <!-- Top black video/action bar -->231  <div class="video-bar">232    <div class="play-icon">233      <svg viewBox="0 0 24 24">234        <path d="M8 5v14l11-7z"></path>235      </svg>236    </div>237  </div>238 239  <!-- Product Image -->240  <div class="image-area">241    [IMG: Yellow Speed Hurdles - Product Photo]242    <!-- overlay buttons -->243    <div class="overlay-btn overlay-heart" title="Save">244      <svg viewBox="0 0 24 24">245        <path d="M12 21s-6.7-4.4-9.3-7.1A5.5 5.5 0 0 1 12 5a5.5 5.5 0 0 1 9.3 8.9C18.7 16.6 12 21 12 21z" fill="none" stroke="#616161" stroke-width="2"></path>246      </svg>247    </div>248    <div class="overlay-btn overlay-share" title="Share">249      <svg viewBox="0 0 24 24">250        <path d="M18 8l-6-4v3H6v2h6v3zM6 13h12v7H6z"></path>251      </svg>252    </div>253    <div class="carousel-dots">254      <div class="dot active"></div>255      <div class="dot"></div>256    </div>257  </div>258 259  <!-- Product title (partially visible) -->260  <div class="product-title">261    PEPUP PVC (Polyvinyl Chloride) Speed Hurdles (For Children, Adults Pack of Pack of 6)262  </div>263 264  <!-- Bottom Sheet: Similar Products -->265  <div class="sheet">266    <div class="sheet-header">267      <div class="close-btn" aria-label="Close">×</div>268    </div>269 270    <div class="sheet-title-row">271      <h2>Similar Products</h2>272      <button class="view-all">View all</button>273    </div>274 275    <div class="cards">276      <!-- Card 1 -->277      <div class="card">278        <div class="thumb">279          [IMG: Neon PVC Speed Hurdles]280          <div class="ad-pill">Ad</div>281        </div>282        <div class="brand">Vayu</div>283        <div class="name">PVC Speed Hurdles</div>284        <div class="price-row">285          <span class="discount">49% off</span>286          <span class="mrp">999</span>287          <span class="price">₹501</span>288        </div>289        <div class="rating">★★★★★ <small>(73)</small></div>290      </div>291 292      <!-- Card 2 -->293      <div class="card">294        <div class="thumb">[IMG: Yellow Plastic Hurdles Set]</div>295        <div class="brand">Sahni Sports</div>296        <div class="name">Plastic Speed Hurdles</div>297        <div class="price-row">298          <span class="discount">59% off</span>299          <span class="mrp">2,399</span>300          <span class="price">₹971</span>301        </div>302        <div class="rating">★★★★☆ <small>(9)</small></div>303      </div>304 305      <!-- Card 3 -->306      <div class="card">307        <div class="thumb">[IMG: PVC Hurdles - Mixed Sizes]</div>308        <div class="brand">Vivi5</div>309        <div class="name">PVC Speed Hurdles</div>310        <div class="price-row">311          <span class="discount">50% off</span>312          <span class="mrp">1,500</span>313          <span class="price">₹750</span>314        </div>315        <div class="rating">★★★★★ <small>(56)</small></div>316      </div>317    </div>318  </div>319 320  <!-- Gesture home indicator -->321  <div class="home-indicator"></div>322</div>323</body>324</html>