GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Search Trails UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Arial", Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FFFFFF;14    border-radius: 0;15    box-shadow: none;16    color: #222;17  }18 19  /* Top status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 140px;26    background: #4FA343;27    color: #fff;28    display: flex;29    align-items: center;30    justify-content: space-between;31    padding: 0 40px;32    box-sizing: border-box;33    font-weight: 600;34  }35  .status-icons {36    display: flex;37    align-items: center;38    gap: 28px;39  }40  .dot { width: 12px; height: 12px; background: rgba(255,255,255,0.9); border-radius: 50%; }41 42  /* App bar */43  .app-bar {44    position: absolute;45    top: 140px;46    left: 0;47    width: 1080px;48    height: 160px;49    background: #ffffff;50    box-shadow: 0 2px 0 #eee;51    display: flex;52    align-items: center;53    justify-content: space-between;54    padding: 0 40px;55    box-sizing: border-box;56  }57  .app-title {58    font-size: 64px;59    font-weight: 700;60    color: #111;61  }62  .actions {63    display: flex;64    align-items: center;65    gap: 36px;66  }67  .icon-btn {68    width: 72px;69    height: 72px;70    border-radius: 36px;71    display: inline-flex;72    align-items: center;73    justify-content: center;74    color: #222;75  }76 77  /* Content */78  .content {79    position: absolute;80    top: 300px;81    left: 0;82    width: 1080px;83    height: 1200px;84    padding: 36px 40px 24px 40px;85    box-sizing: border-box;86    overflow: hidden;87  }88  .label {89    font-size: 44px;90    font-weight: 700;91    margin: 22px 0 10px;92    color: #333;93  }94  .subtle {95    font-weight: 500;96    color: #888;97    font-size: 36px;98    margin-left: 14px;99  }100 101  .field-group {102    position: relative;103    margin-bottom: 30px;104  }105  .input {106    width: 100%;107    height: 120px;108    background: #E8F3DA;109    border: 2px solid #C9D7BC;110    border-radius: 26px;111    box-sizing: border-box;112    font-size: 44px;113    padding: 0 120px 0 28px;114    display: flex;115    align-items: center;116    color: #2b2b2b;117  }118  .placeholder {119    color: #8aa07e;120  }121  .input .value { color: #2b2b2b; }122 123  .input .close {124    position: absolute;125    right: 132px;126    top: 50%;127    transform: translateY(-50%);128    width: 64px;129    height: 64px;130    border-radius: 32px;131    background: #D8D8D8;132    display: flex;133    align-items: center;134    justify-content: center;135  }136 137  .target-btn {138    position: absolute;139    right: 40px;140    top: 50%;141    transform: translateY(-50%);142    width: 80px;143    height: 80px;144    border-radius: 40px;145    background: #ffffff;146    border: 2px solid #bbb;147    display: flex;148    align-items: center;149    justify-content: center;150  }151 152  .suggestion {153    position: absolute;154    left: 20px;155    top: 138px;156    width: 1000px;157    height: 120px;158    background: #ffffff;159    border: 2px solid #DDD;160    border-radius: 20px;161    box-shadow: 0 8px 18px rgba(0,0,0,0.15);162    display: flex;163    align-items: center;164    padding: 0 26px;165    box-sizing: border-box;166    font-size: 40px;167    color: #333;168  }169 170  .section-title {171    font-size: 44px;172    font-weight: 700;173    margin: 32px 0 18px;174  }175 176  /* Pills */177  .pill-row {178    display: flex;179    flex-wrap: wrap;180    gap: 20px;181  }182  .pill {183    padding: 20px 30px;184    border: 2px solid #D0D0D0;185    border-radius: 16px;186    font-size: 36px;187    color: #444;188    background: #fff;189  }190  .pill.active {191    background: #5AA33F;192    border-color: #5AA33F;193    color: #fff;194    font-weight: 700;195  }196 197  /* Keyboard mock */198  .keyboard {199    position: absolute;200    bottom: 0;201    left: 0;202    width: 1080px;203    height: 880px;204    background: #EFE8F4;205    border-top: 2px solid #e1ddeb;206    box-sizing: border-box;207    padding: 24px 26px;208  }209  .kb-topbar {210    display: flex;211    align-items: center;212    gap: 24px;213    margin-bottom: 16px;214  }215  .kb-dot { width: 56px; height: 56px; background: #D7D2E0; border-radius: 16px; }216  .kb-row {217    display: flex;218    justify-content: center;219    gap: 18px;220    margin: 22px 0;221  }222  .key {223    background: #ffffff;224    border: 2px solid #D7D7D7;225    border-radius: 18px;226    width: 80px;227    height: 100px;228    display: flex;229    align-items: center;230    justify-content: center;231    font-size: 42px;232    color: #333;233    box-shadow: 0 2px 0 #e9e9e9 inset;234  }235  .key.wide { width: 240px; }236  .key.wider { width: 520px; }237  .key.tall { height: 120px; }238  .space-row {239    display: flex;240    align-items: center;241    justify-content: space-between;242    gap: 18px;243    margin-top: 10px;244  }245  .homebar {246    position: absolute;247    bottom: 22px;248    left: 50%;249    transform: translateX(-50%);250    width: 300px;251    height: 10px;252    background: #bdbdbd;253    border-radius: 6px;254  }255</style>256</head>257<body>258<div id="render-target">259 260  <div class="status-bar">261    <div style="font-size:42px;">1:08</div>262    <div class="status-icons">263      <div class="dot"></div>264      <div class="dot"></div>265      <div class="dot"></div>266      <svg width="42" height="42" viewBox="0 0 24 24" fill="none">267        <path d="M17 2H7c-1.1 0-2 .9-2 2v16l7-3 7 3V4c0-1.1-.9-2-2-2z" fill="#fff"/>268      </svg>269      <svg width="42" height="42" viewBox="0 0 24 24" fill="none">270        <rect x="3" y="7" width="14" height="10" rx="2" fill="#fff"/>271        <rect x="17" y="10" width="2" height="4" fill="#fff"/>272      </svg>273    </div>274  </div>275 276  <div class="app-bar">277    <div class="app-title">Search Trails</div>278    <div class="actions">279      <div class="icon-btn">280        <svg width="56" height="56" viewBox="0 0 24 24" fill="none">281          <path d="M6 7h12v12a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V7z" fill="#222"/>282          <path d="M9 4h6l1 2H8l1-2z" fill="#222"/>283        </svg>284      </div>285      <div class="icon-btn">286        <svg width="56" height="56" viewBox="0 0 24 24" fill="none">287          <circle cx="10" cy="10" r="7" stroke="#222" stroke-width="2" fill="none"/>288          <path d="M15 15l6 6" stroke="#222" stroke-width="2"/>289        </svg>290      </div>291    </div>292  </div>293 294  <div class="content">295 296    <div class="label">Location <span class="subtle">City, State, Zip</span></div>297 298    <div class="field-group">299      <div class="input">300        <span class="value">98102</span>301        <div class="close">302          <svg width="32" height="32" viewBox="0 0 24 24" fill="none">303            <path d="M6 6l12 12M18 6L6 18" stroke="#666" stroke-width="2"/>304          </svg>305        </div>306      </div>307      <div class="target-btn">308        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">309          <circle cx="12" cy="12" r="7" stroke="#333" stroke-width="2"/>310          <circle cx="12" cy="12" r="2" fill="#333"/>311        </svg>312      </div>313      <div class="suggestion">Seattle, WA 98102, USA</div>314    </div>315 316    <div class="label">Trail</div>317    <div class="field-group">318      <div class="input"><span class="placeholder">Search</span></div>319    </div>320 321    <div class="section-title">Sort By</div>322    <div class="pill-row" style="margin-bottom: 12px;">323      <div class="pill active">Name</div>324      <div class="pill">Distance</div>325      <div class="pill">Most Popular</div>326      <div class="pill">Length</div>327    </div>328 329    <div class="section-title">Activities</div>330    <div class="pill-row">331      <div class="pill active">Any</div>332      <div class="pill">ATV</div>333      <div class="pill">Bike</div>334      <div class="pill">Cross Country Skiing</div>335      <div class="pill">Fishing</div>336      <div class="pill">Horseback Riding</div>337      <div class="pill">Inline Skating</div>338      <div class="pill">Mountain Biking</div>339      <div class="pill">Snowmobiling</div>340      <div class="pill">Walking</div>341      <div class="pill">Wheelchair Accessible</div>342    </div>343 344  </div>345 346  <!-- Keyboard mock at bottom -->347  <div class="keyboard">348    <div class="kb-topbar">349      <div class="kb-dot"></div>350      <div class="kb-dot"></div>351      <div class="kb-dot"></div>352      <div class="kb-dot"></div>353      <div class="kb-dot"></div>354    </div>355 356    <div class="kb-row">357      <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>358      <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>359    </div>360    <div class="kb-row">361      <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>362      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>363    </div>364    <div class="kb-row">365      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div>366      <div class="key">n</div><div class="key">m</div>367      <div class="key wide">⌫</div>368    </div>369 370    <div class="space-row">371      <div class="key wide">?123</div>372      <div class="key">,</div>373      <div class="key wider">space</div>374      <div class="key">.</div>375      <div class="key wide">✓</div>376    </div>377 378    <div class="homebar"></div>379  </div>380 381</div>382</body>383</html>