GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Sports Shoes Listing</title>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: #F6F6F6;14 color: #222;15 }16 17 /* Top system status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 120px;24 background: #EFEFF0;25 display: flex;26 align-items: center;27 justify-content: space-between;28 padding: 0 36px;29 box-sizing: border-box;30 font-size: 42px;31 color: #1a1a1a;32 }33 .status-icons {34 display: flex;35 gap: 24px;36 align-items: center;37 }38 .dot { width: 16px; height: 16px; border-radius: 50%; background: #1a1a1a; opacity: .9; }39 40 /* App bar */41 .app-bar {42 position: absolute;43 top: 120px;44 left: 0;45 width: 1080px;46 height: 120px;47 background: #FFFFFF;48 display: flex;49 align-items: center;50 justify-content: space-between;51 padding: 0 28px;52 box-sizing: border-box;53 border-bottom: 1px solid #E5E5E5;54 }55 .app-left {56 display: flex;57 align-items: center;58 gap: 16px;59 }60 .app-title {61 font-size: 48px;62 font-weight: 700;63 letter-spacing: 0.2px;64 color: #222;65 }66 .app-actions {67 display: flex;68 align-items: center;69 gap: 32px;70 }71 .icon-btn {72 width: 80px;73 height: 80px;74 display: inline-flex;75 align-items: center;76 justify-content: center;77 border-radius: 50%;78 }79 .icon {80 width: 48px;81 height: 48px;82 stroke: #2b2b2b;83 fill: none;84 stroke-width: 6px;85 stroke-linecap: round;86 stroke-linejoin: round;87 }88 89 /* Scrollable content area */90 .content {91 position: absolute;92 top: 240px; /* status + app bar */93 left: 0;94 width: 1080px;95 height: 1980px; /* full height minus bottom toolbar */96 overflow-y: auto;97 -webkit-overflow-scrolling: touch;98 }99 100 /* Grid */101 .grid {102 display: flex;103 flex-wrap: wrap;104 gap: 24px;105 padding: 24px;106 box-sizing: border-box;107 }108 .card {109 position: relative;110 width: calc(50% - 12px); /* 2 columns */111 background: #FFFFFF;112 border: 1px solid #E7E7E7;113 border-radius: 6px;114 overflow: hidden;115 }116 .img-wrap {117 position: relative;118 width: 100%;119 height: 520px;120 background: #E0E0E0;121 border-bottom: 1px solid #D0D0D0;122 display: flex;123 align-items: center;124 justify-content: center;125 color: #6B6B6B;126 font-size: 34px;127 text-align: center;128 padding: 12px;129 box-sizing: border-box;130 }131 .badge-new {132 position: absolute;133 top: 14px;134 left: 14px;135 background: #2ECC71;136 color: #fff;137 font-size: 28px;138 font-weight: 800;139 padding: 6px 12px;140 border-radius: 6px;141 letter-spacing: .5px;142 }143 .fav-circle {144 position: absolute;145 top: 18px;146 right: 18px;147 width: 70px;148 height: 70px;149 border-radius: 50%;150 background: #FFFFFF;151 border: 2px solid #DADADA;152 display: flex;153 align-items: center;154 justify-content: center;155 }156 .heart {157 width: 34px;158 height: 34px;159 fill: none;160 stroke: #2B7BB9;161 stroke-width: 6px;162 }163 .rating {164 position: absolute;165 bottom: 16px;166 left: 16px;167 display: inline-flex;168 align-items: center;169 gap: 10px;170 background: #FFFFFF;171 border: 1px solid #E1E1E1;172 padding: 6px 12px;173 border-radius: 10px;174 font-size: 28px;175 font-weight: 700;176 color: #2a2a2a;177 }178 .rating svg { width: 28px; height: 28px; fill: #FFC107; stroke: none; }179 180 .card-body {181 padding: 18px 18px 22px;182 }183 .brand {184 font-weight: 800;185 font-size: 34px;186 letter-spacing: .4px;187 margin-bottom: 8px;188 }189 .title {190 color: #444;191 font-size: 30px;192 line-height: 1.3;193 min-height: 76px;194 }195 .meta-row {196 display: flex;197 align-items: center;198 justify-content: space-between;199 margin-top: 14px;200 }201 .price {202 display: flex;203 align-items: center;204 gap: 12px;205 }206 .price .now {207 background: #FFD54F;208 padding: 8px 14px;209 border-radius: 6px;210 font-weight: 900;211 color: #1a1a1a;212 font-size: 34px;213 }214 .price .old {215 color: #858585;216 text-decoration: line-through;217 font-size: 28px;218 }219 .color-swatch {220 display: inline-flex;221 gap: 10px;222 }223 .sw {224 width: 36px; height: 36px; border-radius: 6px; border: 2px solid #D0D0D0;225 }226 .sw.black { background: #111; }227 .sw.white { background: #fff; }228 .sw.grey { background: #5B5B5B; }229 .small-chip {230 border: 1px solid #CFCFCF;231 padding: 6px 10px;232 border-radius: 6px;233 font-size: 26px;234 color: #444;235 }236 237 /* Bottom action bar */238 .bottom-bar {239 position: absolute;240 bottom: 0;241 left: 0;242 width: 1080px;243 height: 180px;244 background: #FFFFFF;245 border-top: 1px solid #E5E5E5;246 display: flex;247 align-items: center;248 justify-content: space-around;249 font-size: 42px;250 color: #222;251 }252 .bottom-item {253 display: flex;254 align-items: center;255 gap: 18px;256 }257 .indicator {258 width: 18px; height: 18px; background: #D33; border-radius: 50%;259 }260 .sort-icon { width: 46px; height: 46px; stroke: #222; fill: none; stroke-width: 6px; }261 .filter-icon { width: 46px; height: 46px; stroke: #222; fill: none; stroke-width: 6px; }262 263 /* Utility */264 .muted { color: #777; }265</style>266</head>267<body>268<div id="render-target">269 270 <!-- Status Bar -->271 <div class="status-bar">272 <div>9:32</div>273 <div class="status-icons">274 <div style="width: 30px; height: 30px; border: 3px solid #1a1a1a; border-radius: 6px; position: relative;">275 <div class="dot" style="position:absolute; right:-10px; top:7px;"></div>276 </div>277 <svg class="icon" viewBox="0 0 24 24">278 <path d="M2 18c3-3 7-6 10-6s7 3 10 6" />279 <path d="M6 18c2-2 5-4 6-4s4 2 6 4" />280 <circle cx="12" cy="18" r="1.5" fill="#2b2b2b"></circle>281 </svg>282 <svg class="icon" viewBox="0 0 24 24">283 <path d="M2 7h20v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7z"/>284 <path d="M6 7V5a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v2"/>285 </svg>286 </div>287 </div>288 289 <!-- App Bar -->290 <div class="app-bar">291 <div class="app-left">292 <div class="icon-btn" aria-label="Back">293 <svg class="icon" viewBox="0 0 24 24">294 <path d="M15 5L8 12l7 7"/>295 </svg>296 </div>297 <div class="app-title">Sports Shoes</div>298 </div>299 <div class="app-actions">300 <div class="icon-btn" aria-label="Search">301 <svg class="icon" viewBox="0 0 24 24">302 <circle cx="11" cy="11" r="7"></circle>303 <path d="M20 20l-3.5-3.5"></path>304 </svg>305 </div>306 <div class="icon-btn" aria-label="Wishlist">307 <svg class="icon" viewBox="0 0 24 24">308 <path d="M12 21s-7-4.35-7-10A4.5 4.5 0 0 1 12 7a4.5 4.5 0 0 1 7 4c0 5.65-7 10-7 10z"/>309 </svg>310 </div>311 <div class="icon-btn" aria-label="Cart">312 <svg class="icon" viewBox="0 0 24 24">313 <circle cx="9" cy="20" r="1.8" fill="#2b2b2b"></circle>314 <circle cx="18" cy="20" r="1.8" fill="#2b2b2b"></circle>315 <path d="M4 5h2l2.5 11h9.5l2-8H7"></path>316 </svg>317 </div>318 </div>319 </div>320 321 <!-- Scrollable Content -->322 <div class="content">323 <div class="grid">324 325 <!-- Card 1 -->326 <div class="card">327 <div class="img-wrap">328 [IMG: Grey Mesh Walking Shoe]329 <div class="fav-circle">330 <svg class="heart" viewBox="0 0 24 24">331 <path d="M12 20s-7-4.35-7-10A4.5 4.5 0 0 1 12 6a4.5 4.5 0 0 1 7 4c0 5.65-7 10-7 10z"/>332 </svg>333 </div>334 <div class="rating">335 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.1L18.5 21 12 16.8 5.5 21l1.9-7.9L2 9h7z"/></svg>336 <span>4.5</span>337 </div>338 </div>339 <div class="card-body">340 <div class="brand">NEWFEEL</div>341 <div class="title">Men Walking Shoes PW 100 - Grey</div>342 <div class="meta-row">343 <div class="price">344 <div class="now">₹699</div>345 <div class="old">₹999</div>346 </div>347 <div class="small-chip">■</div>348 </div>349 </div>350 </div>351 352 <!-- Card 2 -->353 <div class="card">354 <div class="img-wrap">355 <div class="badge-new">NEW</div>356 [IMG: Black Trainers on White Sole]357 <div class="fav-circle">358 <svg class="heart" viewBox="0 0 24 24">359 <path d="M12 20s-7-4.35-7-10A4.5 4.5 0 0 1 12 6a4.5 4.5 0 0 1 7 4c0 5.65-7 10-7 10z"/>360 </svg>361 </div>362 <div class="rating">363 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.1L18.5 21 12 16.8 5.5 21l1.9-7.9L2 9h7z"/></svg>364 <span>4.5</span>365 </div>366 </div>367 <div class="card-body">368 <div class="brand">KALENJI</div>369 <div class="title">Women's KLNJ BE ESSENTIAL Trainers - Black</div>370 <div class="meta-row">371 <div class="price">372 <div class="now">₹1,599</div>373 <div class="old">₹2,499</div>374 </div>375 </div>376 </div>377 </div>378 379 <!-- Card 3 -->380 <div class="card">381 <div class="img-wrap">382 [IMG: Light Grey Women's Running Shoe]383 <div class="fav-circle">384 <svg class="heart" viewBox="0 0 24 24">385 <path d="M12 20s-7-4.35-7-10A4.5 4.5 0 0 1 12 6a4.5 4.5 0 0 1 7 4c0 5.65-7 10-7 10z"/>386 </svg>387 </div>388 <div class="rating">389 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.1L18.5 21 12 16.8 5.5 21l1.9-7.9L2 9h7z"/></svg>390 <span>4.4</span>391 </div>392 </div>393 <div class="card-body">394 <div class="brand">KALENJI</div>395 <div class="title">Women's Running Shoes Jogflow 100.1 - Light Grey</div>396 <div class="meta-row">397 <div class="price">398 <div class="now">₹1,799</div>399 <div class="old">₹2,499</div>400 </div>401 <div class="color-swatch">402 <div class="sw white"></div>403 <div class="sw black"></div>404 </div>405 </div>406 </div>407 </div>408 409 <!-- Card 4 -->410 <div class="card">411 <div class="img-wrap">412 [IMG: Light Blue Women's Running Shoe]413 <div class="fav-circle">414 <svg class="heart" viewBox="0 0 24 24">415 <path d="M12 20s-7-4.35-7-10A4.5 4.5 0 0 1 12 6a4.5 4.5 0 0 1 7 4c0 5.65-7 10-7 10z"/>416 </svg>417 </div>418 <div class="rating">419 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.1L18.5 21 12 16.8 5.5 21l1.9-7.9L2 9h7z"/></svg>420 <span>4.6</span>421 </div>422 </div>423 <div class="card-body">424 <div class="brand">KALENJI</div>425 <div class="title">Women Running Shoes Run 100 - Light Blue</div>426 <div class="meta-row">427 <div class="price">428 <div class="now">₹899</div>429 <div class="old">₹1,399</div>430 </div>431 <div class="fav-circle" style="position: static; width: 60px; height: 60px; background:#fff;">432 <svg class="heart" viewBox="0 0 24 24" style="width:28px;height:28px;">433 <path d="M12 20s-7-4.35-7-10A4.5 4.5 0 0 1 12 6a4.5 4.5 0 0 1 7 4c0 5.65-7 10-7 10z"/>434 </svg>435 </div>436 </div>437 </div>438 </div>439 440 <!-- Card 5 -->441 <div class="card">442 <div class="img-wrap">443 [IMG: Beige & Grey Running Shoe (Side View)]444 <div class="fav-circle">445 <svg class="heart" viewBox="0 0 24 24">446 <path d="M12 20s-7-4.35-7-10A4.5 4.5 0 0 1 12 6a4.5 4.5 0 0 1 7 4c0 5.65-7 10-7 10z"/>447 </svg>448 </div>449 </div>450 <div class="card-body">451 <div class="brand">KALENJI</div>452 <div class="title">Men's Running Shoes - Neutral Cushioning</div>453 <div class="meta-row">454 <div class="price">455 <div class="now">₹1,299</div>456 <div class="old">₹1,999</div>457 </div>458 <div class="color-swatch">459 <div class="sw grey"></div>460 <div class="sw white"></div>461 </div>462 </div>463 </div>464 </div>465 466 <!-- Card 6 -->467 <div class="card">468 <div class="img-wrap">469 [IMG: Pastel Women's Running Shoe with Translucent Upper]470 <div class="fav-circle">471 <svg class="heart" viewBox="0 0 24 24">472 <path d="M12 20s-7-4.35-7-10A4.5 4.5 0 0 1 12 6a4.5 4.5 0 0 1 7 4c0 5.65-7 10-7 10z"/>473 </svg>474 </div>475 </div>476 <div class="card-body">477 <div class="brand">KALENJI</div>478 <div class="title">Women's Jogging Shoes - Pastel Gradient</div>479 <div class="meta-row">480 <div class="price">481 <div class="now">₹1,499</div>482 <div class="old">₹2,199</div>483 </div>484 </div>485 </div>486 </div>487 488 </div>489 </div>490 491 <!-- Bottom bar -->492 <div class="bottom-bar">493 <div class="bottom-item">494 <div class="indicator"></div>495 <div>GENDER</div>496 </div>497 <div class="bottom-item">498 <svg class="sort-icon" viewBox="0 0 24 24">499 <path d="M8 4v16M8 4l-3 3M8 4l3 3"/>500 <path d="M16 20V4M16 20l-3-3M16 20l3-3"/>501 </svg>502 <div>SORT</div>503 </div>504 <div class="bottom-item">505 <svg class="filter-icon" viewBox="0 0 24 24">506 <path d="M3 5h18l-7 8v5l-4 2v-7L3 5z"/>507 </svg>508 <div>FILTER</div>509 </div>510 </div>511 512</div>513</body>514</html>