From 49bf7522b9ab876416f1b60a44db4fb670de05f3 Mon Sep 17 00:00:00 2001 From: CodingPhoenixx Date: Thu, 12 Feb 2026 14:42:45 +0100 Subject: [PATCH] added some base code --- flightscore/public/logo.svg | 2 +- flightscore/src/app-root.ts | 3 + flightscore/src/assets/lit.svg | 1 - flightscore/src/components/footer-bar.css | 46 ++++++++++++++ flightscore/src/components/footer-bar.ts | 25 ++++++++ flightscore/src/components/nav-bar.css | 74 +++++++++++++++++++++++ flightscore/src/components/nav-bar.ts | 67 ++++++++++---------- flightscore/src/main.ts | 1 + flightscore/src/pages/competitions.ts | 0 flightscore/src/pages/not-found-page.ts | 12 ++++ flightscore/src/router/router.ts | 1 + flightscore/src/styles/global.css | 13 ---- flightscore/src/styles/theme.css | 37 ++++++++++++ 13 files changed, 236 insertions(+), 46 deletions(-) delete mode 100644 flightscore/src/assets/lit.svg create mode 100644 flightscore/src/components/footer-bar.css create mode 100644 flightscore/src/components/footer-bar.ts create mode 100644 flightscore/src/components/nav-bar.css create mode 100644 flightscore/src/pages/competitions.ts create mode 100644 flightscore/src/pages/not-found-page.ts delete mode 100644 flightscore/src/styles/global.css create mode 100644 flightscore/src/styles/theme.css diff --git a/flightscore/public/logo.svg b/flightscore/public/logo.svg index 9dfcfff..893eebc 100644 --- a/flightscore/public/logo.svg +++ b/flightscore/public/logo.svg @@ -1,4 +1,4 @@ - + + `; } } \ No newline at end of file diff --git a/flightscore/src/assets/lit.svg b/flightscore/src/assets/lit.svg deleted file mode 100644 index 4a9c1fe..0000000 --- a/flightscore/src/assets/lit.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/flightscore/src/components/footer-bar.css b/flightscore/src/components/footer-bar.css new file mode 100644 index 0000000..fd4e595 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/flightscore/src/components/footer-bar.ts b/flightscore/src/components/footer-bar.ts new file mode 100644 index 0000000..043c6f4 --- /dev/null +++ b/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` +
+
+ e.preventDefault()}>Privacy + e.preventDefault()}>Imprint + e.preventDefault()}>Contact +
+
+ © ${year} Jan Meinl +
+ + `; + } +} \ No newline at end of file diff --git a/flightscore/src/components/nav-bar.css b/flightscore/src/components/nav-bar.css new file mode 100644 index 0000000..228e068 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/flightscore/src/components/nav-bar.ts b/flightscore/src/components/nav-bar.ts index 14e8404..6a77c32 100644 --- a/flightscore/src/components/nav-bar.ts +++ b/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` `; - } + } } \ No newline at end of file diff --git a/flightscore/src/main.ts b/flightscore/src/main.ts index c819a0a..8728dc3 100644 --- a/flightscore/src/main.ts +++ b/flightscore/src/main.ts @@ -1 +1,2 @@ +import './styles/theme.css'; import './app-root'; \ No newline at end of file diff --git a/flightscore/src/pages/competitions.ts b/flightscore/src/pages/competitions.ts new file mode 100644 index 0000000..e69de29 diff --git a/flightscore/src/pages/not-found-page.ts b/flightscore/src/pages/not-found-page.ts new file mode 100644 index 0000000..ef10922 --- /dev/null +++ b/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` +

404 Not Found

+

How did you get here?

+ `; + } +} \ No newline at end of file diff --git a/flightscore/src/router/router.ts b/flightscore/src/router/router.ts index c22fc62..01a6f73 100644 --- a/flightscore/src/router/router.ts +++ b/flightscore/src/router/router.ts @@ -1,3 +1,4 @@ + export type Route = { path: string; view: () => HTMLElement; diff --git a/flightscore/src/styles/global.css b/flightscore/src/styles/global.css deleted file mode 100644 index 846d586..0000000 --- a/flightscore/src/styles/global.css +++ /dev/null @@ -1,13 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} -html, -body { - height: 100%; - background-color: #0a1f44; -} -a { - cursor: pointer; -} \ No newline at end of file diff --git a/flightscore/src/styles/theme.css b/flightscore/src/styles/theme.css new file mode 100644 index 0000000..12c1bd5 --- /dev/null +++ b/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; +} \ No newline at end of file