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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #242A35; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff;13  }14 15  .status-bar {16    height: 130px;17    padding: 0 40px;18    display: flex; align-items: center; justify-content: space-between;19    color: #6b7280;20    font-weight: 600; font-size: 38px;21  }22  .status-left, .status-right { display: flex; align-items: center; gap: 24px; }23  .icon { width: 44px; height: 44px; }24  .icon path, .icon rect, .icon circle { fill: none; stroke: #6b7280; stroke-width: 3; }25 26  .header {27    padding: 10px 40px 20px 40px;28    display: flex; align-items: center; justify-content: space-between;29    border-bottom: 1px solid #f0f2f5;30  }31  .header .title { font-size: 42px; font-weight: 700; color: #343a46; }32  .header .clear { font-size: 38px; font-weight: 700; color: #ff4c79; }33 34  .content {35    display: flex;36    height: 1840px; /* remainder after top and bottom bars */37  }38 39  .filters-menu {40    width: 360px;41    border-right: 1px solid #eef0f3;42    padding-top: 20px;43  }44  .filters-menu .section-title {45    font-size: 40px; font-weight: 800; color: #2f3542;46    padding: 30px 28px;47  }48  .menu-item {49    height: 120px;50    display: flex; align-items: center; justify-content: space-between;51    padding: 0 28px;52    font-size: 36px; color: #2f3542;53    background: #f4f5f7;54    border-top: 1px solid #e8eaee;55    border-bottom: 1px solid #e8eaee;56  }57  .menu-item.light { background: #f7f8fa; }58  .menu-item .count {59    color: #9aa0a6; font-weight: 700;60  }61 62  .filters-detail {63    flex: 1;64    padding: 20px 40px;65  }66  .detail-row {67    height: 130px;68    display: flex; align-items: center; justify-content: space-between;69    font-size: 38px; color: #4a4f58;70  }71  .detail-left {72    display: flex; align-items: center; gap: 24px;73    color: #2f3542; font-weight: 600;74  }75  .detail-count {76    color: #a3a8b3; font-weight: 700;77  }78  .divider {79    height: 1px; background: #edf0f3; margin: 0 0 10px 0;80  }81 82  .actions {83    position: absolute; left: 0; right: 0; bottom: 150px;84    height: 170px;85    background: #ffffff;86    border-top: 1px solid #eef0f3;87    display: flex; align-items: center; justify-content: space-between;88    padding: 0 50px;89  }90  .actions .close { font-size: 40px; color: #49505a; font-weight: 700; }91  .actions .apply { font-size: 40px; color: #ff4c79; font-weight: 800; }92  .actions .mid-divider {93    height: 70px; width: 2px; background: #e9edf2;94  }95 96  .nav-bar {97    position: absolute; left: 0; bottom: 0;98    width: 100%; height: 150px;99    background: #1f242c;100    display: flex; align-items: center; justify-content: center;101  }102  .gesture-pill {103    width: 240px; height: 16px; border-radius: 10px; background: #d1d5db;104  }105 106  /* simple check icon style */107  .check path { stroke: #4caf50; stroke-width: 8; }108</style>109</head>110<body>111<div id="render-target">112 113  <!-- Top status bar -->114  <div class="status-bar">115    <div class="status-left">116      <div>9:00</div>117      <!-- Mail icon -->118      <svg class="icon" viewBox="0 0 24 24">119        <rect x="3" y="5" width="18" height="14" rx="2"></rect>120        <path d="M3 7 L12 13 L21 7"></path>121      </svg>122      <!-- Download icon -->123      <svg class="icon" viewBox="0 0 24 24">124        <path d="M12 4 L12 14"></path>125        <path d="M8 10 L12 14 L16 10"></path>126        <rect x="4" y="18" width="16" height="2"></rect>127      </svg>128    </div>129    <div class="status-right">130      <!-- Wifi icon -->131      <svg class="icon" viewBox="0 0 24 24">132        <path d="M2 8 C8 3,16 3,22 8"></path>133        <path d="M5 12 C10 8,14 8,19 12"></path>134        <path d="M9 16 C12 14,12 14,15 16"></path>135        <circle cx="12" cy="19" r="1.8" fill="#6b7280" stroke="none"></circle>136      </svg>137      <!-- Battery icon -->138      <svg class="icon" viewBox="0 0 24 24">139        <rect x="3" y="7" width="16" height="10" rx="2"></rect>140        <rect x="20" y="10" width="2" height="4" rx="1" fill="#6b7280" stroke="none"></rect>141        <rect x="5.5" y="9.5" width="12" height="5" fill="#6b7280" stroke="none"></rect>142      </svg>143    </div>144  </div>145 146  <!-- Header -->147  <div class="header">148    <div class="title">Filters</div>149    <div class="clear">CLEAR ALL</div>150  </div>151 152  <!-- Main content -->153  <div class="content">154    <!-- Left menu -->155    <div class="filters-menu">156      <div class="section-title">Quick Filters</div>157      <div class="menu-item">Size</div>158      <div class="menu-item light">Color</div>159      <div class="menu-item">Brand <span class="count">1</span></div>160      <div class="menu-item light">Country of Origin</div>161      <div class="menu-item">Price Range</div>162      <div class="menu-item light">Discount</div>163      <div class="menu-item">Rating</div>164      <div class="menu-item light">Delivery Time</div>165      <div class="menu-item">Sole Material <span class="count">1</span></div>166      <div class="menu-item light">Running Type</div>167      <div class="menu-item">Warranty</div>168      <div class="menu-item light" style="line-height: 1.2;">169        <div>Pronation for<br/>Running Shoes</div>170      </div>171      <div class="menu-item">Material</div>172    </div>173 174    <!-- Right detail -->175    <div class="filters-detail">176      <div class="detail-row">177        <div class="detail-left">178          <svg class="icon check" viewBox="0 0 24 24">179            <path d="M4 12 L9 17 L20 6"></path>180          </svg>181          <div>Top Brands</div>182        </div>183        <div class="detail-count">183</div>184      </div>185      <div class="divider"></div>186      <div class="detail-row">187        <div class="detail-left">188          <svg class="icon check" viewBox="0 0 24 24">189            <path d="M4 12 L9 17 L20 6"></path>190          </svg>191          <div>Top Rated</div>192        </div>193        <div class="detail-count">155</div>194      </div>195      <div class="divider"></div>196      <!-- Large white space intentionally left to match screenshot -->197    </div>198  </div>199 200  <!-- Actions bar -->201  <div class="actions">202    <div class="close">CLOSE</div>203    <div class="mid-divider"></div>204    <div class="apply">APPLY</div>205  </div>206 207  <!-- Bottom navigation bar with gesture pill -->208  <div class="nav-bar">209    <div class="gesture-pill"></div>210  </div>211 212</div>213</body>214</html>