diff --git a/flightscore/index.html b/flightscore/index.html index d332f2f..18ca238 100644 --- a/flightscore/index.html +++ b/flightscore/index.html @@ -1,18 +1,21 @@ - - - - FlightScore - - - - - -
- - + + + + + FlightScore + + + + + + + + + + + + + \ No newline at end of file diff --git a/flightscore/public/logo.svg b/flightscore/public/logo.svg new file mode 100644 index 0000000..9dfcfff --- /dev/null +++ b/flightscore/public/logo.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/flightscore/src/app-root.ts b/flightscore/src/app-root.ts new file mode 100644 index 0000000..ab9c4fc --- /dev/null +++ b/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` + +
+ `; + } +} \ No newline at end of file diff --git a/flightscore/src/components/nav-bar.ts b/flightscore/src/components/nav-bar.ts new file mode 100644 index 0000000..14e8404 --- /dev/null +++ b/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` + + `; + } +} \ No newline at end of file diff --git a/flightscore/src/main.ts b/flightscore/src/main.ts index 524ed90..c819a0a 100644 --- a/flightscore/src/main.ts +++ b/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')!); - } -}); \ No newline at end of file +import './app-root'; \ No newline at end of file diff --git a/flightscore/src/pages/home-page.ts b/flightscore/src/pages/home-page.ts new file mode 100644 index 0000000..45d0a06 --- /dev/null +++ b/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` +

Welcome to the Balloon Tracker

+

Analyze your tracks visually.

+ `; + } +} \ No newline at end of file diff --git a/flightscore/src/views/home-page.ts b/flightscore/src/views/home-page.ts deleted file mode 100644 index dc1e948..0000000 --- a/flightscore/src/views/home-page.ts +++ /dev/null @@ -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` -
-
✈️ FlightScore
- -
-
-

Welcome to FlightScore

-

Track, analyze and elevate your aviation performance.

- -
- `; - } -} -customElements.define('home-page', HomePage); \ No newline at end of file diff --git a/flightscore/src/views/not-found-page.ts b/flightscore/src/views/not-found-page.ts deleted file mode 100644 index 7f0db56..0000000 --- a/flightscore/src/views/not-found-page.ts +++ /dev/null @@ -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` -

404

-

Page not found

- Return to Home - `; - } -} -customElements.define('not-found-page', NotFoundPage); \ No newline at end of file diff --git a/flightscore/tsconfig.json b/flightscore/tsconfig.json index 1b43085..b9b8a27 100644 --- a/flightscore/tsconfig.json +++ b/flightscore/tsconfig.json @@ -1,20 +1,25 @@ { "compilerOptions": { + "forceConsistentCasingInFileNames": true, "target": "ES2022", "experimentalDecorators": true, "useDefineForClassFields": false, "module": "ESNext", - "lib": ["ES2022", "DOM", "DOM.Iterable"], - "types": ["vite/client"], + "lib": [ + "ES2022", + "DOM", + "DOM.Iterable" + ], + "types": [ + "vite/client" + ], "skipLibCheck": true, - /* Bundler mode */ "moduleResolution": "bundler", "allowImportingTsExtensions": true, "verbatimModuleSyntax": true, "moduleDetection": "force", "noEmit": true, - /* Linting */ "strict": true, "noUnusedLocals": true, @@ -23,5 +28,7 @@ "noFallthroughCasesInSwitch": true, "noUncheckedSideEffectImports": true }, - "include": ["src"] -} + "include": [ + "src" + ] +} \ No newline at end of file