GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Sports Shoes Listing</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #ffffff;14 box-shadow: 0 8px 24px rgba(0,0,0,0.12);15 border-radius: 24px;16 }17 18 /* Top status bar */19 .status-bar {20 height: 96px;21 display: flex;22 align-items: center;23 padding: 0 28px;24 color: #222;25 font-size: 36px;26 }27 .status-icons {28 margin-left: auto;29 display: flex;30 gap: 26px;31 align-items: center;32 color: #444;33 font-size: 34px;34 }35 36 /* Header */37 .header {38 display: flex;39 align-items: center;40 padding: 8px 28px 0 28px;41 }42 .back-btn {43 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; margin-right: 8px;44 }45 .back-btn svg { width: 42px; height: 42px; }46 .title-block {47 flex: 1;48 padding-left: 8px;49 }50 .title-block h1 {51 margin: 0;52 font-size: 54px;53 font-weight: 700;54 color: #111;55 }56 .subtitle {57 font-size: 30px;58 color: #6b6b6b;59 margin-top: 8px;60 }61 .top-actions {62 display: flex;63 gap: 28px;64 align-items: center;65 }66 .top-actions .icon-btn {67 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;68 }69 .top-actions svg { width: 40px; height: 40px; }70 71 /* Product grid */72 .grid {73 padding: 24px 28px 180px 28px;74 display: grid;75 grid-template-columns: 1fr 1fr;76 gap: 28px;77 }78 .card {79 border: 1px solid #E0E0E0;80 border-radius: 24px;81 overflow: hidden;82 background: #fff;83 position: relative;84 }85 .img-wrap {86 height: 620px;87 background: #E0E0E0;88 border-bottom: 1px solid #BDBDBD;89 display: flex; align-items: center; justify-content: center;90 color: #757575; font-size: 32px;91 position: relative;92 }93 .badge {94 position: absolute;95 top: 18px;96 left: 18px;97 background: #111;98 color: #fff;99 font-size: 26px;100 padding: 10px 16px;101 border-radius: 16px;102 letter-spacing: 0.5px;103 }104 .img-heart {105 position: absolute;106 bottom: 18px; right: 18px;107 display: flex; align-items: center; gap: 10px;108 background: rgba(255,255,255,0.92);109 padding: 8px 12px;110 border-radius: 22px;111 font-size: 26px; color: #444;112 border: 1px solid #DDD;113 }114 .content {115 padding: 22px;116 }117 .brand {118 font-size: 34px;119 font-weight: 700;120 color: #222;121 }122 .name {123 font-size: 30px;124 color: #555;125 margin-top: 6px;126 line-height: 1.35;127 min-height: 88px;128 }129 .rating {130 display: inline-flex; align-items: center; gap: 8px;131 background: #1faa00;132 color: #fff;133 font-size: 26px;134 padding: 10px 14px;135 border-radius: 14px;136 margin-top: 12px;137 }138 .rating .light { color: #e0ffe0; }139 .price-row {140 margin-top: 18px;141 display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;142 }143 .price {144 font-size: 36px; font-weight: 700; color: #111;145 }146 .strike {147 font-size: 32px; color: #9c9c9c; text-decoration: line-through;148 }149 .discount {150 font-size: 32px; color: #2e7d32; font-weight: 700;151 }152 .offerline {153 margin-top: 16px;154 font-size: 30px;155 color: #2e7d32;156 display: flex; align-items: center; gap: 12px;157 }158 .offerline .tag {159 width: 30px; height: 30px; border-radius: 50%;160 border: 2px solid #2e7d32;161 }162 .selling {163 margin-top: 18px;164 color: #d84343;165 font-size: 32px; font-weight: 700;166 }167 168 /* Bottom bar */169 .bottom-bar {170 position: absolute;171 bottom: 0;172 left: 0;173 width: 1080px;174 height: 180px;175 background: #0f0f0f;176 display: grid; grid-template-columns: 1fr 1fr 1fr;177 color: #fff;178 border-top-left-radius: 28px; border-top-right-radius: 28px;179 }180 .bb-item {181 display: flex; align-items: center; justify-content: center; gap: 18px; flex-direction: column;182 border-right: 1px solid rgba(255,255,255,0.15);183 }184 .bb-item:last-child { border-right: none; }185 .bb-title { font-size: 32px; font-weight: 700; }186 .bb-sub { font-size: 26px; color: #bdbdbd; }187 .bb-icon { width: 46px; height: 46px; }188 /* Simple anchor-like look for accessibility */189 .muted { color: #6b6b6b; }190</style>191</head>192<body>193<div id="render-target">194 195 <!-- Status Bar -->196 <div class="status-bar">197 12:38198 <div class="status-icons">199 •200 <span>LR</span>201 <span>🔍</span>202 <span>⭘</span>203 <span>📶</span>204 <span>97%</span>205 </div>206 </div>207 208 <!-- Header with back and actions -->209 <div class="header">210 <div class="back-btn" aria-label="Back">211 <svg viewBox="0 0 24 24">212 <path d="M15 18l-6-6 6-6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>213 </svg>214 </div>215 <div class="title-block">216 <h1>Sports Shoes</h1>217 <div class="subtitle">12038 Products</div>218 </div>219 <div class="top-actions">220 <div class="icon-btn">221 <svg viewBox="0 0 24 24">222 <circle cx="11" cy="11" r="7" stroke="#222" stroke-width="2" fill="none"/>223 <path d="M20 20l-3.5-3.5" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>224 </svg>225 </div>226 <div class="icon-btn">227 <svg viewBox="0 0 24 24">228 <path d="M12 21s-7-4.8-7-10.2A4.8 4.8 0 0112 7a4.8 4.8 0 017 3.8C19 16.2 12 21 12 21z" stroke="#222" stroke-width="2" fill="none"/>229 </svg>230 </div>231 <div class="icon-btn">232 <svg viewBox="0 0 24 24">233 <path d="M6 7h12l-1.5 10H7.5L6 7z" stroke="#222" stroke-width="2" fill="none"/>234 <circle cx="10" cy="20" r="1" fill="#222"/>235 <circle cx="16" cy="20" r="1" fill="#222"/>236 </svg>237 </div>238 </div>239 </div>240 241 <!-- Product Grid -->242 <div class="grid">243 244 <!-- Card 1 -->245 <div class="card">246 <div class="img-wrap">247 [IMG: Puma Lace-Up Smash Sprint Badminton Shoes]248 <div class="img-heart">249 <svg viewBox="0 0 24 24" width="26" height="26">250 <path d="M12 21s-7-4.8-7-10.2A4.8 4.8 0 0112 7a4.8 4.8 0 017 3.8C19 16.2 12 21 12 21z" stroke="#666" stroke-width="2" fill="none"/>251 </svg>252 <span class="muted">6.9K</span>253 </div>254 </div>255 <div class="content">256 <div class="brand">Puma</div>257 <div class="name">Lace-Up Smash Sprint Badminton Shoes</div>258 <div class="rating">259 3.6260 <svg viewBox="0 0 24 24" width="22" height="22">261 <path d="M12 17l-5.5 3 1.5-6-4.5-4 6-.5L12 3l2.5 6.5 6 .5-4.5 4 1.5 6z" fill="#fff"/>262 </svg>263 <span class="light">| 27</span>264 </div>265 <div class="price-row">266 <div class="price">₹1750</div>267 <div class="strike">₹4999</div>268 <div class="discount">65% off</div>269 </div>270 <div class="offerline">271 <span class="tag"></span>272 Offer Price ₹1,650273 </div>274 </div>275 </div>276 277 <!-- Card 2 -->278 <div class="card">279 <div class="img-wrap">280 <div class="badge">BESTSELLER</div>281 [IMG: NIKE Revolution 6 Flyease Running Shoes]282 <div class="img-heart">283 <svg viewBox="0 0 24 24" width="26" height="26">284 <path d="M12 21s-7-4.8-7-10.2A4.8 4.8 0 0112 7a4.8 4.8 0 017 3.8C19 16.2 12 21 12 21z" stroke="#666" stroke-width="2" fill="none"/>285 </svg>286 <span class="muted">7.7K</span>287 </div>288 </div>289 <div class="content">290 <div class="brand">NIKE</div>291 <div class="name">Revolution 6 Flyease Running Shoes</div>292 <div class="rating">293 3.7294 <svg viewBox="0 0 24 24" width="22" height="22">295 <path d="M12 17l-5.5 3 1.5-6-4.5-4 6-.5L12 3l2.5 6.5 6 .5-4.5 4 1.5 6z" fill="#fff"/>296 </svg>297 <span class="light">| 1.7K</span>298 </div>299 <div class="price-row">300 <div class="price">₹2771</div>301 <div class="strike">₹3695</div>302 <div class="discount">25% off</div>303 </div>304 <div class="offerline">305 <span class="tag"></span>306 Offer Price ₹2,513307 </div>308 <div class="selling">Selling Fast</div>309 </div>310 </div>311 312 <!-- Card 3 -->313 <div class="card">314 <div class="img-wrap">315 <div class="badge">BESTSELLER</div>316 [IMG: Puma Black Running Sneaker on white/black]317 <div class="img-heart">318 <svg viewBox="0 0 24 24" width="26" height="26">319 <path d="M12 21s-7-4.8-7-10.2A4.8 4.8 0 0112 7a4.8 4.8 0 017 3.8C19 16.2 12 21 12 21z" stroke="#666" stroke-width="2" fill="none"/>320 </svg>321 <span class="muted">7.7K</span>322 </div>323 </div>324 <div class="content">325 <div class="brand">Puma</div>326 <div class="name">Lightweight Running Shoes</div>327 <div class="rating">328 4.1329 <svg viewBox="0 0 24 24" width="22" height="22">330 <path d="M12 17l-5.5 3 1.5-6-4.5-4 6-.5L12 3l2.5 6.5 6 .5-4.5 4 1.5 6z" fill="#fff"/>331 </svg>332 <span class="light">| 3.2K</span>333 </div>334 <div class="price-row">335 <div class="price">₹2299</div>336 <div class="strike">₹3499</div>337 <div class="discount">34% off</div>338 </div>339 <div class="offerline">340 <span class="tag"></span>341 Offer Price ₹1,999342 </div>343 </div>344 </div>345 346 <!-- Card 4 -->347 <div class="card">348 <div class="img-wrap">349 [IMG: JQR Navy Blue Cushion Running Shoes]350 <div class="img-heart">351 <svg viewBox="0 0 24 24" width="26" height="26">352 <path d="M12 21s-7-4.8-7-10.2A4.8 4.8 0 0112 7a4.8 4.8 0 017 3.8C19 16.2 12 21 12 21z" stroke="#666" stroke-width="2" fill="none"/>353 </svg>354 <span class="muted">3.5K</span>355 </div>356 </div>357 <div class="content">358 <div class="brand">JQR</div>359 <div class="name">Air Cushion Sports Running Shoes</div>360 <div class="rating">361 4.0362 <svg viewBox="0 0 24 24" width="22" height="22">363 <path d="M12 17l-5.5 3 1.5-6-4.5-4 6-.5L12 3l2.5 6.5 6 .5-4.5 4 1.5 6z" fill="#fff"/>364 </svg>365 <span class="light">| 1.1K</span>366 </div>367 <div class="price-row">368 <div class="price">₹2999</div>369 <div class="strike">₹3999</div>370 <div class="discount">25% off</div>371 </div>372 <div class="offerline">373 <span class="tag"></span>374 Offer Price ₹2,799375 </div>376 </div>377 </div>378 379 </div>380 381 <!-- Bottom bar -->382 <div class="bottom-bar">383 <div class="bb-item">384 <svg class="bb-icon" viewBox="0 0 24 24">385 <path d="M7 6v12M17 6v12" stroke="#fff" stroke-width="2"/>386 <path d="M7 12l-2-2 2-2M17 12l2-2-2-2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>387 </svg>388 <div class="bb-title">SORT BY</div>389 <div class="bb-sub">Relevance</div>390 </div>391 <div class="bb-item">392 <svg class="bb-icon" viewBox="0 0 24 24">393 <rect x="4" y="5" width="16" height="4" stroke="#fff" stroke-width="2" fill="none"/>394 <rect x="4" y="15" width="16" height="4" stroke="#fff" stroke-width="2" fill="none"/>395 </svg>396 <div class="bb-title">STYLE TYPE</div>397 </div>398 <div class="bb-item">399 <svg class="bb-icon" viewBox="0 0 24 24">400 <path d="M4 6h16M8 12h12M12 18h8" stroke="#fff" stroke-width="2" stroke-linecap="round"/>401 </svg>402 <div class="bb-title">FILTERS</div>403 </div>404 </div>405 406</div>407</body>408</html>