GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Women Running Shoes - UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff; font-family: Arial, Helvetica, sans-serif; color: #212121;13 }14 /* App bar */15 .appbar {16 position: relative;17 height: 180px;18 background: #1aa2a9;19 color: #fff;20 box-shadow: 0 2px 4px rgba(0,0,0,0.2);21 }22 .appbar .title {23 position: absolute;24 left: 50%; transform: translateX(-50%);25 top: 92px;26 font-size: 40px; font-weight: 700; letter-spacing: 0.5px;27 }28 .icon-btn {29 position: absolute; top: 92px;30 width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;31 cursor: default;32 }33 .icon-btn svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 3; }34 .icon-left { left: 30px; }35 .icon-search { right: 130px; }36 .icon-cart { right: 36px; }37 38 /* Filter bar */39 .filter-bar {40 display: flex;41 height: 120px;42 border-bottom: 1px solid #e0e0e0;43 background: #fafafa;44 }45 .filter-item {46 flex: 1;47 display: flex; align-items: center; justify-content: center;48 border-right: 1px solid #e9e9e9;49 color: #616161; font-size: 30px; font-weight: 600;50 }51 .filter-item:last-child { border-right: none; }52 .filter-item svg { width: 34px; height: 34px; stroke: #616161; margin-right: 16px; }53 54 /* Chips row */55 .chips {56 display: flex; gap: 26px;57 padding: 22px 24px;58 background: #ffffff;59 border-bottom: 1px solid #e8e8e8;60 }61 .chip {62 background: #f3f3f3;63 border-radius: 18px;64 padding: 24px 30px;65 font-size: 30px; color: #555;66 box-shadow: 0 2px 4px rgba(0,0,0,0.08);67 border: 1px solid #dcdcdc;68 }69 70 /* Product grid */71 .grid {72 position: relative;73 display: grid;74 grid-template-columns: 1fr 1fr;75 column-gap: 0;76 row-gap: 0;77 }78 .grid-divider {79 position: absolute; left: 540px; top: 0;80 width: 1px; height: 1700px; background: #eeeeee;81 pointer-events: none;82 }83 .product-card {84 position: relative;85 padding: 24px 28px 30px 28px;86 border-bottom: 1px solid #eeeeee;87 min-height: 800px;88 }89 .wish {90 position: absolute; right: 36px; top: 24px;91 width: 80px; height: 80px; border-radius: 50%;92 background: #ffffff; border: 1px solid #e6e6e6;93 display: flex; align-items: center; justify-content: center;94 box-shadow: 0 2px 4px rgba(0,0,0,0.06);95 }96 .wish svg { width: 40px; height: 40px; fill: none; stroke: #8c8c8c; stroke-width: 2.5; }97 .image {98 width: 100%; height: 360px;99 background: #E0E0E0; border: 1px solid #BDBDBD;100 display: flex; align-items: center; justify-content: center;101 color: #757575; font-size: 30px;102 }103 .title {104 margin-top: 26px; font-size: 30px; color: #333; line-height: 1.25;105 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;106 }107 .price-row {108 margin-top: 16px; display: flex; align-items: baseline; gap: 14px;109 }110 .price {111 font-size: 36px; font-weight: 800; color: #000;112 }113 .old-price {114 font-size: 28px; color: #8d8d8d; text-decoration: line-through;115 }116 .discount {117 font-size: 28px; color: #0a94e0; font-weight: 700;118 margin-top: 6px;119 }120 .tag {121 display: inline-block; margin-top: 22px;122 padding: 16px 22px; border-radius: 10px;123 border: 1px solid #d8a578; color: #d38b4b; background: #fff7ef;124 font-size: 28px; font-weight: 600;125 }126 127 /* Bottom gesture bar */128 .gesture-bar {129 position: absolute; left: 0; bottom: 0; width: 100%; height: 120px; background: #000000;130 }131 .gesture-handle {132 position: absolute; left: 50%; bottom: 36px;133 transform: translateX(-50%);134 width: 280px; height: 12px; border-radius: 6px; background: #eaeaea;135 }136</style>137</head>138<body>139<div id="render-target">140 141 <!-- App Bar -->142 <div class="appbar">143 <div class="icon-btn icon-left">144 <svg viewBox="0 0 48 48">145 <path d="M28 10 L14 24 L28 38" />146 </svg>147 </div>148 <div class="title">WOMEN RUNNING SHOES</div>149 <div class="icon-btn icon-search">150 <svg viewBox="0 0 48 48">151 <circle cx="20" cy="20" r="12"></circle>152 <path d="M32 32 L44 44"></path>153 </svg>154 </div>155 <div class="icon-btn icon-cart">156 <svg viewBox="0 0 48 48">157 <path d="M6 12 H42 L38 28 H12 L10 18" />158 <circle cx="16" cy="36" r="3"></circle>159 <circle cx="34" cy="36" r="3"></circle>160 </svg>161 </div>162 </div>163 164 <!-- Filter Bar -->165 <div class="filter-bar">166 <div class="filter-item">167 <svg viewBox="0 0 48 48">168 <path d="M10 18 H38"></path>169 <path d="M14 30 H34"></path>170 <circle cx="16" cy="18" r="3"></circle>171 <circle cx="32" cy="30" r="3"></circle>172 </svg>173 <span>Category</span>174 </div>175 <div class="filter-item">176 <svg viewBox="0 0 48 48">177 <path d="M8 14 H40"></path>178 <path d="M8 24 H40"></path>179 <path d="M8 34 H40"></path>180 </svg>181 <span>Filter</span>182 </div>183 <div class="filter-item">184 <svg viewBox="0 0 48 48">185 <path d="M24 6 L24 42"></path>186 <path d="M18 12 L24 6 L30 12"></path>187 <path d="M18 36 L24 42 L30 36"></path>188 </svg>189 <span>Price</span>190 </div>191 <div class="filter-item">192 <svg viewBox="0 0 48 48">193 <path d="M12 34 V14"></path>194 <path d="M24 34 V20"></path>195 <path d="M36 34 V24"></path>196 </svg>197 <span>Sort</span>198 </div>199 </div>200 201 <!-- Chips -->202 <div class="chips">203 <div class="chip">Sports Shoes</div>204 <div class="chip">Sports Shoes</div>205 <div class="chip">Puma</div>206 </div>207 208 <!-- Products Grid -->209 <div class="grid">210 <div class="grid-divider"></div>211 212 <!-- Card 1 -->213 <div class="product-card">214 <div class="wish">215 <svg viewBox="0 0 48 48">216 <path d="M24 36 C10 26 12 14 20 14 C23 14 24.5 16 24 18 C24.5 16 26 14 29 14 C37 14 38 26 24 36 Z"></path>217 </svg>218 </div>219 <div class="image">[IMG: Grey & Pink Running Shoe]</div>220 <div class="title">Columbus Selena Women's Sports Running Shoes</div>221 <div class="price-row">222 <div class="price">₹1,499</div>223 <div class="old-price">₹2,199</div>224 </div>225 <div class="discount">31% off</div>226 <div class="tag">Free shipping</div>227 </div>228 229 <!-- Card 2 -->230 <div class="product-card">231 <div class="wish">232 <svg viewBox="0 0 48 48">233 <path d="M24 36 C10 26 12 14 20 14 C23 14 24.5 16 24 18 C24.5 16 26 14 29 14 C37 14 38 26 24 36 Z"></path>234 </svg>235 </div>236 <div class="image">[IMG: Black Knit Running Shoe]</div>237 <div class="title">Mozafia Women Black Bling Lace Knit Running Sneakers</div>238 <div class="price-row">239 <div class="price">₹999</div>240 <div class="old-price">₹3,999</div>241 </div>242 <div class="discount">75% off</div>243 <div class="tag">Free shipping</div>244 </div>245 246 <!-- Card 3 -->247 <div class="product-card">248 <div class="wish">249 <svg viewBox="0 0 48 48">250 <path d="M24 36 C10 26 12 14 20 14 C23 14 24.5 16 24 18 C24.5 16 26 14 29 14 C37 14 38 26 24 36 Z"></path>251 </svg>252 </div>253 <div class="image">[IMG: Beige Knit Running Shoe]</div>254 <div class="title">Women Beige Knit Comfort Running Shoe</div>255 <div class="price-row">256 <div class="price">₹1,199</div>257 <div class="old-price">₹2,799</div>258 </div>259 <div class="discount">57% off</div>260 <div class="tag">Free shipping</div>261 </div>262 263 <!-- Card 4 -->264 <div class="product-card">265 <div class="wish">266 <svg viewBox="0 0 48 48">267 <path d="M24 36 C10 26 12 14 20 14 C23 14 24.5 16 24 18 C24.5 16 26 14 29 14 C37 14 38 26 24 36 Z"></path>268 </svg>269 </div>270 <div class="image">[IMG: Grey Knit Running Shoe]</div>271 <div class="title">Women Grey Knit Lightweight Running Shoe</div>272 <div class="price-row">273 <div class="price">₹1,099</div>274 <div class="old-price">₹2,499</div>275 </div>276 <div class="discount">56% off</div>277 <div class="tag">Free shipping</div>278 </div>279 </div>280 281 <!-- Bottom gesture bar -->282 <div class="gesture-bar">283 <div class="gesture-handle"></div>284 </div>285 286</div>287</body>288</html>