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 }15 16 /* Status bar */17 .status-bar {18 height: 120px;19 background: #E9E9EB;20 color: #333;21 display: flex;22 align-items: center;23 padding: 0 36px;24 font-size: 40px;25 letter-spacing: 1px;26 }27 .status-right {28 margin-left: auto;29 display: flex;30 gap: 26px;31 align-items: center;32 }33 .icon-wifi, .icon-battery { width: 48px; height: 48px; }34 35 /* Header */36 .header {37 height: 150px;38 background: #FFFFFF;39 border-bottom: 1px solid #E5E5E7;40 display: flex;41 align-items: center;42 padding: 0 32px;43 }44 .back-btn {45 width: 84px; height: 84px;46 display: flex; align-items: center; justify-content: center;47 margin-right: 12px;48 }49 .header-title { font-size: 56px; font-weight: 700; color: #222; }50 .clear-link {51 margin-left: auto;52 color: #1E43FF;53 font-size: 44px;54 font-weight: 600;55 }56 57 /* Main area */58 .main {59 position: absolute;60 top: 270px; /* 120 + 150 */61 bottom: 310px; /* space for action bar + navbar */62 left: 0; right: 0;63 display: flex;64 background: #FFFFFF;65 }66 .sidebar {67 width: 300px;68 background: #F2F3F6;69 border-right: 1px solid #E3E4E8;70 height: 100%;71 padding-top: 24px;72 }73 .side-item {74 padding: 32px 28px;75 font-size: 42px;76 color: #111;77 border-radius: 8px;78 }79 .side-item + .side-item { margin-top: 8px; }80 .side-item.selected {81 position: relative;82 background: #EDEDFE;83 }84 .side-item.selected .tick {85 position: absolute;86 right: 24px; top: 50%;87 transform: translateY(-50%);88 width: 26px; height: 26px;89 }90 91 .content {92 flex: 1;93 background: #FFFFFF;94 padding: 40px 40px;95 }96 .content .section-label {97 font-size: 40px;98 color: #5B5CF6;99 margin-bottom: 24px;100 font-weight: 600;101 }102 .checklist { margin-top: 24px; }103 .check-row {104 display: flex; align-items: center;105 gap: 28px;106 margin: 34px 0;107 }108 .box {109 width: 60px; height: 60px;110 border: 4px solid #1E1E1E;111 border-radius: 12px;112 box-sizing: border-box;113 }114 .check-text {115 font-size: 48px;116 color: #222;117 }118 119 /* Bottom action bar */120 .action-bar {121 position: absolute;122 left: 0; right: 0; bottom: 180px; /* above nav */123 height: 130px;124 background: #FFFFFF;125 border-top: 1px solid #E5E5E7;126 display: flex;127 align-items: center;128 padding: 0 36px;129 }130 .result-text {131 font-size: 44px;132 color: #222;133 font-weight: 700;134 }135 .result-sub {136 display: block;137 font-size: 32px;138 color: #7A7A7A;139 font-weight: 500;140 margin-top: 6px;141 }142 .apply-btn {143 margin-left: auto;144 width: 420px; height: 110px;145 background: #6048F7;146 color: #FFF;147 font-size: 48px;148 font-weight: 700;149 border-radius: 18px;150 display: flex; align-items: center; justify-content: center;151 }152 153 /* Bottom navigation */154 .nav {155 position: absolute;156 left: 0; right: 0; bottom: 0;157 height: 180px;158 background: #FFFFFF;159 border-top: 1px solid #E5E5E7;160 display: flex;161 justify-content: space-around;162 align-items: center;163 }164 .nav .tab {165 width: 180px; height: 150px;166 display: flex; flex-direction: column;167 align-items: center; justify-content: center;168 position: relative;169 color: #5F5F61;170 }171 .tab .label { font-size: 34px; margin-top: 10px; }172 .tab svg { width: 56px; height: 56px; }173 .tab.active { color: #5B5CF6; }174 .tab.active::before {175 content: "";176 position: absolute;177 top: -8px;178 width: 120px;179 height: 8px;180 background: #5B5CF6;181 border-radius: 4px;182 }183 .dot {184 position: absolute;185 right: 40px;186 top: 18px;187 width: 16px;188 height: 16px;189 background: #FF4040;190 border-radius: 50%;191 }192</style>193</head>194<body>195<div id="render-target">196 197 <!-- Status Bar -->198 <div class="status-bar">199 9:19200 <div class="status-right">201 <!-- wifi -->202 <svg class="icon-wifi" viewBox="0 0 24 24" fill="#555">203 <path d="M12 20.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM4 11.5l1.4 1.4A9 9 0 0 1 18.6 13l1.4-1.5A11 11 0 0 0 4 11.5zm4-4l1.4 1.4a6 6 0 0 1 8.2 0L19 7.5A8 8 0 0 0 8 7.5z"/>204 </svg>205 <!-- battery -->206 <svg class="icon-battery" viewBox="0 0 24 24" fill="#555">207 <rect x="2" y="7" width="18" height="10" rx="2"></rect>208 <rect x="20" y="10" width="2" height="4"></rect>209 </svg>210 </div>211 </div>212 213 <!-- Header -->214 <div class="header">215 <div class="back-btn">216 <svg viewBox="0 0 24 24" width="52" height="52" stroke="#1E1E1E" fill="none" stroke-width="2">217 <path d="M15 6l-6 6 6 6"/>218 </svg>219 </div>220 <div class="header-title">Filters</div>221 <div class="clear-link">Clear Filters</div>222 </div>223 224 <!-- Main Content -->225 <div class="main">226 <!-- Sidebar -->227 <div class="sidebar">228 <div class="side-item">Gender</div>229 <div class="side-item">Category</div>230 <div class="side-item selected">231 Deliver At232 <svg class="tick" viewBox="0 0 24 24" fill="#5B5CF6">233 <path d="M9.5 16.2L4.8 11.5 3 13.3l6.5 6.5L21 8.3 19.2 6.5z"/>234 </svg>235 </div>236 <div class="side-item">Budget</div>237 <div class="side-item">Price</div>238 <div class="side-item">Brand</div>239 <div class="side-item">Customer<br>Ratings</div>240 <div class="side-item">Color</div>241 <div class="side-item">Discount</div>242 <div class="side-item">Offers</div>243 <div class="side-item">Availability</div>244 </div>245 246 <!-- Right Content -->247 <div class="content">248 <div class="section-label">Gender</div>249 <div class="checklist">250 <div class="check-row">251 <div class="box"></div>252 <div class="check-text">Men</div>253 </div>254 <div class="check-row">255 <div class="box"></div>256 <div class="check-text">Women</div>257 </div>258 <div class="check-row">259 <div class="box"></div>260 <div class="check-text">Boys</div>261 </div>262 <div class="check-row">263 <div class="box"></div>264 <div class="check-text">Girls</div>265 </div>266 <div class="check-row">267 <div class="box"></div>268 <div class="check-text">Boys & Girls</div>269 </div>270 </div>271 </div>272 </div>273 274 <!-- Bottom Action Bar -->275 <div class="action-bar">276 <div>277 <div class="result-text">104,207</div>278 <span class="result-sub">products found</span>279 </div>280 <div class="apply-btn">Apply</div>281 </div>282 283 <!-- Bottom Navigation -->284 <div class="nav">285 <div class="tab">286 <svg viewBox="0 0 24 24" fill="currentColor">287 <path d="M12 3l9 8h-3v9H6v-9H3z"/>288 </svg>289 <div class="label">Home</div>290 </div>291 <div class="tab active">292 <svg viewBox="0 0 24 24" fill="currentColor">293 <path d="M10 18a8 8 0 1 1 5.3-14.1A8 8 0 0 1 10 18zm9 3l-5-5"/>294 </svg>295 <div class="label">Search</div>296 </div>297 <div class="tab">298 <span class="dot"></span>299 <svg viewBox="0 0 24 24" fill="currentColor">300 <path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/>301 </svg>302 <div class="label">Categories</div>303 </div>304 <div class="tab">305 <svg viewBox="0 0 24 24" fill="currentColor">306 <path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5z"/>307 </svg>308 <div class="label">Account</div>309 </div>310 <div class="tab">311 <svg viewBox="0 0 24 24" fill="currentColor">312 <path d="M7 4h-2l-1 2H1v2h2l3 9h12l3-9h2V6h-3l-1-2h-2l1 2H8l-1-2zm3 16a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>313 </svg>314 <div class="label">Cart</div>315 </div>316 </div>317 318</div>319</body>320</html>