GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Refine Results - Mobile Filter</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1440px; height:3120px; position:relative; overflow:hidden;9    background:#ffffff;10  }11 12  /* Status bar */13  .status-bar {14    position:absolute; top:0; left:0; width:100%; height:120px;15    padding:0 50px; box-sizing:border-box;16    display:flex; align-items:center; justify-content:space-between;17    color:#1c1c1c; font-size:48px;18  }19  .sb-left, .sb-right { display:flex; align-items:center; gap:30px; }20  .dot { width:18px; height:18px; background:#1c1c1c; border-radius:50%; display:inline-block; }21  .sb-icon {22    width:46px; height:46px; border:2px solid #1c1c1c; border-radius:6px;23    display:inline-block;24  }25  .search-icon {26    width:46px; height:46px; border-radius:50%; border:2px solid #1c1c1c;27    position:relative;28  }29  .search-icon::after{30    content:""; position:absolute; width:18px; height:4px; background:#1c1c1c;31    right:-6px; bottom:6px; transform:rotate(40deg);32  }33  .wifi-icon { width:48px; height:36px; position:relative; }34  .wifi-icon:before, .wifi-icon:after {35    content:""; position:absolute; left:0; right:0; margin:auto; border:3px solid #333; border-radius:50%;36  }37  .wifi-icon:before { width:48px; height:36px; top:0; }38  .wifi-icon:after { width:28px; height:20px; top:8px; }39  .battery {40    width:80px; height:40px; border:3px solid #333; border-radius:6px; position:relative;41  }42  .battery:after { content:""; position:absolute; right:-12px; top:8px; width:12px; height:24px; background:#333; border-radius:2px; }43  .battery .level { position:absolute; left:6px; top:6px; right:16px; bottom:6px; background:#333; }44 45  /* Header */46  .header {47    position:absolute; top:120px; left:0; width:100%; height:140px;48    display:flex; align-items:center; justify-content:space-between;49    padding:0 50px; box-sizing:border-box;50    border-bottom:1px solid #eee;51  }52  .link-clear {53    font-size:52px; letter-spacing:2px; color:#111; font-weight:700;54  }55  .title {56    font-size:56px; letter-spacing:4px; color:#111; font-weight:700;57  }58  .close {59    width:80px; height:80px; border:4px solid #000; border-radius:50%;60    display:flex; align-items:center; justify-content:center; font-size:56px; font-weight:bold; color:#000;61  }62 63  /* Content */64  .content { position:absolute; top:260px; left:0; right:0; bottom:200px; overflow-y:auto; padding:0 50px 240px; box-sizing:border-box; }65  .section { margin-top:70px; }66  .section-title {67    font-size:56px; color:#1a1a1a; font-weight:700; margin-bottom:36px; display:flex; align-items:center; gap:20px;68  }69  .count-pill {70    background:#000; color:#fff; font-size:40px; padding:8px 22px; border-radius:12px; font-weight:700;71  }72 73  /* Chips */74  .chips { display:flex; flex-wrap:wrap; gap:30px; }75  .chip {76    padding:26px 46px; border:3px solid #cfcfcf; border-radius:16px;77    color:#777; background:#f8f8f8; font-size:48px; letter-spacing:1px;78  }79  .chip.selected { border-color:#000; border-width:4px; color:#000; background:#fff; }80  .chip.disabled { color:#bbb; border-color:#e5e5e5; background:#fafafa; }81 82  /* Bottom bar */83  .bottom-bar {84    position:absolute; left:0; right:0; bottom:0; height:160px; background:#000;85    color:#fff; display:flex; align-items:center; justify-content:space-between;86    padding:0 60px; box-sizing:border-box;87  }88  .bottom-bar .result-text { font-size:56px; letter-spacing:3px; font-weight:800; }89  .arrow {90    width:70px; height:70px; border-right:8px solid #fff; border-top:8px solid #fff; transform:rotate(45deg);91  }92</style>93</head>94<body>95<div id="render-target">96 97  <!-- Status Bar -->98  <div class="status-bar">99    <div class="sb-left">100      <div>2:22</div>101      <div class="sb-icon"></div>102      <div class="search-icon"></div>103      <div style="font-weight:bold;">B</div>104      <div class="dot"></div>105      <div class="dot" style="opacity:0.6;"></div>106    </div>107    <div class="sb-right">108      <div class="wifi-icon"></div>109      <div class="battery"><div class="level"></div></div>110    </div>111  </div>112 113  <!-- Header -->114  <div class="header">115    <div class="link-clear">CLEAR ALL</div>116    <div class="title">REFINE RESULTS</div>117    <div class="close">×</div>118  </div>119 120  <!-- Content -->121  <div class="content">122    <!-- Size -->123    <div class="section">124      <div class="section-title">Size</div>125      <div class="chips">126        <div class="chip">6</div>127        <div class="chip">7</div>128        <div class="chip">7.5</div>129        <div class="chip">8</div>130        <div class="chip">8.5</div>131        <div class="chip">9</div>132        <div class="chip">9.5</div>133        <div class="chip">10</div>134        <div class="chip">10.5</div>135 136        <div class="chip">11</div>137        <div class="chip">11.5</div>138        <div class="chip">12</div>139        <div class="chip">13</div>140      </div>141    </div>142 143    <!-- Collection -->144    <div class="section">145      <div class="section-title">Collection <span class="count-pill">1</span></div>146      <div class="chips">147        <div class="chip">ULTRABOOST</div>148        <div class="chip">ADIZERO</div>149        <div class="chip">ADILETTE</div>150        <div class="chip selected">NMD</div>151 152        <div class="chip">SUPERSTAR</div>153        <div class="chip">FORUM</div>154        <div class="chip">STAN SMITH</div>155        <div class="chip">PREDATOR</div>156        <div class="chip">X</div>157 158        <div class="chip">SAMBA</div>159        <div class="chip">GAZELLE</div>160        <div class="chip">RIVALRY</div>161        <div class="chip">OZ</div>162        <div class="chip">CAMPUS</div>163 164        <div class="chip">COPA</div>165        <div class="chip">ADIFORM</div>166        <div class="chip">FREE HIKER</div>167        <div class="chip">XPLR</div>168        <div class="chip">ICON</div>169 170        <div class="chip">LITE RACER</div>171        <div class="chip">NIZZA</div>172        <div class="chip">4DFWD</div>173        <div class="chip">DURAMO</div>174 175        <div class="chip">ADVENTURE</div>176        <div class="chip">RETROPY</div>177        <div class="chip">AVRYN</div>178        <div class="chip">SWIFT</div>179        <div class="chip">RDY</div>180 181        <div class="chip">TRAE</div>182        <div class="chip">AFTERBURNER</div>183      </div>184    </div>185 186    <!-- Features -->187    <div class="section">188      <div class="section-title">Features <span class="count-pill">1</span></div>189      <div class="chips">190        <div class="chip selected">STRETCH</div>191      </div>192    </div>193 194    <!-- Technology -->195    <div class="section">196      <div class="section-title">Technology</div>197      <div class="chips">198        <div class="chip disabled">BOOST</div>199      </div>200    </div>201  </div>202 203  <!-- Bottom bar -->204  <div class="bottom-bar">205    <div class="result-text">1 RESULT</div>206    <div class="arrow"></div>207  </div>208 209</div>210</body>211</html>