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 { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: #F2F2F4;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    background: #E6E6E8;24    color: #1a1a1a;25    display: flex;26    align-items: center;27    padding: 0 34px;28    box-sizing: border-box;29    font-weight: 600;30    font-size: 36px;31    letter-spacing: 0.5px;32  }33  .status-right {34    margin-left: auto;35    display: flex;36    align-items: center;37    gap: 22px;38  }39  .status-icon {40    width: 36px; height: 36px;41    border-radius: 50%;42    background: #555;43  }44 45  /* Top header with back + title + clear */46  .header {47    position: absolute;48    top: 120px;49    left: 0;50    width: 1080px;51    height: 136px;52    background: #FFFFFF;53    display: flex;54    align-items: center;55    padding: 0 34px;56    box-sizing: border-box;57    border-bottom: 1px solid #E0E0E0;58  }59  .back-btn {60    width: 72px;61    height: 72px;62    display: flex;63    align-items: center;64    justify-content: center;65    margin-right: 18px;66  }67  .header-title {68    font-size: 56px;69    font-weight: 700;70    color: #222;71  }72  .clear-link {73    margin-left: auto;74    font-size: 44px;75    color: #1247FF;76    font-weight: 700;77  }78 79  /* Main content */80  .content {81    position: absolute;82    top: 256px;83    left: 0;84    width: 1080px;85    height: 1688px;86    display: flex;87  }88 89  /* Left filter list */90  .left-nav {91    width: 270px;92    background: #F4F5F7;93    border-right: 1px solid #E2E2E2;94    padding-top: 24px;95    box-sizing: border-box;96  }97  .nav-item {98    padding: 28px 24px;99    font-size: 38px;100    color: #2d2d2d;101    border-radius: 12px;102    margin: 6px 12px;103    position: relative;104  }105  .nav-item.active {106    color: #5B43FF;107    font-weight: 700;108  }109  .nav-check {110    position: absolute;111    right: 18px;112    top: 50%;113    transform: translateY(-50%);114    width: 28px; height: 28px;115    border-radius: 4px;116    background: #1E59FF;117  }118 119  /* Right panel */120  .right-panel {121    width: 810px;122    background: #FFFFFF;123    padding: 28px 32px 40px 32px;124    box-sizing: border-box;125  }126 127  .search-brand {128    display: flex;129    align-items: center;130    border: 1px solid #D9D9D9;131    border-radius: 12px;132    height: 100px;133    padding: 0 24px;134    margin-bottom: 22px;135  }136  .search-brand input {137    border: none;138    outline: none;139    font-size: 40px;140    flex: 1;141    color: #333;142  }143  .search-brand svg { margin-right: 18px; }144 145  .filter-option {146    display: flex;147    align-items: center;148    padding: 18px 0;149    font-size: 44px;150    color: #1f1f1f;151  }152  .box {153    width: 54px; height: 54px;154    border: 3px solid #2c2c2c;155    border-radius: 8px;156    margin-right: 28px;157  }158  .option-text { line-height: 48px; }159 160  .view-more {161    margin-top: 24px;162    font-size: 44px;163    color: #1247FF;164    font-weight: 700;165  }166 167  /* Bottom action bar */168  .bottom-action {169    position: absolute;170    left: 0;171    bottom: 196px; /* above tab bar */172    width: 1080px;173    height: 160px;174    background: #FFFFFF;175    border-top: 1px solid #E0E0E0;176    display: flex;177    align-items: center;178    padding: 0 34px;179    box-sizing: border-box;180    gap: 24px;181  }182  .products-found {183    font-size: 44px;184    color: #222;185  }186  .products-found .count {187    font-weight: 800;188  }189  .apply-btn {190    margin-left: auto;191    width: 540px;192    height: 120px;193    background: #5A3DF5;194    color: #FFF;195    border-radius: 18px;196    font-size: 48px;197    font-weight: 700;198    display: flex;199    align-items: center;200    justify-content: center;201  }202 203  /* Bottom navigation bar */204  .bottom-nav {205    position: absolute;206    left: 0;207    bottom: 0;208    width: 1080px;209    height: 196px;210    background: #FFFFFF;211    border-top: 1px solid #E5E5E5;212    display: flex;213    justify-content: space-around;214    align-items: center;215  }216  .tab {217    display: flex;218    flex-direction: column;219    align-items: center;220    gap: 14px;221    color: #3a3a3a;222    font-size: 34px;223  }224  .tab.active { color: #563DFF; }225  .tab-icon {226    width: 74px; height: 74px;227    border: 2px solid #8B8B8B;228    border-radius: 16px;229    display: flex;230    align-items: center;231    justify-content: center;232  }233  .grid-icon {234    display: grid;235    grid-template-columns: repeat(2, 1fr);236    grid-gap: 6px;237    width: 54px;238    height: 54px;239  }240  .grid-icon div { width: 24px; height: 24px; background: #8B8B8B; border-radius: 4px; }241 242</style>243</head>244<body>245<div id="render-target">246 247  <!-- Status bar -->248  <div class="status-bar">249    9:19250    <div class="status-right">251      <div class="status-icon" title="Network"></div>252      <div class="status-icon" title="Battery"></div>253    </div>254  </div>255 256  <!-- Header -->257  <div class="header">258    <div class="back-btn" aria-label="Back">259      <svg width="48" height="48" viewBox="0 0 24 24">260        <path d="M15 18l-6-6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>261      </svg>262    </div>263    <div class="header-title">Filters</div>264    <div class="clear-link">Clear Filters</div>265  </div>266 267  <!-- Content -->268  <div class="content">269    <!-- Left navigation -->270    <div class="left-nav">271      <div class="nav-item">Gender</div>272      <div class="nav-item">Category</div>273      <div class="nav-item">Deliver At <span class="nav-check"></span></div>274      <div class="nav-item">Budget</div>275      <div class="nav-item">Price</div>276      <div class="nav-item active">Brand</div>277      <div class="nav-item">Customer<br>Ratings</div>278      <div class="nav-item">Color</div>279      <div class="nav-item">Discount</div>280      <div class="nav-item">Offers</div>281      <div class="nav-item">Availability</div>282    </div>283 284    <!-- Right panel -->285    <div class="right-panel">286      <!-- Search brand -->287      <div class="search-brand">288        <svg width="44" height="44" viewBox="0 0 24 24">289          <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"></circle>290          <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#777" stroke-width="2"></line>291        </svg>292        <input type="text" placeholder="Search Brand">293      </div>294 295      <!-- Options -->296      <div class="filter-option"><div class="box"></div><div class="option-text">Popular Filters</div></div>297      <div class="filter-option"><div class="box"></div><div class="option-text">PUMA</div></div>298      <div class="filter-option"><div class="box"></div><div class="option-text">ADIDAS</div></div>299      <div class="filter-option"><div class="box"></div><div class="option-text">NIKE</div></div>300      <div class="filter-option"><div class="box"></div><div class="option-text">CAMPUS</div></div>301      <div class="filter-option"><div class="box"></div><div class="option-text">Skechers</div></div>302      <div class="filter-option"><div class="box"></div><div class="option-text">RED TAPE</div></div>303      <div class="filter-option"><div class="box"></div><div class="option-text">WOODLAND</div></div>304      <div class="filter-option"><div class="box"></div><div class="option-text">Bata</div></div>305      <div class="filter-option"><div class="box"></div><div class="option-text">REEBOK</div></div>306      <div class="filter-option"><div class="box"></div><div class="option-text">Others</div></div>307      <div class="filter-option"><div class="box"></div><div class="option-text">3SIX5</div></div>308 309      <div class="view-more">View More</div>310    </div>311  </div>312 313  <!-- Bottom action bar -->314  <div class="bottom-action">315    <div class="products-found"><span class="count">104,207</span><br>products found</div>316    <div class="apply-btn">Apply</div>317  </div>318 319  <!-- Bottom navigation -->320  <div class="bottom-nav">321    <div class="tab">322      <div class="tab-icon">323        <svg width="44" height="44" viewBox="0 0 24 24">324          <path d="M3 11l9-7 9 7v9H3z" stroke="#8B8B8B" stroke-width="2" fill="none" stroke-linejoin="round"></path>325        </svg>326      </div>327      Home328    </div>329    <div class="tab active">330      <div class="tab-icon">331        <svg width="44" height="44" viewBox="0 0 24 24">332          <circle cx="11" cy="11" r="7" stroke="#563DFF" stroke-width="2" fill="none"></circle>333          <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#563DFF" stroke-width="2"></line>334        </svg>335      </div>336      Search337    </div>338    <div class="tab">339      <div class="tab-icon">340        <div class="grid-icon">341          <div></div><div></div><div></div><div></div>342        </div>343      </div>344      Categories345    </div>346    <div class="tab">347      <div class="tab-icon">348        <svg width="44" height="44" viewBox="0 0 24 24">349          <circle cx="12" cy="8" r="4" stroke="#8B8B8B" stroke-width="2" fill="none"></circle>350          <path d="M4 22c2-5 14-5 16 0" stroke="#8B8B8B" stroke-width="2" fill="none" stroke-linecap="round"></path>351        </svg>352      </div>353      Account354    </div>355    <div class="tab">356      <div class="tab-icon">357        <svg width="44" height="44" viewBox="0 0 24 24">358          <path d="M6 6h15l-2 12H7L5 6z" stroke="#8B8B8B" stroke-width="2" fill="none"></path>359          <circle cx="9" cy="20" r="2" fill="#8B8B8B"></circle>360          <circle cx="17" cy="20" r="2" fill="#8B8B8B"></circle>361        </svg>362      </div>363      Cart364    </div>365  </div>366 367</div>368</body>369</html>