GD-ML/AndroidCode

1<!DOCTYPE html>2<html>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: Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #f6f6f6;15    border-radius: 0;16    box-shadow: none;17    color: #1f1f1f;18  }19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 78px;25    display: flex;26    align-items: center;27    padding: 0 30px;28    font-size: 32px;29    color: #2c2c2c;30  }31  .status-right {32    margin-left: auto;33    display: flex;34    align-items: center;35    gap: 22px;36    font-size: 26px;37    color: #666;38  }39  .icon-svg { width: 34px; height: 34px; }40  .wifi, .battery { width: 42px; height: 28px; }41  /* Top search bar area */42  .top-bar {43    position: absolute;44    top: 92px;45    left: 0;46    width: 1080px;47    height: 140px;48    display: flex;49    align-items: center;50    padding: 0 30px;51  }52  .back-btn {53    width: 60px;54    height: 60px;55    margin-right: 18px;56  }57  .search-field {58    flex: 1;59    height: 90px;60    border: 2px solid #c7d0dc;61    border-radius: 45px;62    display: flex;63    align-items: center;64    padding: 0 26px;65    background: #fff;66    box-sizing: border-box;67  }68  .search-icon { width: 42px; height: 42px; margin-right: 16px; }69  .search-text {70    font-size: 34px;71    color: #3a3a3a;72  }73  .top-icons {74    display: flex;75    align-items: center;76    gap: 28px;77    margin-left: 24px;78  }79  .hint {80    position: absolute;81    top: 240px;82    left: 30px;83    width: 1020px;84    font-size: 30px;85    color: #7b7b7b;86  }87 88  /* Bottom sheet - Filters */89  .filter-sheet {90    position: absolute;91    left: 0;92    top: 420px;93    width: 1080px;94    height: 1760px;95    background: #ffffff;96    border-radius: 28px 28px 0 0;97    box-shadow: 0 -6px 20px rgba(0,0,0,0.08);98  }99  .sheet-header {100    height: 120px;101    display: flex;102    align-items: center;103    padding: 0 30px;104    border-bottom: 1px solid #eee;105  }106  .sheet-title {107    font-size: 46px;108    font-weight: 600;109  }110  .close-btn {111    margin-left: auto;112    width: 60px;113    height: 60px;114  }115 116  .sheet-body {117    position: absolute;118    top: 120px;119    left: 0;120    right: 0;121    bottom: 180px;122    display: grid;123    grid-template-columns: 330px 1fr;124  }125  .filter-nav {126    background: #fafafa;127    border-right: 1px solid #e9e9e9;128    padding-top: 10px;129  }130  .nav-item {131    position: relative;132    display: flex;133    align-items: center;134    justify-content: space-between;135    padding: 38px 28px 38px 40px;136    font-size: 34px;137    color: #4a4a4a;138    border-bottom: 1px solid #e9e9e9;139  }140  .nav-item.active {141    background: #ffffff;142    font-weight: 600;143    color: #2e2e2e;144  }145  .active .indicator {146    position: absolute;147    left: 0;148    top: 0;149    width: 10px;150    height: 100%;151    background: #d63a48;152    border-radius: 6px;153    content: "";154  }155  .badge {156    min-width: 44px;157    height: 44px;158    border-radius: 22px;159    background: #111;160    color: #fff;161    display: inline-flex;162    align-items: center;163    justify-content: center;164    font-size: 28px;165  }166 167  .filter-content {168    background: #ffffff;169  }170  .content-row {171    height: 120px;172    display: flex;173    align-items: center;174    padding: 0 28px;175    font-size: 34px;176    color: #2e2e2e;177    border-bottom: 1px solid #ededed;178  }179  .muted {180    color: #757575;181    margin-left: 12px;182    font-size: 30px;183  }184  .chev {185    margin-left: auto;186    display: flex;187    align-items: center;188    gap: 18px;189    color: #888;190    font-size: 32px;191  }192 193  /* Buttons at bottom of sheet */194  .sheet-footer {195    position: absolute;196    left: 0;197    right: 0;198    bottom: 20px;199    height: 160px;200    display: flex;201    align-items: center;202    justify-content: space-between;203    padding: 0 40px;204  }205  .btn {206    height: 120px;207    border-radius: 26px;208    display: flex;209    align-items: center;210    justify-content: center;211    font-size: 38px;212    font-weight: 600;213    box-sizing: border-box;214  }215  .btn-outline {216    width: 420px;217    border: 3px solid #2f2f2f;218    background: #fff;219    color: #2f2f2f;220  }221  .btn-primary {222    width: 540px;223    background: #d23a4a;224    color: #fff;225  }226 227  /* Small bar above nav */228  .small-bar {229    position: absolute;230    bottom: 180px;231    left: 50%;232    transform: translateX(-50%);233    width: 260px;234    height: 12px;235    background: #bfbfbf;236    border-radius: 6px;237  }238 239  /* Bottom system navigation area */240  .system-nav {241    position: absolute;242    left: 0;243    bottom: 0;244    width: 1080px;245    height: 120px;246    background: #000;247  }248  .gesture-pill {249    position: absolute;250    left: 50%;251    bottom: 26px;252    transform: translateX(-50%);253    width: 260px;254    height: 14px;255    background: #e6e6e6;256    border-radius: 8px;257  }258</style>259</head>260<body>261<div id="render-target">262 263  <!-- Status Bar -->264  <div class="status-bar">265    <div>9:56</div>266    <div class="status-right">267      <div style="width:32px;height:32px;border-radius:6px;border:2px solid #777;display:flex;align-items:center;justify-content:center;font-size:18px;">LR</div>268      <svg class="icon-svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="2" fill="#777"/></svg>269      <svg class="wifi" viewBox="0 0 26 18">270        <path d="M1 6c6-6 18-6 24 0" stroke="#777" stroke-width="2" fill="none"/>271        <path d="M5 10c4-4 12-4 16 0" stroke="#777" stroke-width="2" fill="none"/>272        <path d="M9 14c2-2 6-2 8 0" stroke="#777" stroke-width="2" fill="none"/>273        <circle cx="13" cy="16" r="2" fill="#777"/>274      </svg>275      <svg class="battery" viewBox="0 0 40 20">276        <rect x="1" y="3" width="34" height="14" rx="3" ry="3" stroke="#777" fill="none" stroke-width="2"/>277        <rect x="3" y="5" width="28" height="10" fill="#777"/>278        <rect x="35" y="7" width="4" height="6" fill="#777"/>279      </svg>280      <div style="font-size:26px;color:#777;">100%</div>281    </div>282  </div>283 284  <!-- Top Search Bar -->285  <div class="top-bar">286    <svg class="back-btn" viewBox="0 0 40 40">287      <path d="M26 8 L14 20 L26 32" stroke="#333" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>288    </svg>289    <div class="search-field">290      <svg class="search-icon" viewBox="0 0 24 24">291        <circle cx="10" cy="10" r="6.5" stroke="#5a6f92" stroke-width="2.2" fill="none"/>292        <path d="M15.5 15.5 L22 22" stroke="#5a6f92" stroke-width="2.2" stroke-linecap="round"/>293      </svg>294      <div class="search-text">sport shoes men</div>295    </div>296    <div class="top-icons">297      <svg class="icon-svg" viewBox="0 0 24 24">298        <path d="M3 11 L12 4 L21 11 V21 H3 Z" stroke="#4b4b4b" stroke-width="2" fill="none" stroke-linejoin="round"/>299      </svg>300      <svg class="icon-svg" viewBox="0 0 24 24">301        <path d="M3 6 H21 L19 16 H7 L5 6 Z" stroke="#4b4b4b" stroke-width="2" fill="none" stroke-linejoin="round"/>302        <circle cx="9" cy="19" r="1.8" fill="#4b4b4b"/>303        <circle cx="17" cy="19" r="1.8" fill="#4b4b4b"/>304      </svg>305      <svg class="icon-svg" viewBox="0 0 24 24">306        <path d="M3 4 H18 V16 L14 13 H3 Z" stroke="#4b4b4b" stroke-width="2" fill="none" stroke-linejoin="round"/>307      </svg>308    </div>309  </div>310 311  <div class="hint">Showing results for <span style="font-weight:600;color:#2f2f2f;">sport shoes men</span></div>312 313  <!-- Filter Bottom Sheet -->314  <div class="filter-sheet">315    <div class="sheet-header">316      <div class="sheet-title">Filters</div>317      <svg class="close-btn" viewBox="0 0 24 24">318        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#333" stroke-width="2.6" stroke-linecap="round"/>319      </svg>320    </div>321 322    <div class="sheet-body">323      <!-- Left Navigation -->324      <div class="filter-nav">325        <div class="nav-item active">326          <div class="indicator"></div>327          <div>Category</div>328        </div>329        <div class="nav-item"><div>Price</div></div>330        <div class="nav-item"><div>Customer Rating</div></div>331        <div class="nav-item"><div>Color</div></div>332        <div class="nav-item"><div>Size</div></div>333        <div class="nav-item">334          <div>Brand</div>335          <div class="badge">1</div>336        </div>337        <div class="nav-item">338          <div>Outer Material</div>339          <div class="badge">1</div>340        </div>341        <div class="nav-item"><div>Cushioning</div></div>342        <div class="nav-item"><div>Discount %</div></div>343      </div>344 345      <!-- Right Content -->346      <div class="filter-content">347        <div class="content-row">348          <div>Sports Fashion</div>349          <div class="chev">350            <span style="color:#6f6f6f;">515</span>351            <svg viewBox="0 0 24 24" width="28" height="28">352              <path d="M9 5 L16 12 L9 19" stroke="#888" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>353            </svg>354          </div>355        </div>356      </div>357    </div>358 359    <div class="small-bar"></div>360 361    <!-- Footer buttons -->362    <div class="sheet-footer">363      <div class="btn btn-outline">Clear Filter</div>364      <div class="btn btn-primary">Apply Filter</div>365    </div>366  </div>367 368  <!-- System navigation bar -->369  <div class="system-nav">370    <div class="gesture-pill"></div>371  </div>372 373</div>374</body>375</html>