GD-ML/AndroidCode

1<!DOCTYPE html>2<html>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    --green: #234E1E;10    --green-700: #1D4017;11    --text: #222222;12    --muted: #6D6D6D;13    --divider: #E5E5E5;14    --radio: #CFCFCF;15    --bg: #FFFFFF;16    --blue: #3E7BFF;17  }18  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: var(--text); }19  #render-target {20    width: 1080px;21    height: 2400px;22    position: relative;23    overflow: hidden;24    background: var(--bg);25    border-radius: 24px;26    box-shadow: 0 18px 40px rgba(0,0,0,0.15);27  }28 29  /* Status bar */30  .status-bar {31    height: 120px;32    padding: 0 48px;33    display: flex;34    align-items: center;35    justify-content: space-between;36    color: #222;37    font-weight: 600;38    font-size: 44px;39  }40  .status-right {41    display: flex;42    gap: 28px;43    align-items: center;44  }45  .status-icon svg { display: block; }46 47  /* Header */48  .header {49    height: 120px;50    display: flex;51    align-items: center;52    gap: 22px;53    padding: 0 48px;54  }55  .header .title {56    font-size: 54px;57    font-weight: 700;58    color: var(--green);59    letter-spacing: 0.2px;60  }61  .back-btn {62    width: 56px;63    height: 56px;64  }65  .back-btn svg { width: 56px; height: 56px; fill: var(--green); }66 67  /* Scroll content */68  .content {69    position: absolute;70    left: 0;71    right: 0;72    top: 240px; /* status + header */73    bottom: 260px; /* space for bottom sheet */74    overflow-y: auto;75    padding: 0 48px 40px 48px;76  }77 78  .section h2 {79    font-size: 52px;80    margin: 30px 0 12px 0;81    color: var(--green);82    font-weight: 800;83  }84 85  .option {86    display: flex;87    align-items: center;88    justify-content: space-between;89    padding: 46px 6px;90    font-size: 44px;91  }92  .radio {93    position: relative;94    width: 56px;95    height: 56px;96    border-radius: 50%;97    border: 6px solid var(--radio);98    background: #fff;99  }100  .radio.checked {101    border-color: #CFCFCF;102  }103  .radio.checked::after {104    content: "";105    position: absolute;106    left: 50%;107    top: 50%;108    width: 26px;109    height: 26px;110    background: var(--green);111    border-radius: 50%;112    transform: translate(-50%, -50%);113  }114 115  .divider {116    height: 2px;117    background: var(--divider);118    margin: 18px 0 0 0;119  }120 121  /* Distance away */122  .distance-header {123    display: flex;124    align-items: center;125    gap: 18px;126    margin-top: 28px;127  }128  .distance-header h2 {129    margin: 0;130  }131  .badge {132    width: 56px;133    height: 56px;134  }135  .subtext {136    color: #5F6C5F;137    font-size: 40px;138    margin-top: 12px;139  }140  .distance-range {141    display: flex;142    justify-content: space-between;143    margin-top: 34px;144    font-size: 40px;145    color: #2A2A2A;146  }147  .slider {148    margin-top: 26px;149    padding-right: 16px;150  }151  .track {152    position: relative;153    height: 14px;154    border-radius: 8px;155    background: #D9D9D9;156  }157  .progress {158    position: absolute;159    height: 14px;160    border-radius: 8px 0 0 8px;161    background: var(--green);162    width: 82%;163    left: 0;164    top: 0;165  }166  .thumb {167    position: absolute;168    top: 50%;169    left: calc(82% - 10px);170    width: 64px;171    height: 64px;172    transform: translateY(-50%);173    background: #ffffff;174    border-radius: 50%;175    box-shadow: 0 4px 8px rgba(0,0,0,0.15);176    border: 4px solid #E3E3E3;177  }178  .ticks {179    position: absolute;180    left: 0;181    right: 0;182    top: 50%;183    transform: translateY(-50%);184    pointer-events: none;185  }186  .tick {187    position: absolute;188    width: 10px;189    height: 10px;190    background: #E9E9E9;191    border-radius: 50%;192  }193  .tick.g { background: #D6E0D6; } /* subtle dots on green part */194  .tick:nth-child(1) { left: 8%; }195  .tick:nth-child(2) { left: 26%; }196  .tick:nth-child(3) { left: 44%; }197  .tick:nth-child(4) { left: 62%; }198  .tick:nth-child(5) { left: 80%; }199  .tick:nth-child(6) { left: 97%; background: #CFCFCF; }200 201  /* Activity section tweaks */202  .activity .option { padding: 40px 6px; }203 204  /* Bottom sheet */205  .bottom-sheet {206    position: absolute;207    left: 0; right: 0; bottom: 120px;208    height: 240px;209    background: #FFFFFF;210    border-top: 2px solid var(--divider);211    display: flex;212    align-items: center;213    justify-content: space-between;214    padding: 0 48px;215  }216  .left-link {217    font-size: 44px;218    color: var(--green);219    font-weight: 700;220  }221  .primary {222    font-size: 44px;223    font-weight: 800;224    color: #fff;225    background: var(--green);226    border: none;227    border-radius: 70px;228    padding: 34px 60px;229    width: 520px;230    box-shadow: 0 8px 16px rgba(35,78,30,0.3);231  }232 233  /* Nav handle */234  .nav-handle {235    position: absolute;236    left: 50%;237    bottom: 36px;238    transform: translateX(-50%);239    width: 300px;240    height: 14px;241    background: #BDBDBD;242    border-radius: 8px;243    opacity: 0.8;244  }245</style>246</head>247<body>248<div id="render-target">249  <!-- Status bar -->250  <div class="status-bar">251    <div class="time">8:27</div>252    <div class="status-right">253      <div class="status-icon">254        <!-- Wi-Fi icon -->255        <svg width="48" height="48" viewBox="0 0 24 24">256          <path fill="#555" d="M12 18.5c.9 0 1.5.6 1.5 1.5s-.6 1.5-1.5 1.5-1.5-.6-1.5-1.5.6-1.5 1.5-1.5ZM3 9.5a12 12 0 0 1 18 0l-1.7 1.7a9.7 9.7 0 0 0-14.6 0L3 9.5Zm4.1 4.1a7 7 0 0 1 9.8 0L15.2 15a4.7 4.7 0 0 0-6.6 0l-1.5-1.4Z"/>257        </svg>258      </div>259      <div class="status-icon">260        <!-- Battery icon -->261        <svg width="48" height="48" viewBox="0 0 24 24">262          <rect x="2" y="6" width="18" height="12" rx="2" fill="#555"/>263          <rect x="4" y="8" width="14" height="8" rx="1" fill="#fff"/>264          <rect x="4" y="8" width="10" height="8" rx="1" fill="#7CB342"/>265          <rect x="20" y="9" width="2" height="6" rx="1" fill="#555"/>266        </svg>267      </div>268    </div>269  </div>270 271  <!-- Header -->272  <div class="header">273    <div class="back-btn">274      <svg viewBox="0 0 24 24">275        <path d="M15.5 19a1 1 0 0 1-.7-.3l-7-7a1 1 0 0 1 0-1.4l7-7a1 1 0 1 1 1.4 1.4L10.4 12l5.8 5.3a1 1 0 0 1-.7 1.7Z"/>276      </svg>277    </div>278    <div class="title">Filter</div>279  </div>280 281  <!-- Content -->282  <div class="content">283    <div class="section">284      <h2>Sort</h2>285      <div class="option"><span>Best match</span><div class="radio checked"></div></div>286      <div class="option"><span>Most popular</span><div class="radio"></div></div>287      <div class="option"><span>Closest</span><div class="radio"></div></div>288      <div class="option"><span>Newly added</span><div class="radio"></div></div>289    </div>290 291    <div class="divider"></div>292 293    <div class="section">294      <div class="distance-header">295        <div class="badge">296          <!-- Hex badge with plus -->297          <svg viewBox="0 0 24 24">298            <polygon points="12,2 20,7 20,17 12,22 4,17 4,7" fill="#4F86FF"/>299            <rect x="11" y="7" width="2" height="10" fill="#fff"/>300            <rect x="7" y="11" width="10" height="2" fill="#fff"/>301          </svg>302        </div>303        <h2>Distance away</h2>304      </div>305      <div class="subtext">See trails based on your current location</div>306 307      <div class="distance-range">308        <div class="min">0 mi</div>309        <div class="max">60 mi</div>310      </div>311 312      <div class="slider">313        <div class="track">314          <div class="progress"></div>315          <div class="ticks">316            <div class="tick g"></div>317            <div class="tick g"></div>318            <div class="tick g"></div>319            <div class="tick g"></div>320            <div class="tick g"></div>321            <div class="tick"></div>322          </div>323          <div class="thumb"></div>324        </div>325      </div>326    </div>327 328    <div class="divider"></div>329 330    <div class="section activity">331      <h2>Activity</h2>332      <div class="option"><span>Hiking</span><div class="radio"></div></div>333      <div class="option"><span>Mountain biking</span><div class="radio"></div></div>334      <div class="option"><span>Running</span><div class="radio"></div></div>335    </div>336  </div>337 338  <!-- Bottom sheet -->339  <div class="bottom-sheet">340    <div class="left-link">Clear</div>341    <button class="primary">See 253 trails</button>342  </div>343 344  <!-- Navigation handle -->345  <div class="nav-handle"></div>346</div>347</body>348</html>