added some base code

flightscore/public/logo.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 640" width="512" height="640">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="40 20 430 550" width="512" height="640">
   <g fill="none" stroke="black" stroke-width="8" stroke-linecap="round" stroke-linejoin="round">
 
     <path d="

flightscore/src/app-root.ts

@@ -1,6 +1,8 @@
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
+import './pages/not-found-page';
 import './components/nav-bar';
+import './components/footer-bar';
 import { Router } from './router/router';
 import './pages/home-page';
 
@@ -23,6 +25,7 @@ export class AppRoot extends LitElement {
     return html`
       <nav-bar></nav-bar>
       <main id="outlet"></main>
+      <footer-bar></footer-bar>
     `;
   }
 }

flightscore/src/assets/lit.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="25.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 320"><path fill="#00E8FF" d="m64 192l25.926-44.727l38.233-19.114l63.974 63.974l10.833 61.754L192 320l-64-64l-38.074-25.615z"></path><path fill="#283198" d="M128 256V128l64-64v128l-64 64ZM0 256l64 64l9.202-60.602L64 192l-37.542 23.71L0 256Z"></path><path fill="#324FFF" d="M64 192V64l64-64v128l-64 64Zm128 128V192l64-64v128l-64 64ZM0 256V128l64 64l-64 64Z"></path><path fill="#0FF" d="M64 320V192l64 64z"></path></svg>

flightscore/src/components/footer-bar.css

@@ -0,0 +1,46 @@
+footer {
+  background: var(--color-bg-nav);
+  border-top: 1px solid var(--color-border);
+  color: var(--color-text);
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 0.8rem 1.5rem;
+  font-size: 0.9rem;
+  margin-top: 3rem;
+  flex-wrap: wrap;
+  backdrop-filter: blur(10px);
+  position: fixed;
+  bottom: 0;
+  width: 100vw;
+}
+
+a {
+  color: var(--color-text);
+  text-decoration: none;
+  margin-left: 1.2rem;
+  font-weight: 500;
+}
+
+a:hover {
+  color: var(--color-accent);
+}
+
+.center {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1rem;
+}
+
+@media (max-width: 600px) {
+  footer {
+    flex-direction: column;
+    gap: 0.6rem;
+    text-align: center;
+  }
+
+  a {
+    margin: 0;
+  }
+}

flightscore/src/components/footer-bar.ts

@@ -0,0 +1,25 @@
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import styles from './footer-bar.css?inline';
+
+@customElement('footer-bar')
+export class FooterBar extends LitElement {
+    static styles = css`${unsafeCSS(styles)}`;
+
+  render() {
+    const year = new Date().getFullYear();
+
+    return html`
+      <footer>
+        <div class="center">
+          <a href="/privacy" @click=${(e: Event) => e.preventDefault()}>Privacy</a>
+          <a href="/imprint" @click=${(e: Event) => e.preventDefault()}>Imprint</a>
+          <a href="/contact" @click=${(e: Event) => e.preventDefault()}>Contact</a>
+        </div>
+        <div class="right">
+          <span>© ${year} Jan Meinl</span>
+        </div>
+      </footer>
+    `;
+  }
+}

flightscore/src/components/nav-bar.css

