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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13  }14 15  /* Status bar (simulated) */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 96px;22    padding: 0 32px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #444;27    font-size: 34px;28    box-sizing: border-box;29  }30  .status-icons {31    display: flex;32    gap: 24px;33    align-items: center;34  }35  .dot { width: 10px; height: 10px; background: #777; border-radius: 50%; display: inline-block; }36 37  /* Header */38  .header {39    position: absolute;40    top: 96px;41    left: 0;42    width: 1080px;43    height: 120px;44    display: flex;45    align-items: center;46    box-sizing: border-box;47    padding: 0 32px;48    border-bottom: 1px solid #eee;49    background: #fff;50  }51  .back-icon {52    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin-right: 12px;53  }54  .header-title {55    font-size: 48px; font-weight: 600; color: #111; flex: 1;56  }57  .clear-filters {58    font-size: 36px; color: #111; opacity: 0.9;59  }60 61  /* Content layout */62  .content {63    position: absolute;64    top: 216px;65    left: 0;66    width: 1080px;67    height: 1920px;68    display: flex;69  }70  .left-panel {71    width: 300px;72    background: #f2f3f5;73    height: 100%;74    border-right: 1px solid #e6e6e6;75    box-sizing: border-box;76    padding-top: 20px;77  }78  .nav-item {79    font-size: 34px;80    color: #111;81    padding: 28px 24px;82    position: relative;83  }84  .nav-item.active {85    font-weight: 600;86    background: #f2f3f5;87  }88  .nav-check {89    position: absolute;90    right: 20px;91    top: 50%;92    transform: translateY(-50%);93  }94  .right-panel {95    flex: 1;96    height: 100%;97    padding: 24px 48px;98    box-sizing: border-box;99    background: #fff;100  }101  .section-title {102    font-size: 36px;103    color: #2b6ed4;104    margin-bottom: 24px;105    font-weight: 600;106  }107  .filter-option {108    display: flex;109    align-items: center;110    margin: 42px 0;111    font-size: 36px;112    color: #111;113  }114  .checkbox {115    width: 56px;116    height: 56px;117    border: 4px solid #b2b2b2;118    border-radius: 10px;119    margin-right: 24px;120    box-sizing: border-box;121  }122 123  /* Footer area */124  .footer {125    position: absolute;126    bottom: 120px;127    left: 0;128    width: 1080px;129    padding: 0 32px;130    box-sizing: border-box;131    display: flex;132    align-items: center;133    justify-content: space-between;134  }135  .products-found {136    color: #111;137    font-size: 40px;138  }139  .products-found small {140    display: block;141    color: #8b8b8b;142    font-size: 30px;143    margin-top: 8px;144  }145  .apply-btn {146    width: 560px;147    height: 128px;148    background: #e8662c;149    color: #fff;150    font-size: 44px;151    border-radius: 12px;152    display: flex;153    align-items: center;154    justify-content: center;155    box-shadow: 0 6px 12px rgba(0,0,0,0.1);156  }157 158  /* Simple SVG styles */159  svg { display: block; }160</style>161</head>162<body>163<div id="render-target">164 165  <!-- Status bar -->166  <div class="status-bar">167    <div>7:28</div>168    <div class="status-icons">169      <span class="dot"></span>170      <span class="dot"></span>171      <span class="dot"></span>172    </div>173  </div>174 175  <!-- Header -->176  <div class="header">177    <div class="back-icon">178      <svg width="48" height="48" viewBox="0 0 24 24">179        <path d="M15 18l-6-6 6-6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>180      </svg>181    </div>182    <div class="header-title">Filters</div>183    <div class="clear-filters">Clear Filters</div>184  </div>185 186  <!-- Main content -->187  <div class="content">188    <!-- Left list -->189    <div class="left-panel">190      <div class="nav-item">Price</div>191      <div class="nav-item">Plus (FAssured)</div>192      <div class="nav-item active">Deliver At193        <span class="nav-check">194          <svg width="40" height="40" viewBox="0 0 24 24">195            <path d="M20 6L9 17l-5-5" fill="none" stroke="#2b6ed4" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>196          </svg>197        </span>198      </div>199      <div class="nav-item">Table Top<br>Material</div>200      <div class="nav-item">Type</div>201      <div class="nav-item">Brand</div>202      <div class="nav-item">Delivery<br>Condition</div>203      <div class="nav-item">Discount</div>204      <div class="nav-item">Availability</div>205      <div class="nav-item">Primary Color</div>206      <div class="nav-item">Storage<br>Included</div>207      <div class="nav-item">Wheels Included</div>208      <div class="nav-item">Number of<br>Drawers</div>209    </div>210 211    <!-- Right panel -->212    <div class="right-panel">213      <div class="section-title">Price</div>214 215      <div class="filter-option">216        <div class="checkbox"></div>217        <div>Rs. 1999 and Below</div>218      </div>219 220      <div class="filter-option">221        <div class="checkbox"></div>222        <div>Rs. 2000 - Rs. 4999</div>223      </div>224 225      <div class="filter-option">226        <div class="checkbox"></div>227        <div>Rs. 5000 - Rs. 9999</div>228      </div>229 230      <div class="filter-option">231        <div class="checkbox"></div>232        <div>Rs. 10000 - Rs. 14999</div>233      </div>234 235      <div class="filter-option">236        <div class="checkbox"></div>237        <div>Rs. 15000 and above</div>238      </div>239    </div>240  </div>241 242  <!-- Footer bar -->243  <div class="footer">244    <div class="products-found">245      890246      <small>products found</small>247    </div>248    <div class="apply-btn">Apply</div>249  </div>250 251</div>252</body>253</html>