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 Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 border-radius: 0;16 box-shadow: none;17 color: #111;18 }19 20 /* Header */21 .header {22 width: 100%;23 height: 280px;24 background: linear-gradient(90deg, #72d3c8, #94e0dc);25 position: relative;26 box-sizing: border-box;27 padding-top: 20px;28 }29 .status-bar {30 height: 60px;31 line-height: 60px;32 padding: 0 40px;33 color: #0d2b2b;34 font-weight: 600;35 font-size: 36px;36 display: flex;37 justify-content: space-between;38 align-items: center;39 opacity: 0.9;40 }41 .status-icons { display: flex; gap: 24px; align-items: center; }42 .search-container {43 position: absolute;44 left: 120px;45 right: 120px;46 top: 120px;47 height: 110px;48 display: flex;49 align-items: center;50 gap: 24px;51 }52 .back-btn {53 width: 80px;54 height: 80px;55 display: flex;56 align-items: center;57 justify-content: center;58 margin-left: -90px;59 }60 .back-btn svg { width: 56px; height: 56px; }61 .search-bar {62 flex: 1;63 height: 110px;64 background: #fff;65 border-radius: 28px;66 box-shadow: 0 6px 16px rgba(0,0,0,0.15);67 display: flex;68 align-items: center;69 padding: 0 36px;70 gap: 22px;71 }72 .search-input {73 flex: 1;74 color: #333;75 font-size: 40px;76 }77 .search-icon svg,78 .scan-icon svg { width: 48px; height: 48px; fill: #4a4a4a; }79 80 /* Product image */81 .product-image {82 width: 100%;83 height: 780px;84 background: #E0E0E0;85 border: 1px solid #BDBDBD;86 display: flex;87 justify-content: center;88 align-items: center;89 color: #757575;90 font-size: 42px;91 }92 93 /* Carousel dots */94 .dots {95 display: flex;96 gap: 24px;97 justify-content: center;98 margin-top: 20px;99 }100 .dot {101 width: 18px; height: 18px;102 border-radius: 50%;103 border: 2px solid #bfbfbf;104 background: #fff;105 }106 .dot.active { background: #666; border-color: #666; }107 .subtext {108 text-align: center;109 color: #666;110 font-size: 34px;111 margin-top: 16px;112 padding-bottom: 16px;113 border-bottom: 1px solid #e5e5e5;114 }115 116 /* Content section */117 .content {118 padding: 32px 40px 220px;119 }120 .label {121 font-size: 44px;122 color: #222;123 margin: 18px 0;124 }125 .label .bold { font-weight: 700; }126 .size-row {127 display: flex;128 gap: 24px;129 margin: 22px 0 18px;130 }131 .size-option {132 width: 232px; height: 200px;133 border: 2px solid #d6d6d6;134 border-radius: 18px;135 display: flex; flex-direction: column; align-items: center; justify-content: center;136 gap: 10px;137 box-sizing: border-box;138 background: #fafafa;139 }140 .size-option.selected { border-color: #000; background: #fff; }141 .size-option .size { font-size: 42px; font-weight: 700; }142 .size-option .price { font-size: 34px; color: #333; }143 .size-option .mrp { font-size: 32px; color: #9a9a9a; text-decoration: line-through; }144 145 .price-section {146 border-top: 1px solid #ececec;147 margin-top: 20px;148 padding-top: 30px;149 }150 .discount {151 color: #e43a53;152 font-size: 88px;153 font-weight: 700;154 letter-spacing: 1px;155 }156 .selling-price {157 font-size: 88px;158 font-weight: 700;159 margin-left: 16px;160 }161 .mrp {162 font-size: 36px; color: #777; text-decoration: line-through; margin-top: 14px;163 }164 .tax-note { font-size: 36px; color: #555; margin-top: 14px; }165 166 .offer-row {167 margin-top: 30px;168 border-top: 1px solid #e6e6e6;169 border-bottom: 1px solid #e6e6e6;170 padding: 26px 20px;171 display: flex;172 align-items: center;173 gap: 26px;174 }175 .offer-icon {176 width: 68px; height: 68px; border-radius: 34px; border: 2px dashed #f0b76a;177 display: flex; align-items: center; justify-content: center;178 }179 .offer-text { flex: 1; }180 .offer-title { font-size: 40px; font-weight: 700; }181 .offer-sub { font-size: 34px; color: #666; margin-top: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }182 .chevron { width: 48px; height: 48px; }183 184 .delivery { margin-top: 30px; font-size: 36px; line-height: 1.5; }185 .delivery .blue { color: #1a73e8; }186 .delivery .bold { font-weight: 700; }187 .delivery .green { color: #2db44b; }188 189 .loc-row {190 margin-top: 24px; display: flex; align-items: center; gap: 16px; font-size: 36px;191 }192 .loc-row .blue { color: #1a73e8; }193 194 .stock { margin-top: 26px; color: #2db44b; font-size: 44px; font-weight: 700; }195 196 .qty-pill {197 margin-top: 24px;198 width: 220px; height: 92px; border-radius: 22px;199 background: #f2f2f2; border: 2px solid #d9d9d9;200 display: flex; align-items: center; justify-content: space-between;201 padding: 0 24px; font-size: 38px; color: #333;202 }203 .qty-pill .down { width: 34px; height: 34px; }204 205 /* Bottom navigation */206 .bottom-nav {207 position: absolute; bottom: 0; left: 0; width: 100%; height: 160px;208 background: #fff; border-top: 1px solid #e6e6e6;209 display: flex; align-items: center; justify-content: space-around;210 }211 .nav-item {212 width: 180px; text-align: center; color: #333;213 }214 .nav-item svg { width: 58px; height: 58px; display: block; margin: 0 auto 10px; fill: #3b3b3b; }215 .nav-item .label { font-size: 34px; margin: 0; }216 .nav-item.active .label { color: #1a73e8; font-weight: 700; }217 .nav-item.active::after {218 content:""; display:block; margin:14px auto 0; width: 90px; height: 8px; background:#1a73e8; border-radius:4px;219 }220 .badge {221 position: absolute;222 background: #1a73e8; color: #fff;223 font-size: 26px; padding: 2px 8px; border-radius: 12px;224 top: -6px; right: 40px;225 }226</style>227</head>228<body>229<div id="render-target">230 231 <div class="header">232 <div class="status-bar">233 <div>11:23</div>234 <div class="status-icons">235 <span>• • • •</span>236 <span>•</span>237 <span>⌁</span>238 <span>⟲</span>239 <span>🔋</span>240 </div>241 </div>242 243 <div class="search-container">244 <div class="back-btn">245 <svg viewBox="0 0 24 24">246 <path d="M15.5 5l-7 7 7 7" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>247 </svg>248 </div>249 <div class="search-bar">250 <div class="search-icon">251 <svg viewBox="0 0 24 24">252 <path d="M10 3a7 7 0 105.29 12.29l4.42 4.42 1.41-1.41-4.42-4.42A7 7 0 0010 3z" />253 </svg>254 </div>255 <div class="search-input">formal suit for women</div>256 <div class="scan-icon">257 <svg viewBox="0 0 24 24">258 <path d="M4 7V4h3M20 7V4h-3M4 17v3h3M20 17v3h-3M7 7h10v10H7z" fill="#4a4a4a"/>259 </svg>260 </div>261 </div>262 </div>263 </div>264 265 <div class="product-image">[IMG: Black Formal Suit Product]</div>266 267 <div class="dots">268 <div class="dot active"></div>269 <div class="dot"></div>270 <div class="dot"></div>271 <div class="dot"></div>272 <div class="dot"></div>273 </div>274 <div class="subtext">300+ viewed in past month</div>275 276 <div class="content">277 <div class="label">Colour: <span class="bold">Black</span></div>278 <div class="label">Size: <span class="bold">L</span></div>279 280 <div class="size-row">281 <div class="size-option">282 <div class="size">M</div>283 <div class="price">₹899.00</div>284 <div class="mrp">₹1,999.00</div>285 </div>286 <div class="size-option selected">287 <div class="size">L</div>288 <div class="price">₹899.00</div>289 <div class="mrp">₹1,999.00</div>290 </div>291 <div class="size-option">292 <div class="size">XL</div>293 <div class="price">₹899.00</div>294 <div class="mrp">₹1,999.00</div>295 </div>296 <div class="size-option">297 <div class="size">2XL</div>298 <div class="price">₹899.00</div>299 <div class="mrp">₹1,999.00</div>300 </div>301 </div>302 303 <div class="price-section">304 <div style="display:flex; align-items:flex-end; gap:20px;">305 <div class="discount">-55%</div>306 <div class="selling-price">₹899</div>307 </div>308 <div class="mrp">M.R.P.: ₹1,999</div>309 <div class="tax-note">Inclusive of all taxes</div>310 </div>311 312 <div class="offer-row">313 <div class="offer-icon">314 <svg viewBox="0 0 24 24"><path d="M7 17l10-10M8 8a1 1 0 110-2 1 1 0 010 2zm8 10a1 1 0 100-2 1 1 0 000 2z" stroke="#f0b76a" stroke-width="2" fill="none"/></svg>315 </div>316 <div class="offer-text">317 <div class="offer-title">Save Extra with Offers</div>318 <div class="offer-sub">No Cost EMI Offers, Bank Offers and Partner Deals</div>319 </div>320 <svg class="chevron" viewBox="0 0 24 24"><path d="M8 10l4 4 4-4" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>321 </div>322 323 <div class="delivery">324 <span class="blue">FREE delivery Sunday, 3 September.</span> Details<br>325 Or fastest delivery <span class="bold">Tomorrow, 2 September.</span> Order within <span class="green">1 hr 39 mins.</span> Details326 </div>327 328 <div class="loc-row">329 <svg viewBox="0 0 24 24" width="42" height="42"><path d="M12 2a7 7 0 00-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 00-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z" fill="#555"/></svg>330 <span class="blue">Select delivery location</span>331 </div>332 333 <div class="stock">In stock</div>334 335 <div class="qty-pill">336 <span>Qty: 1</span>337 <svg class="down" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>338 </div>339 </div>340 341 <div class="bottom-nav">342 <div class="nav-item active">343 <svg viewBox="0 0 24 24"><path d="M12 3l9 8v9h-6v-6H9v6H3v-9l9-8z"/></svg>344 <div class="label">Home</div>345 </div>346 <div class="nav-item">347 <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm-8 9c0-4.4 3.6-8 8-8s8 3.6 8 8H4z"/></svg>348 <div class="label">You</div>349 </div>350 <div class="nav-item">351 <svg viewBox="0 0 24 24"><path d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" stroke="#3b3b3b" stroke-width="2" fill="none" stroke-linecap="round"/></svg>352 <div class="label">More</div>353 </div>354 <div class="nav-item" style="position:relative;">355 <svg viewBox="0 0 24 24"><path d="M7 7h10l2 10H5L7 7zm1-4h8l1 4H7l1-4z"/></svg>356 <div class="label">Cart</div>357 <div class="badge">6</div>358 </div>359 <div class="nav-item">360 <svg viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18"/></svg>361 <div class="label">Menu</div>362 </div>363 </div>364 365</div>366</body>367</html>