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: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #ffffff;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 120px;23 background: #e8e8ea;24 display: flex;25 align-items: center;26 padding: 0 32px;27 color: #2c2c2c;28 font-size: 36px;29 box-sizing: border-box;30 }31 .status-right {32 margin-left: auto;33 display: flex;34 align-items: center;35 gap: 22px;36 color: #4a4a4a;37 }38 .icon {39 width: 40px; height: 40px;40 }41 42 /* App bar */43 .app-bar {44 position: absolute;45 top: 120px;46 left: 0;47 width: 1080px;48 height: 160px;49 background: #ffffff;50 border-bottom: 1px solid #e5e5e5;51 display: flex;52 align-items: center;53 box-sizing: border-box;54 padding: 0 24px;55 }56 .back-btn {57 width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;58 margin-left: 8px; margin-right: 18px;59 }60 .title {61 font-size: 64px; font-weight: 600; color: #222;62 }63 .clear-link {64 margin-left: auto; color: #2d3cff; font-size: 44px; font-weight: 600;65 }66 67 /* Content area */68 .content {69 position: absolute;70 top: 280px;71 left: 0;72 width: 1080px;73 height: 1690px;74 display: flex;75 }76 .sidebar {77 width: 340px;78 background: #f3f5f9;79 border-right: 1px solid #e6e6e6;80 height: 100%;81 box-sizing: border-box;82 padding-top: 16px;83 }84 .side-item {85 height: 120px;86 display: flex;87 align-items: center;88 padding: 0 24px;89 box-sizing: border-box;90 font-size: 42px;91 color: #252525;92 border-bottom: 1px solid #eef0f2;93 position: relative;94 }95 .side-item .badge {96 position: absolute;97 right: 24px;98 color: #3a41ff;99 font-weight: 700;100 }101 .side-link {102 color: #3a41ff;103 }104 105 .right-panel {106 flex: 1;107 background: #ffffff;108 padding: 20px 40px;109 box-sizing: border-box;110 }111 .option-row {112 display: flex;113 align-items: center;114 gap: 32px;115 height: 130px;116 border-bottom: 1px solid #f0f0f0;117 font-size: 44px;118 color: #383838;119 }120 .checkbox {121 width: 60px; height: 60px; border: 4px solid #2b2b2b; border-radius: 12px;122 display: inline-flex; align-items: center; justify-content: center;123 }124 .checkbox.selected {125 background: #5b38f4;126 border-color: #5b38f4;127 }128 .checkbox svg { width: 40px; height: 40px; }129 .option-label { font-size: 48px; }130 131 /* Bottom action bar */132 .bottom-action {133 position: absolute;134 left: 0;135 bottom: 220px;136 width: 1080px;137 height: 180px;138 border-top: 1px solid #e6e6e6;139 background: #fff;140 display: flex;141 align-items: center;142 padding: 0 32px;143 box-sizing: border-box;144 }145 .products-found {146 font-size: 48px; font-weight: 700; color: #1a1a1a;147 }148 .pf-sub {149 font-size: 34px; color: #6a6a6a;150 }151 .apply-btn {152 margin-left: auto;153 width: 580px; height: 120px;154 background: #5b38f4;155 color: #fff; font-size: 52px; font-weight: 700;156 border-radius: 16px;157 display: flex; align-items: center; justify-content: center;158 }159 160 /* Bottom navigation */161 .bottom-nav {162 position: absolute;163 left: 0;164 bottom: 40px;165 width: 1080px;166 height: 220px;167 background: #ffffff;168 border-top: 1px solid #e7e7e7;169 display: flex;170 align-items: center;171 justify-content: space-around;172 box-sizing: border-box;173 padding: 10px 0;174 }175 .nav-item {176 width: 180px;177 display: flex;178 flex-direction: column;179 align-items: center;180 color: #6b6b6b;181 font-size: 36px;182 }183 .nav-item.active { color: #5b38f4; }184 .nav-icon { width: 72px; height: 72px; margin-bottom: 10px; }185 .badge-dot {186 position: absolute; width: 22px; height: 22px; background: #ff5454; border-radius: 50%;187 top: -4px; right: -4px; border: 2px solid #fff;188 }189 .gesture-bar {190 position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);191 width: 380px; height: 18px; background: #cfcfcf; border-radius: 9px;192 }193</style>194</head>195<body>196<div id="render-target">197 198 <!-- Status Bar -->199 <div class="status-bar">200 <div>2:28</div>201 <div class="status-right">202 <!-- Do not disturb -->203 <svg class="icon" viewBox="0 0 24 24">204 <circle cx="12" cy="12" r="10" fill="none" stroke="#555" stroke-width="2"></circle>205 <rect x="6" y="11" width="12" height="2" fill="#555"></rect>206 </svg>207 <!-- WiFi -->208 <svg class="icon" viewBox="0 0 24 24">209 <path d="M2 8c5-4 15-4 20 0" stroke="#555" stroke-width="2" fill="none"></path>210 <path d="M6 12c3-3 9-3 12 0" stroke="#555" stroke-width="2" fill="none"></path>211 <path d="M10 16c2-2 4-2 6 0" stroke="#555" stroke-width="2" fill="none"></path>212 <circle cx="12" cy="19" r="1.6" fill="#555"></circle>213 </svg>214 <!-- Battery -->215 <div style="display:flex; align-items:center; gap:8px;">216 <svg class="icon" viewBox="0 0 26 24">217 <rect x="2" y="6" width="20" height="12" rx="2" ry="2" stroke="#555" fill="none" stroke-width="2"></rect>218 <rect x="4" y="8" width="14" height="8" fill="#6b6b6b"></rect>219 <rect x="22" y="10" width="2" height="4" fill="#555"></rect>220 </svg>221 <span>70%</span>222 </div>223 </div>224 </div>225 226 <!-- App Bar -->227 <div class="app-bar">228 <div class="back-btn">229 <svg viewBox="0 0 24 24" width="56" height="56">230 <path d="M15 6l-6 6 6 6" stroke="#222" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>231 </svg>232 </div>233 <div class="title">Filters</div>234 <div class="clear-link">Clear Filters</div>235 </div>236 237 <!-- Content -->238 <div class="content">239 <!-- Sidebar -->240 <div class="sidebar">241 <div class="side-item">Price</div>242 <div class="side-item">Brand <span class="badge">1</span></div>243 <div class="side-item">Deliver At</div>244 <div class="side-item">Gender</div>245 <div class="side-item">Discount</div>246 <div class="side-item"><span class="side-link">Size - UK/India</span></div>247 248 <div style="height: 16px;"></div>249 250 <div class="side-item">Theme</div>251 <div class="side-item">Occasion <span class="badge">1</span></div>252 <div class="side-item">Outer Material</div>253 <div class="side-item">Color</div>254 <div class="side-item">Customer Ratings</div>255 <div class="side-item">Type of Shoes</div>256 </div>257 258 <!-- Right Panel -->259 <div class="right-panel">260 <div class="option-row">261 <div class="checkbox"></div>262 <div class="option-label">6</div>263 </div>264 <div class="option-row">265 <div class="checkbox"></div>266 <div class="option-label">7</div>267 </div>268 <div class="option-row">269 <div class="checkbox"></div>270 <div class="option-label">8</div>271 </div>272 <div class="option-row">273 <div class="checkbox"></div>274 <div class="option-label">9</div>275 </div>276 <div class="option-row">277 <div class="checkbox selected">278 <svg viewBox="0 0 24 24">279 <path d="M5 12l4 4 10-10" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>280 </svg>281 </div>282 <div class="option-label">10</div>283 </div>284 <div class="option-row">285 <div class="checkbox"></div>286 <div class="option-label">11</div>287 </div>288 <div class="option-row">289 <div class="checkbox"></div>290 <div class="option-label">12</div>291 </div>292 </div>293 </div>294 295 <!-- Bottom action bar -->296 <div class="bottom-action">297 <div>298 <div class="products-found">5,791</div>299 <div class="pf-sub">products found</div>300 </div>301 <div class="apply-btn">Apply</div>302 </div>303 304 <!-- Bottom Navigation -->305 <div class="bottom-nav">306 <div class="nav-item">307 <svg class="nav-icon" viewBox="0 0 24 24">308 <path d="M3 11l9-7 9 7v9H15v-6H9v6H3z" fill="#6b6b6b"></path>309 </svg>310 <div>Home</div>311 </div>312 <div class="nav-item active">313 <svg class="nav-icon" viewBox="0 0 24 24">314 <circle cx="10" cy="10" r="6" stroke="#5b38f4" stroke-width="2" fill="none"></circle>315 <path d="M15 15l6 6" stroke="#5b38f4" stroke-width="2"></path>316 </svg>317 <div>Search</div>318 </div>319 <div class="nav-item" style="position:relative;">320 <svg class="nav-icon" viewBox="0 0 24 24">321 <rect x="3" y="3" width="7" height="7" fill="#6b6b6b"></rect>322 <rect x="14" y="3" width="7" height="7" fill="#6b6b6b"></rect>323 <rect x="3" y="14" width="7" height="7" fill="#6b6b6b"></rect>324 <rect x="14" y="14" width="7" height="7" fill="#6b6b6b"></rect>325 </svg>326 <div class="badge-dot"></div>327 <div>Categories</div>328 </div>329 <div class="nav-item">330 <svg class="nav-icon" viewBox="0 0 24 24">331 <circle cx="12" cy="8" r="4" fill="#6b6b6b"></circle>332 <path d="M4 21c1-5 7-5 8-5s7 0 8 5" stroke="#6b6b6b" stroke-width="2" fill="none"></path>333 </svg>334 <div>Account</div>335 </div>336 <div class="nav-item">337 <svg class="nav-icon" viewBox="0 0 24 24">338 <path d="M3 6h3l2 12h10l2-9H7" stroke="#6b6b6b" stroke-width="2" fill="none"></path>339 <circle cx="9" cy="21" r="2" fill="#6b6b6b"></circle>340 <circle cx="18" cy="21" r="2" fill="#6b6b6b"></circle>341 </svg>342 <div>Cart</div>343 </div>344 </div>345 346 <div class="gesture-bar"></div>347</div>348</body>349</html>