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>Filter UI</title>7<style>8  :root{9    --bg:#ffffff;10    --text:#1a1a1a;11    --muted:#6f6f6f;12    --green:#234B1B;13    --green-2:#295a20;14    --border:#d8d8d3;15    --divider:#e6e6e1;16    --blue:#3B82F6;17  }18  body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; color:var(--text); }19  #render-target{20    width:1080px; height:2400px;21    position:relative; overflow:hidden;22    background:var(--bg);23  }24  /* Status bar */25  .status{26    height:90px; padding:0 36px;27    display:flex; align-items:center; justify-content:space-between;28    color:#3c3c3c; font-size:40px; letter-spacing:0.5px;29  }30  .status .icons{ display:flex; gap:28px; align-items:center; }31  .status svg{ width:40px; height:40px; }32  /* Header */33  .header{34    height:140px; display:flex; align-items:center;35    padding:0 36px;36  }37  .back{38    width:64px; height:64px; margin-right:24px;39    display:flex; align-items:center; justify-content:center;40  }41  .header .title{42    font-size:60px; font-weight:600; color:var(--green);43  }44  /* Content */45  .content{ padding:24px 48px 360px 48px; }46  .section-title{47    font-size:54px; font-weight:700; color:var(--green); margin:28px 0 24px;48  }49  .row{50    height:140px; display:flex; align-items:center; justify-content:space-between;51    border-radius:12px;52  }53  .row .label{ font-size:48px; }54  .radio{55    width:84px; height:84px; border-radius:50%;56    border:10px solid var(--border); position:relative;57    box-sizing:border-box;58  }59  .radio.selected{ border-color:var(--border); }60  .radio.selected::after{61    content:""; position:absolute; left:50%; top:50%;62    width:32px; height:32px; border-radius:50%;63    background:var(--green); transform:translate(-50%,-50%);64  }65  .divider{ height:2px; background:var(--divider); margin:20px 0 32px; }66  /* Distance away */67  .distance-head{ display:flex; align-items:center; gap:18px; }68  .distance-sub{ color:var(--muted); font-size:40px; margin-top:8px; }69  .range-labels{ display:flex; justify-content:space-between; align-items:center; margin-top:32px; font-size:42px; }70  .slider-wrap{ position:relative; height:84px; margin-top:16px; }71  .slider-track{72    position:absolute; left:0; right:0; top:30px;73    height:16px; background:var(--green-2); border-radius:12px;74  }75  .tick{ position:absolute; top:22px; width:10px; height:10px; background:#eaeaea; border-radius:50%; }76  .knob{77    position:absolute; right:-6px; top:12px; width:72px; height:72px;78    background:#fff; border:6px solid var(--border); border-radius:50%;79    box-shadow:0 2px 4px rgba(0,0,0,0.08);80  }81  /* Activity */82  .activity .row .label{ font-size:48px; }83  /* Bottom sheet */84  .sheet{85    position:absolute; left:0; right:0; bottom:0; height:300px;86    background:#fff; border-top-left-radius:40px; border-top-right-radius:40px;87    box-shadow:0 -8px 24px rgba(0,0,0,0.08);88    padding:40px 48px;89  }90  .sheet-inner{91    display:flex; align-items:center; justify-content:space-between;92  }93  .clear-link{94    font-size:44px; color:var(--green); font-weight:600;95  }96  .cta{97    background:var(--green); color:#fff; font-size:44px; font-weight:700;98    padding:34px 64px; border-radius:80px;99    box-shadow:0 6px 0 rgba(0,0,0,0.02); letter-spacing:0.3px;100  }101  .gesture-bar{102    position:absolute; left:50%; transform:translateX(-50%);103    bottom:24px; width:380px; height:14px; background:#bfbfbf; border-radius:10px;104  }105  /* Icon styles */106  .hex{ width:56px; height:56px; }107</style>108</head>109<body>110<div id="render-target">111  <!-- Status bar -->112  <div class="status">113    <div class="time">8:24</div>114    <div class="icons">115      <!-- simple wifi icon -->116      <svg viewBox="0 0 24 24">117        <path d="M12 20c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z" fill="#555"/>118        <path d="M2 8c5.5-5.3 14.5-5.3 20 0" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>119        <path d="M5 11c3.9-3.6 10.1-3.6 14 0" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>120        <path d="M8 14c2.5-2.4 6.5-2.4 9 0" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>121      </svg>122      <!-- battery -->123      <svg viewBox="0 0 28 16">124        <rect x="1" y="3" width="22" height="10" rx="2" ry="2" fill="none" stroke="#555" stroke-width="2"/>125        <rect x="3" y="5" width="18" height="6" rx="1" ry="1" fill="#555"/>126        <rect x="24" y="6" width="3" height="4" rx="1" fill="#555"/>127      </svg>128    </div>129  </div>130 131  <!-- Header -->132  <div class="header">133    <div class="back">134      <svg viewBox="0 0 24 24">135        <path d="M15.5 4.5L7 12l8.5 7.5" fill="none" stroke="#234B1B" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>136      </svg>137    </div>138    <div class="title">Filter</div>139  </div>140 141  <!-- Content -->142  <div class="content">143    <div class="section-title">Sort</div>144 145    <div class="row">146      <div class="label">Best match</div>147      <div class="radio selected"></div>148    </div>149    <div class="row">150      <div class="label">Most popular</div>151      <div class="radio"></div>152    </div>153    <div class="row">154      <div class="label">Closest</div>155      <div class="radio"></div>156    </div>157    <div class="row">158      <div class="label">Newly added</div>159      <div class="radio"></div>160    </div>161 162    <div class="divider"></div>163 164    <!-- Distance away section -->165    <div class="distance">166      <div class="distance-head">167        <svg class="hex" viewBox="0 0 24 24">168          <path d="M6 3l12 0 4 9-4 9-12 0-4-9 4-9z" fill="#E6F0FF" stroke="#3B82F6" stroke-width="1.5"/>169          <rect x="10.5" y="7.5" width="3" height="9" fill="#3B82F6"/>170          <rect x="7.5" y="10.5" width="9" height="3" fill="#3B82F6"/>171        </svg>172        <div class="section-title" style="margin:0;">Distance away</div>173      </div>174      <div class="distance-sub">See trails based on your current location</div>175 176      <div class="range-labels">177        <div>0 mi</div>178        <div>Any</div>179      </div>180      <div class="slider-wrap">181        <div class="slider-track"></div>182        <div class="tick" style="left:40px;"></div>183        <div class="tick" style="left:200px;"></div>184        <div class="tick" style="left:360px;"></div>185        <div class="tick" style="left:520px;"></div>186        <div class="tick" style="left:680px;"></div>187        <div class="tick" style="left:840px;"></div>188        <div class="knob"></div>189      </div>190    </div>191 192    <div class="divider" style="margin-top:40px;"></div>193 194    <!-- Activity section -->195    <div class="activity">196      <div class="section-title">Activity</div>197 198      <div class="row">199        <div class="label">Hiking</div>200        <div class="radio"></div>201      </div>202      <div class="row">203        <div class="label">Mountain biking</div>204        <div class="radio"></div>205      </div>206      <div class="row">207        <div class="label">Running</div>208        <div class="radio"></div>209      </div>210    </div>211  </div>212 213  <!-- Bottom sheet -->214  <div class="sheet">215    <div class="sheet-inner">216      <div class="clear-link">Clear</div>217      <div class="cta">See 253 trails</div>218    </div>219  </div>220 221  <div class="gesture-bar"></div>222</div>223</body>224</html>