GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Filters UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13    box-sizing: border-box;14  }15 16  /* Status bar */17  .status-bar {18    height: 110px;19    background: #F3F3F3;20    display: flex;21    align-items: center;22    justify-content: space-between;23    padding: 0 36px;24    color: #3c3c3c;25    font-size: 40px;26    box-sizing: border-box;27  }28  .status-icons {29    display: flex;30    align-items: center;31    gap: 24px;32  }33  .status-icons .battery {34    width: 60px; height: 34px; border: 4px solid #666; border-radius: 6px; position: relative;35  }36  .status-icons .battery::after {37    content: ""; position: absolute; right: -10px; top: 10px; width: 8px; height: 14px; background: #666; border-radius: 2px;38  }39  .battery .level { position: absolute; left: 4px; top: 4px; height: 22px; width: 36px; background: #6c6c6c; border-radius: 3px; }40  .status-icons .dot { width: 10px; height: 10px; background: #666; border-radius: 50%; }41  .status-icons .signal {42    width: 40px; height: 26px; position: relative;43  }44  .signal span { position: absolute; bottom: 0; width: 6px; background: #666; border-radius: 2px; }45  .signal span:nth-child(1){ left:0; height:8px;}46  .signal span:nth-child(2){ left:10px; height:12px;}47  .signal span:nth-child(3){ left:20px; height:18px;}48  .signal span:nth-child(4){ left:30px; height:24px;}49 50  /* App bar */51  .app-bar {52    height: 140px;53    display: flex;54    align-items: center;55    padding: 0 36px;56    box-sizing: border-box;57    border-bottom: 1px solid #e6e6e6;58  }59  .back-btn {60    width: 90px; height: 90px; display: flex; align-items: center; justify-content: center;61  }62  .app-title {63    font-size: 64px;64    font-weight: 600;65    color: #222;66    margin-left: 12px;67  }68  .app-spacer { flex: 1; }69  .clear-link {70    font-size: 44px;71    color: #2E48FF;72    font-weight: 600;73  }74 75  /* Main content */76  .main {77    position: absolute;78    top: 250px; /* status(110)+appbar(140) */79    left: 0;80    width: 1080px;81    height: 1760px; /* remaining area above footers */82    display: flex;83  }84 85  .sidebar {86    width: 300px;87    background: #F1F2F5;88    border-right: 1px solid #e5e5e5;89    padding-top: 10px;90    box-sizing: border-box;91  }92  .filter-item {93    position: relative;94    padding: 38px 24px;95    font-size: 40px;96    color: #222;97    border-radius: 8px;98  }99  .filter-item.active {100    background: #EDEEF6;101    font-weight: 600;102  }103  .filter-item .count {104    position: absolute;105    right: 20px;106    top: 50%;107    transform: translateY(-50%);108    color: #3D4BFF;109    font-weight: 700;110    font-size: 40px;111  }112 113  .content {114    flex: 1;115    background: #ffffff;116    padding: 40px 60px;117    box-sizing: border-box;118  }119  .price-option {120    display: flex;121    align-items: center;122    margin: 48px 0;123    font-size: 44px;124    color: #222;125  }126  .price-option .cb {127    width: 60px; height: 60px; border: 4px solid #4a4a4a; border-radius: 16px; margin-right: 28px;128  }129 130  /* Apply bar */131  .apply-bar {132    position: absolute;133    left: 0;134    bottom: 200px; /* sits above bottom nav */135    width: 100%;136    height: 180px;137    background: #fff;138    border-top: 1px solid #e6e6e6;139    display: flex;140    align-items: center;141    justify-content: space-between;142    padding: 0 36px;143    box-sizing: border-box;144  }145  .count-block {146    display: flex; flex-direction: column;147  }148  .count-block .num {149    font-size: 60px; font-weight: 700; color: #111;150  }151  .count-block .sub {152    font-size: 36px; color: #777;153    margin-top: 8px;154  }155  .apply-btn {156    width: 520px; height: 140px; background: #5B45F7; color: #fff; font-size: 48px; font-weight: 700;157    display: flex; align-items: center; justify-content: center; border-radius: 22px;158  }159 160  /* Bottom navigation */161  .bottom-nav {162    position: absolute;163    left: 0;164    bottom: 0;165    width: 100%;166    height: 200px;167    background: #ffffff;168    border-top: 1px solid #dcdcdc;169    display: flex;170    align-items: center;171    justify-content: space-around;172  }173  .nav-item {174    width: 200px; height: 160px;175    display: flex; flex-direction: column; align-items: center; justify-content: center;176    color: #555; font-size: 36px;177    position: relative;178  }179  .nav-item.active { color: #5B45F7; font-weight: 700; }180  .nav-icon { width: 64px; height: 64px; margin-bottom: 10px; }181  .notif-dot {182    position: absolute; right: 58px; top: 26px; width: 18px; height: 18px; background: #ff4d4d; border-radius: 50%;183  }184</style>185</head>186<body>187<div id="render-target">188 189  <!-- Status bar -->190  <div class="status-bar">191    <div>2:28</div>192    <div class="status-icons">193      <div class="signal">194        <span></span><span></span><span></span><span></span>195      </div>196      <div class="dot"></div>197      <div class="battery"><div class="level"></div></div>198      <div style="font-size:34px; color:#666;">69%</div>199    </div>200  </div>201 202  <!-- App bar -->203  <div class="app-bar">204    <div class="back-btn">205      <svg width="48" height="48" viewBox="0 0 24 24">206        <path d="M15 19L8 12l7-7" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>207      </svg>208    </div>209    <div class="app-title">Filters</div>210    <div class="app-spacer"></div>211    <div class="clear-link">Clear Filters</div>212  </div>213 214  <!-- Main content -->215  <div class="main">216    <!-- Left sidebar -->217    <div class="sidebar">218      <div class="filter-item active">Price</div>219      <div class="filter-item">Brand <span class="count">1</span></div>220      <div class="filter-item">Deliver At</div>221      <div class="filter-item">Gender</div>222      <div class="filter-item">Discount</div>223      <div class="filter-item">Size - UK/India</div>224      <div class="filter-item">Theme</div>225      <div class="filter-item">Occasion <span class="count">1</span></div>226      <div class="filter-item">Outer Material</div>227      <div class="filter-item">Color</div>228      <div class="filter-item">Customer Ratings</div>229      <div class="filter-item">Type of Shoes</div>230    </div>231 232    <!-- Right content -->233    <div class="content">234      <div class="price-option"><div class="cb"></div> Rs. 499 and below</div>235      <div class="price-option"><div class="cb"></div> Rs. 500 - Rs. 1500</div>236      <div class="price-option"><div class="cb"></div> Rs. 1500 - Rs. 1999</div>237      <div class="price-option"><div class="cb"></div> Rs. 2000 - Rs. 2999</div>238      <div class="price-option"><div class="cb"></div> Rs. 3000 and above</div>239    </div>240  </div>241 242  <!-- Apply bar -->243  <div class="apply-bar">244    <div class="count-block">245      <div class="num">5,791</div>246      <div class="sub">products found</div>247    </div>248    <div class="apply-btn">Apply</div>249  </div>250 251  <!-- Bottom navigation -->252  <div class="bottom-nav">253    <div class="nav-item">254      <svg class="nav-icon" viewBox="0 0 24 24">255        <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-4v-6H9v6H5a2 2 0 0 1-2-2z" fill="none" stroke="#777" stroke-width="2" stroke-linejoin="round"/>256      </svg>257      Home258    </div>259    <div class="nav-item active">260      <svg class="nav-icon" viewBox="0 0 24 24">261        <circle cx="11" cy="11" r="7" fill="none" stroke="#5B45F7" stroke-width="2"/>262        <path d="M20 20l-4-4" stroke="#5B45F7" stroke-width="2" stroke-linecap="round"/>263      </svg>264      Search265    </div>266    <div class="nav-item">267      <span class="notif-dot"></span>268      <svg class="nav-icon" viewBox="0 0 24 24">269        <rect x="3" y="3" width="8" height="8" fill="none" stroke="#777" stroke-width="2"/>270        <rect x="13" y="3" width="8" height="8" fill="none" stroke="#777" stroke-width="2"/>271        <rect x="3" y="13" width="8" height="8" fill="none" stroke="#777" stroke-width="2"/>272        <rect x="13" y="13" width="8" height="8" fill="none" stroke="#777" stroke-width="2"/>273      </svg>274      Categories275    </div>276    <div class="nav-item">277      <svg class="nav-icon" viewBox="0 0 24 24">278        <circle cx="12" cy="8" r="4" fill="none" stroke="#777" stroke-width="2"/>279        <path d="M4 21c0-4 4-7 8-7s8 3 8 7" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round"/>280      </svg>281      Account282    </div>283    <div class="nav-item">284      <svg class="nav-icon" viewBox="0 0 24 24">285        <path d="M3 6h3l2 9h10l2-7H8" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>286        <circle cx="9" cy="20" r="2" fill="none" stroke="#777" stroke-width="2"/>287        <circle cx="18" cy="20" r="2" fill="none" stroke="#777" stroke-width="2"/>288      </svg>289      Cart290    </div>291  </div>292 293</div>294</body>295</html>