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>E-commerce Product UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #333; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #ffffff;15 border-radius: 0;16 }17 18 /* Top status bar */19 .status-bar {20 height: 120px;21 background: #8f8f8f;22 width: 100%;23 }24 25 /* Header */26 .header {27 height: 172px;28 background: #fff;29 padding: 24px 28px 16px 28px;30 box-sizing: border-box;31 }32 .header-row {33 display: flex;34 align-items: center;35 gap: 20px;36 }37 .icon-btn {38 width: 70px;39 height: 70px;40 border-radius: 35px;41 display: flex;42 align-items: center;43 justify-content: center;44 }45 .logo-box {46 width: 72px;47 height: 72px;48 border-radius: 16px;49 background: #e53935;50 display: flex;51 align-items: center;52 justify-content: center;53 color: #fff;54 font-weight: 700;55 font-size: 34px;56 }57 .search-pill {58 flex: 1;59 height: 88px;60 border: 2px solid #e0e0e0;61 border-radius: 44px;62 display: flex;63 align-items: center;64 padding: 0 22px;65 box-shadow: 0 2px 0 rgba(0,0,0,0.03);66 }67 .search-pill input {68 border: none;69 outline: none;70 flex: 1;71 font-size: 32px;72 color: #666;73 }74 .actions {75 display: flex;76 align-items: center;77 gap: 28px;78 margin-left: 8px;79 }80 .soft-underline {81 height: 8px;82 background: #ffe6ea;83 border-radius: 4px;84 margin-top: 16px;85 }86 87 /* CTA rows */88 .section {89 border-top: 10px solid #f1f1f4;90 }91 .row {92 display: flex;93 align-items: center;94 justify-content: space-between;95 padding: 34px 32px;96 gap: 24px;97 }98 .row + .divider { height: 10px; background: #eef0f3; }99 .row .title {100 font-weight: 700;101 font-size: 42px;102 letter-spacing: 0.2px;103 }104 .row .sub {105 font-size: 30px;106 color: #8a8a8a;107 margin-top: 6px;108 }109 .soft-btn {110 background: #ffe6e8;111 color: #d12f37;112 padding: 22px 36px;113 border-radius: 16px;114 font-weight: 800;115 font-size: 34px;116 }117 .bulk-left {118 display: flex;119 align-items: center;120 gap: 22px;121 }122 .cube-icon {123 width: 56px; height: 56px; position: relative;124 }125 .cube-icon:before, .cube-icon:after {126 content: ""; position: absolute; inset: 0; border: 6px solid #111; transform: rotate(45deg); border-radius: 6px;127 }128 129 /* Similar products */130 .sim-header {131 padding: 34px 32px 18px 32px;132 font-weight: 800;133 font-size: 46px;134 }135 .card-grid {136 display: flex;137 flex-wrap: wrap;138 gap: 28px;139 padding: 0 24px 520px 24px; /* bottom padding to allow for bottom sheet overlap */140 box-sizing: border-box;141 }142 .product-card {143 width: 332px;144 background: #fff;145 border: 1px solid #e8e8ee;146 border-radius: 26px;147 padding: 18px;148 box-sizing: border-box;149 }150 .img-ph {151 width: 100%;152 height: 220px;153 background: #E0E0E0;154 border: 1px solid #BDBDBD;155 border-radius: 18px;156 display: flex;157 align-items: center;158 justify-content: center;159 color: #757575;160 font-size: 28px;161 }162 .p-name {163 font-weight: 700;164 font-size: 30px;165 margin-top: 16px;166 line-height: 1.2;167 }168 .p-sub { color: #7a7a7a; font-size: 26px; margin-top: 6px; }169 .price-row {170 display: flex; align-items: baseline; gap: 10px; margin-top: 8px;171 }172 .mrp { color: #9b9b9b; text-decoration: line-through; font-size: 24px; }173 .off { color: #0a9d4c; font-weight: 800; font-size: 24px; }174 .final { font-size: 34px; font-weight: 800; margin-top: 6px; }175 .card-actions {176 display: flex; gap: 12px; margin-top: 14px;177 }178 .mini-btn {179 flex: 0 0 88px;180 height: 64px;181 border: 2px solid #e23a3a;182 color: #e23a3a;183 border-radius: 14px;184 display: flex; align-items: center; justify-content: center;185 }186 .buy-btn {187 flex: 1;188 height: 64px;189 border-radius: 14px;190 background: #e53935;191 color: #fff;192 font-weight: 800;193 display: flex; align-items: center; justify-content: center;194 font-size: 28px;195 }196 .rating-badge {197 display: inline-flex;198 align-items: center;199 gap: 8px;200 background: #1aa739;201 color: #fff;202 font-weight: 800;203 font-size: 22px;204 border-radius: 12px;205 padding: 6px 10px;206 margin-top: 10px;207 width: max-content;208 }209 210 /* Bottom sheet */211 .bottom-sheet {212 position: absolute;213 left: 0; right: 0; bottom: 0;214 background: #f4f5f6;215 border-top-left-radius: 36px;216 border-top-right-radius: 36px;217 box-shadow: 0 -8px 24px rgba(0,0,0,0.15);218 padding: 30px 28px 24px 28px;219 box-sizing: border-box;220 }221 .sheet-header {222 display: flex; align-items: start; justify-content: space-between; gap: 16px;223 }224 .sheet-title {225 font-size: 44px; font-weight: 800; line-height: 1.2;226 }227 .close-circle {228 width: 72px; height: 72px; border-radius: 36px; background: #fff; display: flex; align-items: center; justify-content: center; border: 1px solid #dcdcdc;229 }230 .price-block { margin-top: 12px; }231 .inc { color: #8a8a8a; font-size: 30px; }232 .big-price { font-size: 58px; font-weight: 900; margin-top: 8px; }233 .tax { font-size: 34px; color: #555; margin-left: 10px; }234 .mrp-line { margin-top: 6px; color: #888; font-size: 30px; }235 .mrp-line .strike { text-decoration: line-through; margin-right: 8px; }236 .green-off { color: #0da34b; font-weight: 900; margin-left: 8px; }237 .coupon {238 position: absolute; right: 36px; top: 160px;239 border: 3px dashed #19b35c;240 background: #e9ffe8;241 color: #19b35c;242 padding: 14px 24px;243 border-radius: 14px;244 text-align: center;245 font-weight: 900;246 min-width: 180px;247 }248 .coupon small { display: block; color: #777; font-weight: 600; margin-top: 6px; }249 .sheet-actions {250 display: flex; gap: 22px; margin-top: 28px;251 }252 .cta {253 flex: 1; height: 118px; border-radius: 18px; display: flex; align-items: center; justify-content: center; gap: 16px; font-weight: 900; font-size: 36px; color: #fff;254 }255 .cta.blue { background: #2f7ad9; }256 .cta.red { background: #e53935; }257 .home-indicator {258 position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);259 width: 260px; height: 10px; background: #000; opacity: 0.18; border-radius: 5px;260 }261 262 /* Helpers */263 .muted { color: #9b9b9b; }264</style>265</head>266<body>267<div id="render-target">268 269 <div class="status-bar"></div>270 271 <div class="header">272 <div class="header-row">273 <div class="icon-btn">274 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">275 <path d="M15 18l-6-6 6-6"/>276 </svg>277 </div>278 <div class="logo-box">m</div>279 280 <div class="search-pill">281 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:12px;">282 <circle cx="11" cy="11" r="7"></circle><path d="M21 21l-4.3-4.3"></path>283 </svg>284 <input type="text" value="Search for IT & Electronics...">285 <svg width="40" height="40" viewBox="0 0 24 24" fill="#2f7ad9">286 <path d="M12 3a3 3 0 0 0-3 3v5a3 3 0 1 0 6 0V6a3 3 0 0 0-3-3z"></path>287 </svg>288 </div>289 290 <div class="actions">291 <div class="icon-btn">292 <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">293 <path d="M6 6h15l-1.5 9h-12z"></path><circle cx="9" cy="20" r="1.5"></circle><circle cx="17" cy="20" r="1.5"></circle>294 </svg>295 </div>296 <div class="icon-btn">297 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round">298 <path d="M4 6h16M4 12h16M4 18h16"></path>299 </svg>300 </div>301 </div>302 </div>303 <div class="soft-underline"></div>304 </div>305 306 <div class="section">307 <div class="row">308 <div class="title">Have Doubts Regarding This Product?</div>309 <div class="soft-btn">ASK NOW</div>310 </div>311 <div class="divider"></div>312 313 <div class="row">314 <div class="bulk-left">315 <div class="cube-icon"></div>316 <div>317 <div class="title" style="font-size:40px;">Interested to buy in bulk?</div>318 <div class="sub">Get customized price</div>319 </div>320 </div>321 <div class="soft-btn">GET QUOTE</div>322 </div>323 </div>324 325 <div class="sim-header">Similar Products</div>326 327 <div class="card-grid">328 <!-- Card 1 -->329 <div class="product-card">330 <div class="img-ph">[IMG: Writing Tablet]</div>331 <div class="p-name">Portronics Ruffpad 8.5 inch Black ...</div>332 <div class="p-sub">By: Portronics</div>333 <div class="price-row"><span class="mrp">₹899</span><span class="off">62% OFF</span></div>334 <div class="final">₹339</div>335 <div class="card-actions">336 <div class="mini-btn">337 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#e23a3a" stroke-width="2">338 <path d="M6 6h15l-1.5 9h-12z"></path>339 </svg>340 </div>341 <div class="buy-btn">BUY NOW</div>342 </div>343 </div>344 345 <!-- Card 2 -->346 <div class="product-card">347 <div class="img-ph">[IMG: LCD Wall Mount]</div>348 <div class="p-name">RANZ 14–27 inch Moving LCD Wall Mo...</div>349 <div class="p-sub">By: Ranz</div>350 <div class="price-row"><span class="mrp">₹790</span><span class="off">19% OFF</span></div>351 <div class="final">₹538</div>352 <div class="card-actions">353 <div class="mini-btn">354 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#e23a3a" stroke-width="2">355 <path d="M6 6h15l-1.5 9h-12z"></path>356 </svg>357 </div>358 <div class="buy-btn">BUY NOW</div>359 </div>360 </div>361 362 <!-- Card 3 -->363 <div class="product-card">364 <div class="img-ph">[IMG: Mobile Stand]</div>365 <div class="rating-badge">366 <svg width="18" height="18" viewBox="0 0 24 24" fill="#fff">367 <path d="M12 17.3l6.18 3.7-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>368 </svg>369 4.6370 </div>371 <div class="p-name">Portronics 12M 12 inch Stand</div>372 <div class="p-sub">By: Portronics</div>373 <div class="price-row"><span class="mrp">₹1,599</span><span class="off">68% OFF</span></div>374 <div class="final">₹429</div>375 <div class="card-actions">376 <div class="mini-btn">377 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#e23a3a" stroke-width="2">378 <path d="M6 6h15l-1.5 9h-12z"></path>379 </svg>380 </div>381 <div class="buy-btn">BUY NOW</div>382 </div>383 </div>384 </div>385 386 <!-- Bottom sheet product quick actions -->387 <div class="bottom-sheet">388 <div class="sheet-header">389 <div class="sheet-title">RANZ 14–42 Inch Fix Lcd Wall Mount Stand</div>390 <div class="close-circle">391 <svg width="30" height="30" viewBox="0 0 24 24" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round">392 <path d="M6 6l12 12M18 6L6 18"></path>393 </svg>394 </div>395 </div>396 397 <div class="price-block">398 <div class="inc">₹327 (Incl. of all taxes)</div>399 <div class="big-price">₹277 <span class="tax">+ ₹50 GST</span></div>400 <div class="mrp-line"><span class="strike">MRP ₹590</span><span class="green-off">44% OFF</span></div>401 </div>402 403 <div class="coupon">HELLO<small>Tap to Copy</small></div>404 405 <div class="sheet-actions">406 <div class="cta blue">407 <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">408 <path d="M6 6h15l-1.5 9h-12z"></path><circle cx="9" cy="20" r="1.5"></circle><circle cx="17" cy="20" r="1.5"></circle>409 </svg>410 ADD TO CART411 </div>412 <div class="cta red">BUY NOW</div>413 </div>414 415 <div class="home-indicator"></div>416 </div>417 418</div>419</body>420</html>