GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1440, initial-scale=1.0">5<title>Refine Results - Filters</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1440px;10    height: 3120px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    border-radius: 24px;15    box-shadow: 0 8px 24px rgba(0,0,0,0.08);16  }17 18  /* Status bar */19  .status-bar {20    height: 120px;21    padding: 0 48px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #222;26    font-size: 44px;27  }28  .status-left, .status-right { display: flex; align-items: center; }29  .status-left span { margin-right: 28px; }30  .icon {31    width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; margin-right: 28px;32  }33  .icon svg { width: 36px; height: 36px; }34  .dot { width: 18px; height: 18px; border-radius: 50%; background:#111; display:inline-block; margin-left: 18px; }35 36  /* Header */37  .top-actions {38    padding: 30px 48px 10px 48px;39    color: #111;40    font-size: 42px;41    letter-spacing: 1px;42  }43  .clear-link { color: #111; font-weight: 600; }44  .header {45    border-bottom: 1px solid #eee;46    padding: 24px 48px 32px 48px;47    display: flex;48    align-items: center;49    justify-content: space-between;50  }51  .title {52    font-size: 64px;53    font-weight: 700;54    letter-spacing: 2px;55    color: #111;56  }57  .close-btn {58    width: 72px; height: 72px; border: 2px solid #111; border-radius: 50%;59    display: flex; align-items: center; justify-content: center;60  }61  .close-btn:after {62    content: "×";63    font-size: 56px; line-height: 1; color: #111;64  }65 66  /* Sections */67  .content { padding: 24px 48px 220px 48px; }68  .section { margin-top: 40px; }69  .section-title {70    font-size: 56px; font-weight: 700; color: #222; margin-bottom: 26px;71  }72 73  /* Chips */74  .chips { display: flex; flex-wrap: wrap; }75  .chip {76    font-size: 42px;77    padding: 24px 30px;78    border: 2px solid #dcdcdc;79    border-radius: 16px;80    color: #4a4a4a;81    margin: 18px 18px 0 0;82    background: #fafafa;83    display: inline-flex;84    align-items: center;85  }86  .chip .swatch {87    width: 44px;88    height: 44px;89    border-radius: 6px;90    margin-left: 22px;91    border: 1px solid #bdbdbd;92  }93 94  /* Footer button */95  .footer-cta {96    position: absolute;97    left: 48px;98    right: 48px;99    bottom: 140px;100    height: 160px;101    background: #000;102    border-radius: 8px;103    display: flex; align-items: center; justify-content: space-between;104    padding: 0 48px;105  }106  .footer-cta span {107    color: #fff; font-size: 56px; letter-spacing: 4px; font-weight: 700;108  }109  .footer-cta .arrow svg { width: 72px; height: 72px; fill: none; stroke: #fff; stroke-width: 12; }110 111  /* Home bar indicator */112  .home-indicator {113    position: absolute; bottom: 60px; left: 50%;114    transform: translateX(-50%);115    width: 420px; height: 16px; border-radius: 16px; background: #888;116    opacity: 0.45;117  }118</style>119</head>120<body>121<div id="render-target">122 123  <!-- Status Bar -->124  <div class="status-bar">125    <div class="status-left">126      <span>2:21</span>127      <div class="icon" title="Lock">128        <svg viewBox="0 0 24 24">129          <path d="M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V7a3 3 0 0 0-6 0v3z" fill="#111"/>130        </svg>131      </div>132      <div class="icon" title="Search">133        <svg viewBox="0 0 24 24">134          <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2" fill="none"/>135          <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#111" stroke-width="2"/>136        </svg>137      </div>138      <span style="font-weight:700">B</span>139      <span class="dot"></span>140    </div>141    <div class="status-right">142      <div class="icon" title="WiFi">143        <svg viewBox="0 0 24 24">144          <path d="M2 8c5-5 15-5 20 0M6 12c3-3 9-3 12 0M10 16c2-2 6-2 8 0" stroke="#111" stroke-width="2" fill="none"/>145          <circle cx="12" cy="20" r="2" fill="#111"/>146        </svg>147      </div>148      <div class="icon" title="Battery">149        <svg viewBox="0 0 24 24">150          <rect x="1" y="6" width="18" height="12" rx="2" stroke="#111" stroke-width="2" fill="none"/>151          <rect x="3" y="8" width="12" height="8" fill="#111"/>152          <rect x="20" y="9" width="3" height="6" rx="1" fill="#111"/>153        </svg>154      </div>155    </div>156  </div>157 158  <!-- Top Actions & Header -->159  <div class="top-actions">160    <span class="clear-link">CLEAR ALL</span>161  </div>162  <div class="header">163    <div class="title">REFINE RESULTS</div>164    <div class="close-btn" aria-label="Close"></div>165  </div>166 167  <!-- Content -->168  <div class="content">169    <!-- Sale single chip -->170    <div class="chips" style="margin-top: 16px; margin-bottom: 20px;">171      <div class="chip" style="padding: 26px 34px;">SALE</div>172    </div>173 174    <!-- Size -->175    <div class="section">176      <div class="section-title">Size</div>177      <div class="chips">178        <div class="chip">3.5</div>179        <div class="chip">4</div>180        <div class="chip">4.5</div>181        <div class="chip">5</div>182        <div class="chip">5.5</div>183        <div class="chip">6</div>184        <div class="chip">6.5</div>185        <div class="chip">7</div>186        <div class="chip">7.5</div>187 188        <div class="chip">8</div>189        <div class="chip">8.5</div>190        <div class="chip">9</div>191        <div class="chip">9.5</div>192        <div class="chip">10</div>193        <div class="chip">10.5</div>194        <div class="chip">11</div>195        <div class="chip">11.5</div>196 197        <div class="chip">12</div>198        <div class="chip">12.5</div>199        <div class="chip">13</div>200        <div class="chip">13.5</div>201        <div class="chip">14</div>202      </div>203    </div>204 205    <!-- Discount -->206    <div class="section">207      <div class="section-title">Discount</div>208      <div class="chips">209        <div class="chip">UP TO 20%</div>210        <div class="chip">20–30%</div>211        <div class="chip">30–40%</div>212        <div class="chip">40% OR MORE</div>213      </div>214    </div>215 216    <!-- Color -->217    <div class="section">218      <div class="section-title">Color</div>219      <div class="chips">220        <div class="chip">BLACK<div class="swatch" style="background:#000;"></div></div>221        <div class="chip">WHITE<div class="swatch" style="background:#f7f7f7;"></div></div>222        <div class="chip">GREY<div class="swatch" style="background:#9e9e9e;"></div></div>223        <div class="chip">BLUE<div class="swatch" style="background:#2c6ea6;"></div></div>224 225        <div class="chip">RED<div class="swatch" style="background:#c62828;"></div></div>226        <div class="chip">GREEN<div class="swatch" style="background:#66bb6a;"></div></div>227        <div class="chip">BEIGE<div class="swatch" style="background:#d7c6a5;"></div></div>228        <div class="chip">BROWN<div class="swatch" style="background:#8d6e63;"></div></div>229 230        <div class="chip">ORANGE<div class="swatch" style="background:#f57c00;"></div></div>231        <div class="chip">TURQUOISE<div class="swatch" style="background:#4fb3bf;"></div></div>232        <div class="chip">YELLOW<div class="swatch" style="background:#ffeb3b;"></div></div>233      </div>234    </div>235 236    <!-- Features -->237    <div class="section">238      <div class="section-title">Features</div>239      <div class="chips">240        <div class="chip">CUSHIONING</div>241        <div class="chip">WATERPROOF</div>242        <div class="chip">WATER-RESISTANT</div>243        <div class="chip">STRETCH</div>244      </div>245    </div>246 247    <!-- Technology (label only to mirror screenshot hint) -->248    <div class="section">249      <div class="section-title">Technology</div>250    </div>251  </div>252 253  <!-- Footer button -->254  <div class="footer-cta">255    <span>100 RESULTS</span>256    <div class="arrow">257      <svg viewBox="0 0 24 24">258        <path d="M5 12h12M13 6l6 6-6 6" />259      </svg>260    </div>261  </div>262 263  <!-- Home indicator -->264  <div class="home-indicator"></div>265</div>266</body>267</html>