GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Filters UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;14    color: #222;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 90px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 36px;28    box-sizing: border-box;29    color: #333;30    font-size: 36px;31  }32  .status-right {33    display: flex;34    align-items: center;35    gap: 18px;36  }37  .status-icon {38    width: 34px;39    height: 34px;40  }41 42  /* Header */43  .header {44    position: absolute;45    top: 90px;46    left: 0;47    width: 1080px;48    height: 130px;49    display: flex;50    align-items: center;51    justify-content: space-between;52    padding: 0 28px 0 20px;53    box-sizing: border-box;54  }55  .title-wrap {56    display: flex;57    align-items: center;58    gap: 22px;59  }60  .back-icon {61    width: 56px;62    height: 56px;63  }64  .title {65    font-size: 64px;66    font-weight: 700;67  }68  .clear {69    font-size: 44px;70    color: #222;71    font-weight: 600;72  }73 74  /* Main area */75  .main {76    position: absolute;77    top: 220px;78    left: 0;79    width: 1080px;80    height: 1980px;81    display: flex;82  }83 84  /* Sidebar */85  .sidebar {86    width: 310px;87    background: #f2f4f7;88    height: 100%;89    padding: 24px 24px 160px 24px;90    box-sizing: border-box;91  }92  .filter-item {93    font-size: 44px;94    padding: 34px 6px;95    border-radius: 12px;96    display: flex;97    align-items: center;98    justify-content: space-between;99    color: #222;100  }101  .filter-item + .filter-item { margin-top: 6px; }102  .check {103    width: 44px; height: 44px;104  }105 106  /* Content area */107  .content {108    width: 770px;109    padding: 24px 32px;110    box-sizing: border-box;111  }112  .crumb {113    display: flex;114    align-items: center;115    gap: 12px;116    color: #666;117    font-size: 38px;118    margin-top: 10px;119  }120  .crumb .chev {121    width: 34px; height: 34px;122  }123  .link {124    margin-top: 36px;125    font-size: 50px;126    color: #1a73e8;127    font-weight: 600;128  }129 130  /* Bottom areas */131  .apply-button {132    position: absolute;133    bottom: 140px;134    right: 44px;135    width: 600px;136    height: 120px;137    background: #e66329;138    border-radius: 20px;139    display: flex;140    align-items: center;141    justify-content: center;142    color: #fff;143    font-size: 48px;144    font-weight: 700;145    box-shadow: 0 6px 12px rgba(0,0,0,0.15);146  }147  .count-wrap {148    position: absolute;149    bottom: 140px;150    left: 24px;151    width: 310px;152    padding: 18px 24px;153    box-sizing: border-box;154    color: #222;155  }156  .count-num { font-size: 60px; font-weight: 700; margin-bottom: 6px; }157  .count-sub { font-size: 36px; color: #777; }158 159</style>160</head>161<body>162<div id="render-target">163 164  <!-- Status bar -->165  <div class="status-bar">166    <div class="status-left">7:29</div>167    <div class="status-right">168      <!-- simple status icons -->169      <svg class="status-icon" viewBox="0 0 24 24">170        <circle cx="12" cy="12" r="10" fill="#888"></circle>171      </svg>172      <svg class="status-icon" viewBox="0 0 24 24">173        <rect x="3" y="6" width="18" height="12" rx="2" fill="#777"></rect>174      </svg>175      <svg class="status-icon" viewBox="0 0 24 24">176        <path d="M3 12h18" stroke="#777" stroke-width="3"></path>177      </svg>178      <svg class="status-icon" viewBox="0 0 24 24">179        <rect x="3" y="6" width="14" height="12" rx="2" fill="#777"></rect>180        <rect x="18" y="9" width="3" height="6" fill="#777"></rect>181      </svg>182    </div>183  </div>184 185  <!-- Header -->186  <div class="header">187    <div class="title-wrap">188      <svg class="back-icon" viewBox="0 0 24 24">189        <path d="M15 6l-6 6 6 6" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>190      </svg>191      <div class="title">Filters</div>192    </div>193    <div class="clear">Clear Filters</div>194  </div>195 196  <!-- Main area -->197  <div class="main">198    <!-- Sidebar -->199    <div class="sidebar">200      <div class="filter-item">Price</div>201      <div class="filter-item">Plus (FAssured)</div>202      <div class="filter-item">203        <span>Deliver At</span>204        <svg class="check" viewBox="0 0 24 24">205          <path d="M5 12l4 4 10-10" stroke="#2a77ff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>206        </svg>207      </div>208      <div class="filter-item">Brand</div>209      <div class="filter-item">Customer<br>Ratings</div>210      <div class="filter-item">Offers</div>211      <div class="filter-item">Discount</div>212      <div class="filter-item">Availability</div>213      <div class="filter-item">Primary Color</div>214      <div class="filter-item">Mouse Tray</div>215      <div class="filter-item">Adjustable<br>Height</div>216      <div class="filter-item">Foldable</div>217      <div class="filter-item">GST Invoice<br>Available</div>218    </div>219 220    <!-- Content -->221    <div class="content">222      <div class="crumb">223        <svg class="chev" viewBox="0 0 24 24">224          <path d="M15 6l-6 6 6 6" stroke="#666" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>225        </svg>226        <span>Tables</span>227      </div>228 229      <div class="link">Portable Laptop Tables</div>230    </div>231  </div>232 233  <!-- Bottom apply button and product count -->234  <div class="apply-button">Apply</div>235  <div class="count-wrap">236    <div class="count-num">84</div>237    <div class="count-sub">products found</div>238  </div>239 240</div>241</body>242</html>