GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Filter Screen</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Roboto, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #e9e9e9;20  }21 22  /* Status bar */23  .status-bar {24    height: 100px;25    background: #d9d9d9;26  }27 28  /* Header */29  .header {30    height: 180px;31    background: #ffffff;32    border-bottom: 1px solid #e5e5e5;33    display: flex;34    align-items: center;35    padding: 0 48px;36  }37  .header-left {38    display: flex;39    align-items: center;40    gap: 24px;41    color: #333;42    font-weight: 600;43    font-size: 46px;44    letter-spacing: 1px;45  }46  .header-right {47    margin-left: auto;48    color: #6f6f6f;49    font-size: 40px;50    font-weight: 500;51  }52 53  /* Content area */54  .content {55    position: absolute;56    top: 280px; /* 100 + 180 */57    left: 0;58    right: 0;59    bottom: 320px; /* space for bottom actions + gesture */60    display: flex;61  }62  .left-pane {63    width: 320px;64    background: #e3e3e3;65    border-right: 1px solid #dddddd;66    padding: 40px 36px;67    box-sizing: border-box;68  }69  .left-pane .section-label {70    color: #7a7a7a;71    font-size: 42px;72    margin-bottom: 110px;73  }74 75  .right-pane {76    flex: 1;77    background: #ffffff;78    padding: 30px 40px;79    box-sizing: border-box;80  }81 82  .filter-item {83    display: flex;84    align-items: center;85    gap: 36px;86    padding: 36px 0;87    border-bottom: 1px solid transparent; /* visual spacing only */88  }89  .checkbox {90    width: 56px;91    height: 56px;92    border: 6px solid #6d6d6d;93    border-radius: 12px;94    box-sizing: border-box;95  }96  .filter-text {97    font-size: 44px;98    color: #444444;99  }100 101  /* Bottom action bar */102  .bottom-actions {103    position: absolute;104    left: 0;105    right: 0;106    bottom: 120px;107    height: 200px;108    padding: 28px 36px;109    box-sizing: border-box;110    display: flex;111    gap: 28px;112  }113  .action-btn {114    flex: 1;115    background: #ffffff;116    border: 1px solid #e6e6e6;117    border-radius: 36px;118    display: flex;119    align-items: center;120    justify-content: center;121    font-size: 46px;122    font-weight: 600;123    letter-spacing: 1px;124  }125  .action-cancel {126    color: #5f5f5f;127  }128  .action-apply {129    color: #4a47a8;130  }131 132  /* Gesture area */133  .gesture {134    position: absolute;135    left: 0;136    right: 0;137    bottom: 0;138    height: 120px;139    background: #000000;140  }141  .home-indicator {142    width: 360px;143    height: 14px;144    background: #d0d0d0;145    border-radius: 7px;146    position: absolute;147    left: 50%;148    bottom: 38px;149    transform: translateX(-50%);150    opacity: 0.9;151  }152 153  /* Icon styling */154  .icon {155    width: 56px;156    height: 56px;157  }158</style>159</head>160<body>161<div id="render-target">162  <div class="status-bar"></div>163 164  <div class="header">165    <div class="header-left">166      <svg class="icon" viewBox="0 0 24 24">167        <path d="M3 5h18M6 11h12M9 17h6" stroke="#555" stroke-width="2.2" stroke-linecap="round"/>168      </svg>169      <div>FILTER</div>170    </div>171    <div class="header-right">CLEAR ALL</div>172  </div>173 174  <div class="content">175    <div class="left-pane">176      <div class="section-label">Size</div>177      <div class="section-label">Price</div>178      <div class="section-label">Color</div>179      <div class="section-label">Nature</div>180      <div class="section-label">Brand</div>181    </div>182 183    <div class="right-pane">184      <div class="filter-item">185        <div class="checkbox"></div>186        <div class="filter-text">Kalenji</div>187      </div>188      <div class="filter-item">189        <div class="checkbox"></div>190        <div class="filter-text">Quechua</div>191      </div>192      <div class="filter-item">193        <div class="checkbox"></div>194        <div class="filter-text">Newfeel</div>195      </div>196      <div class="filter-item">197        <div class="checkbox"></div>198        <div class="filter-text">Decathlon</div>199      </div>200      <div class="filter-item">201        <div class="checkbox"></div>202        <div class="filter-text">Perfly</div>203      </div>204      <div class="filter-item">205        <div class="checkbox"></div>206        <div class="filter-text">Kipsta</div>207      </div>208      <div class="filter-item">209        <div class="checkbox"></div>210        <div class="filter-text">Tarmak</div>211      </div>212      <div class="filter-item">213        <div class="checkbox"></div>214        <div class="filter-text">Artengo</div>215      </div>216      <div class="filter-item">217        <div class="checkbox"></div>218        <div class="filter-text">Kiprun</div>219      </div>220      <div class="filter-item">221        <div class="checkbox"></div>222        <div class="filter-text">Forclaz</div>223      </div>224    </div>225  </div>226 227  <div class="bottom-actions">228    <div class="action-btn action-cancel">CANCEL</div>229    <div class="action-btn action-apply">APPLY</div>230  </div>231 232  <div class="gesture">233    <div class="home-indicator"></div>234  </div>235</div>236</body>237</html>