GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Filters UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #ffffff;13  }14 15  /* Status bar */16  .status-bar {17    height: 90px;18    padding: 0 32px;19    display: flex;20    align-items: center;21    color: #222;22    font-weight: 600;23    font-size: 42px;24  }25  .status-icons {26    margin-left: auto;27    display: flex;28    align-items: center;29    gap: 24px;30  }31  .icon-dot {32    width: 26px; height: 26px; border-radius: 50%; border: 2px solid #7a7a7a;33  }34  .battery {35    width: 60px; height: 32px; border: 3px solid #7a7a7a; border-radius: 6px; position: relative;36  }37  .battery::after { content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 16px; background: #7a7a7a; border-radius: 2px; }38 39  /* Header */40  .header {41    height: 130px;42    display: flex;43    align-items: center;44    padding: 0 24px;45    border-bottom: 1px solid #e5e5e5;46  }47  .back-btn {48    width: 90px; height: 90px; display: flex; align-items: center; justify-content: center;49  }50  .back-btn svg { width: 48px; height: 48px; }51  .title {52    font-size: 44px;53    font-weight: 700;54    color: #111;55    margin-left: 12px;56  }57 58  /* Main content */59  .content {60    position: absolute;61    top: 220px;62    left: 0;63    right: 0;64    bottom: 220px;65    display: flex;66  }67 68  /* Sidebar */69  .sidebar {70    width: 320px;71    background: #eef1f4;72    border-right: 1px solid #e2e2e2;73    overflow-y: auto;74  }75  .side-item {76    padding: 30px 26px;77    font-size: 36px;78    color: #333;79    border-bottom: 1px solid #e7e7e7;80  }81  .side-item.active {82    background: #ffffff;83    font-weight: 700;84    border-left: 6px solid #111;85  }86  .side-section {87    margin-top: 18px;88    padding: 24px 26px;89    font-size: 34px;90    color: #6a6a6a;91    background: #e6eaed;92    border-top: 1px solid #dcdcdc;93    border-bottom: 1px solid #dcdcdc;94  }95 96  /* Right panel */97  .panel {98    flex: 1;99    padding: 24px 24px 0 24px;100    overflow-y: auto;101  }102  .search-bar {103    height: 110px;104    border: 2px solid #d7d7d7;105    border-radius: 60px;106    display: flex;107    align-items: center;108    padding: 0 30px;109    gap: 24px;110    color: #777;111    font-size: 38px;112  }113  .search-bar .placeholder { flex: 1; }114  .search-bar svg { width: 48px; height: 48px; }115 116  .brand-group {117    margin-top: 8px;118  }119  .brand-item {120    display: flex;121    align-items: center;122    gap: 24px;123    padding: 26px 6px;124    border-bottom: 1px solid #efefef;125    font-size: 36px;126    color: #222;127  }128  .checkbox {129    width: 54px; height: 54px;130    border: 3px solid #bdbdbd;131    border-radius: 12px;132    box-sizing: border-box;133  }134  .count {135    color: #666;136    margin-left: 10px;137    font-size: 34px;138  }139  .alpha {140    font-size: 40px;141    font-weight: 700;142    color: #222;143    margin: 20px 0 6px 6px;144  }145 146  /* Bottom action bar */147  .bottom-bar {148    position: absolute;149    left: 0; right: 0; bottom: 0;150    height: 220px;151    background: #eef1f4;152    border-top: 1px solid #dedede;153    display: flex;154    align-items: center;155    justify-content: space-between;156    padding: 0 36px;157  }158  .btn {159    height: 120px;160    border-radius: 26px;161    display: flex;162    align-items: center;163    justify-content: center;164    font-size: 40px;165    font-weight: 700;166    letter-spacing: 0.5px;167  }168  .btn-reset {169    width: 420px;170    border: 2px solid #cfcfcf;171    background: #ffffff;172    color: #111;173  }174  .btn-apply {175    width: 640px;176    background: #1e1e1e;177    color: #ffffff;178  }179</style>180</head>181<body>182<div id="render-target">183 184  <!-- Status bar -->185  <div class="status-bar">186    12:39187    <div class="status-icons">188      <div class="icon-dot" title="signal"></div>189      <div class="icon-dot" title="wifi"></div>190      <div class="battery" title="battery"></div>191      <div style="font-size:32px; color:#111;">97%</div>192    </div>193  </div>194 195  <!-- Header -->196  <div class="header">197    <div class="back-btn">198      <svg viewBox="0 0 24 24">199        <path d="M15 18l-6-6 6-6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>200      </svg>201    </div>202    <div class="title">Filters (12038 products)</div>203  </div>204 205  <!-- Content -->206  <div class="content">207 208    <!-- Sidebar -->209    <div class="sidebar">210      <div class="side-item">Gender</div>211      <div class="side-item">Category</div>212      <div class="side-item">Price</div>213      <div class="side-item active">Brands</div>214      <div class="side-item">Occasion</div>215      <div class="side-item">Discount</div>216      <div class="side-item">Colors</div>217      <div class="side-item">Size &amp; Fit</div>218      <div class="side-item">Rating</div>219      <div class="side-section">More Filters</div>220      <div class="side-item">Style Type</div>221      <div class="side-item">Pattern</div>222      <div class="side-item">Upper Material</div>223      <div class="side-item">Toe Shape</div>224      <div class="side-item">Fit Type</div>225      <div class="side-item">Sport</div>226      <div class="side-item">Ankle Style</div>227      <div class="side-item">Character</div>228      <div class="side-item">Heel</div>229      <div class="side-item">Traditional<br>Weave</div>230    </div>231 232    <!-- Right panel -->233    <div class="panel">234      <div class="search-bar">235        <div class="placeholder">Search for brands</div>236        <svg viewBox="0 0 24 24">237          <circle cx="10" cy="10" r="6" stroke="#666" stroke-width="2" fill="none"></circle>238          <path d="M15 15l6 6" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>239        </svg>240      </div>241 242      <div class="brand-group">243        <div class="brand-item"><div class="checkbox"></div> AIRWALK <span class="count">(1)</span></div>244        <div class="brand-item"><div class="checkbox"></div> AIRWALK by Payless <span class="count">(26)</span></div>245        <div class="brand-item"><div class="checkbox"></div> AIVIN <span class="count">(35)</span></div>246        <div class="brand-item"><div class="checkbox"></div> AJANTA <span class="count">(12)</span></div>247        <div class="brand-item"><div class="checkbox"></div> AJIO <span class="count">(47)</span></div>248        <div class="brand-item"><div class="checkbox"></div> ALTHEORY <span class="count">(27)</span></div>249        <div class="brand-item"><div class="checkbox"></div> Amp <span class="count">(11)</span></div>250        <div class="brand-item"><div class="checkbox"></div> APPELON SHOES <span class="count">(9)</span></div>251        <div class="brand-item"><div class="checkbox"></div> AQUALITE <span class="count">(109)</span></div>252        <div class="brand-item"><div class="checkbox"></div> ASIAN <span class="count">(532)</span></div>253        <div class="brand-item"><div class="checkbox"></div> ASICS <span class="count">(253)</span></div>254        <div class="brand-item"><div class="checkbox"></div> Avant <span class="count">(65)</span></div>255        <div class="brand-item"><div class="checkbox"></div> AYGO <span class="count">(31)</span></div>256 257        <div class="alpha">B</div>258        <div class="brand-item"><div class="checkbox"></div> Bata <span class="count">(36)</span></div>259        <div class="brand-item"><div class="checkbox"></div> BEONZA <span class="count">(1)</span></div>260        <div class="brand-item"><div class="checkbox"></div> BERKINS <span class="count">(4)</span></div>261        <div class="brand-item"><div class="checkbox"></div> BIG FOX <span class="count">(10)</span></div>262      </div>263    </div>264  </div>265 266  <!-- Bottom bar -->267  <div class="bottom-bar">268    <div class="btn btn-reset">Reset</div>269    <div class="btn btn-apply">Apply Filter</div>270  </div>271 272</div>273</body>274</html>