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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:#222; }9  #render-target {10    position: relative;11    width:1080px;12    height:2400px;13    overflow:hidden;14    background:#ffffff;15  }16 17  /* Status bar */18  .status-bar {19    position: relative;20    height:120px;21    padding:0 32px;22    display:flex;23    align-items:center;24    gap:22px;25    color:#555;26    font-size:40px;27  }28  .dot { width:16px; height:16px; background:#777; border-radius:50%; opacity:.7; display:inline-block; }29  .icon-pill { width:30px; height:30px; background:#9e9e9e; border-radius:50%; display:inline-block; opacity:.7; }30  .status-right {31    margin-left:auto;32    display:flex; gap:20px; align-items:center;33  }34 35  /* Top dark media bar with play icon */36  .media-bar {37    position:absolute; top:120px; left:0; right:0;38    height:110px; background:#121212;39    display:flex; align-items:center; justify-content:center;40  }41 42  /* Hero image placeholder */43  .hero {44    position:absolute; left:0; top:230px;45    width:1080px; height:820px;46    background:#E0E0E0;47    border:1px solid #BDBDBD;48    display:flex; align-items:center; justify-content:center;49    color:#757575; font-size:44px; letter-spacing:.2px;50  }51 52  /* Floating action buttons */53  .fab {54    position:absolute; right:28px;55    width:110px; height:110px; border-radius:55px;56    background:#fff; display:flex; align-items:center; justify-content:center;57    box-shadow:0 8px 16px rgba(0,0,0,.15);58  }59  .fab.heart { top:420px; }60  .fab.share { top:560px; }61 62  /* Carousel dots */63  .dots {64    position:absolute; left:0; right:0; top:1010px;65    display:flex; justify-content:center; gap:16px;66  }67  .dot-lg { width:24px; height:24px; background:#9e9e9e; border-radius:50%; opacity:.6; }68  .dot-lg.inactive { opacity:.35; }69 70  /* Title snippet (partially hidden by sheet) */71  .title {72    position:absolute; top:1060px; left:36px; right:36px;73    font-size:46px; line-height:58px; color:#111;74  }75 76  /* Bottom sheet */77  .sheet {78    position:absolute; left:0; right:0; bottom:0;79    height:1180px; background:#fff; border-top-left-radius:28px; border-top-right-radius:28px;80    box-shadow:0 -12px 24px rgba(0,0,0,.15);81    overflow:hidden;82  }83  .sheet-header {84    display:flex; align-items:center;85    padding:28px 32px;86    border-bottom:1px solid #eee;87  }88  .close-btn {89    width:72px; height:72px; border-radius:36px;90    display:flex; align-items:center; justify-content:center;91    color:#444;92  }93  .sheet-title {94    font-size:48px; font-weight:600; margin-left:12px;95  }96  .spacer { flex:1; }97  .outline-btn {98    padding:20px 34px; border:2px solid #d6d6f8; color:#4f46e5; border-radius:12px;99    font-weight:600; background:#fff; font-size:36px;100  }101 102  .cards-wrap {103    position:relative;104    padding:28px 0 0 28px;105  }106  .ad-pill {107    position:absolute; right:40px; top:20px;108    background:#f1f1f1; color:#707070; border-radius:12px;109    padding:12px 18px; font-size:30px; font-weight:600;110  }111  .h-scroll {112    display:flex; gap:36px; overflow-x:auto; padding:20px 28px 40px 0;113  }114  .card {115    min-width:300px; max-width:300px;116  }117  .img-ph {118    width:100%; height:260px; background:#E0E0E0; border:1px solid #BDBDBD;119    display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px; text-align:center; padding:10px;120    border-radius:10px;121  }122  .brand { margin-top:16px; color:#555; font-size:30px; }123  .name { font-size:34px; line-height:40px; color:#111; margin-top:6px; }124  .price-row { margin-top:10px; display:flex; align-items:baseline; gap:10px; }125  .discount { color:#00a651; font-weight:700; font-size:32px; }126  .mrp { color:#9e9e9e; text-decoration:line-through; font-size:28px; }127  .price { font-size:36px; font-weight:700; }128  .stars { display:flex; align-items:center; gap:4px; margin-top:8px; }129  .count { color:#666; font-size:28px; margin-left:8px; }130  .gesture {131    position:absolute; left:50%; transform:translateX(-50%);132    bottom:20px; width:300px; height:12px; background:#000; opacity:.18; border-radius:8px;133  }134 135  /* Simple scrollbar hiding hint for cleaner look */136  .h-scroll::-webkit-scrollbar { height:0; }137</style>138</head>139<body>140<div id="render-target">141 142  <!-- Status bar -->143  <div class="status-bar">144    <div style="font-weight:600;">8:52</div>145    <span class="icon-pill"></span>146    <span class="icon-pill"></span>147    <span class="icon-pill"></span>148    <span class="icon-pill"></span>149    <span class="dot"></span>150    <div class="status-right">151      <span class="icon-pill"></span>152      <span class="icon-pill"></span>153    </div>154  </div>155 156  <!-- Media dark bar with play icon -->157  <div class="media-bar">158    <svg width="80" height="80" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">159      <path d="M8 5v14l11-7z"></path>160    </svg>161  </div>162 163  <!-- Product hero image -->164  <div class="hero">[IMG: Yellow Speed Hurdles]</div>165 166  <!-- Floating buttons -->167  <div class="fab heart" aria-label="Add to wishlist">168    <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">169      <path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 1 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z"/>170    </svg>171  </div>172  <div class="fab share" aria-label="Share">173    <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">174      <path d="M4 12v7a1 1 0 0 0 1 1h14"/>175      <path d="M12 16V4"/>176      <path d="M7 9l5-5 5 5"/>177    </svg>178  </div>179 180  <!-- Carousel dots -->181  <div class="dots">182    <div class="dot-lg"></div>183    <div class="dot-lg inactive"></div>184  </div>185 186  <!-- Title snippet -->187  <div class="title">188    PEPUP PVC (Polyvinyl Chloride) Speed Hurdles (For Children, Adults Pack of Pack of 6)189  </div>190 191  <!-- Bottom Sheet: Similar Products -->192  <div class="sheet">193    <div class="sheet-header">194      <div class="close-btn" aria-label="Close">195        <svg width="40" height="40" viewBox="0 0 24 24" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round">196          <path d="M4 4L20 20M20 4L4 20"></path>197        </svg>198      </div>199      <div class="sheet-title">Similar Products</div>200      <div class="spacer"></div>201      <button class="outline-btn">View all</button>202    </div>203 204    <div class="cards-wrap">205      <div class="ad-pill">Ad</div>206      <div class="h-scroll">207 208        <!-- Card 1 -->209        <div class="card">210          <div class="img-ph">[IMG: Lime Speed Hurdles Set]</div>211          <div class="brand">Vivi5</div>212          <div class="name">PVC Speed Hurdles</div>213          <div class="price-row">214            <div class="discount">50% off</div>215            <div class="mrp">1,500</div>216            <div class="price">₹749</div>217          </div>218          <div class="stars">219            <!-- 5 green stars -->220            <svg width="28" height="28" viewBox="0 0 24 24" fill="#13ae39"><path d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6.1 3 6.1 7 1-5 4.8 1.2 6.9z"/></svg>221            <svg width="28" height="28" viewBox="0 0 24 24" fill="#13ae39"><path d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6.1 3 6.1 7 1-5 4.8 1.2 6.9z"/></svg>222            <svg width="28" height="28" viewBox="0 0 24 24" fill="#13ae39"><path d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6.1 3 6.1 7 1-5 4.8 1.2 6.9z"/></svg>223            <svg width="28" height="28" viewBox="0 0 24 24" fill="#13ae39"><path d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6.1 3 6.1 7 1-5 4.8 1.2 6.9z"/></svg>224            <svg width="28" height="28" viewBox="0 0 24 24" fill="#13ae39"><path d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6.1 3 6.1 7 1-5 4.8 1.2 6.9z"/></svg>225            <div class="count">(3)</div>226          </div>227        </div>228 229        <!-- Card 2 -->230        <div class="card">231          <div class="img-ph">[IMG: Neon Hurdles - Side Angle]</div>232          <div class="brand">Kiraro</div>233          <div class="name">PVC Speed Hurdles</div>234          <div class="price-row">235            <div class="discount">62% off</div>236            <div class="mrp">1,999</div>237            <div class="price">₹751</div>238          </div>239          <div class="stars">240            <svg width="28" height="28" viewBox="0 0 24 24" fill="#13ae39"><path d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6.1 3 6.1 7 1-5 4.8 1.2 6.9z"/></svg>241            <svg width="28" height="28" viewBox="0 0 24 24" fill="#13ae39"><path d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6.1 3 6.1 7 1-5 4.8 1.2 6.9z"/></svg>242            <svg width="28" height="28" viewBox="0 0 24 24" fill="#13ae39"><path d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6.1 3 6.1 7 1-5 4.8 1.2 6.9z"/></svg>243            <svg width="28" height="28" viewBox="0 0 24 24" fill="#13ae39"><path d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6.1 3 6.1 7 1-5 4.8 1.2 6.9z"/></svg>244            <svg width="28" height="28" viewBox="0 0 24 24" fill="#13ae39"><path d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6.1 3 6.1 7 1-5 4.8 1.2 6.9z"/></svg>245            <div class="count">(6)</div>246          </div>247        </div>248 249        <!-- Card 3 -->250        <div class="card">251          <div class="img-ph">[IMG: Orange Speed Hurdles]</div>252          <div class="brand">Sahni Sports</div>253          <div class="name">Speed Hurdles</div>254          <div class="price-row">255            <div class="discount">30% off</div>256            <div class="mrp">2,199</div>257            <div class="price">₹1,539</div>258          </div>259          <div class="stars">260            <svg width="28" height="28" viewBox="0 0 24 24" fill="#13ae39"><path d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6.1 3 6.1 7 1-5 4.8 1.2 6.9z"/></svg>261            <svg width="28" height="28" viewBox="0 0 24 24" fill="#13ae39"><path d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6.1 3 6.1 7 1-5 4.8 1.2 6.9z"/></svg>262            <svg width="28" height="28" viewBox="0 0 24 24" fill="#13ae39"><path d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6.1 3 6.1 7 1-5 4.8 1.2 6.9z"/></svg>263            <svg width="28" height="28" viewBox="0 0 24 24" fill="#13ae39"><path d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6.1 3 6.1 7 1-5 4.8 1.2 6.9z"/></svg>264            <svg width="28" height="28" viewBox="0 0 24 24" fill="#13ae39"><path d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6.1 3 6.1 7 1-5 4.8 1.2 6.9z"/></svg>265            <div class="count">(12)</div>266          </div>267        </div>268 269        <!-- Card 4 -->270        <div class="card">271          <div class="img-ph">[IMG: Yellow Hurdles - Bundle]</div>272          <div class="brand">AthletiX</div>273          <div class="name">Training Speed Hurdles</div>274          <div class="price-row">275            <div class="discount">45% off</div>276            <div class="mrp">1,899</div>277            <div class="price">₹1,045</div>278          </div>279          <div class="stars">280            <svg width="28" height="28" viewBox="0 0 24 24" fill="#13ae39"><path d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6.1 3 6.1 7 1-5 4.8 1.2 6.9z"/></svg>281            <svg width="28" height="28" viewBox="0 0 24 24" fill="#13ae39"><path d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6.1 3 6.1 7 1-5 4.8 1.2 6.9z"/></svg>282            <svg width="28" height="28" viewBox="0 0 24 24" fill="#13ae39"><path d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6.1 3 6.1 7 1-5 4.8 1.2 6.9z"/></svg>283            <svg width="28" height="28" viewBox="0 0 24 24" fill="#13ae39"><path d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6.1 3 6.1 7 1-5 4.8 1.2 6.9z"/></svg>284            <svg width="28" height="28" viewBox="0 0 24 24" fill="#13ae39"><path d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l7-1 3-6.1 3 6.1 7 1-5 4.8 1.2 6.9z"/></svg>285            <div class="count">(8)</div>286          </div>287        </div>288 289      </div>290    </div>291    <div class="gesture"></div>292  </div>293 294</div>295</body>296</html>