diff --git a/flightscore/src/components/icon-card.ts b/flightscore/src/components/icon-card.ts index 61142c5..8574865 100644 --- a/flightscore/src/components/icon-card.ts +++ b/flightscore/src/components/icon-card.ts @@ -69,7 +69,7 @@ export class IconCard extends LitElement { return html`
- +

${this.heading}

${this.description}

diff --git a/flightscore/src/components/icons.ts b/flightscore/src/components/icons.ts new file mode 100644 index 0000000..2c0cd61 --- /dev/null +++ b/flightscore/src/components/icons.ts @@ -0,0 +1,27 @@ +import { html, type TemplateResult } from "lit"; + +export class Icons { + public static icons: Record = { + calendar: html``, + globe: html``, + trophy: html``, + target: html``, + clipboard: html``, + users: html``, + user: html``, + home: html``, + mail: html``, + desktop: html``, + tools: html``, + map_pin: html``, + clock: html``, + table: html``, + calculator: html``, + chart_pie: html``, + gear: html``, + document: html``, + document_text: html``, + bin: html``, + stack: html``, + }; +} diff --git a/flightscore/src/components/ui-badge.ts b/flightscore/src/components/ui-badge.ts index 7d8172e..5b15ece 100644 --- a/flightscore/src/components/ui-badge.ts +++ b/flightscore/src/components/ui-badge.ts @@ -32,17 +32,30 @@ export class UiBadge extends LitElement { flex-shrink: 0; } - .icon ::slotted(svg) { + .icon ::slotted(*) { + display: inline-flex; width: 0.85rem; height: 0.85rem; } + .icon ::slotted(svg), + .icon ::slotted(* > svg) { + width: 0.85rem; + height: 0.85rem; + } + .label { display: inline-flex; align-items: center; padding-top: 0.05em; } + .badge.white { + color: #ffffff; + background: color-mix(in srgb, #ffffff 10%, transparent); + border-color: color-mix(in srgb, #ffffff 25%, transparent); + } + .badge.accent { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); diff --git a/flightscore/src/components/ui-tab-bar.ts b/flightscore/src/components/ui-tab-bar.ts index d3c636a..e96fa17 100644 --- a/flightscore/src/components/ui-tab-bar.ts +++ b/flightscore/src/components/ui-tab-bar.ts @@ -1,6 +1,7 @@ // components/ui-tab-bar.ts import { LitElement, html, css } from "lit"; import { customElement, property } from "lit/decorators.js"; +import { Icons } from "./icons"; export interface Tab { id: string; @@ -73,14 +74,7 @@ export class UiTabBar extends LitElement { @property({ type: Array }) tabs: Tab[] = []; @property() active = ""; - private icons: Record = { - calendar: html``, - trophy: html``, - target: html``, - clipboard: html``, - users: html``, - user: html``, - }; + private handleClick(id: string) { this.dispatchEvent( @@ -101,7 +95,7 @@ export class UiTabBar extends LitElement { class="tab ${this.active === t.id ? "active" : ""}" @click=${() => this.handleClick(t.id)} > - ${t.icon ? this.icons[t.icon] ?? html`` : html``} + ${t.icon ? Icons.icons[t.icon] ?? html`` : html``} ${t.label} ` diff --git a/flightscore/src/pages/competition/competition-page.ts b/flightscore/src/pages/competition/competition-page.ts index 50f4f8c..aa42352 100644 --- a/flightscore/src/pages/competition/competition-page.ts +++ b/flightscore/src/pages/competition/competition-page.ts @@ -3,6 +3,8 @@ import { LitElement, html, css, nothing } from "lit"; import { customElement, state } from "lit/decorators.js"; import type { Tab } from "../../components/ui-tab-bar.js"; import "../../components/ui-tab-bar.js"; +import "../../components/ui-badge.js"; +import { Icons } from "../../components/icons.js"; const TAB_LOADERS: Record Promise> = { details: () => import("./tabs/competition-details.js"), @@ -31,7 +33,10 @@ export class CompetitionPage extends LitElement { static styles = css` :host { display: block; - font-family: system-ui, -apple-system, sans-serif; + font-family: + system-ui, + -apple-system, + sans-serif; color: var(--color-text); background: var(--color-bg); min-height: 100vh; @@ -194,56 +199,20 @@ export class CompetitionPage extends LitElement { / Competitions / - 22. Schweizermeisterschaften Heissluftballon / Swiss - Cup + EVENT_NAME
-

- 22. Schweizermeisterschaften Heissluftballon / Swiss Cup -

+

EVENT_NAME

- - - - - Langenthal / BE, Switzerland + ${Icons.icons.map_pin} COMPETITION_LOCATION
- - - - 13 – 17 May 2026 + ${Icons.icons.calendar} DATE_FROM_UNTIL_SHORT
- CAT2 - Upcoming + EVENT_TYPE + EVENT_STATUS
@@ -257,4 +226,4 @@ export class CompetitionPage extends LitElement {
${this.renderTabContent()}
`; } -} \ No newline at end of file +} diff --git a/flightscore/src/pages/competition/tabs/competition-details.ts b/flightscore/src/pages/competition/tabs/competition-details.ts index eb4cbfd..55515ef 100644 --- a/flightscore/src/pages/competition/tabs/competition-details.ts +++ b/flightscore/src/pages/competition/tabs/competition-details.ts @@ -1,6 +1,7 @@ // tabs/competition-details.ts import { LitElement, html, css } from "lit"; import { customElement } from "lit/decorators.js"; +import { Icons } from "../../../components/icons"; @customElement("competition-details") export class CompetitionDetails extends LitElement { @@ -131,76 +132,52 @@ export class CompetitionDetails extends LitElement {
-
13 May 2026 – 17 May 2026
+
DATE_FROM – DATE_UNTIL
- Schweizermeisterschaften 2026 - Open Swiss Nationals & Swiss Cup - Location: Berufsfachschule BZL Langenthal - Official announcement can be found in the - ENB - Registration via - https://www.smhl.ch/de/registration + COMPETITION_DETAILS
- -
- - - - -
- + ${Icons.icons.tools} Competition Details
- - Director: Claude Weber + ${Icons.icons.user} + Director: DIRECTOR_NAME
- - FAI sanctioned – CAT2 / CIA Sporting event + ${Icons.icons.globe} + EVENT_TYPE [National, Continental] (CAT 1 | CAT 2)
- - Combined Logger/Marker Event + ${Icons.icons.desktop} + LOGGER_TYPE [Combined Logger, Marker Event]
- + ${Icons.icons.mail} Contact Details
- - Werner BEYELER + ${Icons.icons.user} + ORGANISATOR_NAME
- - Website + ${Icons.icons.home} + COMPETITION_WEBSITE
- - bewerner@bluewin.ch + ${Icons.icons.mail} + CONTACT_EMAIL
diff --git a/flightscore/src/pages/home-page.ts b/flightscore/src/pages/home-page.ts index 216450f..c5395ba 100644 --- a/flightscore/src/pages/home-page.ts +++ b/flightscore/src/pages/home-page.ts @@ -1,14 +1,15 @@ // pages/home/home-page.ts (updated) -import { LitElement, html, css } from 'lit'; -import { customElement } from 'lit/decorators.js'; -import '../components/ui-button'; -import '../components/ui-button-secondary'; -import '../components/ui-badge'; -import '../components/stat-card'; -import '../components/icon-card'; -import '../components/ui-link'; +import { LitElement, html, css } from "lit"; +import { customElement } from "lit/decorators.js"; +import "../components/ui-button"; +import "../components/ui-button-secondary"; +import "../components/ui-badge"; +import "../components/stat-card"; +import "../components/icon-card"; +import "../components/ui-link"; +import { Icons } from "../components/icons"; -@customElement('home-page') +@customElement("home-page") export class HomePage extends LitElement { static styles = css` :host { @@ -40,7 +41,7 @@ export class HomePage extends LitElement { } .hero::after { - content: ''; + content: ""; position: absolute; bottom: 0; left: 0; @@ -152,11 +153,7 @@ export class HomePage extends LitElement { } .comp-row:hover { - border-color: color-mix( - in srgb, - var(--color-accent) 40%, - transparent - ); + border-color: color-mix(in srgb, var(--color-accent) 40%, transparent); } .comp-date { @@ -165,11 +162,7 @@ export class HomePage extends LitElement { align-items: center; min-width: 3.5rem; padding: 0.5rem 0.65rem; - background: color-mix( - in srgb, - var(--color-accent) 10%, - transparent - ); + background: color-mix(in srgb, var(--color-accent) 10%, transparent); border-radius: 0.5rem; flex-shrink: 0; } @@ -235,11 +228,11 @@ export class HomePage extends LitElement { private navigate(path: string) { this.dispatchEvent( - new CustomEvent('nav', { + new CustomEvent("nav", { detail: { path }, bubbles: true, composed: true, - }) + }), ); } @@ -247,25 +240,19 @@ export class HomePage extends LitElement { return html`
- - - - - + ${Icons.icons.stack} Live Scoring Platform

