GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>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: #ffffff;14 }15 16 /* Top status bar */17 .status-bar {18 height: 120px;19 padding: 0 40px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #41464d;24 font-size: 40px;25 }26 .status-right {27 display: flex;28 gap: 28px;29 align-items: center;30 }31 .icon-signal, .icon-battery {32 width: 44px;33 height: 44px;34 }35 36 /* Header row */37 .header {38 height: 120px;39 padding: 0 40px;40 display: flex;41 align-items: center;42 justify-content: space-between;43 border-bottom: 2px solid #e9edf2;44 }45 .header .title {46 font-weight: 700;47 color: #606770;48 font-size: 44px;49 }50 .header .clear {51 color: #E91E63;52 font-weight: 700;53 font-size: 40px;54 letter-spacing: 0.5px;55 }56 57 /* Content area */58 .content {59 display: grid;60 grid-template-columns: 360px 1fr;61 height: 1940px;62 }63 64 /* Left sidebar */65 .sidebar {66 background: #f3f4f6;67 border-right: 2px solid #e9edf2;68 }69 .side-item {70 height: 120px;71 display: flex;72 align-items: center;73 padding: 0 38px;74 border-bottom: 2px solid #e9edf2;75 color: #5a616b;76 font-size: 40px;77 }78 .side-item .badge {79 margin-left: auto;80 color: #8b9097;81 font-weight: 700;82 font-size: 36px;83 }84 .side-section-title {85 height: 120px;86 display: flex;87 align-items: center;88 padding: 0 38px;89 border-bottom: 2px solid #e9edf2;90 background: #ffffff;91 color: #222;92 font-weight: 700;93 font-size: 46px;94 }95 96 /* Right panel */97 .panel {98 background: #ffffff;99 }100 .select-all {101 height: 120px;102 display: flex;103 align-items: center;104 padding: 0 44px;105 gap: 28px;106 color: #212630;107 font-size: 44px;108 font-weight: 700;109 border-bottom: 2px solid #e9edf2;110 }111 .checkbox {112 width: 60px;113 height: 60px;114 border: 3px solid #cfd6de;115 border-radius: 10px;116 box-sizing: border-box;117 }118 .count {119 margin-left: 12px;120 color: #99a1aa;121 font-weight: 600;122 font-size: 38px;123 }124 125 .option-row {126 height: 120px;127 display: flex;128 align-items: center;129 padding: 0 44px;130 border-bottom: 2px solid #f0f2f5;131 gap: 28px;132 }133 .tick {134 width: 42px;135 height: 42px;136 }137 .option-label {138 color: #6a7079;139 font-size: 42px;140 flex: 1;141 }142 .option-count {143 color: #b4bcc5;144 font-size: 38px;145 font-weight: 600;146 }147 148 /* Bottom action bar */149 .bottom-bar {150 position: absolute;151 left: 0; right: 0; bottom: 110px;152 height: 140px;153 background: #ffffff;154 border-top: 2px solid #e9edf2;155 display: flex;156 align-items: center;157 justify-content: space-between;158 padding: 0 40px;159 }160 .bottom-left, .bottom-right {161 font-size: 44px;162 font-weight: 700;163 }164 .bottom-left { color: #4e5661; }165 .bottom-right { color: #E91E63; }166 .divider {167 position: absolute; left: 50%; top: 30px; bottom: 30px;168 width: 2px; background: #e9edf2;169 }170 171 /* OS navigation bar area */172 .os-nav {173 position: absolute;174 left: 0; right: 0; bottom: 0;175 height: 110px;176 background: #161a1f;177 }178 .home-pill {179 position: absolute;180 left: 50%;181 bottom: 34px;182 transform: translateX(-50%);183 width: 220px; height: 12px; border-radius: 12px;184 background: #c9cbd0;185 opacity: 0.8;186 }187</style>188</head>189<body>190<div id="render-target">191 <!-- Status bar -->192 <div class="status-bar">193 <div>9:00</div>194 <div class="status-right">195 <!-- simple mail icon as text to suggest notification area -->196 <svg class="icon-signal" viewBox="0 0 24 24">197 <path d="M3 18h18v2H3zM3 11h13v2H3zM3 4h8v2H3z" fill="#838a92"/>198 </svg>199 <svg class="icon-signal" viewBox="0 0 24 24">200 <path d="M2 18l10-10 10 10" stroke="#838a92" stroke-width="2" fill="none"/>201 </svg>202 <svg class="icon-battery" viewBox="0 0 26 24">203 <rect x="1" y="5" width="20" height="14" rx="2" ry="2" fill="none" stroke="#838a92" stroke-width="2"/>204 <rect x="3" y="7" width="14" height="10" fill="#838a92"/>205 <rect x="22" y="9" width="3" height="6" fill="#838a92"/>206 </svg>207 </div>208 </div>209 210 <!-- Header -->211 <div class="header">212 <div class="title">Filters</div>213 <div class="clear">CLEAR ALL</div>214 </div>215 216 <!-- Main content -->217 <div class="content">218 <!-- Left sidebar -->219 <div class="sidebar">220 <div class="side-item" style="background:#eef0f3;">Quick Filters</div>221 <div class="side-section-title">Size</div>222 <div class="side-item">Color</div>223 <div class="side-item">Brand <span class="badge">1</span></div>224 <div class="side-item">Country of Origin</div>225 <div class="side-item">Price Range</div>226 <div class="side-item">Discount</div>227 <div class="side-item">Rating</div>228 <div class="side-item">Delivery Time</div>229 <div class="side-item">Sole Material <span class="badge">1</span></div>230 <div class="side-item">Running Type</div>231 <div class="side-item">Warranty</div>232 <div class="side-item">Pronation for Running Shoes</div>233 <div class="side-item">Material</div>234 </div>235 236 <!-- Right panel -->237 <div class="panel">238 <div class="select-all">239 <div class="checkbox"></div>240 <div>Select All <span class="count">(29)</span></div>241 </div>242 243 <!-- Size options -->244 <div class="option-row">245 <svg class="tick" viewBox="0 0 24 24">246 <path d="M20 6L9 17l-5-5" stroke="#c7ced6" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>247 </svg>248 <div class="option-label">UK2.5</div>249 <div class="option-count">55</div>250 </div>251 <div class="option-row">252 <svg class="tick" viewBox="0 0 24 24">253 <path d="M20 6L9 17l-5-5" stroke="#c7ced6" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>254 </svg>255 <div class="option-label">UK3</div>256 <div class="option-count">12</div>257 </div>258 <div class="option-row">259 <svg class="tick" viewBox="0 0 24 24">260 <path d="M20 6L9 17l-5-5" stroke="#c7ced6" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>261 </svg>262 <div class="option-label">UK3.5</div>263 <div class="option-count">58</div>264 </div>265 <div class="option-row">266 <svg class="tick" viewBox="0 0 24 24">267 <path d="M20 6L9 17l-5-5" stroke="#c7ced6" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>268 </svg>269 <div class="option-label">UK4</div>270 <div class="option-count">11</div>271 </div>272 <div class="option-row">273 <svg class="tick" viewBox="0 0 24 24">274 <path d="M20 6L9 17l-5-5" stroke="#c7ced6" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>275 </svg>276 <div class="option-label">UK4.5</div>277 <div class="option-count">64</div>278 </div>279 <div class="option-row">280 <svg class="tick" viewBox="0 0 24 24">281 <path d="M20 6L9 17l-5-5" stroke="#c7ced6" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>282 </svg>283 <div class="option-label">UK5</div>284 <div class="option-count">13</div>285 </div>286 <div class="option-row">287 <svg class="tick" viewBox="0 0 24 24">288 <path d="M20 6L9 17l-5-5" stroke="#c7ced6" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>289 </svg>290 <div class="option-label">UK5.5</div>291 <div class="option-count">56</div>292 </div>293 <div class="option-row">294 <svg class="tick" viewBox="0 0 24 24">295 <path d="M20 6L9 17l-5-5" stroke="#c7ced6" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>296 </svg>297 <div class="option-label">UK6</div>298 <div class="option-count">77</div>299 </div>300 <div class="option-row">301 <svg class="tick" viewBox="0 0 24 24">302 <path d="M20 6L9 17l-5-5" stroke="#c7ced6" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>303 </svg>304 <div class="option-label">UK6.5</div>305 <div class="option-count">58</div>306 </div>307 <div class="option-row">308 <svg class="tick" viewBox="0 0 24 24">309 <path d="M20 6L9 17l-5-5" stroke="#c7ced6" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>310 </svg>311 <div class="option-label">UK7</div>312 <div class="option-count">71</div>313 </div>314 <div class="option-row">315 <svg class="tick" viewBox="0 0 24 24">316 <path d="M20 6L9 17l-5-5" stroke="#c7ced6" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>317 </svg>318 <div class="option-label">UK7.5</div>319 <div class="option-count">48</div>320 </div>321 <div class="option-row">322 <svg class="tick" viewBox="0 0 24 24">323 <path d="M20 6L9 17l-5-5" stroke="#c7ced6" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>324 </svg>325 <div class="option-label">UK8</div>326 <div class="option-count">69</div>327 </div>328 <div class="option-row">329 <svg class="tick" viewBox="0 0 24 24">330 <path d="M20 6L9 17l-5-5" stroke="#c7ced6" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>331 </svg>332 <div class="option-label">UK8.5</div>333 <div class="option-count">3</div>334 </div>335 <!-- More lines can continue similarly... -->336 </div>337 </div>338 339 <!-- Bottom action bar -->340 <div class="bottom-bar">341 <div class="bottom-left">CLOSE</div>342 <div class="divider"></div>343 <div class="bottom-right">APPLY</div>344 </div>345 346 <!-- OS navigation area -->347 <div class="os-nav">348 <div class="home-pill"></div>349 </div>350</div>351</body>352</html>