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 { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    color: #111;16  }17 18  /* Status bar (mock) */19  .status-bar {20    height: 96px;21    padding: 16px 28px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    font-size: 28px;26    color: #333;27  }28  .status-icons {29    display: flex;30    align-items: center;31    gap: 18px;32  }33  .icon-circle {34    width: 28px;35    height: 28px;36    border-radius: 50%;37    background: #9e9e9e;38  }39  .signal {40    width: 28px;41    height: 20px;42    border: 2px solid #666;43    border-top: 6px solid #666;44    border-radius: 3px;45  }46 47  /* Header */48  .header {49    height: 120px;50    padding: 0 36px;51    display: flex;52    align-items: center;53    justify-content: space-between;54    border-bottom: 1px solid #efefef;55  }56  .header .left-action {57    font-size: 30px;58    letter-spacing: 2px;59    text-transform: uppercase;60    text-decoration: underline;61    font-weight: 700;62  }63  .header .title {64    font-size: 32px;65    letter-spacing: 3px;66    text-transform: uppercase;67    font-weight: 700;68    color: #111;69  }70  .header .close-btn {71    width: 52px;72    height: 52px;73    display: flex;74    align-items: center;75    justify-content: center;76  }77 78  /* Sections */79  .section {80    padding: 28px 36px 10px 36px;81  }82  .section + .section {83    border-top: 1px solid #f0f0f0;84  }85  .section-title {86    font-size: 36px;87    font-weight: 800;88    margin: 12px 0 18px;89  }90 91  /* Chips */92  .chips {93    display: flex;94    flex-wrap: wrap;95    gap: 20px 24px;96  }97  .chip {98    display: inline-flex;99    align-items: center;100    padding: 22px 28px;101    border: 2px solid #d7d7d7;102    border-radius: 8px;103    background: #fff;104    color: #b8b8b8;105    text-transform: uppercase;106    letter-spacing: 2px;107    font-size: 26px;108    line-height: 1;109  }110  .chip .swatch {111    width: 44px;112    height: 36px;113    border-radius: 4px;114    margin-left: 18px;115    border: 1px solid #9e9e9e;116  }117 118  /* Results button */119  .results-wrap {120    padding: 24px 36px 120px;121    border-top: 1px solid #f0f0f0;122  }123  .results-btn {124    width: 100%;125    background: #000;126    color: #fff;127    height: 144px;128    border-radius: 2px;129    display: flex;130    align-items: center;131    justify-content: space-between;132    padding: 0 40px;133  }134  .results-btn .label {135    font-size: 34px;136    font-weight: 800;137    letter-spacing: 3px;138    text-transform: uppercase;139  }140  .results-btn .arrow {141    width: 48px;142    height: 48px;143  }144 145  /* Gesture bar (OS pill) */146  .gesture {147    position: absolute;148    left: 50%;149    transform: translateX(-50%);150    bottom: 28px;151    width: 420px;152    height: 12px;153    background: #9e9e9e;154    border-radius: 12px;155    opacity: 0.9;156  }157</style>158</head>159<body>160<div id="render-target">161 162  <!-- Status bar mock -->163  <div class="status-bar">164    <div class="time">10:52</div>165    <div class="status-icons">166      <div class="icon-circle"></div>167      <div class="icon-circle"></div>168      <div class="signal"></div>169    </div>170  </div>171 172  <!-- Header -->173  <div class="header">174    <div class="left-action">Clear All</div>175    <div class="title">Refine Results</div>176    <div class="close-btn" aria-label="Close">177      <svg viewBox="0 0 24 24" width="32" height="32">178        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#111" stroke-width="2" stroke-linecap="round"/>179      </svg>180    </div>181  </div>182 183  <!-- Discount -->184  <div class="section">185    <div class="section-title">Discount</div>186    <div class="chips">187      <div class="chip">Up to 20%</div>188      <div class="chip">20-30%</div>189      <div class="chip">30-40%</div>190      <div class="chip">40% or more</div>191    </div>192  </div>193 194  <!-- Color -->195  <div class="section">196    <div class="section-title">Color</div>197    <div class="chips">198      <div class="chip">Black <span class="swatch" style="background:#000;"></span></div>199      <div class="chip">White <span class="swatch" style="background:#e0e0e0;"></span></div>200      <div class="chip">Grey <span class="swatch" style="background:#9e9e9e;"></span></div>201      <div class="chip">Blue <span class="swatch" style="background:#0b7cc2;"></span></div>202 203      <div class="chip">Red <span class="swatch" style="background:#e53935;"></span></div>204      <div class="chip">Beige <span class="swatch" style="background:#d9ccb3;"></span></div>205      <div class="chip">Pink <span class="swatch" style="background:#ff5aa7;"></span></div>206      <div class="chip">Green <span class="swatch" style="background:#66bb6a;"></span></div>207 208      <div class="chip">Brown <span class="swatch" style="background:#8d6e63;"></span></div>209      <div class="chip">Purple <span class="swatch" style="background:#7b1fa2;"></span></div>210      <div class="chip">Turquoise <span class="swatch" style="background:#1abc9c;"></span></div>211 212      <div class="chip">Orange <span class="swatch" style="background:#fb8c00;"></span></div>213      <div class="chip">Burgundy <span class="swatch" style="background:#8a0f16;"></span></div>214      <div class="chip">Yellow <span class="swatch" style="background:#f4e04d;"></span></div>215 216      <div class="chip">Multi217        <span class="swatch" style="background: linear-gradient(135deg, #ff8a80, #ffd180, #80d8ff, #b388ff); border:1px solid #9e9e9e;"></span>218      </div>219      <div class="chip">Gold <span class="swatch" style="background:#cbb26a;"></span></div>220    </div>221  </div>222 223  <!-- Sport -->224  <div class="section">225    <div class="section-title">Sport</div>226    <div class="chips">227      <div class="chip">Lifestyle</div>228      <div class="chip">Running</div>229      <div class="chip">Basketball</div>230      <div class="chip">Training</div>231 232      <div class="chip">Walking</div>233      <div class="chip">Golf</div>234      <div class="chip">Skateboarding</div>235      <div class="chip">Tennis</div>236 237      <div class="chip">Soccer</div>238      <div class="chip">Cycling</div>239      <div class="chip">Volleyball</div>240      <div class="chip">Hiking</div>241 242      <div class="chip">Trail Running</div>243      <div class="chip">Climbing</div>244      <div class="chip">Mountain Biking</div>245 246      <div class="chip">Futsal</div>247      <div class="chip">Weightlifting</div>248      <div class="chip">Baseball</div>249      <div class="chip">Football</div>250 251      <div class="chip">HIIT</div>252    </div>253  </div>254 255  <!-- Results button -->256  <div class="results-wrap">257    <div class="results-btn">258      <div class="label">850 Results</div>259      <svg class="arrow" viewBox="0 0 24 24">260        <path d="M5 12 H19 M13 6 L19 12 L13 18" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>261      </svg>262    </div>263  </div>264 265  <div class="gesture"></div>266</div>267</body>268</html>