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  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff;13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;14    color: #1f2d1a;15  }16 17  .status-bar {18    height: 110px;19    padding: 0 36px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #555;24    font-size: 40px;25  }26  .status-icons {27    display: flex; align-items: center; gap: 26px;28  }29  .top-appbar {30    height: 150px;31    display: flex; align-items: center;32    padding: 0 36px;33    box-shadow: 0 1px 6px rgba(0,0,0,0.08);34    background: #fff;35  }36  .back-icon {37    width: 72px; height: 72px; margin-right: 20px;38  }39  .title {40    font-size: 58px; font-weight: 600; color: #1f2d1a;41  }42 43  .content {44    position: absolute;45    left: 0; right: 0;46    top: 260px; /* below status+appbar */47    bottom: 0;48    overflow: hidden;49  }50 51  .section {52    padding: 28px 44px;53  }54  .link-green {55    color: #244a18; font-size: 42px; font-weight: 600;56  }57  .divider {58    height: 2px; background: #e5e5e5; margin: 24px 0;59  }60  .section-title {61    font-size: 54px; font-weight: 700; color: #244a18; margin-bottom: 24px;62  }63 64  .row {65    display: flex; align-items: center; justify-content: space-between;66    padding: 32px 0;67  }68  .label-wrap { display: flex; align-items: center; gap: 20px; }69  .row-label { font-size: 46px; color: #333; }70  .info-icon { width: 42px; height: 42px; }71  .checkbox {72    width: 86px; height: 86px; border: 6px solid #cfcfcf; border-radius: 24px;73  }74 75  .range-title { font-size: 46px; color: #333; }76  .range-head { display: flex; align-items: baseline; justify-content: space-between; }77  .range-values { font-size: 40px; color: #3a3a3a; margin-top: 8px; }78 79  .slider {80    position: relative;81    height: 84px;82    margin-top: 28px;83  }84  .slider-track {85    position: absolute; left: 44px; right: 44px; top: 36px;86    height: 10px; background: #274c17; border-radius: 10px;87  }88  .slider-handle {89    position: absolute; top: 16px;90    width: 64px; height: 64px; background: #fff;91    border: 4px solid #dedede; border-radius: 50%;92    box-shadow: 0 2px 4px rgba(0,0,0,0.12);93  }94  .handle-left { left: 44px; }95  .handle-right { right: 44px; }96 97  /* Bottom sheet */98  .bottom-sheet {99    position: absolute; left: 0; right: 0; bottom: 84px;100    height: 320px;101    background: #ffffff;102    box-shadow: 0 -8px 24px rgba(0,0,0,0.1);103    border-top-left-radius: 24px; border-top-right-radius: 24px;104    padding: 40px 48px;105    display: flex; align-items: center; justify-content: space-between;106  }107  .clear-link {108    font-size: 46px; color: #244a18; text-decoration: underline;109  }110  .primary-btn {111    background: #244a18; color: #fff;112    font-size: 48px; font-weight: 700;113    padding: 36px 72px; border-radius: 80px;114    box-shadow: 0 6px 16px rgba(36,74,24,0.3);115  }116 117  /* Gesture bar */118  .gesture {119    position: absolute; left: 50%; transform: translateX(-50%);120    bottom: 24px; width: 360px; height: 12px;121    background: #9b9b9b; border-radius: 12px;122  }123</style>124</head>125<body>126<div id="render-target">127 128  <!-- Status bar -->129  <div class="status-bar">130    <div>8:27</div>131    <div class="status-icons">132      <!-- simple wifi icon -->133      <svg width="54" height="54" viewBox="0 0 24 24">134        <path d="M2 8c5-4 15-4 20 0" stroke="#6f6f6f" stroke-width="2" fill="none" stroke-linecap="round"/>135        <path d="M5 11c3-3 11-3 14 0" stroke="#6f6f6f" stroke-width="2" fill="none" stroke-linecap="round"/>136        <path d="M8 14c2-2 6-2 8 0" stroke="#6f6f6f" stroke-width="2" fill="none" stroke-linecap="round"/>137        <circle cx="12" cy="18" r="2" fill="#6f6f6f"/>138      </svg>139      <!-- battery with bolt -->140      <svg width="54" height="54" viewBox="0 0 24 24">141        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#6f6f6f" stroke-width="2" fill="none"/>142        <rect x="20" y="10" width="2" height="4" fill="#6f6f6f"/>143        <path d="M11 7l-3 5h3l-2 5 6-8h-4z" fill="#6f6f6f"/>144      </svg>145    </div>146  </div>147 148  <!-- App bar -->149  <div class="top-appbar">150    <svg class="back-icon" viewBox="0 0 24 24">151      <path d="M15 19L8 12l7-7" stroke="#2e2e2e" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>152    </svg>153    <div class="title">Filter</div>154  </div>155 156  <!-- Content -->157  <div class="content">158    <div class="section">159      <div class="link-green">Show more</div>160      <div class="divider"></div>161 162      <div class="section-title">Difficulty</div>163 164      <div class="row">165        <div class="label-wrap">166          <div class="row-label">Easy</div>167          <svg class="info-icon" viewBox="0 0 24 24">168            <circle cx="12" cy="12" r="10" stroke="#9b9b9b" stroke-width="2" fill="none"/>169            <rect x="11" y="10" width="2" height="7" fill="#9b9b9b"/>170            <circle cx="12" cy="7" r="1.5" fill="#9b9b9b"/>171          </svg>172        </div>173        <div class="checkbox"></div>174      </div>175 176      <div class="row">177        <div class="label-wrap">178          <div class="row-label">Moderate</div>179          <svg class="info-icon" viewBox="0 0 24 24">180            <circle cx="12" cy="12" r="10" stroke="#9b9b9b" stroke-width="2" fill="none"/>181            <rect x="11" y="10" width="2" height="7" fill="#9b9b9b"/>182            <circle cx="12" cy="7" r="1.5" fill="#9b9b9b"/>183          </svg>184        </div>185        <div class="checkbox"></div>186      </div>187 188      <div class="row">189        <div class="label-wrap">190          <div class="row-label">Hard</div>191          <svg class="info-icon" viewBox="0 0 24 24">192            <circle cx="12" cy="12" r="10" stroke="#9b9b9b" stroke-width="2" fill="none"/>193            <rect x="11" y="10" width="2" height="7" fill="#9b9b9b"/>194            <circle cx="12" cy="7" r="1.5" fill="#9b9b9b"/>195          </svg>196        </div>197        <div class="checkbox"></div>198      </div>199 200      <div class="divider"></div>201 202      <div class="section-title">Length</div>203      <div class="range-head">204        <div class="range-values">0 mi</div>205        <div class="range-values">50+ mi</div>206      </div>207      <div class="slider">208        <div class="slider-track"></div>209        <div class="slider-handle handle-left"></div>210        <div class="slider-handle handle-right"></div>211      </div>212 213      <div class="divider" style="margin-top:36px;"></div>214 215      <div class="section-title">Elevation gain</div>216      <div class="range-head">217        <div class="range-values">0 ft</div>218        <div class="range-values">5,000+ ft</div>219      </div>220      <div class="slider">221        <div class="slider-track"></div>222        <div class="slider-handle handle-left"></div>223        <div class="slider-handle handle-right"></div>224      </div>225 226      <div class="divider" style="margin-top:36px;"></div>227 228      <div class="section-title">Suitability</div>229      <!-- list items would continue below -->230    </div>231  </div>232 233  <!-- Bottom sheet actions -->234  <div class="bottom-sheet">235    <div class="clear-link">Clear</div>236    <div class="primary-btn">See 253 trails</div>237  </div>238 239  <!-- Gesture bar -->240  <div class="gesture"></div>241</div>242</body>243</html>