GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Filters UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #FFFFFF;13 box-shadow: 0 2px 8px rgba(0,0,0,0.08);14 border-radius: 0;15 }16 17 /* Status bar */18 .status-bar {19 height: 90px;20 padding: 0 28px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #2c2c2c;25 font-size: 34px;26 }27 .status-left { display: flex; align-items: center; gap: 22px; }28 .status-right { display: flex; align-items: center; gap: 22px; }29 .icon-signal, .icon-wifi, .icon-battery {30 width: 44px; height: 44px;31 display: inline-flex; align-items: center; justify-content: center;32 }33 34 /* Header */35 .header {36 height: 120px;37 border-bottom: 1px solid #e5e5e5;38 display: flex;39 align-items: center;40 padding: 0 28px;41 gap: 22px;42 }43 .back-btn {44 width: 72px; height: 72px;45 display: flex; align-items: center; justify-content: center;46 border-radius: 36px;47 }48 .header-title {49 font-size: 42px;50 font-weight: 700;51 color: #0b0b0b;52 }53 54 /* Main layout */55 .main {56 position: absolute;57 left: 0; right: 0;58 top: 210px; /* status + header */59 bottom: 220px; /* space for bottom bar */60 display: flex;61 }62 63 /* Sidebar */64 .sidebar {65 width: 300px;66 background: #EDF1F4;67 border-right: 1px solid #e5e5e5;68 padding: 18px 0;69 overflow-y: auto;70 }71 .side-item {72 padding: 24px 26px;73 font-size: 32px;74 color: #333;75 border-bottom: 1px solid rgba(0,0,0,0.04);76 }77 .side-item.active {78 background: #ffffff;79 font-weight: 700;80 border-left: 4px solid #1f1f1f;81 }82 .side-section-title {83 padding: 20px 26px 10px;84 font-size: 28px;85 color: #888;86 }87 88 /* Content area */89 .content {90 flex: 1;91 background: #fff;92 padding: 26px 30px;93 overflow-y: auto;94 }95 96 /* Search bar */97 .search-wrap {98 display: flex;99 align-items: center;100 gap: 14px;101 margin: 8px 0 24px;102 }103 .search-input {104 flex: 1;105 height: 92px;106 border: 1px solid #d9dee3;107 border-radius: 18px;108 padding: 0 26px;109 font-size: 34px;110 color: #444;111 display: flex;112 align-items: center;113 justify-content: space-between;114 box-shadow: inset 0 1px 0 rgba(0,0,0,0.02);115 }116 .search-placeholder { color: #757575; }117 118 /* Section titles */119 .section-title {120 font-size: 36px;121 font-weight: 700;122 color: #222;123 margin: 18px 0 12px;124 }125 .letter-title {126 font-size: 36px;127 font-weight: 800;128 margin: 10px 0 6px;129 color: #222;130 }131 132 /* Brand list */133 .brand-item {134 display: flex;135 align-items: center;136 gap: 20px;137 padding: 22px 6px;138 }139 .checkbox {140 width: 54px; height: 54px;141 border: 3px solid #bfc7cf;142 border-radius: 12px;143 box-sizing: border-box;144 background: #fff;145 }146 .brand-name {147 font-size: 34px;148 color: #1f1f1f;149 }150 .count {151 color: #76808a;152 margin-left: 8px;153 font-size: 32px;154 }155 .divider { height: 1px; background: #eee; margin: 6px 0; }156 157 /* Bottom bar */158 .bottom-bar {159 position: absolute;160 left: 0;161 right: 0;162 bottom: 0;163 height: 200px;164 background: #f1f4f7;165 border-top: 1px solid #e5e5e5;166 display: flex;167 align-items: center;168 justify-content: space-between;169 padding: 30px 34px;170 }171 .btn {172 height: 120px;173 border-radius: 28px;174 display: flex;175 align-items: center;176 justify-content: center;177 font-size: 40px;178 font-weight: 700;179 letter-spacing: 0.5px;180 }181 .btn-reset {182 width: 480px;183 background: #ffffff;184 border: 2px solid #cfd8dc;185 color: #1f1f1f;186 }187 .btn-apply {188 width: 520px;189 background: #111111;190 color: #ffffff;191 }192 193 /* Small helper classes */194 .muted { color: #999; }195</style>196</head>197<body>198<div id="render-target">199 200 <!-- Status bar -->201 <div class="status-bar">202 <div class="status-left">203 <div>12:39</div>204 </div>205 <div class="status-right">206 <div class="icon-signal">207 <svg width="34" height="34" viewBox="0 0 24 24">208 <rect x="2" y="16" width="3" height="6" fill="#555"/>209 <rect x="7" y="12" width="3" height="10" fill="#777"/>210 <rect x="12" y="8" width="3" height="14" fill="#999"/>211 <rect x="17" y="4" width="3" height="18" fill="#bbb"/>212 </svg>213 </div>214 <div class="icon-wifi">215 <svg width="36" height="36" viewBox="0 0 24 24">216 <path d="M2 9c5-4 15-4 20 0" stroke="#555" stroke-width="2" fill="none"/>217 <path d="M5 12c4-3 10-3 14 0" stroke="#777" stroke-width="2" fill="none"/>218 <path d="M8 15c3-2 5-2 8 0" stroke="#999" stroke-width="2" fill="none"/>219 <circle cx="12" cy="18" r="2" fill="#777"/>220 </svg>221 </div>222 <div class="icon-battery">223 <svg width="48" height="32" viewBox="0 0 28 16">224 <rect x="1" y="2" width="22" height="12" rx="2" ry="2" stroke="#555" fill="none" stroke-width="2"/>225 <rect x="3" y="4" width="16" height="8" fill="#4CAF50"/>226 <rect x="24" y="6" width="3" height="4" rx="1" fill="#555"/>227 </svg>228 </div>229 <div class="muted">97%</div>230 </div>231 </div>232 233 <!-- Header -->234 <div class="header">235 <div class="back-btn">236 <svg width="48" height="48" viewBox="0 0 24 24">237 <path d="M15 18L9 12l6-6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>238 </svg>239 </div>240 <div class="header-title">Filters (12038 products)</div>241 </div>242 243 <!-- Main content -->244 <div class="main">245 <!-- Sidebar -->246 <div class="sidebar">247 <div class="side-item">Gender</div>248 <div class="side-item">Category</div>249 <div class="side-item">Price</div>250 <div class="side-item active">Brands</div>251 <div class="side-item">Occasion</div>252 <div class="side-item">Discount</div>253 <div class="side-item">Colors</div>254 <div class="side-item">Size & Fit</div>255 <div class="side-item">Rating</div>256 <div class="side-section-title">More Filters</div>257 <div class="side-item">Style Type</div>258 <div class="side-item">Pattern</div>259 <div class="side-item">Upper Material</div>260 <div class="side-item">Toe Shape</div>261 <div class="side-item">Fit Type</div>262 <div class="side-item">Sport</div>263 <div class="side-item">Ankle Style</div>264 <div class="side-item">Character</div>265 <div class="side-item">Heel</div>266 <div class="side-item">Traditional Weave</div>267 </div>268 269 <!-- Content -->270 <div class="content">271 272 <!-- Search -->273 <div class="search-wrap">274 <div class="search-input">275 <div class="search-placeholder">Search for brands</div>276 <svg width="48" height="48" viewBox="0 0 24 24">277 <circle cx="11" cy="11" r="7" stroke="#6b7785" stroke-width="2" fill="none"/>278 <path d="M20 20l-4-4" stroke="#6b7785" stroke-width="2" stroke-linecap="round"/>279 </svg>280 </div>281 </div>282 283 <!-- Popular Brands -->284 <div class="section-title">Popular Brands</div>285 <div class="brand-item">286 <div class="checkbox"></div>287 <div class="brand-name">Campus <span class="count">(1717)</span></div>288 </div>289 <div class="brand-item">290 <div class="checkbox"></div>291 <div class="brand-name">ADIDAS <span class="count">(1146)</span></div>292 </div>293 <div class="brand-item">294 <div class="checkbox"></div>295 <div class="brand-name">Puma <span class="count">(957)</span></div>296 </div>297 <div class="brand-item">298 <div class="checkbox"></div>299 <div class="brand-name">PERFORMAX <span class="count">(629)</span></div>300 </div>301 <div class="brand-item">302 <div class="checkbox"></div>303 <div class="brand-name">ASIAN <span class="count">(532)</span></div>304 </div>305 306 <div class="letter-title">A</div>307 308 <!-- A Brands list -->309 <div class="brand-item">310 <div class="checkbox"></div>311 <div class="brand-name">AARGENT <span class="count">(1)</span></div>312 </div>313 <div class="brand-item">314 <div class="checkbox"></div>315 <div class="brand-name">ABROS <span class="count">(51)</span></div>316 </div>317 <div class="brand-item">318 <div class="checkbox"></div>319 <div class="brand-name">Action <span class="count">(482)</span></div>320 </div>321 <div class="brand-item">322 <div class="checkbox"></div>323 <div class="brand-name">ADIDAS <span class="count">(1146)</span></div>324 </div>325 <div class="brand-item">326 <div class="checkbox"></div>327 <div class="brand-name">Adidas Originals <span class="count">(6)</span></div>328 </div>329 <div class="brand-item">330 <div class="checkbox"></div>331 <div class="brand-name">ADORLY <span class="count">(12)</span></div>332 </div>333 <div class="brand-item">334 <div class="checkbox"></div>335 <div class="brand-name">AFROJACK <span class="count">(2)</span></div>336 </div>337 <div class="brand-item">338 <div class="checkbox"></div>339 <div class="brand-name">AIRSON <span class="count">(18)</span></div>340 </div>341 <div class="brand-item">342 <div class="checkbox"></div>343 <div class="brand-name">AIRWALK <span class="count">(1)</span></div>344 </div>345 <div class="brand-item">346 <div class="checkbox"></div>347 <div class="brand-name">AIRWALK by Payless <span class="count">(26)</span></div>348 </div>349 350 <!-- little spacer to mimic scroll area -->351 <div style="height: 400px;"></div>352 353 </div>354 </div>355 356 <!-- Bottom bar -->357 <div class="bottom-bar">358 <div class="btn btn-reset">Reset</div>359 <div class="btn btn-apply">Apply Filter</div>360 </div>361 362</div>363</body>364</html>