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, Arial, sans-serif; color: #111; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    height: 120px;20    background: #e6e6e6;21    padding: 0 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    font-weight: 600;26    font-size: 40px;27    color: #111;28    letter-spacing: 0.5px;29  }30  .status-icons {31    display: flex;32    align-items: center;33    gap: 26px;34  }35  .dot { width: 14px; height: 14px; background: #6b6b6b; border-radius: 50%; }36  .icon-box { width: 38px; height: 24px; border: 3px solid #4b4b4b; border-radius: 4px; position: relative; }37  .icon-box::after { content: ""; position: absolute; right: 4px; top: 4px; bottom: 4px; width: 16px; background: #4b4b4b; border-radius: 2px; }38 39  /* Top app bar */40  .appbar {41    height: 140px;42    display: flex;43    align-items: center;44    padding: 0 36px;45    background: #fff;46    border-bottom: 1px solid #ececec;47  }48  .appbar h1 {49    margin: 0 0 0 22px;50    font-size: 56px;51    font-weight: 700;52  }53  .clear-link {54    margin-left: auto;55    color: #2a3cff;56    font-size: 44px;57    font-weight: 700;58    text-decoration: none;59  }60  .back-btn {61    width: 60px; height: 60px;62    display: inline-flex; align-items: center; justify-content: center;63  }64  .back-btn svg { width: 56px; height: 56px; }65 66  /* Layout below appbar */67  .content {68    position: absolute;69    top: 260px; /* 120 + 140 */70    bottom: 350px; /* apply bar + navbar combined reserved later */71    left: 0; right: 0;72    display: flex;73    overflow: hidden;74  }75  .sidebar {76    width: 320px;77    background: #f1f2f6;78    border-right: 1px solid #e6e6e9;79    overflow-y: auto;80  }81  .side-item {82    padding: 34px 30px;83    font-size: 42px;84    color: #1b1b1b;85    border-bottom: 1px solid #ececf0;86    display: flex;87    align-items: center;88    justify-content: space-between;89    min-height: 120px;90  }91  .side-item.muted { color: #6b6b6b; }92  .side-item.active { color: #4a45ff; font-weight: 700; background: #ffffff; }93  .tick {94    width: 34px; height: 34px; color: #6a58ff;95  }96 97  .options {98    flex: 1;99    overflow-y: auto;100    padding: 8px 20px 40px 28px;101    background: #fff;102  }103  .opt-row {104    display: flex;105    align-items: center;106    gap: 26px;107    padding: 34px 24px;108    margin: 8px 8px;109    border-bottom: 1px solid #f1f1f1;110  }111  .checkbox {112    width: 54px; height: 54px;113    border: 6px solid #2a2a2a;114    border-radius: 8px;115    box-sizing: border-box;116    background: #fff;117  }118  .opt-label {119    font-size: 46px;120    color: #222;121    letter-spacing: 0.3px;122  }123 124  /* Apply bar (above bottom nav) */125  .apply-bar {126    position: absolute;127    left: 0; right: 0;128    bottom: 170px; /* keep nav visible */129    height: 180px;130    background: #ffffff;131    border-top: 1px solid #ececec;132    display: flex;133    align-items: center;134    padding: 0 36px;135    gap: 24px;136  }137  .found {138    flex: 1;139  }140  .found .count {141    font-size: 52px; font-weight: 800; color: #111;142  }143  .found .sub {144    font-size: 34px; color: #6b6b6b; margin-top: 6px;145  }146  .apply-btn {147    width: 500px; height: 118px; background: #5b4dff;148    border-radius: 16px; color: #fff; font-size: 46px; font-weight: 700;149    display: flex; align-items: center; justify-content: center;150    box-shadow: 0 6px 14px rgba(91,77,255,0.3);151  }152 153  /* Bottom navigation */154  .navbar {155    position: absolute;156    left: 0; right: 0; bottom: 0;157    height: 170px;158    background: #fff;159    border-top: 1px solid #e9e9e9;160    display: flex;161    align-items: center;162    justify-content: space-around;163    font-size: 32px;164    color: #6b6b6b;165  }166  .nav-item {167    width: 180px;168    display: flex; flex-direction: column;169    align-items: center; justify-content: center;170    position: relative;171    gap: 10px;172  }173  .nav-item svg { width: 54px; height: 54px; }174  .nav-item.active { color: #5b4dff; }175  .active-indicator {176    position: absolute; bottom: 0; height: 10px; width: 120px; background: #5b4dff; border-radius: 6px;177  }178  .badge {179    position: absolute;180    top: 8px; right: 46px;181    width: 28px; height: 28px; background: #ff3b30; color: #fff; font-size: 22px;182    display: flex; align-items: center; justify-content: center; border-radius: 50%;183  }184</style>185</head>186<body>187<div id="render-target">188 189  <!-- Status bar -->190  <div class="status-bar">191    <div>11:28</div>192    <div class="status-icons">193      <div class="dot"></div>194      <div class="dot"></div>195      <div class="icon-box"></div>196    </div>197  </div>198 199  <!-- App bar -->200  <div class="appbar">201    <div class="back-btn" aria-label="Back">202      <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">203        <path d="M15 18l-6-6 6-6"></path>204      </svg>205    </div>206    <h1>Filters</h1>207    <a class="clear-link" href="#">Clear Filters</a>208  </div>209 210  <!-- Main content -->211  <div class="content">212    <!-- Sidebar -->213    <div class="sidebar">214      <div class="side-item">Price</div>215      <div class="side-item">Brand</div>216      <div class="side-item">Deliver At217        <svg class="tick" viewBox="0 0 24 24" fill="none" stroke="#6a58ff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">218          <path d="M20 6L9 17l-5-5"></path>219        </svg>220      </div>221      <div class="side-item">Gender</div>222      <div class="side-item">Discount</div>223      <div class="side-item active">Size</div>224      <div class="side-item">Sleeves</div>225      <div class="side-item">Collar</div>226      <div class="side-item">Fabric</div>227      <div class="side-item">Pattern</div>228      <div class="side-item">Occasion</div>229      <div class="side-item">Color</div>230    </div>231 232    <!-- Options list -->233    <div class="options">234      <div class="opt-row"><div class="checkbox"></div><div class="opt-label">3XS</div></div>235      <div class="opt-row"><div class="checkbox"></div><div class="opt-label">2XS</div></div>236      <div class="opt-row"><div class="checkbox"></div><div class="opt-label">XS</div></div>237      <div class="opt-row"><div class="checkbox"></div><div class="opt-label">S</div></div>238      <div class="opt-row"><div class="checkbox"></div><div class="opt-label">M</div></div>239      <div class="opt-row"><div class="checkbox"></div><div class="opt-label">L</div></div>240      <div class="opt-row"><div class="checkbox"></div><div class="opt-label">XL</div></div>241      <div class="opt-row"><div class="checkbox"></div><div class="opt-label">XXL</div></div>242      <div class="opt-row"><div class="checkbox"></div><div class="opt-label">3XL</div></div>243      <div class="opt-row"><div class="checkbox"></div><div class="opt-label">4XL</div></div>244      <div class="opt-row"><div class="checkbox"></div><div class="opt-label">5XL</div></div>245      <div class="opt-row"><div class="checkbox"></div><div class="opt-label">6XL</div></div>246      <div class="opt-row"><div class="checkbox"></div><div class="opt-label">7XL</div></div>247      <div class="opt-row"><div class="checkbox"></div><div class="opt-label">Free</div></div>248    </div>249  </div>250 251  <!-- Apply bar -->252  <div class="apply-bar">253    <div class="found">254      <div class="count">200,777</div>255      <div class="sub">products found</div>256    </div>257    <div class="apply-btn">Apply</div>258  </div>259 260  <!-- Bottom navigation -->261  <div class="navbar">262    <div class="nav-item">263      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">264        <path d="M3 10l9-7 9 7v8a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4H9v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>265      </svg>266      <div>Home</div>267    </div>268    <div class="nav-item active">269      <svg viewBox="0 0 24 24" fill="none" stroke="#5b4dff" stroke-width="2">270        <circle cx="11" cy="11" r="7"></circle>271        <path d="M21 21l-4.3-4.3"></path>272      </svg>273      <div>Search</div>274      <div class="active-indicator"></div>275    </div>276    <div class="nav-item">277      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">278        <rect x="3" y="3" width="7" height="7"></rect>279        <rect x="14" y="3" width="7" height="7"></rect>280        <rect x="3" y="14" width="7" height="7"></rect>281        <rect x="14" y="14" width="7" height="7"></rect>282      </svg>283      <div>Categories</div>284      <div class="badge"></div>285    </div>286    <div class="nav-item">287      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">288        <circle cx="12" cy="8" r="4"></circle>289        <path d="M4 21c0-4 4-7 8-7s8 3 8 7"></path>290      </svg>291      <div>Account</div>292    </div>293    <div class="nav-item">294      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">295        <path d="M6 6h15l-1.5 9h-12z"></path>296        <circle cx="9" cy="20" r="2"></circle>297        <circle cx="18" cy="20" r="2"></circle>298      </svg>299      <div>Cart</div>300      <div class="badge">1</div>301    </div>302  </div>303 304</div>305</body>306</html>