GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Refine Results</title>6<style>7  body { margin:0; padding:0; background:transparent; }8  #render-target {9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#ffffff; color:#111;12    font-family: Arial, Helvetica, sans-serif;13  }14 15  /* Status bar */16  .status-bar {17    height:96px;18    padding:0 36px;19    display:flex;20    align-items:center;21    justify-content:space-between;22    color:#222;23    font-size:42px;24  }25  .status-icons { display:flex; align-items:center; gap:22px; }26  .icon-dot { width:12px; height:12px; background:#555; border-radius:50%; }27  .icon-shape {28    width:34px; height:34px; border-radius:8px; background:#777;29  }30  .signal {31    width:42px; height:28px; border:3px solid #444; border-radius:6px; position:relative;32  }33  .signal:after {34    content:''; position:absolute; right:4px; top:6px; width:8px; height:12px; background:#444; border-radius:2px;35  }36  .battery {37    width:54px; height:28px; border:3px solid #444; border-radius:6px; position:relative; margin-left:8px;38  }39  .battery:after {40    content:''; position:absolute; right:-8px; top:8px; width:6px; height:12px; background:#444; border-radius:2px;41  }42  .battery-fill { position:absolute; left:6px; top:6px; width:30px; height:12px; background:#444; border-radius:2px; }43 44  /* Header */45  .header {46    height:140px;47    border-top:1px solid #eee;48    border-bottom:1px solid #eee;49    position:relative;50    display:flex;51    align-items:center;52    justify-content:center;53  }54  .header .center-title {55    font-size:44px; letter-spacing:3px; font-weight:600; color:#222;56  }57  .header .left-text, .header .close-btn {58    position:absolute; top:50%; transform:translateY(-50%);59    font-size:38px; letter-spacing:2px; color:#111;60  }61  .header .left-text { left:40px; font-weight:600; }62  .header .close-btn { right:40px; width:56px; height:56px; display:flex; align-items:center; justify-content:center; }63  .header .close-btn svg { width:42px; height:42px; }64 65  /* Content */66  .content {67    padding:40px;68  }69  .section-title {70    font-size:46px; font-weight:700; margin:20px 0 30px;71  }72  .radio-list { list-style:none; padding:0; margin:0; }73  .radio-item {74    display:flex; align-items:center; gap:28px;75    padding:26px 0;76    border-bottom:1px solid #f0f0f0;77  }78  .radio-item:last-child { border-bottom:none; }79  .radio-circle {80    width:48px; height:48px; border-radius:50%;81    border:3px solid #bdbdbd; background:#fff;82  }83  .radio-label { font-size:42px; color:#222; }84 85  .sub-section { margin-top:60px; padding-top:40px; border-top:1px solid #eee; }86  .grid {87    display:flex; flex-wrap:wrap; gap:26px;88  }89  .pill {90    min-width:120px; height:80px;91    border:3px solid #d7d7d7; border-radius:8px;92    display:flex; align-items:center; justify-content:center;93    font-size:40px; color:#666; background:#fff;94  }95  .pill.wide { min-width:220px; }96  .pill.tall { height:86px; }97  .chips { display:flex; flex-wrap:wrap; gap:26px; }98  .chip {99    min-width:220px; height:80px;100    border:3px solid #d7d7d7; border-radius:8px;101    display:flex; align-items:center; justify-content:center;102    font-size:38px; color:#888; background:#fff;103  }104 105  .best-for-lines {106    display:flex; gap:40px; margin-top:22px;107  }108  .best-for-lines .line {109    height:3px; background:#dcdcdc; width:160px;110  }111 112  .cta-wrap { margin-top:60px; }113  .cta {114    background:#000; color:#fff;115    height:140px; border-radius:8px;116    display:flex; align-items:center; justify-content:space-between;117    padding:0 40px; letter-spacing:4px;118  }119  .cta .cta-text { font-size:44px; font-weight:700; }120  .cta .arrow {121    width:64px; height:64px;122  }123 124  /* Bottom gesture bar */125  .gesture {126    position:absolute; bottom:22px; left:50%;127    transform:translateX(-50%);128    width:240px; height:12px; border-radius:12px; background:#cfcfcf;129  }130</style>131</head>132<body>133<div id="render-target">134 135  <!-- Status Bar -->136  <div class="status-bar">137    <div>5:29</div>138    <div class="status-icons">139      <div class="icon-shape"></div>140      <div class="icon-dot"></div>141      <div class="icon-dot"></div>142      <div class="icon-shape"></div>143      <div class="signal"></div>144      <div class="battery"><div class="battery-fill"></div></div>145    </div>146  </div>147 148  <!-- Header -->149  <div class="header">150    <div class="left-text">CLEAR ALL</div>151    <div class="center-title">REFINE RESULTS</div>152    <div class="close-btn">153      <svg viewBox="0 0 24 24">154        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>155      </svg>156    </div>157  </div>158 159  <!-- Content -->160  <div class="content">161 162    <div class="section-title">Sort by</div>163    <ul class="radio-list">164      <li class="radio-item">165        <div class="radio-circle"></div>166        <div class="radio-label">Price (low/high)</div>167      </li>168      <li class="radio-item">169        <div class="radio-circle"></div>170        <div class="radio-label">Newest first</div>171      </li>172      <li class="radio-item">173        <div class="radio-circle"></div>174        <div class="radio-label">Top Sellers</div>175      </li>176      <li class="radio-item">177        <div class="radio-circle"></div>178        <div class="radio-label">Price (high/low)</div>179      </li>180      <li class="radio-item">181        <div class="radio-circle"></div>182        <div class="radio-label">Customer Top Rated</div>183      </li>184    </ul>185 186    <div class="sub-section">187      <div class="section-title">Size</div>188      <div class="grid">189        <div class="pill">5</div>190        <div class="pill">5.5</div>191        <div class="pill">6</div>192        <div class="pill">6.5</div>193        <div class="pill">7</div>194        <div class="pill">7.5</div>195        <div class="pill">8</div>196        <div class="pill">8.5</div>197        <div class="pill">9</div>198 199        <div class="pill">9.5</div>200        <div class="pill">10</div>201        <div class="pill">10.5</div>202        <div class="pill">11</div>203        <div class="pill">11.5</div>204        <div class="pill">12</div>205        <div class="pill">12.5</div>206        <div class="pill">13</div>207 208        <div class="pill">13.5</div>209        <div class="pill">14</div>210        <div class="pill">15</div>211      </div>212    </div>213 214    <div class="sub-section">215      <div class="section-title">Discount</div>216      <div class="chips">217        <div class="chip">UP TO 20%</div>218        <div class="chip">20-30%</div>219        <div class="chip">30-40%</div>220        <div class="chip">40% OR MORE</div>221      </div>222    </div>223 224    <div class="sub-section">225      <div class="section-title">Surface</div>226      <div class="chips">227        <div class="chip">ROAD</div>228        <div class="chip">STREET</div>229        <div class="chip">TRAIL</div>230        <div class="chip">TRACK</div>231      </div>232    </div>233 234    <div class="sub-section">235      <div class="section-title">Best For</div>236      <div class="best-for-lines">237        <div class="line"></div>238        <div class="line"></div>239        <div class="line"></div>240        <div class="line"></div>241        <div class="line"></div>242      </div>243 244      <div class="cta-wrap">245        <div class="cta">246          <div class="cta-text">151 RESULTS</div>247          <svg class="arrow" viewBox="0 0 24 24">248            <path d="M5 12 H18 M12 5 L19 12 L12 19" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>249          </svg>250        </div>251      </div>252    </div>253 254  </div>255 256  <!-- Bottom gesture bar -->257  <div class="gesture"></div>258 259</div>260</body>261</html>