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>Filter Drawer</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15    font-family: Arial, Helvetica, sans-serif;16    color: #212121;17  }18 19  /* Status bar */20  .status-bar {21    height: 110px;22    background: #E6E6E6;23    display: flex;24    align-items: center;25    padding: 0 36px;26    font-size: 30px;27    color: #9E9E9E;28  }29  .status-icons {30    margin-left: auto;31    display: flex;32    align-items: center;33    gap: 24px;34  }35  .dot { width: 10px; height: 10px; background:#BDBDBD; border-radius:50%; display:inline-block; }36 37  /* Header */38  .header {39    height: 160px;40    background: #FFFFFF;41    border-bottom: 1px solid #E0E0E0;42    display: flex;43    align-items: center;44    padding: 0 36px;45  }46  .header .title {47    display: flex;48    align-items: center;49    gap: 18px;50    font-weight: 700;51    letter-spacing: 1px;52    color: #424242;53    font-size: 44px;54  }55  .header .actions {56    margin-left: auto;57    font-size: 38px;58    color: #616161;59    letter-spacing: 1px;60  }61 62  /* Content area */63  .content {64    position: absolute;65    top: 270px; /* status + header */66    bottom: 260px; /* space for bottom bar */67    left: 0;68    right: 0;69    display: flex;70    overflow: hidden;71  }72  .sidebar {73    width: 300px;74    background: #EEEEEE;75    padding: 36px 24px;76    box-sizing: border-box;77  }78  .side-item {79    color: #8A8A8A;80    font-size: 36px;81    padding: 34px 12px;82  }83  .side-item.active {84    color: #5A5A5A;85    font-weight: 700;86  }87 88  .options {89    flex: 1;90    background: #FFFFFF;91    padding: 18px 0;92    overflow-y: auto;93  }94 95  .option-row {96    display: flex;97    align-items: center;98    gap: 28px;99    padding: 36px 40px;100    border-bottom: 1px solid #F3F3F3;101  }102  .checkbox {103    width: 58px;104    height: 58px;105    border: 4px solid #7A7A7A;106    border-radius: 8px;107    box-sizing: border-box;108    flex: 0 0 auto;109    background: #FFFFFF;110  }111  .label {112    font-size: 40px;113    color: #424242;114  }115 116  /* Bottom action area */117  .bottom-bar {118    position: absolute;119    left: 0;120    right: 0;121    bottom: 120px;122    height: 220px;123    background: #FFFFFF;124    border-top: 1px solid #E0E0E0;125    display: flex;126    align-items: center;127    justify-content: space-between;128    padding: 20px 24px;129    box-sizing: border-box;130  }131  .btn {132    height: 150px;133    border: 1px solid #E0E0E0;134    background: #FFFFFF;135    border-radius: 28px;136    width: calc(50% - 18px);137    display: flex;138    align-items: center;139    justify-content: center;140    font-size: 42px;141    font-weight: 700;142    letter-spacing: 1px;143  }144  .btn.primary {145    color: #4B49B6;146    border-color: #E2E1F6;147  }148  .btn.secondary {149    color: #2B2B2B;150  }151 152  /* Gesture bar */153  .gesture {154    position: absolute;155    bottom: 32px;156    left: 50%;157    transform: translateX(-50%);158    width: 200px;159    height: 12px;160    background: #C9C9C9;161    border-radius: 8px;162  }163</style>164</head>165<body>166<div id="render-target">167 168  <!-- Simulated status bar -->169  <div class="status-bar">170    <div style="font-weight:600;">11:39</div>171    <div class="status-icons">172      <span class="dot"></span>173      <span class="dot"></span>174      <span class="dot"></span>175      <span class="dot"></span>176    </div>177  </div>178 179  <!-- Header with filter icon and clear all -->180  <div class="header">181    <div class="title">182      <svg width="48" height="48" viewBox="0 0 24 24" fill="none">183        <path d="M3 5h18M6 12h12M10 19h4" stroke="#616161" stroke-width="2" stroke-linecap="round"/>184      </svg>185      <span>FILTER</span>186    </div>187    <div class="actions">CLEAR ALL</div>188  </div>189 190  <!-- Main content -->191  <div class="content">192    <div class="sidebar">193      <div class="side-item active">Size</div>194      <div class="side-item">Price</div>195      <div class="side-item">Color</div>196      <div class="side-item">Nature</div>197      <div class="side-item">Brand</div>198    </div>199 200    <div class="options">201      <div class="option-row">202        <div class="checkbox"></div>203        <div class="label">UK 8 - EU 42</div>204      </div>205      <div class="option-row">206        <div class="checkbox"></div>207        <div class="label">UK 8.5 - EU 43</div>208      </div>209      <div class="option-row">210        <div class="checkbox"></div>211        <div class="label">UK 9.5 - EU 44</div>212      </div>213      <div class="option-row">214        <div class="checkbox"></div>215        <div class="label">UK 10.5 - EU 45</div>216      </div>217      <div class="option-row">218        <div class="checkbox"></div>219        <div class="label">UK 7 - EU 41</div>220      </div>221      <div class="option-row">222        <div class="checkbox"></div>223        <div class="label">UK 6.5 - EU 40</div>224      </div>225      <div class="option-row">226        <div class="checkbox"></div>227        <div class="label">UK 11 - EU 46</div>228      </div>229      <div class="option-row">230        <div class="checkbox"></div>231        <div class="label">UK 5  EU38</div>232      </div>233      <div class="option-row">234        <div class="checkbox"></div>235        <div class="label">UK 4  EU37</div>236      </div>237      <div class="option-row">238        <div class="checkbox"></div>239        <div class="label">UK 5.5 - EU 39</div>240      </div>241    </div>242  </div>243 244  <!-- Bottom buttons -->245  <div class="bottom-bar">246    <div class="btn secondary">CANCEL</div>247    <div class="btn primary">APPLY</div>248  </div>249 250  <!-- Gesture handle -->251  <div class="gesture"></div>252</div>253</body>254</html>