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; font-family: "Roboto", "Segoe UI", Arial, sans-serif; }9 #render-target {10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background:#ffffff;13 color:#2b2b2b;14 }15 .status-bar {16 height:130px;17 padding:0 32px;18 display:flex; align-items:center; justify-content:space-between;19 color:#444;20 font-weight:500;21 font-size:36px;22 }23 .status-icons { display:flex; gap:22px; align-items:center; }24 .status-dot { width:22px; height:22px; background:#bbb; border-radius:50%; }25 .status-battery { width:34px; height:22px; border:2px solid #666; border-radius:4px; position:relative; }26 .status-battery::after { content:""; position:absolute; right:-8px; top:6px; width:6px; height:10px; background:#666; border-radius:2px; }27 .header {28 padding:0 32px;29 height:120px;30 display:flex; align-items:center; justify-content:space-between;31 border-bottom:1px solid #e6e6e6;32 }33 .header .title { font-size:40px; font-weight:700; color:#5a5a5a; }34 .header .clear { font-size:36px; font-weight:700; color:#ff4f79; letter-spacing:0.5px; }35 .content {36 position:absolute; top:250px; bottom:160px; left:0; right:0;37 display:flex;38 }39 .left-pane {40 width:360px; border-right:1px solid #e8e8e8;41 background:#fafafa;42 }43 .left-list { list-style:none; margin:0; padding:0; }44 .left-item {45 padding:30px 28px;46 font-size:36px; color:#4b4b4b;47 border-bottom:1px solid #ececec;48 display:flex; align-items:center; justify-content:space-between;49 }50 .left-item.heading {51 font-weight:800; color:#222; background:#ffffff;52 }53 .left-item.badge span {54 background:#e9edf3; color:#7a7f86; font-size:28px; padding:4px 12px; border-radius:18px;55 }56 57 .right-pane { flex:1; background:#fff; }58 .right-inner { padding:10px 24px; }59 .select-all {60 height:100px; display:flex; align-items:center; gap:24px;61 font-size:38px; font-weight:700; color:#2e2e37;62 }63 .checkbox {64 width:54px; height:54px; border:3px solid #8c92a0; border-radius:8px;65 }66 67 .option {68 display:flex; align-items:center; justify-content:space-between;69 padding:26px 10px; border-top:1px solid #f0f0f0;70 color:#565b66;71 }72 .option .label-wrap { display:flex; align-items:center; gap:28px; }73 .check-icon { width:34px; height:34px; }74 .label { font-size:38px; }75 .count { font-size:34px; color:#9aa0a6; }76 .option.active .label { font-weight:800; color:#1d1f25; }77 .option.active .count { color:#9aa0a6; }78 .divider { border-top:1px solid #f0f0f0; margin-top:-1px; }79 80 .action-bar {81 position:absolute; bottom:0; left:0; right:0;82 height:160px; background:#ffffff; border-top:1px solid #e7e7e7;83 display:flex; align-items:center; justify-content:space-between;84 padding:0 40px;85 }86 .action-left, .action-right {87 font-size:40px; font-weight:700;88 }89 .action-left { color:#68707a; }90 .action-right { color:#ff507c; }91 .action-divider {92 height:60px; width:2px; background:#dedede;93 position:absolute; left:50%; transform:translateX(-50%);94 }95 /* subtle scroll mimic */96 .right-pane, .left-pane { overflow:auto; }97</style>98</head>99<body>100<div id="render-target">101 102 <div class="status-bar">103 <div>9:01</div>104 <div class="status-icons">105 <div class="status-dot"></div>106 <div class="status-dot"></div>107 <div class="status-dot"></div>108 <div class="status-dot"></div>109 <div class="status-battery"></div>110 </div>111 </div>112 113 <div class="header">114 <div class="title">Filters</div>115 <div class="clear">CLEAR ALL</div>116 </div>117 118 <div class="content">119 <!-- Left pane -->120 <div class="left-pane">121 <ul class="left-list">122 <li class="left-item">Quick Filters</li>123 <li class="left-item heading">Size</li>124 <li class="left-item">Color</li>125 <li class="left-item badge">Brand <span>1</span></li>126 <li class="left-item">Country of Origin</li>127 <li class="left-item">Price Range</li>128 <li class="left-item">Discount</li>129 <li class="left-item">Rating</li>130 <li class="left-item">Delivery Time</li>131 <li class="left-item badge">Sole Material <span>1</span></li>132 <li class="left-item">Running Type</li>133 <li class="left-item">Warranty</li>134 <li class="left-item">Pronation for Running Shoes</li>135 <li class="left-item">Material</li>136 </ul>137 </div>138 139 <!-- Right pane -->140 <div class="right-pane">141 <div class="right-inner">142 <div class="select-all">143 <div class="checkbox"></div>144 <div>Select All <span style="color:#80858f; font-weight:600;">(29)</span></div>145 </div>146 147 <!-- Size options -->148 <div class="option">149 <div class="label-wrap">150 <svg class="check-icon" viewBox="0 0 24 24">151 <path d="M20 6 L9 17 L4 12" fill="none" stroke="#bfc4cd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>152 </svg>153 <div class="label">UK5</div>154 </div>155 <div class="count">13</div>156 </div>157 158 <div class="option">159 <div class="label-wrap">160 <svg class="check-icon" viewBox="0 0 24 24">161 <path d="M20 6 L9 17 L4 12" fill="none" stroke="#bfc4cd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>162 </svg>163 <div class="label">UK5.5</div>164 </div>165 <div class="count">56</div>166 </div>167 168 <div class="option">169 <div class="label-wrap">170 <svg class="check-icon" viewBox="0 0 24 24">171 <path d="M20 6 L9 17 L4 12" fill="none" stroke="#bfc4cd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>172 </svg>173 <div class="label">UK6</div>174 </div>175 <div class="count">77</div>176 </div>177 178 <div class="option">179 <div class="label-wrap">180 <svg class="check-icon" viewBox="0 0 24 24">181 <path d="M20 6 L9 17 L4 12" fill="none" stroke="#bfc4cd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>182 </svg>183 <div class="label">UK6.5</div>184 </div>185 <div class="count">58</div>186 </div>187 188 <div class="option">189 <div class="label-wrap">190 <svg class="check-icon" viewBox="0 0 24 24">191 <path d="M20 6 L9 17 L4 12" fill="none" stroke="#bfc4cd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>192 </svg>193 <div class="label">UK7</div>194 </div>195 <div class="count">71</div>196 </div>197 198 <div class="option">199 <div class="label-wrap">200 <svg class="check-icon" viewBox="0 0 24 24">201 <path d="M20 6 L9 17 L4 12" fill="none" stroke="#bfc4cd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>202 </svg>203 <div class="label">UK7.5</div>204 </div>205 <div class="count">48</div>206 </div>207 208 <div class="option">209 <div class="label-wrap">210 <svg class="check-icon" viewBox="0 0 24 24">211 <path d="M20 6 L9 17 L4 12" fill="none" stroke="#bfc4cd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>212 </svg>213 <div class="label">UK8</div>214 </div>215 <div class="count">69</div>216 </div>217 218 <div class="option">219 <div class="label-wrap">220 <svg class="check-icon" viewBox="0 0 24 24">221 <path d="M20 6 L9 17 L4 12" fill="none" stroke="#bfc4cd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>222 </svg>223 <div class="label">UK8.5</div>224 </div>225 <div class="count">3</div>226 </div>227 228 <div class="option active">229 <div class="label-wrap">230 <svg class="check-icon" viewBox="0 0 24 24">231 <path d="M20 6 L9 17 L4 12" fill="none" stroke="#ff507c" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>232 </svg>233 <div class="label">UK9</div>234 </div>235 <div class="count">58</div>236 </div>237 238 <div class="option">239 <div class="label-wrap">240 <svg class="check-icon" viewBox="0 0 24 24">241 <path d="M20 6 L9 17 L4 12" fill="none" stroke="#bfc4cd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>242 </svg>243 <div class="label">UK9.5</div>244 </div>245 <div class="count">1</div>246 </div>247 248 <div class="option">249 <div class="label-wrap">250 <svg class="check-icon" viewBox="0 0 24 24">251 <path d="M20 6 L9 17 L4 12" fill="none" stroke="#bfc4cd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>252 </svg>253 <div class="label">UK10</div>254 </div>255 <div class="count">61</div>256 </div>257 258 <div class="option">259 <div class="label-wrap">260 <svg class="check-icon" viewBox="0 0 24 24">261 <path d="M20 6 L9 17 L4 12" fill="none" stroke="#bfc4cd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>262 </svg>263 <div class="label">UK10.5</div>264 </div>265 <div class="count">1</div>266 </div>267 268 <div class="option">269 <div class="label-wrap">270 <svg class="check-icon" viewBox="0 0 24 24">271 <path d="M20 6 L9 17 L4 12" fill="none" stroke="#bfc4cd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>272 </svg>273 <div class="label">UK11</div>274 </div>275 <div class="count">54</div>276 </div>277 </div>278 </div>279 </div>280 281 <div class="action-bar">282 <div class="action-left">CLOSE</div>283 <div class="action-divider"></div>284 <div class="action-right">APPLY</div>285 </div>286 287</div>288</body>289</html>