GD-ML/AndroidCode

1<html>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    position: relative;9    width: 1440px;10    height: 3120px;11    overflow: hidden;12    background: #ffffff;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1440px;21    height: 100px;22    background: #ffffff;23    display: flex;24    align-items: center;25    padding: 0 40px;26    box-sizing: border-box;27  }28  .status-time {29    font-size: 46px;30    color: #1a1a1a;31    letter-spacing: 1px;32  }33  .status-icons {34    margin-left: auto;35    display: flex;36    gap: 28px;37    align-items: center;38  }39  .dot {40    width: 18px;41    height: 18px;42    background: #1a1a1a;43    border-radius: 50%;44    opacity: 0.9;45  }46  .icon-wifi, .icon-lock {47    width: 34px; height: 34px;48  }49 50  /* Header with back and title */51  .header {52    position: absolute;53    top: 100px;54    left: 0;55    width: 1440px;56    height: 140px;57    display: flex;58    align-items: center;59    box-sizing: border-box;60    padding: 0 40px;61    border-bottom: 1px solid #e6e8eb;62    background: #ffffff;63  }64  .back-btn {65    width: 80px;66    height: 80px;67    border-radius: 40px;68    display: flex;69    align-items: center;70    justify-content: center;71    cursor: default;72  }73  .title {74    font-size: 54px;75    font-weight: 700;76    color: #202124;77    margin-left: 16px;78  }79 80  /* Main content area */81  .content {82    position: absolute;83    top: 240px; /* 100 + 140 */84    left: 0;85    width: 1440px;86    height: 2660px; /* 3120 - 240 - 220 */87    display: flex;88  }89 90  /* Left sidebar */91  .sidebar {92    width: 420px;93    height: 100%;94    background: #EFF3F6;95    border-right: 1px solid #e0e4e8;96    box-sizing: border-box;97    padding: 40px 30px;98  }99  .side-section-title {100    font-size: 44px;101    font-weight: 700;102    color: #1e2430;103    margin: 10px 0 32px 0;104  }105  .side-item {106    position: relative;107    font-size: 40px;108    color: #293241;109    padding: 26px 20px;110    margin-bottom: 6px;111    border-radius: 12px;112  }113  .side-item:hover { background: rgba(0,0,0,0.03); }114  .pill {115    position: absolute;116    right: 16px;117    top: 50%;118    transform: translateY(-50%);119    background: #1f7ae0;120    color: #fff;121    font-size: 30px;122    padding: 6px 14px;123    border-radius: 20px;124  }125  .sub-divider {126    margin: 36px 0 18px 0;127    font-size: 42px;128    font-weight: 700;129    color: #1e2430;130  }131  .empty-panel {132    margin-top: 18px;133    width: 100%;134    height: 1600px;135    background: #F4F7FA;136    border: 1px dashed #d3d9df;137    border-radius: 14px;138  }139 140  /* Right panel */141  .right-panel {142    flex: 1;143    height: 100%;144    background: #ffffff;145    padding: 40px 60px;146    box-sizing: border-box;147  }148  .hint {149    font-size: 44px;150    color: #5b6573;151    margin: 6px 0 36px 0;152  }153  .hint .link {154    color: #1a73e8;155    font-weight: 700;156    cursor: default;157  }158  .checklist { margin-top: 10px; }159  .check-row {160    display: flex;161    align-items: center;162    gap: 26px;163    padding: 28px 8px;164  }165  .checkbox {166    width: 56px;167    height: 56px;168    border: 3px solid #c9ced6;169    border-radius: 10px;170    background: #ffffff;171    box-sizing: border-box;172  }173  .label {174    font-size: 46px;175    color: #1f2933;176  }177  .label small {178    color: #5e6673;179    font-size: 42px;180    margin-left: 8px;181  }182 183  /* Bottom action bar */184  .bottom-bar {185    position: absolute;186    left: 0;187    bottom: 0;188    width: 1440px;189    height: 220px;190    background: #ffffff;191    border-top: 1px solid #e6e8eb;192    display: flex;193    align-items: center;194    justify-content: space-between;195    padding: 0 60px;196    box-sizing: border-box;197  }198  .btn-reset {199    width: 480px;200    height: 140px;201    border: 2px solid #d5d9de;202    border-radius: 28px;203    background: #ffffff;204    font-size: 50px;205    color: #1f2933;206    display: flex;207    align-items: center;208    justify-content: center;209  }210  .btn-apply {211    width: 840px;212    height: 140px;213    border-radius: 28px;214    background: #1f1f21;215    color: #ffffff;216    font-size: 52px;217    font-weight: 700;218    display: flex;219    align-items: center;220    justify-content: center;221  }222</style>223</head>224<body>225<div id="render-target">226 227  <!-- Status Bar -->228  <div class="status-bar">229    <div class="status-time">1:31</div>230    <div class="status-icons">231      <div class="dot"></div>232      <div class="dot"></div>233      <svg class="icon-wifi" viewBox="0 0 24 24">234        <path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 4c1-1 3-1 4 0l-2 2-2-2z" fill="#2b2f36"/>235      </svg>236      <svg class="icon-lock" viewBox="0 0 24 24">237        <path d="M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V7a3 3 0 0 0-6 0v3z" fill="#2b2f36"/>238      </svg>239    </div>240  </div>241 242  <!-- Header -->243  <div class="header">244    <div class="back-btn">245      <svg width="56" height="56" viewBox="0 0 24 24">246        <path d="M15.5 4.5L8 12l7.5 7.5-1.5 1.5L5 12l9-9 1.5 1.5z" fill="#1f2933"/>247      </svg>248    </div>249    <div class="title">Filters (848 products)</div>250  </div>251 252  <!-- Content -->253  <div class="content">254    <!-- Sidebar -->255    <div class="sidebar">256      <div class="side-item">Gender</div>257      <div class="side-item">Category</div>258      <div class="side-item">Price</div>259      <div class="side-item">Brands<span class="pill">1</span></div>260      <div class="side-item">Occasion<span class="pill">1</span></div>261      <div class="side-item">Discount</div>262      <div class="side-item">Colors</div>263 264      <div class="sub-divider">Size &amp; Fit</div>265      <div class="empty-panel"></div>266    </div>267 268    <!-- Right panel -->269    <div class="right-panel">270      <div class="hint">For better results, <span class="link">Select Category</span></div>271 272      <div class="checklist">273        <div class="check-row">274          <div class="checkbox"></div>275          <div class="label">UK 7 <small>(748)</small></div>276        </div>277        <div class="check-row">278          <div class="checkbox"></div>279          <div class="label">UK 6 <small>(697)</small></div>280        </div>281        <div class="check-row">282          <div class="checkbox"></div>283          <div class="label">UK 8 <small>(636)</small></div>284        </div>285        <div class="check-row">286          <div class="checkbox"></div>287          <div class="label">UK 9 <small>(529)</small></div>288        </div>289        <div class="check-row">290          <div class="checkbox"></div>291          <div class="label">UK 10 <small>(350)</small></div>292        </div>293      </div>294    </div>295  </div>296 297  <!-- Bottom bar -->298  <div class="bottom-bar">299    <div class="btn-reset">Reset</div>300    <div class="btn-apply">Apply Filter</div>301  </div>302 303</div>304</body>305</html>