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>Sports Shoes Listing</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff; font-family: Arial, Helvetica, sans-serif; color: #333;12 }13 /* Top status bar */14 .statusbar {15 position: absolute; top: 0; left: 0; width: 100%; height: 110px;16 background: #1aa6ab; color: #fff; box-sizing: border-box;17 display: flex; align-items: center; justify-content: space-between;18 padding: 0 32px;19 }20 .status-left { display: flex; align-items: center; gap: 24px; font-size: 36px; }21 .status-icons { display: flex; align-items: center; gap: 18px; }22 .status-dot { width: 12px; height: 12px; background: rgba(255,255,255,0.9); border-radius: 50%; }23 .status-battery { font-size: 28px; }24 /* Header */25 .header {26 position: absolute; top: 110px; left: 0; width: 100%; height: 140px;27 background: #fff; box-sizing: border-box; padding: 0 32px;28 display: flex; align-items: center; justify-content: space-between;29 border-bottom: 1px solid #e6e6e6;30 }31 .header-left { display: flex; align-items: center; gap: 24px; }32 .title { font-weight: 700; font-size: 42px; letter-spacing: 0.5px; }33 .header-actions { display: flex; align-items: center; gap: 32px; }34 .icon-btn svg { width: 56px; height: 56px; stroke: #1aa6ab; fill: none; }35 .back svg { width: 60px; height: 60px; stroke: #1aa6ab; }36 /* Filter bar */37 .filters {38 position: absolute; top: 250px; left: 0; width: 100%; height: 110px;39 background: #fff; border-bottom: 1px solid #eaeaea;40 display: flex; box-sizing: border-box;41 }42 .filter-item {43 flex: 1; display: flex; align-items: center; justify-content: center; gap: 14px;44 font-size: 34px; color: #555; position: relative;45 }46 .filter-item:not(:last-child)::after {47 content: ""; position: absolute; right: 0; top: 18px; bottom: 18px; width: 1px; background: #eaeaea;48 }49 .filter-icon svg { width: 42px; height: 42px; stroke: #777; fill: none; }50 .dropdown { width: 14px; height: 14px; border-right: 2px solid #777; border-bottom: 2px solid #777; transform: rotate(45deg); margin-left: 10px; }51 /* Category chips strip */52 .chip-strip {53 position: absolute; top: 360px; left: 0; width: 100%;54 background: #efefef; padding: 28px 32px; box-sizing: border-box;55 display: flex; gap: 24px;56 }57 .chip {58 background: #fff; border: 1px solid #ddd; border-radius: 18px;59 padding: 22px 28px; font-size: 34px; color: #555;60 box-shadow: 0 3px 10px rgba(0,0,0,0.08);61 }62 /* Product grid */63 .product-grid {64 position: absolute; top: 456px; left: 0; width: 100%; box-sizing: border-box;65 display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; row-gap: 40px;66 }67 .grid-divider {68 position: absolute; top: 456px; left: 540px; width: 1px; height: 1740px; background: #eeeeee;69 }70 .product {71 padding: 24px; box-sizing: border-box; position: relative;72 }73 .img {74 width: 100%; height: 420px; background: #E0E0E0;75 border: 1px solid #BDBDBD; display: flex; justify-content: center; align-items: center;76 color: #757575; font-size: 32px;77 }78 .wish {79 position: absolute; top: 16px; right: 24px; width: 80px; height: 80px;80 border-radius: 40px; border: 1px solid #e2e2e2; background: #fff;81 display: flex; align-items: center; justify-content: center;82 box-shadow: 0 2px 6px rgba(0,0,0,0.06);83 }84 .wish svg { width: 40px; height: 40px; stroke: #999; fill: none; }85 .made {86 margin-top: 18px; display: inline-flex; align-items: center; gap: 10px;87 font-size: 26px; color: #333;88 }89 .made .tick {90 width: 34px; height: 34px; border-radius: 50%; background: #1aa6ab;91 display: inline-flex; align-items: center; justify-content: center;92 }93 .made .tick svg { width: 22px; height: 22px; stroke: #fff; }94 .made .flag {95 display: inline-flex; align-items: center; gap: 8px;96 background: #ffa64d; color: #333; border-radius: 6px; padding: 6px 10px;97 }98 .made .flag .india { background: #1ab04d; color: #fff; padding: 2px 8px; border-radius: 4px; font-weight: 700; }99 .title2 { margin-top: 10px; font-size: 32px; line-height: 40px; color: #444; }100 .price-row { margin-top: 12px; display: flex; align-items: baseline; gap: 12px; }101 .price { font-size: 40px; font-weight: 700; }102 .old-price { font-size: 28px; color: #888; text-decoration: line-through; }103 .off { font-size: 28px; color: #1e88e5; font-weight: 700; margin-top: 6px; }104 .meta { font-size: 28px; color: #777; margin-top: 6px; }105 .rating { margin-top: 10px; display: flex; gap: 6px; }106 .star { width: 28px; height: 28px; background: #ff9800; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }107 .star.gray { background: #ccc; }108 .badge {109 margin-top: 14px; display: inline-block; padding: 12px 16px; font-size: 28px;110 color: #c77e43; border: 1px solid #e5c2a6; border-radius: 12px; background: #fff7ef;111 }112 /* Bottom gesture bar */113 .gesture {114 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);115 width: 220px; height: 12px; background: #000; border-radius: 6px; opacity: 0.2;116 }117</style>118</head>119<body>120<div id="render-target">121 122 <!-- Status bar -->123 <div class="statusbar">124 <div class="status-left">125 <div>10:09</div>126 <div class="status-icons">127 <div class="status-dot"></div>128 <div class="status-dot"></div>129 <div class="status-dot"></div>130 </div>131 </div>132 <div class="status-icons">133 <div class="status-battery">🔋 74%</div>134 </div>135 </div>136 137 <!-- Header -->138 <div class="header">139 <div class="header-left">140 <div class="back icon-btn">141 <svg viewBox="0 0 64 64">142 <path d="M40 12 L20 32 L40 52" stroke-width="6" stroke="#1aa6ab" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>143 </svg>144 </div>145 <div class="title">SPORTS SHOES FOR MEN</div>146 </div>147 <div class="header-actions">148 <div class="icon-btn">149 <svg viewBox="0 0 64 64">150 <circle cx="28" cy="28" r="18" stroke-width="4"></circle>151 <line x1="42" y1="42" x2="58" y2="58" stroke-width="4"></line>152 </svg>153 </div>154 <div class="icon-btn">155 <svg viewBox="0 0 64 64">156 <path d="M14 18 H54 L50 44 H22 L18 18 Z" stroke-width="4"></path>157 <path d="M26 50 A4 4 0 1 0 26 58 A4 4 0 1 0 26 50" stroke-width="1"></path>158 <path d="M44 50 A4 4 0 1 0 44 58 A4 4 0 1 0 44 50" stroke-width="1"></path>159 <path d="M22 18 L26 10 H42 L46 18" stroke-width="4"></path>160 </svg>161 </div>162 </div>163 </div>164 165 <!-- Filters -->166 <div class="filters">167 <div class="filter-item">168 <div class="filter-icon">169 <svg viewBox="0 0 64 64">170 <path d="M8 16 H40" stroke-width="4"></path>171 <circle cx="48" cy="16" r="6" stroke-width="4"></circle>172 <path d="M8 32 H24" stroke-width="4"></path>173 <circle cx="32" cy="32" r="6" stroke-width="4"></circle>174 <path d="M8 48 H48" stroke-width="4"></path>175 <circle cx="56" cy="48" r="6" stroke-width="4"></circle>176 </svg>177 </div>178 <div>Category</div>179 <div class="dropdown"></div>180 </div>181 <div class="filter-item">182 <div class="filter-icon">183 <svg viewBox="0 0 64 64">184 <path d="M10 18 H54" stroke-width="4"></path>185 <circle cx="26" cy="18" r="6" stroke-width="4"></circle>186 <path d="M10 34 H54" stroke-width="4"></path>187 <circle cx="42" cy="34" r="6" stroke-width="4"></circle>188 <path d="M10 50 H54" stroke-width="4"></path>189 <circle cx="20" cy="50" r="6" stroke-width="4"></circle>190 </svg>191 </div>192 <div>Filter</div>193 </div>194 <div class="filter-item">195 <div style="font-size:36px;">₹</div>196 <div>Price</div>197 <div class="dropdown"></div>198 </div>199 <div class="filter-item">200 <div class="filter-icon">201 <svg viewBox="0 0 64 64">202 <path d="M16 48 V20" stroke-width="4"></path>203 <path d="M32 48 V28" stroke-width="4"></path>204 <path d="M48 48 V12" stroke-width="4"></path>205 </svg>206 </div>207 <div>Sort</div>208 </div>209 </div>210 211 <!-- Chips -->212 <div class="chip-strip">213 <div class="chip">Sports Shoes</div>214 <div class="chip">Casual Shoes</div>215 </div>216 217 <!-- Grid divider line -->218 <div class="grid-divider"></div>219 220 <!-- Product Grid -->221 <div class="product-grid">222 223 <!-- Product 1 -->224 <div class="product">225 <div class="wish">226 <svg viewBox="0 0 64 64">227 <path d="M32 52 C12 40 12 22 24 20 C29 20 32 24 32 24 C32 24 35 20 40 20 C52 22 52 40 32 52 Z" stroke-width="3"></path>228 </svg>229 </div>230 <div class="img">[IMG: Black Running Shoes]</div>231 <div class="made">232 <div class="tick">233 <svg viewBox="0 0 24 24">234 <path d="M5 12 L10 17 L19 8" stroke-width="3" fill="none" stroke-linecap="round"></path>235 </svg>236 </div>237 <div class="flag">made in <span class="india">INDIA</span></div>238 </div>239 <div class="title2">Men's Black Running Sports Shoes</div>240 <div class="price-row">241 <div class="price">₹649</div>242 <div class="old-price">₹899</div>243 </div>244 <div class="off">27% off</div>245 <div class="rating">246 <div class="star"></div><div class="star"></div><div class="star"></div><div class="star gray"></div><div class="star gray"></div>247 </div>248 <div class="badge">Free shipping</div>249 </div>250 251 <!-- Product 2 -->252 <div class="product">253 <div class="wish">254 <svg viewBox="0 0 64 64">255 <path d="M32 52 C12 40 12 22 24 20 C29 20 32 24 32 24 C32 24 35 20 40 20 C52 22 52 40 32 52 Z" stroke-width="3"></path>256 </svg>257 </div>258 <div class="img">[IMG: White Colourblocked Sports Shoes]</div>259 <div class="made">260 <div class="tick">261 <svg viewBox="0 0 24 24">262 <path d="M5 12 L10 17 L19 8" stroke-width="3" fill="none" stroke-linecap="round"></path>263 </svg>264 </div>265 <div class="flag">made in <span class="india">INDIA</span></div>266 </div>267 <div class="title2">Woakers White ColourBlocked Sports Shoes</div>268 <div class="price-row">269 <div class="price">₹679</div>270 <div class="old-price">₹2,499</div>271 </div>272 <div class="off">72% off</div>273 <div class="meta">Min Order Qty : 1</div>274 </div>275 276 <!-- Product 3 -->277 <div class="product">278 <div class="wish">279 <svg viewBox="0 0 64 64">280 <path d="M32 52 C12 40 12 22 24 20 C29 20 32 24 32 24 C32 24 35 20 40 20 C52 22 52 40 32 52 Z" stroke-width="3"></path>281 </svg>282 </div>283 <div class="img">[IMG: Light Beige Sports Shoes]</div>284 <div class="title2">Light Beige Mesh Sports Shoes</div>285 <div class="price-row">286 <div class="price">₹799</div>287 <div class="old-price">₹1,299</div>288 </div>289 <div class="off">38% off</div>290 </div>291 292 <!-- Product 4 -->293 <div class="product">294 <div class="wish">295 <svg viewBox="0 0 64 64">296 <path d="M32 52 C12 40 12 22 24 20 C29 20 32 24 32 24 C32 24 35 20 40 20 C52 22 52 40 32 52 Z" stroke-width="3"></path>297 </svg>298 </div>299 <div class="img">[IMG: Grey Knitted Running Shoes]</div>300 <div class="title2">Grey Knitted Running Shoes</div>301 <div class="price-row">302 <div class="price">₹749</div>303 <div class="old-price">₹1,499</div>304 </div>305 <div class="off">50% off</div>306 </div>307 308 </div>309 310 <!-- Bottom gesture bar -->311 <div class="gesture"></div>312 313</div>314</body>315</html>