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 - Brand List</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #121212;15 color: #EDEDED;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 120px;25 background: #6E6E6E;26 color: #fff;27 display: flex;28 align-items: center;29 padding: 0 36px;30 font-size: 40px;31 letter-spacing: 1px;32 }33 .status-right {34 margin-left: auto;35 display: flex;36 align-items: center;37 gap: 28px;38 }39 .status-icon { width: 44px; height: 44px; opacity: 0.9; }40 41 /* Header */42 .header {43 position: absolute;44 top: 120px;45 left: 0;46 width: 1080px;47 height: 140px;48 background: #171717;49 display: flex;50 align-items: center;51 padding: 0 30px;52 box-sizing: border-box;53 border-bottom: 1px solid #1F1F1F;54 }55 .back {56 width: 64px; height: 64px; margin-right: 18px;57 }58 .title {59 font-size: 60px;60 letter-spacing: 6px;61 font-weight: 600;62 color: #EDEDED;63 }64 65 /* Layout */66 .content {67 position: absolute;68 top: 260px;69 left: 0;70 width: 1080px;71 height: 1720px;72 display: grid;73 grid-template-columns: 360px 1fr;74 background: #151515;75 }76 77 /* Left filters list */78 .sidebar {79 background: #202020;80 padding: 24px 30px;81 box-sizing: border-box;82 border-right: 1px solid #1B1B1B;83 }84 .filter-item {85 color: #BEBEBE;86 font-size: 44px;87 line-height: 96px;88 margin: 8px 0;89 }90 .filter-item.active {91 color: #EDEDED;92 position: relative;93 }94 .filter-item.active::before {95 content: "";96 position: absolute;97 left: -6px;98 top: 22px;99 width: 280px;100 height: 72px;101 background: #2C3A0E;102 border-radius: 36px;103 z-index: -1;104 }105 106 /* Right list */107 .brand-wrap {108 background: #121212;109 padding: 26px 26px 0 26px;110 box-sizing: border-box;111 }112 .brand-card {113 background: #161616;114 border: 1px solid #0E0E0E;115 border-radius: 12px;116 height: 1660px;117 overflow: hidden;118 box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset;119 }120 .row {121 display: grid;122 grid-template-columns: 120px 1fr 160px;123 align-items: center;124 height: 120px;125 padding: 0 24px;126 box-sizing: border-box;127 border-bottom: 1px solid #1F1F1F;128 color: #EAEAEA;129 }130 .checkbox {131 width: 72px; height: 72px;132 border-radius: 16px;133 background: #F2FFD9;134 border: 2px solid #C7D6A8;135 box-shadow: inset 0 0 0 10px rgba(240,255,210,0.5);136 }137 .brand-name { font-size: 44px; color: #D9D9D9; }138 .count {139 text-align: right;140 font-size: 40px;141 color: #8E8E8E;142 }143 144 /* Bottom action bar */145 .bottom-bar {146 position: absolute;147 left: 0;148 bottom: 0;149 width: 1080px;150 height: 280px;151 background: #222222;152 display: flex;153 align-items: center;154 padding: 0 40px;155 box-sizing: border-box;156 border-top: 1px solid #1A1A1A;157 }158 .reset {159 font-size: 52px;160 color: #CFE9E7;161 }162 .apply-btn {163 margin-left: auto;164 width: 420px;165 height: 140px;166 background: #7A7A7A;167 color: #FFFFFF;168 border-radius: 28px;169 font-size: 52px;170 display: flex;171 align-items: center;172 justify-content: center;173 }174</style>175</head>176<body>177<div id="render-target">178 <!-- Status bar -->179 <div class="status-bar">180 <div>10:49</div>181 <div class="status-right">182 <!-- simple icons -->183 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#fff" opacity="0.35"/></svg>184 <svg class="status-icon" viewBox="0 0 24 24"><rect x="3" y="10" width="18" height="4" fill="#fff"/></svg>185 <svg class="status-icon" viewBox="0 0 24 24"><path d="M3 18h18v2H3zM6 14h12v2H6zM9 10h6v2H9z" fill="#fff" opacity="0.85"/></svg>186 <!-- Battery -->187 <svg class="status-icon" viewBox="0 0 28 24">188 <rect x="2" y="4" width="22" height="16" rx="3" ry="3" fill="none" stroke="#fff" stroke-width="2"/>189 <rect x="4" y="6" width="18" height="12" fill="#fff"/>190 <rect x="24" y="9" width="3" height="6" fill="#fff"/>191 </svg>192 <span style="font-size:40px;">95%</span>193 </div>194 </div>195 196 <!-- Header -->197 <div class="header">198 <svg class="back" viewBox="0 0 24 24">199 <path d="M15 19L8 12l7-7" stroke="#EDEDED" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>200 </svg>201 <div class="title">FILTERS</div>202 </div>203 204 <!-- Main Content -->205 <div class="content">206 <!-- Sidebar -->207 <div class="sidebar">208 <div class="filter-item">Categories</div>209 <div class="filter-item">Discount</div>210 <div class="filter-item">Offers</div>211 <div class="filter-item active">Brand</div>212 <div class="filter-item">Color</div>213 <div class="filter-item">Size</div>214 <div class="filter-item">Toe Shape</div>215 <div class="filter-item">Sport Type</div>216 <div class="filter-item">Closure</div>217 <div class="filter-item">Material</div>218 <div class="filter-item">Prints & Pattern</div>219 <div class="filter-item">No. Of Pcs</div>220 <div class="filter-item">Essential</div>221 <div class="filter-item">Lowest Priced</div>222 <div class="filter-item">Occasion</div>223 <div class="filter-item">Exclusive</div>224 </div>225 226 <!-- Brand list -->227 <div class="brand-wrap">228 <div class="brand-card">229 <div class="row">230 <div class="checkbox"></div>231 <div class="brand-name">JUMP USA</div>232 <div class="count">(11)</div>233 </div>234 <div class="row">235 <div class="checkbox"></div>236 <div class="brand-name">Kangarooz</div>237 <div class="count">(22)</div>238 </div>239 <div class="row">240 <div class="checkbox"></div>241 <div class="brand-name">Kangarooz</div>242 <div class="count">(23)</div>243 </div>244 <div class="row">245 <div class="checkbox"></div>246 <div class="brand-name">Khadims</div>247 <div class="count">(102)</div>248 </div>249 <div class="row">250 <div class="checkbox"></div>251 <div class="brand-name">Kwiclo</div>252 <div class="count">(2)</div>253 </div>254 <div class="row">255 <div class="checkbox"></div>256 <div class="brand-name">Lavista</div>257 <div class="count">(3)</div>258 </div>259 <div class="row">260 <div class="checkbox"></div>261 <div class="brand-name">Levanse</div>262 <div class="count">(4)</div>263 </div>264 <div class="row">265 <div class="checkbox"></div>266 <div class="brand-name">LOOK & HOOK</div>267 <div class="count">(85)</div>268 </div>269 <div class="row">270 <div class="checkbox"></div>271 <div class="brand-name">metmo</div>272 <div class="count">(1)</div>273 </div>274 <div class="row">275 <div class="checkbox"></div>276 <div class="brand-name">Mochites</div>277 <div class="count">(2)</div>278 </div>279 <div class="row">280 <div class="checkbox"></div>281 <div class="brand-name">Mr.Wonker</div>282 <div class="count">(10)</div>283 </div>284 <div class="row">285 <div class="checkbox"></div>286 <div class="brand-name">MUTAQINOTI</div>287 <div class="count">(19)</div>288 </div>289 <div class="row">290 <div class="checkbox"></div>291 <div class="brand-name">Off Limits</div>292 <div class="count">(180)</div>293 </div>294 <div class="row">295 <div class="checkbox"></div>296 <div class="brand-name">Pro</div>297 <div class="count">(13)</div>298 </div>299 <div class="row">300 <div class="checkbox"></div>301 <div class="brand-name">PROPET</div>302 <div class="count">(1)</div>303 </div>304 <div class="row">305 <div class="checkbox"></div>306 <div class="brand-name">Ryko</div>307 <div class="count">(13)</div>308 </div>309 <div class="row">310 <div class="checkbox"></div>311 <div class="brand-name">Sharon</div>312 <div class="count">(3)</div>313 </div>314 </div>315 </div>316 </div>317 318 <!-- Bottom actions -->319 <div class="bottom-bar">320 <div class="reset">Reset all</div>321 <div class="apply-btn">Apply</div>322 </div>323</div>324</body>325</html>