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: #ffffff;14  }15  /* Header */16  .header {17    position: absolute;18    top: 96px; /* leave a little space as if status bar */19    left: 0;20    right: 0;21    height: 140px;22    display: flex;23    align-items: center;24    padding: 0 36px;25  }26  .header .title {27    font-size: 48px;28    color: #222;29    margin-left: 18px;30  }31  .header .right-action {32    margin-left: auto;33    font-size: 40px;34    color: #111;35  }36  /* Main layout */37  .main {38    position: absolute;39    top: 236px; /* below header */40    left: 0;41    right: 0;42    bottom: 280px; /* leave room for footer */43    display: flex;44  }45  .left-panel {46    width: 330px;47    background: #ECEFF3;48    padding-top: 24px;49    overflow: hidden;50    border-right: 1px solid #e0e0e0;51  }52  .left-item {53    padding: 26px 28px;54    font-size: 34px;55    color: #222;56    height: 120px;57    display: flex;58    align-items: center;59    position: relative;60  }61  .left-item.blue { color: #2962FF; }62  .left-item .tick {63    position: absolute;64    right: 20px;65    width: 34px; height: 34px;66  }67  .content {68    flex: 1;69    padding: 30px 36px;70  }71  /* Search bar */72  .search-bar {73    height: 110px;74    border: 1px solid #DADCE0;75    border-radius: 10px;76    display: flex;77    align-items: center;78    padding: 0 24px;79    color: #8a8a8a;80    font-size: 36px;81    margin-bottom: 20px;82  }83  .brand-list {84    margin-top: 20px;85  }86  .brand-item {87    display: flex;88    align-items: center;89    height: 110px;90    font-size: 36px;91    color: #222;92  }93  .checkbox {94    width: 54px;95    height: 54px;96    border: 3px solid #222;97    border-radius: 8px;98    margin-right: 24px;99    box-sizing: border-box;100  }101  .view-more {102    margin-top: 8px;103    font-size: 38px;104    color: #2962FF;105    font-weight: 600;106  }107  /* Footer */108  .footer {109    position: absolute;110    left: 0; right: 0; bottom: 160px;111    height: 200px;112    display: flex;113    align-items: center;114    padding: 0 40px;115  }116  .products-count {117    color: #000;118    font-size: 42px;119    font-weight: 700;120  }121  .products-count small {122    display: block;123    font-size: 28px;124    color: #8a8a8a;125    font-weight: 600;126    margin-top: 6px;127  }128  .apply-btn {129    margin-left: auto;130    width: 480px;131    height: 120px;132    background: #FF6A00;133    color: #fff;134    font-size: 44px;135    border-radius: 14px;136    display: flex;137    justify-content: center;138    align-items: center;139    font-weight: 700;140  }141  /* System bar (gesture area) */142  .system-bar {143    position: absolute;144    left: 0; right: 0; bottom: 0;145    height: 160px;146    background: #000;147  }148  .gesture-handle {149    position: absolute;150    left: 50%;151    transform: translateX(-50%);152    bottom: 52px;153    width: 260px;154    height: 14px;155    background: #e6e6e6;156    border-radius: 7px;157    opacity: 0.9;158  }159  /* SVG icons sizing helpers */160  .icon { width: 46px; height: 46px; }161  .search-icon { width: 46px; height: 46px; margin-right: 16px; }162</style>163</head>164<body>165<div id="render-target">166 167  <!-- Header with back arrow and Clear Filters -->168  <div class="header">169    <svg class="icon" viewBox="0 0 24 24">170      <path d="M15.5 19.5L7 12l8.5-7.5" fill="none" stroke="#000" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>171    </svg>172    <div class="title">Filters</div>173    <div class="right-action">Clear Filters</div>174  </div>175 176  <!-- Main split area -->177  <div class="main">178    <!-- Left categories panel -->179    <div class="left-panel">180      <div class="left-item">Price</div>181      <div class="left-item">Plus (FAssured)</div>182      <div class="left-item">183        Deliver At184        <svg class="tick" viewBox="0 0 24 24">185          <path d="M4 12.5l5 5 11-11" fill="none" stroke="#2F7CF6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>186        </svg>187      </div>188      <div class="left-item blue">Brand</div>189      <div class="left-item">Customer Ratings</div>190      <div class="left-item">Offers</div>191      <div class="left-item">Discount</div>192      <div class="left-item">Material</div>193      <div class="left-item">Type</div>194      <div class="left-item">GST Invoice Available</div>195      <div class="left-item">Color</div>196      <div class="left-item">Availability</div>197      <div class="left-item">Category</div>198    </div>199 200    <!-- Right content -->201    <div class="content">202      <div class="search-bar">203        <svg class="search-icon" viewBox="0 0 24 24">204          <circle cx="11" cy="11" r="7" stroke="#9e9e9e" stroke-width="2" fill="none"/>205          <path d="M20 20l-4.5-4.5" stroke="#9e9e9e" stroke-width="2" stroke-linecap="round"/>206        </svg>207        Search Brand208      </div>209 210      <div class="brand-list">211        <div class="brand-item">212          <div class="checkbox"></div>213          AB WORLD CLASS214        </div>215        <div class="brand-item">216          <div class="checkbox"></div>217          ABR218        </div>219        <div class="brand-item">220          <div class="checkbox"></div>221          AKS222        </div>223        <div class="brand-item">224          <div class="checkbox"></div>225          ATLANTIC226        </div>227        <div class="brand-item">228          <div class="checkbox"></div>229          BESTLINING230        </div>231        <div class="brand-item">232          <div class="checkbox"></div>233          Brassley234        </div>235        <div class="brand-item">236          <div class="checkbox"></div>237          chakachak238        </div>239        <div class="brand-item">240          <div class="checkbox"></div>241          Circle242        </div>243        <div class="brand-item">244          <div class="checkbox"></div>245          Crust246        </div>247        <div class="brand-item">248          <div class="checkbox"></div>249          DSNS250        </div>251        <div class="view-more">View More</div>252      </div>253    </div>254  </div>255 256  <!-- Footer with product count and Apply button -->257  <div class="footer">258    <div class="products-count">259      338260      <small>products found</small>261    </div>262    <div class="apply-btn">Apply</div>263  </div>264 265  <!-- System gesture bar -->266  <div class="system-bar">267    <div class="gesture-handle"></div>268  </div>269 270</div>271</body>272</html>