GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Refine Results Drawer</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    width: 1440px;9    height: 3120px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13    color: #111;14  }15 16  /* Status bar */17  .status-bar {18    height: 120px;19    padding: 0 60px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    font-size: 46px;24    color: #222;25  }26  .status-left {27    display: flex;28    align-items: center;29    gap: 40px;30  }31  .status-icons {32    display: flex;33    align-items: center;34    gap: 40px;35  }36  .dot { width: 22px; height: 22px; background:#000; border-radius:50%; display:inline-block; }37  .wifi-icon, .battery-icon {38    width: 64px; height: 40px;39  }40 41  /* Header */42  .header {43    height: 160px;44    display: flex;45    align-items: center;46    justify-content: space-between;47    padding: 0 60px;48    border-bottom: 1px solid #eee;49  }50  .clear-all {51    font-size: 52px;52    letter-spacing: 3px;53    font-weight: 700;54  }55  .title {56    font-size: 56px;57    font-weight: 700;58    letter-spacing: 2px;59    color: #111;60  }61  .close-btn {62    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;63  }64  .close-btn svg { width: 72px; height: 72px; }65 66  .content {67    padding: 40px 60px 300px 60px;68  }69 70  /* Section headings */71  .section-title {72    font-size: 56px;73    font-weight: 700;74    margin: 60px 0 30px 0;75  }76 77  /* Radio list */78  .radio-list { display: grid; grid-template-columns: 1fr; gap: 32px; }79  .radio-row {80    display: flex;81    align-items: center;82    gap: 32px;83    font-size: 54px;84  }85  .radio {86    width: 58px; height: 58px; border-radius: 50%;87    border: 4px solid #bbb; box-sizing: border-box;88  }89 90  /* Collection tags */91  .collection-head {92    display: flex;93    align-items: center;94    gap: 20px;95  }96  .count-badge {97    background: #000; color: #fff; font-size: 40px; font-weight: 700;98    padding: 10px 18px; border-radius: 10px;99  }100  .tag-grid {101    display: flex; flex-wrap: wrap; gap: 26px; margin-top: 24px;102  }103  .pill {104    padding: 28px 36px;105    border: 4px solid #d9d9d9;106    border-radius: 16px;107    font-size: 48px;108    color: #555;109    background: #fff;110  }111  .pill.selected {112    background: #111;113    color: #fff;114    border-color: #111;115  }116 117  /* Bottom CTA */118  .cta-bar {119    position: absolute;120    left: 30px;121    right: 30px;122    bottom: 40px;123    height: 180px;124    background: #000;125    color: #fff;126    border-radius: 8px;127    display: flex;128    align-items: center;129    justify-content: space-between;130    padding: 0 60px;131    box-shadow: 0 10px 40px rgba(0,0,0,0.15);132  }133  .cta-text { font-size: 56px; letter-spacing: 2px; }134  .arrow {135    width: 80px; height: 80px;136  }137 138  /* Sale section */139  .sale-pill {140    width: 220px;141    padding: 26px 36px;142    border: 4px solid #d9d9d9;143    border-radius: 16px;144    font-size: 46px;145    color: #666;146    display: inline-block;147  }148</style>149</head>150<body>151<div id="render-target">152 153  <!-- Status bar -->154  <div class="status-bar">155    <div class="status-left">156      <div>2:20</div>157      <div class="dot"></div>158      <div class="dot"></div>159    </div>160    <div class="status-icons">161      <svg class="wifi-icon" viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">162        <path d="M2 8c5-4 15-4 20 0" />163        <path d="M6 12c3-2 9-2 12 0" />164        <path d="M10.5 16.5c1.5-1 3.5-1 5 0" />165        <circle cx="12" cy="20" r="1.8" fill="#444"></circle>166      </svg>167      <svg class="battery-icon" viewBox="0 0 28 16" fill="none" stroke="#444" stroke-width="2">168        <rect x="1" y="2" width="22" height="12" rx="2"></rect>169        <rect x="3" y="4" width="16" height="8" fill="#444"></rect>170        <rect x="24" y="6" width="3" height="4" rx="1" fill="#444"></rect>171      </svg>172    </div>173  </div>174 175  <!-- Header -->176  <div class="header">177    <div class="clear-all">CLEAR ALL</div>178    <div class="title">REFINE RESULTS</div>179    <div class="close-btn">180      <svg viewBox="0 0 24 24" stroke="#111" stroke-width="2" fill="none">181        <path d="M5 5 L19 19"></path>182        <path d="M19 5 L5 19"></path>183      </svg>184    </div>185  </div>186 187  <div class="content">188 189    <!-- Sort by -->190    <div class="section-title">Sort by</div>191    <div class="radio-list">192      <div class="radio-row"><div class="radio"></div><div>Price (low/high)</div></div>193      <div class="radio-row"><div class="radio"></div><div>Newest first</div></div>194      <div class="radio-row"><div class="radio"></div><div>Top Sellers</div></div>195      <div class="radio-row"><div class="radio"></div><div>Price (high/low)</div></div>196      <div class="radio-row"><div class="radio"></div><div>Customer Top Rated</div></div>197    </div>198 199    <!-- Collection -->200    <div class="section-title collection-head">201      <span>Collection</span>202      <span class="count-badge">1</span>203    </div>204 205    <div class="tag-grid">206      <div class="pill">ULTRABOOST</div>207      <div class="pill">ADIZERO</div>208      <div class="pill">ADILETTE</div>209      <div class="pill selected">NMD</div>210 211      <div class="pill">SUPERSTAR</div>212      <div class="pill">FORUM</div>213      <div class="pill">STAN SMITH</div>214      <div class="pill">PREDATOR</div>215      <div class="pill">X</div>216 217      <div class="pill">SAMBA</div>218      <div class="pill">GAZELLE</div>219      <div class="pill">RIVALRY</div>220      <div class="pill">OZ</div>221      <div class="pill">CAMPUS</div>222 223      <div class="pill">COPA</div>224      <div class="pill">ADIFOM</div>225      <div class="pill">FREE HIKER</div>226      <div class="pill">XPLR</div>227      <div class="pill">ICON</div>228 229      <div class="pill">LITE RACER</div>230      <div class="pill">NIZZA</div>231      <div class="pill">4DFWD</div>232      <div class="pill">DURAMO</div>233 234      <div class="pill">ADVENTURE</div>235      <div class="pill">RETROPY</div>236      <div class="pill">AVRYN</div>237      <div class="pill">SWIFT</div>238      <div class="pill">RDY</div>239 240      <div class="pill">TRAE</div>241      <div class="pill">AFTERBURNER</div>242    </div>243 244    <!-- Sale -->245    <div class="section-title" style="margin-top: 80px;">Sale</div>246    <span class="sale-pill">SALE</span>247 248  </div>249 250  <!-- CTA bottom bar -->251  <div class="cta-bar">252    <div class="cta-text">100 RESULTS</div>253    <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">254      <path d="M5 12h12"></path>255      <path d="M12 5l7 7-7 7"></path>256    </svg>257  </div>258 259</div>260</body>261</html>