Reworked homepage
This commit is contained in:
CodingPhoenixx
@@ -1,12 +1,635 @@
|
||||
import { LitElement, html } from 'lit';
|
||||
import { LitElement, html, css } from 'lit';
|
||||
import { customElement } from 'lit/decorators.js';
|
||||
import '../components/ui-card';
|
||||
import '../components/ui-button';
|
||||
import '../components/ui-link';
|
||||
|
||||
@customElement('home-page')
|
||||
export class HomePage extends LitElement {
|
||||
static styles = css`
|
||||
:host {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 5rem 1.5rem 4rem;
|
||||
background:
|
||||
radial-gradient(
|
||||
ellipse at 40% 0%,
|
||||
color-mix(in srgb, var(--color-accent) 18%, transparent) 0%,
|
||||
transparent 55%
|
||||
),
|
||||
radial-gradient(
|
||||
ellipse at 80% 60%,
|
||||
color-mix(in srgb, var(--color-accent) 8%, transparent) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
var(--color-bg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
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;
|
||||
font-size: clamp(2.2rem, 5vw, 3.5rem);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.03em;
|
||||
line-height: 1.1;
|
||||
color: var(--color-text);
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.hero h1 span {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--color-accent),
|
||||
color-mix(in srgb, var(--color-accent) 60%, transparent)
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
margin: 1.25rem 0 2rem;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.65;
|
||||
color: color-mix(in srgb, var(--color-text) 60%, transparent);
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
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;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
section + section {
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-accent);
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
margin: 0 0 2.5rem;
|
||||
font-size: 0.95rem;
|
||||
color: color-mix(in srgb, var(--color-text) 55%, transparent);
|
||||
max-width: 520px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
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;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.comp-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.25rem;
|
||||
background: var(--color-bg-nav);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.25rem 1.5rem;
|
||||
transition: border-color 0.25s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.comp-row:hover {
|
||||
border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
|
||||
}
|
||||
|
||||
.comp-date {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 3.5rem;
|
||||
padding: 0.5rem 0.65rem;
|
||||
background: color-mix(in srgb, var(--color-accent) 10%, transparent);
|
||||
border-radius: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.comp-date-day {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 800;
|
||||
color: var(--color-accent);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.comp-date-month {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--color-accent);
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
|
||||
.comp-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.comp-name {
|
||||
font-size: 1rem;
|
||||
font-weight: 650;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.comp-location {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
font-size: 0.82rem;
|
||||
color: color-mix(in srgb, var(--color-text) 50%, transparent);
|
||||
}
|
||||
|
||||
.comp-location svg {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
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;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 3rem 1.25rem;
|
||||
}
|
||||
|
||||
.comp-row {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.comp-badge {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
private navigate(path: string) {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('nav', {
|
||||
detail: { path },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<h1>Welcome to the Balloon Tracker</h1>
|
||||
<p>Analyze your tracks visually.</p>
|
||||
<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">
|
||||
<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>
|
||||
<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.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<ui-button @click=${() => this.navigate('/competitions')}>
|
||||
Browse competitions
|
||||
</ui-button>
|
||||
<button
|
||||
class="btn-secondary"
|
||||
@click=${() => this.navigate('/register')}
|
||||
>
|
||||
Create account
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<p class="section-label">At a glance</p>
|
||||
<h2 class="section-title">Platform in numbers</h2>
|
||||
<p class="section-desc">
|
||||
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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p class="section-label">Features</p>
|
||||
<h2 class="section-title">Built for balloon events</h2>
|
||||
<p class="section-desc">
|
||||
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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p class="section-label">Competitions</p>
|
||||
<h2 class="section-title">Upcoming and recent events</h2>
|
||||
<p class="section-desc">
|
||||
Discover balloon competitions scored with FlightScore.
|
||||
</p>
|
||||
<div class="competitions-list">
|
||||
<div
|
||||
class="comp-row"
|
||||
@click=${() => this.navigate('/competitions/1')}
|
||||
>
|
||||
<div class="comp-date">
|
||||
<span class="comp-date-day">18</span>
|
||||
<span class="comp-date-month">Mar</span>
|
||||
</div>
|
||||
<div class="comp-info">
|
||||
<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" />
|
||||
<circle cx="12" cy="10" r="3" />
|
||||
</svg>
|
||||
Salzburg, Austria
|
||||
</span>
|
||||
</div>
|
||||
<span class="comp-badge upcoming">Upcoming</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="comp-row"
|
||||
@click=${() => this.navigate('/competitions/2')}
|
||||
>
|
||||
<div class="comp-date">
|
||||
<span class="comp-date-day">14</span>
|
||||
<span class="comp-date-month">Feb</span>
|
||||
</div>
|
||||
<div class="comp-info">
|
||||
<span class="comp-name">Cappadocia Open 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" />
|
||||
<circle cx="12" cy="10" r="3" />
|
||||
</svg>
|
||||
Goreme, Turkey
|
||||
</span>
|
||||
</div>
|
||||
<span class="comp-badge live">Live</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="comp-row"
|
||||
@click=${() => this.navigate('/competitions/3')}
|
||||
>
|
||||
<div class="comp-date">
|
||||
<span class="comp-date-day">02</span>
|
||||
<span class="comp-date-month">Feb</span>
|
||||
</div>
|
||||
<div class="comp-info">
|
||||
<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" />
|
||||
<circle cx="12" cy="10" r="3" />
|
||||
</svg>
|
||||
New Mexico, USA
|
||||
</span>
|
||||
</div>
|
||||
<span class="comp-badge ended">Ended</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="comp-row"
|
||||
@click=${() => this.navigate('/competitions/4')}
|
||||
>
|
||||
<div class="comp-date">
|
||||
<span class="comp-date-day">11</span>
|
||||
<span class="comp-date-month">Jan</span>
|
||||
</div>
|
||||
<div class="comp-info">
|
||||
<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" />
|
||||
<circle cx="12" cy="10" r="3" />
|
||||
</svg>
|
||||
Chateau-d'Oex, Switzerland
|
||||
</span>
|
||||
</div>
|
||||
<span class="comp-badge ended">Ended</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
`;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user