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, 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 height: 130px;20 background: #898989;21 color: #ffffff;22 display: flex;23 align-items: center;24 padding: 0 40px;25 font-weight: 600;26 letter-spacing: 0.5px;27 }28 .status-left { font-size: 36px; }29 .status-right {30 margin-left: auto;31 display: flex;32 align-items: center;33 gap: 28px;34 }35 .dot { width: 12px; height: 12px; background: #fff; border-radius: 50%; opacity: .9; }36 37 /* Header */38 .header {39 height: 150px;40 display: flex;41 align-items: center;42 padding: 0 32px;43 gap: 22px;44 border-bottom: 1px solid #f1d5d9;45 }46 .icon-btn {47 width: 80px; height: 80px; border-radius: 16px; display: flex; align-items: center; justify-content: center;48 background: transparent;49 }50 .logo {51 width: 76px; height: 76px; border-radius: 16px; background: #e53935; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700;52 }53 .search {54 flex: 1;55 height: 92px;56 border-radius: 48px;57 border: 1px solid #D6D6D6;58 display: flex;59 align-items: center;60 padding: 0 28px;61 box-shadow: 0 2px 0 rgba(0,0,0,0.04);62 }63 .search span { color: #9E9E9E; font-size: 34px; }64 .header-right { display: flex; align-items: center; gap: 18px; margin-left: 8px; }65 .cart-badge {66 position: relative;67 }68 .progress-bar {69 height: 12px;70 background: #fde4e7;71 }72 73 /* Sections */74 .divider-soft { height: 20px; background: #EFEFF4; }75 .section {76 padding: 36px 40px;77 border-bottom: 1px solid #EFEFF4;78 }79 .row-between {80 display: flex; align-items: center; justify-content: space-between;81 }82 .title-strong { font-size: 44px; font-weight: 700; color: #333; }83 .subtext { color: #7A7A7A; font-size: 32px; margin-top: 6px; }84 85 .pill-danger {86 background: #f9d9dc;87 color: #d32f2f;88 border: 1px solid #f4b9bf;89 font-weight: 700;90 padding: 24px 36px;91 border-radius: 16px;92 font-size: 34px;93 }94 .pill-primary {95 background: #fbe2e3;96 color: #d32f2f;97 border: 1px solid #f1b9bc;98 font-weight: 800;99 padding: 24px 36px;100 border-radius: 16px;101 font-size: 34px;102 }103 104 /* Similar products */105 .section-heading { padding: 34px 40px 10px 40px; }106 .heading { font-size: 52px; font-weight: 800; color: #363636; }107 .grid {108 display: grid;109 grid-template-columns: 480px 480px;110 column-gap: 40px;111 row-gap: 40px;112 padding: 24px 40px 0 40px;113 }114 .card {115 border: 1px solid #ECECEC;116 border-radius: 24px;117 overflow: hidden;118 background: #fff;119 }120 .card-body { padding: 26px; }121 .img-ph {122 width: 100%;123 height: 360px;124 background: #E0E0E0;125 border-bottom: 1px solid #BDBDBD;126 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px;127 }128 .p-title {129 margin-top: 14px;130 font-size: 36px;131 line-height: 46px;132 color: #333;133 font-weight: 700;134 max-height: 92px;135 overflow: hidden;136 }137 .by {138 margin-top: 6px;139 color: #7c7c7c;140 font-size: 30px;141 }142 .strike {143 margin-top: 12px;144 color: #8a8a8a;145 font-size: 30px;146 text-decoration: line-through;147 }148 .green { color: #1b8f3a; font-weight: 800; margin-left: 10px; }149 .price { margin-top: 8px; font-size: 44px; font-weight: 800; color: #222; }150 151 .actions {152 margin-top: 18px;153 display: flex; gap: 18px;154 }155 .btn-outline-red {156 flex: 0 0 160px;157 height: 92px;158 border: 2px solid #e53935;159 color: #e53935;160 border-radius: 18px;161 display: flex; align-items: center; justify-content: center;162 font-weight: 800; font-size: 34px; background: #fff;163 }164 .btn-solid-red {165 flex: 1;166 height: 92px;167 background: #d32f2f;168 color: #fff;169 border-radius: 18px;170 display: flex; align-items: center; justify-content: center;171 font-weight: 800; font-size: 36px;172 }173 174 /* Bottom sheet */175 .bottom-sheet {176 position: absolute;177 left: 0; right: 0;178 bottom: 120px;179 background: #F2F3F5;180 border-top-left-radius: 40px;181 border-top-right-radius: 40px;182 box-shadow: 0 -6px 18px rgba(0,0,0,0.12);183 padding-bottom: 220px; /* space for buttons */184 }185 .sheet-inner { padding: 36px 36px 0 36px; }186 .sheet-title { font-size: 46px; font-weight: 800; color: #333; line-height: 56px; }187 .x-btn {188 position: absolute; right: 30px; top: 24px;189 width: 86px; height: 86px;190 background: #E2E4E7; border-radius: 50%;191 display: flex; align-items: center; justify-content: center;192 }193 .price-row { margin-top: 10px; color: #7a7a7a; font-size: 32px; }194 .big-price { margin-top: 8px; font-size: 64px; font-weight: 900; color: #1a1a1a; }195 .gst { font-size: 34px; color: #5f5f5f; margin-left: 10px; }196 .mrp { margin-top: 6px; color: #8b8b8b; font-size: 32px; }197 .off { color: #1b8f3a; font-weight: 900; margin-left: 12px; }198 .coupon {199 position: absolute; right: 36px; top: 140px;200 background: #dff7df;201 border: 3px dashed #3cb371;202 color: #2e7d32;203 padding: 20px 28px;204 border-radius: 14px;205 text-align: center;206 }207 .coupon b { display: block; font-size: 36px; }208 .coupon small { font-size: 26px; color: #6a8a6a; }209 210 /* Bottom CTAs */211 .bottom-cta {212 position: absolute;213 left: 0; right: 0; bottom: 40px;214 padding: 0 32px;215 display: flex; gap: 32px;216 }217 .cta-btn {218 flex: 1;219 height: 120px;220 border-radius: 20px;221 display: flex; align-items: center; justify-content: center;222 color: #ffffff; font-size: 40px; font-weight: 900;223 }224 .cta-blue { background: #1f73d1; }225 .cta-red { background: #d32f2f; }226 227 /* Home indicator */228 .home-indicator {229 position: absolute; left: 50%; transform: translateX(-50%);230 bottom: 12px; width: 320px; height: 10px; background: #000; opacity: .2; border-radius: 8px;231 }232 233 /* Simple icon styles */234 svg { display: block; }235</style>236</head>237<body>238<div id="render-target">239 240 <!-- Status bar -->241 <div class="status-bar">242 <div class="status-left">8:17</div>243 <div class="status-right">244 <div class="dot"></div>245 <div class="dot" style="width:18px;height:18px;border-radius:4px;"></div>246 <div class="dot"></div>247 <svg width="44" height="28" viewBox="0 0 44 28"><rect x="2" y="4" width="32" height="20" rx="4" fill="#fff"/><rect x="36" y="10" width="6" height="8" rx="1" fill="#fff"/></svg>248 </div>249 </div>250 251 <!-- Header -->252 <div class="header">253 <div class="icon-btn">254 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>255 </div>256 <div class="logo">m</div>257 <div class="search">258 <svg width="40" height="40" viewBox="0 0 24 24" style="margin-right:14px;"><circle cx="11" cy="11" r="7" stroke="#9E9E9E" stroke-width="2" fill="none"/><path d="M21 21l-4.2-4.2" stroke="#9E9E9E" stroke-width="2" stroke-linecap="round"/></svg>259 <span>Search for IT & Electronics...</span>260 <div style="margin-left:auto;display:flex;align-items:center;">261 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M10 3v8l6 3V6l-6-3z" fill="#1e88e5"/></svg>262 </div>263 </div>264 <div class="header-right">265 <div class="icon-btn cart-badge">266 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M6 6h15l-2 8H8L6 6z" fill="none" stroke="#222" stroke-width="2"/><circle cx="9" cy="20" r="1.8" fill="#222"/><circle cx="18" cy="20" r="1.8" fill="#222"/></svg>267 </div>268 <div class="icon-btn">269 <svg width="48" height="48" viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18" stroke="#222" stroke-width="2" stroke-linecap="round"/></svg>270 </div>271 </div>272 </div>273 <div class="progress-bar"></div>274 275 <!-- Ask doubts -->276 <div class="divider-soft"></div>277 <div class="section">278 <div class="row-between">279 <div class="title-strong">Have Doubts Regarding This Product?</div>280 <div class="pill-danger">ASK NOW</div>281 </div>282 </div>283 <div class="divider-soft"></div>284 <div class="section">285 <div class="row-between">286 <div style="display:flex;gap:22px;align-items:flex-start;">287 <div style="width:68px;height:68px;border-radius:12px;border:2px solid #000;display:flex;align-items:center;justify-content:center;">288 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M3 7l9-5 9 5v10l-9 5-9-5V7z" fill="#000"/></svg>289 </div>290 <div>291 <div class="title-strong" style="font-size:44px;">Interested to buy in bulk?</div>292 <div class="subtext">Get customized price</div>293 </div>294 </div>295 <div class="pill-primary">GET QUOTE</div>296 </div>297 </div>298 299 <!-- Similar products -->300 <div class="divider-soft"></div>301 <div class="section-heading">302 <div class="heading">Similar Products</div>303 </div>304 305 <div class="grid">306 <!-- Card 1 -->307 <div class="card">308 <div class="img-ph">[IMG: Black Smartwatch + Glass]</div>309 <div class="card-body">310 <div class="p-title">AT&T Black 3D Tempered Glass Scr...</div>311 <div class="by">By: At&t</div>312 <div style="display:flex;align-items:center;gap:8px;margin-top:10px;">313 <div class="strike">₹1,299</div>314 <div class="green">75% OFF</div>315 </div>316 <div class="price">₹265</div>317 <div class="actions">318 <div class="btn-outline-red">319 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M6 6h15l-2 8H8L6 6z" fill="none" stroke="#e53935" stroke-width="2"/><circle cx="9" cy="20" r="1.6" fill="#e53935"/><circle cx="18" cy="20" r="1.6" fill="#e53935"/></svg>320 </div>321 <div class="btn-solid-red">BUY NOW</div>322 </div>323 </div>324 </div>325 326 <!-- Card 2 -->327 <div class="card">328 <div class="img-ph">[IMG: Black 8.5" Writing Tablet]</div>329 <div class="card-body">330 <div class="p-title">Portronics Ruffpad 8.5E 8.5 inch Black Re...</div>331 <div class="by">By: Portronics</div>332 <div style="display:flex;align-items:center;gap:8px;margin-top:10px;">333 <div class="strike">₹799</div>334 <div class="green">62% OFF</div>335 </div>336 <div class="price">₹253</div>337 <div class="actions">338 <div class="btn-outline-red">339 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M6 6h15l-2 8H8L6 6z" fill="none" stroke="#e53935" stroke-width="2"/><circle cx="9" cy="20" r="1.6" fill="#e53935"/><circle cx="18" cy="20" r="1.6" fill="#e53935"/></svg>340 </div>341 <div class="btn-solid-red">BUY NOW</div>342 </div>343 </div>344 </div>345 </div>346 347 <!-- Bottom sheet with product and CTAs -->348 <div class="bottom-sheet">349 <div class="x-btn">350 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#333" stroke-width="2" stroke-linecap="round"/></svg>351 </div>352 <div class="sheet-inner">353 <div class="sheet-title">RANZ 14-42 Inch Fix Lcd Wall Mount Stand</div>354 <div class="price-row">₹327 (Incl. of all taxes)</div>355 <div style="display:flex;align-items:baseline;gap:8px;">356 <div class="big-price">₹277</div>357 <div class="gst">+ ₹50 GST</div>358 </div>359 <div class="mrp">MRP ₹590 <span class="off">44% OFF</span></div>360 <div class="coupon">361 <b>HELLO</b>362 <small>Tap to Copy</small>363 </div>364 </div>365 366 <div class="bottom-cta">367 <div class="cta-btn cta-blue">368 <svg width="44" height="44" viewBox="0 0 24 24" style="margin-right:14px;"><path d="M6 6h15l-2 8H8L6 6z" fill="none" stroke="#fff" stroke-width="2"/><circle cx="9" cy="20" r="1.8" fill="#fff"/><circle cx="18" cy="20" r="1.8" fill="#fff"/></svg>369 ADD TO CART370 </div>371 <div class="cta-btn cta-red">BUY NOW</div>372 </div>373 </div>374 375 <!-- Home indicator -->376 <div class="home-indicator"></div>377</div>378</body>379</html>