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: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff;13  }14 15  /* Status bar */16  .status-bar {17    height: 90px; background: #2f2f2f; color: #fff;18    display: flex; align-items: center; padding: 0 40px; font-size: 34px;19  }20  .status-bar .right { margin-left: auto; display: flex; gap: 28px; align-items: center; color: #eaeaea; }21 22  /* Promo ribbon */23  .promo {24    height: 120px; background: #8ED8E8; display: flex; align-items: center;25    font-size: 34px; color: #0c3340; padding: 0 34px; gap: 30px;26    border-bottom: 6px solid #7ac7d8;27  }28  .promo .link { color: #d01313; font-weight: bold; margin-left: 12px; }29 30  /* App bar */31  .app-bar {32    height: 140px; background: #d8273a; color: #fff;33    display: flex; align-items: center; padding: 0 30px;34    box-shadow: 0 4px 0 rgba(0,0,0,0.08) inset;35  }36  .app-bar .back {37    width: 90px; height: 90px; display: flex; align-items: center; justify-content: center;38  }39  .app-title {40    font-size: 42px; font-weight: 700; margin-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;41    width: 560px;42  }43  .app-actions { margin-left: auto; display: flex; gap: 30px; }44  .icon-btn {45    width: 90px; height: 90px; display: flex; align-items: center; justify-content: center;46    border-radius: 50%;47  }48 49  /* Hero image */50  .hero {51    position: relative; width: 100%; height: 900px; overflow: hidden;52    background: #E0E0E0; border-top: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD;53    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 40px; font-weight: 600;54  }55  .float-ctrl {56    position: absolute; right: 36px; top: 320px; display: flex; flex-direction: column; gap: 46px;57  }58  .circle {59    width: 120px; height: 120px; border-radius: 60px; background: #fff;60    box-shadow: 0 10px 16px rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: center;61  }62 63  /* Pager indicator */64  .pager {65    height: 70px; background: #e9e9e9; display: flex; align-items: center; justify-content: center;66  }67  .pager .dot { width: 34px; height: 34px; border-radius: 17px; background: #c7424c; }68 69  /* Content card */70  .content {71    background: #ffffff; border-top-left-radius: 20px; border-top-right-radius: 20px;72    padding: 40px; box-sizing: border-box;73  }74  .brand { color: #c99a54; font-size: 38px; margin-bottom: 14px; }75  .title { font-size: 52px; font-weight: 800; line-height: 1.25; color: #111; }76  .meta { margin-top: 18px; font-size: 36px; color: #6b6b6b; }77  .reviews { margin-top: 22px; font-size: 34px; color: #9a9a9a; display: flex; align-items: center; gap: 20px; }78  .stars { letter-spacing: 10px; color: #bdbdbd; font-size: 40px; }79  .price-row { margin-top: 26px; font-size: 40px; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }80  .mrp { color: #8a8a8a; text-decoration: line-through; }81  .price-now { color: #111; font-weight: 800; }82  .save { color: #2ea248; font-weight: 800; }83  .tax-note { margin-top: 12px; font-size: 32px; color: #999; }84  .stock-row { margin-top: 26px; display: flex; align-items: center; gap: 24px; }85  .stock-pill { background: #2ea248; color: #fff; padding: 20px 34px; border-radius: 10px; font-size: 36px; font-weight: 700; }86  .stock-low { color: #d01818; font-size: 36px; }87  .section-title { margin-top: 46px; font-size: 44px; font-weight: 800; color: #222; }88 89  /* Sticky bottom bar */90  .bottom-bar {91    position: absolute; left: 0; right: 0; bottom: 90px;92    height: 190px; background: #efefef; border-top: 1px solid #dcdcdc;93    display: flex; align-items: center; justify-content: space-between; padding: 0 26px; box-sizing: border-box;94  }95  .cta {96    width: calc(50% - 20px); height: 120px; background: #ffffff; border: 2px solid #dcdcdc; border-radius: 16px;97    display: flex; align-items: center; justify-content: center; gap: 20px; font-size: 44px; font-weight: 700; color: #222;98    box-shadow: 0 2px 4px rgba(0,0,0,0.05);99  }100  .cta.buy { border-color: #222; color: #111; }101 102  /* Gesture pill */103  .gesture {104    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);105    width: 360px; height: 18px; background: #0f0f0f; border-radius: 9px; opacity: 0.55;106  }107 108  /* SVG helpers */109  svg { display: block; }110</style>111</head>112<body>113<div id="render-target">114 115  <!-- Status bar -->116  <div class="status-bar">117    <div>3:31</div>118    <div class="right">119      <span>◐</span>120      <span>☾</span>121      <span>🔔</span>122      <span>•</span>123      <span>⌖</span>124      <span>◯</span>125      <span>▮</span>126    </div>127  </div>128 129  <!-- Promo ribbon -->130  <div class="promo">131    <div>Code HAM10 - Addn.10% off on cart above Rs. 4,499/-</div>132    <div>▶</div>133    <div class="link">SHOP NOW!!</div>134    <div style="margin-left:auto;">▶</div>135  </div>136 137  <!-- App bar -->138  <div class="app-bar">139    <div class="back">140      <svg width="48" height="48" viewBox="0 0 24 24">141        <path d="M15 19L8 12l7-7" stroke="#ffffff" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>142      </svg>143    </div>144    <div class="app-title">Ralleyz Magic Movement Car, Remote Control Toys for Kids, 5Y...</div>145    <div class="app-actions">146      <div class="icon-btn">147        <svg width="42" height="42" viewBox="0 0 24 24">148          <circle cx="11" cy="11" r="7" stroke="#ffffff" stroke-width="2" fill="none"/>149          <path d="M20 20l-4.2-4.2" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>150        </svg>151      </div>152      <div class="icon-btn">153        <svg width="44" height="44" viewBox="0 0 24 24">154          <path d="M12 21s-8-6-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5-8 11-8 11" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>155        </svg>156      </div>157      <div class="icon-btn">158        <svg width="44" height="44" viewBox="0 0 24 24">159          <path d="M7 7h10v12H7z" stroke="#ffffff" stroke-width="2" fill="none" />160          <path d="M9 7c0-2 6-2 6 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>161        </svg>162      </div>163    </div>164  </div>165 166  <!-- Hero image -->167  <div class="hero">168    [IMG: Red Toy Car on festive bokeh]169    <div class="float-ctrl">170      <div class="circle">171        <svg width="54" height="54" viewBox="0 0 24 24">172          <circle cx="6" cy="12" r="2" fill="#222"/>173          <circle cx="12" cy="6" r="2" fill="#222"/>174          <circle cx="18" cy="12" r="2" fill="#222"/>175          <path d="M7.8 10.6l3.4-3.4M12.8 7.4l3.4 3.4" stroke="#222" stroke-width="1.6" fill="none" stroke-linecap="round"/>176        </svg>177      </div>178      <div class="circle">179        <svg width="54" height="54" viewBox="0 0 24 24">180          <path d="M12 21s-8-6-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5-8 11-8 11" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>181        </svg>182      </div>183    </div>184  </div>185 186  <!-- Pager indicator -->187  <div class="pager">188    <div class="dot"></div>189  </div>190 191  <!-- Content -->192  <div class="content">193    <div class="brand">Ralleyz</div>194    <div class="title">Ralleyz Magic Movement Car, Remote Control Toys for Kids, 5Y+, Red</div>195    <div class="meta">5Y+ | Unisex | 5</div>196 197    <div class="reviews">198      <div class="stars">☆ ☆ ☆ ☆ ☆</div>199      <div>0 Reviews</div>200    </div>201 202    <div class="price-row">203      <div class="mrp">MRP ₹3999</div>204      <div class="price-now">₹2999</div>205      <div class="save">Save 25%</div>206    </div>207 208    <div class="tax-note">Price inclusive of all taxes</div>209 210    <div class="stock-row">211      <div class="stock-pill">In Stock</div>212      <div class="stock-low">Only 0 in stock</div>213    </div>214 215    <div class="section-title">Check Availability</div>216    <div style="margin-top: 24px; height: 220px; border-radius: 20px; border: 1px solid #dcdcdc; background:#f7f7f7; display:flex; align-items:center; justify-content:center; color:#8a8a8a; font-size:36px;">217      Enter pincode to check delivery options218    </div>219  </div>220 221  <!-- Sticky bottom bar -->222  <div class="bottom-bar">223    <div class="cta">224      <svg width="46" height="46" viewBox="0 0 24 24">225        <path d="M7 7h10v12H7z" stroke="#333" stroke-width="2" fill="none" />226        <path d="M9 7c0-2 6-2 6 0" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>227      </svg>228      <span>Add to Cart</span>229    </div>230    <div class="cta buy">231      <svg width="46" height="46" viewBox="0 0 24 24">232        <path d="M7 7h10v12H7z" stroke="#111" stroke-width="2" fill="none" />233        <path d="M9 7c0-2 6-2 6 0" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>234      </svg>235      <span>Buy Now</span>236    </div>237  </div>238 239  <!-- Gesture pill -->240  <div class="gesture"></div>241</div>242</body>243</html>