GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Valley of Flowers UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #e9e6d8; /* map-like pale background */13    border-radius: 0;14  }15 16  /* Map area placeholder contour feel */17  .map-overlay {18    position: absolute;19    inset: 0 0 900px 0; /* leaves bottom panel visible */20    background: repeating-linear-gradient(0deg, rgba(0,0,0,0.05) 0px, rgba(0,0,0,0.05) 1px, transparent 2px, transparent 24px);21  }22 23  /* Top card */24  .top-card {25    position: absolute;26    top: 110px;27    left: 50px;28    width: 980px;29    height: 240px;30    background: #2b2f2a;31    border-radius: 28px;32    box-shadow: 0 8px 20px rgba(0,0,0,0.35);33    display: flex;34    padding: 22px;35    color: #fff;36  }37  .top-card .img {38    width: 260px;39    height: 190px;40    background: #E0E0E0;41    border: 1px solid #BDBDBD;42    border-radius: 20px;43    display: flex; align-items: center; justify-content: center;44    color: #757575; font-weight: bold; font-size: 22px;45    margin-right: 28px;46  }47  .top-card .content {48    flex: 1;49    position: relative;50  }51  .badge { font-size: 30px; color: #a9b48f; }52  .rating { color: #b8f87b; margin-left: 12px; }53  .clear-btn {54    position: absolute; right: 0; top: 0;55    color: #d8d8d8; font-size: 36px; text-decoration: none;56  }57  .title {58    font-size: 48px; font-weight: 700; margin: 8px 0 6px 0;59  }60  .subtitle { font-size: 30px; color: #cfd3c9; }61  .distance { font-size: 34px; margin-top: 10px; color: #ffffff; }62 63  /* scale bar */64  .scale-bar {65    position: absolute;66    top: 370px;67    left: 120px;68    width: 420px;69    height: 68px;70    display: flex; flex-direction: column; align-items: center;71    color: #333;72  }73  .scale-labels {74    width: 100%;75    display: flex; justify-content: space-between;76    font-size: 26px; color: #444;77  }78  .scale-rail {79    width: 100%;80    height: 18px;81    margin-top: 8px;82    display: flex;83    gap: 28px;84  }85  .segment {86    height: 100%;87    background: #c9c9c9; border-radius: 8px;88  }89  .segment:nth-child(1){ width: 140px; }90  .segment:nth-child(2){ width: 140px; }91  .segment:nth-child(3){ width: 90px; }92 93  /* collapse chevron circle */94  .chevron {95    position: absolute;96    top: 360px;97    left: 50px;98    width: 90px; height: 90px;99    border-radius: 45px;100    background: #0b0f08;101    box-shadow: 0 6px 12px rgba(0,0,0,0.3);102    display: flex; align-items: center; justify-content: center;103  }104  .chevron svg { width: 40px; height: 40px; fill: #fff; }105 106  /* Right floating pill (layers) */107  .layers-pill {108    position: absolute;109    top: 470px;110    right: 70px;111    width: 120px; height: 240px;112    background: #0b0f08;113    border-radius: 60px;114    box-shadow: 0 10px 22px rgba(0,0,0,0.4);115    display: flex; align-items: center; justify-content: center;116  }117  .layers-pill svg { width: 64px; height: 64px; fill: #fff; }118  .layers-dots {119    position: absolute; bottom: 20px; right: 48px; color: #fff; font-size: 60px;120  }121 122  /* Green trail approximation */123  .trail {124    position: absolute;125    top: 500px;126    right: 240px;127    width: 60px;128    height: 920px;129    background: #1f7e2b;130    border-radius: 40px;131    box-shadow: inset 0 0 0 6px #6ac46a;132  }133 134  .label {135    position: absolute;136    color: #2a2a2a;137    font-weight: 600;138    font-size: 42px;139    text-shadow: 0 1px 0 rgba(255,255,255,0.6);140  }141  .label.ghang { top: 420px; right: 310px; }142  .label.kajila { top: 580px; right: 410px; font-size: 38px; }143  .label.bhyudar { top: 980px; right: 370px; font-size: 40px; }144 145  /* Left GPS button */146  .gps-btn {147    position: absolute;148    left: 70px;149    bottom: 1040px;150    width: 120px; height: 120px;151    background: #0b0f08;152    border-radius: 60px;153    display: flex; align-items: center; justify-content: center;154    box-shadow: 0 12px 20px rgba(0,0,0,0.35);155  }156  .gps-btn svg { width: 60px; height: 60px; fill: #fff; }157 158  /* Bottom dark panel */159  .bottom-panel {160    position: absolute;161    left: 0; right: 0; bottom: 0;162    height: 900px;163    background: #0b1008;164    color: #fff;165    border-top-left-radius: 0;166    border-top-right-radius: 0;167    box-shadow: 0 -12px 30px rgba(0,0,0,0.4) inset;168  }169 170  .stats {171    position: absolute;172    top: 120px;173    width: 100%;174    display: grid;175    grid-template-columns: 1fr 1fr 1fr;176    padding: 0 60px;177    gap: 20px;178    text-align: center;179  }180  .metric-title { font-size: 42px; color: #b3b3b3; }181  .metric-value { font-size: 64px; font-weight: 700; margin-top: 14px; }182 183  .stats2 {184    position: absolute;185    top: 360px;186    width: 100%;187    display: grid;188    grid-template-columns: 1fr 1fr 1fr;189    padding: 0 60px;190    gap: 20px;191    text-align: center;192  }193  .metric-small-title { font-size: 40px; color: #b3b3b3; }194  .metric-small-value { font-size: 56px; font-weight: 700; margin-top: 14px; }195 196  /* Center action buttons */197  .start-btn {198    position: absolute;199    top: 520px; left: 50%; transform: translateX(-50%);200    width: 240px; height: 240px; border-radius: 120px;201    background: #ffffff;202    color: #24371f;203    display: flex; align-items: center; justify-content: center;204    font-size: 60px; font-weight: 700;205    box-shadow: 0 10px 30px rgba(0,0,0,0.4);206  }207  .action-small {208    position: absolute; top: 540px;209    width: 150px; height: 150px; border-radius: 75px;210    display: flex; align-items: center; justify-content: center;211    background: #162015; color: #cfe6c3;212    box-shadow: 0 8px 20px rgba(0,0,0,0.35);213    flex-direction: column;214    gap: 12px;215  }216  .action-left { left: 200px; }217  .action-right { right: 200px; }218  .action-icon { width: 60px; height: 60px; }219  .action-text { font-size: 36px; color: #e7efdf; }220 221  /* bottom progress line */222  .bottom-line {223    position: absolute; bottom: 50px; left: 220px; right: 220px;224    height: 12px; border-radius: 6px;225    background: #2c342a;226  }227  .bottom-line::after {228    content: "";229    position: absolute; left: 40%; top: 0;230    width: 120px; height: 12px; border-radius: 6px;231    background: #66765a;232  }233</style>234</head>235<body>236<div id="render-target">237 238  <div class="map-overlay"></div>239 240  <div class="top-card">241    <div class="img">[IMG: Valley of Flowers]</div>242    <div class="content">243      <a href="#" class="clear-btn">Clear</a>244      <div>245        <span class="badge">Hard</span>246        <span class="rating">★ 4.8 (16)</span>247      </div>248      <div class="title">Valley of Flowers</div>249      <div class="subtitle">Valley of Flowers National Park</div>250      <div class="distance">36.05 km</div>251    </div>252  </div>253 254  <div class="scale-bar">255    <div class="scale-labels">256      <span>0</span><span>750 m</span><span>1.5 km</span>257    </div>258    <div class="scale-rail">259      <div class="segment"></div>260      <div class="segment"></div>261      <div class="segment"></div>262    </div>263  </div>264 265  <div class="chevron">266    <svg viewBox="0 0 24 24"><path d="M12 14l-6-6h12z"></path></svg>267  </div>268 269  <div class="layers-pill">270    <svg viewBox="0 0 24 24">271      <path d="M12 3l10 5-10 5L2 8l10-5zm0 8l8 4-8 4-8-4 8-4zm0 7l6 3-6 3-6-3 6-3z"></path>272    </svg>273    <div class="layers-dots">⋮</div>274  </div>275 276  <div class="trail"></div>277  <div class="label ghang">Ghan</div>278  <div class="label kajila">Kajila</div>279  <div class="label bhyudar">Bhyudar</div>280 281  <div class="gps-btn">282    <svg viewBox="0 0 24 24">283      <path d="M12 2l3 7 7 3-7 3-3 7-3-7-7-3 7-3z"></path>284    </svg>285  </div>286 287  <div class="bottom-panel">288    <div class="stats">289      <div>290        <div class="metric-title">Time</div>291        <div class="metric-value">00:00</div>292      </div>293      <div>294        <div class="metric-title">Distance</div>295        <div class="metric-value">0.00 km</div>296      </div>297      <div>298        <div class="metric-title">Elev. gain</div>299        <div class="metric-value">0 m</div>300      </div>301    </div>302 303    <div class="stats2">304      <div>305        <div class="metric-small-title">Remaining time</div>306        <div class="metric-small-value">—</div>307      </div>308      <div>309        <div class="metric-small-title">Avg. pace</div>310        <div class="metric-small-value">00:00</div>311      </div>312      <div>313        <div class="metric-small-title">Avg. speed</div>314        <div class="metric-small-value">0.0 kph</div>315      </div>316    </div>317 318    <div class="start-btn">Start</div>319 320    <div class="action-small action-left">321      <svg class="action-icon" viewBox="0 0 24 24">322        <path d="M3 17l4-4 4 3 5-6 5 7-1 1-4-6-5 6-4-3-3 3z" fill="#cfe6c3"></path>323      </svg>324      <div class="action-text">Elevation</div>325    </div>326 327    <div class="action-small action-right">328      <svg class="action-icon" viewBox="0 0 24 24">329        <path d="M10 6a2 2 0 1 0 4 0 2 2 0 1 0-4 0zm-2 14l2-6 4 2 4-4 2 1-5 5-4-2-2 4z" fill="#cfe6c3"></path>330      </svg>331      <div class="action-text">Activity</div>332    </div>333 334    <div class="bottom-line"></div>335  </div>336 337</div>338</body>339</html>