GD-ML/AndroidCode

1<!DOCTYPE html>2<html>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 { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Top status bar */18  .statusbar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 110px;24    padding: 0 40px;25    box-sizing: border-box;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #333;30    font-size: 36px;31  }32  .status-icons {33    display: flex;34    align-items: center;35    gap: 24px;36  }37  .status-icons svg { display: block; }38 39  /* Header */40  .header {41    position: absolute;42    top: 110px;43    left: 0;44    width: 1080px;45    height: 120px;46    display: flex;47    align-items: center;48    box-sizing: border-box;49    padding: 0 36px;50  }51  .back-icon {52    width: 60px;53    height: 60px;54    margin-right: 20px;55  }56  .header-title {57    font-size: 48px;58    font-weight: 600;59    color: #222;60  }61  .clear-filters {62    margin-left: auto;63    font-size: 38px;64    color: #666;65  }66 67  /* Layout */68  .content {69    position: absolute;70    top: 230px;71    left: 0;72    width: 1080px;73    height: 1730px;74    display: flex;75  }76  .sidebar {77    width: 320px;78    background: #eef1f4;79    border-right: 1px solid #e3e3e3;80    padding-top: 10px;81    box-sizing: border-box;82  }83  .side-item {84    padding: 36px 30px;85    font-size: 36px;86    color: #333;87    border-bottom: 1px solid #e6e6e6;88    position: relative;89  }90  .side-item.blue { color: #1a73e8; }91  .side-item .tick {92    position: absolute;93    right: 22px;94    top: 50%;95    transform: translateY(-50%);96    width: 34px;97    height: 34px;98  }99 100  .main {101    flex: 1;102    padding: 20px 40px;103    box-sizing: border-box;104  }105  .filter-option {106    display: flex;107    align-items: center;108    padding: 34px 0;109    gap: 28px;110  }111  .checkbox {112    width: 56px;113    height: 56px;114    border: 4px solid #2d2d2d;115    border-radius: 8px;116    box-sizing: border-box;117  }118  .filter-label {119    font-size: 40px;120    color: #222;121  }122  .filter-option.disabled .checkbox {123    border-color: #d6d6d6;124    background: #f5f5f5;125  }126  .filter-option.disabled .filter-label {127    color: #cfcfcf;128  }129 130  /* Bottom bar */131  .bottom-area {132    position: absolute;133    left: 0;134    bottom: 0;135    width: 1080px;136    height: 340px;137    box-sizing: border-box;138    padding: 40px 40px 120px 40px;139  }140  .bottom-content {141    display: flex;142    align-items: center;143  }144  .count {145    font-size: 46px;146    font-weight: 700;147    color: #222;148  }149  .subtext {150    font-size: 30px;151    color: #9e9e9e;152    margin-top: 10px;153  }154  .apply-btn {155    margin-left: auto;156    width: 520px;157    height: 110px;158    background: #ff6a00;159    color: #fff;160    font-size: 44px;161    font-weight: 600;162    border-radius: 14px;163    display: flex;164    align-items: center;165    justify-content: center;166  }167 168  /* Gesture pill / nav bar */169  .nav-bar {170    position: absolute;171    bottom: 0;172    left: 0;173    width: 1080px;174    height: 120px;175    background: #000;176    display: flex;177    align-items: center;178    justify-content: center;179  }180  .pill {181    width: 300px;182    height: 16px;183    background: #cfcfcf;184    border-radius: 12px;185  }186</style>187</head>188<body>189<div id="render-target">190  <!-- Status Bar -->191  <div class="statusbar">192    <div>8:40</div>193    <div class="status-icons">194      <!-- Signal -->195      <svg width="36" height="36" viewBox="0 0 24 24">196        <rect x="2" y="14" width="3" height="8" fill="#666"/>197        <rect x="7" y="10" width="3" height="12" fill="#666"/>198        <rect x="12" y="6" width="3" height="16" fill="#666"/>199        <rect x="17" y="2" width="3" height="20" fill="#666"/>200      </svg>201      <!-- WiFi -->202      <svg width="36" height="36" viewBox="0 0 24 24">203        <path d="M2 9c5-4 15-4 20 0" stroke="#666" stroke-width="2" fill="none"/>204        <path d="M5 12c3-3 11-3 14 0" stroke="#666" stroke-width="2" fill="none"/>205        <path d="M9 15c2-2 6-2 8 0" stroke="#666" stroke-width="2" fill="none"/>206        <circle cx="12" cy="18" r="2" fill="#666"/>207      </svg>208      <!-- Battery -->209      <svg width="44" height="36" viewBox="0 0 28 16">210        <rect x="1" y="3" width="22" height="10" rx="2" ry="2" stroke="#666" stroke-width="2" fill="none"/>211        <rect x="3" y="5" width="16" height="6" fill="#666"/>212        <rect x="23" y="6" width="4" height="4" fill="#666"/>213      </svg>214    </div>215  </div>216 217  <!-- Header -->218  <div class="header">219    <svg class="back-icon" viewBox="0 0 24 24">220      <path d="M15 6l-6 6 6 6" stroke="#222" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>221    </svg>222    <div class="header-title">Filters</div>223    <div class="clear-filters">Clear Filters</div>224  </div>225 226  <!-- Main content area -->227  <div class="content">228    <!-- Sidebar -->229    <div class="sidebar">230      <div class="side-item blue">Price</div>231      <div class="side-item">Plus (FAssured)</div>232      <div class="side-item">Deliver At233        <svg class="tick" viewBox="0 0 24 24">234          <path d="M4 12l5 5 11-11" stroke="#1a73e8" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>235        </svg>236      </div>237      <div class="side-item">Brand</div>238      <div class="side-item">Customer Ratings</div>239      <div class="side-item">Offers</div>240      <div class="side-item">Discount</div>241      <div class="side-item">Material</div>242      <div class="side-item">Type</div>243      <div class="side-item">GST Invoice Available</div>244      <div class="side-item">Color</div>245      <div class="side-item">Availability</div>246      <div class="side-item">Category</div>247    </div>248 249    <!-- Right panel -->250    <div class="main">251      <div class="filter-option">252        <div class="checkbox"></div>253        <div class="filter-label">Rs. 500 and Below</div>254      </div>255      <div class="filter-option">256        <div class="checkbox"></div>257        <div class="filter-label">Rs. 501 - Rs. 1000</div>258      </div>259      <div class="filter-option">260        <div class="checkbox"></div>261        <div class="filter-label">Rs. 1001 - Rs. 2000</div>262      </div>263      <div class="filter-option">264        <div class="checkbox"></div>265        <div class="filter-label">Rs. 2001 - Rs. 5000</div>266      </div>267      <div class="filter-option disabled">268        <div class="checkbox"></div>269        <div class="filter-label">Rs. 5001 - Rs. 10000</div>270      </div>271      <div class="filter-option disabled">272        <div class="checkbox"></div>273        <div class="filter-label">Rs. 10001 and Above</div>274      </div>275    </div>276  </div>277 278  <!-- Bottom area -->279  <div class="bottom-area">280    <div class="bottom-content">281      <div>282        <div class="count">338</div>283        <div class="subtext">products found</div>284      </div>285      <div class="apply-btn">Apply</div>286    </div>287  </div>288 289  <!-- Navigation pill bar -->290  <div class="nav-bar">291    <div class="pill"></div>292  </div>293</div>294</body>295</html>