GD-ML/AndroidCode
13.4k
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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #ffffff;20 box-sizing: border-box;21 }22 23 /* Status bar (top system UI) */24 .status-bar {25 position: absolute;26 top: 0;27 left: 0;28 width: 1080px;29 height: 90px;30 padding: 0 36px;31 display: flex;32 align-items: center;33 justify-content: space-between;34 color: #616161;35 font-size: 36px;36 }37 .status-icons {38 display: flex;39 align-items: center;40 gap: 24px;41 }42 .status-dot {43 width: 12px;44 height: 12px;45 background: #616161;46 border-radius: 50%;47 }48 .status-icon {49 width: 34px;50 height: 34px;51 border: 2px solid #616161;52 border-radius: 6px;53 }54 55 /* Header with back arrow and actions */56 .header {57 position: absolute;58 top: 90px;59 left: 0;60 width: 1080px;61 height: 160px;62 display: flex;63 align-items: center;64 justify-content: space-between;65 padding: 0 36px;66 box-sizing: border-box;67 }68 .header-left {69 display: flex;70 align-items: center;71 gap: 26px;72 }73 .back-icon {74 width: 56px;75 height: 56px;76 }77 .header-title {78 font-size: 54px;79 color: #212121;80 }81 .clear-link {82 font-size: 42px;83 color: #9e9e9e;84 }85 86 /* Main content area */87 .content {88 position: absolute;89 top: 250px; /* 90 + 160 */90 left: 0;91 width: 1080px;92 height: 1790px; /* remaining height above footer and nav */93 display: grid;94 grid-template-columns: 300px 1fr;95 }96 97 /* Left filter category list */98 .sidebar {99 background: #eceff1;100 padding-top: 20px;101 }102 .category {103 padding: 36px 28px;104 font-size: 42px;105 color: #424242;106 }107 .category.active {108 color: #3f73f7;109 }110 111 /* Right price options */112 .options {113 background: #ffffff;114 padding: 8px 40px;115 }116 .option-row {117 display: flex;118 align-items: center;119 gap: 34px;120 height: 150px;121 border-bottom: 1px solid rgba(0,0,0,0.06);122 }123 .checkbox {124 width: 64px;125 height: 64px;126 border: 4px solid #424242;127 border-radius: 10px;128 box-sizing: border-box;129 }130 .option-label {131 font-size: 44px;132 color: #212121;133 }134 135 /* Footer area with product count and apply button */136 .footer {137 position: absolute;138 bottom: 140px; /* above nav bar */139 left: 0;140 width: 1080px;141 height: 220px;142 display: flex;143 align-items: center;144 justify-content: space-between;145 padding: 0 60px;146 box-sizing: border-box;147 }148 .count {149 display: flex;150 flex-direction: column;151 gap: 8px;152 }153 .count-main {154 font-size: 52px;155 color: #212121;156 font-weight: 600;157 }158 .count-sub {159 font-size: 36px;160 color: #9e9e9e;161 }162 .apply-btn {163 width: 520px;164 height: 120px;165 background: #e46325;166 color: #ffffff;167 border-radius: 12px;168 font-size: 44px;169 display: flex;170 align-items: center;171 justify-content: center;172 }173 174 /* Bottom navigation pill bar */175 .nav-bar {176 position: absolute;177 bottom: 0;178 left: 0;179 width: 1080px;180 height: 140px;181 background: #000000;182 }183 .nav-pill {184 position: absolute;185 bottom: 40px;186 left: 50%;187 transform: translateX(-50%);188 width: 260px;189 height: 16px;190 background: #cfcfcf;191 border-radius: 12px;192 opacity: 0.9;193 }194</style>195</head>196<body>197<div id="render-target">198 199 <!-- Status Bar -->200 <div class="status-bar">201 <div>12:19</div>202 <div class="status-icons">203 <div class="status-icon"></div>204 <div class="status-icon"></div>205 <div class="status-dot"></div>206 <div class="status-icon"></div>207 <div class="status-icon"></div>208 <div class="status-icon"></div>209 </div>210 </div>211 212 <!-- Header -->213 <div class="header">214 <div class="header-left">215 <svg class="back-icon" viewBox="0 0 24 24">216 <path d="M15 4 L7 12 L15 20" stroke="#212121" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>217 </svg>218 <div class="header-title">Filters</div>219 </div>220 <div class="clear-link">Clear Filters</div>221 </div>222 223 <!-- Content -->224 <div class="content">225 <!-- Sidebar -->226 <div class="sidebar">227 <div class="category">Ideal For</div>228 <div class="category">Plus (FAssured)</div>229 <div class="category">Discount</div>230 <div class="category active">Price</div>231 <div class="category">Customer Ratings</div>232 <div class="category">Age/Size</div>233 <div class="category">Brand</div>234 <div class="category">Color</div>235 <div class="category">Fabric</div>236 <div class="category">Fit</div>237 <div class="category">Pattern</div>238 <div class="category">Type</div>239 <div class="category">Offers</div>240 </div>241 242 <!-- Options -->243 <div class="options">244 <div class="option-row">245 <div class="checkbox"></div>246 <div class="option-label">Rs. 499 and below</div>247 </div>248 <div class="option-row">249 <div class="checkbox"></div>250 <div class="option-label">Rs. 500-699</div>251 </div>252 <div class="option-row">253 <div class="checkbox"></div>254 <div class="option-label">Rs. 700-999</div>255 </div>256 <div class="option-row">257 <div class="checkbox"></div>258 <div class="option-label">Rs. 1000-1499</div>259 </div>260 <div class="option-row">261 <div class="checkbox"></div>262 <div class="option-label">Rs. 1500-1999</div>263 </div>264 <div class="option-row">265 <div class="checkbox"></div>266 <div class="option-label">Rs. 2500 and above</div>267 </div>268 </div>269 </div>270 271 <!-- Footer -->272 <div class="footer">273 <div class="count">274 <div class="count-main">1,379</div>275 <div class="count-sub">products found</div>276 </div>277 <div class="apply-btn">Apply</div>278 </div>279 280 <!-- Navigation bar -->281 <div class="nav-bar">282 <div class="nav-pill"></div>283 </div>284 285</div>286</body>287</html>