GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Filters UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, Helvetica, sans-serif;13    color: #212121;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #ffffff;21  }22 23  /* Top status bar (mock) */24  .status-bar {25    height: 110px;26    padding: 0 36px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #757575;31    font-size: 40px;32  }33  .status-icons {34    display: flex;35    gap: 26px;36    align-items: center;37  }38  .dot {39    width: 12px; height: 12px; background: #9e9e9e; border-radius: 50%;40  }41  .sig, .wifi, .bat {42    width: 38px; height: 24px; border: 2px solid #9e9e9e; border-radius: 3px;43  }44 45  /* Header */46  .header {47    height: 140px;48    display: flex;49    align-items: center;50    padding: 0 36px;51    border-bottom: 1px solid #eeeeee;52  }53  .back {54    width: 80px;55    height: 80px;56    display: flex;57    align-items: center;58    justify-content: center;59    margin-right: 12px;60  }61  .header h1 {62    font-size: 56px;63    font-weight: 600;64    margin: 0;65  }66  .clear {67    margin-left: auto;68    color: #9e9e9e;69    font-size: 44px;70  }71 72  /* Main content */73  .content {74    position: absolute;75    top: 250px; /* status + header */76    bottom: 320px; /* space for bottom action bar */77    left: 0;78    right: 0;79    display: flex;80  }81 82  .left-pane {83    width: 330px;84    background: #eef1f5;85    border-right: 1px solid #e0e0e0;86    overflow: hidden;87  }88  .left-item {89    height: 140px;90    display: flex;91    align-items: center;92    padding: 0 28px;93    font-size: 44px;94    color: #263238;95    border-bottom: 1px solid #e6e6e6;96  }97  .left-item.active-label {98    color: #1e88e5;99    background: transparent;100    border-bottom: none;101    height: 120px;102  }103  .left-item.selected {104    background: #e3e7ed;105    font-weight: 600;106  }107 108  .right-pane {109    flex: 1;110    padding: 24px 60px;111  }112  .section-title {113    color: #9e9e9e;114    font-size: 42px;115    margin: 20px 0 40px;116    font-weight: 600;117  }118  .filter-row {119    display: flex;120    align-items: center;121    gap: 28px;122    margin: 36px 0 54px;123  }124  .checkbox {125    width: 64px;126    height: 64px;127    border: 4px solid #424242;128    border-radius: 10px;129  }130  .filter-label {131    font-size: 52px;132  }133 134  /* Bottom action area */135  .bottom-actions {136    position: absolute;137    left: 0;138    right: 0;139    bottom: 110px; /* keep above gesture area */140    height: 210px;141    display: flex;142    align-items: center;143    padding: 0 48px;144  }145  .results {146    color: #212121;147    font-size: 52px;148    font-weight: 700;149  }150  .results small {151    display: block;152    color: #9e9e9e;153    font-size: 36px;154    font-weight: 600;155    margin-top: 10px;156  }157  .apply-btn {158    margin-left: auto;159    width: 470px;160    height: 120px;161    background: #e8672e;162    color: #fff;163    border-radius: 12px;164    display: flex;165    align-items: center;166    justify-content: center;167    font-size: 50px;168    font-weight: 700;169    box-shadow: 0 4px 0 rgba(0,0,0,0.08);170  }171 172  /* Bottom gesture area */173  .gesture {174    position: absolute;175    left: 0; right: 0; bottom: 0;176    height: 110px;177    background: #000;178    display: flex;179    align-items: center;180    justify-content: center;181  }182  .gesture .bar {183    width: 300px;184    height: 14px;185    background: #e0e0e0;186    border-radius: 10px;187    opacity: 0.9;188  }189</style>190</head>191<body>192<div id="render-target">193 194  <!-- Mock status bar -->195  <div class="status-bar">196    <div>12:18</div>197    <div class="status-icons">198      <div class="dot"></div>199      <div class="sig"></div>200      <div class="wifi"></div>201      <div class="bat"></div>202    </div>203  </div>204 205  <!-- Header -->206  <div class="header">207    <div class="back" aria-label="Back">208      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">209        <path d="M15.5 19L8.5 12L15.5 5" stroke="#212121" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>210      </svg>211    </div>212    <h1>Filters</h1>213    <div class="clear">Clear Filters</div>214  </div>215 216  <!-- Main content -->217  <div class="content">218    <div class="left-pane">219      <div class="left-item active-label">Ideal For</div>220      <div class="left-item selected">Plus (FAssured)</div>221      <div class="left-item">Discount</div>222      <div class="left-item">Price</div>223      <div class="left-item">Customer Ratings</div>224      <div class="left-item">Age/Size</div>225      <div class="left-item">Brand</div>226      <div class="left-item">Color</div>227      <div class="left-item">Fabric</div>228      <div class="left-item">Fit</div>229      <div class="left-item">Pattern</div>230      <div class="left-item">Type</div>231      <div class="left-item">Offers</div>232    </div>233 234    <div class="right-pane">235      <div class="section-title">Popular Filters</div>236 237      <div class="filter-row">238        <div class="checkbox"></div>239        <div class="filter-label">Boys</div>240      </div>241 242      <div class="filter-row">243        <div class="checkbox"></div>244        <div class="filter-label">Baby Boys</div>245      </div>246    </div>247  </div>248 249  <!-- Bottom actions -->250  <div class="bottom-actions">251    <div>252      <div class="results">1,379</div>253      <small>products found</small>254    </div>255    <div class="apply-btn">Apply</div>256  </div>257 258  <!-- Gesture area -->259  <div class="gesture">260    <div class="bar"></div>261  </div>262 263</div>264</body>265</html>