GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Filters UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #FAFAFA;11  }12 13  /* Status bar */14  .status-bar {15    height: 90px;16    padding: 0 36px;17    display: flex; align-items: center; justify-content: space-between;18    color: #121212; font-size: 32px;19  }20  .status-icons { display: flex; align-items: center; gap: 22px; color: #333; }21  .status-icons svg { width: 28px; height: 28px; }22 23  /* Header with search */24  .app-bar {25    height: 120px;26    padding: 0 36px;27    display: flex; align-items: center; gap: 24px;28    border-bottom: 1px solid #E5E5E5;29    background: #FFFFFF;30  }31  .back-btn { width: 60px; height: 60px; display:flex; align-items:center; justify-content:center; }32  .search-pill {33    flex: 1;34    height: 84px;35    border: 2px solid #2F6CD1;36    border-radius: 42px;37    display: flex; align-items: center;38    padding: 0 26px;39    color: #3B3B3B; font-size: 34px;40    background: #FCFCFC;41  }42  .search-pill svg { width: 34px; height: 34px; margin-right: 16px; }43  .top-actions { display: flex; align-items: center; gap: 26px; }44  .top-actions svg { width: 44px; height: 44px; fill: none; stroke: #3B3B3B; stroke-width: 3; }45 46  .result-text {47    padding: 16px 36px;48    color: #6A6A6A; font-size: 30px;49    background: #FFFFFF;50    border-bottom: 1px solid #EDEDED;51  }52 53  /* Bottom sheet / Filters overlay */54  .filter-sheet {55    position: absolute; left: 0; right: 0; top: 380px;56    height: 1810px;57    background: #FFFFFF;58    border-top-left-radius: 36px; border-top-right-radius: 36px;59    box-shadow: 0 8px 30px rgba(0,0,0,0.12);60  }61  .sheet-header {62    height: 110px; display: flex; align-items: center; justify-content: space-between;63    padding: 0 36px;64    border-bottom: 1px solid #EFEFEF;65  }66  .sheet-title { font-size: 44px; color: #2C2C2C; font-weight: 600; }67  .close-btn { width: 64px; height: 64px; display:flex; align-items:center; justify-content:center; }68  .close-btn svg { width: 36px; height: 36px; stroke: #555; stroke-width: 3; }69 70  .filters-content { display: flex; height: calc(100% - 110px); }71 72  /* Left nav */73  .filters-nav {74    width: 310px; background: #F5F5F5;75    border-right: 1px solid #E6E6E6;76  }77  .nav-item {78    height: 120px; display: flex; align-items: center;79    padding: 0 28px;80    font-size: 34px; color: #616161;81    border-bottom: 1px solid #EAEAEA;82    position: relative;83  }84  .nav-item.active {85    background: #FFFFFF; color: #222;86    border-left: 10px solid #D63B4F;87  }88  .badge {89    margin-left: auto;90    width: 48px; height: 48px; border-radius: 24px;91    background: #111; color: #fff; font-size: 28px;92    display:flex; align-items:center; justify-content:center;93  }94 95  /* Right content */96  .filters-main {97    flex: 1;98    padding: 24px 36px;99  }100  .search-size {101    height: 86px; border: 1px solid #E3E3E3; border-radius: 12px;102    display: flex; align-items: center; padding: 0 18px; color: #7A7A7A; font-size: 32px;103    margin-bottom: 8px;104  }105  .search-size svg { width: 30px; height: 30px; margin-right: 12px; stroke: #7A7A7A; stroke-width: 3; fill: none; }106 107  .size-list { margin-top: 8px; border-top: 1px solid #EFEFEF; }108  .size-row {109    display: flex; align-items: center;110    padding: 28px 6px;111    border-bottom: 1px solid #EFEFEF;112    font-size: 40px; color: #2E2E2E;113  }114  .size-number { width: 120px; }115  .size-count { flex: 1; color: #8A8A8A; font-size: 32px; }116  .checkbox {117    width: 48px; height: 48px; border: 2px solid #8A8A8A; border-radius: 10px;118  }119  .selected-pill {120    display: inline-flex; align-items: center; gap: 10px;121    background: #4CAF50; color: #fff;122    padding: 12px 18px; border-radius: 14px; font-size: 30px;123  }124  .selected-pill svg { width: 26px; height: 26px; stroke: #fff; stroke-width: 3; fill: none; }125 126  /* Bottom controls inside sheet */127  .bottom-controls {128    position: absolute; left: 36px; right: 36px; bottom: 160px;129    display: flex; gap: 28px;130  }131  .btn {132    height: 112px; border-radius: 18px; font-size: 36px; font-weight: 600;133    display:flex; align-items:center; justify-content:center; flex: 1;134  }135  .btn-outline {136    background: #FFFFFF; border: 2px solid #BDBDBD; color: #222;137  }138  .btn-primary {139    background: #D63B4F; border: none; color: #FFFFFF;140  }141 142  /* Small drag indicator above OS bar */143  .sheet-indicator {144    position: absolute; left: 0; right: 0; bottom: 300px;145    display: flex; justify-content: center;146  }147  .sheet-indicator div {148    width: 220px; height: 8px; border-radius: 6px; background: #BFBFBF;149  }150 151  /* OS navigation bar (mock) */152  .os-nav {153    position: absolute; left: 0; bottom: 0; width: 1080px; height: 140px;154    background: #000;155    display:flex; align-items:center; justify-content:center;156  }157  .home-pill {158    width: 220px; height: 12px; background: #CFCFCF; border-radius: 8px;159  }160</style>161</head>162<body>163<div id="render-target">164 165  <!-- Status bar -->166  <div class="status-bar">167    <div>9:57</div>168    <div class="status-icons">169      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2" fill="#666"/></svg>170      <svg viewBox="0 0 24 24"><path d="M3 12h18" stroke="#666" stroke-width="2"/></svg>171      <svg viewBox="0 0 24 24"><circle cx="10" cy="12" r="7" stroke="#666" fill="none" stroke-width="2"/><path d="M15 17l6 6" stroke="#666" stroke-width="2"/></svg>172      <span>100%</span>173    </div>174  </div>175 176  <!-- Header with search -->177  <div class="app-bar">178    <div class="back-btn">179      <svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>180    </div>181    <div class="search-pill">182      <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"/><path d="M14 14l6 6" stroke="#2F6CD1" stroke-width="2" fill="none"/></svg>183      <span>sport shoes men</span>184    </div>185    <div class="top-actions">186      <svg viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v10H3z" /></svg>187      <svg viewBox="0 0 24 24"><path d="M3 6h2l2 12h12l2-9H7" /></svg>188      <svg viewBox="0 0 24 24"><path d="M4 7h16v10l-6-3-4 3-6-3z" /></svg>189    </div>190  </div>191 192  <div class="result-text">Showing results for sport shoes men</div>193 194  <!-- Filters Sheet -->195  <div class="filter-sheet">196    <div class="sheet-header">197      <div class="sheet-title">Filters</div>198      <div class="close-btn">199        <svg viewBox="0 0 24 24"><path d="M4 4l16 16M20 4L4 20" /></svg>200      </div>201    </div>202 203    <div class="filters-content">204      <!-- Left navigation -->205      <div class="filters-nav">206        <div class="nav-item">Category</div>207        <div class="nav-item">Price</div>208        <div class="nav-item">Customer Rating</div>209        <div class="nav-item">Color</div>210        <div class="nav-item active">Size</div>211        <div class="nav-item">Brand <div class="badge">1</div></div>212        <div class="nav-item">Outer Material <div class="badge">1</div></div>213        <div class="nav-item">Cushioning</div>214        <div class="nav-item">Discount %</div>215      </div>216 217      <!-- Right content for size -->218      <div class="filters-main">219        <div class="search-size">220          <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"/><path d="M14 14l6 6" /></svg>221          <span>Search Size</span>222        </div>223 224        <div class="size-list">225          <div class="size-row">226            <div class="size-number">10</div>227            <div class="size-count">296</div>228            <div class="selected-pill">229              <svg viewBox="0 0 24 24"><path d="M4 12l6 6 10-12" /></svg>230              <span>Selected</span>231            </div>232          </div>233 234          <div class="size-row">235            <div class="size-number">11</div>236            <div class="size-count">6</div>237            <div class="checkbox"></div>238          </div>239 240          <div class="size-row">241            <div class="size-number">12</div>242            <div class="size-count">6</div>243            <div class="checkbox"></div>244          </div>245 246          <div class="size-row">247            <div class="size-number">6</div>248            <div class="size-count">423</div>249            <div class="checkbox"></div>250          </div>251 252          <div class="size-row">253            <div class="size-number">7</div>254            <div class="size-count">422</div>255            <div class="checkbox"></div>256          </div>257 258          <div class="size-row">259            <div class="size-number">8</div>260            <div class="size-count">378</div>261            <div class="checkbox"></div>262          </div>263 264          <div class="size-row">265            <div class="size-number">9</div>266            <div class="size-count">348</div>267            <div class="checkbox"></div>268          </div>269        </div>270      </div>271    </div>272 273    <div class="bottom-controls">274      <div class="btn btn-outline">Clear Filter</div>275      <div class="btn btn-primary">Apply Filter</div>276    </div>277 278    <div class="sheet-indicator"><div></div></div>279  </div>280 281  <!-- OS navigation bar mock -->282  <div class="os-nav"><div class="home-pill"></div></div>283 284</div>285</body>286</html>