GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">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: #121212;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 130px;23    background: #7A7A7A;24    color: #FFFFFF;25    display: flex;26    align-items: center;27    padding: 0 36px;28    box-sizing: border-box;29  }30  .status-time { font-size: 48px; font-weight: 600; margin-right: 24px; }31  .status-icons { margin-left: auto; display: flex; align-items: center; gap: 22px; }32  .icon-circle { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.7); }33  .icon-battery svg { width: 58px; height: 28px; }34  .status-percent { font-size: 36px; margin-left: 12px; }35 36  /* Header */37  .header {38    position: absolute;39    top: 130px;40    left: 0;41    width: 1080px;42    height: 150px;43    background: #0E0E0E;44    color: #FFFFFF;45    display: flex;46    align-items: center;47    padding: 0 30px;48    box-sizing: border-box;49    border-bottom: 1px solid #1F1F1F;50  }51  .back-btn {52    width: 90px;53    height: 90px;54    display: inline-flex;55    align-items: center;56    justify-content: center;57    margin-right: 18px;58  }59  .header-title {60    font-size: 64px;61    letter-spacing: 6px;62    font-weight: 700;63  }64 65  /* Main layout */66  .main {67    position: absolute;68    top: 280px;69    left: 0;70    width: 1080px;71    height: 1820px;72    display: flex;73    background: #121212;74  }75 76  /* Left sidebar */77  .sidebar {78    width: 320px;79    background: #1A1A1A;80    border-right: 1px solid #222;81    padding: 26px 24px;82    box-sizing: border-box;83  }84  .sidebar h3 {85    margin: 22px 0;86    font-size: 44px;87    color: #CFCFCF;88    font-weight: 700;89  }90  .sidebar .active {91    display: inline-block;92    background: #2B3A0E;93    color: #E9F2CF;94    padding: 12px 22px;95    border-radius: 28px;96  }97 98  /* Right content list */99  .content {100    flex: 1;101    background: #141414;102    overflow-y: auto;103    padding: 8px 0;104  }105  .list-row {106    display: flex;107    align-items: center;108    padding: 28px 40px;109    border-top: 1px solid #242424;110    border-bottom: 1px solid #1C1C1C;111    color: #EDEDED;112  }113  .checkbox {114    width: 64px;115    height: 64px;116    border-radius: 16px;117    background: #EEF6D9;118    border: 2px solid #D9E3BC;119    margin-right: 26px;120    box-shadow: inset 0 0 0 6px rgba(255,255,255,0.35);121  }122  .brand-name {123    font-size: 42px;124    flex: 1;125  }126  .count {127    font-size: 36px;128    color: #9B9B9B;129  }130 131  /* Bottom action bar */132  .bottom-bar {133    position: absolute;134    bottom: 0;135    left: 0;136    width: 1080px;137    height: 270px;138    background: #2A2A2A;139    display: flex;140    align-items: center;141    padding: 0 50px;142    box-sizing: border-box;143    border-top: 1px solid #3A3A3A;144  }145  .reset-text {146    font-size: 56px;147    color: #DCE8E8;148    font-weight: 500;149  }150  .apply-btn {151    margin-left: auto;152    width: 360px;153    height: 120px;154    background: #6A6A6A;155    border-radius: 32px;156    display: flex;157    align-items: center;158    justify-content: center;159    color: #FFFFFF;160    font-size: 50px;161    font-weight: 700;162    box-shadow: 0 6px 12px rgba(0,0,0,0.3);163  }164</style>165</head>166<body>167<div id="render-target">168  <!-- Status Bar -->169  <div class="status-bar">170    <div class="status-time">10:49</div>171    <div class="icon-circle"></div>172    <div class="icon-circle"></div>173    <div class="icon-circle"></div>174    <div class="icon-circle"></div>175    <div class="status-icons">176      <!-- Do Not Disturb icon -->177      <svg width="40" height="40" viewBox="0 0 24 24" fill="#FFFFFF" style="opacity:.8">178        <circle cx="12" cy="12" r="10" fill="#FFFFFF" opacity=".2"></circle>179        <rect x="6" y="11" width="12" height="2" fill="#FFFFFF"></rect>180      </svg>181      <!-- WiFi icon -->182      <svg width="40" height="40" viewBox="0 0 24 24" fill="#FFFFFF" style="opacity:.9">183        <path d="M2 8c4-3 16-3 20 0l-2 2c-3-2-13-2-16 0L2 8zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 4l2 2 2-2-2-2-2 2z"></path>184      </svg>185      <!-- Battery -->186      <div class="icon-battery">187        <svg viewBox="0 0 54 24">188          <rect x="1" y="4" width="46" height="16" rx="3" ry="3" fill="none" stroke="#fff" stroke-width="2"/>189          <rect x="48" y="8" width="5" height="8" rx="1" fill="#fff"/>190          <rect x="4" y="6" width="36" height="12" rx="2" fill="#fff"/>191        </svg>192      </div>193      <div class="status-percent">95%</div>194    </div>195  </div>196 197  <!-- Header -->198  <div class="header">199    <div class="back-btn">200      <svg width="48" height="48" viewBox="0 0 24 24" fill="#FFFFFF">201        <path d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>202      </svg>203    </div>204    <div class="header-title">FILTERS</div>205  </div>206 207  <!-- Main Content -->208  <div class="main">209    <!-- Sidebar -->210    <div class="sidebar">211      <h3>Categories</h3>212      <h3>Discount</h3>213      <h3>Offers</h3>214      <h3 class="active">Brand</h3>215      <h3>Color</h3>216      <h3>Size</h3>217      <h3>Toe Shape</h3>218      <h3>Sport Type</h3>219      <h3>Closure</h3>220      <h3>Material</h3>221      <h3>Prints & Pattern</h3>222      <h3>No. Of Pcs</h3>223      <h3>Essential</h3>224      <h3>Lowest Priced</h3>225      <h3>Occasion</h3>226      <h3>Exclusive</h3>227    </div>228 229    <!-- Right list -->230    <div class="content">231      <div class="list-row">232        <div class="checkbox"></div>233        <div class="brand-name">BIRDE</div>234        <div class="count">(74)</div>235      </div>236      <div class="list-row">237        <div class="checkbox"></div>238        <div class="brand-name">Briczack</div>239        <div class="count">(2)</div>240      </div>241      <div class="list-row">242        <div class="checkbox"></div>243        <div class="brand-name">Champs</div>244        <div class="count">(166)</div>245      </div>246      <div class="list-row">247        <div class="checkbox"></div>248        <div class="brand-name">Clogger International</div>249        <div class="count">(4)</div>250      </div>251      <div class="list-row">252        <div class="checkbox"></div>253        <div class="brand-name">COLUMBUS</div>254        <div class="count">(239)</div>255      </div>256      <div class="list-row">257        <div class="checkbox"></div>258        <div class="brand-name">Combit</div>259        <div class="count">(214)</div>260      </div>261      <div class="list-row">262        <div class="checkbox"></div>263        <div class="brand-name">Crafts</div>264        <div class="count">(2)</div>265      </div>266      <div class="list-row">267        <div class="checkbox"></div>268        <div class="brand-name">Digiware</div>269        <div class="count">(1)</div>270      </div>271      <div class="list-row">272        <div class="checkbox"></div>273        <div class="brand-name">Dollphin</div>274        <div class="count">(65)</div>275      </div>276      <div class="list-row">277        <div class="checkbox"></div>278        <div class="brand-name">Duke</div>279        <div class="count">(4)</div>280      </div>281      <div class="list-row">282        <div class="checkbox"></div>283        <div class="brand-name">Eego Italy</div>284        <div class="count">(40)</div>285      </div>286      <div class="list-row">287        <div class="checkbox"></div>288        <div class="brand-name">Escaper Brand Shoe</div>289        <div class="count">(7)</div>290      </div>291      <div class="list-row">292        <div class="checkbox"></div>293        <div class="brand-name">ESMEE</div>294        <div class="count">(3)</div>295      </div>296      <div class="list-row">297        <div class="checkbox"></div>298        <div class="brand-name">exotique</div>299        <div class="count">(8)</div>300      </div>301      <div class="list-row">302        <div class="checkbox"></div>303        <div class="brand-name">FOGGY</div>304        <div class="count">(8)</div>305      </div>306      <div class="list-row">307        <div class="checkbox"></div>308        <div class="brand-name">Four star</div>309        <div class="count">(13)</div>310      </div>311      <div class="list-row">312        <div class="checkbox"></div>313        <div class="brand-name">Euro Sports by Red Chief</div>314        <div class="count">(215)</div>315      </div>316      <!-- Extra space to mimic long scroll -->317      <div style="height: 300px;"></div>318    </div>319  </div>320 321  <!-- Bottom Bar -->322  <div class="bottom-bar">323    <div class="reset-text">Reset all</div>324    <div class="apply-btn">Apply</div>325  </div>326</div>327</body>328</html>