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; height:2400px; position:relative; overflow:hidden;10 background:#ffffff; color:#222; font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;11 }12 13 /* Top status bar */14 .status {15 height:120px; padding:28px 36px 0 36px;16 display:flex; align-items:center; justify-content:space-between;17 font-weight:600; color:#30343a;18 }19 .status .time{ font-size:38px; letter-spacing:1px; }20 .status .icons{ display:flex; gap:26px; align-items:center; }21 .icon{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; color:#2d2f36; }22 23 /* Header */24 .header{25 padding:10px 36px 0 36px;26 display:flex; align-items:flex-start; justify-content:space-between;27 }28 .head-left{ display:flex; gap:22px; align-items:flex-start; }29 .title-wrap{ line-height:1.1; }30 .title{ font-size:46px; font-weight:700; letter-spacing:.3px; }31 .subtitle{ font-size:28px; color:#80838a; margin-top:8px; }32 .head-actions{ display:flex; gap:36px; align-items:center; padding-top:8px; }33 34 /* Chips */35 .chips{ display:flex; gap:20px; padding:28px 36px 0 90px; }36 .chip{37 display:inline-flex; align-items:center; gap:12px;38 padding:22px 28px; border:2px solid #e2e4ea; border-radius:20px; background:#fff;39 color:#2f3440; font-size:30px; font-weight:600;40 box-shadow:0 1px 0 rgba(0,0,0,0.03);41 }42 .chip .mini{ width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; color:#60646b; }43 44 /* Promo banner */45 .banner{46 margin:26px 36px 10px 36px; border-radius:18px; border:1px solid #efdfdf;47 background: linear-gradient(90deg, #f9e3ef 0%, #ffe7d2 100%);48 padding:26px 28px; display:flex; align-items:center; justify-content:space-between;49 }50 .ban-left{ display:flex; align-items:center; gap:20px; }51 .ban-title{ font-size:40px; font-weight:700; color:#2c3140; }52 .ban-right{ display:flex; align-items:center; gap:20px; font-size:32px; font-weight:700; color:#2d3140; }53 .coupon{54 padding:12px 18px; border:2px dashed #f06272; border-radius:10px; background:#fff; font-weight:800; letter-spacing:.5px;55 }56 .tag{57 background:#e74d5a; color:#fff; font-weight:800; padding:8px 14px; border-radius:8px; font-size:26px;58 transform: rotate(-8deg);59 }60 .dots{61 display:flex; justify-content:center; gap:18px; padding:10px 0 6px 0;62 }63 .dot{ width:14px; height:14px; border-radius:50%; background:#d1d5db; }64 .dot.active{ background:#1e2330; }65 66 /* Product grid */67 .grid{68 padding:26px 18px 220px 18px;69 display:grid; grid-template-columns:1fr 1fr; gap:0;70 }71 .card{72 border-top:1px solid #eee; border-right:1px solid #eee;73 display:flex; flex-direction:column;74 }75 .card:nth-child(2n){ border-right:0; }76 .image-area{77 height:640px; position:relative; padding:18px;78 background:#f8e9ec;79 }80 .card:nth-child(2) .image-area{ background:#f3efea; }81 .img-ph{82 width:100%; height:100%; background:#E0E0E0; border:1px solid #BDBDBD;83 display:flex; align-items:center; justify-content:center; color:#757575; font-size:30px;84 border-radius:12px;85 }86 .rating{87 position:absolute; left:24px; bottom:24px;88 background:#fff; border-radius:28px; padding:10px 18px; font-size:28px; font-weight:700;89 box-shadow:0 2px 4px rgba(0,0,0,0.05); display:flex; align-items:center; gap:10px;90 }91 .badge-ad{92 position:absolute; right:24px; bottom:24px; font-size:24px; color:#a6a9af;93 background:#eee; padding:6px 10px; border-radius:8px; font-weight:700;94 }95 .wish{96 position:absolute; right:24px; top:24px; width:56px; height:56px;97 border-radius:50%; display:flex; align-items:center; justify-content:center;98 background:#fff; box-shadow:0 2px 6px rgba(0,0,0,0.08);99 }100 .deal{101 position:absolute; right:24px; top:24px; background:#ff6f8f; color:#fff; padding:8px 14px; border-radius:12px;102 font-weight:800; font-size:26px;103 }104 105 .info{ padding:18px 24px 26px 24px; }106 .brand{ font-size:38px; font-weight:800; margin-top:6px; }107 .name{ font-size:30px; color:#6b7280; margin-top:6px; }108 .price-row{ display:flex; align-items:center; gap:12px; margin-top:16px; }109 .price{ font-size:40px; font-weight:800; }110 .mrp{ font-size:28px; color:#9aa0a6; text-decoration:line-through; }111 .off{ background:#ffecd9; color:#ff6b3a; font-size:26px; font-weight:800; padding:6px 10px; border-radius:8px; }112 .best{ color:#0a8f59; font-weight:800; margin-top:10px; font-size:30px; }113 .best span{ color:#2d3748; font-weight:500; }114 115 /* Bottom toolbar */116 .toolbar{117 position:absolute; left:0; right:0; bottom:70px; height:150px;118 border-top:1px solid #e6e6e6; background:#fff;119 display:flex; align-items:center; justify-content:space-around;120 }121 .t-item{ display:flex; flex-direction:column; align-items:center; gap:10px; color:#2f3542; }122 .t-text{ font-size:30px; font-weight:800; letter-spacing:.6px; }123 .pill{124 position:absolute; left:50%; transform:translateX(-50%); bottom:18px;125 width:350px; height:12px; background:#d1d5db; border-radius:10px;126 }127</style>128</head>129<body>130<div id="render-target">131 132 <!-- Status bar -->133 <div class="status">134 <div class="time">9:00</div>135 <div class="icons">136 <span class="icon">137 <!-- Signal -->138 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M3 18h2v3H3v-3zm4-4h2v7H7v-7zm4-4h2v11h-2V10zm4-4h2v15h-2V6z" fill="#61656d"/></svg>139 </span>140 <span class="icon">141 <!-- Wifi -->142 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm7-7a11 11 0 0 0-14 0l-1.4-1.4a13 13 0 0 1 16.8 0L19 13zm-3.5 3.5a7 7 0 0 0-7 0l-1.4-1.4a9 9 0 0 1 9.8 0l-1.4 1.4z" fill="#61656d"/></svg>143 </span>144 <span class="icon">145 <!-- Battery -->146 <svg width="44" height="44" viewBox="0 0 32 32"><rect x="3" y="9" width="22" height="14" rx="3" ry="3" stroke="#61656d" fill="none" stroke-width="2"/><rect x="27" y="13" width="3" height="6" fill="#61656d"/></svg>147 </span>148 </div>149 </div>150 151 <!-- Header -->152 <div class="header">153 <div class="head-left">154 <span class="icon">155 <!-- Back arrow -->156 <svg width="46" height="46" viewBox="0 0 24 24"><path d="M14 18l-6-6 6-6" stroke="#2d3340" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>157 </span>158 <div class="title-wrap">159 <div class="title">SPORT SHOES</div>160 <div class="subtitle">183 Items</div>161 </div>162 </div>163 <div class="head-actions">164 <span class="icon">165 <!-- Search -->166 <svg width="48" height="48" viewBox="0 0 24 24"><circle cx="10.5" cy="10.5" r="6.5" stroke="#2d3340" stroke-width="2" fill="none"/><path d="M16 16l5 5" stroke="#2d3340" stroke-width="2" stroke-linecap="round"/></svg>167 </span>168 <span class="icon">169 <!-- Heart -->170 <svg width="48" height="48" viewBox="0 0 24 24"><path d="M12 20s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z" fill="none" stroke="#2d3340" stroke-width="2"/></svg>171 </span>172 <span class="icon">173 <!-- Bag -->174 <svg width="48" height="48" viewBox="0 0 24 24"><path d="M6 8h12l-1 12H7L6 8z" stroke="#2d3340" stroke-width="2" fill="none"/><path d="M9 8V6a3 3 0 0 1 6 0v2" stroke="#2d3340" stroke-width="2" fill="none"/></svg>175 </span>176 </div>177 </div>178 179 <!-- Chips -->180 <div class="chips">181 <div class="chip">182 <span class="mini">183 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l2.4 6.8L22 9l-5 4.2L18.2 20 12 16.8 5.8 20 7 13.2 2 9l7.6-.2L12 2z" fill="none" stroke="#5a5f69" stroke-width="1.6"/></svg>184 </span>185 Top Brands186 </div>187 <div class="chip">188 <span class="mini">189 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l2.6 7H22l-6 4.5L17.5 22 12 17.6 6.5 22 8 13.5 2 9h7.4L12 2z" fill="none" stroke="#5a5f69" stroke-width="1.6"/></svg>190 </span>191 Top Rated192 </div>193 </div>194 195 <!-- Promo banner -->196 <div class="banner">197 <div class="ban-left">198 <span class="icon">199 <svg width="64" height="64" viewBox="0 0 24 24">200 <circle cx="12" cy="12" r="9" fill="#fff0f4" stroke="#525666" stroke-width="1.5"/>201 <path d="M12 6v6l3 2" stroke="#e74d5a" stroke-width="1.6" fill="none" stroke-linecap="round"/>202 </svg>203 </span>204 <div class="ban-title">Guaranteed Refunds</div>205 </div>206 <div class="ban-right">207 <span class="tag">₹200 OFF</span>208 <div>₹200 off for you <span class="coupon">MYNTRA200</span></div>209 </div>210 </div>211 <div class="dots">212 <div class="dot active"></div>213 <div class="dot"></div>214 </div>215 216 <!-- Spacer to mimic white area in screenshot -->217 <div style="height:320px;"></div>218 219 <!-- Product grid -->220 <div class="grid">221 <!-- Card 1 -->222 <div class="card">223 <div class="image-area">224 <div class="img-ph">[IMG: Nike Running Shoes]</div>225 <div class="rating">226 <svg width="22" height="22" viewBox="0 0 24 24"><path d="M12 2l2.6 6.5L22 9.3l-5 4 1.6 6.7L12 17.6 5.4 20l1.6-6.7-5-4 7.4-.8L12 2z" fill="#21c47b"/></svg>227 4.3 | 129228 </div>229 <div class="badge-ad">AD</div>230 <div class="wish">231 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 20s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z" fill="none" stroke="#7a7f88" stroke-width="1.8"/></svg>232 </div>233 </div>234 <div class="info">235 <div class="brand">Nike</div>236 <div class="name">Men Run Swift 3 Running Shoes</div>237 <div class="price-row">238 <div class="price">₹6,295</div>239 </div>240 <div class="best">Best Price ₹6,095 <span>with coupon</span></div>241 </div>242 </div>243 244 <!-- Card 2 -->245 <div class="card">246 <div class="image-area">247 <div class="deal">Crazy Deal</div>248 <div class="img-ph">[IMG: Nike Flex Experience Run 11]</div>249 <div class="rating">250 <svg width="22" height="22" viewBox="0 0 24 24"><path d="M12 2l2.6 6.5L22 9.3l-5 4 1.6 6.7L12 17.6 5.4 20l1.6-6.7-5-4 7.4-.8L12 2z" fill="#21c47b"/></svg>251 4.3 | 275252 </div>253 <div class="wish">254 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 20s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z" fill="none" stroke="#7a7f88" stroke-width="1.8"/></svg>255 </div>256 </div>257 <div class="info">258 <div class="brand">Nike</div>259 <div class="name">Flex Experience Run 11 Shoes</div>260 <div class="price-row">261 <div class="mrp">₹4,995</div>262 <div class="price">₹3,496</div>263 <div class="off">30% OFF!</div>264 </div>265 <div class="best">Best Price ₹3,296 <span>with coupon</span></div>266 </div>267 </div>268 </div>269 270 <!-- Bottom toolbar -->271 <div class="toolbar">272 <div class="t-item">273 <div class="icon">274 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M4 19h16M4 12h10M4 5h6" stroke="#2d3340" stroke-width="2" stroke-linecap="round"/></svg>275 </div>276 <div class="t-text">GENDER</div>277 </div>278 <div class="t-item">279 <div class="icon">280 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M7 4v16M17 4v16M7 8l-2 2 2 2M17 16l2-2-2-2" stroke="#2d3340" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>281 </div>282 <div class="t-text">SORT</div>283 </div>284 <div class="t-item">285 <div class="icon" style="position:relative;">286 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M3 4h18l-7 8v5l-4 3v-8L3 4z" fill="none" stroke="#2d3340" stroke-width="2"/></svg>287 <span style="position:absolute; right:-6px; top:-2px; width:12px; height:12px; background:#ff3b57; border-radius:50%;"></span>288 </div>289 <div class="t-text">FILTER</div>290 </div>291 </div>292 <div class="pill"></div>293 294</div>295</body>296</html>