Added new Base-Components
This commit is contained in:
CodingPhoenixx
@@ -0,0 +1,79 @@
|
||||
// components/icon-card.ts
|
||||
import { LitElement, html, css } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
|
||||
@customElement('icon-card')
|
||||
export class IconCard extends LitElement {
|
||||
static styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--color-bg-nav);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
transition: border-color 0.25s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
var(--color-accent) 40%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 0.5rem;
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--color-accent) 10%,
|
||||
transparent
|
||||
);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
::slotted(svg) {
|
||||
width: 1.15rem;
|
||||
height: 1.15rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 650;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
color: color-mix(in srgb, var(--color-text) 55%, transparent);
|
||||
}
|
||||
`;
|
||||
|
||||
@property() heading = '';
|
||||
@property() description = '';
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div class="card">
|
||||
<div class="icon">
|
||||
<slot name="icon"></slot>
|
||||
</div>
|
||||
<h3>${this.heading}</h3>
|
||||
<p>${this.description}</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
// components/stat-card.ts
|
||||
import { LitElement, html, css } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
|
||||
@customElement('stat-card')
|
||||
export class StatCard extends LitElement {
|
||||
static styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--color-bg-nav);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
transition: border-color 0.25s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
var(--color-accent) 40%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.03em;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 0.85rem;
|
||||
color: color-mix(in srgb, var(--color-text) 55%, transparent);
|
||||
font-weight: 500;
|
||||
}
|
||||
`;
|
||||
|
||||
@property() value = '';
|
||||
@property() label = '';
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div class="card">
|
||||
<span class="value">${this.value}</span>
|
||||
<span class="label">${this.label}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
// components/ui-badge.ts
|
||||
import { LitElement, html, css } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
|
||||
export type BadgeVariant = 'accent' | 'success' | 'warning' | 'muted' | 'error';
|
||||
|
||||
@customElement('ui-badge')
|
||||
export class UiBadge extends LitElement {
|
||||
static styles = css`
|
||||
:host {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.3rem 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.03em;
|
||||
text-transform: uppercase;
|
||||
border-radius: 2rem;
|
||||
border: 1px solid transparent;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.badge.accent {
|
||||
color: var(--color-accent);
|
||||
background: color-mix(in srgb, var(--color-accent) 10%, transparent);
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
var(--color-accent) 25%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.badge.success {
|
||||
color: #30a46c;
|
||||
background: color-mix(in srgb, #30a46c 10%, transparent);
|
||||
border-color: color-mix(in srgb, #30a46c 25%, transparent);
|
||||
}
|
||||
|
||||
.badge.warning {
|
||||
color: #e79d13;
|
||||
background: color-mix(in srgb, #e79d13 10%, transparent);
|
||||
border-color: color-mix(in srgb, #e79d13 25%, transparent);
|
||||
}
|
||||
|
||||
.badge.muted {
|
||||
color: color-mix(in srgb, var(--color-text) 45%, transparent);
|
||||
background: color-mix(in srgb, var(--color-text) 6%, transparent);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.badge.error {
|
||||
color: #e5484d;
|
||||
background: color-mix(in srgb, #e5484d 10%, transparent);
|
||||
border-color: color-mix(in srgb, #e5484d 25%, transparent);
|
||||
}
|
||||
|
||||
|
||||
::slotted(svg) {
|
||||
width: 0.85rem;
|
||||
height: 0.85rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
@property() variant: BadgeVariant = 'accent';
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<span class="badge ${this.variant}">
|
||||
<slot></slot>
|
||||
</span>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
// components/ui-button-secondary.ts
|
||||
import { LitElement, html, css } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
|
||||
@customElement('ui-button-secondary')
|
||||
export class UiButtonSecondary extends LitElement {
|
||||
static styles = css`
|
||||
:host {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
:host([full]) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
:host([full]) button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.45rem;
|
||||
padding: 0.65rem 1.25rem;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
border-color 0.25s ease,
|
||||
color 0.25s ease,
|
||||
background 0.25s ease,
|
||||
transform 0.15s ease;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
border-color: var(--color-accent);
|
||||
color: var(--color-accent);
|
||||
background: color-mix(in srgb, var(--color-accent) 6%, transparent);
|
||||
}
|
||||
|
||||
button:active:not(:disabled) {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
::slotted(svg) {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
@property({ type: Boolean }) disabled = false;
|
||||
@property({ type: Boolean, reflect: true }) full = false;
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<button ?disabled=${this.disabled}>
|
||||
<slot></slot>
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
}
|
||||
+105
-277
@@ -1,7 +1,11 @@
|
||||
// pages/home/home-page.ts (updated)
|
||||
import { LitElement, html, css } from 'lit';
|
||||
import { customElement } from 'lit/decorators.js';
|
||||
import '../components/ui-card';
|
||||
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';
|
||||
|
||||
@customElement('home-page')
|
||||
@@ -45,29 +49,8 @@ export class HomePage extends LitElement {
|
||||
background: var(--color-border);
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.35rem 0.85rem;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.03em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-accent);
|
||||
background: color-mix(in srgb, var(--color-accent) 10%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
|
||||
border-radius: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.hero-badge svg {
|
||||
width: 0.85rem;
|
||||
height: 0.85rem;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
margin: 0;
|
||||
margin: 1.5rem 0 0;
|
||||
font-size: clamp(2.2rem, 5vw, 3.5rem);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.03em;
|
||||
@@ -102,30 +85,6 @@ export class HomePage extends LitElement {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.65rem 1.25rem;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
border-color 0.25s ease,
|
||||
color 0.25s ease,
|
||||
background 0.25s ease;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
border-color: var(--color-accent);
|
||||
color: var(--color-accent);
|
||||
background: color-mix(in srgb, var(--color-accent) 6%, transparent);
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 4rem 1.5rem;
|
||||
max-width: 1100px;
|
||||
@@ -168,84 +127,12 @@ export class HomePage extends LitElement {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--color-bg-nav);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
transition: border-color 0.25s ease;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.03em;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.85rem;
|
||||
color: color-mix(in srgb, var(--color-text) 55%, transparent);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: var(--color-bg-nav);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
transition: border-color 0.25s ease;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 0.5rem;
|
||||
background: color-mix(in srgb, var(--color-accent) 10%, transparent);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.feature-icon svg {
|
||||
width: 1.15rem;
|
||||
height: 1.15rem;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 650;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
color: color-mix(in srgb, var(--color-text) 55%, transparent);
|
||||
}
|
||||
|
||||
.competitions-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -265,7 +152,11 @@ 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 {
|
||||
@@ -274,7 +165,11 @@ 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;
|
||||
}
|
||||
@@ -322,35 +217,6 @@ export class HomePage extends LitElement {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.comp-badge {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.03em;
|
||||
text-transform: uppercase;
|
||||
padding: 0.3rem 0.7rem;
|
||||
border-radius: 2rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.comp-badge.upcoming {
|
||||
color: var(--color-accent);
|
||||
background: color-mix(in srgb, var(--color-accent) 10%, transparent);
|
||||
border: 1px solid
|
||||
color-mix(in srgb, var(--color-accent) 25%, transparent);
|
||||
}
|
||||
|
||||
.comp-badge.live {
|
||||
color: #30a46c;
|
||||
background: color-mix(in srgb, #30a46c 10%, transparent);
|
||||
border: 1px solid color-mix(in srgb, #30a46c 25%, transparent);
|
||||
}
|
||||
|
||||
.comp-badge.ended {
|
||||
color: color-mix(in srgb, var(--color-text) 45%, transparent);
|
||||
background: color-mix(in srgb, var(--color-text) 6%, transparent);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.hero {
|
||||
padding: 3.5rem 1.25rem 3rem;
|
||||
@@ -364,10 +230,6 @@ export class HomePage extends LitElement {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.comp-badge {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -384,29 +246,28 @@ export class HomePage extends LitElement {
|
||||
render() {
|
||||
return html`
|
||||
<div class="hero">
|
||||
<div class="hero-badge">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<ui-badge variant="accent">
|
||||
<svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5z" />
|
||||
<path d="M2 17l10 5 10-5" />
|
||||
<path d="M2 12l10 5 10-5" />
|
||||
</svg>
|
||||
Live Scoring Platform
|
||||
</div>
|
||||
</ui-badge>
|
||||
<h1>Precision scoring for <span>balloon competitions</span></h1>
|
||||
<p class="hero-sub">
|
||||
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.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<ui-button @click=${() => this.navigate('/competitions')}>
|
||||
Browse competitions
|
||||
</ui-button>
|
||||
<button
|
||||
class="btn-secondary"
|
||||
<ui-button-secondary
|
||||
@click=${() => this.navigate('/register')}
|
||||
>
|
||||
Create account
|
||||
</button>
|
||||
</ui-button-secondary>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -417,22 +278,13 @@ export class HomePage extends LitElement {
|
||||
FlightScore powers balloon competitions across the globe.
|
||||
</p>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<span class="stat-value">42</span>
|
||||
<span class="stat-label">Competitions scored</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-value">318</span>
|
||||
<span class="stat-label">Registered pilots</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-value">1,240</span>
|
||||
<span class="stat-label">Tasks completed</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-value">12</span>
|
||||
<span class="stat-label">Countries</span>
|
||||
</div>
|
||||
<stat-card value="42" label="Competitions scored"></stat-card>
|
||||
<stat-card value="318" label="Registered pilots"></stat-card>
|
||||
<stat-card
|
||||
value="1,240"
|
||||
label="Tasks completed"
|
||||
></stat-card>
|
||||
<stat-card value="12" label="Countries"></stat-card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -443,92 +295,68 @@ export class HomePage extends LitElement {
|
||||
Everything organizers, judges, and pilots need in one place.
|
||||
</p>
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<polyline points="12 6 12 12 16 14" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Real-Time Scoring</h3>
|
||||
<p>
|
||||
Scores update live as judges submit results. Pilots and
|
||||
spectators always see the latest standings.
|
||||
</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
|
||||
<polyline points="14 2 14 8 20 8" />
|
||||
<line x1="16" y1="13" x2="8" y2="13" />
|
||||
<line x1="16" y1="17" x2="8" y2="17" />
|
||||
<polyline points="10 9 9 9 8 9" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Task Management</h3>
|
||||
<p>
|
||||
Define and manage competition tasks with support for all
|
||||
standard ballooning task types.
|
||||
</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
|
||||
<circle cx="9" cy="7" r="4" />
|
||||
<path d="M23 21v-2a4 4 0 00-3-3.87" />
|
||||
<path d="M16 3.13a4 4 0 010 7.75" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Pilot Profiles</h3>
|
||||
<p>
|
||||
Every pilot gets a profile with competition history,
|
||||
rankings, and performance statistics.
|
||||
</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="1" y="3" width="15" height="13" rx="2" ry="2" />
|
||||
<path d="M16 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2" />
|
||||
<line x1="8" y1="21" x2="8" y2="16" />
|
||||
<line x1="4" y1="21" x2="12" y2="21" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Live Leaderboard</h3>
|
||||
<p>
|
||||
Public leaderboards let spectators follow the action
|
||||
from anywhere in the world.
|
||||
</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
|
||||
<circle cx="12" cy="10" r="3" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3>GPS Integration</h3>
|
||||
<p>
|
||||
Import GPS tracks and calculate distances to targets
|
||||
automatically for precise scoring.
|
||||
</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
|
||||
<line x1="3" y1="9" x2="21" y2="9" />
|
||||
<line x1="9" y1="21" x2="9" y2="9" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Result Export</h3>
|
||||
<p>
|
||||
Export final standings and detailed score sheets as PDF
|
||||
or CSV for official records.
|
||||
</p>
|
||||
</div>
|
||||
<icon-card
|
||||
heading="Real-Time Scoring"
|
||||
description="Scores update live as judges submit results. Pilots and spectators always see the latest standings."
|
||||
>
|
||||
<svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<polyline points="12 6 12 12 16 14" />
|
||||
</svg>
|
||||
</icon-card>
|
||||
<icon-card
|
||||
heading="Task Management"
|
||||
description="Define and manage competition tasks with support for all standard ballooning task types."
|
||||
>
|
||||
<svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
|
||||
<polyline points="14 2 14 8 20 8" />
|
||||
<line x1="16" y1="13" x2="8" y2="13" />
|
||||
<line x1="16" y1="17" x2="8" y2="17" />
|
||||
<polyline points="10 9 9 9 8 9" />
|
||||
</svg>
|
||||
</icon-card>
|
||||
<icon-card
|
||||
heading="Pilot Profiles"
|
||||
description="Every pilot gets a profile with competition history, rankings, and performance statistics."
|
||||
>
|
||||
<svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
|
||||
<circle cx="9" cy="7" r="4" />
|
||||
<path d="M23 21v-2a4 4 0 00-3-3.87" />
|
||||
<path d="M16 3.13a4 4 0 010 7.75" />
|
||||
</svg>
|
||||
</icon-card>
|
||||
<icon-card
|
||||
heading="Live Leaderboard"
|
||||
description="Public leaderboards let spectators follow the action from anywhere in the world."
|
||||
>
|
||||
<svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="1" y="3" width="15" height="13" rx="2" ry="2" />
|
||||
<path d="M16 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2" />
|
||||
<line x1="8" y1="21" x2="8" y2="16" />
|
||||
<line x1="4" y1="21" x2="12" y2="21" />
|
||||
</svg>
|
||||
</icon-card>
|
||||
<icon-card
|
||||
heading="GPS Integration"
|
||||
description="Import GPS tracks and calculate distances to targets automatically for precise scoring."
|
||||
>
|
||||
<svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
|
||||
<circle cx="12" cy="10" r="3" />
|
||||
</svg>
|
||||
</icon-card>
|
||||
<icon-card
|
||||
heading="Result Export"
|
||||
description="Export final standings and detailed score sheets as PDF or CSV for official records."
|
||||
>
|
||||
<svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
|
||||
<line x1="3" y1="9" x2="21" y2="9" />
|
||||
<line x1="9" y1="21" x2="9" y2="9" />
|
||||
</svg>
|
||||
</icon-card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -548,9 +376,9 @@ export class HomePage extends LitElement {
|
||||
<span class="comp-date-month">Mar</span>
|
||||
</div>
|
||||
<div class="comp-info">
|
||||
<span class="comp-name"
|
||||
>European Balloon Challenge 2026</span
|
||||
>
|
||||
<span class="comp-name">
|
||||
European Balloon Challenge 2026
|
||||
</span>
|
||||
<span class="comp-location">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
|
||||
@@ -559,7 +387,7 @@ export class HomePage extends LitElement {
|
||||
Salzburg, Austria
|
||||
</span>
|
||||
</div>
|
||||
<span class="comp-badge upcoming">Upcoming</span>
|
||||
<ui-badge variant="accent">Upcoming</ui-badge>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@@ -580,7 +408,7 @@ export class HomePage extends LitElement {
|
||||
Goreme, Turkey
|
||||
</span>
|
||||
</div>
|
||||
<span class="comp-badge live">Live</span>
|
||||
<ui-badge variant="success">Live</ui-badge>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@@ -592,9 +420,9 @@ export class HomePage extends LitElement {
|
||||
<span class="comp-date-month">Feb</span>
|
||||
</div>
|
||||
<div class="comp-info">
|
||||
<span class="comp-name"
|
||||
>Albuquerque Winter Fiesta</span
|
||||
>
|
||||
<span class="comp-name">
|
||||
Albuquerque Winter Fiesta
|
||||
</span>
|
||||
<span class="comp-location">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
|
||||
@@ -603,7 +431,7 @@ export class HomePage extends LitElement {
|
||||
New Mexico, USA
|
||||
</span>
|
||||
</div>
|
||||
<span class="comp-badge ended">Ended</span>
|
||||
<ui-badge variant="muted">Ended</ui-badge>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@@ -615,9 +443,9 @@ export class HomePage extends LitElement {
|
||||
<span class="comp-date-month">Jan</span>
|
||||
</div>
|
||||
<div class="comp-info">
|
||||
<span class="comp-name"
|
||||
>Swiss Alpine Balloon Trophy</span
|
||||
>
|
||||
<span class="comp-name">
|
||||
Swiss Alpine Balloon Trophy
|
||||
</span>
|
||||
<span class="comp-location">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
|
||||
@@ -626,7 +454,7 @@ export class HomePage extends LitElement {
|
||||
Chateau-d'Oex, Switzerland
|
||||
</span>
|
||||
</div>
|
||||
<span class="comp-badge ended">Ended</span>
|
||||
<ui-badge variant="error">Canceled</ui-badge>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user