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>Filters UI</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13 color: #111;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #ffffff;21 }22 23 /* Status bar */24 .status-bar {25 height: 120px;26 background: #e7e7e7;27 display: flex;28 align-items: center;29 padding: 0 36px;30 box-sizing: border-box;31 font-size: 34px;32 color: #222;33 }34 .status-bar .right {35 margin-left: auto;36 display: flex;37 align-items: center;38 gap: 26px;39 }40 .sb-dot {41 width: 12px; height: 12px; background:#444; border-radius:50%;42 display:inline-block;43 }44 .sb-icon {45 width: 36px; height: 24px; border: 3px solid #444; border-radius: 4px; position: relative;46 }47 .sb-icon:after {48 content: ""; position: absolute; right: -10px; top: 4px; width: 6px; height: 16px; background:#444; border-radius: 2px;49 }50 51 /* Header */52 .header {53 height: 140px;54 display: flex;55 align-items: center;56 padding: 0 32px;57 box-sizing: border-box;58 border-bottom: 1px solid #eee;59 }60 .back-btn {61 width: 72px; height: 72px; display:flex; align-items:center; justify-content:center;62 }63 .header h1 {64 font-size: 48px;65 font-weight: 600;66 margin: 0 0 0 8px;67 }68 .clear-link {69 margin-left: auto;70 color: #2046ff;71 font-size: 40px;72 font-weight: 600;73 cursor: pointer;74 }75 76 /* Main 2-column area */77 .filters-wrap {78 position: absolute;79 top: 260px; /* 120 + 140 */80 bottom: 300px; /* space for bottom bars */81 left: 0;82 right: 0;83 display: grid;84 grid-template-columns: 320px 1fr;85 }86 87 /* Left section list */88 .left-menu {89 overflow: hidden;90 border-right: 1px solid #eee;91 }92 .menu-item {93 height: 140px;94 display: flex;95 align-items: center;96 padding: 0 36px;97 box-sizing: border-box;98 font-size: 38px;99 color: #222;100 background: #f2f3f6;101 border-bottom: 10px solid #ffffff00;102 }103 .menu-item + .menu-item {104 margin-top: 16px;105 }106 .menu-item.active {107 color: #5b43ff;108 background: #ffffff;109 }110 .menu-item.selected {111 position: relative;112 }113 .menu-item.selected .tick {114 margin-left: auto;115 width: 42px; height: 42px; color: #5b43ff;116 }117 118 /* Right options list */119 .right-list {120 overflow: auto;121 padding: 8px 40px 40px 40px;122 }123 .option {124 display: flex;125 align-items: center;126 gap: 28px;127 padding: 26px 0;128 font-size: 40px;129 }130 .box {131 width: 60px; height: 60px; border: 4px solid #222; border-radius: 10px; box-sizing: border-box;132 display: inline-flex; align-items: center; justify-content: center;133 }134 .box.checked {135 border-color: #5b43ff;136 background: #5b43ff;137 }138 .checkmark {139 width: 34px; height: 34px;140 }141 142 /* Bottom sticky apply bar */143 .apply-bar {144 position: absolute;145 left: 0; right: 0;146 bottom: 210px; /* above the tab bar */147 height: 140px;148 background: #ffffff;149 border-top: 1px solid #eaeaea;150 box-shadow: 0 -2px 12px rgba(0,0,0,0.06);151 display: flex;152 align-items: center;153 padding: 0 36px;154 box-sizing: border-box;155 gap: 24px;156 }157 .count {158 flex: 1;159 display: flex; flex-direction: column;160 }161 .count .num {162 font-size: 44px; font-weight: 700;163 }164 .count .sub {165 font-size: 30px; color: #666;166 margin-top: 6px;167 }168 .apply-btn {169 width: 520px; height: 100px; border-radius: 16px; background: #5b43ff; color: #fff; font-size: 40px; font-weight: 700; border: none;170 }171 172 /* Bottom navigation */173 .tabbar {174 position: absolute;175 left: 0; right: 0; bottom: 80px;176 height: 130px;177 background: #fff;178 border-top: 1px solid #e6e6e6;179 display: grid;180 grid-template-columns: repeat(5, 1fr);181 align-items: center;182 }183 .tab-item {184 display: flex; flex-direction: column; align-items: center; justify-content: center;185 gap: 10px;186 position: relative;187 }188 .tab-item svg { width: 48px; height: 48px; }189 .tab-item span { font-size: 28px; color: #777; }190 .tab-item.active span { color: #5b43ff; }191 .active-indicator {192 position: absolute; bottom: -1px; height: 6px; width: 120px; background: #5b43ff; border-radius: 3px;193 }194 .badge {195 position: absolute; right: 150px; top: 12px;196 min-width: 24px; height: 24px; background: #ff3b30; color: #fff; font-size: 20px; padding: 2px 6px; border-radius: 12px; display: flex; align-items: center; justify-content: center;197 }198 .dot {199 position: absolute; right: 170px; top: 18px;200 width: 14px; height: 14px; background: #ff3b30; border-radius: 50%;201 }202 203 /* Home indicator */204 .home-indicator {205 position: absolute; left: 50%; transform: translateX(-50%);206 bottom: 20px; width: 320px; height: 12px; background: #000; opacity: 0.2; border-radius: 8px;207 }208</style>209</head>210<body>211<div id="render-target">212 213 <!-- Status Bar -->214 <div class="status-bar">215 <div>11:28</div>216 <div class="right">217 <div style="background:#bbb; padding:6px 10px; border-radius:8px; font-size:26px; color:#333;">B</div>218 <div class="sb-dot"></div>219 <div class="sb-dot"></div>220 <div class="sb-dot"></div>221 <div class="sb-icon"></div>222 </div>223 </div>224 225 <!-- Header -->226 <div class="header">227 <div class="back-btn" aria-label="Back">228 <svg viewBox="0 0 24 24">229 <path d="M15.5 4 7 12l8.5 8" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>230 </svg>231 </div>232 <h1>Filters</h1>233 <div class="clear-link">Clear Filters</div>234 </div>235 236 <!-- Main Filters Area -->237 <div class="filters-wrap">238 <!-- Left menu -->239 <div class="left-menu">240 <div class="menu-item">Price</div>241 <div class="menu-item">Brand</div>242 <div class="menu-item selected">243 Deliver At244 <svg class="tick" viewBox="0 0 24 24">245 <path d="M4 13l4 4L20 7" fill="none" stroke="#5b43ff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>246 </svg>247 </div>248 <div class="menu-item">Gender</div>249 <div class="menu-item">Discount</div>250 <div class="menu-item active">Size</div>251 <div class="menu-item">Sleeves</div>252 <div class="menu-item">Collar</div>253 <div class="menu-item">Fabric</div>254 <div class="menu-item">Pattern</div>255 <div class="menu-item">Occasion</div>256 <div class="menu-item">Color</div>257 </div>258 259 <!-- Right size options -->260 <div class="right-list">261 <div class="option">262 <div class="box"></div><div>3XS</div>263 </div>264 <div class="option">265 <div class="box"></div><div>2XS</div>266 </div>267 <div class="option">268 <div class="box"></div><div>XS</div>269 </div>270 <div class="option">271 <div class="box"></div><div>S</div>272 </div>273 <div class="option">274 <div class="box checked">275 <svg class="checkmark" viewBox="0 0 24 24">276 <path d="M4 12.5l4 4L20 7" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>277 </svg>278 </div>279 <div>M</div>280 </div>281 <div class="option">282 <div class="box"></div><div>L</div>283 </div>284 <div class="option">285 <div class="box"></div><div>XL</div>286 </div>287 <div class="option">288 <div class="box"></div><div>XXL</div>289 </div>290 <div class="option">291 <div class="box"></div><div>3XL</div>292 </div>293 <div class="option">294 <div class="box"></div><div>4XL</div>295 </div>296 <div class="option">297 <div class="box"></div><div>5XL</div>298 </div>299 <div class="option">300 <div class="box"></div><div>6XL</div>301 </div>302 <div class="option">303 <div class="box"></div><div>7XL</div>304 </div>305 <div class="option">306 <div class="box"></div><div>Free</div>307 </div>308 <div style="height:80px"></div>309 </div>310 </div>311 312 <!-- Bottom apply bar -->313 <div class="apply-bar">314 <div class="count">315 <div class="num">200,777</div>316 <div class="sub">products found</div>317 </div>318 <button class="apply-btn">Apply</button>319 </div>320 321 <!-- Bottom navigation -->322 <div class="tabbar">323 <div class="tab-item">324 <svg viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="1.6">325 <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-4V13H9v8H5a2 2 0 0 1-2-2z"/>326 </svg>327 <span>Home</span>328 </div>329 <div class="tab-item active">330 <svg viewBox="0 0 24 24" fill="none" stroke="#5b43ff" stroke-width="1.8">331 <circle cx="11" cy="11" r="7"/>332 <path d="M20 20l-3-3"/>333 </svg>334 <span>Search</span>335 <div class="active-indicator"></div>336 </div>337 <div class="tab-item">338 <svg viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="1.6">339 <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>340 <rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/>341 </svg>342 <span>Categories</span>343 <div class="dot"></div>344 </div>345 <div class="tab-item">346 <svg viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="1.6">347 <circle cx="12" cy="8" r="4"/><path d="M4 21c1-4 5-6 8-6s7 2 8 6"/>348 </svg>349 <span>Account</span>350 </div>351 <div class="tab-item">352 <svg viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="1.6">353 <path d="M6 6h15l-2 9H7L6 6z"/><circle cx="9" cy="20" r="1.5"/><circle cx="18" cy="20" r="1.5"/>354 </svg>355 <span>Cart</span>356 <div class="badge">1</div>357 </div>358 </div>359 360 <!-- Home indicator -->361 <div class="home-indicator"></div>362</div>363</body>364</html>