GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Filters UI</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Arial, Helvetica, sans-serif;12    color: #222;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: linear-gradient(180deg, #9fd6c9 0%, #bfe3d7 30%, #ffffff 30%, #ffffff 100%);20  }21 22  /* Header */23  .top-header {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 150px;29    display: flex;30    align-items: flex-end;31    padding: 0 36px 20px 36px;32    box-sizing: border-box;33  }34  .title {35    font-size: 44px;36    font-weight: 700;37  }38  .close-btn {39    margin-left: auto;40    font-size: 38px;41    color: #126b7f;42    display: flex;43    align-items: center;44    gap: 12px;45    cursor: pointer;46  }47  .close-icon {48    width: 40px;49    height: 40px;50  }51 52  /* Main content split */53  .content {54    position: absolute;55    top: 170px;56    left: 0;57    width: 1080px;58    bottom: 180px; /* leave space for bottom action bar */59    display: flex;60  }61 62  /* Left sidebar */63  .sidebar {64    width: 300px;65    background: #f1f3f4;66    height: 100%;67    padding: 20px 0;68    box-sizing: border-box;69    overflow-y: auto;70    border-right: 1px solid #e0e0e0;71  }72  .side-item {73    padding: 26px 26px;74    font-size: 32px;75    color: #222;76    display: flex;77    align-items: center;78    justify-content: space-between;79  }80  .side-item .badge {81    background: #1b7284;82    color: #fff;83    font-size: 24px;84    padding: 2px 10px;85    border-radius: 12px;86  }87  .side-item.active {88    background: #3c3f41;89    color: #fff;90    font-weight: 600;91  }92 93  /* Right panel */94  .panel {95    flex: 1;96    background: #ffffff;97    height: 100%;98    overflow-y: auto;99    padding: 24px 36px;100    box-sizing: border-box;101  }102  .section-title {103    font-size: 34px;104    font-weight: 700;105    margin: 20px 0 14px 0;106  }107  .subtext {108    font-size: 30px;109    color: #666;110  }111 112  /* Price slider */113  .price-box {114    background: #f7f7f7;115    border-radius: 20px;116    border: 1px solid #e5e5e5;117    padding: 26px;118  }119  .price-range-label {120    font-size: 32px;121    font-weight: 700;122    margin-bottom: 24px;123  }124  .slider {125    position: relative;126    height: 90px;127    background: #ffffff;128    border-radius: 16px;129    border: 1px solid #e5e5e5;130    display: flex;131    align-items: center;132    padding: 0 28px;133    box-sizing: border-box;134  }135  .slider-track {136    width: 100%;137    height: 16px;138    background: #dfe7ea;139    border-radius: 8px;140    position: relative;141  }142  .slider-selection {143    position: absolute;144    left: 0%;145    right: 0%;146    height: 16px;147    background: #2d6f84;148    border-radius: 8px;149  }150  .handle {151    position: absolute;152    top: 50%;153    width: 52px;154    height: 52px;155    background: #1f6f82;156    border: 6px solid #e5f2f6;157    border-radius: 50%;158    transform: translateY(-50%);159  }160  .handle.left { left: -14px; }161  .handle.right { right: -14px; }162 163  /* Chips */164  .chip-row {165    display: flex;166    gap: 18px;167    flex-wrap: wrap;168    margin: 6px 0 22px 0;169  }170  .chip {171    font-size: 30px;172    background: #eef4f7;173    color: #1b7284;174    border: 1px solid #d7e4ea;175    padding: 16px 26px;176    border-radius: 22px;177    display: inline-flex;178    align-items: center;179    gap: 14px;180  }181  .chip .x {182    width: 26px;183    height: 26px;184  }185 186  /* Discount options */187  .option-pill {188    display: inline-block;189    background: #f2f2f2;190    border: 1px solid #e3e3e3;191    border-radius: 20px;192    padding: 22px 28px;193    font-size: 32px;194    color: #333;195    margin-bottom: 18px;196    width: 500px;197  }198 199  /* Bottom bar */200  .bottom-bar {201    position: absolute;202    left: 0;203    right: 0;204    bottom: 0;205    height: 180px;206    background: #ffffff;207    border-top: 1px solid #e5e5e5;208    display: flex;209    align-items: center;210    padding: 0 36px;211    box-sizing: border-box;212    gap: 20px;213  }214  .btn {215    height: 110px;216    border-radius: 22px;217    font-size: 36px;218    padding: 0 36px;219    display: inline-flex;220    align-items: center;221    justify-content: center;222    cursor: pointer;223  }224  .btn-outline {225    border: 2px solid #1b7284;226    color: #1b7284;227    background: #ffffff;228  }229  .btn-primary {230    margin-left: auto;231    background: #1b7284;232    color: #ffffff;233    padding: 0 44px;234  }235 236  /* Small helper spacing */237  .mt-10 { margin-top: 10px; }238  .mb-8 { margin-bottom: 8px; }239</style>240</head>241<body>242<div id="render-target">243 244  <!-- Gradient header with title and close -->245  <div class="top-header">246    <div class="title">Filters (1)</div>247    <div class="close-btn">248      Close249      <svg class="close-icon" viewBox="0 0 24 24">250        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#126b7f" stroke-width="3" stroke-linecap="round"/>251      </svg>252    </div>253  </div>254 255  <!-- Main content -->256  <div class="content">257    <!-- Sidebar -->258    <div class="sidebar">259      <div class="side-item">Prime &amp; Delivery</div>260      <div class="side-item">Categories</div>261      <div class="side-item">Price and Deals <span class="badge">1</span></div>262      <div class="side-item">Customer Reviews</div>263      <div class="side-item active">Books</div>264      <div class="side-item">English &amp; Indian<br>Languages</div>265      <div class="side-item">Format</div>266      <div class="side-item">Author</div>267      <div class="side-item">Foreign Languages</div>268      <div class="side-item">Item Condition</div>269      <div class="side-item">Availability</div>270    </div>271 272    <!-- Right panel -->273    <div class="panel">274      <!-- Price -->275      <div class="section-title">Price</div>276      <div class="price-box">277        <div class="price-range-label">₹88 – ₹28,100+</div>278        <div class="slider">279          <div class="slider-track">280            <div class="slider-selection" style="left: 0%; right: 0%;"></div>281            <div class="handle left"></div>282            <div class="handle right"></div>283          </div>284        </div>285      </div>286 287      <!-- Deals & Discounts -->288      <div class="section-title">Deals &amp; Discounts</div>289      <div class="chip-row">290        <div class="chip">291          All Discounts292          <svg class="x" viewBox="0 0 24 24">293            <path d="M5 5 L19 19 M19 5 L5 19" stroke="#1b7284" stroke-width="3" stroke-linecap="round"/>294          </svg>295        </div>296        <div class="chip">Today's Deals</div>297      </div>298 299      <!-- Discount section -->300      <div class="section-title">Discount</div>301      <div class="option-pill">10% Off or more</div>302      <div class="option-pill">25% Off or more</div>303      <div class="option-pill">35% Off or more</div>304      <div class="option-pill">50% Off or more</div>305      <div class="option-pill">60% Off or more</div>306      <div class="option-pill">70% Off or more</div>307    </div>308  </div>309 310  <!-- Bottom action bar -->311  <div class="bottom-bar">312    <div class="btn btn-outline">Clear Filters</div>313    <div class="btn btn-primary">Show 1,476 results</div>314  </div>315 316</div>317</body>318</html>