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>Trail Search UI</title>7<style>8  html, body { margin: 0; padding: 0; background: transparent; }9  * { box-sizing: border-box; }10  #render-target {11    width: 1080px;12    height: 2400px;13    position: relative;14    overflow: hidden;15    background: #f4f5f7;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17    color: #222;18  }19 20  /* Top green status/header region */21  .status-bar {22    height: 110px;23    background: #5b9a3e;24    color: #fff;25    padding: 0 36px;26    display: flex;27    align-items: center;28    font-size: 28px;29    letter-spacing: 1px;30  }31  .status-icons {32    margin-left: auto;33    display: flex;34    gap: 28px;35    align-items: center;36    opacity: 0.95;37  }38  .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; display: inline-block; }39 40  .page-header {41    background: #ffffff;42    padding: 36px 40px 28px 40px;43    border-bottom: 1px solid #e8e9ec;44  }45  .page-title {46    margin: 8px 0 0 0;47    font-size: 62px;48    font-weight: 700;49    color: #152218;50  }51 52  /* Map placeholder */53  .map-wrap {54    position: relative;55    height: 640px;56    background: #E0E0E0;57    border-top: 1px solid #BDBDBD;58    border-bottom: 1px solid #BDBDBD;59    display: flex;60    align-items: center;61    justify-content: center;62    color: #5f6e6a;63    font-weight: 600;64  }65 66  .floating-btn {67    position: absolute;68    right: 28px;69    width: 110px;70    height: 110px;71    border-radius: 50%;72    background: #ffffff;73    box-shadow: 0 8px 18px rgba(0,0,0,0.18);74    display: flex;75    align-items: center;76    justify-content: center;77  }78  .floating-btn.top { top: 40px; }79  .floating-btn.bottom { top: 170px; }80 81  /* Cards */82  .cards {83    padding: 22px 24px 180px 24px;84    margin-top: -10px;85  }86  .card {87    background: #fff;88    border-radius: 26px;89    overflow: hidden;90    box-shadow: 0 10px 24px rgba(0,0,0,0.1);91    margin-bottom: 28px;92    position: relative;93  }94  .card-image {95    height: 360px;96    background: #E0E0E0;97    border-bottom: 1px solid #BDBDBD;98    display: flex;99    align-items: center;100    justify-content: center;101    color: #6b6b6b;102    font-weight: 600;103    font-size: 30px;104    position: relative;105  }106  .heart-overlay {107    position: absolute;108    top: 18px;109    right: 18px;110    width: 64px;111    height: 64px;112    border-radius: 50%;113    background: rgba(255,255,255,0.75);114    display: flex;115    align-items: center;116    justify-content: center;117  }118  .card-body {119    padding: 30px 36px 34px 36px;120  }121  .title-row {122    display: flex;123    align-items: baseline;124    gap: 14px;125    margin-bottom: 16px;126  }127  .trail-title {128    font-size: 46px;129    font-weight: 800;130    color: #0c1a10;131  }132  .state {133    font-size: 36px;134    color: #6e726f;135    font-weight: 600;136  }137  .meta-row {138    display: flex;139    align-items: center;140    justify-content: space-between;141    gap: 20px;142  }143  .stars {144    color: #FFC107;145    font-size: 34px;146    letter-spacing: 2px;147    margin-right: 14px;148  }149  .reviews {150    font-size: 34px;151    color: #5a5f5b;152    font-weight: 600;153  }154  .length {155    font-size: 38px;156    color: #3a3f3b;157    font-weight: 700;158  }159  .length .value {160    margin-left: 14px;161    font-weight: 700;162  }163 164  /* Bottom navigation */165  .bottom-nav {166    position: absolute;167    left: 0;168    right: 0;169    bottom: 0;170    height: 150px;171    background: #5b9a3e;172    border-top-left-radius: 0;173    border-top-right-radius: 0;174    box-shadow: 0 -6px 18px rgba(0,0,0,0.12);175    display: flex;176    align-items: center;177    justify-content: space-around;178    padding: 0 40px;179  }180  .nav-icon {181    width: 72px;182    height: 72px;183    fill: #ffffff;184    opacity: 0.95;185  }186  .home-indicator {187    position: absolute;188    left: 50%;189    transform: translateX(-50%);190    bottom: 10px;191    width: 280px;192    height: 8px;193    background: #0e0e0e;194    border-radius: 8px;195    opacity: 0.65;196  }197</style>198</head>199<body>200<div id="render-target">201 202  <div class="status-bar">203    1:11204    <div class="status-icons">205      <span class="dot"></span>206      <span class="dot"></span>207      <span class="dot"></span>208      <span style="font-size:26px;">Wi‑Fi</span>209      <span style="font-size:26px;">🔋</span>210    </div>211  </div>212 213  <div class="page-header">214    <div class="page-title">Trail Search</div>215  </div>216 217  <div class="map-wrap">218    [IMG: Map with trail pins]219    <div class="floating-btn top" aria-label="Toggle view">220      <!-- simple swap arrows icon -->221      <svg width="44" height="44" viewBox="0 0 24 24">222        <path d="M7 6h13l-3-3M17 18H4l3 3" stroke="#2b3d2c" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>223      </svg>224    </div>225    <div class="floating-btn bottom" aria-label="Help">226      <svg width="44" height="44" viewBox="0 0 24 24">227        <path d="M12 17v-1.2c0-2.2 3-2.3 3-5 0-1.9-1.5-3.1-3.3-3.1-1.5 0-2.6.7-3.1 2" stroke="#2b3d2c" stroke-width="2.2" fill="none" stroke-linecap="round"/>228        <circle cx="12" cy="19.5" r="1" fill="#2b3d2c"/>229      </svg>230    </div>231  </div>232 233  <div class="cards">234    <!-- Card 1 -->235    <div class="card">236      <div class="card-image">237        [IMG: Alki Trail photo]238        <div class="heart-overlay">239          <svg width="34" height="34" viewBox="0 0 24 24">240            <path d="M12.1 21s-7.1-4.7-9.3-8.2C1.3 10 2.6 6.7 5.8 6.2c1.9-.3 3.3.6 4.2 1.9.9-1.3 2.3-2.2 4.2-1.9 3.1.5 4.5 3.8 3 6.6C19.1 16.3 12.1 21 12.1 21z" fill="none" stroke="#2b3d2c" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>241          </svg>242        </div>243      </div>244      <div class="card-body">245        <div class="title-row">246          <div class="trail-title">Alki Trail</div>247          <div class="state">WA</div>248        </div>249        <div class="meta-row">250          <div style="display:flex; align-items:center;">251            <div class="stars">★★★★★</div>252            <div class="reviews">5 Reviews</div>253          </div>254          <div class="length">Length <span class="value">5.5 mi</span></div>255        </div>256      </div>257    </div>258 259    <!-- Card 2 -->260    <div class="card">261      <div class="card-image">262        [IMG: BPA Trail photo]263        <div class="heart-overlay">264          <svg width="34" height="34" viewBox="0 0 24 24">265            <path d="M12.1 21s-7.1-4.7-9.3-8.2C1.3 10 2.6 6.7 5.8 6.2c1.9-.3 3.3.6 4.2 1.9.9-1.3 2.3-2.2 4.2-1.9 3.1.5 4.5 3.8 3 6.6C19.1 16.3 12.1 21 12.1 21z" fill="none" stroke="#2b3d2c" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>266          </svg>267        </div>268      </div>269      <div class="card-body">270        <div class="title-row">271          <div class="trail-title">BPA Trail</div>272          <div class="state">WA</div>273        </div>274        <div class="meta-row">275          <div style="display:flex; align-items:center;">276            <div class="stars">★★★★★</div>277            <div class="reviews">5 Reviews</div>278          </div>279          <div class="length">Length <span class="value">3.8 mi</span></div>280        </div>281      </div>282    </div>283  </div>284 285  <!-- Bottom Navigation -->286  <div class="bottom-nav">287    <!-- Leaf / Trails -->288    <svg class="nav-icon" viewBox="0 0 24 24">289      <path d="M20 3c-9 2-12 6-12 12 0 3 2 6 6 6 6 0 10-8 6-18zM8 15s3-1 6 2" stroke="#fff" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>290    </svg>291    <!-- Search -->292    <svg class="nav-icon" viewBox="0 0 24 24">293      <circle cx="10.5" cy="10.5" r="6.5" fill="none" stroke="#fff" stroke-width="2"/>294      <path d="M16 16l5 5" stroke="#fff" stroke-width="2" stroke-linecap="round"/>295    </svg>296    <!-- Heart -->297    <svg class="nav-icon" viewBox="0 0 24 24">298      <path d="M12.1 21s-7.1-4.7-9.3-8.2C1.3 10 2.6 6.7 5.8 6.2c1.9-.3 3.3.6 4.2 1.9.9-1.3 2.3-2.2 4.2-1.9 3.1.5 4.5 3.8 3 6.6C19.1 16.3 12.1 21 12.1 21z" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>299    </svg>300    <!-- User -->301    <svg class="nav-icon" viewBox="0 0 24 24">302      <circle cx="12" cy="8" r="4" fill="none" stroke="#fff" stroke-width="2"/>303      <path d="M4 22c2.5-4 13.5-4 16 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>304    </svg>305    <!-- Settings -->306    <svg class="nav-icon" viewBox="0 0 24 24">307      <path d="M12 8.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7zm8 3l-2 .8.2 2.2-1.8 1.2-1.9-1.1-1.9 1.1-1.8-1.2.2-2.2-2-.8.8-2 2.1.1 1-1.9h2l1 1.9 2.1-.1.8 2z" fill="#fff"/>308    </svg>309    <div class="home-indicator"></div>310  </div>311 312</div>313</body>314</html>