GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Filter - All Shoes</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: #ffffff;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: #000;24    color: #fff;25    display: flex;26    align-items: center;27    padding: 0 40px;28    font-weight: 600;29    font-size: 34px;30  }31  .status-icons {32    margin-left: auto;33    display: flex;34    align-items: center;35    gap: 26px;36  }37  .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.8; }38 39  /* Header */40  .header {41    position: absolute;42    top: 120px;43    left: 0;44    width: 1080px;45    height: 120px;46    display: flex;47    align-items: center;48    padding: 0 36px;49    box-sizing: border-box;50    border-bottom: 1px solid #eee;51  }52  .header-title {53    font-size: 46px;54    font-weight: 700;55    color: #111;56    margin-left: 18px;57  }58  .header-right {59    margin-left: auto;60    display: flex;61    align-items: center;62    gap: 28px;63  }64  .icon-btn {65    width: 72px;66    height: 72px;67    display: inline-flex;68    align-items: center;69    justify-content: center;70    border-radius: 16px;71    color: #111;72  }73  .icon {74    width: 44px;75    height: 44px;76  }77 78  /* Content */79  .content {80    position: absolute;81    top: 240px;82    left: 0;83    right: 0;84    bottom: 280px;85    padding: 0 48px 40px;86    box-sizing: border-box;87    overflow: hidden;88  }89  .section {90    margin-top: 36px;91  }92  .section-title {93    font-size: 42px;94    font-weight: 700;95    color: #111;96    margin: 28px 0 24px;97  }98 99  .filter-row {100    display: flex;101    align-items: center;102    gap: 24px;103    margin: 22px 0;104  }105  .checkbox {106    width: 58px;107    height: 58px;108    border: 2px solid #CFCFCF;109    border-radius: 12px;110    box-sizing: border-box;111    background: #fff;112  }113  .label {114    font-size: 36px;115    color: #222;116  }117 118  .divider {119    margin: 42px 0 30px;120    height: 2px;121    background: #E9E9E9;122    width: 100%;123  }124 125  /* Close floating button */126  .close-fab {127    position: absolute;128    top: 560px;129    right: 48px;130    width: 120px;131    height: 120px;132    background: #111;133    color: #fff;134    border-radius: 60px;135    display: flex;136    align-items: center;137    justify-content: center;138    box-shadow: 0 6px 16px rgba(0,0,0,0.25);139  }140  .close-fab svg { width: 56px; height: 56px; }141 142  /* Size grid */143  .size-grid {144    display: grid;145    grid-template-columns: repeat(4, 1fr);146    gap: 24px;147    margin-top: 18px;148  }149  .size-item {150    height: 120px;151    border: 2px solid #E6E6E6;152    border-radius: 26px;153    display: flex;154    align-items: center;155    justify-content: center;156    font-size: 36px;157    color: #222;158    background: #fff;159  }160  .more {161    margin-top: 28px;162    font-size: 34px;163    font-weight: 600;164    color: #222;165  }166 167  /* Bottom buttons */168  .bottom-actions {169    position: absolute;170    left: 0;171    right: 0;172    bottom: 160px;173    padding: 0 48px;174    display: flex;175    gap: 32px;176    box-sizing: border-box;177  }178  .btn {179    flex: 1;180    height: 128px;181    border-radius: 64px;182    font-size: 38px;183    font-weight: 700;184    display: flex;185    align-items: center;186    justify-content: center;187    box-sizing: border-box;188  }189  .btn-outline {190    border: 2px solid #CFCFCF;191    color: #111;192    background: #fff;193  }194  .btn-primary {195    background: #111;196    color: #fff;197  }198 199  /* Gesture / bottom bar */200  .gesture-area {201    position: absolute;202    bottom: 0;203    left: 0;204    width: 1080px;205    height: 120px;206    background: #000;207    display: flex;208    align-items: center;209    justify-content: center;210  }211  .gesture-handle {212    width: 200px;213    height: 12px;214    background: #ddd;215    opacity: 0.9;216    border-radius: 8px;217  }218</style>219</head>220<body>221<div id="render-target">222 223  <!-- Status bar -->224  <div class="status-bar">225    9:16226    <div class="status-icons">227      <!-- Simplified app indicators -->228      <svg class="icon" viewBox="0 0 24 24" fill="#fff" style="opacity:.9"><circle cx="12" cy="12" r="10"/></svg>229      <svg class="icon" viewBox="0 0 24 24" fill="#fff" style="opacity:.9"><rect x="4" y="6" width="16" height="12" rx="2"/></svg>230      <svg class="icon" viewBox="0 0 24 24" fill="#fff" style="opacity:.9"><path d="M12 2l6 20H6z"/></svg>231      <div class="dot"></div>232      <!-- WiFi -->233      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">234        <path d="M2 9c4.5-4 15.5-4 20 0M5 12c3-2.5 11-2.5 14 0M8 15c2-1 6-1 8 0M12 18l2 2-2 2-2-2z" />235      </svg>236      <!-- Battery -->237      <svg class="icon" viewBox="0 0 26 24" fill="none" stroke="#fff" stroke-width="2">238        <rect x="2" y="6" width="18" height="12" rx="2" />239        <rect x="21" y="9" width="3" height="6" rx="1" fill="#fff" stroke="none"/>240      </svg>241    </div>242  </div>243 244  <!-- Header -->245  <div class="header">246    <div class="icon-btn">247      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.5">248        <path d="M15 6l-6 6 6 6"/>249      </svg>250    </div>251    <div class="header-title">All Shoes</div>252    <div class="header-right">253      <div class="icon-btn">254        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.5">255          <circle cx="11" cy="11" r="7"/>256          <path d="M20 20l-4-4"/>257        </svg>258      </div>259      <div class="icon-btn">260        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.5">261          <path d="M7 7h10v12H7z"/>262          <path d="M9 7V5h6v2"/>263        </svg>264      </div>265    </div>266  </div>267 268  <!-- Content -->269  <div class="content">270    <div class="section">271      <div class="section-title">Shop By Price</div>272 273      <div class="filter-row">274        <div class="checkbox"></div>275        <div class="label">Under ₹ 2 500.00</div>276      </div>277      <div class="filter-row">278        <div class="checkbox"></div>279        <div class="label">₹ 2 501.00 - ₹ 7 500.00</div>280      </div>281      <div class="filter-row">282        <div class="checkbox"></div>283        <div class="label">₹ 7 501.00 - ₹ 12 999.00</div>284      </div>285      <div class="filter-row">286        <div class="checkbox"></div>287        <div class="label">Over ₹ 13 000.00</div>288      </div>289    </div>290 291    <div class="divider"></div>292 293    <div class="section">294      <div class="section-title">Sale & Offers</div>295      <div class="filter-row">296        <div class="checkbox"></div>297        <div class="label">Sale</div>298      </div>299    </div>300 301    <div class="divider"></div>302 303    <div class="section">304      <div class="section-title">Size</div>305      <div class="size-grid">306        <div class="size-item">2.5</div>307        <div class="size-item">3</div>308        <div class="size-item">3.5</div>309        <div class="size-item">4.5</div>310 311        <div class="size-item">5</div>312        <div class="size-item">5.5</div>313        <div class="size-item">6</div>314        <div class="size-item">6.5</div>315 316        <div class="size-item">7.5</div>317        <div class="size-item">8</div>318        <div class="size-item">8.5</div>319        <div class="size-item">9</div>320 321        <div class="size-item">9.5</div>322        <div class="size-item">10</div>323        <div class="size-item">10.5</div>324        <div class="size-item">11</div>325      </div>326      <div class="more">+ More</div>327    </div>328 329    <div class="divider"></div>330 331    <div class="section">332      <div class="section-title">Colour</div>333      <!-- Additional colour filters would appear below -->334    </div>335  </div>336 337  <!-- Floating close button -->338  <div class="close-fab" aria-label="Close Filters">339    <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round">340      <path d="M6 6l12 12M18 6L6 18"/>341    </svg>342  </div>343 344  <!-- Bottom actions -->345  <div class="bottom-actions">346    <div class="btn btn-outline">Reset (1)</div>347    <div class="btn btn-primary">Apply</div>348  </div>349 350  <!-- Gesture area -->351  <div class="gesture-area">352    <div class="gesture-handle"></div>353  </div>354</div>355</body>356</html>