FlightScore/FlightScore-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added base code

Browse Source
This commit is contained in:
CodingPhoenixx
2026-02-12 14:06:41 +01:00
parent 4678963a22
commit a62ce26bfa
9 changed files with 144 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
flightscore/index.html
+14 -11
View File
@@ -1,18 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FlightScore</title>
<meta
name="description"
content="FlightScore – Track, analyze and elevate your aviation performance."
/>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
</head>
<body>
<div id="app"></div>
<meta name="description" content="FlightScore – Track, analyze and elevate your aviation performance." />
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
<base href="/" />
</head>
<body>
<app-root></app-root>
<script type="module" src="/src/main.ts"></script>
</body>
</body>
</html>
flightscore/public/logo.svg
+25
View File
@@ -0,0 +1,25 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 640" width="512" height="640">
<g fill="none" stroke="black" stroke-width="8" stroke-linecap="round" stroke-linejoin="round">
<path d="
M256 30
C140 30 70 130 70 240
C70 350 160 410 220 445
L232 460
L280 460
L292 445
C352 410 442 350 442 240
C442 130 372 30 256 30Z
"/>
<path d="M200 38 C180 120 172 200 178 280 C184 360 200 410 220 445"/>
<path d="M256 30 C248 120 246 200 248 280 C250 360 253 410 256 460"/>
<path d="M312 38 C332 120 340 200 334 280 C328 360 312 410 292 445"/>
<line x1="232" y1="460" x2="238" y2="520"/>
<line x1="280" y1="460" x2="274" y2="520"/>
<rect x="228" y="520" width="56" height="40" rx="4"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 779 B

flightscore/src/app-root.ts
+28
View File
@@ -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
+47
View File
@@ -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
View File
@@ -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
+12
View File
@@ -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
-76
View File
@@ -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
-41
View File
@@ -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);
flightscore/tsconfig.json
+12 -5
View File
@@ -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"
]
}