initial version of streba 2

2026-07-22 09:24:18 +02:00
commit 196f30521c
31 changed files with 5056 additions and 0 deletions
@@ -0,0 +1,113 @@
+<script lang="ts">
+	import '@fontsource-variable/inter';
+	import '../app.css';
+	import { page } from '$app/state';
+
+	let { children } = $props();
+
+	const links = [
+		{ href: '/', label: 'Dashboard' },
+		{ href: '/activities', label: 'Activities' },
+		{ href: '/peaks', label: 'Peaks' },
+		{ href: '/upload', label: 'Upload' }
+	];
+
+	function isActive(href: string): boolean {
+		if (href === '/') return page.url.pathname === '/';
+		return page.url.pathname.startsWith(href);
+	}
+</script>
+
+<svelte:head>
+	<title>Streba</title>
+</svelte:head>
+
+<header class="topbar">
+	<nav class="topbar-inner">
+		<a href="/" class="wordmark">
+			<svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
+				<path d="M2 20 L9 6 L13 13 L16 9 L22 20 Z" fill="currentColor" />
+			</svg>
+			Streba
+		</a>
+		<div class="nav-links">
+			{#each links as link (link.href)}
+				<a href={link.href} class:active={isActive(link.href)}>{link.label}</a>
+			{/each}
+		</div>
+	</nav>
+</header>
+
+<main>
+	{@render children()}
+</main>
+
+<footer class="footer">Streba - the GPX analyser</footer>
+
+<style>
+	.topbar {
+		position: sticky;
+		top: 0;
+		z-index: 1100;
+		background: color-mix(in srgb, var(--surface-1) 82%, transparent);
+		backdrop-filter: blur(12px);
+		border-bottom: 1px solid var(--border);
+	}
+	.topbar-inner {
+		max-width: 1080px;
+		margin: 0 auto;
+		padding: 0 1.25rem;
+		height: 3.5rem;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+	}
+	.wordmark {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		font-weight: 700;
+		font-size: 1.15rem;
+		letter-spacing: -0.02em;
+		color: var(--text-primary);
+		text-decoration: none;
+	}
+	.wordmark svg {
+		color: var(--accent);
+	}
+	.nav-links {
+		display: flex;
+		gap: 0.25rem;
+	}
+	.nav-links a {
+		padding: 0.4rem 0.75rem;
+		border-radius: 0.5rem;
+		font-size: 0.9rem;
+		font-weight: 500;
+		color: var(--text-secondary);
+		text-decoration: none;
+		transition: background 120ms, color 120ms;
+	}
+	.nav-links a:hover {
+		background: var(--wash);
+		color: var(--text-primary);
+	}
+	.nav-links a.active {
+		background: var(--accent-wash);
+		color: var(--accent-strong);
+	}
+	main {
+		max-width: 1080px;
+		margin: 0 auto;
+		padding: 2rem 1.25rem 4rem;
+	}
+	.footer {
+		max-width: 1080px;
+		margin: 0 auto;
+		padding: 1.5rem 1.25rem 2.5rem;
+		color: var(--text-muted);
+		font-size: 0.8rem;
+		border-top: 1px solid var(--border);
+	}
+</style>