GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Filter Panel 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, #9bd3c7 0%, #bfe3d9 40%, #e7f3ef 100%);13 }14 15 /* White sheet overlay */16 .sheet {17 position: absolute;18 left: 0;19 right: 0;20 top: 120px;21 bottom: 0;22 background: #ffffff;23 border-top-left-radius: 20px;24 border-top-right-radius: 20px;25 box-shadow: 0 8px 24px rgba(0,0,0,0.08);26 }27 28 /* Header */29 .header {30 height: 150px;31 display: flex;32 align-items: center;33 padding: 0 40px;34 border-bottom: 1px solid #e6e6e6;35 }36 .header .title {37 font-size: 48px;38 font-weight: 700;39 color: #1a2a2a;40 }41 .header .close {42 margin-left: auto;43 font-size: 42px;44 color: #2c6b76;45 cursor: pointer;46 }47 48 /* Content columns */49 .content {50 position: absolute;51 top: 150px;52 bottom: 220px;53 left: 0;54 right: 0;55 display: flex;56 }57 58 .sidebar {59 width: 330px;60 background: #f1f3f5;61 border-right: 1px solid #e0e0e0;62 padding: 30px 22px;63 }64 .sidebar .section {65 margin-bottom: 38px;66 }67 .sidebar .label {68 font-size: 38px;69 color: #263238;70 display: flex;71 align-items: center;72 justify-content: space-between;73 padding: 22px 18px;74 border-radius: 10px;75 }76 .sidebar .label:hover {77 background: #e9edf0;78 }79 .badge {80 display: inline-block;81 min-width: 46px;82 height: 46px;83 padding: 0 10px;84 border-radius: 23px;85 background: #dae6ea;86 color: #2c6b76;87 font-size: 30px;88 line-height: 46px;89 text-align: center;90 margin-left: 10px;91 }92 93 /* Right column */94 .main {95 flex: 1;96 padding: 30px 40px;97 overflow-y: auto;98 }99 .group-title {100 font-size: 40px;101 color: #111;102 margin: 20px 0 16px 0;103 font-weight: 600;104 }105 .chips {106 display: flex;107 flex-wrap: wrap;108 }109 .chip {110 display: inline-flex;111 align-items: center;112 padding: 20px 28px;113 font-size: 34px;114 color: #1b1b1b;115 background: #f4f4f4;116 border: 1px solid #e2e2e2;117 border-radius: 28px;118 margin: 14px 16px 0 0;119 white-space: nowrap;120 }121 .chip.active {122 background: #dff1ff;123 border-color: #9ec9ea;124 color: #125d7a;125 }126 .chip .x {127 margin-left: 14px;128 width: 30px; height: 30px;129 display: inline-flex;130 align-items: center; justify-content: center;131 border-radius: 50%;132 color: #125d7a;133 font-weight: 700;134 }135 136 /* Footer buttons */137 .footer {138 position: absolute;139 left: 0; right: 0; bottom: 0;140 padding: 24px 40px 40px;141 display: flex;142 align-items: center;143 justify-content: space-between;144 background: #ffffff;145 border-top: 1px solid #e6e6e6;146 border-bottom-left-radius: 20px;147 border-bottom-right-radius: 20px;148 }149 150 .btn {151 padding: 26px 34px;152 font-size: 36px;153 border-radius: 32px;154 cursor: pointer;155 }156 .btn-clear {157 border: 1px solid #9fb5be;158 color: #2c6b76;159 background: #ffffff;160 }161 .btn-primary {162 background: #2c6b76;163 color: #ffffff;164 border: none;165 }166 167 /* Small drag handle */168 .drag {169 position: absolute;170 bottom: 210px;171 left: 50%;172 transform: translateX(-50%);173 width: 520px;174 height: 12px;175 background: #c9c9c9;176 border-radius: 6px;177 }178</style>179</head>180<body>181<div id="render-target">182 <div class="sheet">183 <div class="header">184 <div class="title">Filters (2)</div>185 <div class="close">Close</div>186 </div>187 188 <div class="content">189 <!-- Left sidebar -->190 <div class="sidebar">191 <div class="section">192 <div class="label">Prime & Delivery</div>193 </div>194 <div class="section">195 <div class="label">Categories <span class="badge">1</span></div>196 </div>197 <div class="section">198 <div class="label">Brands <span class="badge">1</span></div>199 </div>200 <div class="section">201 <div class="label">Sort by</div>202 </div>203 </div>204 205 <!-- Right column -->206 <div class="main">207 <div class="group">208 <div class="group-title">A - F</div>209 <div class="chips">210 <div class="chip active">AJANTA <span class="x">×</span></div>211 <div class="chip">BATA</div>212 <div class="chip">CatBird</div>213 <div class="chip">Centrino</div>214 <div class="chip">commander shoes</div>215 <div class="chip">crocs</div>216 <div class="chip">Denill</div>217 <div class="chip">DOCTOR EXTRA SOFT</div>218 <div class="chip">Earth Step</div>219 <div class="chip">Elegant feet</div>220 <div class="chip">Footshez</div>221 </div>222 </div>223 224 <div class="group" style="margin-top: 40px;">225 <div class="group-title">G - M</div>226 <div class="chips">227 <div class="chip">Liberty</div>228 <div class="chip">Marc Loire</div>229 <div class="chip">Metro</div>230 <div class="chip">Mochi</div>231 </div>232 </div>233 234 <div class="group" style="margin-top: 40px;">235 <div class="group-title">N - Z</div>236 <div class="chips">237 <div class="chip">Pavers</div>238 <div class="chip">Red Tape</div>239 <div class="chip">Sparx</div>240 <div class="chip">Woodland</div>241 <div class="chip">Zazen</div>242 </div>243 </div>244 </div>245 </div>246 247 <!-- Drag handle mimic -->248 <div class="drag"></div>249 250 <!-- Footer buttons -->251 <div class="footer">252 <div class="btn btn-clear">Clear Filters</div>253 <div class="btn btn-primary">Show 36 results</div>254 </div>255 </div>256</div>257</body>258</html>