GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Filter Screen</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #ffffff;14    font-family: Arial, Helvetica, sans-serif;15    color: #3d3d3d;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 110px;25    background: #dfdfdf;26    display: flex;27    align-items: center;28    padding: 0 40px;29    box-sizing: border-box;30    font-size: 44px;31    color: #616161;32    letter-spacing: 1px;33  }34  .status-icons {35    margin-left: auto;36    display: flex;37    align-items: center;38    gap: 28px;39  }40  .icon-pill { width: 44px; height: 28px; background:#cfcfcf; border-radius:14px; }41  .icon-dot { width: 14px; height: 14px; background:#bfbfbf; border-radius:50%; }42  .wifi {43    width: 44px; height: 32px;44    border: 3px solid #9e9e9e; border-top-left-radius: 24px; border-top-right-radius: 24px;45    border-bottom: none;46    position: relative;47  }48  .battery {49    width: 54px; height: 28px; border: 3px solid #9e9e9e; border-radius: 6px; position: relative;50  }51  .battery::after {52    content:""; position:absolute; right:-10px; top:8px; width:8px; height:12px; background:#9e9e9e; border-radius:2px;53  }54 55  /* Header */56  .header {57    position: absolute;58    top: 110px;59    left: 0;60    width: 1080px;61    height: 170px;62    background: #ffffff;63    border-bottom: 1px solid #e5e5e5;64    display: flex;65    align-items: center;66    padding: 0 36px;67    box-sizing: border-box;68  }69  .header-title {70    display: flex;71    align-items: center;72    gap: 28px;73    font-weight: 600;74    letter-spacing: 1px;75    color: #4a4a4a;76    font-size: 50px;77  }78  .header-action {79    margin-left: auto;80    font-size: 44px;81    color: #6b6b6b;82  }83  .icon-filter {84    width: 50px; height: 50px;85  }86 87  /* Main content */88  .content {89    position: absolute;90    top: 280px;91    left: 0;92    width: 1080px;93    height: 1770px;94    display: flex;95  }96  .sidebar {97    width: 320px;98    background: #e9e9e9;99    padding: 40px 28px;100    box-sizing: border-box;101  }102  .side-item {103    font-size: 44px;104    color: #777777;105    margin: 40px 0 70px;106  }107  .side-item.active {108    color: #3f3d9a;109    position: relative;110    padding-left: 32px;111  }112  .side-item.active::before {113    content:"";114    position: absolute;115    left: 0;116    top: 18px;117    width: 16px; height: 16px;118    background:#3f3d9a;119    border-radius:50%;120  }121 122  .list {123    flex: 1;124    background: #ffffff;125    padding: 10px 60px 10px 90px;126    box-sizing: border-box;127  }128  .row {129    display: flex;130    align-items: center;131    gap: 38px;132    height: 150px;133    border-bottom: 1px solid #f0f0f0;134  }135  .checkbox {136    width: 62px; height: 62px;137    border: 5px solid #7a7a7a;138    border-radius: 8px;139    box-sizing: border-box;140  }141  .checkbox.checked {142    background: #4c3ea7;143    border-color: #4c3ea7;144    display: flex;145    align-items: center;146    justify-content: center;147  }148  .row label {149    font-size: 46px;150    color: #4a4a4a;151  }152 153  /* Footer buttons */154  .footer {155    position: absolute;156    bottom: 120px;157    left: 0;158    width: 1080px;159    padding: 24px 28px;160    box-sizing: border-box;161    display: flex;162    gap: 28px;163  }164  .btn {165    flex: 1;166    height: 140px;167    border-radius: 28px;168    background: #f7f7f7;169    border: 2px solid #ececec;170    display: flex;171    align-items: center;172    justify-content: center;173    font-size: 50px;174    font-weight: 600;175    color: #5c5c5c;176  }177  .btn.primary {178    color: #4c3ea7;179    background: #ffffff;180    border-color: #e8e8e8;181  }182 183  /* Gesture bar */184  .nav-area {185    position: absolute;186    bottom: 0;187    left: 0;188    width: 1080px;189    height: 120px;190    background: #000000;191    display: flex;192    align-items: center;193    justify-content: center;194  }195  .gesture-pill {196    width: 240px; height: 16px; background:#dedede; border-radius: 8px;197  }198</style>199</head>200<body>201<div id="render-target">202 203  <!-- Status bar -->204  <div class="status-bar">205    <div>11:40</div>206    <div class="status-icons">207      <div class="icon-pill"></div>208      <div class="icon-pill"></div>209      <div class="icon-dot"></div>210      <div class="wifi"></div>211      <div class="battery"></div>212    </div>213  </div>214 215  <!-- Header -->216  <div class="header">217    <div class="header-title">218      <svg class="icon-filter" viewBox="0 0 24 24">219        <path d="M3 5h18l-7 8v5l-4 2v-7z" fill="#6b6b6b"></path>220      </svg>221      <span>FILTER</span>222    </div>223    <div class="header-action">CLEAR ALL</div>224  </div>225 226  <!-- Main content -->227  <div class="content">228    <div class="sidebar">229      <div class="side-item">Size</div>230      <div class="side-item">Price</div>231      <div class="side-item">Color</div>232      <div class="side-item">Nature</div>233      <div class="side-item active">Brand</div>234    </div>235 236    <div class="list">237      <div class="row">238        <div class="checkbox"></div>239        <label>Kalenji</label>240      </div>241      <div class="row">242        <div class="checkbox"></div>243        <label>Quechua</label>244      </div>245      <div class="row">246        <div class="checkbox"></div>247        <label>Newfeel</label>248      </div>249      <div class="row">250        <div class="checkbox"></div>251        <label>Decathlon</label>252      </div>253      <div class="row">254        <div class="checkbox"></div>255        <label>Perfly</label>256      </div>257      <div class="row">258        <div class="checkbox"></div>259        <label>Kipsta</label>260      </div>261      <div class="row">262        <div class="checkbox checked">263          <svg width="38" height="38" viewBox="0 0 24 24">264            <path d="M5 13l4 4 10-10" stroke="#ffffff" stroke-width="3.2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>265          </svg>266        </div>267        <label>Tarmak</label>268      </div>269      <div class="row">270        <div class="checkbox"></div>271        <label>Artengo</label>272      </div>273      <div class="row">274        <div class="checkbox"></div>275        <label>Kiprun</label>276      </div>277      <div class="row">278        <div class="checkbox"></div>279        <label>Forclaz</label>280      </div>281    </div>282  </div>283 284  <!-- Footer buttons -->285  <div class="footer">286    <div class="btn">CANCEL</div>287    <div class="btn primary">APPLY</div>288  </div>289 290  <!-- Gesture nav bar -->291  <div class="nav-area">292    <div class="gesture-pill"></div>293  </div>294 295</div>296</body>297</html>