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; height: 2400px; position: relative; overflow: hidden;11    background: #ffffff; box-shadow: 0 0 0 rgba(0,0,0,0); border-radius: 0;12    color: #111;13  }14 15  /* Header */16  .topbar {17    height: 150px;18    display: flex;19    align-items: center;20    justify-content: space-between;21    padding: 0 48px;22    border-bottom: 1px solid #E9E9E9;23  }24  .topbar .left,25  .topbar .center,26  .topbar .right {27    display: flex; align-items: center;28  }29  .topbar .left span {30    font-size: 32px; font-weight: 700; letter-spacing: 2px;31  }32  .topbar .center span {33    font-size: 36px; font-weight: 700; letter-spacing: 2px;34  }35  .topbar .right svg { width: 44px; height: 44px; }36 37  /* Sections */38  .section {39    padding: 36px 48px 24px 48px;40    position: relative;41  }42  .section + .section { border-top: 1px solid #EFEFEF; }43  .section h2 {44    margin: 0 0 24px 0;45    font-size: 40px; font-weight: 700;46  }47  .title-with-badge {48    display: inline-flex; align-items: center; gap: 16px;49  }50  .badge {51    display: inline-flex; align-items: center; justify-content: center;52    height: 44px; min-width: 44px; padding: 0 12px;53    background: #000; color: #fff; font-size: 28px; font-weight: 700;54    border-radius: 6px;55  }56 57  /* Chips */58  .chip-row { display: flex; flex-wrap: wrap; gap: 24px; }59  .chip {60    display: inline-flex; align-items: center; justify-content: center;61    padding: 22px 28px;62    border: 2px solid #D5D7D8;63    border-radius: 4px;64    font-size: 32px; font-weight: 700; letter-spacing: 1px;65    color: #B7B9BB;66    text-transform: uppercase;67    background: #fff;68  }69  .chip.small { padding: 20px 24px; }70  .chip.selected {71    border-color: #000; color: #000;72  }73 74  /* Bottom CTA */75  .cta-wrap {76    position: absolute; left: 0; right: 0; bottom: 120px;77    padding: 0 48px;78  }79  .cta {80    background: #000; color: #fff;81    height: 140px; border-radius: 4px;82    display: flex; align-items: center; justify-content: space-between;83    padding: 0 40px;84  }85  .cta .label {86    font-size: 36px; font-weight: 800; letter-spacing: 2px;87  }88  .cta svg { width: 48px; height: 48px; fill: none; stroke: #fff; stroke-width: 5; }89 90  /* Home indicator (visual only) */91  .home-indicator {92    position: absolute; bottom: 40px; left: 50%;93    transform: translateX(-50%);94    width: 280px; height: 14px; background: #D0D0D0; border-radius: 10px;95  }96</style>97</head>98<body>99<div id="render-target">100 101  <!-- Header -->102  <div class="topbar">103    <div class="left">104      <span>CLEAR ALL</span>105    </div>106    <div class="center">107      <span>REFINE RESULTS</span>108    </div>109    <div class="right" aria-label="Close">110      <svg viewBox="0 0 24 24">111        <path d="M4 4 L20 20 M20 4 L4 20" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>112      </svg>113    </div>114  </div>115 116  <!-- Discount -->117  <div class="section">118    <h2>Discount</h2>119    <div class="chip-row">120      <div class="chip">20-30%</div>121      <div class="chip">30-40%</div>122    </div>123  </div>124 125  <!-- Best For -->126  <div class="section">127    <h2>Best For</h2>128    <div class="chip-row">129      <div class="chip">Neutral</div>130    </div>131  </div>132 133  <!-- Collection -->134  <div class="section">135    <h2 class="title-with-badge">Collection <span class="badge">1</span></h2>136    <div class="chip-row" style="margin-top: 12px;">137      <div class="chip">Ultraboost</div>138      <div class="chip">Adizero</div>139      <div class="chip">Duramo</div>140      <div class="chip">Runfalcon</div>141 142      <div class="chip">Pureboost</div>143      <div class="chip">Supernova</div>144      <div class="chip">Ultra4D</div>145      <div class="chip">4DFWD</div>146 147      <div class="chip">Adistar</div>148      <div class="chip">Pure Boost</div>149      <div class="chip">Switch FWD</div>150      <div class="chip small">SL</div>151      <div class="chip">Solar</div>152 153      <div class="chip selected">RDY</div>154      <div class="chip">Soulstride</div>155    </div>156  </div>157 158  <!-- Technology -->159  <div class="section">160    <h2>Technology</h2>161    <div class="chip-row">162      <div class="chip">Boost</div>163      <div class="chip">Repetitor</div>164    </div>165  </div>166 167  <!-- Sale -->168  <div class="section">169    <h2>Sale</h2>170    <div class="chip-row">171      <div class="chip">Sale</div>172    </div>173  </div>174 175  <!-- Bottom CTA -->176  <div class="cta-wrap">177    <div class="cta">178      <div class="label">2 RESULTS</div>179      <svg viewBox="0 0 24 24" aria-hidden="true">180        <path d="M5 12 H19 M12 5 L19 12 L12 19" />181      </svg>182    </div>183  </div>184 185  <div class="home-indicator"></div>186</div>187</body>188</html>