first commit

flightscore/src/assets/lit.svg

@@ -0,0 +1 @@
+<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/main.ts

@@ -0,0 +1,20 @@
+// 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')!);
+  }
+});

flightscore/src/router/router.ts

@@ -0,0 +1,29 @@
+export type Route = {
+  path: string;
+  view: () => HTMLElement;
+};
+
+export class Router {
+  private routes: Route[];
+  private outlet: HTMLElement;
+
+  constructor(outlet: HTMLElement, routes: Route[]) {
+    this.routes = routes;
+    this.outlet = outlet;
+    window.addEventListener('popstate', () => this.resolve());
+  }
+
+  navigate(path: string) {
+    window.history.pushState({}, '', path);
+    this.resolve();
+  }
+
+  resolve() {
+    const path = window.location.pathname;
+    const match = this.routes.find((r) => r.path === path);
+    this.outlet.innerHTML = '';
+    this.outlet.append(
+      match ? match.view() : document.createElement('not-found-page')
+    );
+  }
+}

flightscore/src/styles/global.css

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

flightscore/src/views/home-page.ts

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1,41 @@
+// 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);