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>Nykaa Fashion - Listing Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:#111; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Top app bar */18 .appbar {19 height: 140px;20 padding: 0 32px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 border-bottom: 1px solid #eee;25 }26 .appbar-left, .appbar-right {27 display: flex;28 align-items: center;29 gap: 28px;30 }31 .brand {32 font-weight: 800;33 letter-spacing: 2px;34 font-size: 36px;35 }36 37 .icon-btn {38 width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;39 }40 .icon {41 width: 36px; height: 36px; fill: none; stroke: #111; stroke-width: 2.5;42 }43 44 /* Promo banner placeholder */45 .promo {46 height: 160px;47 margin: 8px 0 0;48 padding: 0 32px;49 }50 .promo .img {51 width: 100%;52 height: 100%;53 background:#E0E0E0;54 border:1px solid #BDBDBD;55 display:flex; align-items:center; justify-content:center; color:#757575; font-weight:600;56 }57 58 /* Title section */59 .title-wrap {60 padding: 24px 32px 8px;61 }62 .title {63 font-size: 56px;64 line-height: 1.1;65 margin: 0 0 8px 0;66 font-weight: 800;67 color:#1b1e23;68 }69 .sub {70 color:#6b7b88;71 font-size: 28px;72 }73 74 /* Product grid */75 .grid {76 padding: 12px 24px 180px;77 display: grid;78 grid-template-columns: 1fr 1fr;79 gap: 28px;80 }81 82 .card {83 background: #fff;84 }85 .thumb {86 position: relative;87 width: 100%;88 height: 680px;89 background: #E0E0E0;90 border: 1px solid #BDBDBD;91 display:flex; align-items:center; justify-content:center; color:#757575; font-weight:600;92 }93 .dotbar {94 position: absolute;95 right: 24px;96 bottom: 22px;97 display: flex; gap: 8px;98 }99 .dot { width: 16px; height:16px; border-radius: 50%; background:#cfcfcf; }100 .dot.dark { background:#9e9e9e; }101 102 .floating-actions {103 position: absolute;104 right: 20px;105 top: 20px;106 display: flex;107 flex-direction: column;108 gap: 16px;109 }110 .fab {111 width: 84px; height: 84px; border-radius: 50%;112 background: #ffffff;113 box-shadow: 0 2px 8px rgba(0,0,0,0.12);114 display:flex; align-items:center; justify-content:center;115 border: 1px solid #eaeaea;116 }117 .fab svg { width: 40px; height: 40px; stroke:#222; stroke-width:2.2; }118 119 .badge {120 display: inline-block;121 font-size: 22px;122 padding: 8px 14px;123 border: 2px solid #cfe0ef;124 border-radius: 8px;125 color:#2b5876;126 background: #f1f7fc;127 margin: 18px 0 6px 0;128 }129 130 .meta {131 padding: 8px 8px 0;132 }133 .brand-name {134 font-weight: 800;135 font-size: 30px;136 margin: 8px 0 2px;137 color:#222;138 }139 .prod-name {140 font-size: 28px;141 color:#333;142 margin: 4px 0 10px;143 }144 145 .colors {146 display:flex; gap: 10px; align-items:center; margin: 6px 0 8px;147 }148 .swatch { width: 26px; height:26px; border-radius:50%; border:2px solid #ddd; }149 .strike { color:#8a97a2; text-decoration: line-through; margin-left: 10px; }150 .price {151 font-weight: 800; font-size: 36px; color:#111;152 }153 .off { color:#0a8f2d; font-weight:700; margin-left: 10px; }154 .extra { color:#0a8f2d; font-size:26px; margin-top: 6px; }155 .alert { color:#ff6a00; font-size: 26px; margin-top: 4px; }156 157 /* Bottom action bar */158 .bottom-bar {159 position: absolute;160 left: 0; right: 0; bottom: 0;161 height: 160px;162 background: #ffffff;163 border-top: 1px solid #e8e8e8;164 display: grid;165 grid-template-columns: 1fr 1fr;166 }167 .bar-item {168 display:flex; align-items:center; gap: 18px; padding: 20px 32px;169 }170 .bar-item + .bar-item { border-left: 1px solid #eee; }171 .bar-title { font-weight: 700; font-size: 32px; }172 .bar-sub { color:#7b8a96; font-size: 26px; margin-top: 4px; }173 .bar-stack { display:flex; flex-direction: column; }174 .tiny-dot { width: 14px; height: 14px; background:#ff3355; border-radius:50%; }175 176 /* small helper */177 .muted { color:#7b8a96; }178</style>179</head>180<body>181<div id="render-target">182 183 <!-- App bar -->184 <div class="appbar">185 <div class="appbar-left">186 <div class="icon-btn" aria-label="Back">187 <svg class="icon" viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7" stroke-linecap="round" stroke-linejoin="round"/></svg>188 </div>189 <div class="brand">NYKAA FASHION</div>190 </div>191 <div class="appbar-right">192 <div class="icon-btn" aria-label="Search">193 <svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3-3" stroke-linecap="round"/></svg>194 </div>195 <div class="icon-btn" aria-label="Wishlist">196 <svg class="icon" viewBox="0 0 24 24"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z" /></svg>197 </div>198 <div class="icon-btn" aria-label="Bag">199 <svg class="icon" viewBox="0 0 24 24"><path d="M6 8h12l-1 12H7L6 8z"/><path d="M9 8a3 3 0 0 1 6 0" /></svg>200 </div>201 </div>202 </div>203 204 <!-- Promo banner placeholder -->205 <div class="promo">206 <div class="img">[IMG: Promo Banner]</div>207 </div>208 209 <!-- Title -->210 <div class="title-wrap">211 <h1 class="title">black formal pants for women</h1>212 <div class="sub">109 items</div>213 </div>214 215 <!-- Product grid -->216 <div class="grid">217 218 <!-- Card 1 -->219 <div class="card">220 <div class="thumb">[IMG: Black Pants on Model]221 <div class="floating-actions">222 <div class="fab" title="Wishlist">223 <svg viewBox="0 0 24 24"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z" fill="none" stroke="#222"/><path d="M12 6v6m-3-3h6" stroke="#222" stroke-linecap="round"/></svg>224 </div>225 <div class="fab" title="Compare/Bag">226 <svg viewBox="0 0 24 24"><path d="M6 8h12l-1 12H7L6 8z" fill="none" stroke="#222"/><path d="M9 8a3 3 0 0 1 6 0" fill="none" stroke="#222"/></svg>227 </div>228 </div>229 <div class="dotbar"><div class="dot dark"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>230 </div>231 <div class="meta">232 <span class="badge">BESTSELLER</span>233 <div class="brand-name">FableStreet</div>234 <div class="prod-name">Black 4 Way Stretch Bootcut ...</div>235 <div>236 <span class="price">₹1,887</span>237 <span class="strike">₹2,695</span>238 <span class="off">30% Off</span>239 </div>240 <div class="extra">Extra 15% Off</div>241 </div>242 </div>243 244 <!-- Card 2 -->245 <div class="card">246 <div class="thumb">[IMG: Black Pants on Model]247 <div class="floating-actions">248 <div class="fab" title="Wishlist">249 <svg viewBox="0 0 24 24"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z" fill="none" stroke="#222"/><path d="M12 6v6m-3-3h6" stroke="#222" stroke-linecap="round"/></svg>250 </div>251 <div class="fab" title="Compare/Bag">252 <svg viewBox="0 0 24 24"><path d="M6 8h12l-1 12H7L6 8z" fill="none" stroke="#222"/><path d="M9 8a3 3 0 0 1 6 0" fill="none" stroke="#222"/></svg>253 </div>254 </div>255 <div class="dotbar"><div class="dot dark"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>256 </div>257 <div class="meta">258 <div class="brand-name">TINTED</div>259 <div class="prod-name">Black Formal Pants for Women</div>260 <div class="colors">261 <div class="swatch" style="background:#000;"></div>262 <div class="swatch" style="background:#3b2d1f;"></div>263 <div class="swatch" style="background:#ffffff;"></div>264 <div class="swatch" style="background:#caa57a;"></div>265 <div class="swatch" style="background:#3c47ff;"></div>266 <span class="muted" style="font-size:26px;">+3 more</span>267 </div>268 <div>269 <span class="price">₹1,000</span>270 <span class="strike">₹1,999</span>271 <span class="off">50% Off</span>272 </div>273 <div class="alert">Lowest price ever</div>274 </div>275 </div>276 277 <!-- Card 3 -->278 <div class="card">279 <div class="thumb">[IMG: Black Pants on Model]280 <div class="floating-actions">281 <div class="fab" title="Wishlist">282 <svg viewBox="0 0 24 24"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z" fill="none" stroke="#222"/><path d="M12 6v6m-3-3h6" stroke="#222" stroke-linecap="round"/></svg>283 </div>284 <div class="fab" title="Compare/Bag">285 <svg viewBox="0 0 24 24"><path d="M6 8h12l-1 12H7L6 8z" fill="none" stroke="#222"/><path d="M9 8a3 3 0 0 1 6 0" fill="none" stroke="#222"/></svg>286 </div>287 </div>288 <div class="dotbar"><div class="dot dark"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>289 </div>290 <div class="meta">291 <div class="brand-name">Label A</div>292 <div class="prod-name">Relaxed Fit Black Pants</div>293 <div>294 <span class="price">₹1,299</span>295 <span class="strike">₹1,899</span>296 <span class="off">32% Off</span>297 </div>298 </div>299 </div>300 301 <!-- Card 4 -->302 <div class="card">303 <div class="thumb">[IMG: Black Pants on Model]304 <div class="floating-actions">305 <div class="fab" title="Wishlist">306 <svg viewBox="0 0 24 24"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z" fill="none" stroke="#222"/><path d="M12 6v6m-3-3h6" stroke="#222" stroke-linecap="round"/></svg>307 </div>308 <div class="fab" title="Compare/Bag">309 <svg viewBox="0 0 24 24"><path d="M6 8h12l-1 12H7L6 8z" fill="none" stroke="#222"/><path d="M9 8a3 3 0 0 1 6 0" fill="none" stroke="#222"/></svg>310 </div>311 </div>312 <div class="dotbar"><div class="dot dark"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>313 </div>314 <div class="meta">315 <div class="brand-name">Label B</div>316 <div class="prod-name">Slim Fit Formal Trousers</div>317 <div>318 <span class="price">₹1,499</span>319 <span class="strike">₹2,299</span>320 <span class="off">35% Off</span>321 </div>322 </div>323 </div>324 325 </div>326 327 <!-- Bottom bar -->328 <div class="bottom-bar">329 <div class="bar-item">330 <svg class="icon" viewBox="0 0 24 24"><path d="M4 20v-6M10 20v-9M16 20V8M22 20V4" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round"/></svg>331 <div class="bar-stack">332 <div class="bar-title">Sort by</div>333 <div class="bar-sub">Popularity</div>334 </div>335 <div class="tiny-dot" style="margin-left:auto;"></div>336 </div>337 <div class="bar-item">338 <svg class="icon" viewBox="0 0 24 24"><path d="M3 5h18l-7 8v6l-4-2v-4L3 5z" stroke="#111" stroke-width="2.5" fill="none" stroke-linejoin="round"/></svg>339 <div class="bar-stack">340 <div class="bar-title">Filter</div>341 <div class="bar-sub">No Filter Applied</div>342 </div>343 <div class="tiny-dot" style="background:#d0d7de; margin-left:auto;"></div>344 </div>345 </div>346 347</div>348</body>349</html>