GD-ML/AndroidCode

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 UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; color: #212121; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden; background: #ffffff;11  }12 13  /* Top app bar */14  .topbar {15    height: 150px;16    display: flex;17    align-items: center;18    padding: 0 40px;19    box-sizing: border-box;20    border-bottom: 1px solid #eee;21  }22  .topbar .back {23    width: 60px; height: 60px; margin-right: 20px; display: flex; align-items: center; justify-content: center;24  }25  .topbar .title {26    font-size: 48px; font-weight: 600; letter-spacing: 0.2px;27  }28  .topbar .actions {29    margin-left: auto;30    font-size: 38px;31    color: #000;32  }33 34  /* Layout */35  .content {36    position: absolute;37    top: 150px; bottom: 180px; left: 0; right: 0;38    display: flex;39  }40 41  /* Left sidebar */42  .sidebar {43    width: 330px;44    background: #EFF2F5;45    padding: 30px 24px 30px 40px;46    box-sizing: border-box;47    overflow: hidden;48  }49  .filter-item {50    font-size: 34px;51    padding: 28px 8px;52    border-radius: 8px;53    display: flex;54    align-items: center;55    position: relative;56    color: #333;57  }58  .filter-item.active {59    background: #E9EDF3;60    font-weight: 600;61  }62  .filter-item.blue {63    color: #1A73E8;64    font-weight: 600;65  }66  .filter-item .tick {67    position: absolute;68    right: 12px;69    width: 30px; height: 30px;70  }71 72  /* Right panel */73  .panel {74    flex: 1;75    padding: 30px 50px;76    box-sizing: border-box;77    overflow: hidden;78  }79 80  /* Search bar */81  .searchbar {82    height: 110px;83    border: 1px solid #DADCE0;84    border-radius: 12px;85    display: flex;86    align-items: center;87    padding: 0 24px;88    box-sizing: border-box;89    color: #757575;90    font-size: 34px;91    background: #FAFAFA;92    margin: 10px 0 30px 0;93  }94  .searchbar svg { margin-right: 20px; }95  .searchbar .placeholder { color: #9E9E9E; }96 97  /* Brand checkbox list */98  .option {99    display: flex;100    align-items: center;101    font-size: 36px;102    margin: 28px 0;103    color: #222;104  }105  .checkbox {106    width: 54px; height: 54px;107    border: 4px solid #222;108    border-radius: 8px;109    margin-right: 22px;110    position: relative;111    box-sizing: border-box;112  }113  .checkbox.checked {114    border-color: #2E6BF0;115    background: #2E6BF0;116  }117  .checkbox.checked svg {118    position: absolute; top: 10px; left: 12px;119    width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 5;120  }121 122  .view-more {123    color: #2E6BF0;124    font-weight: 700;125    font-size: 36px;126    margin-top: 20px;127  }128 129  /* Bottom bar */130  .bottom-bar {131    position: absolute; left: 0; right: 0; bottom: 0;132    height: 180px;133    background: #ffffff;134    border-top: 1px solid #eee;135    display: flex;136    align-items: center;137    padding: 0 50px;138    box-sizing: border-box;139  }140  .count {141    font-size: 44px; font-weight: 700; color: #222;142  }143  .count .sub {144    font-size: 30px; color: #9E9E9E; font-weight: 500; margin-top: 6px;145  }146  .apply {147    margin-left: auto;148    width: 440px; height: 110px;149    background: #FF6D00;150    color: #fff;151    font-size: 40px; font-weight: 700;152    border: none; border-radius: 16px;153    box-shadow: 0 3px 0 rgba(0,0,0,0.1);154    cursor: pointer;155  }156</style>157</head>158<body>159<div id="render-target">160  <div class="topbar">161    <div class="back">162      <svg viewBox="0 0 48 48">163        <path d="M30 8 L14 24 L30 40" stroke="#000" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>164      </svg>165    </div>166    <div class="title">Filters</div>167    <div class="actions">Clear Filters</div>168  </div>169 170  <div class="content">171    <!-- Left sidebar -->172    <div class="sidebar">173      <div class="filter-item">Price</div>174      <div class="filter-item">Plus (FAssured)</div>175      <div class="filter-item active">Deliver At176        <svg class="tick" viewBox="0 0 24 24">177          <path d="M5 12 L10 17 L19 8" stroke="#2E6BF0" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>178        </svg>179      </div>180      <div class="filter-item blue">Brand</div>181      <div class="filter-item">Customer Ratings</div>182      <div class="filter-item">Offers</div>183      <div class="filter-item">Discount</div>184      <div class="filter-item">Material</div>185      <div class="filter-item">Type</div>186      <div class="filter-item">GST Invoice Available</div>187      <div class="filter-item">Color</div>188      <div class="filter-item">Availability</div>189      <div class="filter-item">Category</div>190    </div>191 192    <!-- Right panel content -->193    <div class="panel">194      <div class="searchbar">195        <svg viewBox="0 0 48 48" width="44" height="44">196          <circle cx="20" cy="20" r="12" stroke="#9E9E9E" stroke-width="3" fill="none"></circle>197          <line x1="30" y1="30" x2="44" y2="44" stroke="#9E9E9E" stroke-width="3"></line>198        </svg>199        <span class="placeholder">Search Brand</span>200      </div>201 202      <div class="brand-list">203        <div class="option">204          <div class="checkbox"></div>205          <span>AB WORLD CLASS</span>206        </div>207        <div class="option">208          <div class="checkbox"></div>209          <span>ABR</span>210        </div>211        <div class="option">212          <div class="checkbox"></div>213          <span>AKS</span>214        </div>215        <div class="option">216          <div class="checkbox"></div>217          <span>ATLANTIC</span>218        </div>219        <div class="option">220          <div class="checkbox checked">221            <svg viewBox="0 0 24 24"><path d="M5 12 L10 17 L19 8"></path></svg>222          </div>223          <span>BESTLINING</span>224        </div>225        <div class="option">226          <div class="checkbox"></div>227          <span>Brassley</span>228        </div>229        <div class="option">230          <div class="checkbox"></div>231          <span>chakachak</span>232        </div>233        <div class="option">234          <div class="checkbox"></div>235          <span>Circle</span>236        </div>237        <div class="option">238          <div class="checkbox"></div>239          <span>Crust</span>240        </div>241        <div class="option">242          <div class="checkbox"></div>243          <span>DSNS</span>244        </div>245 246        <div class="view-more">View More</div>247      </div>248    </div>249  </div>250 251  <div class="bottom-bar">252    <div>253      <div class="count">338</div>254      <div class="sub">products found</div>255    </div>256    <button class="apply">Apply</button>257  </div>258</div>259</body>260</html>