GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Sport Shoes Listing</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; color: #222; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #ffffff;15 border-radius: 24px;16 box-shadow: 0 8px 24px rgba(0,0,0,0.08);17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0; left: 0; right: 0;23 height: 100px;24 padding: 0 40px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 font-weight: 600;29 color: #2b2b2b;30 font-size: 36px;31 }32 .status-icons { display: flex; gap: 28px; align-items: center; }33 .icon { width: 48px; height: 48px; }34 35 /* Header */36 .header {37 position: absolute;38 top: 116px; left: 40px; right: 40px;39 }40 .header-top {41 display: flex; align-items: center; justify-content: space-between;42 }43 .back-wrap { display: flex; align-items: center; gap: 24px; }44 .title-block { margin-top: 18px; }45 .title { font-size: 48px; font-weight: 700; letter-spacing: 0.2px; }46 .subtitle { font-size: 30px; color: #6e6e6e; margin-top: 8px; }47 48 .header-actions { display: flex; gap: 52px; align-items: center; }49 50 /* Chips */51 .chips { margin-top: 28px; display: flex; gap: 24px; }52 .chip {53 display: inline-flex; align-items: center; gap: 16px;54 border: 2px solid #e0e0e0; border-radius: 24px;55 padding: 22px 28px; font-weight: 600; color: #2b2b2b;56 background: #fff;57 box-shadow: 0 2px 0 rgba(0,0,0,0.02);58 }59 .chip .icon { width: 36px; height: 36px; }60 61 /* Banner */62 .promo {63 margin-top: 30px;64 width: 1000px;65 height: 170px;66 border-radius: 14px;67 background: linear-gradient(90deg, #f7d9e8 0%, #fbe8dd 100%);68 display: flex; align-items: center; justify-content: space-between;69 padding: 0 32px;70 }71 .promo-left { display: flex; align-items: center; gap: 28px; }72 .promo-title { font-size: 36px; font-weight: 700; color: #333; }73 .promo-right { display: flex; align-items: center; gap: 24px; }74 .tag {75 background: #e74c64; color: #fff; font-weight: 700; padding: 10px 14px;76 border-radius: 8px; font-size: 28px;77 }78 .coupon {79 border: 2px dashed #ff8c8c; padding: 8px 16px; border-radius: 8px;80 font-weight: 800; font-size: 30px;81 }82 83 /* Carousel dots */84 .dots { margin-top: 18px; display: flex; justify-content: center; gap: 16px; }85 .dot { width: 16px; height: 16px; border-radius: 50%; background: #1f2430; }86 .dot.light { background: #cfd3da; }87 88 /* Spacer area */89 .spacer { height: 520px; }90 91 /* Product grid */92 .product-grid {93 display: grid;94 grid-template-columns: 1fr 1fr;95 column-gap: 0;96 position: relative;97 }98 .card {99 border-top: 1px solid #eee;100 padding-bottom: 24px;101 }102 .img-box {103 height: 560px;104 margin: 0;105 background: #E0E0E0;106 border: 1px solid #BDBDBD;107 display: flex; align-items: center; justify-content: center;108 color: #757575; font-weight: 600;109 position: relative;110 }111 .ribbon {112 position: absolute; top: 20px; left: 20px;113 background: #ff7b98; color: #fff; padding: 8px 16px; border-radius: 8px;114 font-size: 28px; font-weight: 700;115 }116 .rating {117 position: absolute; bottom: 20px; left: 20px;118 background: #ffffff; border-radius: 28px; padding: 10px 16px;119 display: inline-flex; align-items: center; gap: 12px;120 box-shadow: 0 2px 8px rgba(0,0,0,0.06);121 font-size: 28px; color: #333;122 }123 .rating .count { color: #777; }124 .star-icon { width: 24px; height: 24px; }125 126 .info {127 padding: 20px 24px 0 24px;128 display: grid; grid-template-columns: 1fr auto; align-items: start;129 gap: 10px;130 }131 .brand { grid-column: 1 / 2; font-size: 38px; font-weight: 800; }132 .wish { grid-column: 2 / 3; }133 .name { grid-column: 1 / 3; font-size: 30px; color: #666; margin-top: 8px; }134 135 .price-row { grid-column: 1 / 3; display: flex; align-items: center; gap: 14px; margin-top: 14px; }136 .price { font-size: 40px; font-weight: 800; }137 .mrp { color: #9aa0a6; text-decoration: line-through; font-size: 30px; }138 .off { background: #ffb286; color: #703b00; font-weight: 800; font-size: 26px; padding: 6px 10px; border-radius: 6px; }139 140 .best { grid-column: 1 / 3; margin-top: 8px; color: #0a8f4a; font-weight: 800; font-size: 30px; }141 .with-coupon { font-weight: 600; color: #666; }142 143 .ad-label {144 margin: 18px 24px 0 24px; width: 60px; height: 40px;145 background: #e9e9e9; color: #9aa0a6; font-size: 22px;146 display: flex; align-items: center; justify-content: center; border-radius: 6px;147 }148 149 /* Bottom bar */150 .bottom-bar {151 position: absolute;152 left: 0; right: 0; bottom: 120px;153 height: 140px; border-top: 1px solid #eee;154 display: flex; align-items: center; justify-content: space-around;155 background: #fff;156 }157 .bottom-item { display: flex; align-items: center; gap: 16px; font-weight: 800; color: #2b2b2b; font-size: 34px; }158 .bottom-item .icon { width: 40px; height: 40px; }159 .red-dot { width: 14px; height: 14px; background: #ff4a57; border-radius: 50%; margin-left: 8px; }160 161 /* Gesture bar */162 .gesture {163 position: absolute; left: 50%; transform: translateX(-50%);164 bottom: 36px; width: 420px; height: 14px; background: #d8dbe2; border-radius: 10px;165 }166</style>167</head>168<body>169<div id="render-target">170 171 <!-- Status Bar -->172 <div class="status-bar">173 <div>8:59</div>174 <div class="status-icons">175 <!-- simple signal icon -->176 <svg class="icon" viewBox="0 0 24 24"><rect x="2" y="16" width="3" height="6" fill="#707070"></rect><rect x="7" y="12" width="3" height="10" fill="#707070"></rect><rect x="12" y="8" width="3" height="14" fill="#707070"></rect><rect x="17" y="4" width="3" height="18" fill="#707070"></rect></svg>177 <!-- battery -->178 <svg class="icon" viewBox="0 0 24 24">179 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#707070" stroke-width="2"></rect>180 <rect x="4" y="8" width="12" height="8" fill="#707070"></rect>181 <rect x="20" y="10" width="2" height="4" fill="#707070"></rect>182 </svg>183 </div>184 </div>185 186 <!-- Header -->187 <div class="header">188 <div class="header-top">189 <div class="back-wrap">190 <!-- Back arrow -->191 <svg class="icon" viewBox="0 0 24 24">192 <path d="M15 19L8 12l7-7" fill="none" stroke="#2b2b2b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>193 </svg>194 </div>195 <div class="header-actions">196 <!-- Search -->197 <svg class="icon" viewBox="0 0 24 24">198 <circle cx="11" cy="11" r="7" fill="none" stroke="#2b2b2b" stroke-width="2"></circle>199 <line x1="16.5" y1="16.5" x2="21" y2="21" stroke="#2b2b2b" stroke-width="2" stroke-linecap="round"></line>200 </svg>201 <!-- Heart -->202 <svg class="icon" viewBox="0 0 24 24">203 <path d="M12 20s-7-4.5-7-9a4.5 4.5 0 018-2 4.5 4.5 0 018 2c0 4.5-7 9-7 9z" fill="none" stroke="#2b2b2b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>204 </svg>205 <!-- Bag -->206 <svg class="icon" viewBox="0 0 24 24">207 <path d="M6 8h12l-1 12H7L6 8z" fill="none" stroke="#2b2b2b" stroke-width="2"></path>208 <path d="M9 8V6a3 3 0 016 0v2" fill="none" stroke="#2b2b2b" stroke-width="2"></path>209 </svg>210 </div>211 </div>212 213 <div class="title-block">214 <div class="title">SPORT SHOES</div>215 <div class="subtitle">183 Items</div>216 </div>217 218 <div class="chips">219 <div class="chip">220 <svg class="icon" viewBox="0 0 24 24">221 <path d="M12 2l3 6 6 .9-4.5 4 1.2 6.1L12 16l-5.7 2.9 1.2-6.1L3 8.9 9 8l3-6z" fill="none" stroke="#2b2b2b" stroke-width="1.6"></path>222 </svg>223 <span>Top Brands</span>224 </div>225 <div class="chip">226 <svg class="icon" viewBox="0 0 24 24">227 <path d="M12 2l3 6h6l-4.5 4 1.5 6-6-3-6 3 1.5-6L3 8h6l3-6z" fill="none" stroke="#2b2b2b" stroke-width="1.6"></path>228 </svg>229 <span>Top Rated</span>230 </div>231 </div>232 233 <div class="promo">234 <div class="promo-left">235 <!-- simple swap arrows -->236 <svg class="icon" viewBox="0 0 24 24">237 <path d="M4 8h10l-3-3M20 16H10l3 3" fill="none" stroke="#2b2b2b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>238 </svg>239 <div class="promo-title">Easy Return & Exchange</div>240 </div>241 <div class="promo-right">242 <div class="tag">₹200 OFF</div>243 <div style="font-size:32px; font-weight:800; color:#2b2b2b;">₹200 off for you</div>244 <div class="coupon">MYNTRA200</div>245 </div>246 </div>247 248 <div class="dots">249 <div class="dot"></div>250 <div class="dot light"></div>251 </div>252 </div>253 254 <div class="spacer"></div>255 256 <!-- Product Grid -->257 <div class="product-grid">258 <!-- Left Card -->259 <div class="card">260 <div class="img-box">261 [IMG: Nike Running Shoe]262 <div class="rating">263 <svg class="star-icon" viewBox="0 0 24 24">264 <path d="M12 3l3 6 6 1-4.5 4 1 6-5.5-3-5.5 3 1-6-4.5-4 6-1 3-6z" fill="#2ecc71"></path>265 </svg>266 <span>4.3</span>267 <span class="count">| 129</span>268 </div>269 </div>270 <div class="info">271 <div class="brand">Nike</div>272 <div class="wish">273 <svg class="icon" viewBox="0 0 24 24">274 <path d="M12 20s-7-4.5-7-9a4.5 4.5 0 018-2 4.5 4.5 0 018 2c0 4.5-7 9-7 9z" fill="none" stroke="#7a7a7a" stroke-width="2"></path>275 </svg>276 </div>277 <div class="name">Men Run Swift 3 Running Shoes</div>278 <div class="price-row">279 <div class="price">₹6,295</div>280 </div>281 <div class="best">Best Price ₹6,095 <span class="with-coupon">with coupon</span></div>282 </div>283 <div class="ad-label">AD</div>284 </div>285 286 <!-- Right Card -->287 <div class="card">288 <div class="img-box">289 <div class="ribbon">Crazy Deal</div>290 [IMG: Nike Flex Experience Run 11 Shoe]291 <div class="rating">292 <svg class="star-icon" viewBox="0 0 24 24">293 <path d="M12 3l3 6 6 1-4.5 4 1 6-5.5-3-5.5 3 1-6-4.5-4 6-1 3-6z" fill="#2ecc71"></path>294 </svg>295 <span>4.3</span>296 <span class="count">| 275</span>297 </div>298 </div>299 <div class="info">300 <div class="brand">Nike</div>301 <div class="wish">302 <svg class="icon" viewBox="0 0 24 24">303 <path d="M12 20s-7-4.5-7-9a4.5 4.5 0 018-2 4.5 4.5 0 018 2c0 4.5-7 9-7 9z" fill="none" stroke="#7a7a7a" stroke-width="2"></path>304 </svg>305 </div>306 <div class="name">Flex Experience Run 11 Shoes</div>307 <div class="price-row">308 <div class="mrp">₹4,995</div>309 <div class="price">₹3,496</div>310 <div class="off">30% OFF!</div>311 </div>312 <div class="best">Best Price ₹3,296 <span class="with-coupon">with coupon</span></div>313 </div>314 </div>315 </div>316 317 <!-- Bottom bar -->318 <div class="bottom-bar">319 <div class="bottom-item">320 <!-- gender icon -->321 <svg class="icon" viewBox="0 0 24 24">322 <circle cx="8" cy="8" r="4" fill="none" stroke="#2b2b2b" stroke-width="2"></circle>323 <path d="M8 12v8" stroke="#2b2b2b" stroke-width="2" stroke-linecap="round"></path>324 <circle cx="16" cy="8" r="4" fill="none" stroke="#2b2b2b" stroke-width="2"></circle>325 <path d="M16 12v8" stroke="#2b2b2b" stroke-width="2" stroke-linecap="round"></path>326 </svg>327 <span>GENDER</span>328 </div>329 <div class="bottom-item">330 <!-- sort icon -->331 <svg class="icon" viewBox="0 0 24 24">332 <path d="M7 4l-4 4h8L7 4zm10 16l4-4h-8l4 4z" fill="#2b2b2b"></path>333 </svg>334 <span>SORT</span>335 </div>336 <div class="bottom-item">337 <!-- filter icon -->338 <svg class="icon" viewBox="0 0 24 24">339 <path d="M3 5h18l-7 8v5l-4 1v-6L3 5z" fill="none" stroke="#2b2b2b" stroke-width="2" stroke-linejoin="round"></path>340 </svg>341 <span>FILTER</span>342 <span class="red-dot"></span>343 </div>344 </div>345 346 <div class="gesture"></div>347</div>348</body>349</html>