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 Page - Hammer Drill</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;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 border-radius: 32px;16 box-shadow: 0 8px 24px rgba(0,0,0,0.08);17 }18 19 /* Top status and header */20 .status-bar {21 height: 170px;22 background: #8f8f8f;23 color: #fff;24 padding: 24px 36px 12px 36px;25 box-sizing: border-box;26 }27 .status-top {28 height: 50px;29 display: flex;30 align-items: center;31 justify-content: space-between;32 font-weight: 600;33 font-size: 36px;34 letter-spacing: 0.5px;35 opacity: 0.95;36 }37 .status-icons {38 display: flex;39 align-items: center;40 gap: 22px;41 }42 .circle-icon {43 width: 28px; height: 28px; background: rgba(255,255,255,0.8); border-radius: 50%;44 }45 46 .search-row {47 margin-top: 16px;48 display: flex;49 align-items: center;50 gap: 24px;51 }52 .icon-btn {53 width: 72px; height: 72px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: #ffffff; color: #222;54 box-shadow: 0 2px 6px rgba(0,0,0,0.08);55 }56 .icon-btn.flat { box-shadow: none; background: transparent; }57 .brand-badge {58 width: 72px; height: 72px; border-radius: 18px; background: #e53935; display: flex; align-items: center; justify-content: center; color: #fff;59 font-weight: 700; font-size: 40px;60 }61 .search-input {62 flex: 1;63 height: 76px;64 background: #ffffff;65 border-radius: 36px;66 border: 2px solid #e0e0e0;67 display: flex;68 align-items: center;69 padding: 0 28px;70 box-shadow: 0 2px 8px rgba(0,0,0,0.08) inset;71 gap: 18px;72 }73 .search-input span {74 color: #757575; font-size: 34px;75 }76 .header-actions {77 display: flex; align-items: center; gap: 24px;78 }79 80 /* Product image area */81 .image-area {82 position: relative;83 padding: 24px 36px 18px 36px;84 box-sizing: border-box;85 background: #fff;86 }87 .product-image {88 width: 100%;89 height: 760px;90 background: #E0E0E0;91 border: 1px solid #BDBDBD;92 border-radius: 16px;93 display: flex; align-items: center; justify-content: center;94 color: #616161; font-size: 36px; font-weight: 600;95 overflow: hidden;96 }97 .badge-dispatch {98 position: absolute;99 left: 36px; top: 10px;100 background: #ff455a;101 color: #fff;102 padding: 14px 22px;103 font-size: 30px; font-weight: 700;104 border-radius: 10px;105 }106 .floating-actions {107 position: absolute;108 right: 36px; top: 260px;109 display: flex; flex-direction: column; gap: 24px;110 }111 .float-btn {112 width: 90px; height: 90px; background: #ffffff; border-radius: 20px; box-shadow: 0 4px 14px rgba(0,0,0,0.12);113 display: flex; align-items: center; justify-content: center;114 }115 .pager-dots {116 display: flex; justify-content: center; gap: 16px; margin-top: 18px;117 }118 .dot { width: 14px; height: 14px; border-radius: 50%; background: #bdbdbd; opacity: 0.6; }119 .dot.active { background: #757575; opacity: 1; }120 121 /* Content section */122 .content {123 padding: 18px 36px 180px 36px; /* bottom space for bottom bar */124 box-sizing: border-box;125 }126 .title {127 font-size: 56px;128 line-height: 1.2;129 font-weight: 700;130 margin: 22px 0 8px 0;131 color: #333;132 }133 .subprice {134 font-size: 34px; color: #6f6f6f; margin-bottom: 10px;135 }136 .price-row {137 display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;138 }139 .price-left {140 flex: 1;141 }142 .main-price {143 font-size: 62px; font-weight: 800; color: #111;144 }145 .gst-note {146 font-size: 34px; color: #444; margin-left: 8px;147 }148 .mrp-off {149 margin-top: 8px; font-size: 32px; color: #7a7a7a;150 }151 .off-green { color: #1faa59; font-weight: 800; margin-left: 12px; }152 .qty-stepper {153 display: flex; align-items: center; gap: 0;154 border: 2px solid #cbe1ff; border-radius: 18px; overflow: hidden;155 height: 90px;156 }157 .qty-btn {158 width: 120px; height: 90px; display: flex; align-items: center; justify-content: center; color: #2a6bff; font-size: 42px; font-weight: 800; background: #eaf3ff;159 }160 .qty-value {161 width: 140px; height: 90px; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 700; color: #333; background: #ffffff;162 }163 164 .rating-reviews {165 margin-top: 16px; display: flex; align-items: center; gap: 16px;166 font-size: 32px; color: #6f6f6f;167 }168 .rating-pill {169 background: #22c55e; color: #fff; border-radius: 12px; padding: 10px 16px; font-weight: 800; display: inline-flex; align-items: center; gap: 10px; font-size: 34px;170 }171 172 .recent-pill {173 margin-top: 24px;174 background: #e8f7f3;175 color: #1c9e86;176 border-radius: 16px;177 padding: 22px 24px;178 font-size: 32px; font-weight: 700;179 display: inline-flex; align-items: center; gap: 14px;180 border: 1px solid #cdebe5;181 }182 183 .divider { height: 18px; background: #f1f3f5; margin: 28px -36px; }184 185 .promo-row {186 display: flex; align-items: center; justify-content: space-between;187 background: #ffffff;188 border-radius: 18px;189 padding: 22px 2px 22px 0;190 font-size: 34px;191 }192 .promo-row .text { color: #333; }193 .promo-row .accent { color: #1faa59; font-weight: 800; }194 .promo-chevron { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; }195 196 .offers-section {197 background: #eef9ee;198 border-radius: 18px;199 padding: 26px;200 border: 1px solid #d7efd7;201 }202 .offers-title { font-size: 40px; font-weight: 800; margin-bottom: 18px; color: #333; }203 .coupon-row {204 display: flex; align-items: center; justify-content: space-between; gap: 20px;205 background: #ffffff; border-radius: 14px; padding: 24px; border: 1px dashed #c8e6c9;206 }207 .coupon-left { display: flex; align-items: center; gap: 18px; font-size: 34px; color: #444; }208 .ticket-icon { width: 56px; height: 56px; background: #2ecc71; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; }209 .coupon-right {210 border: 2px dashed #2ecc71; border-radius: 12px; padding: 16px 24px; color: #2ecc71; font-weight: 800; text-align: center;211 display: flex; flex-direction: column; align-items: center; font-size: 34px;212 }213 .coupon-right small { color: #7a7a7a; font-weight: 500; font-size: 26px; margin-top: 6px; }214 215 /* Bottom action bar */216 .bottom-bar {217 position: absolute; left: 0; right: 0; bottom: 0;218 height: 170px; background: #ffffff; box-shadow: 0 -6px 18px rgba(0,0,0,0.08);219 display: flex; align-items: center; justify-content: center; gap: 24px;220 padding: 0 28px;221 }222 .action-btn {223 flex: 1; height: 100px; border-radius: 22px; display: flex; align-items: center; justify-content: center; gap: 20px; font-size: 38px; font-weight: 800; color: #fff;224 }225 .btn-cart { background: #1677ff; }226 .btn-buy { background: #e53935; }227 .gesture-bar {228 position: absolute; bottom: 180px; left: 50%; transform: translateX(-50%);229 width: 360px; height: 16px; background: #111; border-radius: 12px; opacity: 0.25;230 }231 232 /* Simple SVG sizes */233 svg { display: block; }234</style>235</head>236<body>237<div id="render-target">238 239 <!-- Status Bar + Header -->240 <div class="status-bar">241 <div class="status-top">242 <div>9:38</div>243 <div class="status-icons">244 <div class="circle-icon"></div>245 <div class="circle-icon"></div>246 <div class="circle-icon"></div>247 <div class="circle-icon"></div>248 <div class="circle-icon"></div>249 </div>250 </div>251 252 <div class="search-row">253 <!-- Back -->254 <div class="icon-btn flat" aria-label="Back">255 <svg width="40" height="40" viewBox="0 0 24 24">256 <path d="M15 19L8 12l7-7" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>257 </svg>258 </div>259 <!-- Brand -->260 <div class="brand-badge">m</div>261 <!-- Search field -->262 <div class="search-input">263 <svg width="36" height="36" viewBox="0 0 24 24">264 <circle cx="11" cy="11" r="7" stroke="#666" stroke-width="2" fill="none"/>265 <path d="M21 21l-4.2-4.2" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>266 </svg>267 <span>Search for Hammer Dr...</span>268 <div style="margin-left:auto; display:flex; align-items:center;">269 <svg width="38" height="38" viewBox="0 0 24 24">270 <path d="M12 2c2 0 2 1.8 2 4v4c0 2.2-2 2.2-2 2.2S10 12.2 10 10V6c0-2.2 0-4 2-4zM9 14c1.2 1 3.8 1 6 0v3c0 1.7-1.6 3-3 3s-3-1.3-3-3v-3z" fill="#2196f3"/>271 </svg>272 </div>273 </div>274 <!-- Cart -->275 <div class="header-actions">276 <div class="icon-btn" aria-label="Cart">277 <svg width="44" height="44" viewBox="0 0 24 24">278 <path d="M3 4h2l2.5 12h10l2.5-8H7" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>279 <circle cx="9.5" cy="20" r="1.6" fill="#111"/>280 <circle cx="17" cy="20" r="1.6" fill="#111"/>281 </svg>282 </div>283 <div class="icon-btn" aria-label="Menu">284 <svg width="44" height="44" viewBox="0 0 24 24">285 <path d="M4 6h16M4 12h16M4 18h16" stroke="#111" stroke-width="2" stroke-linecap="round"/>286 </svg>287 </div>288 </div>289 </div>290 </div>291 292 <!-- Product Image Section -->293 <div class="image-area">294 <div class="badge-dispatch">Same Day Dispatch</div>295 296 <div class="product-image">[IMG: Hammer Drill kit photo]</div>297 298 <div class="floating-actions">299 <div class="float-btn" aria-label="Share">300 <svg width="40" height="40" viewBox="0 0 24 24">301 <circle cx="18" cy="5" r="3" fill="#333"/>302 <circle cx="6" cy="12" r="3" fill="#333"/>303 <circle cx="18" cy="19" r="3" fill="#333"/>304 <path d="M8.8 10.9l6.6-4.3M8.8 13.1l6.6 4.3" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>305 </svg>306 </div>307 <div class="float-btn" aria-label="Wishlist">308 <svg width="44" height="44" viewBox="0 0 24 24">309 <path d="M12 21s-7-4.6-9-8.5C1.3 9 3.1 6.5 6 6.5c2 0 3.3 1.2 4 2.4.7-1.2 2-2.4 4-2.4 2.9 0 4.7 2.5 3 6-2 3.9-9 8.5-9 8.5z" fill="#e53935"/>310 </svg>311 </div>312 </div>313 314 <div class="pager-dots">315 <div class="dot active"></div>316 <div class="dot"></div>317 <div class="dot"></div>318 <div class="dot"></div>319 <div class="dot"></div>320 </div>321 </div>322 323 <!-- Content Details -->324 <div class="content">325 <div class="title">Pinaka Mod.Pi-226 1600W 26mm Hammer Drill</div>326 <div class="subprice">₹2,699 (Incl. of all taxes)</div>327 328 <div class="price-row">329 <div class="price-left">330 <div class="main-price">₹2,287 <span class="gst-note">+ ₹412 GST</span></div>331 <div class="mrp-off">MRP ₹3,999 <span class="off-green">32% OFF</span></div>332 333 <div class="rating-reviews">334 <div class="rating-pill">335 <svg width="28" height="28" viewBox="0 0 24 24">336 <path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 7-6.2-3.4-6.2 3.4 1.2-7-5-4.8 6.9-1L12 2z" fill="#fff"/>337 </svg>338 4.9339 </div>340 <span>(7 Reviews)</span>341 </div>342 343 <div class="recent-pill">344 <svg width="30" height="30" viewBox="0 0 24 24">345 <path d="M12 3v10h7" stroke="#1c9e86" stroke-width="2" fill="none" stroke-linecap="round"/>346 <circle cx="12" cy="12" r="9" stroke="#1c9e86" stroke-width="2" fill="none"/>347 </svg>348 800 people bought this recently349 </div>350 </div>351 352 <div class="qty-stepper" aria-label="Quantity">353 <div class="qty-btn">−</div>354 <div class="qty-value">1</div>355 <div class="qty-btn">+</div>356 </div>357 </div>358 359 <div class="divider"></div>360 361 <div class="promo-row">362 <div class="text">Pay only ₹2689 by using <span class="accent">10 Mogli Coins</span> & earn <span class="accent">26 Mogli Coins</span> on this purchase</div>363 <div class="promo-chevron">364 <svg width="40" height="40" viewBox="0 0 24 24">365 <path d="M9 6l6 6-6 6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>366 </svg>367 </div>368 </div>369 370 <div class="divider"></div>371 372 <div class="offers-section">373 <div class="offers-title">Offers And Coupons</div>374 <div class="coupon-row">375 <div class="coupon-left">376 <div class="ticket-icon">377 <svg width="30" height="30" viewBox="0 0 24 24">378 <path d="M3 7h18v10H3z" fill="#fff"/>379 <circle cx="8" cy="12" r="1.6" fill="#2ecc71"/>380 <circle cx="12" cy="12" r="1.6" fill="#2ecc71"/>381 <circle cx="16" cy="12" r="1.6" fill="#2ecc71"/>382 </svg>383 </div>384 <div>Get Flat Rs 100 Off | Min cart value Rs 2000 | Applicable</div>385 </div>386 <div class="coupon-right">387 HELLO388 <small>Tap to Copy</small>389 </div>390 </div>391 </div>392 </div>393 394 <!-- Bottom Buttons -->395 <div class="gesture-bar"></div>396 <div class="bottom-bar">397 <div class="action-btn btn-cart">398 <svg width="38" height="38" viewBox="0 0 24 24">399 <path d="M3 5h3l2 10h10l2-7H7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>400 </svg>401 ADD TO CART402 </div>403 <div class="action-btn btn-buy">404 BUY NOW405 </div>406 </div>407 408</div>409</body>410</html>