GD-ML/AndroidCode

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: Arial, Helvetica, sans-serif; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#111111;12  }13 14  /* Status bar */15  .status-bar {16    position:absolute; top:0; left:0; right:0;17    height:160px; background:#6A6A6A; color:#ffffff;18    display:flex; align-items:center; padding:0 40px; font-weight:600;19  }20  .status-left { display:flex; align-items:center; gap:28px; font-size:44px; }21  .status-icons { display:flex; align-items:center; gap:18px; color:#EDEDED; font-size:40px; }22  .status-right { margin-left:auto; display:flex; align-items:center; gap:24px; font-size:40px; }23 24  /* Header */25  .header {26    position:absolute; top:160px; left:0; right:0; height:160px;27    background:#121212; color:#EDEDED; display:flex; align-items:center;28    padding:0 40px; border-bottom:1px solid #1f1f1f;29  }30  .back-icon { width:68px; height:68px; margin-right:30px; }31  .header-title { font-size:60px; letter-spacing:6px; font-weight:700; }32 33  /* Main content area */34  .content {35    position:absolute; top:320px; left:0; right:0; bottom:180px; /* leave space for bottom bar */36    display:flex;37  }38 39  /* Left filter list */40  .left-panel {41    width:340px; background:#1A1A1A; color:#C5C5C5; padding-top:10px;42    border-right:1px solid #202020; overflow-y:auto;43  }44  .filter-item {45    padding:28px 34px; font-size:40px; line-height:1.4; border-radius:0;46  }47  .filter-item.active {48    background:#2A3A0E; color:#E9F5C7; margin:10px 20px; border-radius:36px;49    font-weight:700;50  }51 52  /* Right brand list */53  .right-panel {54    flex:1; background:#111111; padding:30px 30px 30px 30px; overflow-y:auto;55  }56  .list-card {57    background:#151515; border-radius:18px; padding:10px 0;58    box-shadow: inset 0 0 0 1px #1F1F1F;59  }60  .brand-row {61    display:flex; align-items:center; padding:34px 40px;62    border-bottom:1px solid #222222;63  }64  .check {65    width:72px; height:72px; border-radius:14px; margin-right:34px;66    background:#EEF6CE; box-shadow: inset 0 0 0 2px #D4DEAD;67  }68  .brand-name {69    flex:1; color:#DDDDDD; font-size:44px; font-weight:500;70  }71  .count {72    color:#8E8E8E; font-size:40px;73  }74 75  /* Bottom bar */76  .bottom-bar {77    position:absolute; left:0; right:0; bottom:0; height:180px;78    background:#1A1A1A; display:flex; align-items:center; padding:0 44px;79    border-top:1px solid #232323;80  }81  .reset {82    color:#CFE7E7; font-size:48px; font-weight:600;83  }84  .apply-btn {85    margin-left:auto; width:380px; height:120px; border-radius:30px;86    background:#6F6F6F; color:#FFFFFF; display:flex; align-items:center; justify-content:center;87    font-size:48px; font-weight:700;88  }89</style>90</head>91<body>92<div id="render-target">93 94  <!-- Status bar -->95  <div class="status-bar">96    <div class="status-left">97      <div>10:49</div>98      <div class="status-icons">• • •</div>99    </div>100    <div class="status-right">101      <div>◦</div>102      <div>▴</div>103      <div>95%</div>104    </div>105  </div>106 107  <!-- Header -->108  <div class="header">109    <svg class="back-icon" viewBox="0 0 24 24">110      <path d="M15 18l-6-6 6-6" fill="none" stroke="#EDEDED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>111    </svg>112    <div class="header-title">FILTERS</div>113  </div>114 115  <!-- Main content -->116  <div class="content">117    <!-- Left side categories -->118    <div class="left-panel">119      <div class="filter-item">Categories</div>120      <div class="filter-item">Discount</div>121      <div class="filter-item">Offers</div>122      <div class="filter-item active">Brand</div>123      <div class="filter-item">Color</div>124      <div class="filter-item">Size</div>125      <div class="filter-item">Toe Shape</div>126      <div class="filter-item">Sport Type</div>127      <div class="filter-item">Closure</div>128      <div class="filter-item">Material</div>129      <div class="filter-item">Prints & Pattern</div>130      <div class="filter-item">No. Of Pcs</div>131      <div class="filter-item">Essential</div>132      <div class="filter-item">Lowest Priced</div>133      <div class="filter-item">Occasion</div>134      <div class="filter-item">Exclusive</div>135    </div>136 137    <!-- Right side list of brands -->138    <div class="right-panel">139      <div class="list-card">140        <div class="brand-row">141          <div class="check"></div>142          <div class="brand-name">Aadi</div>143          <div class="count">(4)</div>144        </div>145        <div class="brand-row">146          <div class="check"></div>147          <div class="brand-name">AAVENGER SHOES</div>148          <div class="count">(2)</div>149        </div>150        <div class="brand-row">151          <div class="check"></div>152          <div class="brand-name">Abisto</div>153          <div class="count">(46)</div>154        </div>155        <div class="brand-row">156          <div class="check"></div>157          <div class="brand-name">Abon</div>158          <div class="count">(4)</div>159        </div>160        <div class="brand-row">161          <div class="check"></div>162          <div class="brand-name">Aishwary Glams</div>163          <div class="count">(3)</div>164        </div>165        <div class="brand-row">166          <div class="check"></div>167          <div class="brand-name">Alk Beton</div>168          <div class="count">(4)</div>169        </div>170        <div class="brand-row">171          <div class="check"></div>172          <div class="brand-name">Angel Craft</div>173          <div class="count">(91)</div>174        </div>175        <div class="brand-row">176          <div class="check"></div>177          <div class="brand-name">APPELON</div>178          <div class="count">(7)</div>179        </div>180        <div class="brand-row">181          <div class="check"></div>182          <div class="brand-name">asian</div>183          <div class="count">(468)</div>184        </div>185        <div class="brand-row">186          <div class="check"></div>187          <div class="brand-name">Avinash Handicrafts</div>188          <div class="count">(5)</div>189        </div>190        <div class="brand-row">191          <div class="check"></div>192          <div class="brand-name">BEM</div>193          <div class="count">(9)</div>194        </div>195        <div class="brand-row">196          <div class="check"></div>197          <div class="brand-name">Bersache</div>198          <div class="count">(75)</div>199        </div>200        <div class="brand-row">201          <div class="check"></div>202          <div class="brand-name">big fox</div>203          <div class="count">(3)</div>204        </div>205        <div class="brand-row">206          <div class="check"></div>207          <div class="brand-name">BIGGIE</div>208          <div class="count">(3)</div>209        </div>210        <div class="brand-row">211          <div class="check"></div>212          <div class="brand-name">BIRDE</div>213          <div class="count">(74)</div>214        </div>215        <div class="brand-row">216          <div class="check"></div>217          <div class="brand-name">Briczack</div>218          <div class="count">(2)</div>219        </div>220        <div class="brand-row" style="border-bottom:none;">221          <div class="check"></div>222          <div class="brand-name">Champs</div>223          <div class="count">(166)</div>224        </div>225      </div>226    </div>227  </div>228 229  <!-- Bottom sticky bar -->230  <div class="bottom-bar">231    <div class="reset">Reset all</div>232    <div class="apply-btn">Apply</div>233  </div>234 235</div>236</body>237</html>