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: "Helvetica Neue", Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #FFFFFF;12  }13 14  /* Status bar */15  .status-bar {16    height: 90px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; color: #444;17    font-size: 34px;18  }19  .status-icons { display: flex; gap: 26px; align-items: center; }20  .dot { width: 12px; height: 12px; background: #606060; border-radius: 50%; display: inline-block; }21  .icon-circle { width: 30px; height: 30px; border-radius: 50%; background: #9E9E9E; display: inline-block; }22  .battery { width: 36px; height: 22px; border: 3px solid #555; border-radius: 4px; position: relative; }23  .battery:after { content:""; position:absolute; right:-8px; top:6px; width:6px; height:10px; background:#555; border-radius:2px; }24  .battery .level { position:absolute; left:3px; top:3px; width:22px; height:12px; background:#555; }25 26  /* App bar */27  .app-bar {28    height: 120px; display: flex; align-items: center; justify-content: space-between;29    padding: 0 40px; border-bottom: 1px solid #ECECEC; color:#111;30  }31  .app-bar .left { font-weight: 700; font-size: 32px; letter-spacing: 2px; text-transform: uppercase; color:#111; }32  .app-bar .title { font-size: 36px; font-weight: 600; letter-spacing: 1px; }33  .close-btn { width: 48px; height: 48px; }34  .divider { height: 1px; background: #EEEEEE; margin: 20px 0; }35 36  /* Content */37  .content { padding: 30px 40px 0 40px; color:#222; }38  .section { margin: 40px 0; }39  .section-title { font-size: 36px; font-weight: 600; margin-bottom: 24px; }40  .chip-row { display: flex; flex-wrap: wrap; gap: 24px; }41  .chip {42    padding: 22px 26px; border: 2px solid #D6DADD; border-radius: 8px;43    font-size: 28px; color: #8A8E93; text-transform: uppercase; background: #fff;44  }45 46  /* Color chips */47  .chip.color { display:flex; align-items:center; gap: 22px; }48  .swatch { display:flex; gap: 8px; align-items: center; }49  .swatch .sq { width: 38px; height: 38px; border-radius: 4px; }50  .swatch .sq.br { border: 1px solid #C9C9C9; background: #FFFFFF; }51 52  /* Results button */53  .results-bar { position: absolute; left: 40px; right: 40px; bottom: 160px; }54  .btn-black {55    background:#000; color:#fff; height: 130px; border-radius: 12px; display:flex; align-items:center; justify-content: space-between;56    padding: 0 40px; box-shadow: 0 2px 0 rgba(0,0,0,0.06);57  }58  .btn-black .label { font-size: 34px; letter-spacing: 4px; font-weight: 700; }59  .gesture-bar {60    position: absolute; left: 0; bottom: 54px; width: 100%; height: 60px; background: #FFFFFF; display:flex; align-items:center; justify-content:center;61    border-top: 1px solid #EFEFEF;62  }63  .gesture-pill { width: 200px; height: 12px; background: #CFCFCF; border-radius: 8px; }64 65  /* Spacing helpers between large groups */66  .spacer-hr { height: 1px; background:#EDEFF0; margin: 28px -40px; }67</style>68</head>69<body>70<div id="render-target">71 72  <!-- Status bar -->73  <div class="status-bar">74    <div class="time">5:29</div>75    <div class="status-icons">76      <span class="icon-circle"></span>77      <span class="icon-circle"></span>78      <span class="icon-circle"></span>79      <span class="dot"></span>80      <svg width="34" height="26">81        <rect x="2" y="2" width="22" height="22" rx="5" fill="#757575"></rect>82        <rect x="26" y="8" width="6" height="10" rx="2" fill="#757575"></rect>83      </svg>84    </div>85  </div>86 87  <!-- App bar -->88  <div class="app-bar">89    <div class="left">Clear All</div>90    <div class="title">REFINE RESULTS</div>91    <svg class="close-btn" viewBox="0 0 24 24">92      <line x1="4" y1="4" x2="20" y2="20" stroke="#111" stroke-width="2" />93      <line x1="20" y1="4" x2="4" y2="20" stroke="#111" stroke-width="2" />94    </svg>95  </div>96 97  <div class="content">98 99    <!-- Discount -->100    <div class="section">101      <div class="section-title">Discount</div>102      <div class="chip-row">103        <div class="chip">Up to 20%</div>104        <div class="chip">20-30%</div>105        <div class="chip">30-40%</div>106        <div class="chip">40% or more</div>107      </div>108    </div>109 110    <div class="spacer-hr"></div>111 112    <!-- Surface -->113    <div class="section">114      <div class="section-title">Surface</div>115      <div class="chip-row">116        <div class="chip">Road</div>117        <div class="chip">Street</div>118        <div class="chip">Trail</div>119        <div class="chip">Track</div>120      </div>121    </div>122 123    <div class="spacer-hr"></div>124 125    <!-- Best For -->126    <div class="section">127      <div class="section-title">Best For</div>128      <div class="chip-row">129        <div class="chip">Neutral</div>130        <div class="chip">Marathon</div>131        <div class="chip">Race</div>132        <div class="chip">Cushioned</div>133 134        <div class="chip">Everyday</div>135        <div class="chip">Long Distance</div>136        <div class="chip">Triathlon</div>137        <div class="chip">Trail Run</div>138 139        <div class="chip">Overpronation</div>140      </div>141    </div>142 143    <div class="spacer-hr"></div>144 145    <!-- Color -->146    <div class="section">147      <div class="section-title">Color</div>148      <div class="chip-row">149        <div class="chip color">150          <span>Black</span>151          <div class="swatch"><div class="sq" style="background:#000000;"></div></div>152        </div>153 154        <div class="chip color">155          <span>White</span>156          <div class="swatch">157            <div class="sq br"></div>158            <div class="sq br" style="background:#F4F4F4;"></div>159          </div>160        </div>161 162        <div class="chip color">163          <span>Grey</span>164          <div class="swatch">165            <div class="sq" style="background:#B0B5BA;"></div>166            <div class="sq" style="background:#80868B;"></div>167          </div>168        </div>169 170        <div class="chip color">171          <span>Blue</span>172          <div class="swatch">173            <div class="sq" style="background:#5DA8D2;"></div>174            <div class="sq" style="background:#126FA0;"></div>175          </div>176        </div>177 178        <div class="chip color">179          <span>Pink</span>180          <div class="swatch">181            <div class="sq" style="background:#F28BB2;"></div>182            <div class="sq" style="background:#E04684;"></div>183          </div>184        </div>185 186        <div class="chip color">187          <span>Turquoise</span>188          <div class="swatch">189            <div class="sq" style="background:#69D4D1;"></div>190            <div class="sq" style="background:#1FA9AE;"></div>191          </div>192        </div>193 194        <div class="chip color">195          <span>Orange</span>196          <div class="swatch">197            <div class="sq" style="background:#FFA74A;"></div>198            <div class="sq" style="background:#F97512;"></div>199          </div>200        </div>201 202        <div class="chip color">203          <span>Purple</span>204          <div class="swatch">205            <div class="sq" style="background:#5D3EA8;"></div>206            <div class="sq" style="background:#2F1F6D;"></div>207          </div>208        </div>209 210        <div class="chip color">211          <span>Beige</span>212          <div class="swatch">213            <div class="sq" style="background:#E4D9C9;"></div>214            <div class="sq" style="background:#CBC0AF;"></div>215          </div>216        </div>217 218        <div class="chip color">219          <span>Green</span>220          <div class="swatch">221            <div class="sq" style="background:#87CF86;"></div>222            <div class="sq" style="background:#39B24A;"></div>223          </div>224        </div>225 226        <div class="chip color">227          <span>Brown</span>228          <div class="swatch">229            <div class="sq" style="background:#B08C67;"></div>230            <div class="sq" style="background:#7B5E3D;"></div>231          </div>232        </div>233 234        <div class="chip color">235          <span>Multi</span>236          <div class="swatch">237            <div class="sq" style="background:linear-gradient(135deg,#67D1E8,#F5B46C);"></div>238          </div>239        </div>240      </div>241    </div>242 243  </div>244 245  <!-- Results button -->246  <div class="results-bar">247    <div class="btn-black">248      <div class="label">151 RESULTS</div>249      <svg width="54" height="24" viewBox="0 0 24 24">250        <path d="M5 12h12" stroke="#FFFFFF" stroke-width="2" fill="none" />251        <path d="M11 6l6 6-6 6" stroke="#FFFFFF" stroke-width="2" fill="none" />252      </svg>253    </div>254  </div>255 256  <!-- Bottom gesture bar -->257  <div class="gesture-bar">258    <div class="gesture-pill"></div>259  </div>260 261</div>262</body>263</html>