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: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, 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  /* Status bar */18  .statusbar {19    height: 88px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    font-size: 34px;25    color: #111;26  }27  .status-icons {28    display: flex;29    align-items: center;30    gap: 24px;31  }32  .toolbar {33    height: 140px;34    border-bottom: 2px solid #eee;35    display: flex;36    align-items: center;37    padding: 0 36px;38    position: relative;39  }40  .toolbar .left {41    font-size: 34px;42    letter-spacing: 4px;43    font-weight: 700;44  }45  .toolbar .title {46    position: absolute;47    left: 50%;48    transform: translateX(-50%);49    font-size: 36px;50    letter-spacing: 4px;51    font-weight: 700;52  }53  .toolbar .close {54    margin-left: auto;55    width: 56px;56    height: 56px;57  }58  .content {59    position: absolute;60    left: 0;61    right: 0;62    top: 228px; /* statusbar + toolbar */63    bottom: 0;64    overflow-y: auto;65    -webkit-overflow-scrolling: touch;66  }67  .section {68    padding: 48px 48px 24px;69    border-bottom: 2px solid #f0f0f0;70  }71  .section h3 {72    margin: 0 0 24px;73    font-size: 44px;74    font-weight: 700;75  }76  .sort-list {77    display: flex;78    flex-direction: column;79    gap: 48px;80    padding: 16px 0 8px;81  }82  .sort-item {83    display: flex;84    align-items: center;85    gap: 28px;86    font-size: 40px;87    color: #222;88  }89  .radio {90    width: 44px;91    height: 44px;92    border: 4px solid #bbb;93    border-radius: 50%;94  }95  .pill {96    display: inline-flex;97    align-items: center;98    justify-content: center;99    height: 88px;100    padding: 0 32px;101    border: 3px solid #d9d9d9;102    color: #9e9e9e;103    font-size: 34px;104    text-transform: uppercase;105    letter-spacing: 2px;106    border-radius: 8px;107    background: #fff;108  }109  .size-grid {110    display: flex;111    flex-wrap: wrap;112    gap: 28px;113    padding-top: 8px;114  }115  .size-chip {116    width: 104px;117    height: 88px;118    display: flex;119    align-items: center;120    justify-content: center;121    border: 3px solid #d9d9d9;122    border-radius: 8px;123    color: #8f8f8f;124    font-size: 36px;125    background: #fff;126  }127  .discount-row {128    display: flex;129    flex-wrap: wrap;130    gap: 28px;131    padding-top: 8px;132  }133  .cta-wrap {134    padding: 40px 48px 100px;135  }136  .cta {137    background: #000;138    color: #fff;139    height: 160px;140    border-radius: 4px;141    display: flex;142    align-items: center;143    justify-content: space-between;144    padding: 0 48px;145  }146  .cta .label {147    font-size: 44px;148    font-weight: 800;149    letter-spacing: 6px;150  }151  .home-indicator {152    position: absolute;153    left: 50%;154    bottom: 26px;155    transform: translateX(-50%);156    width: 340px;157    height: 14px;158    background: #9e9e9e;159    border-radius: 8px;160    opacity: 0.8;161  }162  /* Helpers */163  .divider { border-top: 2px solid #f0f0f0; }164</style>165</head>166<body>167<div id="render-target">168  <!-- Status bar -->169  <div class="statusbar">170    <div class="time">10:51</div>171    <div class="status-icons">172      <!-- simple mail icon -->173      <svg width="42" height="42" viewBox="0 0 24 24" fill="none">174        <rect x="3" y="5" width="18" height="14" rx="2" stroke="#4a4a4a" stroke-width="2"/>175        <path d="M3 7l9 6 9-6" stroke="#4a4a4a" stroke-width="2"/>176      </svg>177      <!-- wifi -->178      <svg width="42" height="42" viewBox="0 0 24 24" fill="none">179        <path d="M2 8c6-5 14-5 20 0" stroke="#4a4a4a" stroke-width="2" stroke-linecap="round"/>180        <path d="M5 12c4-3 10-3 14 0" stroke="#4a4a4a" stroke-width="2" stroke-linecap="round"/>181        <path d="M9 16c2-2 4-2 6 0" stroke="#4a4a4a" stroke-width="2" stroke-linecap="round"/>182        <circle cx="12" cy="19" r="1.5" fill="#4a4a4a"/>183      </svg>184      <!-- battery -->185      <svg width="42" height="42" viewBox="0 0 26 24" fill="none">186        <rect x="1" y="6" width="20" height="12" rx="2" stroke="#4a4a4a" stroke-width="2"/>187        <rect x="3" y="8" width="12" height="8" fill="#4a4a4a"/>188        <rect x="22" y="9" width="3" height="6" rx="1" fill="#4a4a4a"/>189      </svg>190    </div>191  </div>192 193  <!-- Toolbar -->194  <div class="toolbar">195    <div class="left">CLEAR ALL</div>196    <div class="title">REFINE RESULTS</div>197    <div class="close">198      <svg viewBox="0 0 24 24" width="56" height="56">199        <path d="M5 5l14 14M19 5L5 19" stroke="#000" stroke-width="2" stroke-linecap="round"/>200      </svg>201    </div>202  </div>203 204  <!-- Scrollable Content -->205  <div class="content">206    <div class="section">207      <h3>Sort by</h3>208      <div class="sort-list">209        <div class="sort-item"><span class="radio"></span> <span>Price (low/high)</span></div>210        <div class="sort-item"><span class="radio"></span> <span>Newest first</span></div>211        <div class="sort-item"><span class="radio"></span> <span>Top Sellers</span></div>212        <div class="sort-item"><span class="radio"></span> <span>Price (high/low)</span></div>213        <div class="sort-item"><span class="radio"></span> <span>Customer Top Rated</span></div>214      </div>215    </div>216 217    <div class="section">218      <h3>Sale</h3>219      <div class="pill">SALE</div>220    </div>221 222    <div class="section">223      <h3>Size</h3>224      <div class="size-grid">225        <div class="size-chip">4</div>226        <div class="size-chip">4.5</div>227        <div class="size-chip">5</div>228        <div class="size-chip">5.5</div>229        <div class="size-chip">6</div>230        <div class="size-chip">6.5</div>231        <div class="size-chip">7</div>232        <div class="size-chip">7.5</div>233        <div class="size-chip">8</div>234 235        <div class="size-chip">8.5</div>236        <div class="size-chip">9</div>237        <div class="size-chip">9.5</div>238        <div class="size-chip">10</div>239        <div class="size-chip">10.5</div>240        <div class="size-chip">11</div>241        <div class="size-chip">11.5</div>242        <div class="size-chip">12</div>243 244        <div class="size-chip">12.5</div>245        <div class="size-chip">13</div>246        <div class="size-chip">13.5</div>247        <div class="size-chip">14</div>248        <div class="size-chip">14.5</div>249        <div class="size-chip">15</div>250        <div class="size-chip">16</div>251        <div class="size-chip">18</div>252 253        <div class="size-chip">19</div>254        <div class="size-chip">14.5</div>255      </div>256    </div>257 258    <div class="section">259      <h3>Discount</h3>260      <div class="discount-row">261        <div class="pill">UP TO 20%</div>262        <div class="pill">20-30%</div>263        <div class="pill">30-40%</div>264        <div class="pill">40% OR MORE</div>265      </div>266    </div>267 268    <div class="cta-wrap">269      <div class="cta">270        <div class="label">850 RESULTS</div>271        <svg width="64" height="64" viewBox="0 0 24 24" fill="none">272          <path d="M5 12h12" stroke="#fff" stroke-width="2" stroke-linecap="round"/>273          <path d="M13 6l6 6-6 6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>274        </svg>275      </div>276    </div>277    <div style="height:140px;"></div>278  </div>279 280  <!-- Home Indicator -->281  <div class="home-indicator"></div>282</div>283</body>284</html>