GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Sports Shoes Listing</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 border-radius: 0;14 box-shadow: none;15 color: #1f1f1f;16 }17 18 /* Top app bar */19 .top-bar {20 position: absolute;21 top: 24px;22 left: 24px;23 right: 24px;24 height: 80px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 }29 .icon-btn {30 width: 48px;31 height: 48px;32 display: inline-flex;33 align-items: center;34 justify-content: center;35 border-radius: 24px;36 cursor: pointer;37 }38 .icon svg { width: 32px; height: 32px; fill: none; stroke: #333; stroke-width: 2.5; }39 40 /* Title area */41 .title-area {42 position: absolute;43 top: 120px;44 left: 32px;45 right: 32px;46 }47 .title-area h1 {48 margin: 0 0 8px 0;49 font-size: 56px;50 font-weight: 700;51 }52 .subtitle {53 font-size: 30px;54 color: #666;55 }56 57 /* Grid */58 .grid {59 position: absolute;60 top: 240px;61 left: 24px;62 right: 24px;63 bottom: 220px; /* space for bottom bar */64 overflow-y: auto;65 padding-bottom: 40px;66 }67 .product-grid {68 display: grid;69 grid-template-columns: 1fr 1fr;70 grid-gap: 24px;71 }72 .card {73 width: 496px;74 background: #fff;75 border-radius: 24px;76 }77 .img-box {78 width: 100%;79 height: 420px;80 background: #E0E0E0;81 border: 1px solid #BDBDBD;82 border-radius: 24px;83 display: flex;84 align-items: center;85 justify-content: center;86 color: #757575;87 font-size: 28px;88 position: relative;89 }90 .overlay-pill {91 position: absolute;92 bottom: 20px;93 left: 20px;94 width: 56px;95 height: 56px;96 border-radius: 12px;97 border: 2px solid #d0d0d0;98 background: #fff;99 display: flex;100 align-items: center;101 justify-content: center;102 }103 .overlay-heart {104 position: absolute;105 bottom: 20px;106 right: 20px;107 width: 56px;108 height: 56px;109 border-radius: 12px;110 border: 2px solid #d0d0d0;111 background: #fff;112 display: flex;113 align-items: center;114 justify-content: center;115 }116 .content {117 padding: 18px 8px 12px 8px;118 }119 .brand {120 font-size: 30px;121 font-weight: 700;122 margin: 8px 12px;123 }124 .name {125 font-size: 30px;126 color: #333;127 margin: 0 12px 10px 12px;128 line-height: 1.25;129 }130 131 .rating-row {132 display: flex;133 align-items: center;134 margin: 0 12px 12px 12px;135 }136 .rating {137 background: #4CAF50;138 color: #fff;139 font-size: 28px;140 border-radius: 12px;141 padding: 8px 14px;142 display: inline-flex;143 align-items: center;144 gap: 8px;145 font-weight: 700;146 }147 .rating .star { width: 22px; height: 22px; fill: #fff; }148 .rating-count {149 font-size: 26px;150 color: #666;151 margin-left: 8px;152 }153 154 .price-row {155 display: flex;156 align-items: baseline;157 gap: 16px;158 margin: 6px 12px 8px 12px;159 }160 .price-now {161 font-size: 40px;162 font-weight: 800;163 }164 .price-old {165 font-size: 34px;166 color: #888;167 text-decoration: line-through;168 }169 .discount {170 font-size: 34px;171 color: #2E7D32;172 font-weight: 800;173 margin-left: auto;174 }175 176 .offer {177 display: flex;178 align-items: center;179 gap: 10px;180 margin: 8px 12px 22px 12px;181 color: #2E7D32;182 font-size: 28px;183 font-weight: 700;184 }185 .offer-dot {186 width: 28px;187 height: 28px;188 background: #2E7D32;189 border-radius: 50%;190 }191 192 /* Bottom action bar */193 .bottom-bar {194 position: absolute;195 bottom: 0;196 left: 0;197 right: 0;198 height: 160px;199 background: #0f0f0f;200 display: flex;201 align-items: center;202 justify-content: space-between;203 padding: 24px 32px;204 color: #fff;205 }206 .bottom-item {207 flex: 1;208 display: flex;209 align-items: center;210 gap: 20px;211 justify-content: center;212 height: 100%;213 }214 .bottom-icon {215 width: 42px;216 height: 42px;217 border-radius: 8px;218 display: inline-flex;219 align-items: center;220 justify-content: center;221 }222 .bottom-item .label {223 font-size: 30px;224 font-weight: 700;225 }226 .sub-label {227 font-size: 24px;228 color: #cfcfcf;229 margin-top: 6px;230 }231 .divider {232 width: 2px;233 height: 80%;234 background: #2b2b2b;235 }236</style>237</head>238<body>239<div id="render-target">240 241 <!-- Top bar -->242 <div class="top-bar">243 <div class="icon-btn icon">244 <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke-linecap="round" stroke-linejoin="round"/></svg>245 </div>246 <div style="display:flex; gap:20px;">247 <div class="icon-btn icon">248 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5" stroke-linecap="round"/></svg>249 </div>250 <div class="icon-btn icon">251 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.5-7-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.5-7 10-11 10z" stroke-linejoin="round"/></svg>252 </div>253 <div class="icon-btn icon">254 <svg viewBox="0 0 24 24"><path d="M6 7h12l-1 12H7L6 7z"/><path d="M9 7V5a3 3 0 0 1 6 0v2" stroke-linecap="round"/></svg>255 </div>256 </div>257 </div>258 259 <!-- Title -->260 <div class="title-area">261 <h1>Sports Shoes</h1>262 <div class="subtitle">1716 Products</div>263 </div>264 265 <!-- Grid container -->266 <div class="grid">267 <div class="product-grid">268 269 <!-- Card 1 -->270 <div class="card">271 <div class="img-box">272 [IMG: Black Running Shoe]273 <div class="overlay-pill">274 <svg viewBox="0 0 24 24" width="26" height="26"><rect x="5" y="5" width="14" height="14" rx="3" stroke="#777" fill="none"/></svg>275 </div>276 <div class="overlay-heart">277 <svg viewBox="0 0 24 24" width="26" height="26"><path d="M12 21s-7-4.5-7-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.5-7 10-11 10z" stroke="#777" fill="none"/></svg>278 </div>279 </div>280 <div class="content">281 <div class="brand">Campus</div>282 <div class="name">BRAZIL ADV PRO Lace-Up Running Shoes</div>283 <div class="rating-row">284 <div class="rating">285 <span>3.7</span>286 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z"/></svg>287 </div>288 <div class="rating-count">| 443</div>289 </div>290 <div class="price-row">291 <div class="price-now">₹927</div>292 <div class="price-old">₹1599</div>293 <div class="discount">42% off</div>294 </div>295 <div class="offer">296 <div class="offer-dot"></div>297 <div>Offer Price ₹863</div>298 </div>299 </div>300 </div>301 302 <!-- Card 2 -->303 <div class="card">304 <div class="img-box">305 [IMG: White Running Shoes Pair]306 <div class="overlay-pill">307 <svg viewBox="0 0 24 24" width="26" height="26"><rect x="5" y="5" width="14" height="14" rx="3" stroke="#777" fill="none"/></svg>308 </div>309 <div class="overlay-heart">310 <svg viewBox="0 0 24 24" width="26" height="26"><path d="M12 21s-7-4.5-7-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.5-7 10-11 10z" stroke="#777" fill="none"/></svg>311 </div>312 </div>313 <div class="content">314 <div class="brand">Campus</div>315 <div class="name">Round-Toe Lace-Up Running Shoes</div>316 <div class="rating-row">317 <div class="rating">318 <span>3.8</span>319 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z"/></svg>320 </div>321 <div class="rating-count">| 30</div>322 </div>323 <div class="price-row">324 <div class="price-now">₹999</div>325 <div class="price-old">₹2199</div>326 <div class="discount">55% off</div>327 </div>328 <div class="offer">329 <div class="offer-dot"></div>330 <div>Offer Price ₹699</div>331 </div>332 </div>333 </div>334 335 <!-- Card 3 -->336 <div class="card">337 <div class="img-box">338 [IMG: White Speckled Running Shoe]339 <div class="overlay-pill">340 <svg viewBox="0 0 24 24" width="26" height="26"><rect x="5" y="5" width="14" height="14" rx="3" stroke="#777" fill="none"/></svg>341 </div>342 <div class="overlay-heart">343 <svg viewBox="0 0 24 24" width="26" height="26"><path d="M12 21s-7-4.5-7-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.5-7 10-11 10z" stroke="#777" fill="none"/></svg>344 </div>345 </div>346 <div class="content">347 <div class="brand">Campus</div>348 <div class="name">Rim Lace-Up Running Shoes</div>349 <div class="rating-row">350 <div class="rating">351 <span>3.9</span>352 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z"/></svg>353 </div>354 <div class="rating-count">| 1.6k</div>355 </div>356 <div class="price-row">357 <div class="price-now">₹1199</div>358 <div class="price-old">₹1999</div>359 <div class="discount">40% off</div>360 </div>361 <div class="offer">362 <div class="offer-dot"></div>363 <div>Offer Price ₹999</div>364 </div>365 </div>366 </div>367 368 <!-- Card 4 -->369 <div class="card">370 <div class="img-box">371 [IMG: Navy Low-Top Running Shoe]372 <div class="overlay-pill">373 <svg viewBox="0 0 24 24" width="26" height="26"><rect x="5" y="5" width="14" height="14" rx="3" stroke="#777" fill="none"/></svg>374 </div>375 <div class="overlay-heart">376 <svg viewBox="0 0 24 24" width="26" height="26"><path d="M12 21s-7-4.5-7-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.5-7 10-11 10z" stroke="#777" fill="none"/></svg>377 </div>378 </div>379 <div class="content">380 <div class="brand">Campus</div>381 <div class="name">Low-Top Running Sports</div>382 <div class="rating-row">383 <div class="rating">384 <span>4.1</span>385 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z"/></svg>386 </div>387 <div class="rating-count">| 280</div>388 </div>389 <div class="price-row">390 <div class="price-now">₹1399</div>391 <div class="price-old">₹2399</div>392 <div class="discount">42% off</div>393 </div>394 <div class="offer">395 <div class="offer-dot"></div>396 <div>Offer Price ₹1199</div>397 </div>398 </div>399 </div>400 401 </div>402 </div>403 404 <!-- Bottom bar -->405 <div class="bottom-bar">406 <div class="bottom-item">407 <div class="bottom-icon">408 <svg viewBox="0 0 24 24" width="34" height="34" stroke="#fff" fill="none" stroke-width="2.5"><path d="M12 5l-4 7h8l-4 7" stroke-linecap="round" stroke-linejoin="round"/></svg>409 </div>410 <div>411 <div class="label">SORT BY</div>412 <div class="sub-label">Relevance</div>413 </div>414 </div>415 <div class="divider"></div>416 <div class="bottom-item">417 <div class="bottom-icon">418 <svg viewBox="0 0 24 24" width="34" height="34" stroke="#fff" fill="none" stroke-width="2.5">419 <rect x="4" y="6" width="16" height="12" rx="2"/><path d="M8 6v12M16 6v12"/>420 </svg>421 </div>422 <div class="label">STYLE TYPE</div>423 </div>424 <div class="divider"></div>425 <div class="bottom-item">426 <div class="bottom-icon">427 <svg viewBox="0 0 24 24" width="34" height="34" stroke="#fff" fill="none" stroke-width="2.5">428 <path d="M4 6h16M7 12h10M10 18h4" stroke-linecap="round"/>429 </svg>430 </div>431 <div>432 <div class="label">FILTERS</div>433 <div class="sub-label">1 filter ●</div>434 </div>435 </div>436 </div>437 438</div>439</body>440</html>