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: "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#ffffff; color:#222;11 box-shadow:0 0 0 1px #ddd inset;12 }13 14 /* Top App Bar */15 .appbar {16 position:absolute; left:0; top:0; width:1080px; height:130px;17 display:flex; align-items:center;18 padding:0 32px;19 box-sizing:border-box;20 border-bottom:1px solid #e6e6e6;21 background:#fff;22 }23 .back-btn {24 width:64px; height:64px; border-radius:32px;25 display:flex; align-items:center; justify-content:center;26 margin-right:18px;27 }28 .appbar-title {29 font-size:44px; font-weight:600;30 }31 32 /* Content layout */33 .content {34 position:absolute; left:0; top:130px; width:1080px; height:2060px;35 display:flex;36 }37 .sidebar {38 width:260px; border-right:1px solid #e6e6e6; height:100%;39 padding:18px 0; box-sizing:border-box;40 background:#f7f7f7;41 }42 .side-section-title {43 font-size:36px; font-weight:600; padding:16px 22px; color:#666;44 }45 .side-item {46 font-size:34px; padding:20px 22px; color:#333; display:flex; align-items:center; justify-content:space-between;47 background:#ffffff; margin:6px 12px; border-radius:12px; border:1px solid #ececec;48 }49 .side-item.dim { background:#f8f8f8; }50 .bubble {51 background:#000; color:#fff; font-size:26px; min-width:34px; height:34px; border-radius:18px;52 display:flex; align-items:center; justify-content:center; padding:0 10px;53 }54 55 .main {56 flex:1; height:100%; padding:24px 30px; box-sizing:border-box; overflow:hidden;57 }58 59 /* Search bar */60 .search-wrap {61 width:100%; height:120px; border-radius:18px; border:1px solid #e3e3e3;62 display:flex; align-items:center; padding:0 26px; box-sizing:border-box; margin-bottom:20px;63 background:#fafafa;64 }65 .search-input {66 flex:1; font-size:40px; color:#444; outline:none; border:none; background:transparent;67 }68 .search-placeholder { color:#909090; }69 .search-icon { width:56px; height:56px; margin-left:18px; }70 71 /* Brand list */72 .brand-scroll {73 height:1760px; overflow-y:auto; padding-right:6px;74 }75 .brand-item {76 display:flex; align-items:center; padding:22px 8px; border-bottom:1px solid #f0f0f0;77 font-size:38px; color:#222;78 }79 .checkbox {80 width:48px; height:48px; border:3px solid #bdbdbd; border-radius:8px; margin-right:24px; box-sizing:border-box; background:#fff;81 }82 .checkbox.checked {83 background:#111; border-color:#111; position:relative;84 }85 .checkbox.checked:after {86 content:""; position:absolute; left:12px; top:8px; width:20px; height:32px;87 border-right:5px solid #fff; border-bottom:5px solid #fff; transform:rotate(45deg);88 }89 .alpha {90 font-size:42px; font-weight:700; padding:24px 8px; color:#333;91 }92 93 /* Bottom bar */94 .bottom-bar {95 position:absolute; left:0; bottom:0; width:1080px; height:210px; border-top:1px solid #e6e6e6;96 background:#f6f7f9;97 display:flex; align-items:center; justify-content:space-between;98 padding:30px 36px; box-sizing:border-box;99 }100 .btn {101 height:120px; border-radius:26px; display:flex; align-items:center; justify-content:center;102 font-size:40px; font-weight:600; padding:0 40px; box-sizing:border-box;103 }104 .btn.reset {105 width:420px; background:#fff; border:2px solid #dcdcdc; color:#222;106 }107 .btn.apply {108 width:640px; background:#101010; color:#fff;109 }110 111 /* Subtle scroll bar style for visual parity */112 .brand-scroll::-webkit-scrollbar { width:10px; }113 .brand-scroll::-webkit-scrollbar-track { background:#f1f1f1; }114 .brand-scroll::-webkit-scrollbar-thumb { background:#cfcfcf; border-radius:6px; }115</style>116</head>117<body>118<div id="render-target">119 <!-- Top App Bar -->120 <div class="appbar">121 <div class="back-btn">122 <svg width="42" height="42" viewBox="0 0 24 24">123 <path d="M15.5 3.5L6 12l9.5 8.5" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>124 </svg>125 </div>126 <div class="appbar-title">Filters (12038 products)</div>127 </div>128 129 <!-- Content -->130 <div class="content">131 <!-- Sidebar -->132 <div class="sidebar">133 <div class="side-section-title">Filters</div>134 <div class="side-item">Gender</div>135 <div class="side-item">Category</div>136 <div class="side-item">Price</div>137 <div class="side-item">Brands <span class="bubble">1</span></div>138 <div class="side-item">Occasion</div>139 <div class="side-item">Discount</div>140 <div class="side-item">Colors</div>141 <div class="side-item">Size & Fit</div>142 <div class="side-item">Rating</div>143 144 <div class="side-section-title">More Filters</div>145 <div class="side-item dim">Style Type</div>146 <div class="side-item dim">Pattern</div>147 <div class="side-item dim">Upper Material</div>148 <div class="side-item dim">Toe Shape</div>149 <div class="side-item dim">Fit Type</div>150 <div class="side-item dim">Sport</div>151 <div class="side-item dim">Ankle Style</div>152 <div class="side-item dim">Character</div>153 <div class="side-item dim">Heel</div>154 <div class="side-item dim">Traditional Weave</div>155 </div>156 157 <!-- Main Area -->158 <div class="main">159 <div class="search-wrap">160 <input class="search-input" placeholder="Search for brands" />161 <svg class="search-icon" viewBox="0 0 24 24">162 <circle cx="10" cy="10" r="7" stroke="#666" stroke-width="2" fill="none"></circle>163 <path d="M16 16l5 5" stroke="#666" stroke-width="2" stroke-linecap="round"/>164 </svg>165 </div>166 167 <div class="brand-scroll">168 <!-- A block of brand items -->169 <div class="brand-item"><div class="checkbox"></div> BERKINS (4)</div>170 <div class="brand-item"><div class="checkbox"></div> BIG FOX (10)</div>171 <div class="brand-item"><div class="checkbox"></div> Bond Street by Red Tape (7)</div>172 <div class="brand-item"><div class="checkbox"></div> BONICCI (6)</div>173 <div class="brand-item"><div class="checkbox"></div> Botha (2)</div>174 <div class="brand-item"><div class="checkbox"></div> BRASH by Payless (2)</div>175 <div class="brand-item"><div class="checkbox"></div> BUCIK (25)</div>176 <div class="brand-item"><div class="checkbox"></div> Buda Jeans Co (14)</div>177 <div class="brand-item"><div class="checkbox"></div> Bugatti (35)</div>178 <div class="brand-item"><div class="checkbox"></div> BXXY (126)</div>179 180 <div class="alpha">C</div>181 182 <div class="brand-item">183 <div class="checkbox checked"></div>184 Campus (1717)185 </div>186 <div class="brand-item"><div class="checkbox"></div> CAMRO (58)</div>187 <div class="brand-item"><div class="checkbox"></div> Carlton London (2)</div>188 <div class="brand-item"><div class="checkbox"></div> CASTOES (1)</div>189 <div class="brand-item"><div class="checkbox"></div> CHAMPION (1)</div>190 <div class="brand-item"><div class="checkbox"></div> CHAMPS (177)</div>191 <div class="brand-item"><div class="checkbox"></div> CIPRAMO SPORTS (3)</div>192 193 <!-- Spacer to mimic long list -->194 <div class="brand-item"><div class="checkbox"></div> Classic Footwear (12)</div>195 <div class="brand-item"><div class="checkbox"></div> Clarks (8)</div>196 <div class="brand-item"><div class="checkbox"></div> Converse (27)</div>197 <div class="brand-item"><div class="checkbox"></div> Crocs (15)</div>198 <div class="brand-item"><div class="checkbox"></div> Czar (6)</div>199 </div>200 </div>201 </div>202 203 <!-- Bottom Action Bar -->204 <div class="bottom-bar">205 <div class="btn reset">Reset</div>206 <div class="btn apply">Apply Filter</div>207 </div>208</div>209</body>210</html>