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>Sports Shoes For Men - Listing</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: #121212;15 color: #FFFFFF;16 }17 18 /* Top status bar */19 .status-bar {20 height: 120px;21 background: #0E0E0E;22 color: #CFCFCF;23 display: flex;24 align-items: center;25 justify-content: flex-end;26 padding: 0 32px;27 font-size: 28px;28 letter-spacing: 0.2px;29 }30 31 /* App bar */32 .app-bar {33 height: 120px;34 background: #1A1A1A;35 display: flex;36 align-items: center;37 padding: 0 28px;38 border-bottom: 1px solid #2A2A2A;39 }40 .app-bar .title {41 font-size: 38px;42 font-weight: 700;43 margin-left: 24px;44 letter-spacing: 0.5px;45 }46 .app-actions {47 margin-left: auto;48 display: flex;49 gap: 28px;50 }51 .icon-btn {52 width: 54px; height: 54px;53 }54 .icon {55 width: 54px; height: 54px; fill: none; stroke: #E0E0E0; stroke-width: 3;56 }57 .icon-fill { fill: #E0E0E0; stroke: none; }58 59 /* Search bar */60 .search-wrap {61 padding: 24px 28px 16px 28px;62 background: #1D1D1D;63 border-bottom: 1px solid #2A2A2A;64 }65 .search-bar {66 height: 92px;67 background: #141414;68 border: 2px solid #6BD04A;69 border-radius: 16px;70 display: flex;71 align-items: center;72 padding: 0 24px;73 }74 .search-bar span {75 color: #BDBDBD;76 font-size: 34px;77 margin-left: 18px;78 }79 .mic {80 margin-left: auto;81 width: 56px; height: 56px;82 background: #6BD04A;83 border-radius: 50%;84 display: flex; justify-content: center; align-items: center;85 }86 .mic svg { width: 30px; height: 30px; fill: #0E0E0E; }87 88 /* Coupon / banner */89 .coupon {90 margin: 18px 28px 0 28px;91 background: #E9F5CF;92 color: #0E0E0E;93 border-radius: 16px;94 display: flex;95 align-items: center;96 min-height: 120px;97 position: relative;98 }99 .coupon .code {100 width: 160px;101 background: #2A2A2A;102 color: #BEE46F;103 border-top-left-radius: 16px;104 border-bottom-left-radius: 16px;105 text-align: center;106 font-weight: 700;107 font-size: 28px;108 padding: 14px 0;109 display: flex; align-items: center; justify-content: center;110 writing-mode: vertical-rl;111 transform: rotate(180deg);112 letter-spacing: 1px;113 }114 .coupon .text {115 padding: 0 28px;116 font-size: 38px;117 font-weight: 700;118 }119 .coupon .sub {120 font-weight: 500; font-size: 34px; margin-left: 12px;121 }122 .coupon .icons {123 margin-left: auto;124 display: flex; gap: 16px; padding-right: 20px;125 }126 .coupon .icons .round {127 width: 52px; height: 52px; border-radius: 50%; background: #D9E9B8;128 display: flex; align-items: center; justify-content: center;129 }130 131 /* Filter headers */132 .filter-headers {133 display: flex;134 padding: 26px 28px 12px 28px;135 gap: 40px;136 color: #D0D0D0;137 font-size: 30px;138 }139 .filter-headers .fh {140 display: flex; align-items: center; gap: 10px;141 }142 .chev { width: 28px; height: 28px; }143 144 /* Chips */145 .chips {146 display: flex; gap: 18px;147 padding: 14px 28px 10px 28px;148 }149 .chip {150 background: #213646;151 color: #E6F2FF;152 border-radius: 40px;153 padding: 18px 26px;154 font-size: 30px;155 white-space: nowrap;156 }157 158 /* Price slider (visual only) */159 .price-slider {160 margin: 18px 28px 14px 28px;161 position: relative;162 height: 80px;163 }164 .price-slider .labels {165 display: flex; justify-content: space-between; color: #FFFFFF; font-size: 34px; margin-bottom: 10px;166 }167 .price-slider .track {168 height: 6px; background: #7FD65A;169 position: absolute; left: 40px; right: 40px; top: 48px;170 border-radius: 3px;171 }172 .price-slider .dot {173 width: 40px; height: 40px; background: #9BE06F; border: 4px solid #477D2C; border-radius: 50%;174 position: absolute; top: 30px;175 }176 .price-slider .dot.left { left: 16px; }177 .price-slider .dot.right { right: 16px; }178 179 /* Results info */180 .results-info {181 padding: 18px 28px;182 color: #CFCFCF;183 font-size: 32px;184 }185 .results-info b { color: #FFFFFF; font-weight: 800; }186 187 /* Product grid */188 .grid {189 display: grid;190 grid-template-columns: 1fr 1fr;191 gap: 0;192 }193 .card {194 background: #1A1A1A;195 border-right: 1px solid #2A2A2A;196 border-top: 1px solid #2A2A2A;197 }198 .card .img {199 height: 420px;200 background: #E0E0E0;201 border: 1px solid #BDBDBD;202 display: flex; align-items: center; justify-content: center;203 color: #757575;204 font-size: 34px;205 }206 .card .overlay {207 position: relative;208 }209 .badge {210 position: absolute; left: 18px; bottom: -26px;211 background: #262E26;212 color: #E6FFE6;213 border-radius: 24px;214 display: flex; align-items: center; gap: 10px;215 padding: 10px 16px;216 font-size: 28px;217 box-shadow: 0 2px 0 rgba(0,0,0,0.2);218 }219 .badge .star { width: 26px; height: 26px; fill: #7FD65A; }220 .wish {221 position: absolute; right: 18px; bottom: -30px;222 width: 54px; height: 54px; border-radius: 50%; background: #242424; display:flex; align-items:center; justify-content:center; border:1px solid #3A3A3A;223 }224 .wish svg { width: 30px; height: 30px; stroke: #E26A8A; fill: none; stroke-width: 3; }225 226 .details {227 padding: 44px 22px 28px 22px;228 }229 .price-line { font-size: 34px; margin-bottom: 8px; }230 .price-line .now { font-weight: 800; color: #FFFFFF; }231 .price-line .old { color: #A0A0A0; text-decoration: line-through; margin: 0 12px; }232 .price-line .off { color: #7FD65A; font-weight: 700; }233 .title { font-size: 30px; color: #EDEDED; margin-bottom: 4px; }234 .brand { font-size: 28px; color: #BDBDBD; }235 .brand b { color: #FFFFFF; }236 237 /* Bottom toolbar */238 .bottom-toolbar {239 position: absolute;240 left: 0; right: 0; bottom: 80px;241 height: 120px; background: #1A1A1A;242 border-top: 1px solid #2A2A2A;243 display: flex; align-items: center; justify-content: space-between;244 padding: 0 40px;245 font-size: 32px;246 }247 .bt-item {248 display: flex; align-items: center; gap: 14px; color: #EDEDED;249 }250 .bt-divider {251 position: absolute; left: 50%; top: 20px; bottom: 20px; width: 2px; background: #2A2A2A;252 }253 .bt-icon { width: 38px; height: 38px; stroke: #EDEDED; stroke-width: 3; fill: none; }254 255 /* Gesture bar */256 .gesture {257 position: absolute; left: 50%; transform: translateX(-50%);258 bottom: 24px; width: 240px; height: 12px; background: #FFFFFF; border-radius: 10px; opacity: 0.85;259 }260</style>261</head>262<body>263<div id="render-target">264 265 <!-- Status bar (simulated) -->266 <div class="status-bar">10:48 • 94%</div>267 268 <!-- App bar -->269 <div class="app-bar">270 <svg class="icon-btn icon" viewBox="0 0 24 24">271 <path d="M15 5 L9 12 L15 19" />272 <path d="M9 12 H22" />273 </svg>274 <div class="title">SPORTS SHOES FOR MEN</div>275 <div class="app-actions">276 <svg class="icon" viewBox="0 0 24 24">277 <path d="M12 21 C7 16 4 13 4 9 A8 8 0 0 1 12 4 A8 8 0 0 1 20 9 C20 13 17 16 12 21 Z" />278 </svg>279 <svg class="icon" viewBox="0 0 24 24">280 <path d="M3 6 H5 L7 17 H18 L20 9 H8" />281 <circle cx="9" cy="20" r="1.6" />282 <circle cx="17" cy="20" r="1.6" />283 </svg>284 <svg class="icon" viewBox="0 0 24 24">285 <circle cx="12" cy="8" r="4" />286 <path d="M4 22 C6 16 18 16 20 22" />287 </svg>288 </div>289 </div>290 291 <!-- Search -->292 <div class="search-wrap">293 <div class="search-bar">294 <svg class="icon" viewBox="0 0 24 24">295 <circle cx="10" cy="10" r="7" />296 <path d="M21 21 L16 16" />297 </svg>298 <span>What are you looking for?</span>299 <div class="mic">300 <svg viewBox="0 0 24 24">301 <rect x="9" y="5" width="6" height="10" rx="3" />302 <path d="M6 11 C6 15 18 15 18 11" />303 <path d="M12 15 V20" />304 <path d="M8 20 H16" />305 </svg>306 </div>307 </div>308 </div>309 310 <!-- Coupon -->311 <div class="coupon">312 <div class="code">use code: LR200</div>313 <div class="text">₹200 OFF <span class="sub">on first order</span></div>314 <div class="icons">315 <div class="round">316 <svg viewBox="0 0 24 24" class="icon-fill">317 <rect x="6" y="5" width="12" height="14" rx="2"></rect>318 <path d="M9 3 H15" stroke="#0E0E0E" stroke-width="2"></path>319 </svg>320 </div>321 <div class="round">322 <svg viewBox="0 0 24 24" class="icon-fill">323 <circle cx="12" cy="12" r="9"></circle>324 <text x="12" y="16" font-size="12" fill="#0E0E0E" text-anchor="middle">i</text>325 </svg>326 </div>327 </div>328 </div>329 330 <!-- Filter headers -->331 <div class="filter-headers">332 <div class="fh">BRAND333 <svg class="chev" viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9" stroke="#D0D0D0" stroke-width="2" fill="none"/></svg>334 </div>335 <div class="fh">SIZE336 <svg class="chev" viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9" stroke="#D0D0D0" stroke-width="2" fill="none"/></svg>337 </div>338 <div class="fh">DISCOUNTS339 <svg class="chev" viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9" stroke="#D0D0D0" stroke-width="2" fill="none"/></svg>340 </div>341 <div class="fh">COLOR342 <svg class="chev" viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9" stroke="#D0D0D0" stroke-width="2" fill="none"/></svg>343 </div>344 </div>345 346 <!-- Chips -->347 <div class="chips">348 <div class="chip">New</div>349 <div class="chip">Top Rated</div>350 <div class="chip">Editor's Picks</div>351 <div class="chip">Bright Colours</div>352 </div>353 354 <!-- Price slider -->355 <div class="price-slider">356 <div class="labels">357 <div>₹199</div>358 <div>₹6299</div>359 </div>360 <div class="track"></div>361 <div class="dot left"></div>362 <div class="dot right"></div>363 </div>364 365 <!-- Results text -->366 <div class="results-info"><b>3081</b> Result(s) from <b>SPORTS SHOES FOR MEN</b></div>367 368 <!-- Product grid -->369 <div class="grid">370 <!-- Card 1 -->371 <div class="card">372 <div class="overlay">373 <div class="img">[IMG: Grey Sport Shoes]</div>374 <div class="badge">375 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L14.6 8.5 L21.6 9.2 L16.5 13.7 L18.3 20.5 L12 16.8 L5.7 20.5 L7.5 13.7 L2.4 9.2 L9.4 8.5 Z"></path></svg>376 <span>4.5</span>377 </div>378 <div class="wish">379 <svg viewBox="0 0 24 24"><path d="M12 21 C7 16 4 13 4 9 A5 5 0 0 1 12 8 A5 5 0 0 1 20 9 C20 13 17 16 12 21 Z" /></svg>380 </div>381 </div>382 <div class="details">383 <div class="price-line"><span class="now">₹549</span><span class="old">₹999</span><span class="off">45% off</span></div>384 <div class="title">Grey Solid Sport Shoes</div>385 <div class="brand">By <b>ASIAN</b></div>386 </div>387 </div>388 389 <!-- Card 2 -->390 <div class="card">391 <div class="overlay">392 <div class="img">[IMG: Navy Slip-On Sport Shoe]</div>393 <div class="badge">394 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L14.6 8.5 L21.6 9.2 L16.5 13.7 L18.3 20.5 L12 16.8 L5.7 20.5 L7.5 13.7 L2.4 9.2 L9.4 8.5 Z"></path></svg>395 <span>4</span>396 </div>397 <div class="wish">398 <svg viewBox="0 0 24 24"><path d="M12 21 C7 16 4 13 4 9 A5 5 0 0 1 12 8 A5 5 0 0 1 20 9 C20 13 17 16 12 21 Z" /></svg>399 </div>400 </div>401 <div class="details">402 <div class="price-line"><span class="now">₹639</span><span class="old">₹999</span><span class="off">36% off</span></div>403 <div class="title">Navy Slip On Sport Shoe</div>404 <div class="brand">By <b>ASIAN</b></div>405 </div>406 </div>407 408 <!-- Card 3 -->409 <div class="card">410 <div class="overlay">411 <div class="img">[IMG: Grey-Teal Running Shoe]</div>412 <div class="badge">413 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L14.6 8.5 L21.6 9.2 L16.5 13.7 L18.3 20.5 L12 16.8 L5.7 20.5 L7.5 13.7 L2.4 9.2 L9.4 8.5 Z"></path></svg>414 <span>4.2</span>415 </div>416 <div class="wish">417 <svg viewBox="0 0 24 24"><path d="M12 21 C7 16 4 13 4 9 A5 5 0 0 1 12 8 A5 5 0 0 1 20 9 C20 13 17 16 12 21 Z" /></svg>418 </div>419 </div>420 <div class="details">421 <div class="price-line"><span class="now">₹699</span><span class="old">₹1299</span><span class="off">46% off</span></div>422 <div class="title">Grey-Teal Running Shoe</div>423 <div class="brand">By <b>ASIAN</b></div>424 </div>425 </div>426 427 <!-- Card 4 -->428 <div class="card">429 <div class="overlay">430 <div class="img">[IMG: White Sneaker]</div>431 <div class="badge">432 <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L14.6 8.5 L21.6 9.2 L16.5 13.7 L18.3 20.5 L12 16.8 L5.7 20.5 L7.5 13.7 L2.4 9.2 L9.4 8.5 Z"></path></svg>433 <span>4.1</span>434 </div>435 <div class="wish">436 <svg viewBox="0 0 24 24"><path d="M12 21 C7 16 4 13 4 9 A5 5 0 0 1 12 8 A5 5 0 0 1 20 9 C20 13 17 16 12 21 Z" /></svg>437 </div>438 </div>439 <div class="details">440 <div class="price-line"><span class="now">₹799</span><span class="old">₹1499</span><span class="off">47% off</span></div>441 <div class="title">White Sneaker</div>442 <div class="brand">By <b>ASIAN</b></div>443 </div>444 </div>445 </div>446 447 <!-- Bottom toolbar -->448 <div class="bottom-toolbar">449 <div class="bt-item">450 <svg class="bt-icon" viewBox="0 0 24 24">451 <path d="M4 6 H20" />452 <path d="M7 12 H17" />453 <path d="M10 18 H14" />454 </svg>455 <span>FILTER</span>456 </div>457 <div class="bt-divider"></div>458 <div class="bt-item">459 <svg class="bt-icon" viewBox="0 0 24 24">460 <path d="M8 5 L12 1 L16 5" />461 <path d="M12 2 V22" />462 <path d="M16 19 L12 23 L8 19" />463 </svg>464 <span>SORT</span>465 </div>466 </div>467 468 <div class="gesture"></div>469</div>470</body>471</html>