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 { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;16 color: #212121;17 }18 19 /* Status bar (time/icons placeholder) */20 .status-bar {21 height: 84px;22 padding: 0 36px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #777;27 font-size: 30px;28 box-sizing: border-box;29 }30 .status-icons { display: flex; gap: 18px; align-items: center; }31 .dot {32 width: 10px; height: 10px; background: #777; border-radius: 50%;33 display: inline-block;34 }35 36 /* Top toolbar */37 .toolbar {38 height: 124px;39 display: flex;40 align-items: center;41 padding: 0 36px;42 box-sizing: border-box;43 }44 .toolbar .left {45 display: flex; align-items: center; gap: 16px;46 }47 .title {48 font-size: 46px; font-weight: 600;49 }50 .clear {51 margin-left: auto;52 font-size: 36px;53 color: #9E9E9E;54 }55 .icon-btn {56 width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center;57 }58 .icon-btn svg { width: 44px; height: 44px; }59 60 /* Main two-column area */61 .content {62 position: absolute;63 left: 0; right: 0;64 top: 208px; /* status + toolbar */65 bottom: 210px; /* above footer */66 display: flex;67 }68 69 /* Left filter categories */70 .sidebar {71 width: 320px;72 border-right: 1px solid #eee;73 overflow: hidden;74 }75 .cat-list {76 list-style: none;77 padding: 0; margin: 0;78 }79 .cat-item {80 background: #ECEFF1;81 height: 138px;82 display: flex; align-items: center;83 padding-left: 34px;84 font-size: 34px;85 box-sizing: border-box;86 border-bottom: 10px solid #fff; /* creates large gaps like sections */87 }88 .cat-item.active {89 color: #3F6DEB;90 font-weight: 600;91 }92 93 /* Right options */94 .options {95 flex: 1;96 padding: 28px 48px;97 box-sizing: border-box;98 }99 .option-row {100 display: flex; align-items: center;101 gap: 28px;102 height: 138px;103 font-size: 38px;104 color: #333;105 }106 107 /* Custom checkbox */108 .chk {109 width: 52px; height: 52px;110 border: 4px solid #1f1f1f;111 border-radius: 8px;112 position: relative;113 box-sizing: border-box;114 }115 .chk.selected {116 background: #3F51B5;117 border-color: #3F51B5;118 }119 .chk.selected svg {120 position: absolute; left: 8px; top: 8px;121 width: 34px; height: 34px;122 fill: #fff;123 }124 125 /* Footer */126 .footer {127 position: absolute;128 left: 0; right: 0; bottom: 76px;129 height: 180px;130 display: flex; align-items: center;131 padding: 0 40px;132 box-sizing: border-box;133 background: #fff;134 border-top: 1px solid #eee;135 }136 .count {137 flex: 1;138 }139 .count .big {140 font-size: 42px; font-weight: 700;141 }142 .count .small {143 font-size: 28px; color: #9E9E9E; margin-top: 6px;144 }145 .apply-btn {146 width: 520px; height: 116px;147 background: #E6692E;148 color: #fff;149 border-radius: 10px;150 display: flex; align-items: center; justify-content: center;151 font-size: 40px; font-weight: 600;152 }153 154 /* Gesture pill */155 .gesture {156 position: absolute; left: 50%; transform: translateX(-50%);157 bottom: 22px;158 width: 320px; height: 12px; background: #CFCFCF; border-radius: 8px;159 }160</style>161</head>162<body>163<div id="render-target">164 165 <!-- Status Bar -->166 <div class="status-bar">167 <div>12:19</div>168 <div class="status-icons">169 <span class="dot"></span>170 <span class="dot"></span>171 <span class="dot"></span>172 </div>173 </div>174 175 <!-- Toolbar -->176 <div class="toolbar">177 <div class="left">178 <div class="icon-btn" aria-label="Back">179 <svg viewBox="0 0 24 24">180 <path d="M15.4 3.4L6.8 12l8.6 8.6-1.4 1.4L4 12l10-10 1.4 1.4z"/>181 </svg>182 </div>183 <div class="title">Filters</div>184 </div>185 <div class="clear">Clear Filters</div>186 </div>187 188 <!-- Content -->189 <div class="content">190 <!-- Sidebar categories -->191 <aside class="sidebar">192 <ul class="cat-list">193 <li class="cat-item">Ideal For</li>194 <li class="cat-item">Plus (FAssured)</li>195 <li class="cat-item">Discount</li>196 <li class="cat-item active">Price</li>197 <li class="cat-item">Customer Ratings</li>198 <li class="cat-item">Age/Size</li>199 <li class="cat-item">Brand</li>200 <li class="cat-item">Color</li>201 <li class="cat-item">Fabric</li>202 <li class="cat-item">Fit</li>203 <li class="cat-item">Pattern</li>204 <li class="cat-item">Type</li>205 <li class="cat-item">Offers</li>206 </ul>207 </aside>208 209 <!-- Right options -->210 <section class="options">211 <div class="option-row">212 <div class="chk"></div>213 <div>Rs. 499 and below</div>214 </div>215 <div class="option-row">216 <div class="chk"></div>217 <div>Rs. 500-699</div>218 </div>219 <div class="option-row">220 <div class="chk"></div>221 <div>Rs. 700-999</div>222 </div>223 <div class="option-row">224 <div class="chk selected">225 <svg viewBox="0 0 24 24">226 <path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z"/>227 </svg>228 </div>229 <div>Rs. 1000-1499</div>230 </div>231 <div class="option-row">232 <div class="chk"></div>233 <div>Rs. 1500-1999</div>234 </div>235 <div class="option-row">236 <div class="chk"></div>237 <div>Rs. 2500 and above</div>238 </div>239 </section>240 </div>241 242 <!-- Footer -->243 <div class="footer">244 <div class="count">245 <div class="big">1,379</div>246 <div class="small">products found</div>247 </div>248 <div class="apply-btn">Apply</div>249 </div>250 251 <!-- Gesture indicator -->252 <div class="gesture"></div>253</div>254</body>255</html>