Added base code

flightscore/src/app-root.ts

@@ -0,0 +1,28 @@
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import './components/nav-bar';
+import { Router } from './router/router';
+import './pages/home-page';
+
+@customElement('app-root')
+export class AppRoot extends LitElement {
+  private router!: Router;
+
+  firstUpdated() {
+    const outlet = this.shadowRoot?.getElementById('outlet') as HTMLElement;
+    this.router = new Router(outlet, [
+      { path: '/', view: () => document.createElement('home-page') },
+      { path: '/tracks', view: () => document.createElement('tracks-page') },
+      { path: '/about', view: () => document.createElement('about-page') },
+    ]);
+    this.router.resolve();
+    this.addEventListener('nav', (e: any) => this.router.navigate(e.detail.path));
+  }
+
+  render() {
+    return html`
+      <nav-bar></nav-bar>
+      <main id="outlet"></main>
+    `;
+  }
+}

flightscore/src/components/nav-bar.ts

@@ -0,0 +1,47 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('nav-bar')
+export class NavBar extends LitElement {
+  static styles = css`
+    nav {
+      background: #222;
+      color: white;
+      display: flex;
+      justify-content: space-between;
+      padding: 1rem;
+    }
+    a {
+      color: white;
+      margin-right: 1rem;
+      text-decoration: none;
+    }
+  `;
+  navigate(path: string) {
+    this.dispatchEvent(new CustomEvent('nav', { detail: { path }, bubbles: true, composed: true }));
+  }
+  render() {
+    return html`
+      <nav>
+        <div>🎈 Balloon Tracker</div>
+        <div>
+          <a href="/" @click=${(e: Event) => (e.preventDefault(), this.navigate('/'))}>
+            Home
+          </a>
+          <a
+            href="/tracks"
+            @click=${(e: Event) => (e.preventDefault(), this.navigate('/tracks'))}
+          >
+            Tracks
+          </a>
+          <a
+            href="/about"
+            @click=${(e: Event) => (e.preventDefault(), this.navigate('/about'))}
+          >
+            About
+          </a>
+        </div>
+      </nav>
+    `;
+  }
+}

flightscore/src/main.ts

@@ -1,20 +1 @@
-// src/main.ts
-import './styles/global.css';
-import { Router, type Route } from './router/router.ts';
-import './views/home-page.ts';
-import './views/not-found-page.ts';
-
-const outlet = document.getElementById('app')!;
-const routes: Route [] = [
-  { path: '/', view: () => document.createElement('home-page') },
-  { path: '/home', view: () => document.createElement('home-page') },
-];
-const router = new Router(outlet, routes);
-
-document.addEventListener('click', (e) => {
-  const target = e.target as HTMLElement;
-  if (target.matches('a[data-link]')) {
-    e.preventDefault();
-    router.navigate(target.getAttribute('href')!);
-  }
-});
+import './app-root';

flightscore/src/pages/home-page.ts

@@ -0,0 +1,12 @@
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('home-page')
+export class HomePage extends LitElement {
+  render() {
+    return html`
+      <h1>Welcome to the Balloon Tracker</h1>
+      <p>Analyze your tracks visually.</p>
+    `;
+  }
+}

flightscore/src/views/home-page.ts

@@ -1,76 +0,0 @@
-import { LitElement, html, css } from 'lit';
-
-export class HomePage extends LitElement {
-  static styles = css`
-    :host {
-      display: block;
-      min-height: 100vh;
-      background: linear-gradient(135deg, #0a1f44, #122f68);
-      color: white;
-      font-family: 'Inter', sans-serif;
-      padding: 2rem;
-    }
-    header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      font-weight: 600;
-    }
-    nav a {
-      color: white;
-      text-decoration: none;
-      margin-left: 1.2rem;
-      opacity: 0.85;
-      transition: opacity 0.2s;
-    }
-    nav a:hover {
-      opacity: 1;
-    }
-    main {
-      margin-top: 6rem;
-      text-align: center;
-    }
-    h1 {
-      font-size: 3rem;
-      margin-bottom: 1rem;
-    }
-    p {
-      font-size: 1.3rem;
-      opacity: 0.85;
-    }
-    button {
-      margin-top: 2rem;
-      background: #00b4d8;
-      color: white;
-      border: none;
-      border-radius: 6px;
-      padding: 0.8rem 1.6rem;
-      font-size: 1.1rem;
-      cursor: pointer;
-      transition: background 0.2s;
-    }
-    button:hover {
-      background: #0096c7;
-    }
-  `;
-
-  render() {
-    return html`
-      <header>
-        <div>✈️ FlightScore</div>
-        <nav>
-          <a data-link href="/home">Home</a>
-          <a data-link href="/about">About</a>
-        </nav>
-      </header>
-      <main>
-        <h1>Welcome to FlightScore</h1>
-        <p>Track, analyze and elevate your aviation performance.</p>
-        <button @click=${() => alert('Coming soon!')}>
-          Get Started
-        </button>
-      </main>
-    `;
-  }
-}
-customElements.define('home-page', HomePage);

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

@@ -1,41 +0,0 @@
-// src/views/not-found-page.ts
-import { LitElement, html, css } from 'lit';
-
-export class NotFoundPage extends LitElement {
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      min-height: 100vh;
-      background: linear-gradient(120deg, #2d3436, #000000);
-      color: white;
-      font-family: 'Inter', sans-serif;
-      text-align: center;
-    }
-    h1 {
-      font-size: 5rem;
-      margin: 0;
-    }
-    p {
-      font-size: 1.2rem;
-      opacity: 0.8;
-    }
-    a {
-      margin-top: 2rem;
-      color: #00b4d8;
-      text-decoration: none;
-      font-weight: 500;
-    }
-  `;
-
-  render() {
-    return html`
-      <h1>404</h1>
-      <p>Page not found</p>
-      <a data-link href="/">Return to Home</a>
-    `;
-  }
-}
-customElements.define('not-found-page', NotFoundPage);