GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Refine Results - Filters</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Helvetica Neue", Arial, 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 */19  .status-bar {20    height: 96px;21    padding: 0 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #5c5c5c;26    font-weight: 600;27    letter-spacing: 0.5px;28  }29  .status-center {30    display: flex;31    gap: 22px;32    align-items: center;33    opacity: 0.7;34  }35  .dot { width: 12px; height: 12px; background: #5c5c5c; border-radius: 50%; display: inline-block; }36  .pill { width: 22px; height: 22px; border: 3px solid #5c5c5c; border-radius: 50%; }37  .status-right {38    display: flex;39    align-items: center;40    gap: 18px;41  }42  .battery {43    width: 38px; height: 22px; border: 3px solid #5c5c5c; border-radius: 4px; position: relative;44  }45  .battery::after {46    content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #5c5c5c; border-radius: 2px;47  }48 49  /* Header */50  .header {51    height: 140px;52    padding: 0 32px 0 32px;53    border-bottom: 1px solid #EDEDED;54    display: flex;55    align-items: center;56  }57  .header-col { width: 240px; }58  .header-center { flex: 1; text-align: center; font-weight: 700; letter-spacing: 2px; }59  .link-clear {60    font-weight: 700;61    letter-spacing: 3px;62    text-decoration: underline;63  }64  .close-btn {65    width: 72px; height: 72px; margin-left: auto; display: flex; align-items: center; justify-content: center;66  }67 68  /* Sections */69  .content { padding: 20px 36px 0 36px; }70  .chips {71    display: flex;72    flex-wrap: wrap;73    gap: 26px;74  }75  .chip {76    border: 2px solid #D7DBDE;77    border-radius: 8px;78    padding: 22px 28px;79    color: #9BA3A9;80    text-transform: uppercase;81    letter-spacing: 2px;82    font-weight: 700;83    background: #fff;84  }85  .chip.small { padding: 18px 24px; }86  .section { margin-top: 36px; border-top: 1px solid #F0F0F0; padding-top: 36px; }87  .section:first-of-type { border-top: none; }88  .section-title {89    font-size: 42px;90    font-weight: 800;91    margin: 8px 0 28px 0;92  }93 94  /* Color chips */95  .chip.color { display: inline-flex; align-items: center; gap: 22px; }96  .swatch {97    width: 48px; height: 48px; border-radius: 4px;98    border: 1px solid #C8CDD1;99  }100  .swatch.beige { background: linear-gradient(90deg, #D8D0C6 0%, #EFE9E0 60%); }101  .swatch.green { background: linear-gradient(90deg, #1DB954 0%, #6CD88F 70%); }102  .swatch.brown { background: #8B6A45; }103  .swatch.purple { background: #6F2DBD; }104  .swatch.multi { background: linear-gradient(135deg, #FDBA74, #F472B6, #60A5FA, #34D399); }105 106  /* Results button */107  .results-cta {108    margin: 28px 0 24px 0;109    background: #000;110    color: #fff;111    border-radius: 6px;112    height: 140px;113    display: flex;114    align-items: center;115    justify-content: space-between;116    padding: 0 44px;117  }118  .results-cta .text {119    font-size: 40px; letter-spacing: 6px; font-weight: 800;120  }121  .arrow {122    width: 56px; height: 56px;123  }124 125  /* Bottom home indicator */126  .home-indicator {127    position: absolute;128    bottom: 20px;129    left: 50%;130    transform: translateX(-50%);131    width: 320px;132    height: 10px;133    background: #CBCBCB;134    border-radius: 8px;135  }136</style>137</head>138<body>139<div id="render-target">140 141  <!-- Status Bar -->142  <div class="status-bar">143    <div class="status-left" style="font-size:40px;">5:30</div>144    <div class="status-center">145      <div class="pill"></div>146      <div class="dot"></div>147      <div class="dot"></div>148      <div class="dot"></div>149      <div class="dot" style="width:8px;height:8px;"></div>150    </div>151    <div class="status-right">152      <svg width="34" height="26" viewBox="0 0 24 24"><path fill="#5c5c5c" d="M3 12h18l-4 4m4-4l-4-4"/></svg>153      <svg width="30" height="26" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#5c5c5c" stroke-width="2" fill="none"/></svg>154      <div class="battery"></div>155    </div>156  </div>157 158  <!-- Header -->159  <div class="header">160    <div class="header-col link-clear">CLEAR ALL</div>161    <div class="header-center">REFINE RESULTS</div>162    <div class="header-col" style="display:flex; justify-content:flex-end;">163      <div class="close-btn" aria-label="Close">164        <svg width="52" height="52" viewBox="0 0 24 24">165          <path d="M4 4 L20 20 M20 4 L4 20" stroke="#111" stroke-width="2" stroke-linecap="round"/>166        </svg>167      </div>168    </div>169  </div>170 171  <!-- Content -->172  <div class="content">173 174    <!-- Colors -->175    <div class="section" style="border-top:none; padding-top:16px;">176      <div class="chips" style="margin-bottom:22px;">177        <div class="chip color">PURPLE <span class="swatch purple"></span></div>178        <div class="chip color">BEIGE <span class="swatch beige"></span></div>179        <div class="chip color">GREEN <span class="swatch green"></span></div>180        <div class="chip color">BROWN <span class="swatch brown"></span></div>181        <div class="chip color">MULTI <span class="swatch multi"></span></div>182      </div>183    </div>184 185    <!-- Collection -->186    <div class="section">187      <div class="section-title">Collection</div>188      <div class="chips">189        <div class="chip">Ultraboost</div>190        <div class="chip">Adizero</div>191        <div class="chip">Duramo</div>192        <div class="chip">Runfalcon</div>193        <div class="chip">Pureboost</div>194        <div class="chip">Supernova</div>195        <div class="chip">Ultra4D</div>196        <div class="chip">4DFWD</div>197        <div class="chip">Adistar</div>198        <div class="chip">Pure Boost</div>199        <div class="chip">Switch FWD</div>200        <div class="chip small">SL</div>201        <div class="chip">Solar</div>202        <div class="chip">RDY</div>203        <div class="chip">Soulstride</div>204      </div>205    </div>206 207    <!-- Features -->208    <div class="section">209      <div class="section-title">Features</div>210      <div class="chips">211        <div class="chip">Cushioning</div>212        <div class="chip">Lightweight</div>213        <div class="chip">Breathable</div>214        <div class="chip">Spikes</div>215      </div>216    </div>217 218    <!-- Technology -->219    <div class="section">220      <div class="section-title">Technology</div>221      <div class="chips">222        <div class="chip">Boost</div>223        <div class="chip">Lightstrike</div>224        <div class="chip">Light Boost</div>225        <div class="chip">Bounce</div>226        <div class="chip small">4D</div>227        <div class="chip">Lightmotion</div>228        <div class="chip">LightstrikePro</div>229        <div class="chip">Continental</div>230        <div class="chip">Cloudfoam</div>231        <div class="chip small">EVA</div>232        <div class="chip">Primeknit</div>233        <div class="chip">Repetitor</div>234        <div class="chip">Gore-Tex</div>235        <div class="chip">Traxion</div>236      </div>237    </div>238 239    <!-- Sale + CTA -->240    <div class="section">241      <div class="section-title">Sale</div>242      <div class="results-cta">243        <div class="text">151 RESULTS</div>244        <svg class="arrow" viewBox="0 0 24 24">245          <path d="M5 12h12M12 5l7 7-7 7" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>246        </svg>247      </div>248    </div>249 250  </div>251 252  <!-- Home indicator -->253  <div class="home-indicator"></div>254</div>255</body>256</html>