GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Product Details - Harware Fittings</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #F2F2F2;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13 color: #222;14 }15 16 /* Top gradient app bar */17 .app-header {18 position: relative;19 width: 100%;20 height: 290px;21 background: linear-gradient(90deg, #305ecb, #934077);22 padding-top: 24px;23 box-sizing: border-box;24 }25 .status-row {26 height: 48px;27 display: flex;28 align-items: center;29 padding: 0 32px;30 color: #fff;31 font-weight: 600;32 font-size: 36px;33 letter-spacing: 0.3px;34 }35 .status-icons {36 display: flex;37 align-items: center;38 margin-left: 18px;39 gap: 18px;40 }41 .status-dot {42 width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,0.85);43 }44 .status-right {45 margin-left: auto;46 display: flex;47 align-items: center;48 gap: 26px;49 }50 .status-signal, .status-battery {51 width: 34px; height: 24px;52 }53 54 .nav-row {55 display: flex; align-items: center;56 padding: 22px 32px 0 32px;57 color: #fff;58 }59 .title {60 font-size: 52px; font-weight: 600; letter-spacing: 0.2px;61 margin-left: 24px;62 }63 .nav-actions {64 margin-left: auto; display: flex; align-items: center; gap: 28px;65 }66 .icon-btn svg { width: 48px; height: 48px; fill: none; stroke: #fff; stroke-width: 4; }67 68 /* Search pill overlapping header */69 .search-bar {70 position: absolute;71 left: 36px; right: 36px; top: 210px;72 height: 110px; border-radius: 55px;73 background: #fff;74 box-shadow: 0 10px 20px rgba(0,0,0,0.15);75 display: flex; align-items: center;76 padding: 0 36px; box-sizing: border-box;77 }78 .search-input {79 margin-left: 18px; font-size: 42px; color: #7a7a7a;80 }81 .search-close {82 margin-left: auto;83 }84 .search-close svg { width: 40px; height: 40px; stroke: #b54e6b; stroke-width: 6; }85 86 /* Product card gallery */87 .gallery-card {88 position: relative;89 margin: 170px 36px 0 36px;90 background: #fff; border-radius: 24px;91 box-shadow: 0 8px 24px rgba(0,0,0,0.08);92 padding: 18px;93 display: grid; grid-template-columns: 1fr 260px; gap: 18px;94 }95 .main-img, .thumb {96 background: #E0E0E0; border: 1px solid #BDBDBD;97 display: flex; justify-content: center; align-items: center;98 color: #757575; text-align: center;99 }100 .main-img { height: 470px; font-size: 34px; border-radius: 16px; }101 .thumbs {102 display: grid; grid-template-rows: repeat(3, 1fr); gap: 16px;103 }104 .thumb { border-radius: 16px; font-size: 28px; }105 .thumb.overlay {106 position: relative; overflow: hidden; background: #2f2f2f;107 color: #fff;108 }109 .thumb.overlay::after {110 content: "+4";111 position: absolute; right: 24px; bottom: 24px;112 font-size: 40px; font-weight: 700;113 }114 115 /* Product info */116 .product-title {117 margin: 32px 36px 0 36px; font-size: 50px; font-weight: 700;118 }119 .price-row {120 margin: 22px 36px 0 36px; display: flex; align-items: baseline; gap: 16px;121 font-size: 44px;122 }123 .price-now { font-weight: 800; }124 .per-piece { color: #b24767; font-weight: 700; font-size: 40px; }125 .price-old { color: #9e9e9e; text-decoration: line-through; font-size: 38px; }126 .discount { color: #b24767; font-weight: 700; font-size: 38px; }127 .tax-note {128 margin: 8px 36px 0 36px; color: #b24767; font-size: 34px;129 }130 .stock {131 margin: 26px 36px 0 36px; color: #b24767; font-size: 42px; font-weight: 700;132 }133 134 /* Quantity stepper */135 .qty-wrap { margin: 26px 36px 0 36px; }136 .qty-label { font-size: 40px; color: #555; margin-bottom: 14px; }137 .stepper {138 width: 520px; height: 130px; border: 4px solid #D0D0D0; border-radius: 26px;139 display: grid; grid-template-columns: 1fr 1fr 1fr; overflow: hidden;140 background: #fff;141 }142 .stepper > div {143 display: flex; align-items: center; justify-content: center;144 font-size: 48px; color: #666;145 }146 .stepper .mid {147 border-left: 4px solid #D0D0D0; border-right: 4px solid #D0D0D0;148 font-weight: 700; color: #333;149 }150 151 /* Details two-column list */152 .details {153 margin: 70px 36px 0 36px;154 display: grid; grid-template-columns: 1fr 1fr; column-gap: 60px;155 }156 .details h3 {157 grid-column: 1 / -1; font-size: 42px; margin: 0 0 20px 0; color: #404040;158 }159 .d-row { display: grid; grid-template-columns: 360px 1fr; padding: 22px 0; border-bottom: 1px solid #e9e9e9; }160 .d-key { font-size: 40px; color: #6a6a6a; }161 .d-val { font-size: 40px; color: #1e1e1e; }162 163 /* Bottom actions */164 .bottom-actions {165 position: absolute; left: 36px; right: 36px; bottom: 178px;166 display: grid; grid-template-columns: 180px 1fr; gap: 32px; align-items: center;167 }168 .wish-btn {169 height: 140px; border-radius: 30px;170 background: #D5D5D5; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);171 display: flex; align-items: center; justify-content: center;172 }173 .wish-btn svg { width: 60px; height: 60px; stroke: #fff; stroke-width: 6; fill: none; }174 .cart-btn {175 height: 140px; border-radius: 30px;176 background: linear-gradient(90deg, #2f64c8, #9a3f74);177 color: #fff; font-size: 46px; font-weight: 700;178 display: flex; align-items: center; justify-content: center;179 box-shadow: 0 10px 20px rgba(0,0,0,0.15);180 }181 182 /* Bottom system gesture bar mimic */183 .gesture-bar {184 position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);185 width: 320px; height: 12px; background: #111; border-radius: 8px; opacity: 0.7;186 }187</style>188</head>189<body>190<div id="render-target">191 192 <div class="app-header">193 <div class="status-row">194 11:20195 <div class="status-icons">196 <div class="status-dot"></div>197 <div class="status-dot"></div>198 <div class="status-dot"></div>199 <div class="status-dot"></div>200 <span style="font-size:34px; opacity:0.9;">•</span>201 </div>202 <div class="status-right">203 <!-- simple signal icon -->204 <svg class="status-signal" viewBox="0 0 24 24">205 <rect x="1" y="15" width="4" height="8" fill="#fff" opacity="0.9"></rect>206 <rect x="7" y="11" width="4" height="12" fill="#fff" opacity="0.9"></rect>207 <rect x="13" y="7" width="4" height="16" fill="#fff" opacity="0.9"></rect>208 <rect x="19" y="3" width="4" height="20" fill="#fff" opacity="0.9"></rect>209 </svg>210 <!-- battery icon -->211 <svg class="status-battery" viewBox="0 0 36 24">212 <rect x="1" y="4" width="30" height="16" rx="3" fill="none" stroke="#fff" stroke-width="2"></rect>213 <rect x="33" y="9" width="3" height="6" rx="1" fill="#fff"></rect>214 <rect x="4" y="6" width="24" height="12" rx="2" fill="#fff"></rect>215 </svg>216 </div>217 </div>218 219 <div class="nav-row">220 <!-- Hamburger -->221 <svg width="56" height="56" viewBox="0 0 24 24">222 <path d="M3 5h18M3 12h18M3 19h18" stroke="#fff" stroke-width="2" stroke-linecap="round"/>223 </svg>224 <div class="title">Harware Fittings</div>225 <div class="nav-actions">226 <div class="icon-btn">227 <!-- Heart outline -->228 <svg viewBox="0 0 24 24">229 <path d="M12 21s-7-5.2-9.3-8.2C1 10.5 2.3 7.5 5.4 6.8c2.1-.5 3.9.4 5 1.8 1.1-1.4 2.9-2.3 5-1.8 3.1.7 4.4 3.7 2.7 6.1C19 15.8 12 21 12 21z"/>230 </svg>231 </div>232 <div class="icon-btn">233 <!-- Bell outline -->234 <svg viewBox="0 0 24 24">235 <path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z" />236 <path d="M18 16H6l0-6a6 6 0 0 1 12 0l0 6z" />237 <path d="M4 16h16" />238 </svg>239 </div>240 </div>241 </div>242 </div>243 244 <div class="search-bar">245 <!-- Magnifier -->246 <svg width="48" height="48" viewBox="0 0 24 24">247 <circle cx="11" cy="11" r="6" stroke="#a04f69" stroke-width="2" fill="none"/>248 <path d="M20 20l-4.5-4.5" stroke="#a04f69" stroke-width="2" stroke-linecap="round"/>249 </svg>250 <div class="search-input">door</div>251 <div class="search-close">252 <svg viewBox="0 0 24 24">253 <path d="M4 4l16 16M20 4L4 20" />254 </svg>255 </div>256 </div>257 258 <div class="gallery-card">259 <div class="main-img">[IMG: Door Set Combo Offer]</div>260 <div class="thumbs">261 <div class="thumb">[IMG: Thumbnail 1]</div>262 <div class="thumb">[IMG: Thumbnail 2]</div>263 <div class="thumb overlay"></div>264 </div>265 </div>266 267 <div class="product-title">Door Set Combo Offer 1003</div>268 269 <div class="price-row">270 <div class="price-now">₹ 1399.0</div>271 <div class="per-piece">Per Piece</div>272 <div class="price-old">₹ 2382.0</div>273 <div class="discount">41% OFF</div>274 </div>275 <div class="tax-note">(*Inclusive all Taxes)</div>276 <div class="stock">IN STOCK</div>277 278 <div class="qty-wrap">279 <div class="qty-label">Quantity</div>280 <div class="stepper">281 <div>-</div>282 <div class="mid">0</div>283 <div>+</div>284 </div>285 </div>286 287 <div class="details">288 <h3>Details</h3>289 <div class="d-row">290 <div class="d-key">PRICE</div>291 <div class="d-val">₹ 1399.0 PER PIECE</div>292 </div>293 <div class="d-row">294 <div class="d-key">IDEAL FOR</div>295 <div class="d-val">Harware Fittings</div>296 </div>297 <div class="d-row">298 <div class="d-key">QUALITY</div>299 <div class="d-val">Premium</div>300 </div>301 <div class="d-row">302 <div class="d-key">MATERIAL TYPE</div>303 <div class="d-val">1</div>304 </div>305 <div class="d-row">306 <div class="d-key">FINISH</div>307 <div class="d-val">1</div>308 </div>309 <div class="d-row">310 <div class="d-key">BRAND</div>311 <div class="d-val">Pekt</div>312 </div>313 </div>314 315 <div class="bottom-actions">316 <div class="wish-btn">317 <svg viewBox="0 0 24 24">318 <path d="M12 21s-7-5.2-9.3-8.2C1 10.5 2.3 7.5 5.4 6.8c2.1-.5 3.9.4 5 1.8 1.1-1.4 2.9-2.3 5-1.8 3.1.7 4.4 3.7 2.7 6.1C19 15.8 12 21 12 21z"/>319 </svg>320 </div>321 <div class="cart-btn">Add to Cart</div>322 </div>323 324 <div class="gesture-bar"></div>325</div>326</body>327</html>