GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Filters UI</title>6<style>7 body{margin:0;padding:0;background:transparent;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;}8 #render-target{9 width:1080px;height:2400px;position:relative;overflow:hidden;10 background:#ffffff;border-radius:24px;box-shadow:0 4px 24px rgba(0,0,0,0.15);11 }12 13 /* Status bar */14 .status-bar{position:absolute;top:0;left:0;width:100%;height:110px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 36px;color:#2b2b2b;font-weight:600;letter-spacing:.2px;border-bottom:1px solid #eee;}15 .status-right{display:flex;align-items:center;gap:26px;color:#666;font-size:30px;}16 .icon{width:40px;height:40px;display:inline-block}17 .wifi svg, .battery svg, .ring svg{width:40px;height:40px}18 .wifi path{stroke:#666;stroke-width:4;fill:none}19 .battery rect{stroke:#666;stroke-width:4;fill:none}20 .battery .fill{fill:#76c442}21 .ring circle{stroke:#666;stroke-width:4;fill:none}22 23 /* Header */24 .app-header{position:absolute;top:110px;left:0;width:100%;height:130px;display:flex;align-items:center;gap:26px;padding:0 36px;border-bottom:1px solid #eee;background:#fff;}25 .back-btn{width:72px;height:72px;border-radius:36px;display:flex;align-items:center;justify-content:center;background:#f4f4f4}26 .back-btn svg{width:42px;height:42px}27 .title{font-size:44px;font-weight:700;color:#222}28 29 /* Content area */30 .content{position:absolute;top:240px;left:0;right:0;bottom:260px;display:flex;}31 .left-menu{width:300px;background:#F1F3F5;border-right:1px solid #E2E5E9;overflow:auto;padding-bottom:60px}32 .menu-item{padding:32px 28px;font-size:34px;color:#3a3a3a;border-bottom:1px solid #E6EAEE}33 .menu-item.active{background:#fff;font-weight:700;color:#000}34 .menu-group{margin-top:36px;color:#777;font-size:32px;padding:22px 28px;border-top:1px solid #E6EAEE}35 36 .right-panel{flex:1;overflow:auto;padding:30px 34px}37 .search-wrap{display:flex;align-items:center;background:#F5F6F7;border:1px solid #DFE3E8;border-radius:18px;padding:20px 24px;margin-bottom:28px}38 .search-wrap input{flex:1;border:none;background:transparent;font-size:36px;color:#333;outline:none}39 .search-icon{width:44px;height:44px;margin-left:18px}40 .search-icon svg{width:100%;height:100%}41 .brand-item{display:flex;align-items:center;padding:22px 4px;border-bottom:1px solid #F1F3F5}42 .checkbox{width:52px;height:52px;border:3px solid #C9CDD2;border-radius:10px;margin-right:26px;background:#fff}43 .brand-text{font-size:36px;color:#222;display:flex;align-items:baseline;gap:12px}44 .count{font-size:32px;color:#6F7782}45 .alphabet{font-size:44px;font-weight:800;color:#222;margin:26px 0 8px 10px}46 47 /* Bottom bar */48 .bottom-bar{position:absolute;left:0;right:0;bottom:0;height:260px;background:#F7F8FA;border-top:1px solid #E2E5E9;display:flex;align-items:center;justify-content:space-between;padding:36px}49 .btn{height:120px;border-radius:24px;font-size:40px;font-weight:700;display:flex;align-items:center;justify-content:center}50 .btn.reset{width:460px;background:#fff;border:2px solid #D7DBE0;color:#1f1f1f}51 .btn.apply{width:600px;background:#121212;color:#fff;box-shadow:0 6px 22px rgba(0,0,0,0.25)}52</style>53</head>54<body>55<div id="render-target">56 57 <!-- Status Bar -->58 <div class="status-bar">59 <div class="status-left" style="font-size:34px;">12:39</div>60 <div class="status-right">61 <div class="ring icon">62 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"></circle></svg>63 </div>64 <div class="wifi icon">65 <svg viewBox="0 0 24 24">66 <path d="M2 8c5-4 15-4 20 0"></path>67 <path d="M6 12c3-2 9-2 12 0"></path>68 <path d="M10 16c1-1 3-1 4 0"></path>69 </svg>70 </div>71 <div class="battery icon">72 <svg viewBox="0 0 36 24">73 <rect x="2" y="4" width="28" height="16" rx="3"></rect>74 <rect x="30" y="9" width="4" height="6" rx="1"></rect>75 <rect class="fill" x="4" y="6" width="22" height="12" rx="2"></rect>76 </svg>77 </div>78 <div style="font-size:30px;color:#222;">97%</div>79 </div>80 </div>81 82 <!-- App Header -->83 <div class="app-header">84 <div class="back-btn">85 <svg viewBox="0 0 24 24">86 <path d="M15 19l-7-7 7-7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>87 </svg>88 </div>89 <div class="title">Filters (12038 products)</div>90 </div>91 92 <!-- Content -->93 <div class="content">94 <!-- Left menu -->95 <div class="left-menu">96 <div class="menu-item">Gender</div>97 <div class="menu-item">Category</div>98 <div class="menu-item">Price</div>99 <div class="menu-item active">Brands</div>100 <div class="menu-item">Occasion</div>101 <div class="menu-item">Discount</div>102 <div class="menu-item">Colors</div>103 <div class="menu-item">Size & Fit</div>104 <div class="menu-item">Rating</div>105 106 <div class="menu-group">More Filters</div>107 <div class="menu-item">Style Type</div>108 <div class="menu-item">Pattern</div>109 <div class="menu-item">Upper Material</div>110 <div class="menu-item">Toe Shape</div>111 <div class="menu-item">Fit Type</div>112 <div class="menu-item">Sport</div>113 <div class="menu-item">Ankle Style</div>114 <div class="menu-item">Character</div>115 <div class="menu-item">Heel</div>116 <div class="menu-item">Traditional Weave</div>117 </div>118 119 <!-- Right panel -->120 <div class="right-panel">121 <!-- Search -->122 <div class="search-wrap">123 <input type="text" placeholder="Search for brands">124 <div class="search-icon">125 <svg viewBox="0 0 24 24">126 <circle cx="11" cy="11" r="7" stroke="#7A818A" stroke-width="2" fill="none"></circle>127 <path d="M20 20l-4.5-4.5" stroke="#7A818A" stroke-width="2" fill="none" stroke-linecap="round"></path>128 </svg>129 </div>130 </div>131 132 <!-- Brands list -->133 <div class="brand-item">134 <div class="checkbox"></div>135 <div class="brand-text"><span>BERKINS</span><span class="count">(4)</span></div>136 </div>137 <div class="brand-item">138 <div class="checkbox"></div>139 <div class="brand-text"><span>BIG FOX</span><span class="count">(10)</span></div>140 </div>141 <div class="brand-item">142 <div class="checkbox"></div>143 <div class="brand-text"><span>Bond Street by Red Tape</span><span class="count">(7)</span></div>144 </div>145 <div class="brand-item">146 <div class="checkbox"></div>147 <div class="brand-text"><span>BONICCI</span><span class="count">(6)</span></div>148 </div>149 <div class="brand-item">150 <div class="checkbox"></div>151 <div class="brand-text"><span>Botha</span><span class="count">(2)</span></div>152 </div>153 <div class="brand-item">154 <div class="checkbox"></div>155 <div class="brand-text"><span>BRASH by Payless</span><span class="count">(2)</span></div>156 </div>157 <div class="brand-item">158 <div class="checkbox"></div>159 <div class="brand-text"><span>BUCIK</span><span class="count">(25)</span></div>160 </div>161 <div class="brand-item">162 <div class="checkbox"></div>163 <div class="brand-text"><span>Buda Jeans Co</span><span class="count">(14)</span></div>164 </div>165 <div class="brand-item">166 <div class="checkbox"></div>167 <div class="brand-text"><span>Bugatti</span><span class="count">(35)</span></div>168 </div>169 <div class="brand-item">170 <div class="checkbox"></div>171 <div class="brand-text"><span>BXXY</span><span class="count">(126)</span></div>172 </div>173 174 <div class="alphabet">C</div>175 176 <div class="brand-item">177 <div class="checkbox"></div>178 <div class="brand-text"><span>Campus</span><span class="count">(1717)</span></div>179 </div>180 <div class="brand-item">181 <div class="checkbox"></div>182 <div class="brand-text"><span>CAMRO</span><span class="count">(58)</span></div>183 </div>184 <div class="brand-item">185 <div class="checkbox"></div>186 <div class="brand-text"><span>Carlton London</span><span class="count">(2)</span></div>187 </div>188 <div class="brand-item">189 <div class="checkbox"></div>190 <div class="brand-text"><span>CASTOES</span><span class="count">(1)</span></div>191 </div>192 <div class="brand-item">193 <div class="checkbox"></div>194 <div class="brand-text"><span>CHAMPION</span><span class="count">(1)</span></div>195 </div>196 <div class="brand-item">197 <div class="checkbox"></div>198 <div class="brand-text"><span>CHAMPS</span><span class="count">(177)</span></div>199 </div>200 <div class="brand-item">201 <div class="checkbox"></div>202 <div class="brand-text"><span>CIPRAMO SPORTS</span><span class="count">(3)</span></div>203 </div>204 </div>205 </div>206 207 <!-- Bottom Buttons -->208 <div class="bottom-bar">209 <div class="btn reset">Reset</div>210 <div class="btn apply">Apply Filter</div>211 </div>212 213</div>214</body>215</html>