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, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #FFFFFF;13 color: #222;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 96px;23 background: #ffffff;24 display: flex;25 align-items: center;26 padding: 0 32px;27 box-sizing: border-box;28 }29 .status-left { display: flex; align-items: center; gap: 20px; }30 .status-time { font-size: 36px; font-weight: 600; }31 .status-icons { margin-left: auto; display: flex; align-items: center; gap: 24px; }32 .status-dot { width: 12px; height: 12px; background: #777; border-radius: 50%; }33 .battery {34 width: 54px; height: 28px; border: 2px solid #777; border-radius: 6px; position: relative;35 }36 .battery::after {37 content: ""; position: absolute; right: -10px; top: 8px; width: 6px; height: 12px; background: #777; border-radius: 2px;38 }39 .battery-level {40 position: absolute; left: 3px; top: 3px; height: 20px; width: 38px; background: #2b8a3e; border-radius: 3px;41 }42 43 /* Header */44 .header {45 position: absolute;46 top: 96px;47 left: 0;48 width: 1080px;49 height: 128px;50 background: #ffffff;51 display: flex;52 align-items: center;53 box-sizing: border-box;54 padding: 0 32px;55 border-bottom: 1px solid #e6e6e6;56 }57 .back-btn {58 width: 80px; height: 80px; display: flex; justify-content: center; align-items: center;59 }60 .header-title {61 font-size: 44px; font-weight: 700; margin-left: 12px;62 }63 64 /* Content area */65 .content {66 position: absolute;67 top: 224px;68 left: 0;69 width: 1080px;70 height: 1920px;71 display: flex;72 box-sizing: border-box;73 }74 .sidebar {75 width: 300px;76 background: #EEF2F6;77 height: 100%;78 padding: 24px;79 box-sizing: border-box;80 border-right: 1px solid #e1e4e8;81 }82 .side-section-title {83 font-size: 40px; font-weight: 700; margin-bottom: 26px;84 }85 .side-link {86 font-size: 36px;87 color: #222;88 padding: 22px 18px;89 border-radius: 12px;90 margin-bottom: 8px;91 }92 .side-link.highlight { background: #E6EBF1; }93 .side-divider { margin-top: 18px; margin-bottom: 10px; font-size: 34px; color: #555; }94 95 .main-panel {96 flex: 1;97 background: #ffffff;98 padding: 40px 28px;99 box-sizing: border-box;100 }101 102 /* Checkbox list styling */103 .option-row {104 display: flex; align-items: center;105 gap: 24px;106 margin-bottom: 36px;107 }108 .checkbox {109 width: 52px; height: 52px;110 border: 3px solid #cfcfcf;111 border-radius: 12px;112 display: inline-flex;113 align-items: center;114 justify-content: center;115 cursor: pointer;116 box-shadow: inset 0 0 0 2px #fff;117 }118 .checkbox.checked {119 border-color: #111;120 background: #fff;121 }122 .option-label {123 font-size: 38px; color: #222;124 }125 126 /* Bottom actions */127 .bottom-bar {128 position: absolute;129 bottom: 0;130 left: 0;131 width: 1080px;132 height: 170px;133 background: #ffffff;134 border-top: 1px solid #e6e6e6;135 display: flex;136 align-items: center;137 justify-content: space-between;138 padding: 24px 40px;139 box-sizing: border-box;140 }141 .btn {142 height: 110px;143 border-radius: 28px;144 display: inline-flex;145 align-items: center;146 justify-content: center;147 font-size: 40px;148 font-weight: 700;149 padding: 0 70px;150 box-sizing: border-box;151 }152 .btn.reset {153 border: 2px solid #d9d9d9;154 background: #fff;155 color: #222;156 }157 .btn.apply {158 background: #111;159 color: #fff;160 }161 162 /* Helper */163 .muted { color: #777; }164</style>165</head>166<body>167<div id="render-target">168 169 <!-- Status Bar -->170 <div class="status-bar">171 <div class="status-left">172 <div class="status-time">12:38</div>173 </div>174 <div class="status-icons">175 <div class="status-dot"></div>176 <div class="status-dot"></div>177 <div class="status-dot"></div>178 <!-- simple wifi icon -->179 <svg width="44" height="30" viewBox="0 0 44 30">180 <path d="M2 10c10-8 30-8 40 0" stroke="#777" stroke-width="3" fill="none" stroke-linecap="round"/>181 <path d="M8 16c7-5 21-5 28 0" stroke="#777" stroke-width="3" fill="none" stroke-linecap="round"/>182 <circle cx="22" cy="22" r="3" fill="#777"/>183 </svg>184 <div class="battery"><div class="battery-level"></div></div>185 </div>186 </div>187 188 <!-- Header -->189 <div class="header">190 <div class="back-btn">191 <svg width="40" height="40" viewBox="0 0 24 24">192 <path d="M15 18l-6-6 6-6" stroke="#222" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>193 </svg>194 </div>195 <div class="header-title">Filters (12038 products)</div>196 </div>197 198 <!-- Content -->199 <div class="content">200 <!-- Sidebar -->201 <div class="sidebar">202 <div class="side-section-title">Gender</div>203 204 <div class="side-link">Category</div>205 <div class="side-link">Price</div>206 <div class="side-link">Brands</div>207 <div class="side-link">Occasion</div>208 <div class="side-link">Discount</div>209 <div class="side-link">Colors</div>210 <div class="side-link">Size & Fit</div>211 <div class="side-link">Rating</div>212 213 <div class="side-link highlight">More Filters</div>214 215 <div class="side-link">Style Type</div>216 <div class="side-link">Pattern</div>217 <div class="side-link">Upper Material</div>218 <div class="side-link">Toe Shape</div>219 <div class="side-link">Fit Type</div>220 <div class="side-link">Sport</div>221 <div class="side-link">Ankle Style</div>222 <div class="side-link">Character</div>223 <div class="side-link">Heel</div>224 <div class="side-link">Traditional<br/>Weave</div>225 </div>226 227 <!-- Main Panel -->228 <div class="main-panel">229 <div class="option-row">230 <div class="checkbox"></div>231 <div class="option-label">Men <span class="muted">(12039)</span></div>232 </div>233 <div class="option-row">234 <div class="checkbox"></div>235 <div class="option-label">Women <span class="muted">(47)</span></div>236 </div>237 238 <!-- Blank space area to mimic white space in screenshot -->239 <div style="margin-top: 30px; width: 100%; height: 1400px; border: 1px dashed #f3f3f3; background: #fff;"></div>240 </div>241 </div>242 243 <!-- Bottom Bar -->244 <div class="bottom-bar">245 <div class="btn reset">Reset</div>246 <div class="btn apply">Apply Filter</div>247 </div>248 249</div>250</body>251</html>