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>Search Trails UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    color: #333;16  }17 18  /* Top status bar */19  .status-bar {20    height: 150px;21    background: #5EA037; /* green */22    color: #fff;23    display: flex;24    align-items: center;25    padding: 0 40px;26    font-size: 38px;27    letter-spacing: 1px;28  }29  .status-bar .spacer { flex: 1; }30  .status-icon {31    width: 44px; height: 44px; margin-left: 26px;32  }33 34  /* App bar */35  .app-bar {36    height: 160px;37    background: #ffffff;38    display: flex;39    align-items: center;40    padding: 0 40px;41    box-shadow: 0 2px 0 rgba(0,0,0,0.06);42  }43  .title {44    font-size: 64px;45    font-weight: 700;46    color: #1b1b1b;47  }48  .app-actions {49    margin-left: auto;50    display: flex;51    gap: 28px;52  }53  .icon-btn {54    width: 90px; height: 90px;55    display: inline-flex; align-items: center; justify-content: center;56    border-radius: 18px;57    color: #222;58  }59  .icon-btn svg { width: 60px; height: 60px; }60 61  /* Scroll content */62  .content {63    position: absolute;64    top: 310px; /* status 150 + appbar 160 */65    bottom: 180px; /* bottom nav height */66    left: 0; right: 0;67    overflow-y: auto;68    padding: 20px 40px 260px 40px;69    box-sizing: border-box;70  }71 72  .section-label {73    font-size: 46px;74    font-weight: 700;75    color: #444;76    margin: 40px 0 16px 0;77  }78  .subdued {79    color: #8a8a8a;80    font-weight: 500;81  }82 83  /* Inputs */84  .input-wrap {85    position: relative;86    background: #E5F0DD; /* pale green */87    border: 2px solid #C9D0C6;88    border-radius: 20px;89    height: 120px;90    display: flex;91    align-items: center;92    padding: 0 140px 0 28px;93    font-size: 44px;94    color: #2e6f26;95  }96  .input-wrap .text-placeholder { color: #94a989; }97  .chip-row {98    display: flex; gap: 24px; flex-wrap: wrap;99  }100  .chip {101    padding: 24px 34px;102    border: 2px solid #CFCFCF;103    border-radius: 18px;104    font-size: 40px;105    color: #555;106    background: #fff;107  }108  .chip.active {109    background: #5EA037;110    color: #fff;111    border-color: #5EA037;112  }113 114  /* Right-side small circle buttons inside/next to inputs */115  .circle-btn {116    position: absolute;117    right: 130px;118    top: 50%;119    transform: translateY(-50%);120    width: 72px; height: 72px;121    border-radius: 50%;122    background: #D5DAD3;123    display: flex; align-items: center; justify-content: center;124  }125  .circle-btn svg { width: 40px; height: 40px; stroke: #666; }126 127  .circle-btn.outside {128    right: -10px;129    background: #fff;130    border: 2px solid #CFCFCF;131  }132 133  /* Slider */134  .slider-block { margin-top: 24px; }135  .scale {136    position: relative;137    height: 30px;138    margin-top: 28px;139  }140  .track {141    height: 18px;142    background: #5EA037;143    border-radius: 12px;144    position: relative;145  }146  .knob {147    position: absolute;148    top: 50%;149    transform: translate(-50%, -50%);150    width: 88px; height: 88px;151    border-radius: 50%;152    background: #46A1D5;153    box-shadow: 0 6px 10px rgba(0,0,0,0.2);154    border: 6px solid #ffffff;155  }156  .knob.left { left: 0%; }157  .knob.right { left: 100%; }158  .tick-row {159    display: flex; justify-content: space-between;160    padding: 16px 4px 0 4px;161    font-size: 36px; color: #444;162  }163 164  /* Bottom navigation */165  .bottom-nav {166    position: absolute;167    left: 0; right: 0; bottom: 50px;168    height: 130px;169    background: #5EA037;170    display: flex; align-items: center; justify-content: space-around;171    color: #fff;172  }173  .bottom-nav svg { width: 70px; height: 70px; fill: none; stroke: #fff; stroke-width: 4; }174 175  /* gesture bar */176  .gesture {177    position: absolute; left: 50%; transform: translateX(-50%);178    bottom: 10px; width: 300px; height: 12px; background: #000; border-radius: 12px; opacity: 0.8;179  }180</style>181</head>182<body>183<div id="render-target">184 185  <!-- Status bar -->186  <div class="status-bar">187    <div>1:09</div>188    <div class="spacer"></div>189    <!-- simple status glyphs -->190    <svg class="status-icon" viewBox="0 0 24 24"><rect x="2" y="7" width="6" height="10" fill="#ffffff"/><rect x="10" y="4" width="6" height="13" fill="#ffffff"/><rect x="18" y="10" width="4" height="7" fill="#ffffff"/></svg>191    <svg class="status-icon" viewBox="0 0 24 24"><path d="M2 12a10 10 0 0 1 20 0" stroke="#fff" stroke-width="3" fill="none"/><circle cx="12" cy="12" r="3" fill="#fff"/></svg>192    <svg class="status-icon" viewBox="0 0 24 24"><rect x="3" y="6" width="16" height="12" rx="2" ry="2" fill="#fff"/><rect x="19" y="9" width="2" height="6" fill="#fff"/></svg>193  </div>194 195  <!-- App bar -->196  <div class="app-bar">197    <div class="title">Search Trails</div>198    <div class="app-actions">199      <div class="icon-btn" aria-label="delete">200        <svg viewBox="0 0 24 24">201          <path d="M3 6h18M8 6v-2h8v2M6 6l1 14h10l1-14" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>202        </svg>203      </div>204      <div class="icon-btn" aria-label="search">205        <svg viewBox="0 0 24 24">206          <circle cx="10" cy="10" r="6" stroke="#222" stroke-width="2" fill="none"/>207          <path d="M14 14l6 6" stroke="#222" stroke-width="2" stroke-linecap="round"/>208        </svg>209      </div>210    </div>211  </div>212 213  <!-- Content -->214  <div class="content">215    <!-- Location -->216    <div class="section-label">Location <span class="subdued">City, State, Zip</span></div>217    <div class="input-wrap">218      Seattle, WA 98102, USA219      <div class="circle-btn" title="clear">220        <svg viewBox="0 0 24 24">221          <path d="M6 6l12 12M18 6L6 18" stroke="#666" stroke-width="2" stroke-linecap="round"/>222        </svg>223      </div>224      <div class="circle-btn outside" title="locate">225        <svg viewBox="0 0 24 24">226          <circle cx="12" cy="12" r="7" fill="none" stroke="#666" stroke-width="2"/>227          <circle cx="12" cy="12" r="2" fill="#666"/>228          <path d="M12 2v4M12 18v4M2 12h4M18 12h4" stroke="#666" stroke-width="2" stroke-linecap="round"/>229        </svg>230      </div>231    </div>232 233    <!-- Trail name -->234    <div class="section-label" style="margin-top:48px;">Trail Name, Keyword</div>235    <div class="input-wrap"><span class="text-placeholder">Search</span></div>236 237    <!-- Sort By -->238    <div class="section-label" style="margin-top:48px;">Sort By</div>239    <div class="chip-row">240      <div class="chip active">Name</div>241      <div class="chip">Distance</div>242      <div class="chip">Most Popular</div>243      <div class="chip">Length</div>244    </div>245 246    <!-- Activities -->247    <div class="section-label">Activities</div>248    <div class="chip-row">249      <div class="chip active">Any</div>250      <div class="chip">ATV</div>251      <div class="chip">Bike</div>252      <div class="chip">Cross Country Skiing</div>253      <div class="chip">Fishing</div>254      <div class="chip">Horseback Riding</div>255      <div class="chip">Inline Skating</div>256      <div class="chip">Mountain Biking</div>257      <div class="chip">Snowmobiling</div>258      <div class="chip">Walking</div>259      <div class="chip">Wheelchair Accessible</div>260    </div>261 262    <!-- Surface -->263    <div class="section-label">Surface</div>264    <div class="chip-row">265      <div class="chip active">Any</div>266      <div class="chip">Asphalt</div>267      <div class="chip">Ballast</div>268      <div class="chip">Cinder</div>269      <div class="chip">Concrete</div>270      <div class="chip">Crushed Stone</div>271      <div class="chip">Dirt</div>272      <div class="chip">Grass</div>273      <div class="chip">Gravel</div>274      <div class="chip">Sand</div>275      <div class="chip">Woodchips</div>276    </div>277 278    <!-- Length -->279    <div class="section-label">Length <span class="subdued">Miles</span></div>280    <div class="slider-block">281      <div class="track"></div>282      <div class="knob left"></div>283      <div class="knob right"></div>284      <div class="tick-row">285        <div>0</div><div>5</div><div>10</div><div>15</div><div>20</div><div>20+</div>286      </div>287    </div>288 289    <div class="section-label" style="margin-top:60px;">Type</div>290  </div>291 292  <!-- Bottom navigation -->293  <div class="bottom-nav">294    <!-- send/leaf-like -->295    <svg viewBox="0 0 24 24">296      <path d="M3 12l18-9-7 18-3-7-8-2z" />297    </svg>298    <!-- search -->299    <svg viewBox="0 0 24 24">300      <circle cx="11" cy="11" r="7" />301      <path d="M16 16l6 6" />302    </svg>303    <!-- heart -->304    <svg viewBox="0 0 24 24">305      <path d="M12 20s-8-5.5-8-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 4.5-8 10-8 10z"/>306    </svg>307    <!-- user -->308    <svg viewBox="0 0 24 24">309      <circle cx="12" cy="8" r="4"/>310      <path d="M4 22c2-5 14-5 16 0"/>311    </svg>312    <!-- settings -->313    <svg viewBox="0 0 24 24">314      <path d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm9 4l-2 1 1 2-2 2-2-1-1 2h-4l-1-2-2 1-2-2 1-2-2-1 1-3 2 1 1-2h4l1 2 2-1 2 2-1 2 2 1z"/>315    </svg>316  </div>317 318  <div class="gesture"></div>319</div>320</body>321</html>