GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Filters UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #0f0f0f;14 color: #fff;15 }16 17 /* Top status bar */18 .status-bar {19 height: 120px;20 background: #6f6f6f;21 color: #fff;22 display: flex;23 align-items: center;24 padding: 0 36px;25 box-sizing: border-box;26 font-weight: 600;27 }28 .status-left { font-size: 44px; }29 .status-right {30 margin-left: auto;31 display: flex;32 align-items: center;33 gap: 26px;34 }35 .status-icon svg { width: 42px; height: 42px; fill: #fff; opacity: 0.9; }36 37 /* Header bar */38 .app-bar {39 height: 180px;40 background: #1b1b1b;41 display: flex;42 align-items: center;43 padding: 0 36px;44 box-sizing: border-box;45 border-bottom: 1px solid #212121;46 }47 .back-icon { width: 64px; height: 64px; margin-right: 24px; }48 .app-title {49 font-size: 54px;50 letter-spacing: 6px;51 font-weight: 700;52 }53 54 /* Main layout */55 .main {56 position: absolute;57 top: 300px; /* status + header */58 left: 0;59 width: 1080px;60 height: 1880px;61 display: grid;62 grid-template-columns: 330px 1fr;63 }64 65 /* Left sidebar */66 .sidebar {67 background: #161616;68 padding: 24px 24px;69 box-sizing: border-box;70 border-right: 1px solid #202020;71 }72 .side-item {73 color: #c6c6c6;74 font-size: 42px;75 padding: 28px 18px;76 border-radius: 36px;77 margin: 6px 0;78 }79 .side-item.active {80 background: #2b380f;81 color: #ffffff;82 }83 84 /* Right list */85 .list-area {86 background: #121212;87 overflow: hidden;88 padding-right: 12px;89 }90 .brand-row {91 height: 120px;92 border-bottom: 1px solid #202020;93 display: flex;94 align-items: center;95 padding: 0 36px;96 box-sizing: border-box;97 gap: 28px;98 color: #e6e6e6;99 font-size: 44px;100 }101 .checkbox {102 width: 72px;103 height: 72px;104 border-radius: 18px;105 background: #f1f8d9;106 border: 2px solid #d8e6c0;107 display: flex;108 align-items: center;109 justify-content: center;110 }111 .checkbox.unselected::after {112 content: "";113 width: 0;114 height: 0;115 }116 .checkbox.selected svg { width: 46px; height: 46px; }117 .brand-name { flex: 1; }118 .count {119 color: #8d8d8d;120 font-size: 40px;121 }122 123 /* Bottom action bar */124 .footer {125 position: absolute;126 bottom: 0;127 left: 0;128 width: 1080px;129 height: 220px;130 background: #1b1b1b;131 border-top: 1px solid #232323;132 display: flex;133 align-items: center;134 padding: 0 48px;135 box-sizing: border-box;136 }137 .reset {138 color: #cfeaff;139 font-size: 48px;140 font-weight: 600;141 }142 .apply-btn {143 margin-left: auto;144 width: 420px;145 height: 120px;146 background: #6a6a6a;147 color: #ffffff;148 font-size: 48px;149 font-weight: 700;150 border-radius: 38px;151 display: flex;152 align-items: center;153 justify-content: center;154 }155</style>156</head>157<body>158<div id="render-target">159 160 <!-- Status bar -->161 <div class="status-bar">162 <div class="status-left">10:51</div>163 <div class="status-right">164 <span class="status-icon">165 <!-- Do Not Disturb circle -->166 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><rect x="6" y="11" width="12" height="2" fill="#6f6f6f"></rect></svg>167 </span>168 <span class="status-icon">169 <!-- WiFi -->170 <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0M6 12c3-3 9-3 12 0M10 16c2-2 4-2 6 0"></path><circle cx="18" cy="20" r="1.6"></circle></svg>171 </span>172 <span class="status-icon">173 <!-- Battery -->174 <svg viewBox="0 0 24 24">175 <rect x="3" y="6" width="16" height="12" rx="2" ry="2"></rect>176 <rect x="20" y="10" width="2" height="4"></rect>177 <rect x="5" y="8" width="12" height="8" fill="#fff"></rect>178 </svg>179 </span>180 <span style="font-size:42px;">95%</span>181 </div>182 </div>183 184 <!-- Header -->185 <div class="app-bar">186 <svg class="back-icon" viewBox="0 0 24 24" fill="#fff"><path d="M15 5l-7 7 7 7" /></svg>187 <div class="app-title">FILTERS</div>188 </div>189 190 <!-- Main content area -->191 <div class="main">192 <!-- Sidebar -->193 <div class="sidebar">194 <div class="side-item">Categories</div>195 <div class="side-item">Discount</div>196 <div class="side-item">Offers</div>197 <div class="side-item active">Brand</div>198 <div class="side-item">Color</div>199 <div class="side-item">Size</div>200 <div class="side-item">Toe Shape</div>201 <div class="side-item">Sport Type</div>202 <div class="side-item">Closure</div>203 <div class="side-item">Material</div>204 <div class="side-item">Prints & Pattern</div>205 <div class="side-item">No. Of Pcs</div>206 <div class="side-item">Essential</div>207 <div class="side-item">Lowest Priced</div>208 <div class="side-item">Occasion</div>209 <div class="side-item">Exclusive</div>210 </div>211 212 <!-- Right list area -->213 <div class="list-area">214 <div class="brand-row">215 <div class="checkbox unselected"></div>216 <div class="brand-name">Pro</div>217 <div class="count">(13)</div>218 </div>219 <div class="brand-row">220 <div class="checkbox unselected"></div>221 <div class="brand-name">PROPET</div>222 <div class="count">(1)</div>223 </div>224 <div class="brand-row">225 <div class="checkbox unselected"></div>226 <div class="brand-name">Ryko</div>227 <div class="count">(13)</div>228 </div>229 <div class="brand-row">230 <div class="checkbox unselected"></div>231 <div class="brand-name">Sharon</div>232 <div class="count">(3)</div>233 </div>234 <div class="brand-row">235 <div class="checkbox unselected"></div>236 <div class="brand-name">Shoe Island</div>237 <div class="count">(10)</div>238 </div>239 <div class="brand-row">240 <div class="checkbox unselected"></div>241 <div class="brand-name">Shoes Kingdom</div>242 <div class="count">(5)</div>243 </div>244 <div class="brand-row">245 <div class="checkbox unselected"></div>246 <div class="brand-name">SHUAN</div>247 <div class="count">(5)</div>248 </div>249 <div class="brand-row">250 <div class="checkbox selected">251 <!-- Check mark -->252 <svg viewBox="0 0 24 24" fill="#111"><path d="M5 13l4 4 10-10" stroke="#111" stroke-width="3" fill="none"/></svg>253 </div>254 <div class="brand-name">Sparx</div>255 <div class="count">(88)</div>256 </div>257 <div class="brand-row">258 <div class="checkbox unselected"></div>259 <div class="brand-name">Spazer</div>260 <div class="count">(7)</div>261 </div>262 <div class="brand-row">263 <div class="checkbox unselected"></div>264 <div class="brand-name">Sspoton</div>265 <div class="count">(124)</div>266 </div>267 <div class="brand-row">268 <div class="checkbox unselected"></div>269 <div class="brand-name">Staed</div>270 <div class="count">(6)</div>271 </div>272 <div class="brand-row">273 <div class="checkbox unselected"></div>274 <div class="brand-name">STRIKER</div>275 <div class="count">(2)</div>276 </div>277 <div class="brand-row">278 <div class="checkbox unselected"></div>279 <div class="brand-name">Tan Toe</div>280 <div class="count">(2)</div>281 </div>282 <div class="brand-row">283 <div class="checkbox unselected"></div>284 <div class="brand-name">UCLA</div>285 <div class="count">(22)</div>286 </div>287 <div class="brand-row">288 <div class="checkbox unselected"></div>289 <div class="brand-name">V-Mart</div>290 <div class="count">(132)</div>291 </div>292 <div class="brand-row">293 <div class="checkbox unselected"></div>294 <div class="brand-name">VATELIO</div>295 <div class="count">(23)</div>296 </div>297 <div class="brand-row">298 <div class="checkbox unselected"></div>299 <div class="brand-name">VITEGRA</div>300 <div class="count">(13)</div>301 </div>302 </div>303 </div>304 305 <!-- Footer actions -->306 <div class="footer">307 <div class="reset">Reset all</div>308 <div class="apply-btn">Apply</div>309 </div>310 311</div>312</body>313</html>