GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Basketball Filters UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    color: #000;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    background: #000;25    color: #fff;26    display: flex;27    align-items: center;28    padding: 0 40px;29    box-sizing: border-box;30    font-size: 38px;31    letter-spacing: 0.5px;32  }33  .status-icons {34    margin-left: auto;35    display: flex;36    gap: 24px;37    align-items: center;38  }39  .dot { width: 18px; height: 18px; background: #fff; border-radius: 50%; opacity: 0.9; }40 41  /* Header */42  .header {43    position: absolute;44    top: 120px;45    left: 0;46    width: 1080px;47    height: 120px;48    display: flex;49    align-items: center;50    padding: 0 40px;51    box-sizing: border-box;52    border-bottom: 1px solid #E6E6E6;53    background: #fff;54  }55  .icon-btn {56    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;57    border-radius: 16px;58  }59  .title {60    font-size: 46px; font-weight: 700; margin-left: 24px;61  }62  .header-actions {63    margin-left: auto; display: flex; gap: 24px; align-items: center;64  }65  .close-fab {66    position: absolute;67    right: 40px;68    top: 210px;69    width: 96px; height: 96px; border-radius: 48px; background: #111; display: flex; align-items: center; justify-content: center;70    box-shadow: 0 8px 20px rgba(0,0,0,0.2);71  }72  .close-fab svg { width: 42px; height: 42px; }73 74  /* Content area */75  .content {76    position: absolute;77    top: 240px;78    left: 0;79    width: 100%;80    height: calc(2400px - 240px);81    overflow-y: auto;82    box-sizing: border-box;83    padding: 0 40px 280px;84  }85  .divider { width: 100%; height: 1px; background: #E6E6E6; margin: 24px 0; }86 87  /* Checkbox rows */88  .check-row {89    display: flex; align-items: center; gap: 24px; padding: 28px 0;90    font-size: 40px; font-weight: 600;91  }92  .checkbox {93    width: 56px; height: 56px; border: 3px solid #BDBDBD; border-radius: 12px;94    display: inline-flex; align-items: center; justify-content: center;95    background: #fff;96  }97 98  /* Section titles */99  .section-title { font-size: 44px; font-weight: 700; margin: 36px 0 8px; }100  .helper-text { color: #666; font-size: 34px; }101 102  /* Size grid */103  .size-grid {104    display: grid;105    grid-template-columns: repeat(4, 1fr);106    grid-gap: 24px;107    margin-top: 24px;108  }109  .size-chip {110    height: 120px;111    border: 2px solid #DADADA;112    border-radius: 24px;113    display: flex; align-items: center; justify-content: center;114    font-size: 40px; font-weight: 600; color: #222;115    background: #fff;116  }117  .size-chip.selected {118    border: 4px solid #111;119    box-shadow: inset 0 0 0 2px transparent;120  }121  .more-link {122    font-size: 40px; font-weight: 700; margin: 28px 0 8px; color: #000;123  }124 125  /* Colour swatches */126  .colour-grid {127    display: grid;128    grid-template-columns: repeat(4, 1fr);129    grid-gap: 32px;130    margin-top: 24px;131    align-items: start;132  }133  .colour-item { display: flex; flex-direction: column; align-items: center; gap: 20px; }134  .swatch {135    width: 120px; height: 120px; border-radius: 60px; border: 2px solid #D6D6D6;136  }137  .swatch.black { background: #000; border-color: #000; }138  .swatch.blue  { background: #243C86; border-color: #243C86; }139  .swatch.green { background: #2F7A44; border-color: #2F7A44; }140  .swatch.multicolour { background: radial-gradient(circle at 30% 35%, #000 0%, #000 30%, #fff 31%, #fff 32%, #000 33%, #000 63%, #fff 64%, #fff 65%, #000 66%); border-color: #000; }141  .swatch.pink { background: #E87E95; border-color: #E87E95; }142  .swatch.red { background: #BE1E2D; border-color: #BE1E2D; }143  .swatch.grey { background: #F5F5F5; border: 3px solid #9E9E9E; }144  .swatch.yellow { background: #F1C84B; border-color: #F1C84B; }145  .colour-label { font-size: 36px; color: #333; }146 147  /* Bottom buttons */148  .bottom-actions {149    position: absolute;150    bottom: 120px;151    left: 40px;152    right: 40px;153    display: flex; gap: 32px;154  }155  .btn {156    flex: 1;157    height: 140px;158    border-radius: 70px;159    display: flex; align-items: center; justify-content: center;160    font-size: 44px; font-weight: 700; cursor: default;161  }162  .btn.reset {163    background: #fff; border: 2px solid #DADADA; color: #111;164  }165  .btn.apply {166    background: #111; color: #fff;167  }168 169  /* Home indicator */170  .home-indicator {171    position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);172    width: 320px; height: 12px; background: #D3D3D3; border-radius: 6px;173  }174 175  /* Icons */176  svg { display: block }177</style>178</head>179<body>180<div id="render-target">181 182  <!-- Status Bar -->183  <div class="status-bar">184    <div>12:10</div>185    <div class="status-icons">186      <div class="dot"></div>187      <div class="dot"></div>188      <div class="dot"></div>189      <div class="dot"></div>190      <div class="dot" style="width:22px;height:22px;"></div>191    </div>192  </div>193 194  <!-- Header -->195  <div class="header">196    <div class="icon-btn">197      <svg width="40" height="40" viewBox="0 0 24 24">198        <path d="M15.5 19L8 12l7.5-7" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>199      </svg>200    </div>201    <div class="title">Basketball</div>202    <div class="header-actions">203      <div class="icon-btn">204        <svg width="44" height="44" viewBox="0 0 24 24">205          <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2.3" fill="none"/>206          <path d="M20 20l-3.5-3.5" stroke="#111" stroke-width="2.3" fill="none" stroke-linecap="round"/>207        </svg>208      </div>209      <div class="icon-btn" style="position: relative;">210        <svg width="44" height="44" viewBox="0 0 24 24">211          <path d="M7 8c0-2.2 1.8-4 4-4s4 1.8 4 4v1h3v11H4V9h3V8z" stroke="#111" stroke-width="2.2" fill="none" stroke-linejoin="round"/>212        </svg>213        <div style="position:absolute; right:-2px; top:-2px; width:34px; height:34px; background:#111; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700;">1</div>214      </div>215    </div>216  </div>217 218  <!-- Floating Close FAB -->219  <div class="close-fab">220    <svg viewBox="0 0 24 24">221      <path d="M6 6l12 12M18 6L6 18" stroke="#fff" stroke-width="2.8" stroke-linecap="round"/>222    </svg>223  </div>224 225  <!-- Content -->226  <div class="content">227 228    <div class="check-row">229      <div class="checkbox"></div>230      <div>Unisex</div>231    </div>232 233    <div class="divider"></div>234 235    <div class="section-title">Shop By Price</div>236    <div class="check-row" style="font-weight:600;">237      <div class="checkbox"></div>238      <div>Over ₹ 13 000.00</div>239    </div>240 241    <div class="section-title">Size (1)</div>242 243    <div class="size-grid">244      <div class="size-chip">2.5</div>245      <div class="size-chip">3</div>246      <div class="size-chip">3.5</div>247      <div class="size-chip">4.5</div>248 249      <div class="size-chip selected">5</div>250      <div class="size-chip">5.5</div>251      <div class="size-chip">6</div>252      <div class="size-chip">6.5</div>253 254      <div class="size-chip">7.5</div>255      <div class="size-chip">8</div>256      <div class="size-chip">8.5</div>257      <div class="size-chip">9</div>258 259      <div class="size-chip">9.5</div>260      <div class="size-chip">10</div>261      <div class="size-chip">10.5</div>262      <div class="size-chip">11</div>263    </div>264 265    <div class="more-link">+ More</div>266 267    <div class="section-title">Colour</div>268 269    <div class="colour-grid">270      <div class="colour-item">271        <div class="swatch black"></div>272        <div class="colour-label">Black</div>273      </div>274      <div class="colour-item">275        <div class="swatch blue"></div>276        <div class="colour-label">Blue</div>277      </div>278      <div class="colour-item">279        <div class="swatch green"></div>280        <div class="colour-label">Green</div>281      </div>282      <div class="colour-item">283        <div class="swatch multicolour"></div>284        <div class="colour-label">Multi-Colour</div>285      </div>286 287      <div class="colour-item">288        <div class="swatch pink"></div>289      </div>290      <div class="colour-item">291        <div class="swatch red"></div>292      </div>293      <div class="colour-item">294        <div class="swatch grey"></div>295      </div>296      <div class="colour-item">297        <div class="swatch yellow"></div>298      </div>299    </div>300 301  </div>302 303  <!-- Bottom Action Buttons -->304  <div class="bottom-actions">305    <div class="btn reset">Reset (4)</div>306    <div class="btn apply">Apply</div>307  </div>308 309  <!-- Home Indicator -->310  <div class="home-indicator"></div>311 312</div>313</body>314</html>