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: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13    color: #222;14  }15 16  /* Status bar */17  .status-bar {18    height: 110px;19    padding: 0 40px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    font-size: 40px;24    color: #333;25  }26  .status-icons {27    display: flex;28    gap: 28px;29    align-items: center;30  }31  .status-dot, .status-circle {32    width: 22px; height: 22px; border-radius: 50%; background: #666;33  }34  .status-pill {35    width: 36px; height: 22px; border-radius: 6px; background: #999;36  }37  .status-battery {38    width: 34px; height: 22px; border: 2px solid #555; border-radius: 4px; position: relative;39  }40  .status-battery::after {41    content: "";42    position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #555; border-radius: 2px;43  }44 45  /* Header */46  .header {47    height: 140px;48    border-bottom: 1px solid #e5e5e5;49    display: flex;50    align-items: center;51    padding: 0 40px;52  }53  .back-btn {54    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; margin-right: 20px;55  }56  .header-title {57    font-size: 64px; font-weight: 600; flex: 1;58  }59  .clear-link {60    font-size: 46px; color: #333;61  }62 63  /* Main content */64  .content {65    position: absolute;66    top: 250px;67    bottom: 220px;68    left: 0;69    right: 0;70    display: flex;71  }72 73  .left-menu {74    width: 300px;75    background: #F1F3F6;76    border-right: 1px solid #e5e5e5;77    padding-top: 20px;78  }79  .menu-item {80    padding: 28px 30px;81    font-size: 42px;82    color: #333;83    display: flex;84    align-items: center;85    justify-content: space-between;86  }87  .menu-item.active {88    background: #ffffff;89    color: #1a73e8;90    border-left: 6px solid #1a73e8;91  }92  .menu-tick {93    color: #1a73e8;94    display: inline-flex;95    width: 40px; height: 40px; align-items: center; justify-content: center;96  }97 98  .right-panel {99    flex: 1;100    padding: 30px 40px;101    overflow: hidden;102  }103  .filter-row {104    display: flex;105    align-items: center;106    gap: 26px;107    padding: 22px 0;108    font-size: 44px;109  }110  .checkbox {111    width: 56px; height: 56px;112    border: 4px solid #333;113    border-radius: 8px;114    box-sizing: border-box;115  }116 117  /* Bottom bar */118  .bottom-bar {119    position: absolute;120    left: 0; right: 0; bottom: 0;121    height: 220px;122    display: flex;123    align-items: center;124    justify-content: space-between;125    padding: 0 40px;126    border-top: 1px solid #e5e5e5;127    background: #ffffff;128  }129  .products-info {130    font-size: 54px; font-weight: 700;131  }132  .products-sub {133    font-size: 34px; color: #777; margin-top: 8px;134  }135  .apply-btn {136    width: 540px; height: 140px;137    background: #F26A2E;138    color: #fff;139    font-size: 54px;140    font-weight: 700;141    border-radius: 20px;142    display: flex;143    align-items: center;144    justify-content: center;145  }146 147  /* Small gesture bar at very bottom (simulated) */148  .gesture {149    position: absolute; bottom: 16px; left: 50%;150    transform: translateX(-50%);151    width: 320px; height: 12px; background: #d0d0d0; border-radius: 6px;152  }153</style>154</head>155<body>156<div id="render-target">157 158  <!-- Status Bar -->159  <div class="status-bar">160    <div>10:56</div>161    <div class="status-icons">162      <div class="status-pill"></div>163      <div class="status-circle"></div>164      <div class="status-circle"></div>165      <div class="status-dot"></div>166      <div class="status-dot"></div>167      <div class="status-circle"></div>168      <div class="status-dot"></div>169      <div class="status-circle"></div>170      <div class="status-battery"></div>171    </div>172  </div>173 174  <!-- Header -->175  <div class="header">176    <div class="back-btn">177      <svg width="56" height="56" viewBox="0 0 24 24">178        <path d="M15.5 5l-7 7 7 7" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>179      </svg>180    </div>181    <div class="header-title">Filters</div>182    <div class="clear-link">Clear Filters</div>183  </div>184 185  <!-- Content -->186  <div class="content">187    <!-- Left Menu -->188    <div class="left-menu">189      <div class="menu-item active"><span>Price</span></div>190      <div class="menu-item"><span>Plus (FAssured)</span></div>191      <div class="menu-item">192        <span>Deliver At</span>193        <span class="menu-tick">194          <svg width="34" height="34" viewBox="0 0 24 24">195            <path d="M4 12l5 5 11-11" fill="none" stroke="#1a73e8" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>196          </svg>197        </span>198      </div>199      <div class="menu-item"><span>Brand</span></div>200      <div class="menu-item"><span>Customer</span></div>201      <div class="menu-item"><span>Ratings</span></div>202      <div class="menu-item"><span>Offers</span></div>203      <div class="menu-item"><span>Discount</span></div>204      <div class="menu-item"><span>GST Invoice</span></div>205      <div class="menu-item"><span>Available</span></div>206      <div class="menu-item"><span>Availability</span></div>207      <div class="menu-item"><span>Category</span></div>208    </div>209 210    <!-- Right Panel -->211    <div class="right-panel">212      <div class="filter-row">213        <span class="checkbox"></span>214        <span>Rs. 250 and Below</span>215      </div>216      <div class="filter-row">217        <span class="checkbox"></span>218        <span>Rs. 251 - Rs. 500</span>219      </div>220      <div class="filter-row">221        <span class="checkbox"></span>222        <span>Rs. 501 - Rs. 1000</span>223      </div>224      <div class="filter-row">225        <span class="checkbox"></span>226        <span>Rs. 1001 - Rs. 2000</span>227      </div>228      <div class="filter-row">229        <span class="checkbox"></span>230        <span>Rs. 2001 - Rs. 5000</span>231      </div>232      <div class="filter-row">233        <span class="checkbox"></span>234        <span>Rs. 5001 - Rs. 10000</span>235      </div>236      <div class="filter-row">237        <span class="checkbox"></span>238        <span>Rs. 10001 - Rs. 20000</span>239      </div>240      <div class="filter-row">241        <span class="checkbox"></span>242        <span>Rs. 20001 - Rs. 30000</span>243      </div>244      <div class="filter-row">245        <span class="checkbox"></span>246        <span>Rs. 30001 - Rs. 40000</span>247      </div>248      <div class="filter-row">249        <span class="checkbox"></span>250        <span>Rs. 40001 - Rs. 50000</span>251      </div>252      <div class="filter-row">253        <span class="checkbox"></span>254        <span>Rs. 50001 - Rs. 60000</span>255      </div>256      <div class="filter-row">257        <span class="checkbox"></span>258        <span>Rs. 60001 and Above</span>259      </div>260    </div>261  </div>262 263  <!-- Bottom Bar -->264  <div class="bottom-bar">265    <div>266      <div class="products-info">10,611</div>267      <div class="products-sub">products found</div>268    </div>269    <div class="apply-btn">Apply</div>270  </div>271 272  <div class="gesture"></div>273</div>274</body>275</html>