GD-ML/AndroidCode
13.4k
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,Inter,Arial,sans-serif;color:#111;}9 #render-target{10 position:relative; overflow:hidden;11 width:1080px; height:2400px;12 background:#ffffff; border-radius:0;13 }14 15 /* App bar */16 .appbar{17 position:relative;18 height:150px;19 border-bottom:1px solid #eef0f1;20 display:flex; align-items:center; padding:0 28px;21 }22 .appbar .left{23 display:flex; align-items:center; gap:18px; flex:1;24 }25 .appbar .right{26 display:flex; gap:36px; align-items:center;27 }28 .icon{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;color:#111;}29 .icon svg{width:48px;height:48px}30 31 /* Content wrapper (scrollable imitation inside fixed screen) */32 .page{33 position:absolute; left:0; top:150px; right:0; bottom:180px;34 overflow:auto; padding:0 28px 40px 28px;35 }36 37 /* Title and brand section */38 .title-row{display:flex; align-items:flex-start; margin-top:24px;}39 .title{40 font-size:46px; font-weight:700; line-height:56px; letter-spacing:0.2px;41 }42 .brand-link{margin-left:auto; color:#ff8896; font-weight:700; font-size:34px;}43 44 .subtitle{color:#334155; font-size:34px; margin-top:8px;}45 46 .rating-row{display:flex; align-items:center; gap:16px; margin-top:18px;}47 .stars{display:flex; gap:10px;}48 .stars svg{width:40px;height:40px}49 .rating-text{font-weight:700; font-size:34px;}50 .ratings-note{color:#6b7280; font-size:30px;}51 52 .price-row{display:flex; align-items:baseline; gap:18px; margin-top:20px;}53 .price{font-size:64px; font-weight:800;}54 .mrp{color:#9ca3af; text-decoration:line-through; font-size:36px;}55 .off{color:#22c55e; font-weight:700; font-size:36px;}56 .tax{color:#6b7280; font-size:30px; margin-top:8px;}57 58 .promo{59 margin:28px 0; padding:26px; border-top:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb;60 display:flex; align-items:center; justify-content:space-between;61 }62 .promo-left{display:flex; align-items:center; gap:18px; color:#16a34a; font-weight:700; font-size:36px;}63 .promo-right{color:#ff8896; font-weight:700; font-size:34px;}64 .promo .badge{width:44px;height:44px;border-radius:12px;background:#dcfce7;display:flex;align-items:center;justify-content:center;color:#16a34a}65 66 .section{padding:28px 0; border-bottom:1px solid #eef0f1;}67 .section-header{display:flex; align-items:center;}68 .section-title{font-size:44px; font-weight:800;}69 .section-action{margin-left:auto; color:#ff8896; font-weight:700; font-size:36px;}70 71 .chips{display:flex; gap:22px; flex-wrap:wrap; margin-top:24px;}72 .chip{73 padding:20px 36px; border:2px solid #d1d5db; color:#111; border-radius:50px;74 font-size:34px; background:#fff;75 }76 .stock-note{font-size:28px; color:#ef4444; margin-top:12px;}77 78 /* Offers card */79 .offers-title{font-size:44px; font-weight:800; margin-bottom:18px;}80 .offers-sub{color:#6b7280; font-size:32px;}81 .offer-card{82 margin-top:18px; border:1px solid #e5e7eb; border-radius:16px; padding:28px;83 display:flex; align-items:center; gap:26px; background:#fff;84 }85 .coupon{86 width:92px;height:92px;border:1px solid #e5e7eb;border-radius:16px;87 display:flex;align-items:center;justify-content:center;background:#fff0f3;color:#ff5c7a;88 }89 .offer-text .headline{font-size:38px; font-weight:800;}90 .offer-text .detail{font-size:32px; color:#6b7280; margin-top:6px;}91 .offer-text .link{font-size:32px; color:#0ea5e9; margin-top:6px;}92 93 /* Delivery */94 .delivery-title{font-size:44px; font-weight:800;}95 .delivery-sub{color:#6b7280; font-size:32px; margin-top:8px;}96 .pincode-row{97 margin-top:22px; display:flex; gap:18px;98 }99 .input{100 flex:1; height:110px; border:1px solid #e5e7eb; border-radius:16px; background:#f5f7f9;101 display:flex; align-items:center; padding:0 28px; color:#9ca3af; font-size:36px;102 }103 .btn-outline{104 width:220px; height:110px; border:1px solid #e5e7eb; border-radius:16px; background:#f5f7f9;105 display:flex; align-items:center; justify-content:center; color:#9ca3af; font-size:36px; font-weight:700;106 }107 108 /* Policy row */109 .policies{display:flex; justify-content:space-between; margin-top:28px;}110 .policy{width:32%; text-align:center;}111 .policy .picon{112 width:100px;height:100px;border-radius:22px;border:1px solid #e5e7eb;background:#f8fafc;113 margin:0 auto 14px; color:#9aa3ad; display:flex; align-items:center; justify-content:center;114 }115 .policy .ptitle{font-size:32px; color:#111;}116 .policy .psub{font-size:30px; color:#6b7280;}117 118 /* Bottom add to bag */119 .bottom-bar{120 position:absolute; left:0; right:0; bottom:0; height:180px; background:#ffffff;121 border-top:1px solid #e5e7eb; display:flex; align-items:center; gap:24px; padding:24px 28px;122 }123 .wish-btn{124 width:150px; height:120px; border:2px solid #111; border-radius:14px;125 display:flex; align-items:center; justify-content:center; background:#fff;126 }127 .cta{128 flex:1; height:120px; background:#000; color:#fff; border-radius:14px;129 display:flex; align-items:center; justify-content:center; font-size:44px; font-weight:800;130 }131</style>132</head>133<body>134<div id="render-target">135 136 <!-- Top App Bar -->137 <div class="appbar">138 <div class="left">139 <div class="icon" title="Back">140 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">141 <path d="M15 18l-6-6 6-6"/>142 </svg>143 </div>144 <div style="color:#111; font-weight:700; font-size:34px;">145 ₹150 <span style="color:#22c55e;">50% Off</span>146 </div>147 </div>148 <div class="right">149 <div class="icon" title="Search">150 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">151 <circle cx="11" cy="11" r="7"></circle>152 <path d="M20 20l-3.5-3.5"></path>153 </svg>154 </div>155 <div class="icon" title="Share">156 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">157 <path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7"></path>158 <path d="M16 6l-4-4-4 4"></path>159 <path d="M12 2v14"></path>160 </svg>161 </div>162 <div class="icon" title="Wishlist">163 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">164 <path d="M12 21s-7-4.35-7-10a4 4 0 0 1 7-2.65A4 4 0 0 1 19 11c0 5.65-7 10-7 10z"/>165 </svg>166 </div>167 <div class="icon" title="Bag">168 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">169 <path d="M6 7h12l1 14H5L6 7z"></path>170 <path d="M9 7a3 3 0 0 1 6 0"></path>171 </svg>172 </div>173 </div>174 </div>175 176 <!-- Scrollable page body -->177 <div class="page">178 179 <div class="title-row">180 <div>181 <div class="title">Bewakoof</div>182 </div>183 <div class="brand-link">View Brand</div>184 </div>185 <div class="subtitle">Navy Blue Vest</div>186 187 <div class="rating-row">188 <div class="stars">189 <svg viewBox="0 0 24 24" fill="#111"><path d="M12 17.3l-6.2 3.7 1.6-6.9L2 9.8l7-0.6L12 3l3 6.2 7 0.6-5.4 4.3 1.6 6.9z"/></svg>190 <svg viewBox="0 0 24 24" fill="#111"><path d="M12 17.3l-6.2 3.7 1.6-6.9L2 9.8l7-0.6L12 3l3 6.2 7 0.6-5.4 4.3 1.6 6.9z"/></svg>191 <svg viewBox="0 0 24 24" fill="#111"><path d="M12 17.3l-6.2 3.7 1.6-6.9L2 9.8l7-0.6L12 3l3 6.2 7 0.6-5.4 4.3 1.6 6.9z"/></svg>192 <svg viewBox="0 0 24 24" fill="#111"><path d="M12 17.3l-6.2 3.7 1.6-6.9L2 9.8l7-0.6L12 3l3 6.2 7 0.6-5.4 4.3 1.6 6.9z"/></svg>193 <svg viewBox="0 0 24 24" fill="#d1d5db"><path d="M12 17.3l-6.2 3.7 1.6-6.9L2 9.8l7-0.6L12 3l3 6.2 7 0.6-5.4 4.3 1.6 6.9z"/></svg>194 </div>195 <div class="rating-text">3.5/5</div>196 <div class="ratings-note">(Based on 26 ratings)</div>197 </div>198 199 <div class="price-row">200 <div class="price">₹150</div>201 <div class="mrp">MRP ₹299</div>202 <div class="off">50% Off</div>203 </div>204 <div class="tax">Inclusive of all taxes</div>205 206 <div class="promo">207 <div class="promo-left">208 <div class="badge">209 <svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor">210 <path d="M12 2l3 6 7 .6-5.3 4.2L18.5 21 12 17.3 5.5 21l1.8-8.2L2 8.6 9 8z"/>211 </svg>212 </div>213 <div>Get it for even less - ₹142</div>214 </div>215 <div class="promo-right">Know How?</div>216 </div>217 218 <div class="section">219 <div class="section-header">220 <div class="section-title">Select Size</div>221 <div class="section-action">Size Chart</div>222 </div>223 <div class="chips">224 <div>225 <button class="chip">S</button>226 <div class="stock-note">3 left</div>227 </div>228 <button class="chip">M</button>229 <button class="chip">L</button>230 <button class="chip">XL</button>231 <button class="chip">2XL</button>232 <div>233 <button class="chip">3XL</button>234 <div class="stock-note" style="text-align:center">5 left</div>235 </div>236 </div>237 </div>238 239 <div class="section" style="border-bottom:none;">240 <div class="offers-title">Offers <span class="offers-sub">• 2 available</span></div>241 242 <div class="offer-card">243 <div class="coupon">244 <svg viewBox="0 0 24 24" width="44" height="44" fill="currentColor">245 <path d="M4 6h10l6 6-6 6H4V6z"></path>246 </svg>247 </div>248 <div class="offer-text">249 <div class="headline">Extra 5% off</div>250 <div class="detail">Buy 2 get extra 5% off on Bewakoof...</div>251 <div class="link">see details</div>252 </div>253 </div>254 </div>255 256 <div class="section" style="padding-top:10px;">257 <div class="delivery-title">Check delivery date</div>258 <div class="delivery-sub">Enter pincode to know exact delivery dates/charges</div>259 <div class="pincode-row">260 <div class="input">Pincode</div>261 <div class="btn-outline">Check</div>262 </div>263 264 <div class="policies">265 <div class="policy">266 <div class="picon">267 <svg viewBox="0 0 24 24" width="54" height="54" fill="currentColor">268 <path d="M3 7h14l4 6-4 6H3z"></path>269 </svg>270 </div>271 <div class="ptitle">Free delivery on</div>272 <div class="psub">₹499+ orders →</div>273 </div>274 <div class="policy">275 <div class="picon">276 <svg viewBox="0 0 24 24" width="54" height="54" fill="currentColor">277 <path d="M4 7h16v10H4zM8 4h8v3H8z"></path>278 </svg>279 </div>280 <div class="ptitle">No return,</div>281 <div class="psub">No exchange →</div>282 </div>283 <div class="policy">284 <div class="picon">285 <svg viewBox="0 0 24 24" width="54" height="54" fill="currentColor">286 <path d="M5 4h14v10H9l-4 4V4z"></path>287 </svg>288 </div>289 <div class="ptitle">COD on orders</div>290 <div class="psub">above ₹500 →</div>291 </div>292 </div>293 </div>294 295 <div style="height:200px"></div>296 </div>297 298 <!-- Bottom Bar -->299 <div class="bottom-bar">300 <div class="wish-btn">301 <svg viewBox="0 0 24 24" width="54" height="54" fill="none" stroke="#111" stroke-width="2">302 <path d="M12 21s-7-4.35-7-10a4 4 0 0 1 7-2.65A4 4 0 0 1 19 11c0 5.65-7 10-7 10z"/>303 <path d="M8 7h4"></path>304 </svg>305 </div>306 <div class="cta">Add to Bag</div>307 </div>308 309</div>310</body>311</html>