GD-ML/AndroidCode
13.4k
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, "Segoe UI", Roboto, Arial, sans-serif; color: #111; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #fff;15 }16 17 /* Top header */18 .topbar {19 position: absolute;20 top: 0;21 left: 0;22 right: 0;23 height: 190px;24 border-bottom: 1px solid #eaeaea;25 background: #fff;26 display: flex;27 align-items: flex-end;28 padding: 0 48px 34px 48px;29 box-sizing: border-box;30 }31 .topbar .left-link {32 font-size: 40px;33 letter-spacing: 2px;34 text-transform: uppercase;35 text-decoration: underline;36 font-weight: 600;37 }38 .topbar .title {39 margin: 0 auto;40 font-size: 44px;41 letter-spacing: 3px;42 text-transform: uppercase;43 font-weight: 700;44 }45 .topbar .close {46 width: 64px;47 height: 64px;48 }49 .topbar .close svg { width: 100%; height: 100%; }50 51 /* Scrollable content */52 .content {53 position: absolute;54 top: 190px;55 left: 0;56 right: 0;57 bottom: 260px; /* space for footer */58 overflow-y: auto;59 -webkit-overflow-scrolling: touch;60 padding: 32px 40px 40px 40px;61 box-sizing: border-box;62 }63 64 .divider {65 height: 1px;66 background: #eeeeee;67 margin: 28px -40px 36px -40px;68 }69 70 /* Chips */71 .chip-wrap {72 display: flex;73 flex-wrap: wrap;74 gap: 26px 26px;75 }76 .chip {77 border: 2px solid #d9d9d9;78 color: #9c9c9c;79 padding: 26px 32px;80 border-radius: 8px;81 font-size: 34px;82 letter-spacing: 2px;83 text-transform: uppercase;84 background: #fff;85 }86 .chip.selected {87 border-color: #111;88 color: #111;89 font-weight: 700;90 }91 92 .section {93 padding: 28px 8px 16px 8px;94 }95 .section-title {96 font-size: 46px;97 font-weight: 700;98 margin: 6px 0 28px 0;99 }100 101 /* Brand count badge */102 .count-badge {103 display: inline-block;104 margin-left: 14px;105 background: #111;106 color: #fff;107 border-radius: 8px;108 padding: 6px 12px;109 font-size: 28px;110 line-height: 1;111 vertical-align: middle;112 }113 114 /* Sticky footer CTA */115 .footer-cta {116 position: absolute;117 left: 28px;118 right: 28px;119 bottom: 28px;120 height: 180px;121 background: #111;122 border-radius: 4px;123 display: flex;124 align-items: center;125 padding: 0 50px;126 box-sizing: border-box;127 color: #fff;128 letter-spacing: 4px;129 text-transform: uppercase;130 justify-content: space-between;131 }132 .footer-cta .label {133 font-size: 44px;134 font-weight: 800;135 }136 .footer-cta .arrow svg {137 width: 72px;138 height: 72px;139 fill: none;140 stroke: #fff;141 stroke-width: 8;142 stroke-linecap: round;143 stroke-linejoin: round;144 }145</style>146</head>147<body>148<div id="render-target">149 150 <!-- Header -->151 <div class="topbar">152 <div class="left-link">Clear all</div>153 <div class="title">Refine results</div>154 <div class="close" aria-label="Close filters">155 <svg viewBox="0 0 24 24">156 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#111" stroke-width="2" stroke-linecap="round"/>157 </svg>158 </div>159 </div>160 161 <!-- Scrollable content -->162 <div class="content">163 164 <!-- Top chips (models/tags) -->165 <div class="chip-wrap" style="padding: 12px 0 20px 8px;">166 <div class="chip">Ultraboost</div>167 <div class="chip">Puremotion</div>168 <div class="chip">XPLR</div>169 <div class="chip">Edge Lux</div>170 <div class="chip">Avryn</div>171 <div class="chip">Swift</div>172 <div class="chip">Znsored</div>173 <div class="chip">Alphaboost</div>174 <div class="chip">Bravada</div>175 <div class="chip">Advantage</div>176 <div class="chip">Grand Court</div>177 <div class="chip">Pure Boost</div>178 <div class="chip">QT Racer</div>179 <div class="chip">Racer</div>180 <div class="chip">Zntasy</div>181 </div>182 183 <div class="divider"></div>184 185 <!-- Features -->186 <div class="section">187 <div class="section-title">Features</div>188 <div class="chip-wrap">189 <div class="chip">Cushioning</div>190 <div class="chip">Lightweight</div>191 </div>192 </div>193 194 <div class="divider"></div>195 196 <!-- Technology -->197 <div class="section">198 <div class="section-title">Technology</div>199 <div class="chip-wrap">200 <div class="chip">Boost</div>201 <div class="chip">Bounce</div>202 <div class="chip">Cloudfoam</div>203 <div class="chip">Primeknit</div>204 <div class="chip">Continental</div>205 <div class="chip">Lightmotion</div>206 <div class="chip">Formotion</div>207 </div>208 </div>209 210 <div class="divider"></div>211 212 <!-- Material -->213 <div class="section">214 <div class="section-title">Material</div>215 <div class="chip-wrap">216 <div class="chip">Textile upper</div>217 <div class="chip">Leather upper</div>218 <div class="chip">Synthetic upper</div>219 </div>220 </div>221 222 <div class="divider"></div>223 224 <!-- Brand -->225 <div class="section">226 <div class="section-title">Brand <span class="count-badge">1</span></div>227 <div class="chip-wrap">228 <div class="chip">Originals</div>229 <div class="chip">Performance</div>230 <div class="chip selected">Sportswear</div>231 <div class="chip">Y-3</div>232 <div class="chip">Essentials</div>233 <div class="chip">adidas by Stella McCartney</div>234 <div class="chip">Terrex</div>235 <div class="chip">Five Ten</div>236 </div>237 </div>238 239 <div style="height: 120px;"></div>240 </div>241 242 <!-- Footer CTA -->243 <div class="footer-cta">244 <div class="label">114 Results</div>245 <div class="arrow" aria-hidden="true">246 <svg viewBox="0 0 24 24">247 <path d="M4 12 H18 M13 7 L18 12 L13 17" />248 </svg>249 </div>250 </div>251 252</div>253</body>254</html>