@@ -0,0 +1,74 @@
+nav {
+    backdrop-filter: blur(10px);
+    background: var(--color-bg-nav);
+    border-bottom: 1px solid var(--color-border);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 1.5rem;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+.brand {
+    font-weight: 700;
+    font-size: 1.1rem;
+    user-select: none;
+    width: fit-content;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.brand img {
+    width: auto;
+    height: 2rem;
+    padding-right: 1rem;
+}
+
+.links {
+    display: flex;
+    gap: 1.25rem;
+    align-items: center;
+}
+
+.links a {
+    text-decoration: none;
+}
+
+a {
+    color: var(--color-text);
+    font-weight: 500;
+    position: relative;
+}
+
+a::after {
+    content: '';
+    position: absolute;
+    bottom: -6px;
+    left: 0;
+    width: 0%;
+    height: 2px;
+    background: var(--color-accent);
+    transition: 0.3s ease;
+}
+
+a:hover::after {
+    width: 100%;
+}
+
+button {
+    background: none;
+    border: 1px solid var(--color-border);
+    border-radius: 5px;
+    padding: 0.4rem 0.6rem;
+    color: var(--color-text);
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+button:hover {
+    border-color: var(--color-accent);
+    color: var(--color-accent);
+}

flightscore/src/components/nav-bar.ts

@@ -1,47 +1,52 @@
-import { LitElement, html, css } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import styles from './nav-bar.css?inline';
 
 @customElement('nav-bar')
 export class NavBar extends LitElement {
-  static styles = css`
-    nav {
-      background: #222;
-      color: white;
-      display: flex;
-      justify-content: space-between;
-      padding: 1rem;
+    static styles = css`${unsafeCSS(styles)}`;
+
+    @state() theme: 'light' | 'dark' =
+        (localStorage.getItem('theme') as 'light' | 'dark') ||
+        (window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : 'light');
+
+    firstUpdated() {
+        document.documentElement.setAttribute('data-theme', this.theme);
     }
-    a {
-      color: white;
-      margin-right: 1rem;
-      text-decoration: none;
+
+    toggleTheme() {
+        this.theme = this.theme === 'light' ? 'dark' : 'light';
+        document.documentElement.setAttribute('data-theme', this.theme);
+        localStorage.setItem('theme', this.theme);
     }
-  `;
-  navigate(path: string) {
-    this.dispatchEvent(new CustomEvent('nav', { detail: { path }, bubbles: true, composed: true }));
-  }
-  render() {
-    return html`
+
+    navigate(path: string) {
+        this.dispatchEvent(
+            new CustomEvent('nav', { detail: { path }, bubbles: true, composed: true })
+        );
+    }
+
+    render() {
+        return html`
       <nav>
-        <div>🎈 Balloon Tracker</div>
-        <div>
+        <div class="brand"><img src="/logo.svg" alt="Flight Score Logo" /> FlightScore</div>
+        <div class="links">
           <a href="/" @click=${(e: Event) => (e.preventDefault(), this.navigate('/'))}>
             Home
           </a>
           <a
-            href="/tracks"
-            @click=${(e: Event) => (e.preventDefault(), this.navigate('/tracks'))}
+            href="/competitions"
+            @click=${(e: Event) => (e.preventDefault(), this.navigate('/competitions'))}
           >
-            Tracks
-          </a>
-          <a
-            href="/about"
-            @click=${(e: Event) => (e.preventDefault(), this.navigate('/about'))}
-          >
-            About
+            Competitions
           </a>
+          <button @click=${this.toggleTheme}>
+            ${this.theme === 'light' ? '🌙 Dark' : '☀️ Light'}
+          </button>
         </div>
       </nav>
     `;
-  }
+    }
 }

flightscore/src/main.ts

@@ -1 +1,2 @@
+import './styles/theme.css';
 import './app-root';

flightscore/src/pages/not-found-page.ts

@@ -0,0 +1,12 @@
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('not-found-page')
+export class NotFoundPage extends LitElement {
+  render() {
+    return html`
+      <h1>404 Not Found</h1>
+      <p>How did you get here?</p>
+    `;
+  }
+}

flightscore/src/router/router.ts

@@ -1,3 +1,4 @@
+
 export type Route = {
   path: string;
   view: () => HTMLElement;

flightscore/src/styles/global.css

@@ -1,13 +0,0 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-html,
-body {
-  height: 100%;
-  background-color: #0a1f44;
-}
-a {
-  cursor: pointer;
-}

flightscore/src/styles/theme.css

@@ -0,0 +1,37 @@
+:root {
+  --color-bg: #f5f5f5;
+  --color-bg-nav: #ffffffcc;
+  --color-text: #111;
+  --color-accent: #2b6cb0;
+  --color-border: #ddd;
+}
+
+:root[data-theme='dark'] {
+  --color-bg: #1a1a1a;
+  --color-bg-nav: #222;
+  --color-text: #f5f5f5;
+  --color-accent: #63b3ed;
+  --color-border: #333;
+}
+
+* {
+  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-family: 'Inter', system-ui, sans-serif;
+}
+
+a {
+  color: var(--color-accent);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}