GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Filters UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    font-family: "Segoe UI", Arial, sans-serif;15    color: #2c2c2c;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 130px;25    padding: 0 48px;26    box-sizing: border-box;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #4a4a4a;31    font-size: 34px;32    letter-spacing: 0.5px;33  }34  .status-icons {35    display: flex;36    align-items: center;37    gap: 28px;38  }39  .icon {40    width: 40px; height: 40px;41  }42 43  /* Header */44  .header {45    position: absolute;46    top: 130px;47    left: 0;48    width: 1080px;49    height: 140px;50    display: flex;51    align-items: center;52    box-sizing: border-box;53    padding: 0 48px;54    border-top: 1px solid #eee;55    border-bottom: 1px solid #e8e8e8;56  }57  .header-title {58    font-weight: 700;59    font-size: 40px;60    color: #4a4a4a;61  }62  .spacer { flex: 1; }63  .clear-all {64    font-size: 34px;65    font-weight: 700;66    color: #ff4f7b;67    letter-spacing: 0.3px;68  }69 70  /* Main two-column layout */71  .content {72    position: absolute;73    top: 270px; /* 130 + 140 */74    left: 0;75    width: 1080px;76    height: 1820px; /* remaining minus footer + nav */77    display: flex;78  }79 80  /* Left filter groups */81  .left-panel {82    width: 360px;83    border-right: 1px solid #e6e6e6;84    background: #f5f6f7;85  }86  .group-item {87    height: 120px;88    padding: 0 36px;89    box-sizing: border-box;90    display: flex;91    align-items: center;92    justify-content: space-between;93    border-bottom: 1px solid #e7e7e7;94    font-size: 34px;95    color: #4a4a4a;96  }97  .group-item.active {98    background: #ffffff;99    font-weight: 700;100  }101  .group-count {102    color: #9e9e9e;103    font-weight: 700;104  }105 106  /* Right options list */107  .right-panel {108    flex: 1;109    background: #ffffff;110  }111  .option-row {112    height: 120px;113    box-sizing: border-box;114    padding: 0 36px;115    border-bottom: 1px solid #efefef;116    display: flex;117    align-items: center;118    gap: 28px;119    color: #3a3a3a;120    font-size: 34px;121  }122  .option-row .label { flex: 1; }123  .option-row .count {124    color: #b5b5b5;125    font-weight: 600;126  }127  .select-all {128    font-weight: 700;129    color: #2e2e2e;130  }131 132  .checkbox {133    width: 46px; height: 46px; border: 2px solid #bfc3c7; border-radius: 8px;134  }135  .checkmark {136    width: 46px; height: 46px;137  }138  .checkmark svg { width: 100%; height: 100%; }139  .checkmark path { stroke: #bfc3c7; stroke-width: 8; fill: none; stroke-linecap: round; stroke-linejoin: round; }140 141  /* Footer action bar */142  .footer {143    position: absolute;144    bottom: 120px; /* keep space for system nav */145    left: 0;146    width: 1080px;147    height: 180px;148    border-top: 1px solid #e6e6e6;149    background: #ffffff;150    display: flex;151    align-items: center;152    justify-content: center;153    gap: 32px;154  }155  .footer-inner {156    width: 984px;157    display: flex;158    align-items: center;159    justify-content: space-between;160    color: #5b5b5b;161    font-size: 36px;162    font-weight: 700;163  }164  .footer-divider {165    width: 1px;166    height: 64px;167    background: #dcdcdc;168  }169  .apply {170    color: #ff4f7b;171    font-weight: 800;172  }173 174  /* System navigation bar simulation */175  .system-nav {176    position: absolute;177    bottom: 0; left: 0;178    width: 1080px; height: 120px;179    background: #1c1f24;180    display: flex; align-items: center; justify-content: center;181  }182  .nav-pill {183    width: 220px; height: 16px; background: #cfcfcf; border-radius: 12px; opacity: 0.5;184  }185</style>186</head>187<body>188<div id="render-target">189 190  <!-- Status bar -->191  <div class="status-bar">192    <div>9:01</div>193    <div class="status-icons">194      <!-- simple mail icon -->195      <svg class="icon" viewBox="0 0 24 24">196        <path d="M3 6h18v12H3z" fill="none" stroke="#6f6f6f" stroke-width="2"/>197        <path d="M3 6l9 6 9-6" fill="none" stroke="#6f6f6f" stroke-width="2"/>198      </svg>199      <!-- download icon -->200      <svg class="icon" viewBox="0 0 24 24">201        <path d="M12 4v10" stroke="#6f6f6f" stroke-width="2" fill="none"/>202        <path d="M8 10l4 4 4-4" stroke="#6f6f6f" stroke-width="2" fill="none"/>203        <path d="M4 20h16" stroke="#6f6f6f" stroke-width="2" fill="none"/>204      </svg>205      <!-- wifi -->206      <svg class="icon" viewBox="0 0 24 24">207        <path d="M2 8c5-4 15-4 20 0" fill="none" stroke="#6f6f6f" stroke-width="2"/>208        <path d="M5 11c4-3 10-3 14 0" fill="none" stroke="#6f6f6f" stroke-width="2"/>209        <path d="M8 14c3-2 5-2 8 0" fill="none" stroke="#6f6f6f" stroke-width="2"/>210        <circle cx="12" cy="17" r="2" fill="#6f6f6f"/>211      </svg>212      <!-- battery -->213      <svg class="icon" viewBox="0 0 28 16">214        <rect x="1" y="1" width="22" height="14" rx="2" ry="2" fill="none" stroke="#6f6f6f" stroke-width="2"/>215        <rect x="4" y="4" width="16" height="8" fill="#6f6f6f"/>216        <rect x="23" y="5" width="4" height="6" rx="1" fill="#6f6f6f"/>217      </svg>218    </div>219  </div>220 221  <!-- Header -->222  <div class="header">223    <div class="header-title">Filters</div>224    <div class="spacer"></div>225    <div class="clear-all">CLEAR ALL</div>226  </div>227 228  <!-- Content -->229  <div class="content">230    <!-- Left groups -->231    <div class="left-panel">232      <div class="group-item">Quick Filters</div>233      <div class="group-item active">Size</div>234      <div class="group-item">Color</div>235      <div class="group-item">Brand <span class="group-count">1</span></div>236      <div class="group-item">Country of Origin</div>237      <div class="group-item">Price Range</div>238      <div class="group-item">Discount</div>239      <div class="group-item">Rating</div>240      <div class="group-item">Delivery Time</div>241      <div class="group-item">Sole Material <span class="group-count">1</span></div>242      <div class="group-item">Running Type</div>243      <div class="group-item">Warranty</div>244      <div class="group-item">Pronation for Running Shoes</div>245      <div class="group-item">Material</div>246    </div>247 248    <!-- Right options -->249    <div class="right-panel">250      <div class="option-row select-all">251        <div class="checkbox"></div>252        <div class="label">Select All (29)</div>253      </div>254 255      <div class="option-row">256        <div class="checkmark">257          <svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"></path></svg>258        </div>259        <div class="label">UK5</div>260        <div class="count">13</div>261      </div>262      <div class="option-row">263        <div class="checkmark">264          <svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"></path></svg>265        </div>266        <div class="label">UK5.5</div>267        <div class="count">56</div>268      </div>269      <div class="option-row">270        <div class="checkmark">271          <svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"></path></svg>272        </div>273        <div class="label">UK6</div>274        <div class="count">77</div>275      </div>276      <div class="option-row">277        <div class="checkmark">278          <svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"></path></svg>279        </div>280        <div class="label">UK6.5</div>281        <div class="count">58</div>282      </div>283      <div class="option-row">284        <div class="checkmark">285          <svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"></path></svg>286        </div>287        <div class="label">UK7</div>288        <div class="count">7