GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Nykaa Man - Sports Shoes</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: #ffffff;13 box-sizing: border-box;14 }15 16 /* Status bar */17 .status-bar {18 height: 80px;19 padding: 0 24px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #222;24 font-size: 28px;25 }26 .status-icons {27 display: flex;28 align-items: center;29 gap: 22px;30 }31 .status-dot {32 width: 12px; height: 12px; background: #666; border-radius: 50%;33 }34 35 /* App header */36 .app-header {37 height: 110px;38 padding: 0 24px;39 display: flex;40 align-items: center;41 justify-content: space-between;42 }43 .brand-left {44 display: flex; align-items: center; gap: 18px;45 }46 .nykaa-logo {47 font-weight: 800;48 letter-spacing: 1px;49 font-size: 40px;50 color: #0d0d0d;51 }52 .nykaa-sub { font-size: 28px; font-weight: 700; margin-left: 8px; color: #0d0d0d; }53 .header-actions { display: flex; align-items: center; gap: 34px; }54 55 /* Title */56 .page-title {57 padding: 18px 32px 8px 32px;58 font-size: 56px;59 font-weight: 800;60 color: #1d1d1d;61 }62 .subtitle {63 padding: 0 32px;64 font-size: 30px;65 color: #6b6b6b;66 margin-bottom: 18px;67 }68 69 /* Sort & Filter Row */70 .sort-filter-row {71 display: grid;72 grid-template-columns: 1fr 1fr;73 padding: 0 32px;74 border-top: 1px solid #ececec;75 border-bottom: 1px solid #ececec;76 height: 120px;77 }78 .sort-cell, .filter-cell {79 display: flex; align-items: center; gap: 18px;80 }81 .dot {82 width: 16px; height: 16px; background: #0a7; border-radius: 50%;83 }84 .row-title { font-size: 34px; font-weight: 700; color: #1b1b1b; }85 .row-sub { font-size: 30px; color: #3a7bd5; }86 .row-muted { font-size: 30px; color: #9ba3b0; }87 88 /* Banner */89 .promo-banner {90 margin: 24px 32px;91 height: 160px;92 border-radius: 16px;93 background: linear-gradient(90deg, #7db7ff, #a6f3df);94 box-shadow: 0 6px 14px rgba(0,0,0,0.08);95 display: flex; align-items: center; justify-content: space-between;96 padding: 0 32px;97 color: #fff;98 }99 .promo-left {100 font-size: 42px; font-weight: 800;101 }102 .promo-sub { font-size: 28px; font-weight: 600; opacity: 0.95; }103 .promo-code {104 background: rgba(255,255,255,0.25);105 border: 2px solid rgba(255,255,255,0.65);106 color: #0d1b2a;107 padding: 18px 24px;108 border-radius: 12px;109 font-size: 32px;110 font-weight: 800;111 text-align: center;112 }113 .promo-code small { display: block; color: #0d1b2a; font-weight: 700; font-size: 26px; }114 115 /* Grid of products */116 .grid {117 display: grid;118 grid-template-columns: 1fr 1fr;119 gap: 28px;120 padding: 0 32px;121 }122 .card {123 background: #fff;124 border-radius: 14px;125 border: 1px solid #e8e8e8;126 box-shadow: 0 6px 10px rgba(0,0,0,0.04);127 overflow: hidden;128 }129 .img {130 width: 100%;131 height: 520px;132 background: #E0E0E0;133 border-bottom: 1px solid #BDBDBD;134 display: flex; align-items: center; justify-content: center;135 color: #757575; font-size: 30px; font-weight: 600;136 }137 .rating-pill {138 position: relative;139 margin-top: -20px;140 margin-left: 18px;141 width: fit-content;142 background: #fff;143 border: 1px solid #e3e3e3;144 border-radius: 28px;145 padding: 10px 16px;146 display: inline-flex; align-items: center; gap: 8px;147 font-size: 28px;148 color: #444;149 }150 .card-body { padding: 20px; }151 .product-title {152 font-size: 34px; font-weight: 700; color: #1c1c1c;153 line-height: 1.25; margin-bottom: 10px;154 }155 .price-row {156 display: flex; align-items: baseline; gap: 16px; margin: 6px 0 18px 0;157 }158 .price { font-size: 36px; font-weight: 800; color: #0b1b30; }159 .old-price { font-size: 32px; color: #9aa1a9; text-decoration: line-through; }160 .discount { font-size: 32px; font-weight: 700; color: #2ea44f; }161 162 .card-actions {163 display: flex; align-items: center; justify-content: space-between;164 padding: 12px 20px 22px 20px;165 }166 .wishlist-btn {167 width: 100px; height: 86px; border: 1px solid #d6d6d6; border-radius: 14px;168 display: flex; align-items: center; justify-content: center; background: #fff;169 }170 .size-btn {171 flex: 1;172 margin-left: 20px;173 height: 86px;174 background: #0f2a3a;175 color: #fff; font-size: 34px; font-weight: 800;176 border-radius: 14px;177 display: flex; align-items: center; justify-content: center;178 }179 180 .badge {181 font-size: 28px; font-weight: 800; color: #2a64f6;182 padding-left: 8px; margin-bottom: 8px;183 }184 185 /* Bottom gesture bar */186 .gesture-bar {187 position: absolute;188 bottom: 24px; left: 50%;189 transform: translateX(-50%);190 width: 360px; height: 10px; border-radius: 8px; background: #000;191 }192 193 /* Utility icons */194 svg { display: block; }195 .ico-24 { width: 48px; height: 48px; }196 .ico-28 { width: 56px; height: 56px; }197 .ico-20 { width: 40px; height: 40px; }198 199</style>200</head>201<body>202<div id="render-target">203 204 <!-- Status bar -->205 <div class="status-bar">206 <div>12:52</div>207 <div class="status-icons">208 <div class="status-dot"></div>209 <div class="status-dot"></div>210 <div>100%</div>211 </div>212 </div>213 214 <!-- App header -->215 <div class="app-header">216 <div class="brand-left">217 <!-- Back icon -->218 <svg class="ico-28" viewBox="0 0 24 24">219 <path d="M15 6 L9 12 L15 18" stroke="#111" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>220 </svg>221 <div class="nykaa-logo">NYKAA<span class="nykaa-sub">MAN</span></div>222 </div>223 <div class="header-actions">224 <!-- Search -->225 <svg class="ico-28" viewBox="0 0 24 24">226 <circle cx="10" cy="10" r="7" stroke="#111" stroke-width="2.2" fill="none"/>227 <path d="M15 15 L21 21" stroke="#111" stroke-width="2.2" stroke-linecap="round"/>228 </svg>229 <!-- Heart -->230 <svg class="ico-28" viewBox="0 0 24 24">231 <path d="M12 21 C12 21 4 14.5 4 9.5 C4 7 6 5 8.5 5 C10 5 11 5.8 12 7 C13 5.8 14 5 15.5 5 C18 5 20 7 20 9.5 C20 14.5 12 21 12 21 Z"232 fill="none" stroke="#111" stroke-width="2"/>233 </svg>234 <!-- Bag -->235 <svg class="ico-28" viewBox="0 0 24 24">236 <path d="M6 8 H18 L19 20 H5 Z" fill="none" stroke="#111" stroke-width="2"/>237 <path d="M9 8 C9 5.5 10.5 4 12 4 C13.5 4 15 5.5 15 8" fill="none" stroke="#111" stroke-width="2"/>238 </svg>239 </div>240 </div>241 242 <!-- Title -->243 <div class="page-title">sports shoes for men</div>244 <div class="subtitle">9,306 products</div>245 246 <!-- Sort & Filter -->247 <div class="sort-filter-row">248 <div class="sort-cell">249 <div class="dot"></div>250 <!-- Sort icon -->251 <svg class="ico-24" viewBox="0 0 24 24">252 <path d="M4 6 H14" stroke="#111" stroke-width="2" stroke-linecap="round"/>253 <path d="M4 12 H12" stroke="#111" stroke-width="2" stroke-linecap="round"/>254 <path d="M4 18 H18" stroke="#111" stroke-width="2" stroke-linecap="round"/>255 </svg>256 <div>257 <div class="row-title">Sort by</div>258 <div class="row-sub">Relevance</div>259 </div>260 </div>261 <div class="filter-cell" style="justify-content:flex-end;">262 <!-- Filter sliders icon -->263 <svg class="ico-24" viewBox="0 0 24 24">264 <path d="M4 6 H20" stroke="#111" stroke-width="2" stroke-linecap="round"/>265 <circle cx="10" cy="6" r="2" fill="none" stroke="#111" stroke-width="2"/>266 <path d="M4 12 H20" stroke="#111" stroke-width="2" stroke-linecap="round"/>267 <circle cx="15" cy="12" r="2" fill="none" stroke="#111" stroke-width="2"/>268 <path d="M4 18 H20" stroke="#111" stroke-width="2" stroke-linecap="round"/>269 <circle cx="7" cy="18" r="2" fill="none" stroke="#111" stroke-width="2"/>270 </svg>271 <div>272 <div class="row-title">Filter</div>273 <div class="row-muted">No filter applied</div>274 </div>275 </div>276 </div>277 278 <!-- Banner -->279 <div class="promo-banner">280 <div>281 <div class="promo-left">GET UP TO ₹300 OFF</div>282 <div class="promo-sub">On Your 1st App Order</div>283 </div>284 <div class="promo-code"><small>USE CODE</small> NYKMAN1ST</div>285 </div>286 287 <!-- Product Grid -->288 <div class="grid">289 290 <!-- Card 1 -->291 <div class="card">292 <div class="img">[IMG: Seated model with Black Training Shoes]</div>293 <div class="rating-pill">294 <!-- star -->295 <svg class="ico-20" viewBox="0 0 24 24">296 <path d="M12 3 L14.7 9.2 L21.3 9.2 L16 13.4 L18.1 20 L12 16.4 L5.9 20 L8 13.4 L2.7 9.2 L9.3 9.2 Z" fill="#2ea44f" stroke="#2ea44f" stroke-width="1"/>297 </svg>298 4.0 (2)299 </div>300 <div class="card-body">301 <div class="product-title">Puma Softride Pro Coast Unisex Black Training Shoes</div>302 <div class="price-row">303 <div class="price">₹5599</div>304 <div class="old-price">₹7999</div>305 <div class="discount">30% Off</div>306 </div>307 </div>308 <div class="card-actions">309 <div class="wishlist-btn">310 <svg class="ico-24" viewBox="0 0 24 24">311 <path d="M12 21 C12 21 4 14.5 4 9.5 C4 7 6 5 8.5 5 C10 5 11 5.8 12 7 C13 5.8 14 5 15.5 5 C18 5 20 7 20 9.5 C20 14.5 12 21 12 21 Z"312 fill="none" stroke="#111" stroke-width="2"/>313 </svg>314 </div>315 <div class="size-btn">Select Size</div>316 </div>317 </div>318 319 <!-- Card 2 -->320 <div class="card">321 <div class="img">[IMG: Black Running Shoes on floor]</div>322 <div class="rating-pill">323 <svg class="ico-20" viewBox="0 0 24 24">324 <path d="M12 3 L14.7 9.2 L21.3 9.2 L16 13.4 L18.1 20 L12 16.4 L5.9 20 L8 13.4 L2.7 9.2 L9.3 9.2 Z" fill="#2ea44f" stroke="#2ea44f" stroke-width="1"/>325 </svg>326 4.0 (9)327 </div>328 <div class="card-body">329 <div class="product-title">Puma Hybrid Nx Men Black Running Shoes</div>330 <div class="price-row">331 <div class="price">₹4119</div>332 <div class="old-price">₹7499</div>333 <div class="discount">45% Off</div>334 </div>335 </div>336 <div class="card-actions">337 <div class="wishlist-btn">338 <svg class="ico-24" viewBox="0 0 24 24">339 <path d="M12 21 C12 21 4 14.5 4 9.5 C4 7 6 5 8.5 5 C10 5 11 5.8 12 7 C13 5.8 14 5 15.5 5 C18 5 20 7 20 9.5 C20 14.5 12 21 12 21 Z"340 fill="none" stroke="#111" stroke-width="2"/>341 </svg>342 </div>343 <div class="size-btn">Select Size</div>344 </div>345 </div>346 347 <!-- Card 3 -->348 <div class="card">349 <div class="badge">BESTSELLER</div>350 <div class="img" style="height: 480px;">[IMG: White Running Shoes top view on turquoise]</div>351 <div class="rating-pill">352 <svg class="ico-20" viewBox="0 0 24 24">353 <path d="M12 3 L14.7 9.2 L21.3 9.2 L16 13.4 L18.1 20 L12 16.4 L5.9 20 L8 13.4 L2.7 9.2 L9.3 9.2 Z" fill="#2ea44f" stroke="#2ea44f" stroke-width="1"/>354 </svg>355 4.2 (54)356 </div>357 <div class="card-body">358 <div class="product-title">Campus Rake Off White Men Running Shoes</div>359 <div class="price-row">360 <div class="price">₹1007</div>361 <div class="old-price">₹1599</div>362 <div class="discount">37% Off</div>363 </div>364 </div>365 </div>366 367 <!-- Card 4 -->368 <div class="card">369 <div class="img">[IMG: Full-body shot with Red Walking Shoes]</div>370 <div class="card-body">371 <div class="product-title">Puma Softride Enzo Evo Unisex Red Walking Shoes</div>372 <div class="price-row">373 <div class="price">₹5949</div>374 <div class="old-price">₹6999</div>375 <div class="discount">15% Off</div>376 </div>377 </div>378 </div>379 380 </div>381 382 <!-- Bottom gesture bar -->383 <div class="gesture-bar"></div>384 385</div>386</body>387</html>