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 - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #222; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden; background: #ffffff;11  }12 13  /* Status bar */14  .status-bar {15    height: 110px; background: #2E2E2E; color: #fff; display: flex; align-items: center; padding: 0 36px; font-weight: 600;16    font-size: 40px;17  }18  .status-icons { margin-left: auto; display: flex; align-items: center; gap: 26px; opacity: 0.9; }19 20  /* Promo banner */21  .promo {22    height: 120px; background: #99E2F2; display: flex; align-items: center; padding: 0 24px 0 24px; color: #033B47;23    font-size: 34px; font-weight: 600; letter-spacing: 0.2px;24    border-bottom: 6px solid rgba(0,0,0,0.05);25  }26  .promo .chev {27    width: 64px; height: 64px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 22px; color:#033B47;28  }29  .promo .arrow { width: 28px; height: 28px; border: 4px solid #033B47; border-top: none; border-right: none; transform: rotate(45deg); }30 31  /* Red product header */32  .red-header {33    height: 148px; background: #C9162A; color: #fff; padding: 0 24px; display: flex; align-items: center; gap: 24px;34  }35  .back-btn {36    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;37  }38  .title-wrap {39    flex: 1;40  }41  .title-wrap .title {42    font-size: 44px; line-height: 1.1; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;43  }44  .header-actions { display: flex; gap: 28px; align-items: center; }45  .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }46  .badge {47    position: absolute; top: -6px; right: -6px; background: #fff; color: #C9162A; border-radius: 50%; width: 40px; height: 40px;48    display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; box-shadow: 0 2px 0 rgba(0,0,0,0.15);49  }50 51  /* Image hero */52  .hero {53    position: relative; height: 860px; overflow: hidden;54  }55  .hero .img {56    position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: 0 0;57    background: #E0E0E0; border-top: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD;58    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 42px; font-weight: 600;59  }60  .fab {61    position: absolute; right: 32px; width: 116px; height: 116px; border-radius: 50%;62    background: #ffffff; display: flex; align-items: center; justify-content: center;63    box-shadow: 0 10px 18px rgba(0,0,0,0.25); border: 2px solid rgba(0,0,0,0.06);64  }65  .fab.share { top: 140px; }66  .fab.like { top: 300px; }67 68  /* Pager */69  .pager {70    height: 90px; background: #EAEAEA; display: flex; align-items: center; justify-content: center;71  }72  .pager-dot {73    width: 36px; height: 36px; background: #D33; border-radius: 50%;74  }75 76  /* Content card */77  .content {78    background: #fff; padding: 36px; border-top-left-radius: 26px; border-top-right-radius: 26px;79    box-shadow: 0 -2px 0 rgba(0,0,0,0.06) inset;80  }81  .brand { color: #C3A35B; font-weight: 700; font-size: 36px; margin-top: 6px; }82  .product-title { font-size: 52px; line-height: 1.2; font-weight: 800; margin: 10px 0 12px; }83  .meta { color: #666; font-size: 36px; margin-bottom: 16px; }84 85  .rating-row { display: flex; align-items: center; gap: 18px; color: #9E9E9E; font-size: 36px; margin-bottom: 18px; }86  .stars { display: inline-flex; gap: 10px; }87  .stars svg { width: 38px; height: 38px; }88 89  .price-row { display: flex; align-items: center; gap: 22px; font-size: 36px; margin: 10px 0; }90  .old { color: #9E9E9E; text-decoration: line-through; }91  .new { font-weight: 800; font-size: 44px; }92  .save { color: #1FA861; font-weight: 800; }93 94  .subtle { color: #9E9E9E; font-size: 32px; margin: 10px 0 22px; }95 96  .stock-row { display: flex; align-items: center; gap: 24px; margin-bottom: 28px; }97  .badge-stock {98    background: #27AE60; color: #fff; padding: 20px 34px; border-radius: 10px; font-weight: 700; font-size: 36px;99  }100  .low-stock { color: #D32F2F; font-weight: 700; font-size: 36px; }101 102  .section-divider {103    height: 20px; background: #F4F4F4; margin: 14px -36px; border-top: 1px solid #E5E5E5; border-bottom: 1px solid #EDEDED;104  }105  .section-title { font-size: 44px; font-weight: 800; margin: 28px 0; }106 107  /* Snackbar */108  .snackbar {109    position: absolute; left: 24px; right: 24px; bottom: 160px; background: #22A455; color: #fff;110    padding: 30px 36px; border-radius: 22px; font-size: 40px; font-weight: 700;111    box-shadow: 0 16px 26px rgba(0,0,0,0.25);112  }113 114  /* Bottom gesture bar */115  .gesture {116    position: absolute; left: 0; right: 0; bottom: 24px; display: flex; justify-content: center;117  }118  .home-handle {119    width: 340px; height: 12px; background: #D0D0D0; border-radius: 8px;120  }121 122  /* Simple icon styles */123  .ico { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }124  .ico-fill { fill: currentColor; stroke: none; }125</style>126</head>127<body>128<div id="render-target">129  <!-- Status bar -->130  <div class="status-bar">131    3:32132    <div class="status-icons">133      <span>🌙</span>134      <span>🔔</span>135      <span>🛈</span>136      <span>⌕</span>137      <span>•</span>138      <span>📍</span>139      <span>◯</span>140      <span>🔋</span>141    </div>142  </div>143 144  <!-- Promo banner -->145  <div class="promo">146    <div class="chev"><div class="arrow"></div></div>147    <div>Connect with our customer service to get your order before Christmas directly from stores @8080847847</div>148    <div style="margin-left:auto;">▶</div>149  </div>150 151  <!-- Red header -->152  <div class="red-header">153    <div class="back-btn">154      <svg class="ico" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg>155    </div>156    <div class="title-wrap">157      <div class="title">Ralleyez Magic Movement Car, Remote Control Toys for Kids, 5Y…</div>158    </div>159    <div class="header-actions">160      <div class="icon-btn">161        <svg class="ico" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg>162      </div>163      <div class="icon-btn">164        <svg class="ico" 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"/></svg>165      </div>166      <div class="icon-btn" style="position:relative;">167        <svg class="ico" viewBox="0 0 24 24">168          <path d="M6 6h15l-2 10H7L6 6z"/><path d="M6 6H4"/><circle cx="9" cy="20" r="1"/><circle cx="17" cy="20" r="1"/>169        </svg>170        <div class="badge">1</div>171      </div>172    </div>173  </div>174 175  <!-- Hero image -->176  <div class="hero">177    <div class="img">[IMG: Red toy car with holiday bokeh background]</div>178 179    <div class="fab share">180      <svg class="ico" viewBox="0 0 24 24">181        <circle cx="6" cy="12" r="2"/><circle cx="16" cy="6" r="2"/><circle cx="16" cy="18" r="2"/>182        <path d="M8 12l6-6M8 12l6 6"/>183      </svg>184    </div>185 186    <div class="fab like">187      <svg class="ico" 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"/></svg>188    </div>189  </div>190 191  <!-- Pager -->192  <div class="pager">193    <div class="pager-dot"></div>194  </div>195 196  <!-- Content -->197  <div class="content">198    <div class="brand">Ralleyz</div>199    <div class="product-title">200      Ralleyez Magic Movement Car, Remote Control Toys for Kids, 5Y+, Red201    </div>202    <div class="meta">5Y+ | Unisex | 5</div>203 204    <div class="rating-row">205      <div class="stars">206        <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="none" stroke="#BDBDBD" stroke-width="1.6"/></svg>207        <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="none" stroke="#BDBDBD" stroke-width="1.6"/></svg>208        <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="none" stroke="#BDBDBD" stroke-width="1.6"/></svg>209        <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="none" stroke="#BDBDBD" stroke-width="1.6"/></svg>210        <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="none" stroke="#BDBDBD" stroke-width="1.6"/></svg>211      </div>212      <div>0 Reviews</div>213    </div>214 215    <div class="price-row">216      <div class="old">MRP ₹3999</div>217      <div class="new">₹2999</div>218      <div class="save">Save 25%</div>219    </div>220    <div class="subtle">Price inclusive of all taxes</div>221 222    <div class="stock-row">223      <div class="badge-stock">In Stock</div>224      <div class="low-stock">Only 0 in stock</div>225    </div>226 227    <div class="section-divider"></div>228 229    <div class="section-title">Check Availability</div>230  </div>231 232  <!-- Snackbar -->233  <div class="snackbar">Product added successfully</div>234 235  <!-- Bottom gesture bar -->236  <div class="gesture"><div class="home-handle"></div></div>237</div>238</body>239</html>