GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Filters UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FFFFFF;14  }15 16  /* Status bar */17  .status-bar {18    height: 90px;19    padding: 16px 28px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #4a4a4a;24    font-size: 28px;25  }26  .status-icons {27    display: flex;28    gap: 18px;29    align-items: center;30  }31  .dot { width: 10px; height: 10px; border-radius: 50%; background:#4a4a4a; display:inline-block; }32 33  /* Header */34  .header {35    height: 130px;36    display: flex;37    align-items: center;38    padding: 0 28px;39    position: relative;40  }41  .header .title {42    font-size: 48px;43    font-weight: 700;44    margin-left: 16px;45  }46  .header .clear {47    position: absolute;48    right: 32px;49    font-size: 36px;50    color: #0d47a1;51  }52  .icon-btn {53    width: 56px;54    height: 56px;55    display: flex;56    align-items: center;57    justify-content: center;58  }59 60  /* Main layout */61  .main {62    position: absolute;63    top: 220px;64    bottom: 220px;65    left: 0;66    right: 0;67    display: flex;68  }69 70  .left-menu {71    width: 300px;72    background: #F2F4F7;73    height: 100%;74    overflow: hidden;75    border-right: 1px solid #E0E0E0;76  }77  .left-scroll {78    height: 100%;79    overflow-y: auto;80    padding-bottom: 120px;81  }82  .menu-item {83    position: relative;84    padding: 40px 28px;85    font-size: 36px;86    color: #111;87    border-bottom: 1px solid #E8EBEF;88    background: #F2F4F7;89  }90  .menu-item.selected {91    font-weight: 700;92  }93  .check {94    position: absolute;95    right: 24px;96    top: 50%;97    transform: translateY(-50%);98  }99 100  .content {101    flex: 1;102    background: #FFFFFF;103    height: 100%;104    overflow-y: auto;105    padding: 24px 40px;106  }107  .crumb {108    display: flex;109    align-items: center;110    color: #7b7b7b;111    font-size: 32px;112    margin-bottom: 28px;113    gap: 10px;114  }115  .cat-title {116    color: #1a73e8;117    font-size: 40px;118    font-weight: 600;119    margin-bottom: 40px;120  }121  .list-option {122    font-size: 44px;123    color: #1a1a1a;124    padding: 34px 0;125    border-bottom: 1px solid #F0F0F0;126  }127 128  /* Bottom bar */129  .bottom-bar {130    position: absolute;131    left: 0;132    right: 0;133    bottom: 110px;134    padding: 24px 32px;135    display: flex;136    align-items: center;137    justify-content: space-between;138  }139  .count {140    font-size: 36px;141    color: #222;142  }143  .count small { display:block; color:#7b7b7b; font-size: 28px; margin-top: 6px; }144  .apply-btn {145    background: #E8662E;146    color: #fff;147    border-radius: 16px;148    font-size: 42px;149    padding: 26px 80px;150    box-shadow: 0 2px 0 rgba(0,0,0,0.05);151  }152 153  /* Gesture bar */154  .gesture {155    position: absolute;156    bottom: 28px;157    left: 50%;158    transform: translateX(-50%);159    width: 520px;160    height: 12px;161    border-radius: 8px;162    background: #C7C7C7;163  }164 165  /* Simple link look */166  .link { color:#1a73e8; text-decoration:none; }167 168  /* Hide default scrollbars for a cleaner mock */169  .left-scroll::-webkit-scrollbar,170  .content::-webkit-scrollbar { width: 0; height: 0; }171</style>172</head>173<body>174<div id="render-target">175 176  <!-- Status bar -->177  <div class="status-bar">178    <div style="display:flex; align-items:center; gap:14px;">179      <span>7:29</span>180      <span class="dot"></span>181      <span class="dot"></span>182      <span class="dot"></span>183    </div>184    <div class="status-icons">185      <span class="dot"></span>186      <span class="dot"></span>187      <span class="dot"></span>188    </div>189  </div>190 191  <!-- Header -->192  <div class="header">193    <div class="icon-btn" aria-label="Back">194      <svg width="40" height="40" viewBox="0 0 24 24" fill="#111">195        <path d="M15.5 3.9 7.4 12l8.1 8.1-1.9 1.9L3.6 12 13.6 2l1.9 1.9z"/>196      </svg>197    </div>198    <div class="title">Filters</div>199    <div class="clear">Clear Filters</div>200  </div>201 202  <!-- Main content -->203  <div class="main">204    <!-- Left menu -->205    <div class="left-menu">206      <div class="left-scroll">207        <div class="menu-item">Price</div>208        <div class="menu-item">Plus (FAssured)</div>209        <div class="menu-item selected">210          Deliver At211          <div class="check">212            <svg width="40" height="40" viewBox="0 0 24 24" fill="#1976d2">213              <path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/>214            </svg>215          </div>216        </div>217        <div class="menu-item">Brand</div>218        <div class="menu-item">Customer Ratings</div>219        <div class="menu-item">Offers</div>220        <div class="menu-item">Discount</div>221        <div class="menu-item">Primary Material</div>222        <div class="menu-item">GST Invoice Available</div>223        <div class="menu-item">Delivery Condition</div>224        <div class="menu-item">Availability</div>225        <div class="menu-item">Primary Color</div>226        <div class="menu-item">Storage Included</div>227      </div>228    </div>229 230    <!-- Right content -->231    <div class="content">232      <div class="crumb">233        <svg width="28" height="28" viewBox="0 0 24 24" fill="#9e9e9e">234          <path d="M15.5 3.9 7.4 12l8.1 8.1-1.9 1.9L3.6 12 13.6 2l1.9 1.9z"/>235        </svg>236        <span>Furniture</span>237      </div>238      <div class="cat-title"><a class="link" href="#">Tables</a></div>239 240      <div class="list-option">Side Tables</div>241      <div class="list-option">Portable Laptop Tables</div>242      <div class="list-option">Office Study Table</div>243    </div>244  </div>245 246  <!-- Bottom bar -->247  <div class="bottom-bar">248    <div class="count">249      975250      <small>products found</small>251    </div>252    <div class="apply-btn">Apply</div>253  </div>254 255  <div class="gesture"></div>256</div>257</body>258</html>