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 - Canvas Trainers</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: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0; left: 0;21    width: 100%;22    height: 130px;23    background: #CFCFCF;24    display: flex;25    align-items: center;26    padding: 0 36px;27    box-sizing: border-box;28    color: #ffffff;29    font-size: 46px;30    letter-spacing: 0.5px;31  }32  .status-right {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 28px;37  }38  .status-icon svg { display: block; }39 40  /* Hero image placeholder */41  .hero {42    position: absolute;43    top: 130px;44    left: 0;45    width: 100%;46    height: 1350px;47    background: #E0E0E0;48    border-bottom: 1px solid #BDBDBD;49    border-top: 1px solid #BDBDBD;50    display: flex;51    justify-content: center;52    align-items: flex-end;53  }54  .hero-label {55    position: absolute;56    top: 420px;57    left: 50%;58    transform: translateX(-50%);59    color: #757575;60    font-size: 36px;61    background: rgba(255,255,255,0.6);62    padding: 10px 18px;63    border: 1px solid #BDBDBD;64  }65 66  /* Overlay round icons */67  .circle-icon {68    position: absolute;69    width: 110px;70    height: 110px;71    border-radius: 50%;72    background: #ffffff;73    border: 2px solid #D9D9D9;74    display: flex;75    justify-content: center;76    align-items: center;77  }78  .back-btn { left: 28px; top: 250px; }79  .right-btn-1 { right: 28px; top: 250px; }80  .right-btn-2 { right: 28px; top: 410px; }81  .circle-icon svg { width: 48px; height: 48px; }82 83  /* Slider dots */84  .dots {85    position: absolute;86    bottom: 60px;87    left: 50%;88    transform: translateX(-50%);89    display: flex;90    gap: 24px;91  }92  .dot {93    width: 18px;94    height: 18px;95    border-radius: 50%;96    background: rgba(255,255,255,0.55);97  }98  .dot.active {99    background: #ffffff;100    width: 20px;101    height: 20px;102  }103 104  /* Info section */105  .info {106    position: absolute;107    top: 1480px;108    left: 0;109    width: 100%;110    background: #ffffff;111    padding: 48px 48px 24px 48px;112    box-sizing: border-box;113    border-top: 1px solid #EEEEEE;114  }115  .share {116    position: absolute;117    top: 48px;118    right: 48px;119  }120  .title {121    font-size: 52px;122    font-weight: 700;123    color: #111111;124    margin: 0 0 18px 0;125  }126  .rating {127    display: flex;128    align-items: center;129    gap: 12px;130    margin-bottom: 34px;131    color: #111;132  }133  .stars {134    font-size: 36px;135    letter-spacing: 2px;136  }137  .reviews {138    font-size: 34px;139  }140  .reviews a { color: #111; text-decoration: underline; }141 142  .price-row {143    display: flex;144    align-items: center;145    gap: 24px;146    position: relative;147    padding-right: 220px;148  }149  .price {150    color: #E80038;151    font-size: 56px;152    font-weight: 700;153  }154  .old-price {155    color: #5c5c5c;156    font-size: 40px;157    text-decoration: line-through;158  }159  .badge {160    position: absolute;161    right: 0;162    top: 0;163    background: #C91322;164    color: #fff;165    font-size: 40px;166    font-weight: 700;167    padding: 18px 28px;168    border-radius: 8px;169  }170 171  /* Action bar */172  .actions {173    position: absolute;174    left: 0;175    right: 0;176    top: 1750px;177    padding: 36px 36px 0 36px;178    box-sizing: border-box;179  }180  .action-row {181    display: flex;182    gap: 28px;183  }184  .select-box {185    flex: 1;186    height: 120px;187    border: 2px solid #CFCFCF;188    display: flex;189    align-items: center;190    justify-content: space-between;191    padding: 0 28px;192    box-sizing: border-box;193    border-radius: 6px;194    color: #555;195    font-size: 38px;196    background: #ffffff;197  }198  .add-btn {199    width: 460px;200    height: 120px;201    background: #111111;202    color: #fff;203    border: none;204    border-radius: 6px;205    font-size: 44px;206    font-weight: 700;207    display: flex;208    align-items: center;209    justify-content: center;210    gap: 16px;211  }212  .add-btn svg { width: 42px; height: 42px; fill: none; stroke: #fff; stroke-width: 3; }213 214  /* Home indicator */215  .home-indicator {216    position: absolute;217    bottom: 28px;218    left: 50%;219    transform: translateX(-50%);220    width: 320px;221    height: 12px;222    border-radius: 8px;223    background: #000000;224    opacity: 0.35;225  }226</style>227</head>228<body>229<div id="render-target">230 231  <!-- Status bar -->232  <div class="status-bar">233    <div>1:02</div>234    <div class="status-right">235      <div class="status-icon">236        <svg width="44" height="44" viewBox="0 0 24 24">237          <path d="M3 10c4-4 14-4 18 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>238          <path d="M6 13c3-3 9-3 12 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>239          <path d="M9 16c2-2 4-2 6 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>240        </svg>241      </div>242      <div class="status-icon">243        <svg width="54" height="44" viewBox="0 0 28 14">244          <rect x="1" y="1" width="22" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>245          <rect x="24" y="5" width="3" height="4" fill="#fff"/>246        </svg>247      </div>248    </div>249  </div>250 251  <!-- Hero image placeholder -->252  <div class="hero">253    <div class="hero-label">[IMG: White canvas shoes on feet]</div>254 255    <!-- Overlay icons -->256    <div class="circle-icon back-btn">257      <svg viewBox="0 0 24 24">258        <path d="M15 6 L9 12 L15 18" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>259      </svg>260    </div>261 262    <div class="circle-icon right-btn-1">263      <svg viewBox="0 0 24 24">264        <rect x="6" y="8" width="12" height="10" rx="2" ry="2" stroke="#111" stroke-width="2" fill="none"/>265        <path d="M8 8c0-3 2-4 4-4s4 1 4 4" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>266      </svg>267    </div>268 269    <div class="circle-icon right-btn-2">270      <svg viewBox="0 0 24 24">271        <path d="M12 20s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z" stroke="#111" stroke-width="2" fill="none" stroke-linejoin="round"/>272      </svg>273    </div>274 275    <!-- Dots -->276    <div class="dots">277      <div class="dot"></div>278      <div class="dot active"></div>279      <div class="dot"></div>280      <div class="dot"></div>281      <div class="dot"></div>282      <div class="dot"></div>283      <div class="dot"></div>284    </div>285  </div>286 287  <!-- Product information -->288  <div class="info">289    <div class="share">290      <svg width="48" height="48" viewBox="0 0 24 24">291        <circle cx="18" cy="5" r="2" fill="#111"/>292        <circle cx="6" cy="12" r="2" fill="#111"/>293        <circle cx="18" cy="19" r="2" fill="#111"/>294        <path d="M7.8 11.2 L16.2 6.8" stroke="#111" stroke-width="2" fill="none"/>295        <path d="M7.8 12.8 L16.2 17.2" stroke="#111" stroke-width="2" fill="none"/>296      </svg>297    </div>298 299    <h1 class="title">Canvas trainers</h1>300 301    <div class="rating">302      <div class="stars">★ ★ ★ ★ ☆</div>303      <div class="reviews"><a href="#">(10 reviews)</a></div>304    </div>305 306    <div class="price-row">307      <div class="price">Rs. 719.00</div>308      <div class="old-price">Rs. 1,299.00</div>309      <div class="badge">-45%</div>310    </div>311  </div>312 313  <!-- Actions -->314  <div class="actions">315    <div class="action-row">316      <div class="select-box">317        <span>Select size</span>318        <svg width="34" height="34" viewBox="0 0 24 24">319          <path d="M6 9l6 6 6-6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>320        </svg>321      </div>322      <button class="add-btn">323        <svg viewBox="0 0 24 24">324          <rect x="4" y="8" width="16" height="12" rx="2" ry="2"/>325          <path d="M7 8c0-3 2-4 5-4s5 1 5 4" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>326        </svg>327        Add328      </button>329    </div>330  </div>331 332  <!-- iOS style home indicator -->333  <div class="home-indicator"></div>334 335</div>336</body>337</html>