GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Moglix Product Detail - Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 position: relative;10 overflow: hidden;11 width: 1080px;12 height: 2400px;13 background: #FFFFFF;14 }15 16 /* Top status bar */17 .status-bar {18 height: 140px;19 background: #8C8C8C;20 color: #fff;21 display: flex;22 align-items: center;23 padding: 0 40px;24 font-size: 40px;25 letter-spacing: 1px;26 justify-content: space-between;27 }28 .status-right {29 display: flex;30 align-items: center;31 gap: 32px;32 }33 .status-dot {34 width: 18px; height: 18px; background: #fff; border-radius: 50%;35 opacity: 0.8;36 }37 .battery {38 width: 60px; height: 34px; border: 4px solid #fff; border-radius: 8px; position: relative;39 }40 .battery:after {41 content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 18px; background: #fff; border-radius: 2px;42 }43 .battery .level { width: 38px; height: 22px; background: #fff; margin: 4px; border-radius: 4px; }44 45 /* Header with search */46 .header {47 height: 170px;48 display: flex;49 align-items: center;50 padding: 0 30px;51 gap: 24px;52 }53 .icon-btn {54 width: 88px; height: 88px; border-radius: 44px; display: flex; align-items: center; justify-content: center;55 background: #F2F2F2;56 }57 .m-logo {58 width: 88px; height: 88px; border-radius: 18px; background: #E0E0E0; border: 1px solid #BDBDBD;59 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;60 }61 .search-bar {62 flex: 1;63 height: 100px;64 border: 2px solid #E3E7EE;65 border-radius: 50px;66 display: flex;67 align-items: center;68 padding: 0 30px;69 box-shadow: 0 4px 0 rgba(0,0,0,0.05) inset;70 }71 .search-input {72 flex: 1; color: #777; font-size: 36px;73 }74 .header-right {75 display: flex; align-items: center; gap: 24px;76 }77 78 /* Price section */79 .content {80 padding: 0 40px;81 }82 .price-row {83 display: flex;84 align-items: flex-start;85 justify-content: space-between;86 margin-top: 20px;87 }88 .price-left .price {89 font-size: 72px; font-weight: 800; color: #111; letter-spacing: -1px;90 }91 .price-left .gst {92 font-size: 36px; color: #555; margin-left: 12px;93 }94 .mrp {95 margin-top: 8px; font-size: 36px; color: #757575;96 }97 .mrp .striked { text-decoration: line-through; margin-right: 16px; }98 .off { color: #1FA45B; font-weight: 800; }99 100 .qty-stepper {101 display: flex; align-items: center; gap: 16px;102 }103 .step {104 width: 110px; height: 82px; border: 3px solid #C8D9F6; border-radius: 18px; display: flex; align-items: center; justify-content: center;105 font-size: 48px; color: #3A7BD5; background: #F4F8FF;106 box-shadow: 0 6px 0 rgba(58,123,213,0.15) inset;107 }108 109 /* Rating */110 .rating-row {111 display: flex; align-items: center; gap: 16px; margin-top: 20px;112 }113 .rating-badge {114 background: #1FA45B; color: #fff; border-radius: 12px; padding: 12px 18px; font-size: 36px; display: flex; align-items: center; gap: 16px;115 font-weight: 700;116 }117 .reviews { color: #666; font-size: 36px; }118 119 /* Info banner */120 .info-banner {121 margin-top: 20px;122 background: #DDF7F2;123 border-radius: 12px;124 padding: 22px 24px;125 color: #1AAE8A;126 display: flex; align-items: center; gap: 20px;127 font-size: 36px;128 }129 130 .divider {131 height: 22px; background: #EFEFEF; margin: 24px -40px;132 }133 134 /* Coins section */135 .coins-row {136 display: flex; align-items: center; justify-content: space-between;137 font-size: 40px; color: #333; padding: 18px 0;138 }139 .coins-row .highlight { color: #1FA45B; font-weight: 800; }140 .coin {141 width: 48px; height: 48px; background: #1FA45B; border-radius: 50%;142 display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 34px; margin: 0 8px;143 }144 .chevron {145 width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;146 }147 .thin-divider { height: 6px; background: #EDEDED; margin: 24px -40px; }148 149 /* Offers section */150 .section-title {151 font-size: 48px; font-weight: 800; color: #333; margin-top: 12px;152 }153 .coupon-card {154 background: #EEFBEA;155 border-top: 6px solid #E9F3E7;156 border-bottom: 6px solid #E9F3E7;157 border-radius: 12px;158 padding: 30px 24px;159 margin-top: 24px;160 }161 .coupon-row {162 display: flex; align-items: center; justify-content: space-between; gap: 20px;163 }164 .ticket {165 width: 68px; height: 68px; border-radius: 12px; background: #2FB65D; display: flex; align-items: center; justify-content: center;166 }167 .coupon-text { font-size: 40px; color: #222; line-height: 1.3; }168 .dash-tag {169 border: 4px dashed #39C36D; border-radius: 18px; padding: 18px 30px; color: #39C36D; font-weight: 800; font-size: 40px; text-align: center;170 }171 .dash-sub { font-size: 28px; color: #8AA18F; text-align: center; margin-top: 8px; }172 .link-blue { color: #2E7FE6; font-size: 36px; font-weight: 700; margin-top: 22px; }173 174 .coupon-simple {175 background: #EEFBEA;176 border-radius: 12px;177 padding: 30px 24px;178 margin-top: 18px;179 display: flex; align-items: center; justify-content: space-between; gap: 20px;180 font-size: 40px; color: #222;181 }182 183 /* Delivery details */184 .delivery-title {185 font-size: 48px; font-weight: 800; color: #333; margin-top: 32px;186 }187 .pincode-row {188 margin-top: 24px; display: flex; align-items: center; gap: 20px;189 }190 .pin-icon {191 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;192 color: #E14B53;193 }194 .pincode-input {195 flex: 1; height: 110px; border: 3px solid #D0D0D0; border-radius: 28px; padding: 0 24px; font-size: 40px; color: #B0B0B0;196 display: flex; align-items: center; justify-content: space-between;197 background: #fff;198 }199 .check-btn {200 width: 240px; height: 110px; background: #9A9A9A; color: #fff; border-radius: 24px; display: flex; align-items: center; justify-content: center;201 font-size: 40px; font-weight: 800;202 }203 .help-text { font-size: 30px; color: #9A9A9A; margin: 14px 120px; }204 205 .big-divider { height: 24px; background: #EDEDED; margin: 24px -40px; }206 207 /* Insights */208 .insights-title {209 display: flex; align-items: center; gap: 18px; font-size: 46px; font-weight: 800; color: #333;210 }211 .light-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; color: #7C7C7C; }212 .insight-cards {213 margin-top: 24px; display: flex; gap: 24px; overflow: hidden;214 }215 .card {216 width: 480px; min-height: 300px; background: #EAF4FF; border: 3px solid #C8D9F6; border-radius: 24px; padding: 24px;217 color: #333; font-size: 36px; line-height: 1.35;218 }219 .card .dot { width: 18px; height: 18px; background: #111; border-radius: 50%; display: inline-block; margin-right: 14px; }220 221 /* Bottom sticky actions */222 .action-bar {223 position: absolute; left: 0; right: 0; bottom: 90px; height: 150px; display: flex;224 padding: 0 30px; gap: 24px;225 }226 .btn {227 flex: 1; border-radius: 28px; display: flex; align-items: center; justify-content: center; gap: 18px; font-size: 44px; font-weight: 800; color: #fff;228 }229 .btn-blue { background: #1E78E8; }230 .btn-red { background: #D8322E; }231 .home-indicator {232 position: absolute; left: 50%; transform: translateX(-50%);233 bottom: 24px; width: 370px; height: 18px; border-radius: 9px; background: #0A0A0A;234 opacity: 0.8;235 }236 237 /* Simple SVG defaults */238 svg { display: block; }239</style>240</head>241<body>242<div id="render-target">243 244 <!-- Simulated device status bar -->245 <div class="status-bar">246 <div>9:38</div>247 <div class="status-right">248 <div class="status-dot"></div>249 <div class="status-dot" style="opacity:0.6;"></div>250 <div class="status-dot" style="opacity:0.6;"></div>251 <div class="status-dot" style="opacity:0.6;"></div>252 <div class="status-dot" style="opacity:0.6;"></div>253 <div class="status-dot" style="opacity:0.6;"></div>254 <div class="battery"><div class="level"></div></div>255 </div>256 </div>257 258 <!-- Header -->259 <div class="header">260 <div class="icon-btn">261 <svg width="48" height="48" viewBox="0 0 24 24">262 <path d="M15 5 L6 12 L15 19" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>263 </svg>264 </div>265 <div class="m-logo">[IMG: Moglix Logo]</div>266 267 <div class="search-bar">268 <svg width="50" height="50" viewBox="0 0 24 24" style="margin-right:16px;">269 <circle cx="10" cy="10" r="7" stroke="#777" stroke-width="2" fill="none"/>270 <path d="M21 21 L16 16" stroke="#777" stroke-width="2" stroke-linecap="round"/>271 </svg>272 <div class="search-input">Search for Hammer Dr...</div>273 <svg width="50" height="50" viewBox="0 0 24 24">274 <rect x="9" y="5" width="6" height="10" rx="3" fill="#1E78E8"/>275 <path d="M12 15 L12 19" stroke="#1E78E8" stroke-width="2" stroke-linecap="round"/>276 </svg>277 </div>278 279 <div class="header-right">280 <div class="icon-btn">281 <svg width="48" height="48" viewBox="0 0 24 24">282 <path d="M7 6 H21 L20 12 H8 L7 6 Z" stroke="#111" stroke-width="2" fill="none" stroke-linejoin="round"/>283 <circle cx="9" cy="18" r="2" fill="#111"/>284 <circle cx="17" cy="18" r="2" fill="#111"/>285 </svg>286 </div>287 <div class="icon-btn">288 <svg width="48" height="48" viewBox="0 0 24 24">289 <path d="M4 6 H20 M4 12 H20 M4 18 H20" stroke="#111" stroke-width="2.5" stroke-linecap="round"/>290 </svg>291 </div>292 </div>293 </div>294 295 <div class="content">296 <!-- Price and quantity -->297 <div class="price-row">298 <div class="price-left">299 <div class="price">₹2,287 <span class="gst">+ ₹412 GST</span></div>300 <div class="mrp"><span class="striked">MRP ₹3,999</span> <span class="off">32% OFF</span></div>301 </div>302 <div class="qty-stepper">303 <div class="step">−</div>304 <div class="step" style="color:#333;">1</div>305 <div class="step">+</div>306 </div>307 </div>308 309 <!-- Rating -->310 <div class="rating-row">311 <div class="rating-badge">312 4.9313 <svg width="40" height="40" viewBox="0 0 24 24">314 <polygon points="12,2 15,9 22,9 16,13.5 18,21 12,17 6,21 8,13.5 2,9 9,9" fill="#FFD84D"/>315 </svg>316 </div>317 <div class="reviews">(7 Reviews)</div>318 </div>319 320 <!-- People bought banner -->321 <div class="info-banner">322 <svg width="40" height="40" viewBox="0 0 24 24">323 <path d="M3 17 L10 10 L14 14 L21 7" stroke="#1AAE8A" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>324 </svg>325 800 people bought this recently326 </div>327 328 <div class="divider"></div>329 330 <!-- Coins info -->331 <div class="coins-row">332 <div>333 Pay only ₹2689 by using <span class="coin">₹</span><span class="highlight">10 Mogli Coins</span> & earn334 <span class="highlight">26 Mogli Coins</span> on this purchase335 </div>336 <div class="chevron">337 <svg width="44" height="44" viewBox="0 0 24 24">338 <path d="M8 4 L16 12 L8 20" stroke="#222" stroke-width="2.5" fill="none" stroke-linecap="round"/>339 </svg>340 </div>341 </div>342 343 <div class="thin-divider"></div>344 345 <!-- Offers and coupons -->346 <div class="section-title">Offers And Coupons</div>347 348 <div class="coupon-card">349 <div class="coupon-row">350 <div style="display:flex; align-items:center; gap:18px;">351 <div class="ticket">352 <svg width="36" height="36" viewBox="0 0 24 24">353 <rect x="4" y="6" width="16" height="12" rx="3" fill="#fff"/>354 <circle cx="8" cy="12" r="1.5" fill="#2FB65D"/>355 <circle cx="12" cy="12" r="1.5" fill="#2FB65D"/>356 <circle cx="16" cy="12" r="1.5" fill="#2FB65D"/>357 </svg>358 </div>359 <div class="coupon-text">360 Get Flat Rs 100 Off | Min cart value Rs 2000 | Applicable only on App361 </div>362 </div>363 <div style="display:flex; flex-direction:column; align-items:center;">364 <div class="dash-tag">HELLO</div>365 <div class="dash-sub">Tap to Copy</div>366 </div>367 </div>368 <div class="link-blue">SEE 1 MORE COUPON(S)</div>369 </div>370 371 <div class="coupon-simple">372 <div style="display:flex; align-items:center; gap:18px;">373 <div class="ticket">374 <svg width="36" height="36" viewBox="0 0 24 24">375 <rect x="4" y="6" width="16" height="12" rx="3" fill="#fff"/>376 <path d="M8 12 H16" stroke="#2FB65D" stroke-width="2"/>377 </svg>378 </div>379 <div>Get GST invoice and save up to 18% on business purchases</div>380 </div>381 <svg width="44" height="44" viewBox="0 0 24 24">382 <path d="M8 4 L16 12 L8 20" stroke="#222" stroke-width="2.5" fill="none" stroke-linecap="round"/>383 </svg>384 </div>385 386 <div class="big-divider"></div>387 388 <!-- Delivery details -->389 <div class="delivery-title">Delivery Details</div>390 <div class="pincode-row">391 <div class="pin-icon">392 <svg width="52" height="52" viewBox="0 0 24 24">393 <path d="M12 2 C8 2 5 5 5 9 C5 14 12 22 12 22 C12 22 19 14 19 9 C19 5 16 2 12 2 Z" stroke="#E14B53" stroke-width="2" fill="none"/>394 <circle cx="12" cy="9" r="3" fill="#E14B53"/>395 </svg>396 </div>397 <div class="pincode-input">398 <div style="color:#BDBDBD;">Enter your pincode</div>399 <div class="check-btn">CHECK</div>400 </div>401 </div>402 <div class="help-text">Check serviceability at your location</div>403 404 <div class="big-divider"></div>405 406 <!-- Insights -->407 <div class="insights-title">408 <div class="light-icon">409 <svg width="46" height="46" viewBox="0 0 24 24">410 <path d="M8 21 H16 M10 21 V17 H14 V21 M11 2 L5 14 H13 L9 22 L19 9 H11 Z" stroke="#777" stroke-width="1.5" fill="none" stroke-linejoin="round"/>411 </svg>412 </div>413 Moglix Insights414 </div>415 416 <div class="insight-cards">417 <div class="card">418 <span class="dot"></span>419 <span><b>Pinaka</b> is top brand in hammer drills, preferred by <b>76%</b> of</span>420 </div>421 <div class="card">422 <span class="dot"></span>423 <span>60% of the users prefer hammer drills in <b>₹2000-3000</b> price</span>424 </div>425 </div>426 </div>427 428 <!-- Sticky actions -->429 <div class="action-bar">430 <div class="btn btn-blue">431 <svg width="50" height="50" viewBox="0 0 24 24">432 <path d="M7 6 H21 L20 12 H8 L7 6 Z" stroke="#fff" stroke-width="2" fill="none" stroke-linejoin="round"/>433 <circle cx="9" cy="18" r="2" fill="#fff"/>434 <circle cx="17" cy="18" r="2" fill="#fff"/>435 </svg>436 ADD TO CART437 </div>438 <div class="btn btn-red">BUY NOW</div>439 </div>440 441 <div class="home-indicator"></div>442</div>443</body>444</html>