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; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13    color: #111;14  }15 16  /* Top bar */17  .topbar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 140px;23    display: flex;24    align-items: center;25    padding: 0 28px;26    box-sizing: border-box;27    border-bottom: 1px solid #e5e5e5;28    background: #fff;29  }30  .back-btn {31    width: 72px;32    height: 72px;33    display: flex;34    align-items: center;35    justify-content: center;36    margin-right: 24px;37  }38  .topbar-title {39    font-size: 56px;40    font-weight: 600;41    color: #222;42  }43  .clear-link {44    margin-left: auto;45    font-size: 40px;46    color: #222;47  }48 49  /* Main content layout */50  .content {51    position: absolute;52    top: 140px;53    left: 0;54    width: 1080px;55    height: 2060px; /* leave room for footer */56    display: flex;57  }58 59  .sidebar {60    width: 360px;61    background: #F2F4F7;62    height: 100%;63    border-right: 1px solid #e5e5e5;64    box-sizing: border-box;65    padding-top: 10px;66  }67 68  .filter-item {69    padding: 34px 28px;70    font-size: 42px;71    color: #222;72    border-bottom: 1px solid #e9edf1;73    display: flex;74    align-items: center;75    justify-content: space-between;76  }77  .filter-item:last-child { border-bottom: none; }78 79  .blue-check {80    width: 36px;81    height: 36px;82  }83 84  .side-placeholder {85    margin: 34px 28px;86    width: 304px;87    height: 360px;88    background: #E6E9EE;89    border: 1px solid #C9CFD6;90    display: flex;91    align-items: center;92    justify-content: center;93    color: #6b7280;94    font-size: 32px;95    border-radius: 8px;96  }97 98  .main {99    flex: 1;100    background: #fff;101    height: 100%;102    box-sizing: border-box;103    padding: 34px 42px;104  }105 106  .breadcrumb {107    display: flex;108    align-items: center;109    gap: 18px;110    color: #6b7280;111    font-size: 36px;112    margin-bottom: 28px;113  }114  .crumb-icon {115    width: 36px; height: 36px;116  }117  .category-link {118    font-size: 46px;119    color: #2b6ef2;120    margin: 18px 0 30px;121  }122 123  .list-option {124    font-size: 48px;125    color: #111;126    padding: 32px 0;127    border-bottom: 1px solid #f0f0f0;128  }129 130  /* Footer */131  .footer {132    position: absolute;133    left: 0;134    bottom: 0;135    width: 1080px;136    height: 200px;137    box-sizing: border-box;138    padding: 0 32px;139    display: flex;140    align-items: center;141    background: #fff;142  }143  .products-count {144    font-size: 40px;145    color: #5b5f66;146  }147  .apply-btn {148    margin-left: auto;149    width: 620px;150    height: 120px;151    background: #E8632F;152    color: #fff;153    font-size: 44px;154    border: none;155    border-radius: 18px;156    box-shadow: 0 4px 0 rgba(0,0,0,0.08);157  }158</style>159</head>160<body>161<div id="render-target">162 163  <div class="topbar">164    <div class="back-btn">165      <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">166        <path d="M15 18l-6-6 6-6"></path>167      </svg>168    </div>169    <div class="topbar-title">Filters</div>170    <div class="clear-link">Clear Filters</div>171  </div>172 173  <div class="content">174    <div class="sidebar">175      <div class="filter-item">Price</div>176      <div class="filter-item">Plus (FAssured)</div>177      <div class="filter-item">Deliver At178        <svg class="blue-check" viewBox="0 0 24 24">179          <circle cx="12" cy="12" r="12" fill="#2b6ef2"></circle>180          <path d="M6 12l4 4 8-8" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>181        </svg>182      </div>183      <div class="filter-item">Brand</div>184      <div class="filter-item">Customer<br>Ratings</div>185      <div class="filter-item">Discount</div>186      <div class="filter-item">GST Invoice<br>Available</div>187      <div class="filter-item">Availability</div>188      <div class="filter-item">Offers</div>189 190      <div class="filter-item">Category191        <svg class="blue-check" viewBox="0 0 24 24">192          <circle cx="12" cy="12" r="12" fill="#2b6ef2"></circle>193          <path d="M6 12l4 4 8-8" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>194        </svg>195      </div>196 197      <div class="side-placeholder">[Panel / Options]</div>198    </div>199 200    <div class="main">201      <div class="breadcrumb">202        <svg class="crumb-icon" viewBox="0 0 24 24" fill="none" stroke="#7d8794" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">203          <path d="M9 18l-6-6 6-6"></path>204        </svg>205        <span>Computers</span>206      </div>207 208      <div class="category-link">Laptop Accessories</div>209 210      <div class="list-option">Keyboard Replacement Keys</div>211      <div class="list-option">Mouse</div>212      <div class="list-option">Laptop Adapters</div>213      <div class="list-option">Keyboards</div>214      <div class="list-option">Presentation Remotes</div>215      <div class="list-option">USB Gadgets</div>216      <div class="list-option">Touchpads</div>217      <div class="list-option">Mouse Pads</div>218      <div class="list-option">Computer Accessories Combos</div>219    </div>220  </div>221 222  <div class="footer">223    <div class="products-count">10,387 products found</div>224    <button class="apply-btn">Apply</button>225  </div>226 227</div>228</body>229</html>