useweb/streba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

speed chart, old logo revival, softer hillshade, peaks as side feature

Browse Source
This commit is contained in:
Vincent van der Wal
2026-07-22 11:49:17 +02:00
parent bca5154459
commit b288daf251
13 changed files with 314 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/+page.svelte
+35 -64
View File
@@ -19,7 +19,7 @@
<div>
<h1>The GPX analyser</h1>
<p class="page-sub">
Upload your tracks, analyse every climb, and bag Alpine peaks - together.
Upload your tracks, analyse every climb - and tick off Alpine peaks along the way.
</p>
</div>
<div class="hero-actions">
@@ -39,41 +39,31 @@
<h2>Worldmap</h2>
<Map tracks={data.tracks} height="440px" />
<div class="lower">
<section>
<h2>Recent activities</h2>
{#if data.activities.length === 0}
<div class="card empty">
<p>Nothing here yet - be the first to upload a track.</p>
{#if data.user}<a class="btn" href="/upload">Upload a GPX file</a>{/if}
</div>
{:else}
<div class="card list">
{#each data.activities.slice(0, 8) as activity (activity.id)}
<ActivityItem {activity} />
{/each}
</div>
{/if}
</section>
{#if data.mine}
<section>
<h2>Your peak bagging</h2>
<div class="card peak-progress">
<div class="meter-nums">
<span class="big">{data.mine.peaksClimbed}</span>
<span class="of">peak{data.mine.peaksClimbed === 1 ? '' : 's'} climbed</span>
</div>
{#if data.mine.highestAscent}
<p class="highest">
Highest so far: <strong>{data.mine.highestAscent.name}</strong>
({Math.round(data.mine.highestAscent.elevation_m ?? 0).toLocaleString('en-US')} m)
</p>
{/if}
<a class="btn ghost" href="/peaks">Open the peak map</a>
</div>
</section>
{/if}
</div>
<h2>Recent activities</h2>
{#if data.activities.length === 0}
<div class="card empty">
<p>Nothing here yet - be the first to upload a track.</p>
{#if data.user}<a class="btn" href="/upload">Upload a GPX file</a>{/if}
</div>
{:else}
<div class="card list">
{#each data.activities.slice(0, 10) as activity (activity.id)}
<ActivityItem {activity} />
{/each}
</div>
{/if}
{#if data.mine && data.mine.peaksClimbed > 0}
<div class="card peak-strip">
<span>
⛰ You've reached <strong>{data.mine.peaksClimbed}</strong>
peak{data.mine.peaksClimbed === 1 ? '' : 's'}{#if data.mine.highestAscent},
highest: <strong>{data.mine.highestAscent.name}</strong>
({Math.round(data.mine.highestAscent.elevation_m ?? 0).toLocaleString('en-US')} m){/if}.
</span>
<a class="btn ghost" href="/peaks">Peak map</a>
</div>
{/if}
<style>
.hero {
@@ -94,17 +84,6 @@
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.lower {
display: grid;
grid-template-columns: 3fr 2fr;
gap: 1.25rem;
align-items: start;
}
@media (max-width: 720px) {
.lower {
grid-template-columns: 1fr;
}
}
.list :global(.item:not(:last-child)) {
border-bottom: 1px solid var(--border);
}
@@ -116,26 +95,18 @@
margin: 0 0 1rem;
color: var(--text-secondary);
}
.peak-progress {
padding: 1.15rem;
.peak-strip {
margin-top: 1.25rem;
padding: 0.85rem 1.15rem;
display: flex;
flex-direction: column;
gap: 0.85rem;
align-items: flex-start;
}
.meter-nums .big {
font-size: 2rem;
font-weight: 700;
letter-spacing: -0.02em;
}
.meter-nums .of {
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
color: var(--text-secondary);
font-size: 0.9rem;
margin-left: 0.4rem;
}
.highest {
margin: 0;
font-size: 0.88rem;
color: var(--text-secondary);
.peak-strip strong {
color: var(--text-primary);
}
</style>