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: Arial, Helvetica, 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  /* Header */19  .top-space { height: 120px; } /* simulates status bar spacing */20  .header {21    padding: 24px 56px 28px 56px;22    display: flex;23    align-items: center;24    gap: 20px;25  }26  .clear-all {27    font-size: 36px;28    letter-spacing: 6px;29    text-transform: uppercase;30    font-weight: 600;31    border-bottom: 4px solid #111;32    padding-bottom: 6px;33    white-space: nowrap;34  }35  .title {36    flex: 1;37    text-align: center;38    font-size: 38px;39    letter-spacing: 4px;40    font-weight: 700;41    text-transform: uppercase;42  }43  .icon-btn {44    width: 84px;45    height: 84px;46    display: flex;47    align-items: center;48    justify-content: center;49  }50 51  .divider { height: 2px; background: #eee; width: 100%; }52 53  /* Sections */54  .section {55    padding: 52px 56px 24px 56px;56    border-top: 2px solid #F0F0F0;57  }58  .section h2 {59    margin: 0 0 28px 0;60    font-size: 48px;61    font-weight: 700;62  }63  .chips {64    display: flex;65    flex-wrap: wrap;66  }67  .chip {68    border: 3px solid #DADADA;69    color: #B7B7B7;70    border-radius: 8px;71    padding: 20px 28px;72    margin: 14px 22px 14px 0;73    font-size: 32px;74    letter-spacing: 2px;75    text-transform: uppercase;76    background: #fff;77  }78 79  /* Bottom CTA */80  .cta {81    position: absolute;82    left: 40px;83    right: 40px;84    bottom: 190px;85    height: 160px;86    background: #000;87    color: #fff;88    border-radius: 4px;89    display: flex;90    align-items: center;91    justify-content: space-between;92    padding: 0 48px;93    box-sizing: border-box;94  }95  .cta .label {96    font-size: 44px;97    letter-spacing: 6px;98    font-weight: 800;99  }100 101  /* Bottom home indicator */102  .home-indicator {103    position: absolute;104    bottom: 70px;105    left: 50%;106    transform: translateX(-50%);107    width: 260px;108    height: 12px;109    background: #BDBDBD;110    border-radius: 8px;111  }112</style>113</head>114<body>115<div id="render-target">116  <div class="top-space"></div>117  <div class="header">118    <div class="clear-all">CLEAR ALL</div>119    <div class="title">REFINE RESULTS</div>120    <div class="icon-btn" aria-label="Close">121      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.5" stroke-linecap="round">122        <path d="M3 3 L21 21 M21 3 L3 21"></path>123      </svg>124    </div>125  </div>126  <div class="divider"></div>127 128  <!-- Technology -->129  <div class="section">130    <h2>Technology</h2>131    <div class="chips">132      <div class="chip">Boost</div>133      <div class="chip">Bounce</div>134      <div class="chip">Cloudfoam</div>135      <div class="chip">Lightstrike</div>136 137      <div class="chip">Primeknit</div>138      <div class="chip">Continental</div>139      <div class="chip">Light Boost</div>140      <div class="chip">Traxion</div>141 142      <div class="chip">4D</div>143      <div class="chip">Lightmotion</div>144      <div class="chip">Gore-Tex</div>145      <div class="chip">Waterproof</div>146      <div class="chip">EVA</div>147 148      <div class="chip">Repetitor</div>149      <div class="chip">Formotion</div>150      <div class="chip">LightstrikePro</div>151 152      <div class="chip">Water Resistant</div>153      <div class="chip">AEROREADY</div>154      <div class="chip">Climachill</div>155 156      <div class="chip">Climacool</div>157      <div class="chip">Climaheat</div>158      <div class="chip">Climalite</div>159      <div class="chip">Climawarm</div>160 161      <div class="chip">COLD.RDY</div>162    </div>163  </div>164 165  <!-- Material -->166  <div class="section">167    <h2>Material</h2>168    <div class="chips">169      <div class="chip">Textile Upper</div>170      <div class="chip">Leather Upper</div>171      <div class="chip">Synthetic Upper</div>172      <div class="chip">Velour</div>173      <div class="chip">Velvet</div>174    </div>175  </div>176 177  <!-- Brand -->178  <div class="section">179    <h2>Brand</h2>180    <div class="chips">181      <div class="chip">Originals</div>182      <div class="chip">Performance</div>183      <div class="chip">Sportswear</div>184      <div class="chip">Y-3</div>185      <div class="chip">Essentials</div>186      <div class="chip">adidas by Stella McCartney</div>187      <div class="chip">Terrex</div>188      <div class="chip">Five Ten</div>189    </div>190  </div>191 192  <!-- Bottom CTA -->193  <div class="cta">194    <div class="label">850 RESULTS</div>195    <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">196      <path d="M5 12h13"></path>197      <path d="M13 5l7 7-7 7"></path>198    </svg>199  </div>200 201  <div class="home-indicator"></div>202</div>203</body>204</html>