GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Filters UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #FFFFFF;14 color: #111;15 }16 17 /* Top bars */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 120px;24 background: #E9E9EA;25 display: flex;26 align-items: center;27 padding: 0 36px;28 box-sizing: border-box;29 color: #111;30 font-weight: 600;31 font-size: 38px;32 letter-spacing: 0.5px;33 }34 .status-right {35 margin-left: auto;36 display: flex;37 align-items: center;38 gap: 24px;39 }40 .dot { width: 18px; height: 18px; background:#4B5563; border-radius:50%; }41 .bar {42 width: 26px; height: 18px; border: 3px solid #4B5563; border-radius: 4px; position: relative;43 }44 .bar::after { content:""; position:absolute; right:-6px; top:4px; width:4px; height:10px; background:#4B5563; border-radius: 0 2px 2px 0; }45 46 .app-header {47 position: absolute;48 top: 120px;49 left: 0;50 width: 1080px;51 height: 120px;52 display: flex;53 align-items: center;54 padding: 0 28px;55 box-sizing: border-box;56 background: #FFFFFF;57 border-bottom: 1px solid #ECECEC;58 }59 .back-btn {60 width: 80px; height: 80px; display:flex; align-items:center; justify-content:center; margin-right: 12px;61 }62 .back-btn svg { width: 38px; height: 38px; }63 .title { font-size: 56px; font-weight: 700; color:#222; }64 .clear-link {65 margin-left: auto;66 font-size: 42px;67 color: #2D48FF;68 font-weight: 700;69 }70 71 /* Main content area */72 .content {73 position: absolute;74 top: 240px; /* after status + header */75 bottom: 380px; /* space for bottom bars */76 left: 0;77 right: 0;78 display: flex;79 }80 81 .left-nav {82 width: 330px;83 background: #F3F4F6;84 height: 100%;85 overflow: hidden;86 border-right: 1px solid #E6E6E6;87 }88 .left-scroller {89 height: 100%;90 overflow-y: auto;91 padding: 24px 0;92 }93 .left-item {94 padding: 28px 28px;95 font-size: 38px;96 color: #222;97 display: flex;98 align-items: center;99 position: relative;100 }101 .left-item.active { color: #5A3FF6; font-weight: 700; }102 .left-item .tick {103 position: absolute;104 right: 22px;105 }106 .tick svg { width: 34px; height: 34px; color: #5A3FF6; }107 108 .right-panel {109 flex: 1;110 height: 100%;111 overflow: hidden;112 background: #FFFFFF;113 }114 .right-scroller {115 height: 100%;116 overflow-y: auto;117 padding: 24px 32px 120px 32px;118 box-sizing: border-box;119 }120 121 /* Search field */122 .search-wrap {123 width: 100%;124 height: 112px;125 border: 2px solid #E3E5EA;126 border-radius: 16px;127 display: flex;128 align-items: center;129 padding: 0 24px;130 box-sizing: border-box;131 margin-bottom: 28px;132 }133 .search-wrap svg { width: 40px; height: 40px; color:#868C98; }134 .search-input {135 border: none;136 outline: none;137 font-size: 40px;138 padding-left: 18px;139 width: 100%;140 color: #333;141 }142 .brand-row {143 display: flex;144 align-items: center;145 gap: 22px;146 padding: 26px 8px;147 font-size: 44px;148 color: #222;149 }150 .checkbox {151 width: 60px; height: 60px; border: 4px solid #1F2937; border-radius: 12px;152 display: inline-flex; align-items: center; justify-content: center;153 }154 .checkbox.selected {155 background: #5A3FF6; border-color: #5A3FF6;156 }157 .checkbox.selected svg { color: #fff; width: 40px; height: 40px; }158 .muted { color:#6B7280; }159 160 .view-more {161 font-size: 44px; color:#2D48FF; margin-top: 32px; font-weight: 700;162 }163 164 /* Bottom action bar */165 .apply-bar {166 position: absolute;167 left: 0; right: 0;168 bottom: 200px; /* above bottom nav */169 height: 180px;170 background: #FFFFFF;171 border-top: 1px solid #EAEAEA;172 display: flex;173 align-items: center;174 padding: 0 36px;175 box-sizing: border-box;176 gap: 24px;177 }178 .count-wrap {179 display: flex; flex-direction: column;180 }181 .count-number { font-size: 54px; font-weight: 800; }182 .count-sub { font-size: 34px; color: #6B7280; margin-top: 4px; }183 .apply-btn {184 margin-left: auto;185 width: 500px; height: 120px;186 background: #5A3FF6;187 color: white; font-size: 48px; font-weight: 800;188 border-radius: 18px;189 display: flex; align-items: center; justify-content: center;190 }191 192 /* Bottom navigation */193 .bottom-nav {194 position: absolute;195 bottom: 0; left: 0; right: 0;196 height: 200px;197 background: #FFFFFF;198 border-top: 1px solid #E8E8E8;199 display: flex;200 justify-content: space-around;201 align-items: center;202 padding-top: 8px;203 box-sizing: border-box;204 }205 .tab {206 width: 20%;207 display: flex;208 align-items: center;209 justify-content: center;210 gap: 14px;211 flex-direction: column;212 color: #374151;213 font-size: 34px;214 }215 .tab svg { width: 54px; height: 54px; color:#6B7280; }216 .tab.active { color: #5A3FF6; font-weight: 700; }217 .tab.active .underline {218 width: 160px; height: 10px; background:#5A3FF6; border-radius: 6px; margin-top: 8px;219 }220</style>221</head>222<body>223<div id="render-target">224 225 <!-- Status Bar -->226 <div class="status-bar">227 9:20228 <div class="status-right">229 <div class="dot"></div>230 <div class="bar"></div>231 </div>232 </div>233 234 <!-- Header -->235 <div class="app-header">236 <div class="back-btn" aria-label="Back">237 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">238 <path d="M15 18l-6-6 6-6"/>239 </svg>240 </div>241 <div class="title">Filters</div>242 <div class="clear-link">Clear Filters</div>243 </div>244 245 <!-- Main Content -->246 <div class="content">247 <!-- Left Sidebar -->248 <div class="left-nav">249 <div class="left-scroller">250 <div class="left-item">Gender</div>251 <div class="left-item">Category</div>252 <div class="left-item">Deliver At253 <span class="tick">254 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">255 <path d="M20 6L9 17l-5-5"/>256 </svg>257 </span>258 </div>259 <div class="left-item">Budget</div>260 <div class="left-item">Price</div>261 <div class="left-item active">Brand</div>262 <div class="left-item">Customer Ratings</div>263 <div class="left-item">Color</div>264 <div class="left-item">Discount</div>265 <div class="left-item">Offers</div>266 <div class="left-item">Availability</div>267 </div>268 </div>269 270 <!-- Right Panel -->271 <div class="right-panel">272 <div class="right-scroller">273 274 <!-- Search -->275 <div class="search-wrap">276 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">277 <circle cx="11" cy="11" r="7"></circle>278 <path d="M21 21l-4.3-4.3"></path>279 </svg>280 <input class="search-input" type="text" placeholder="Search Brand" />281 </div>282 283 <!-- Brand list -->284 <div class="brand-row">285 <div class="checkbox"></div>286 <div class="muted">Popular Filters</div>287 </div>288 289 <div class="brand-row">290 <div class="checkbox"></div>291 <div>PUMA</div>292 </div>293 294 <div class="brand-row">295 <div class="checkbox"></div>296 <div>ADIDAS</div>297 </div>298 299 <div class="brand-row">300 <div class="checkbox selected">301 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">302 <path d="M20 6L9 17l-5-5"/>303 </svg>304 </div>305 <div>NIKE</div>306 </div>307 308 <div class="brand-row">309 <div class="checkbox"></div>310 <div>CAMPUS</div>311 </div>312 313 <div class="brand-row">314 <div class="checkbox"></div>315 <div>Skechers</div>316 </div>317 318 <div class="brand-row">319 <div class="checkbox"></div>320 <div>RED TAPE</div>321 </div>322 323 <div class="brand-row">324 <div class="checkbox"></div>325 <div>WOODLAND</div>326 </div>327 328 <div class="brand-row">329 <div class="checkbox"></div>330 <div>Bata</div>331 </div>332 333 <div class="brand-row">334 <div class="checkbox"></div>335 <div>REEBOK</div>336 </div>337 338 <div class="brand-row">339 <div class="checkbox"></div>340 <div>Others</div>341 </div>342 343 <div class="brand-row">344 <div class="checkbox"></div>345 <div>3SIX5</div>346 </div>347 348 <div class="view-more">View More</div>349 </div>350 </div>351 </div>352 353 <!-- Apply Bar -->354 <div class="apply-bar">355 <div class="count-wrap">356 <div class="count-number">104,207</div>357 <div class="count-sub">products found</div>358 </div>359 <div class="apply-btn">Apply</div>360 </div>361 362 <!-- Bottom Navigation -->363 <div class="bottom-nav">364 <div class="tab">365 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">366 <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>367 <path d="M9 22V12h6v10"/>368 </svg>369 <div>Home</div>370 </div>371 372 <div class="tab active">373 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">374 <circle cx="11" cy="11" r="7"></circle>375 <path d="M21 21l-4.3-4.3"></path>376 </svg>377 <div>Search</div>378 <div class="underline"></div>379 </div>380 381 <div class="tab">382 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">383 <path d="M4 6h16M4 12h16M4 18h16"/>384 </svg>385 <div>Categories</div>386 </div>387 388 <div class="tab">389 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">390 <circle cx="12" cy="8" r="4"></circle>391 <path d="M6 22c0-3.3 2.7-6 6-6s6 2.7 6 6"/>392 </svg>393 <div>Account</div>394 </div>395 396 <div class="tab">397 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">398 <path d="M6 6h15l-1.5 9h-12z"/>399 <circle cx="9" cy="20" r="1.5"/>400 <circle cx="18" cy="20" r="1.5"/>401 </svg>402 <div>Cart</div>403 </div>404 </div>405 406</div>407</body>408</html>