GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Filter - Basketball</title>5<style>6  body { margin:0; padding:0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#ffffff;11  }12 13  /* Status bar */14  .status-bar {15    position:absolute; left:0; top:0; width:100%; height:120px;16    background:#000;17    color:#fff; font-size:36px;18    display:flex; align-items:center; justify-content:space-between;19    padding:0 40px;20  }21  .status-left { display:flex; align-items:center; gap:20px; }22  .dot { width:10px; height:10px; background:#fff; border-radius:50%; display:inline-block; margin-left:8px; opacity:.9; }23  .status-right { display:flex; align-items:center; gap:24px; }24  .icon-battery, .icon-wifi { width:40px; height:40px; border-radius:8px; border:2px solid #fff; opacity:.9; }25  .icon-battery { border-radius:4px; }26 27  /* Header */28  .header {29    position:absolute; left:0; top:120px; width:100%; height:140px;30    background:#fff;31    display:flex; align-items:center;32    padding:0 36px;33    box-sizing:border-box;34  }35  .header-title { font-size:54px; font-weight:700; color:#111; margin-left:24px; }36  .header-actions { margin-left:auto; display:flex; align-items:center; gap:36px; }37  .btn-circle {38    width:96px; height:96px; border-radius:48px; background:#111; display:flex; align-items:center; justify-content:center;39  }40  .divider {41    position:absolute; left:0; top:260px; width:100%; height:3px; background:#e6e6e6;42  }43 44  /* Content wrapper */45  .content {46    position:absolute; left:0; top:280px; bottom:280px; width:100%;47    overflow:auto;48    padding:0 40px 40px;49    box-sizing:border-box;50  }51  .section { margin-top:40px; }52  .checkbox-row { display:flex; align-items:center; gap:28px; margin:28px 0; }53  .checkbox {54    width:56px; height:56px; border:3px solid #bfbfbf; border-radius:10px; box-sizing:border-box;55  }56  .label { font-size:44px; color:#111; }57  .subheading { font-size:42px; font-weight:700; color:#111; margin-top:8px; }58  .fine { color:#666; }59 60  /* Size chips grid */61  .chip-grid {62    margin-top:20px;63    display:grid;64    grid-template-columns: repeat(4, 1fr);65    gap:28px;66  }67  .chip {68    height:120px; border:3px solid #d9d9d9; border-radius:22px;69    display:flex; align-items:center; justify-content:center;70    font-size:44px; color:#222; background:#fff;71  }72  .more-link {73    font-size:44px; color:#111; font-weight:700; margin:32px 0;74  }75 76  /* Colour */77  .colour-grid {78    display:grid;79    grid-template-columns: repeat(4, 1fr);80    gap:28px;81    margin-top:24px;82  }83  .colour-item { text-align:center; }84  .swatch {85    width:120px; height:120px; border-radius:60px; border:3px solid #d8d8d8; margin:0 auto 18px;86  }87  .swatch.black { background:#000; border-color:#000; }88  .swatch.blue { background:#2b4aa6; border-color:#2b4aa6; }89  .swatch.green { background:#2e7b45; border-color:#2e7b45; }90  .swatch.multi { background:radial-gradient(circle at 30% 30%, #ff3b3b 0 35%, #2b7cff 35% 70%, #ffd84d 70%); border-color:#333; }91  .swatch.pink { background:#e8879f; border-color:#e8879f; }92  .swatch.red { background:#c62634; border-color:#c62634; }93  .swatch.grey { background:#f5f5f5; border-color:#bfbfbf; }94  .swatch.yellow { background:#f0c84a; border-color:#f0c84a; }95  .colour-label { font-size:36px; color:#222; }96 97  /* Bottom actions */98  .actions {99    position:absolute; left:0; bottom:0; width:100%; height:240px;100    background:#fff;101    display:flex; align-items:center; justify-content:space-between;102    padding:40px;103    box-sizing:border-box;104    box-shadow: 0 -8px 24px rgba(0,0,0,0.06);105  }106  .btn {107    height:120px; border-radius:60px; font-size:44px; font-weight:700;108    display:flex; align-items:center; justify-content:center;109  }110  .btn-reset {111    width:480px; border:3px solid #dcdcdc; color:#111; background:#fff;112  }113  .btn-apply {114    width:520px; background:#111; color:#fff;115  }116 117  /* Small home indicator imitation */118  .home-indicator {119    position:absolute; bottom:20px; left:50%; transform:translateX(-50%);120    width:420px; height:12px; border-radius:6px; background:#cfcfcf;121  }122 123  /* Simple SVG buttons */124  .icon-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; }125  .icon { width:72px; height:72px; }126 127  /* Back button style */128  .back-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; }129</style>130</head>131<body>132<div id="render-target">133 134  <!-- Status bar -->135  <div class="status-bar">136    <div class="status-left">137      <div>12:10</div>138      <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>139    </div>140    <div class="status-right">141      <div class="icon-wifi"></div>142      <div class="icon-battery"></div>143    </div>144  </div>145 146  <!-- Header -->147  <div class="header">148    <div class="back-btn">149      <svg viewBox="0 0 24 24" class="icon">150        <path d="M15.5 19.5L7 12l8.5-7.5" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>151      </svg>152    </div>153    <div class="header-title">Basketball</div>154    <div class="header-actions">155      <div class="icon-btn">156        <svg viewBox="0 0 24 24" class="icon">157          <circle cx="11" cy="11" r="6.5" stroke="#111" stroke-width="2.2" fill="none"/>158          <path d="M17.5 17.5L22 22" stroke="#111" stroke-width="2.2" stroke-linecap="round"/>159        </svg>160      </div>161      <div class="icon-btn" style="position:relative;">162        <svg viewBox="0 0 24 24" class="icon">163          <path d="M6 8h12l-1.5 12H7.5L6 8z" stroke="#111" stroke-width="2.2" fill="none" />164          <path d="M8 8V6.5c0-1.4 1.1-2.5 2.5-2.5h3c1.4 0 2.5 1.1 2.5 2.5V8" stroke="#111" stroke-width="2.2" fill="none"/>165        </svg>166        <div style="position:absolute; right:-4px; top:-6px; background:#111; color:#fff; font-size:26px; width:40px; height:40px; border-radius:20px; display:flex; align-items:center; justify-content:center;">1</div>167      </div>168      <div class="btn-circle">169        <svg viewBox="0 0 24 24" class="icon">170          <path d="M6 6l12 12M18 6L6 18" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/>171        </svg>172      </div>173    </div>174  </div>175  <div class="divider"></div>176 177  <!-- Content -->178  <div class="content">179 180    <!-- Unisex -->181    <div class="section">182      <div class="checkbox-row">183        <div class="checkbox"></div>184        <div class="label">Unisex</div>185      </div>186    </div>187 188    <div class="divider" style="top:auto; position:relative; height:3px; background:#e6e6e6;"></div>189 190    <!-- Shop By Price -->191    <div class="section">192      <div class="subheading">Shop By Price</div>193      <div class="checkbox-row">194        <div class="checkbox"></div>195        <div class="label">Over ₹ 13 000.00</div>196      </div>197    </div>198 199    <!-- Size -->200    <div class="section">201      <div class="subheading">Size</div>202      <div class="chip-grid">203        <div class="chip">2.5</div>204        <div class="chip">3</div>205        <div class="chip">3.5</div>206        <div class="chip">4.5</div>207 208        <div class="chip">5</div>209        <div class="chip">5.5</div>210        <div class="chip">6</div>211        <div class="chip">6.5</div>212 213        <div class="chip">7.5</div>214        <div class="chip">8</div>215        <div class="chip">8.5</div>216        <div class="chip">9</div>217 218        <div class="chip">9.5</div>219        <div class="chip">10</div>220        <div class="chip">10.5</div>221        <div class="chip">11</div>222      </div>223      <div class="more-link">+ More</div>224    </div>225 226    <!-- Colour -->227    <div class="section">228      <div class="subheading">Colour</div>229      <div class="colour-grid">230        <div class="colour-item">231          <div class="swatch black"></div>232          <div class="colour-label">Black</div>233        </div>234        <div class="colour-item">235          <div class="swatch blue"></div>236          <div class="colour-label">Blue</div>237        </div>238        <div class="colour-item">239          <div class="swatch green"></div>240          <div class="colour-label">Green</div>241        </div>242        <div class="colour-item">243          <div class="swatch multi"></div>244          <div class="colour-label">Multi-Colour</div>245        </div>246 247        <div class="colour-item">248          <div class="swatch pink"></div>249        </div>250        <div class="colour-item">251          <div class="swatch red"></div>252        </div>253        <div class="colour-item">254          <div class="swatch grey"></div>255        </div>256        <div class="colour-item">257          <div class="swatch yellow"></div>258        </div>259      </div>260    </div>261 262  </div>263 264  <!-- Bottom actions -->265  <div class="actions">266    <div class="btn btn-reset">Reset (3)</div>267    <div class="btn btn-apply">Apply</div>268  </div>269 270  <div class="home-indicator"></div>271</div>272</body>273</html>