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; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; color: #223522; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    height: 110px;20    padding: 0 40px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #3c3c3c;25    font-size: 38px;26  }27  .status-icons { display: flex; gap: 28px; align-items: center; }28 29  /* App bar */30  .app-bar {31    height: 150px;32    display: flex;33    align-items: center;34    padding: 0 40px;35    box-shadow: 0 6px 18px rgba(0,0,0,0.08);36    background: #fff;37  }38  .app-title {39    font-size: 56px;40    font-weight: 600;41    margin-left: 24px;42    color: #263C24;43  }44  .back-icon { width: 56px; height: 56px; }45 46  /* Content */47  .content {48    padding: 36px 48px 0 48px;49  }50  .link-row {51    font-size: 42px;52    color: #2E4A2A;53    font-weight: 600;54    margin: 12px 0 36px;55  }56  .divider {57    height: 2px;58    background: #E5E5E5;59    margin: 0 0 36px 0;60  }61  .section-title {62    font-size: 58px;63    font-weight: 700;64    color: #224222;65    margin: 20px 0 12px;66  }67  .option-row {68    display: flex;69    align-items: center;70    justify-content: space-between;71    padding: 26px 0;72  }73  .option-left {74    display: flex;75    align-items: center;76    gap: 20px;77    font-size: 46px;78    color: #243A24;79  }80  .info-icon { width: 40px; height: 40px; }81  .checkbox {82    width: 76px;83    height: 76px;84    border-radius: 18px;85    border: 3px solid #C9C9C2;86    background: #fff;87  }88  .checkbox.checked {89    background: #204A17;90    border-color: #204A17;91    display: flex;92    align-items: center;93    justify-content: center;94  }95  .checkmark { width: 44px; height: 44px; }96 97  /* Range rows */98  .range-title {99    font-size: 58px;100    font-weight: 700;101    color: #224222;102    margin-top: 30px;103  }104  .range-labels {105    display: flex;106    justify-content: space-between;107    font-size: 40px;108    color: #2F3D2F;109    margin-top: 10px;110  }111  .slider {112    position: relative;113    height: 56px;114    margin: 20px 0 36px;115  }116  .track {117    position: absolute;118    top: 24px;119    left: 0;120    right: 0;121    height: 10px;122    background: #234615;123    border-radius: 8px;124  }125  .thumb {126    position: absolute;127    top: 8px;128    width: 56px;129    height: 56px;130    background: #fff;131    border: 2px solid #CFCFCF;132    border-radius: 50%;133    box-shadow: 0 2px 6px rgba(0,0,0,0.15);134  }135  .thumb.left { left: -2px; }136  .thumb.right { right: -2px; }137 138  /* Bottom sheet */139  .bottom-sheet {140    position: absolute;141    left: 0;142    right: 0;143    bottom: 120px;144    height: 300px;145    background: #fff;146    box-shadow: 0 -10px 22px rgba(0,0,0,0.18);147    border-top-left-radius: 36px;148    border-top-right-radius: 36px;149    padding: 36px 48px;150    display: flex;151    align-items: center;152    justify-content: space-between;153  }154  .clear-link {155    font-size: 46px;156    color: #2E4A2A;157    text-decoration: underline;158    font-weight: 600;159  }160  .cta {161    background: #224815;162    color: white;163    border: none;164    border-radius: 70px;165    padding: 34px 56px;166    font-size: 48px;167    font-weight: 700;168    width: 520px;169    text-align: center;170  }171 172  /* Home indicator */173  .home-indicator {174    position: absolute;175    bottom: 40px;176    left: 50%;177    transform: translateX(-50%);178    width: 360px;179    height: 14px;180    background: #A6A6A6;181    border-radius: 10px;182  }183</style>184</head>185<body>186<div id="render-target">187 188  <!-- Status bar -->189  <div class="status-bar">190    <div>8:28</div>191    <div class="status-icons">192      <!-- Tiny filled rectangle to mimic icons -->193      <svg width="42" height="42"><rect x="6" y="6" width="30" height="30" rx="4" fill="#7A7A7A"/></svg>194      <svg width="42" height="42"><polygon points="21,6 36,36 6,36" fill="#7A7A7A"/></svg>195    </div>196  </div>197 198  <!-- App bar -->199  <div class="app-bar">200    <svg class="back-icon" viewBox="0 0 24 24">201      <path d="M15.5 5.5L8 12l7.5 6.5" fill="none" stroke="#2A3F28" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>202    </svg>203    <div class="app-title">Filter</div>204  </div>205 206  <!-- Content -->207  <div class="content">208    <div class="link-row">Show more</div>209    <div class="divider"></div>210 211    <div class="section-title">Difficulty</div>212 213    <div class="option-row">214      <div class="option-left">215        <span>Easy</span>216        <svg class="info-icon" viewBox="0 0 24 24">217          <circle cx="12" cy="12" r="10" fill="none" stroke="#999" stroke-width="2"/>218          <line x1="12" y1="10" x2="12" y2="16" stroke="#999" stroke-width="2"/>219          <circle cx="12" cy="7" r="1.6" fill="#999"/>220        </svg>221      </div>222      <div class="checkbox"></div>223    </div>224 225    <div class="option-row">226      <div class="option-left">227        <span>Moderate</span>228        <svg class="info-icon" viewBox="0 0 24 24">229          <circle cx="12" cy="12" r="10" fill="none" stroke="#999" stroke-width="2"/>230          <line x1="12" y1="10" x2="12" y2="16" stroke="#999" stroke-width="2"/>231          <circle cx="12" cy="7" r="1.6" fill="#999"/>232        </svg>233      </div>234      <div class="checkbox"></div>235    </div>236 237    <div class="option-row">238      <div class="option-left">239        <span>Hard</span>240        <svg class="info-icon" viewBox="0 0 24 24">241          <circle cx="12" cy="12" r="10" fill="none" stroke="#999" stroke-width="2"/>242          <line x1="12" y1="10" x2="12" y2="16" stroke="#999" stroke-width="2"/>243          <circle cx="12" cy="7" r="1.6" fill="#999"/>244        </svg>245      </div>246      <div class="checkbox checked">247        <svg class="checkmark" viewBox="0 0 24 24">248          <path d="M5 12.5l5 5 9-11" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>249        </svg>250      </div>251    </div>252 253    <div class="divider"></div>254 255    <div class="range-title">Length</div>256    <div class="range-labels">257      <div>0 mi</div>258      <div>50+ mi</div>259    </div>260    <div class="slider">261      <div class="track"></div>262      <div class="thumb left"></div>263      <div class="thumb right"></div>264    </div>265 266    <div class="divider"></div>267 268    <div class="range-title">Elevation gain</div>269    <div class="range-labels">270      <div>0 ft</div>271      <div>5,000+ ft</div>272    </div>273    <div class="slider">274      <div class="track"></div>275      <div class="thumb left"></div>276      <div class="thumb right"></div>277    </div>278 279    <div class="divider" style="margin-top: 36px;"></div>280 281    <div class="section-title" style="margin-bottom: 24px;">Suitability</div>282    <!-- Content below is intentionally obscured by bottom sheet to mimic screenshot -->283  </div>284 285  <!-- Bottom sheet -->286  <div class="bottom-sheet">287    <div class="clear-link">Clear</div>288    <button class="cta">See 2 trails</button>289  </div>290 291  <!-- Home indicator -->292  <div class="home-indicator"></div>293</div>294</body>295</html>