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>Refine Results - Filters</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;13    color: #111;14  }15  /* Root container required by instructions */16  #render-target {17    width: 1080px;18    height: 2400px;19    position: relative;20    overflow: hidden;21    background: #ffffff;22  }23 24  /* Top action bar */25  .topbar {26    position: absolute;27    top: 0;28    left: 0;29    right: 0;30    height: 160px;31    background: #fff;32    border-bottom: 1px solid #e8e8e8;33    display: flex;34    align-items: center;35    padding: 0 40px;36    box-sizing: border-box;37    z-index: 5;38  }39  .topbar .left,40  .topbar .center,41  .topbar .right {42    display: flex;43    align-items: center;44  }45  .topbar .left { width: 33.33%; }46  .topbar .center { width: 33.33%; justify-content: center; }47  .topbar .right { width: 33.33%; justify-content: flex-end; }48 49  .link-clear {50    font-size: 30px;51    letter-spacing: 4px;52    font-weight: 700;53    color: #111;54    text-decoration: none;55  }56 57  .title {58    font-size: 32px;59    letter-spacing: 5px;60    font-weight: 700;61    color: #222;62  }63 64  .icon-btn {65    width: 72px;66    height: 72px;67    display: inline-flex;68    align-items: center;69    justify-content: center;70  }71  .icon-btn svg {72    width: 48px;73    height: 48px;74    stroke: #111;75    stroke-width: 6;76    stroke-linecap: round;77  }78 79  /* Scroll area for content */80  .content {81    position: absolute;82    top: 160px; /* below topbar */83    bottom: 0;84    left: 0;85    right: 0;86    overflow-y: auto;87    -webkit-overflow-scrolling: touch;88  }89 90  .section {91    padding: 34px 40px 10px 40px;92  }93 94  .section-title {95    font-size: 44px;96    font-weight: 800;97    margin: 30px 0 18px 0;98  }99 100  .chips {101    display: flex;102    flex-wrap: wrap;103    gap: 26px 26px;104    padding-bottom: 20px;105  }106 107  .chip {108    padding: 18px 28px;109    border: 2px solid #d9d9d9;110    border-radius: 8px;111    color: #b5b5b5;112    text-transform: uppercase;113    font-weight: 700;114    font-size: 26px;115    letter-spacing: 2px;116    background: #fff;117  }118 119  .divider {120    height: 1px;121    background: #eeeeee;122    margin: 18px 0 6px 0;123  }124 125  /* Results button */126  .results-cta {127    margin: 40px;128    margin-top: 24px;129    background: #000;130    color: #fff;131    height: 140px;132    border-radius: 4px;133    display: flex;134    align-items: center;135    justify-content: space-between;136    padding: 0 40px;137    box-sizing: border-box;138  }139  .results-cta .label {140    font-size: 38px;141    font-weight: 800;142    letter-spacing: 6px;143  }144  .results-cta .arrow {145    width: 54px;146    height: 54px;147  }148  .results-cta .arrow svg {149    width: 54px;150    height: 54px;151    stroke: #fff;152    stroke-width: 6;153    fill: none;154    stroke-linecap: round;155    stroke-linejoin: round;156  }157 158  /* Gesture home indicator (visual only) */159  .home-indicator {160    position: absolute;161    left: 50%;162    transform: translateX(-50%);163    bottom: 20px;164    width: 280px;165    height: 12px;166    background: #bdbdbd;167    border-radius: 8px;168    opacity: 0.7;169  }170</style>171</head>172<body>173  <div id="render-target">174    <!-- Top bar -->175    <div class="topbar">176      <div class="left">177        <a href="#" class="link-clear">CLEAR ALL</a>178      </div>179      <div class="center">180        <div class="title">REFINE RESULTS</div>181      </div>182      <div class="right">183        <button class="icon-btn" aria-label="Close">184          <svg viewBox="0 0 24 24">185            <line x1="4" y1="4" x2="20" y2="20"></line>186            <line x1="20" y1="4" x2="4" y2="20"></line>187          </svg>188        </button>189      </div>190    </div>191 192    <!-- Scrollable content -->193    <div class="content">194      <div class="section">195        <div class="chips">196          <div class="chip">HIIT</div>197        </div>198      </div>199 200      <div class="divider"></div>201 202      <div class="section">203        <div class="section-title">Collection</div>204        <div class="chips">205          <div class="chip">Ultraboost</div>206          <div class="chip">NMD</div>207          <div class="chip">Superstar</div>208          <div class="chip">Gazelle</div>209 210          <div class="chip">Forum</div>211          <div class="chip">Samba</div>212          <div class="chip">Stan Smith</div>213          <div class="chip">Adizero</div>214          <div class="chip">Campus</div>215 216          <div class="chip">Nizza</div>217          <div class="chip">OZ</div>218          <div class="chip">Rivalry</div>219          <div class="chip">Duramo</div>220          <div class="chip">Puremotion</div>221 222          <div class="chip">XPLR</div>223          <div class="chip">Supernova</div>224          <div class="chip">Exhibit</div>225          <div class="chip">Runfalcon</div>226 227          <div class="chip">Adicolor</div>228          <div class="chip">Crazyflight</div>229          <div class="chip">4DFWD</div>230          <div class="chip">Edge Lux</div>231 232          <div class="chip">Teamwear</div>233          <div class="chip">Trae</div>234          <div class="chip">Avryn</div>235          <div class="chip">Lillard</div>236          <div class="chip">Retropy</div>237 238          <div class="chip">Crazy</div>239          <div class="chip">Pureboost</div>240          <div class="chip">Swift</div>241        </div>242      </div>243 244      <div class="divider"></div>245 246      <div class="section">247        <div class="section-title">Features</div>248        <div class="chips">249          <div class="chip">Cushioning</div>250          <div class="chip">Lightweight</div>251          <div class="chip">Spikeless</div>252 253          <div class="chip">Breathable</div>254          <div class="chip">Spikes</div>255          <div class="chip">Waterproof</div>256 257          <div class="chip">Sweat Wicking</div>258          <div class="chip">Water-Resistant</div>259          <div class="chip">Mesh</div>260          <div class="chip">Stretch</div>261        </div>262      </div>263 264      <div class="divider"></div>265 266      <div class="section">267        <div class="section-title">Technology</div>268        <div class="chips">269          <div class="chip">Boost</div>270          <div class="chip">Bounce</div>271          <div class="chip">Cloudfoam</div>272          <div class="chip">Lightstrike</div>273        </div>274      </div>275 276      <div class="section">277        <div class="results-cta">278          <div class="label">850 RESULTS</div>279          <div class="arrow">280            <svg viewBox="0 0 24 24">281              <path d="M5 12h12"></path>282              <path d="M13 6l6 6-6 6"></path>283            </svg>284          </div>285        </div>286      </div>287 288      <div style="height: 120px;"></div>289    </div>290 291    <div class="home-indicator"></div>292  </div>293</body>294</html>