GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Filter 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: #EEEEEE;14    font-family: Arial, Helvetica, sans-serif;15    color: #222;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    background: #1BA2A8;26    color: #fff;27  }28  .status-bar .time {29    position: absolute;30    left: 40px;31    top: 50%;32    transform: translateY(-50%);33    font-size: 40px;34    font-weight: 600;35    letter-spacing: 1px;36  }37  .status-icons {38    position: absolute;39    right: 40px;40    top: 50%;41    transform: translateY(-50%);42    display: flex;43    gap: 24px;44    align-items: center;45  }46  .status-icons svg { width: 42px; height: 42px; fill: none; stroke: #fff; stroke-width: 4; }47 48  /* Header */49  .header {50    position: absolute;51    top: 120px;52    left: 0;53    width: 1080px;54    height: 180px;55    background: #FFFFFF;56    box-shadow: 0 4px 12px rgba(0,0,0,0.12);57  }58  .header .title {59    position: absolute;60    left: 48px;61    top: 50%;62    transform: translateY(-50%);63    font-size: 56px;64    font-weight: 700;65    color: #333;66  }67  .close-btn {68    position: absolute;69    right: 40px;70    top: 50%;71    transform: translateY(-50%);72    width: 80px;73    height: 80px;74    border: none;75    background: transparent;76    cursor: default;77  }78  .close-btn svg { width: 80px; height: 80px; stroke: #48A7A9; stroke-width: 6; }79 80  /* Content area */81  .content {82    position: absolute;83    top: 300px;84    left: 0;85    width: 1080px;86    height: 1760px;87  }88 89  .filter-list {90    list-style: none;91    margin: 0;92    padding: 0 0 0 48px;93    width: 470px;94  }95  .filter-list li {96    font-size: 42px;97    padding: 36px 24px 36px 0;98    border-bottom: 1px solid #D8D8D8;99    color: #222;100    position: relative;101  }102  .filter-list li:last-child { border-bottom: none; }103  .filter-list .count-badge {104    position: absolute;105    right: 24px;106    top: 50%;107    transform: translateY(-50%);108    font-size: 40px;109    color: #2AAEC0;110    font-weight: 600;111  }112  .filter-list .active {113    background: #FFFFFF;114    color: #2AAEC0;115    border: 1px solid #E6E6E6;116    margin: 24px 0;117    box-shadow: 0 2px 6px rgba(0,0,0,0.06);118  }119 120  /* Right dropdown panel for sizes */121  .size-panel {122    position: absolute;123    left: 470px;124    top: 880px; /* aligned near the active list item */125    width: 610px;126    background: #FFFFFF;127    box-shadow: 0 6px 16px rgba(0,0,0,0.15);128    border-radius: 2px;129  }130  .size-list {131    list-style: none;132    margin: 0;133    padding: 12px 0;134  }135  .size-list li {136    display: flex;137    align-items: center;138    justify-content: space-between;139    padding: 28px 36px;140    font-size: 40px;141    border-bottom: 1px solid #EFEFEF;142    color: #666;143    position: relative;144  }145  .size-list li .left { color: #333; font-weight: 600; }146  .size-list li .right { color: #8A8A8A; }147  .size-list li:last-child { border-bottom: none; }148  .size-list li .dot {149    position: absolute;150    right: 24px;151    top: 50%;152    transform: translateY(-50%);153    width: 18px;154    height: 18px;155    background: #2AAEC0;156    border-radius: 50%;157  }158 159  /* Bottom actions bar */160  .actions {161    position: absolute;162    left: 0;163    bottom: 140px; /* above navigation bar */164    width: 1080px;165    height: 180px;166    background: #FFFFFF;167    border-top: 1px solid #E0E0E0;168    display: flex;169  }170  .actions .clear, .actions .apply {171    flex: 1;172    display: flex;173    align-items: center;174    justify-content: center;175    font-size: 42px;176    font-weight: 700;177    letter-spacing: 0.5px;178  }179  .actions .clear {180    color: #FF7A00;181    background: #FFFFFF;182  }183  .actions .apply {184    color: #FFFFFF;185    background: linear-gradient(90deg, #FF8B38, #FF6E4E, #FA5B68);186  }187  .actions .clear::after {188    content: "";189    position: absolute;190    left: 540px;191    top: 0;192    width: 1px;193    height: 100%;194    background: #E8E8E8;195  }196 197  /* Navigation bar */198  .nav {199    position: absolute;200    left: 0;201    bottom: 0;202    width: 1080px;203    height: 140px;204    background: #000000;205  }206  .nav .pill {207    position: absolute;208    left: 50%;209    bottom: 36px;210    transform: translateX(-50%);211    width: 180px;212    height: 16px;213    background: #BDBDBD;214    border-radius: 12px;215  }216</style>217</head>218<body>219<div id="render-target">220 221  <!-- Status bar -->222  <div class="status-bar">223    <div class="time">10:41</div>224    <div class="status-icons">225      <!-- Simple signal icon -->226      <svg viewBox="0 0 24 24">227        <path d="M3 16h3M5 12h3M7 8h3M9 4h3" />228      </svg>229      <!-- Lock icon -->230      <svg viewBox="0 0 24 24">231        <rect x="5" y="10" width="14" height="10" rx="2"></rect>232        <path d="M8 10V7a4 4 0 0 1 8 0v3" />233      </svg>234      <!-- Battery icon -->235      <svg viewBox="0 0 24 24">236        <rect x="2" y="6" width="18" height="12" rx="2"></rect>237        <rect x="4" y="8" width="12" height="8" fill="#fff" stroke="none"></rect>238        <rect x="18" y="10" width="2" height="6" rx="1"></rect>239      </svg>240    </div>241  </div>242 243  <!-- Header -->244  <div class="header">245    <div class="title">Filter By</div>246    <button class="close-btn" aria-label="Close">247      <svg viewBox="0 0 24 24">248        <path d="M4 4L20 20M20 4L4 20"></path>249      </svg>250    </button>251  </div>252 253  <!-- Content -->254  <div class="content">255    <ul class="filter-list">256      <li>Price</li>257      <li>Brand <span class="count-badge">1</span></li>258      <li>Color</li>259      <li>Sole material</li>260      <li>Upper Material</li>261      <li class="active">Size - EUR or IND</li>262      <li>Discount</li>263      <li>Product Rating</li>264    </ul>265 266    <!-- Right floating panel with sizes -->267    <div class="size-panel">268      <ul class="size-list">269        <li><span class="left">38 (EUR)</span><span class="right">(23)</span><span class="dot"></span></li>270        <li><span class="left">40 (EUR)</span><span class="right">(22)</span></li>271        <li><span class="left">37 (EUR)</span><span class="right">(21)</span></li>272        <li><span class="left">39 (EUR)</span><span class="right">(21)</span></li>273        <li><span class="left">41 (EUR)</span><span class="right">(17)</span></li>274      </ul>275    </div>276  </div>277 278  <!-- Bottom actions -->279  <div class="actions">280    <div class="clear">CLEAR ALL</div>281    <div class="apply">APPLY FILTER</div>282  </div>283 284  <!-- Navigation bar -->285  <div class="nav">286    <div class="pill"></div>287  </div>288 289</div>290</body>291</html>