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    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: #EEEEEE;14    font-family: "Helvetica Neue", Arial, sans-serif;15    color: #212121;16  }17 18  /* Top status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 100%;24    height: 120px;25    background: #1B9AA0;26    padding: 0 36px;27    display: flex;28    align-items: center;29    color: #fff;30    font-size: 38px;31    letter-spacing: 0.5px;32  }33  .status-left { display: flex; align-items: center; gap: 24px; }34  .status-right {35    margin-left: auto;36    display: flex;37    align-items: center;38    gap: 28px;39  }40  .icon-wifi, .icon-battery {41    width: 48px; height: 48px;42  }43 44  /* Header sheet */45  .header {46    position: absolute;47    top: 120px;48    left: 0;49    width: 100%;50    height: 160px;51    background: #FFFFFF;52    box-shadow: 0 2px 6px rgba(0,0,0,0.12);53    display: flex;54    align-items: center;55    padding: 0 40px;56  }57  .header-title {58    font-size: 58px;59    font-weight: 600;60  }61  .header-close {62    margin-left: auto;63    width: 72px;64    height: 72px;65    cursor: pointer;66  }67  .header-close svg { width: 72px; height: 72px; }68  .header-close line { stroke: #4ba8ad; stroke-width: 8; stroke-linecap: round; }69 70  /* Main layout */71  .content {72    position: absolute;73    top: 280px;74    left: 0;75    right: 0;76    bottom: 300px; /* leave space for footer & nav */77    display: block;78  }79 80  .filters-list {81    width: 440px;82    border-right: 0;83  }84  .filter-item {85    height: 120px;86    display: flex;87    align-items: center;88    justify-content: space-between;89    padding: 0 44px;90    font-size: 44px;91    color: #333;92    border-bottom: 1px solid #E0E0E0;93    background: transparent;94  }95  .filter-count {96    color: #1B9AA0;97    font-weight: 600;98    font-size: 40px;99  }100  .filter-highlight {101    background: #F5F5F5;102  }103  .filter-highlight .label {104    color: #1B9AA0;105    font-weight: 600;106  }107 108  /* Right panel dropdown */109  .right-panel {110    position: absolute;111    top: 360px;112    left: 440px;113    width: 640px;114    background: #FFFFFF;115    border-radius: 6px;116    box-shadow: 0 2px 6px rgba(0,0,0,0.10);117    overflow: hidden;118  }119  .option {120    height: 120px;121    display: flex;122    align-items: center;123    justify-content: space-between;124    padding: 0 40px;125    font-size: 44px;126    color: #707070;127    border-bottom: 1px solid #F0F0F0;128  }129  .option:last-child { border-bottom: none; }130 131  /* Bottom action bar */132  .actions {133    position: absolute;134    bottom: 130px;135    left: 0;136    width: 100%;137    height: 180px;138    display: flex;139    box-shadow: 0 -2px 6px rgba(0,0,0,0.12);140    border-top: 1px solid #E5E5E5;141  }142  .clear {143    width: 40%;144    background: #FFFFFF;145    display: flex;146    align-items: center;147    justify-content: center;148    color: #FF7A00;149    font-weight: 700;150    font-size: 46px;151    letter-spacing: 0.5px;152  }153  .apply {154    width: 60%;155    background: linear-gradient(90deg, #FF8A3D, #FF6A5F, #FF5F7A);156    display: flex;157    align-items: center;158    justify-content: center;159    color: #FFFFFF;160    font-weight: 700;161    font-size: 46px;162    letter-spacing: 0.5px;163  }164 165  /* Bottom navigation bar */166  .nav-bar {167    position: absolute;168    bottom: 0;169    left: 0;170    width: 100%;171    height: 130px;172    background: #000000;173  }174  .home-pill {175    position: absolute;176    bottom: 36px;177    left: 50%;178    transform: translateX(-50%);179    width: 220px;180    height: 16px;181    background: #CFCFCF;182    border-radius: 10px;183  }184</style>185</head>186<body>187<div id="render-target">188 189  <!-- Status bar -->190  <div class="status-bar">191    <div class="status-left">192      <div>10:40</div>193      <div>S</div>194      <div>🔒</div>195      <div>LR</div>196      <div>•</div>197      <div>N</div>198    </div>199    <div class="status-right">200      <!-- Simple wifi icon -->201      <svg class="icon-wifi" viewBox="0 0 24 24">202        <path d="M12 19a2 2 0 1 0 0.001 0z" fill="#fff"/>203        <path d="M4 10c4.418-4 11.582-4 16 0" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>204        <path d="M7 13c2.761-2 7.239-2 10 0" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>205      </svg>206      <!-- Battery icon -->207      <svg class="icon-battery" viewBox="0 0 32 24">208        <rect x="2" y="5" width="24" height="14" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>209        <rect x="4" y="7" width="18" height="10" fill="#fff"/>210        <rect x="26" y="9" width="4" height="6" rx="1" fill="#fff"/>211      </svg>212    </div>213  </div>214 215  <!-- Header -->216  <div class="header">217    <div class="header-title">Filter By</div>218    <div class="header-close">219      <svg viewBox="0 0 72 72">220        <line x1="18" y1="18" x2="54" y2="54"></line>221        <line x1="54" y1="18" x2="18" y2="54"></line>222      </svg>223    </div>224  </div>225 226  <!-- Content -->227  <div class="content">228    <!-- Left filter list -->229    <div class="filters-list">230      <div class="filter-item"><span class="label">Price</span></div>231      <div class="filter-item"><span class="label">Brand</span><span class="filter-count">1</span></div>232      <div class="filter-item"><span class="label">Color</span></div>233      <div class="filter-item"><span class="label">Sole material</span></div>234      <div class="filter-item"><span class="label">Upper Material</span></div>235      <div class="filter-item filter-highlight"><span class="label">Size - EUR or IND</span></div>236      <div class="filter-item"><span class="label">Discount</span></div>237      <div class="filter-item" style="border-bottom:none;"><span class="label">Product Rating</span></div>238    </div>239 240    <!-- Right dropdown panel -->241    <div class="right-panel">242      <div class="option"><span>38 (EUR)</span><span>(23)</span></div>243      <div class="option"><span>40 (EUR)</span><span>(22)</span></div>244      <div class="option"><span>37 (EUR)</span><span>(21)</span></div>245      <div class="option"><span>39 (EUR)</span><span>(21)</span></div>246      <div class="option"><span>41 (EUR)</span><span>(17)</span></div>247    </div>248  </div>249 250  <!-- Bottom actions -->251  <div class="actions">252    <div class="clear">CLEAR ALL</div>253    <div class="apply">APPLY FILTER</div>254  </div>255 256  <!-- Bottom navigation bar -->257  <div class="nav-bar">258    <div class="home-pill"></div>259  </div>260 261</div>262</body>263</html>