GD-ML/AndroidCode
13.4k
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: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: linear-gradient(180deg, #a7d9d5 0%, #b9e0d3 20%, #ffffff 20%);13 border-radius: 24px;14 box-shadow: 0 6px 24px rgba(0,0,0,0.12);15 }16 17 /* Header */18 .topbar {19 position: absolute;20 left: 0;21 right: 0;22 top: 0;23 height: 170px;24 padding: 40px 48px 0 48px;25 color: #0f1111;26 }27 .topbar-title {28 font-size: 56px;29 font-weight: 700;30 letter-spacing: 0.2px;31 }32 .topbar-close {33 position: absolute;34 right: 48px;35 top: 48px;36 font-size: 48px;37 color: #0f1111;38 }39 40 /* Panel layout */41 .panel {42 position: absolute;43 top: 170px;44 left: 0;45 right: 0;46 bottom: 170px;47 background: #ffffff;48 display: flex;49 }50 51 /* Left sidebar */52 .sidebar {53 width: 340px;54 background: #eef2f3;55 border-right: 1px solid #d6d9dc;56 overflow: hidden;57 padding-top: 18px;58 }59 .side-item {60 padding: 28px 28px;61 font-size: 40px;62 color: #111;63 border-bottom: 1px solid #e4e7ea;64 display: flex;65 align-items: center;66 justify-content: space-between;67 }68 .side-item .badge {69 background: #e5e9ed;70 color: #333;71 font-size: 32px;72 padding: 6px 18px;73 border-radius: 20px;74 }75 .side-item.active {76 background: #5b6166;77 color: #fff;78 font-weight: 700;79 }80 81 /* Right content */82 .content {83 flex: 1;84 padding: 36px 36px 140px 36px;85 overflow: hidden;86 }87 .section-title {88 font-size: 42px;89 font-weight: 700;90 margin-bottom: 24px;91 color: #0f1111;92 }93 94 /* Size grid */95 .sizes-grid {96 display: grid;97 grid-template-columns: repeat(4, 1fr);98 grid-gap: 24px 24px;99 max-width: 650px;100 }101 .size-cell {102 height: 100px;103 border: 1px solid #d7d9dc;104 border-radius: 24px;105 display: flex;106 align-items: center;107 justify-content: center;108 font-size: 40px;109 color: #222;110 background: #fafafa;111 }112 .size-cell.dim {113 color: #9aa0a6;114 background: #f4f6f8;115 }116 .size-cell.selected {117 border: 3px solid #6faeb5;118 background: #e8f7f8;119 color: #0b4b53;120 position: relative;121 }122 .size-cell.selected .close-mini {123 position: absolute;124 right: 22px;125 top: 22px;126 width: 36px;127 height: 36px;128 border-radius: 18px;129 background: #d9eff1;130 display: flex;131 align-items: center;132 justify-content: center;133 }134 .size-cell.selected .close-mini svg {135 width: 22px; height: 22px;136 stroke: #0b4b53; stroke-width: 3; fill: none;137 }138 139 /* Bottom actions */140 .bottom-actions {141 position: absolute;142 bottom: 28px;143 left: 28px;144 right: 28px;145 display: flex;146 justify-content: space-between;147 align-items: center;148 }149 .btn {150 height: 110px;151 border-radius: 24px;152 padding: 0 40px;153 font-size: 40px;154 display: inline-flex;155 align-items: center;156 justify-content: center;157 cursor: default;158 }159 .btn.clear {160 background: #f5f7f9;161 border: 1px solid #d8dde1;162 color: #0f1111;163 width: 300px;164 }165 .btn.primary {166 background: #1f6b77;167 color: #ffffff;168 min-width: 560px;169 box-shadow: 0 6px 16px rgba(31,107,119,0.35);170 }171 172 /* Small details */173 .muted {174 color: #8a8f94;175 }176</style>177</head>178<body>179<div id="render-target">180 181 <!-- Header -->182 <div class="topbar">183 <div class="topbar-title">Filters (2)</div>184 <div class="topbar-close">Close</div>185 </div>186 187 <!-- Main Panel -->188 <div class="panel">189 190 <!-- Sidebar -->191 <div class="sidebar">192 <div class="side-item">Prime & Delivery</div>193 <div class="side-item">Categories <span class="badge">1</span></div>194 <div class="side-item">Brands</div>195 <div class="side-item">Colours</div>196 <div class="side-item">Sizes <span class="badge">1</span></div>197 <div class="side-item">Price and Deals</div>198 <div class="side-item">Customer Reviews</div>199 <div class="side-item">Sort by</div>200 <div class="side-item active">Men's Shoes</div>201 <div class="side-item">Special Features</div>202 <div class="side-item">Shoe Material</div>203 <div class="side-item">Closure Type</div>204 <div class="side-item">Sole Width</div>205 <div class="side-item">Lifestyle</div>206 <div class="side-item">Style</div>207 <div class="side-item">Toe Style</div>208 <div class="side-item">Height Map</div>209 <div class="side-item">Embellishment</div>210 </div>211 212 <!-- Content -->213 <div class="content">214 <div class="section-title">Size (UK/India)</div>215 216 <div class="sizes-grid">217 <div class="size-cell">3</div>218 <div class="size-cell">3.5</div>219 <div class="size-cell">4</div>220 <div class="size-cell">4.5</div>221 222 <div class="size-cell">5</div>223 <div class="size-cell">5.5</div>224 <div class="size-cell">6</div>225 <div class="size-cell">6.5</div>226 227 <div class="size-cell">7</div>228 <div class="size-cell">7.5</div>229 <div class="size-cell selected">8230 <div class="close-mini">231 <svg viewBox="0 0 24 24"><path d="M5 5 L19 19 M19 5 L5 19"/></svg>232 </div>233 </div>234 <div class="size-cell">8.5</div>235 236 <div class="size-cell">9</div>237 <div class="size-cell">9.5</div>238 <div class="size-cell">10</div>239 <div class="size-cell">10.5</div>240 241 <div class="size-cell">11</div>242 <div class="size-cell">11.5</div>243 <div class="size-cell">12</div>244 <div class="size-cell">12.5</div>245 246 <div class="size-cell">13</div>247 <div class="size-cell">13.5</div>248 <div class="size-cell">14</div>249 <div class="size-cell">14.5</div>250 251 <div class="size-cell">15</div>252 <div class="size-cell">15.5</div>253 <div class="size-cell">16</div>254 <div class="size-cell">16.5</div>255 256 <div class="size-cell">17</div>257 <div class="size-cell">17.5</div>258 <div class="size-cell">18</div>259 <div class="size-cell">18.5</div>260 261 <div class="size-cell">19</div>262 <div class="size-cell">19.5</div>263 <div class="size-cell">20</div>264 </div>265 </div>266 </div>267 268 <!-- Bottom buttons -->269 <div class="bottom-actions">270 <div class="btn clear">Clear Filters</div>271 <div class="btn primary">Show 5,227 results</div>272 </div>273 274</div>275</body>276</html>