Transparent scoring for balloon competitions

- Track tasks, manage participants, and deliver real-time - results for hot air balloon competitions worldwide. + Track tasks, manage participants, and deliver real-time results for + hot air balloon competitions worldwide.

- this.navigate('/competitions')}> + this.navigate("/competitions")}> Browse competitions - this.navigate('/register')} - > + this.navigate("/register")}> Create account
@@ -280,10 +267,7 @@ export class HomePage extends LitElement {
- +
@@ -297,65 +281,39 @@ export class HomePage extends LitElement {
- - - - + ${Icons.icons.clock} - - - - - - - + ${Icons.icons.document_text} - - - - - - + ${Icons.icons.users} - - - - - - + ${Icons.icons.desktop} - - - - + ${Icons.icons.map_pin} - - - - - + ${Icons.icons.table}
@@ -369,22 +327,16 @@ export class HomePage extends LitElement {
this.navigate('/competitions/1')} + @click=${() => this.navigate("/competitions/1")} >
18 Mar
- - European Balloon Challenge 2026 - + European Balloon Challenge 2026 - - - - - Salzburg, Austria + ${Icons.icons.map_pin} Salzburg, Austria
Upcoming @@ -392,7 +344,7 @@ export class HomePage extends LitElement {
this.navigate('/competitions/2')} + @click=${() => this.navigate("/competitions/2")} >
14 @@ -401,11 +353,7 @@ export class HomePage extends LitElement {
Cappadocia Open 2026 - - - - - Goreme, Turkey + ${Icons.icons.map_pin} Goreme, Turkey
Live @@ -413,22 +361,16 @@ export class HomePage extends LitElement {
this.navigate('/competitions/3')} + @click=${() => this.navigate("/competitions/3")} >
02 Feb
- - Albuquerque Winter Fiesta - + Albuquerque Winter Fiesta - - - - - New Mexico, USA + ${Icons.icons.map_pin} New Mexico, USA
Ended @@ -436,22 +378,16 @@ export class HomePage extends LitElement {
this.navigate('/competitions/4')} + @click=${() => this.navigate("/competitions/4")} >
11 Jan
- - Swiss Alpine Balloon Trophy - + Swiss Alpine Balloon Trophy - - - - - Chateau-d'Oex, Switzerland + ${Icons.icons.map_pin} Chateau-d'Oex, Switzerland
Canceled @@ -460,4 +396,4 @@ export class HomePage extends LitElement { `; } -} \ No newline at end of file +}