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, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #121212; color: #EDEDED;12  }13 14  /* Top system/status bar */15  .status-bar {16    height: 120px;17    background: #6AAA3A;18    color: #ffffff;19    display: flex; align-items: center; justify-content: space-between;20    padding: 0 40px; font-weight: 600; font-size: 42px;21  }22  .status-icons { display: flex; align-items: center; gap: 26px; opacity: 0.95; }23  .status-dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; display: inline-block; }24 25  /* App header */26  .app-header {27    background: #181818;28    display: flex; align-items: center; justify-content: space-between;29    padding: 40px;30    border-bottom: 1px solid #242424;31  }32  .title { font-size: 62px; font-weight: 700; }33 34  .icon-btn {35    width: 84px; height: 84px; border-radius: 16px;36    display: inline-flex; align-items: center; justify-content: center;37    margin-left: 16px; background: transparent;38  }39  .icon-btn svg { width: 48px; height: 48px; fill: #EDEDED; opacity: 0.95; }40 41  /* Content area */42  .content { padding: 36px 40px 220px 40px; }43  .section-title {44    font-size: 46px; font-weight: 700; margin: 36px 0 18px 0;45  }46  .hint {47    color: #B3B3B3; font-weight: 500; margin-left: 8px;48  }49 50  /* Inputs */51  .field {52    position: relative;53    background: #1c2a1a;54    border: 2px solid #3d4a3b;55    color: #d8e7d8;56    border-radius: 22px;57    height: 120px;58    display: flex; align-items: center;59    padding: 0 140px 0 36px;60    font-size: 44px;61  }62  .field.secondary {63    background: #1a2218;64    border-color: #394239;65    color: #bfc8bf;66  }67  .field .clear {68    position: absolute; right: 116px; width: 60px; height: 60px; border-radius: 50%;69    display: flex; align-items: center; justify-content: center;70    background: #2b322b; border: 2px solid #4a524a;71  }72  .field .clear svg { width: 34px; height: 34px; fill: #bfbfbf; }73  .gps {74    position: absolute; right: -6px; top: 50%; transform: translateY(-50%);75    width: 86px; height: 86px; border-radius: 50%;76    background: #222; border: 2px solid #3a3a3a;77    display: flex; align-items: center; justify-content: center;78  }79  .gps svg { width: 44px; height: 44px; fill: #D6D6D6; }80 81  /* Chips */82  .chips { display: flex; flex-wrap: wrap; gap: 20px; }83  .chip {84    padding: 22px 30px; border-radius: 16px; font-size: 40px; font-weight: 600;85    border: 2px solid #3b3b3b; color: #e8e8e8; background: transparent;86  }87  .chip.selected {88    background: #6AAA3A; border-color: #6AAA3A; color: #0b1607;89  }90 91  /* Slider */92  .slider-block { margin-top: 26px; }93  .slider-track {94    position: relative;95    height: 22px; background: #2a2a2a; border-radius: 11px; overflow: visible;96    margin: 36px 0 18px 0;97  }98  .slider-fill {99    position: absolute; left: 0; right: 0; top: 0; bottom: 0;100    background: #6AAA3A;101  }102  .thumb {103    position: absolute; top: 50%; transform: translate(-50%, -50%);104    width: 86px; height: 86px; border-radius: 50%;105    border: 6px solid #E0F0FF; background: #3b90b7;106    box-shadow: 0 2px 0 rgba(0,0,0,0.4);107  }108  .thumb.right { left: 100%; }109  .thumb.left { left: 0%; }110  .ticks {111    display: flex; justify-content: space-between; color: #cfcfcf; font-size: 36px; margin-top: 10px;112    padding: 0 8px;113  }114 115  /* Bottom navigation */116  .bottom-nav {117    position: absolute; left: 0; right: 0; bottom: 64px;118    height: 150px; background: #6AAA3A; display: flex; align-items: center; justify-content: space-around;119    border-top-left-radius: 0; border-top-right-radius: 0;120  }121  .bottom-nav .nav-icon { width: 86px; height: 86px; display: flex; align-items: center; justify-content: center; }122  .bottom-nav svg { width: 66px; height: 66px; fill: #ffffff; }123 124  /* Home indicator */125  .home-indicator {126    position: absolute; left: 50%; transform: translateX(-50%);127    bottom: 18px; width: 340px; height: 14px; background: #D9D9D9; border-radius: 10px; opacity: 0.85;128  }129</style>130</head>131<body>132<div id="render-target">133 134  <!-- Top status bar -->135  <div class="status-bar">136    <div>3:19</div>137    <div class="status-icons">138      <span class="status-dot"></span>139      <span class="status-dot"></span>140      <span class="status-dot"></span>141    </div>142  </div>143 144  <!-- App header -->145  <div class="app-header">146    <div class="title">Search Trails</div>147    <div>148      <div class="icon-btn" title="Delete">149        <svg viewBox="0 0 24 24"><path d="M6 7h12l-1 14H7L6 7zm3-3h6l1 2H8l1-2z"/></svg>150      </div>151      <div class="icon-btn" title="Search">152        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 21.5 21.5 20 15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>153      </div>154    </div>155  </div>156 157  <!-- Content -->158  <div class="content">159 160    <div class="section-title">Location <span class="hint">City, State, Zip</span></div>161    <div style="position: relative; margin-bottom: 26px;">162      <div class="field">Chicago,IL,USA163        <div class="clear">164          <svg viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12" stroke="#bfbfbf" stroke-width="2" fill="none" stroke-linecap="round"/></svg>165        </div>166      </div>167      <div class="gps" title="Use current location">168        <svg viewBox="0 0 24 24"><path d="M12 2v3m0 14v3m9-9h-3M6 12H3m12.95-5.95-2.12 2.12M7.17 16.83 5.05 18.95m13.9 0-2.12-2.12M7.17 7.17 5.05 5.05M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8z"/></svg>169      </div>170    </div>171 172    <div class="section-title">Trail Name, Keyword</div>173    <div class="field secondary">Search</div>174 175    <div class="section-title">Sort By</div>176    <div class="chips" style="margin-bottom: 20px;">177      <div class="chip selected">Name</div>178      <div class="chip">Distance</div>179      <div class="chip">Most Popular</div>180      <div class="chip">Length</div>181    </div>182 183    <div class="section-title">Activities</div>184    <div class="chips" style="margin-bottom: 28px;">185      <div class="chip selected">Any</div>186      <div class="chip">ATV</div>187      <div class="chip">Bike</div>188      <div class="chip">Cross Country Skiing</div>189      <div class="chip">Fishing</div>190      <div class="chip">Horseback Riding</div>191      <div class="chip">Inline Skating</div>192      <div class="chip">Mountain Biking</div>193      <div class="chip">Snowmobiling</div>194      <div class="chip">Walking</div>195      <div class="chip">Wheelchair Accessible</div>196    </div>197 198    <div class="section-title">Surface</div>199    <div class="chips" style="margin-bottom: 24px;">200      <div class="chip selected">Any</div>201      <div class="chip">Asphalt</div>202      <div class="chip">Ballast</div>203      <div class="chip">Cinder</div>204      <div class="chip">Concrete</div>205      <div class="chip">Crushed Stone</div>206      <div class="chip">Dirt</div>207      <div class="chip">Grass</div>208      <div class="chip">Gravel</div>209      <div class="chip">Sand</div>210      <div class="chip">Woodchips</div>211    </div>212 213    <div class="section-title">Length <span class="hint">Miles</span></div>214    <div class="slider-block">215      <div class="slider-track">216        <div class="slider-fill"></div>217        <div class="thumb left"></div>218        <div class="thumb right"></div>219      </div>220      <div class="ticks">221        <span>0</span><span>5</span><span>10</span><span>15</span><span>20</span><span>20+</span>222      </div>223    </div>224 225    <div class="section-title" style="margin-top: 36px;">Type</div>226    <div class="chips">227      <div class="chip">Greenway</div>228      <div class="chip">Rail-Trail</div>229      <div class="chip">Recreational</div>230      <div class="chip">Multi-use</div>231      <div class="chip">Water</div>232    </div>233 234  </div>235 236  <!-- Bottom navigation -->237  <div class="bottom-nav">238    <div class="nav-icon" title="Trails">239      <svg viewBox="0 0 24 24"><path d="M12 2 3 22h6l3-7 3 7h6L12 2z"/></svg>240    </div>241    <div class="nav-icon" title="Search">242      <svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3A6.5 6.5 0 1 0 9.5 16c1.6 0 3.1-.6 4.2-1.6l.3.3v.8L20 21.5 21.5 20 15.5 14zM9.5 14A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/></svg>243    </div>244    <div class="nav-icon" title="Favorites">245      <svg viewBox="0 0 24 24"><path d="M12 21s-6-3.4-9-7.5C1 10 2.5 6.5 6 6.5c2 0 3.2 1.4 4 2.5.8-1.1 2-2.5 4-2.5 3.5 0 5 3.5 3 7  -3 4.1-9 7.5-9 7.5z"/></svg>246    </div>247    <div class="nav-icon" title="Profile">248      <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4 0-8 2-8 5v3h16v-3c0-3-4-5-8-5z"/></svg>249    </div>250    <div class="nav-icon" title="Settings">251      <svg viewBox="0 0 24 24"><path d="M19.4 13.5a7.9 7.9 0 0 0 0-3l2.1-1.6-2-3.5-2.6 1a8.2 8.2 0 0 0-2.6-1.5L13 1h-4l-.3 2.9a8.2 8.2 0 0 0-2.6 1.5l-2.6-1-2 3.5L3.6 10.5a7.9 7.9 0 0 0 0 3l-2.1 1.6 2 3.5 2.6-1a8.2 8.2 0 0 0 2.6 1.5L9 23h4l.3-2.9a8.2 8.2 0 0 0 2.6-1.5l2.6 1 2-3.5-2.1-1.6zM12 16a4 4 0 1 1 4-4 4 4 0 0 1-4 4z"/></svg>252    </div>253  </div>254 255  <div class="home-indicator"></div>256</div>257</body>258</html>