GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Filters Screen</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: #101010;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: #6f6f6f;24    color: #fff;25    display: flex;26    align-items: center;27    padding: 0 36px;28    box-sizing: border-box;29    font-weight: 600;30    letter-spacing: 1px;31  }32  .status-bar .right {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 18px;37  }38  .sb-icon {39    width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.7);40  }41 42  /* App header */43  .app-header {44    position: absolute;45    top: 120px;46    left: 0;47    width: 1080px;48    height: 150px;49    background: #181818;50    color: #eee;51    display: flex;52    align-items: center;53    padding: 0 32px;54    box-sizing: border-box;55  }56  .back-btn {57    width: 64px;58    height: 64px;59    display: inline-flex;60    align-items: center;61    justify-content: center;62    margin-right: 24px;63  }64  .app-title {65    font-size: 48px;66    letter-spacing: 4px;67    font-weight: 700;68  }69 70  /* Main layout */71  .content {72    position: absolute;73    top: 270px; /* below header */74    left: 0;75    width: 1080px;76    bottom: 240px; /* above bottom bar */77  }78 79  .left-nav {80    position: absolute;81    top: 0;82    left: 0;83    width: 330px;84    bottom: 0;85    background: #202020;86    padding-top: 10px;87    box-sizing: border-box;88    overflow: hidden;89    border-right: 1px solid #2a2a2a;90  }91  .nav-item {92    color: #bdbdbd;93    font-size: 40px;94    line-height: 78px;95    padding: 0 32px;96    position: relative;97  }98  .nav-item.active {99    color: #ffffff;100    font-weight: 700;101    z-index: 2;102  }103  .nav-item.active::before {104    content: "";105    position: absolute;106    left: 16px;107    top: 16px;108    width: 290px;109    height: 56px;110    background: #2c3a12; /* olive highlight */111    border-radius: 32px;112    z-index: -1;113  }114 115  .right-panel {116    position: absolute;117    left: 330px;118    right: 0;119    top: 0;120    bottom: 0;121    background: #141414;122    overflow: hidden;123  }124  .list {125    position: absolute;126    left: 0; right: 0; top: 0; bottom: 0;127    overflow-y: hidden;128    padding-top: 6px;129  }130  .row {131    display: flex;132    align-items: center;133    height: 118px;134    padding: 0 40px;135    box-sizing: border-box;136    border-bottom: 1px solid #1f1f1f;137    color: #e6e6e6;138    font-size: 40px;139  }140  .check {141    width: 60px; height: 60px;142    border-radius: 12px;143    border: 2px solid #cfe3b8;144    background: #eef7e8;145    margin-right: 24px;146    box-shadow: 0 0 0 3px rgba(185, 230, 160, 0.12) inset;147  }148  .count {149    margin-left: auto;150    color: #9e9e9e;151    font-size: 36px;152  }153 154  /* Bottom bar */155  .bottom-bar {156    position: absolute;157    left: 0;158    bottom: 0;159    width: 1080px;160    height: 240px;161    background: #151515;162    border-top: 1px solid #242424;163    display: flex;164    align-items: center;165    padding: 0 40px;166    box-sizing: border-box;167  }168  .reset {169    color: #cfe9e9;170    font-size: 46px;171    font-weight: 500;172  }173  .apply-btn {174    margin-left: auto;175    background: #6d6d6d;176    color: #fff;177    font-size: 46px;178    padding: 36px 120px;179    border-radius: 28px;180    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.08);181  }182</style>183</head>184<body>185<div id="render-target">186  <!-- Status bar -->187  <div class="status-bar">188    <div style="font-size:44px;">10:50</div>189    <div class="right">190      <div class="sb-icon"></div>191      <div class="sb-icon"></div>192      <div class="sb-icon"></div>193      <div style="font-size:38px;">95%</div>194    </div>195  </div>196 197  <!-- Header -->198  <div class="app-header">199    <div class="back-btn">200      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">201        <path d="M15 18L9 12L15 6" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>202      </svg>203    </div>204    <div class="app-title">FILTERS</div>205  </div>206 207  <!-- Main content -->208  <div class="content">209    <!-- Left navigation -->210    <div class="left-nav">211      <div class="nav-item">Categories</div>212      <div class="nav-item">Discount</div>213      <div class="nav-item">Offers</div>214      <div class="nav-item active">Brand</div>215      <div class="nav-item">Color</div>216      <div class="nav-item">Size</div>217      <div class="nav-item">Toe Shape</div>218      <div class="nav-item">Sport Type</div>219      <div class="nav-item">Closure</div>220      <div class="nav-item">Material</div>221      <div class="nav-item">Prints &amp; Pattern</div>222      <div class="nav-item">No. Of Pcs</div>223      <div class="nav-item">Essential</div>224      <div class="nav-item">Lowest Priced</div>225      <div class="nav-item">Occasion</div>226      <div class="nav-item">Exclusive</div>227    </div>228 229    <!-- Right side list -->230    <div class="right-panel">231      <div class="list">232        <div class="row"><div class="check"></div><div>Pro</div><div class="count">(13)</div></div>233        <div class="row"><div class="check"></div><div>PROPET</div><div class="count">(1)</div></div>234        <div class="row"><div class="check"></div><div>Ryko</div><div class="count">(13)</div></div>235        <div class="row"><div class="check"></div><div>Sharon</div><div class="count">(3)</div></div>236        <div class="row"><div class="check"></div><div>Shoe Island</div><div class="count">(10)</div></div>237        <div class="row"><div class="check"></div><div>Shoes Kingdom</div><div class="count">(5)</div></div>238        <div class="row"><div class="check"></div><div>SHUAN</div><div class="count">(5)</div></div>239        <div class="row"><div class="check"></div><div>Sparx</div><div class="count">(88)</div></div>240        <div class="row"><div class="check"></div><div>Spazer</div><div class="count">(7)</div></div>241        <div class="row"><div class="check"></div><div>Sspoton</div><div class="count">(124)</div></div>242        <div class="row"><div class="check"></div><div>Staed</div><div class="count">(6)</div></div>243        <div class="row"><div class="check"></div><div>STRIKER</div><div class="count">(2)</div></div>244        <div class="row"><div class="check"></div><div>Tan Toe</div><div class="count">(2)</div></div>245        <div class="row"><div class="check"></div><div>UCLA</div><div class="count">(22)</div></div>246        <div class="row"><div class="check"></div><div>V-Mart</div><div class="count">(132)</div></div>247        <div class="row"><div class="check"></div><div>VATELIO</div><div class="count">(23)</div></div>248        <div class="row"><div class="check"></div><div>VITEGRA</div><div class="count">(13)</div></div>249      </div>250    </div>251  </div>252 253  <!-- Bottom bar -->254  <div class="bottom-bar">255    <div class="reset">Reset all</div>256    <div class="apply-btn">Apply</div>257  </div>258</div>259</body>260</html>