GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Sport Shoes - Listing</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;15 color: #222;16 }17 .statusbar {18 height: 90px;19 padding: 20px 36px;20 font-weight: 600;21 color: #2c2c2c;22 display: flex;23 align-items: center;24 justify-content: space-between;25 font-size: 36px;26 }27 .status-icons {28 display: flex;29 gap: 26px;30 align-items: center;31 }32 .header {33 height: 160px;34 display: flex;35 align-items: center;36 padding: 0 36px;37 justify-content: space-between;38 }39 .left-head {40 display: flex;41 align-items: center;42 gap: 26px;43 }44 .title-wrap {45 line-height: 1.2;46 }47 .title {48 font-size: 44px;49 font-weight: 700;50 letter-spacing: 0.3px;51 }52 .subtitle {53 font-size: 30px;54 color: #8a8d94;55 margin-top: 6px;56 font-weight: 500;57 }58 .icon-btn {59 width: 64px;60 height: 64px;61 display: inline-flex;62 align-items: center;63 justify-content: center;64 }65 .icon {66 width: 52px;67 height: 52px;68 stroke: #1f2a33;69 stroke-width: 6;70 fill: none;71 }72 73 /* Promo banner */74 .promo {75 margin: 0 20px;76 border: 1px solid #e3e3e3;77 border-radius: 12px;78 background: linear-gradient(90deg, #f7d7df 0%, #f3e2e7 45%, #f8eadb 100%);79 height: 220px;80 display: flex;81 align-items: center;82 justify-content: space-between;83 padding: 24px 28px;84 }85 .promo-left {86 display: flex;87 align-items: center;88 gap: 26px;89 }90 .img-ph {91 width: 120px;92 height: 120px;93 background: #E0E0E0;94 border: 1px solid #BDBDBD;95 display: flex;96 justify-content: center;97 align-items: center;98 color: #757575;99 font-size: 24px;100 border-radius: 12px;101 }102 .promo-text {103 font-size: 40px;104 font-weight: 700;105 color: #222;106 }107 .promo-right {108 text-align: right;109 }110 .coupon-line {111 font-size: 36px;112 font-weight: 700;113 color: #222;114 margin-bottom: 10px;115 }116 .coupon-code {117 display: inline-block;118 font-size: 40px;119 font-weight: 800;120 padding: 12px 18px;121 border: 2px dashed #ff6f7a;122 border-radius: 8px;123 background: #fff7f7;124 color: #222;125 }126 .rupee-tag {127 display: inline-block;128 background: #ff5c70;129 color: #fff;130 font-weight: 800;131 padding: 10px 16px;132 border-radius: 8px;133 margin-left: 16px;134 font-size: 32px;135 }136 .dots {137 height: 40px;138 display: flex;139 align-items: center;140 justify-content: center;141 gap: 16px;142 margin-top: 14px;143 }144 .dot {145 width: 16px;146 height: 16px;147 border-radius: 50%;148 background: #cfd8dc;149 }150 .dot.active { background: #263238; }151 152 /* Product grid */153 .grid {154 margin-top: 14px;155 display: flex;156 flex-wrap: wrap;157 border-top: 1px solid #e9eaec;158 border-bottom: 1px solid #e9eaec;159 }160 .card {161 width: 540px;162 border-right: 1px solid #e9eaec;163 border-bottom: 1px solid #e9eaec;164 background: #fff;165 }166 .card:nth-child(2n) { border-right: none; }167 .thumb {168 height: 700px;169 position: relative;170 background: #f7f4ef;171 }172 .thumb.placeholder {173 display: flex;174 justify-content: center;175 align-items: center;176 }177 .thumb .ph-img {178 width: 86%;179 height: 86%;180 background: #E0E0E0;181 border: 1px solid #BDBDBD;182 display: flex;183 justify-content: center;184 align-items: center;185 color: #757575;186 font-size: 36px;187 border-radius: 12px;188 }189 .rating-badge {190 position: absolute;191 left: 24px;192 bottom: 24px;193 background: #fff;194 border-radius: 28px;195 padding: 10px 18px;196 box-shadow: 0 2px 0 rgba(0,0,0,0.05);197 font-size: 28px;198 display: flex;199 align-items: center;200 gap: 10px;201 color: #222;202 border: 1px solid #ececec;203 }204 .rating-badge .star {205 width: 26px;206 height: 26px;207 fill: #1abc72;208 }209 .heart-icon {210 position: absolute;211 right: 24px;212 top: 24px;213 width: 52px;214 height: 52px;215 stroke: #5b616a;216 stroke-width: 6;217 fill: none;218 }219 .ribbon {220 position: absolute;221 right: 24px;222 top: 26px;223 background: #ff80a0;224 color: #fff;225 font-weight: 800;226 font-size: 26px;227 padding: 10px 16px;228 border-radius: 8px;229 }230 .ribbon.left { left: 24px; right: auto; }231 .ad-badge {232 position: absolute;233 right: 24px;234 top: 90px;235 background: #e5e8eb;236 color: #6b7280;237 font-weight: 800;238 font-size: 26px;239 padding: 8px 12px;240 border-radius: 8px;241 }242 .details {243 padding: 20px 24px 28px;244 }245 .brand {246 font-size: 40px;247 font-weight: 800;248 margin-bottom: 8px;249 }250 .desc {251 font-size: 30px;252 color: #60656d;253 margin-bottom: 12px;254 }255 .price-row {256 font-size: 40px;257 font-weight: 800;258 margin-bottom: 10px;259 }260 .price-row .strike {261 color: #8a8d94;262 text-decoration: line-through;263 margin-right: 12px;264 font-weight: 700;265 font-size: 32px;266 }267 .offer-pill {268 display: inline-block;269 background: #ff9e6e;270 color: #fff;271 font-weight: 800;272 font-size: 28px;273 padding: 6px 10px;274 border-radius: 8px;275 margin-left: 10px;276 }277 .best {278 color: #0aa56b;279 font-weight: 800;280 font-size: 34px;281 }282 .with-coupon {283 font-size: 28px;284 color: #60656d;285 margin-left: 8px;286 }287 288 /* Bottom bar */289 .bottom-bar {290 position: absolute;291 left: 0;292 right: 0;293 bottom: 140px;294 height: 140px;295 border-top: 1px solid #e9eaec;296 background: #fff;297 display: flex;298 align-items: center;299 justify-content: space-around;300 }301 .bottom-item {302 display: flex;303 align-items: center;304 gap: 16px;305 color: #2c2c2c;306 font-weight: 800;307 font-size: 34px;308 }309 .bottom-icon {310 width: 40px;311 height: 40px;312 stroke: #2c2c2c;313 stroke-width: 6;314 fill: none;315 }316 .divider {317 width: 1px;318 height: 60px;319 background: #e0e0e0;320 }321 .dot-red {322 width: 12px;323 height: 12px;324 background: #ff4d72;325 border-radius: 50%;326 margin-left: 8px;327 }328 .home-indicator {329 position: absolute;330 bottom: 56px;331 left: 50%;332 transform: translateX(-50%);333 width: 380px;334 height: 12px;335 background: #21262b;336 border-radius: 8px;337 opacity: 0.28;338 }339</style>340</head>341<body>342<div id="render-target">343 344 <div class="statusbar">345 <div>9:02</div>346 <div class="status-icons">347 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="none" stroke="#555" stroke-width="2"/></svg>348 <svg class="icon" viewBox="0 0 24 24"><path d="M3 12h18" stroke="#555" stroke-width="2"/><path d="M6 8h12" stroke="#555" stroke-width="2"/></svg>349 <svg class="icon" viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2" stroke="#555" stroke-width="2" fill="none"/><rect x="18" y="9" width="2" height="6" fill="#555"/></svg>350 </div>351 </div>352 353 <div class="header">354 <div class="left-head">355 <div class="icon-btn">356 <svg class="icon" viewBox="0 0 24 24">357 <path d="M15 6l-6 6 6 6" />358 </svg>359 </div>360 <div class="title-wrap">361 <div class="title">SPORT SHOES</div>362 <div class="subtitle">58 Items</div>363 </div>364 </div>365 <div class="right-head">366 <div class="icon-btn">367 <svg class="icon" viewBox="0 0 24 24">368 <circle cx="10" cy="10" r="6"></circle>369 <path d="M15 15l6 6"></path>370 </svg>371 </div>372 <div class="icon-btn">373 <svg class="icon" viewBox="0 0 24 24">374 <path d="M12 21s-7-4.5-7-10a5 5 0 0110 0 5 5 0 0110 0c0 5.5-7 10-7 10" />375 </svg>376 </div>377 <div class="icon-btn">378 <svg class="icon" viewBox="0 0 24 24">379 <path d="M6 7h12l-1 12H7L6 7z" />380 <path d="M9 7V5a3 3 0 016 0v2" />381 </svg>382 </div>383 </div>384 </div>385 386 <div class="promo">387 <div class="promo-left">388 <div class="img-ph">[IMG: Delivery Truck]</div>389 <div class="promo-text">Free Shipping on your first order</div>390 </div>391 <div class="promo-right">392 <div class="coupon-line">₹200 off for you393 <span class="rupee-tag">₹200 OFF</span>394 </div>395 <div class="coupon-code">MYNTRA200</div>396 </div>397 </div>398 <div class="dots">399 <div class="dot active"></div>400 <div class="dot"></div>401 </div>402 403 <div class="grid">404 <!-- Card 1 -->405 <div class="card">406 <div class="thumb placeholder">407 <div class="ph-img">[IMG: Nike Running Shoe]</div>408 <div class="rating-badge">409 <svg class="star" viewBox="0 0 24 24">410 <path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"></path>411 </svg>412 <div>4.3</div>413 <div style="color:#8a8d94;">| 129</div>414 </div>415 <svg class="heart-icon" viewBox="0 0 24 24">416 <path d="M12 21s-7-4.5-7-10a5 5 0 0110 0 5 5 0 0110 0c0 5.5-7 10-7 10" />417 </svg>418 </div>419 <div class="details">420 <div class="brand">Nike</div>421 <div class="desc">Men Run Swift 3 Running Shoes</div>422 <div class="price-row">₹6,295</div>423 <div><span class="best">Best Price ₹6,095</span><span class="with-coupon">with coupon</span></div>424 </div>425 </div>426 427 <!-- Card 2 -->428 <div class="card">429 <div class="thumb placeholder" style="background:#f3f2f1;">430 <div class="ph-img">[IMG: Nike Flex Experience Shoe]</div>431 <div class="ribbon">Crazy Deal</div>432 <div class="rating-badge">433 <svg class="star" viewBox="0 0 24 24">434 <path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"></path>435 </svg>436 <div>4.3</div>437 <div style="color:#8a8d94;">| 275</div>438 </div>439 <svg class="heart-icon" viewBox="0 0 24 24">440 <path d="M12 21s-7-4.5-7-10a5 5 0 0110 0 5 5 0 0110 0c0 5.5-7 10-7 10" />441 </svg>442 </div>443 <div class="details">444 <div class="brand">Nike</div>445 <div class="desc">Flex Experience Run 11 Shoes</div>446 <div class="price-row"><span class="strike">₹4,995</span>₹3,496 <span class="offer-pill">30% OFF!</span></div>447 <div><span class="best">Best Price ₹3,296</span><span class="with-coupon">with coupon</span></div>448 </div>449 </div>450 451 <!-- Card 3 -->452 <div class="card">453 <div class="thumb placeholder">454 <div class="ribbon left">Crazy Deal</div>455 <div class="ad-badge">AD</div>456 <div class="ph-img">[IMG: Sport Shoe]</div>457 <div class="rating-badge">458 <svg class="star" viewBox="0 0 24 24">459 <path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"></path>460 </svg>461 <div>4.2</div>462 <div style="color:#8a8d94;">| 88</div>463 </div>464 <svg class="heart-icon" viewBox="0 0 24 24">465 <path d="M12 21s-7-4.5-7-10a5 5 0 0110 0 5 5 0 0110 0c0 5.5-7 10-7 10" />466 </svg>467 </div>468 <div class="details">469 <div class="brand">Adidas</div>470 <div class="desc">Lightweight Road Running Shoes</div>471 <div class="price-row"><span class="strike">₹5,999</span>₹4,199 <span class="offer-pill">30% OFF!</span></div>472 <div><span class="best">Best Price ₹3,999</span><span class="with-coupon">with coupon</span></div>473 </div>474 </div>475 476 <!-- Card 4 -->477 <div class="card">478 <div class="thumb placeholder" style="background:#eaffff;">479 <div class="ph-img">[IMG: Training Sneaker]</div>480 <div class="rating-badge">481 <svg class="star" viewBox="0 0 24 24">482 <path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"></path>483 </svg>484 <div>4.4</div>485 <div style="color:#8a8d94;">| 310</div>486 </div>487 <svg class="heart-icon" viewBox="0 0 24 24">488 <path d="M12 21s-7-4.5-7-10a5 5 0 0110 0 5 5 0 0110 0c0 5.5-7 10-7 10" />489 </svg>490 </div>491 <div class="details">492 <div class="brand">Puma</div>493 <div class="desc">Flex Mesh Training Shoes</div>494 <div class="price-row">₹3,899</div>495 <div><span class="best">Best Price ₹3,499</span><span class="with-coupon">with coupon</span></div>496 </div>497 </div>498 </div>499 500 <div class="bottom-bar">501 <div class="bottom-item">502 <svg class="bottom-icon" viewBox="0 0 24 24"><path d="M4 20h16M4 12h16M4 4h16"/></svg>503 <div>GENDER</div>504 </div>505 <div class="divider"></div>506 <div class="bottom-item">507 <svg class="bottom-icon" viewBox="0 0 24 24"><path d="M12 4v16M6 10l-2 2 2 2M18 14l2-2-2-2"/></svg>508 <div>SORT</div>509 </div>510 <div class="divider"></div>511 <div class="bottom-item">512 <svg class="bottom-icon" viewBox="0 0 24 24"><path d="M3 4h18l-7 8v8l-4-2v-6z"/></svg>513 <div>FILTER</div>514 <div class="dot-red"></div>515 </div>516 </div>517 518 <div class="home-indicator"></div>519</div>520</body>521</html>