kickern/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: kickern/app:ed8a280d18a9e1ed6b69544d6b6ec0ba9b307243
Branches Tags
kickern/app:develop
...
compare: kickern/app:develop
Branches Tags
kickern/app:develop
5 Commits
ed8a280d18 ... develop
Author SHA1 Message Date
arnef 662c5f1b7e feat: add customizable accent color 2026-09-10 18:59:05 +02:00
arnef e57964e9d4 feat: add bottom nav with settings 2026-09-10 17:07:34 +02:00
arnef d900e45352 fix: match detail header bg to page and use theme-aware clock 2026-09-10 15:51:24 +02:00
arnef a593e5c63a feat: add light/dark theme with settings page 2026-09-10 10:02:43 +02:00
arnef 56d9fa680c fix: hide empty standings and first-leg sections 2026-09-09 09:44:47 +02:00
22 changed files with 731 additions and 199 deletions
Expand all files Collapse all files
apps/backend/src/index.ts
+27 -26
View File
@@ -413,32 +413,33 @@ class Sportsmanager {
home: home.form, home: home.form,
away: away.form, away: away.form,
}, },
standing: Number(match.veranstaltung.tabellenwertung) standing:
? { Number(match.veranstaltung.tabellenwertung) > 0
home: { ? {
pos: Number(match.heim_team.platz), home: {
name: match.heim_team.teamname, pos: Number(match.heim_team.platz),
logo: match.heim_team.teambild, name: match.heim_team.teamname,
games: logo: match.heim_team.teambild,
match.heim_team.siege + games:
match.heim_team.unentschieden + match.heim_team.siege +
match.heim_team.niederlagen, match.heim_team.unentschieden +
points: match.heim_team.begegnungspunkte, match.heim_team.niederlagen,
diff: `${match.heim_team.spielpunkte_differenz > 0 ? "+" : ""}${match.heim_team.spielpunkte_differenz}`, points: match.heim_team.begegnungspunkte,
}, diff: `${match.heim_team.spielpunkte_differenz > 0 ? "+" : ""}${match.heim_team.spielpunkte_differenz}`,
away: { },
pos: Number(match.gast_team.platz), away: {
name: match.gast_team.teamname, pos: Number(match.gast_team.platz),
logo: match.gast_team.teambild, name: match.gast_team.teamname,
games: logo: match.gast_team.teambild,
match.gast_team.siege + games:
match.gast_team.unentschieden + match.gast_team.siege +
match.gast_team.niederlagen, match.gast_team.unentschieden +
points: match.gast_team.begegnungspunkte, match.gast_team.niederlagen,
diff: `${match.gast_team.spielpunkte_differenz > 0 ? "+" : ""}${match.gast_team.spielpunkte_differenz}`, points: match.gast_team.begegnungspunkte,
}, diff: `${match.gast_team.spielpunkte_differenz > 0 ? "+" : ""}${match.gast_team.spielpunkte_differenz}`,
} },
: undefined, }
: undefined,
firstLeg: firstLeg:
match.hinspiel && match.hinspiel &&
!( !(
apps/frontend/index.html
+40 -3
View File
@@ -1,11 +1,48 @@
<!doctype html> <!doctype html>
<html lang="en" class="bg-gray-900"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#00ff00" /> <meta name="theme-color" content="#111827" />
<title>fontend</title> <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f1f5f9" />
<title>Kickern</title>
<script>
// Apply the saved theme (light/dark/auto) before first paint to avoid a flash
// of the wrong theme. Mirrors src/stores/themeStore.ts.
(function () {
try {
var stored = localStorage.getItem("theme");
var mode =
stored === "light" || stored === "dark" || stored === "auto"
? stored
: "auto";
var dark =
mode === "dark" ||
(mode === "auto" &&
window.matchMedia("(prefers-color-scheme: dark)").matches);
var root = document.documentElement;
root.classList.toggle("dark", dark);
root.style.colorScheme = dark ? "dark" : "light";
var accent = localStorage.getItem("accent");
if (accent && /^#[0-9a-fA-F]{6}$/.test(accent)) {
var hex = accent.slice(1);
var r = parseInt(hex.slice(0, 2), 16) / 255;
var g = parseInt(hex.slice(2, 4), 16) / 255;
var b = parseInt(hex.slice(4, 6), 16) / 255;
var lin = function (c) {
return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
};
var lum = 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
root.style.setProperty("--c-accent", accent);
root.style.setProperty("--c-accent-contrast", lum > 0.45 ? "#0b1220" : "#ffffff");
}
} catch (e) {
/* ignore */
}
})();
</script>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
apps/frontend/src/App.tsx
+17 -10
View File
@@ -1,11 +1,12 @@
import { Router, Route, useNavigate, useBeforeLeave } from "@solidjs/router";
import { OverviewPage } from "./pages/Overview"; import { OverviewPage } from "./pages/Overview";
import { MatchPage } from "./pages/MatchDetails"; import { MatchPage } from "./pages/MatchDetails";
import { type ParentProps, onMount, onCleanup, createSignal } from "solid-js"; import { SettingsPage } from "./pages/Settings";
import { BottomNav } from "./components/BottomNav";
import { type ParentProps, onMount, onCleanup, createSignal, Show } from "solid-js";
function Layout(props: ParentProps) { function Layout(props: ParentProps) {
return ( return (
<div class="bg-gray-900 text-white h-dvh flex flex-col font-sans overflow-hidden select-none"> <div class="bg-app text-ink h-dvh flex flex-col font-sans overflow-hidden select-none">
{props.children} {props.children}
</div> </div>
); );
@@ -67,13 +68,19 @@ function App() {
}); });
return ( return (
<div class="bg-gray-900 text-white h-dvh flex flex-col font-sans overflow-hidden select-none"> <div class="bg-app text-ink h-dvh flex flex-col font-sans overflow-hidden select-none">
<Show when={path() === "/"}> <div class="flex-1 min-h-0 flex flex-col overflow-hidden">
<OverviewPage /> <Show when={path() === "/"}>
</Show> <OverviewPage />
<Show when={path().startsWith("/match/")}> </Show>
<MatchPage /> <Show when={path() === "/einstellungen" || path() === "/settings"}>
</Show> <SettingsPage />
</Show>
<Show when={path().startsWith("/match/")}>
<MatchPage />
</Show>
</div>
<BottomNav currentPath={path} />
</div> </div>
); );
} }
apps/frontend/src/components/BottomNav.tsx
+76
View File
@@ -0,0 +1,76 @@
interface BottomNavProps {
currentPath: () => string;
}
function HomeIcon() {
return (
<svg
class="h-6 w-6"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
viewBox="0 0 24 24"
>
<path d="M3 10.5 12 3l9 7.5" />
<path d="M5 9.5V21h5v-6h4v6h5V9.5" />
</svg>
);
}
function GearIcon() {
return (
<svg
class="h-6 w-6"
fill="none"
stroke="currentColor"
stroke-width="2"
viewBox="0 0 24 24"
>
<circle cx="12" cy="12" r="3" />
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"
/>
</svg>
);
}
export function BottomNav(props: BottomNavProps) {
const path = () => props.currentPath();
const isHome = () => path() === "/";
const isSettings = () =>
path().startsWith("/einstellungen") || path().startsWith("/settings");
return (
<nav
class="shrink-0 border-t border-line bg-surface/90 backdrop-blur-md flex"
style={{ paddingBlockEnd: "env(safe-area-inset-bottom)" }}
>
<a
href="/"
aria-label="Übersicht"
class={`flex-1 flex flex-col items-center gap-1 py-2.5 transition-colors ${
isHome() ? "text-accent" : "text-ink-muted hover:text-ink"
}`}
>
<HomeIcon />
<span class="text-[10px] font-medium">Übersicht</span>
</a>
<a
href="/einstellungen"
aria-label="Einstellungen"
class={`flex-1 flex flex-col items-center gap-1 py-2.5 transition-colors ${
isSettings() ? "text-accent" : "text-ink-muted hover:text-ink"
}`}
>
<GearIcon />
<span class="text-[10px] font-medium">Einstellungen</span>
</a>
</nav>
);
}
apps/frontend/src/components/Card.tsx
+42
View File
@@ -0,0 +1,42 @@
import { splitProps, type ParentProps, type Flow } from "solid-js";
interface CardProps extends ParentProps {
/** "default" = rounded-xl (overview tile), "section" = rounded-2xl panel (details) */
variant?: "default" | "section";
/** Subtle shadow, off by default */
shadowed?: boolean;
/** If set, render as an <a> link instead of a <div> */
href?: string;
[key: string]: any;
}
export function Card(props: CardProps) {
const [local, rest] = splitProps(props, [
"variant",
"shadowed",
"class",
"children",
"href",
]);
const base = () =>
`border border-line ${
local.variant === "section" ? "bg-surface2 rounded-2xl" : "bg-surface rounded-xl"
} ${local.shadowed ? "shadow-md" : ""} ${local.class ?? ""}`;
const children = local.children as Flow;
if (local.href) {
return (
<a {...(rest as object)} href={local.href} class={base()}>
{children}
</a>
);
}
return (
<div {...(rest as object)} class={base()}>
{children}
</div>
);
}
apps/frontend/src/components/DayTab.tsx
+3 -3
View File
@@ -22,10 +22,10 @@ export const DayTab = (props: {
onClick={local.onClick} onClick={local.onClick}
class={`flex flex-col items-center justify-center min-w-13.75 p-2 rounded-xl transition-all duration-200 ${ class={`flex flex-col items-center justify-center min-w-13.75 p-2 rounded-xl transition-all duration-200 ${
local.isActive local.isActive
? "bg-emerald-500 text-gray-900 font-bold scale-105 shadow-lg shadow-emerald-500/20" ? "bg-accent text-accent-contrast font-bold scale-105 shadow-lg shadow-accent/20"
: local.day.isToday : local.day.isToday
? "bg-gray-700 text-emerald-400 border border-emerald-500/30" ? "bg-chip text-accent border border-accent/30"
: "bg-gray-800 text-gray-400" : "bg-surface text-ink-muted"
}`} }`}
> >
<span class="text-xs uppercase tracking-wider">{local.day.weekday}</span> <span class="text-xs uppercase tracking-wider">{local.day.weekday}</span>
apps/frontend/src/components/EmptyDay.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ export const EmptyDay = (props: {
day: { dayNum: number; weekday: string }; day: { dayNum: number; weekday: string };
}) => { }) => {
return ( return (
<div class="text-center py-12 text-gray-500 bg-gray-800/30 rounded-2xl border border-dashed border-gray-700"> <div class="text-center py-12 text-ink-muted bg-surface/30 rounded-2xl border border-dashed border-line">
<p class="text-lg font-medium">Spielfrei!</p> <p class="text-lg font-medium">Spielfrei!</p>
<p class="text-sm mt-1"> <p class="text-sm mt-1">
Keine Matches am {props.day.dayNum}. {props.day.weekday} Keine Matches am {props.day.dayNum}. {props.day.weekday}
apps/frontend/src/components/Header.tsx
+3 -3
View File
@@ -7,13 +7,13 @@ type HeaderProps = ParentProps<{
}>; }>;
export const Header = (props: HeaderProps) => ( export const Header = (props: HeaderProps) => (
<header <header
class={`p-4 bg-gray-800 border-b border-gray-700 items-center sticky top-0 z-20 flex`} class={`p-4 bg-surface border-b border-line items-center sticky top-0 z-20 flex`}
> >
<div class="flex items-center w-8 h-5"> <div class="flex items-center w-8 h-5">
<Show when={props.showBackButton}> <Show when={props.showBackButton}>
<button <button
onClick={() => window.history.back()} onClick={() => window.history.back()}
class="flex items-center gap-1 text-sm text-emerald-400 hover:text-emerald-300 py-1 pr-3 z-1" class="flex items-center gap-1 text-sm text-accent hover:text-accent py-1 pr-3 z-1"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -35,7 +35,7 @@ export const Header = (props: HeaderProps) => (
</div> </div>
<h1 <h1
class="absolute inset-x-0 text-base font-boldtracking-wide text-center text-emerald-400 truncate" class="absolute inset-x-0 text-base font-boldtracking-wide text-center text-accent truncate"
onClick={props.onClickTitle} onClick={props.onClickTitle}
> >
{props.title} {props.title}
apps/frontend/src/components/ListSkeleton.tsx
+7 -7
View File
@@ -6,30 +6,30 @@ export function ListSkeleton() {
<div class=" space-y-3 animate-pulse"> <div class=" space-y-3 animate-pulse">
<div <div
style={{ "--delay": "0ms" }} style={{ "--delay": "0ms" }}
class="h-3 bg-gray-800 rounded w-1/3 mb-4 animate-skeleton-loop" class="h-3 bg-surface rounded w-1/3 mb-4 animate-skeleton-loop"
></div> ></div>
{/* Wir rendern 4 gefälschte Spiele-Karten */} {/* Wir rendern 4 gefälschte Spiele-Karten */}
<For each={[1, 2, 3, 4]}> <For each={[1, 2, 3, 4]}>
{(_, i) => ( {(_, i) => (
<div <div
class="bg-gray-800/60 p-4 rounded-xl border border-gray-700/40 shadow-md flex items-center justify-between h-[58px] animate-skeleton-loop" class="bg-surface/60 p-4 rounded-xl border border-line/40 shadow-md flex items-center justify-between h-[58px] animate-skeleton-loop"
style={{ "--delay": `${i() * 150}ms` }} style={{ "--delay": `${i() * 150}ms` }}
> >
{/* Team A (Rechtsbündig simuliert) */} {/* Team A (Rechtsbündig simuliert) */}
<div class="w-full flex justify-end pr-2 items-center gap-2"> <div class="w-full flex justify-end pr-2 items-center gap-2">
<div class="h-4 bg-gray-700 rounded w-20"></div> <div class="h-4 bg-chip rounded w-20"></div>
<div class="size-8 bg-gray-700 rounded-full" /> <div class="size-8 bg-chip rounded-full" />
</div> </div>
{/* Mittlerer Zeit-/Ergebnisblock */} {/* Mittlerer Zeit-/Ergebnisblock */}
<div class="flex justify-center"> <div class="flex justify-center">
<div class="w-16 h-7 bg-gray-950/60 rounded-lg border border-gray-700/50"></div> <div class="w-16 h-7 bg-elevated/60 rounded-lg border border-line/50"></div>
</div> </div>
{/* Team B (Linksbündig simuliert) */} {/* Team B (Linksbündig simuliert) */}
<div class="w-full flex justify-start pl-2 gap-2 items-center"> <div class="w-full flex justify-start pl-2 gap-2 items-center">
<div class="size-8 bg-gray-700 rounded-full" /> <div class="size-8 bg-chip rounded-full" />
<div class="h-4 bg-gray-700 rounded w-20"></div> <div class="h-4 bg-chip rounded w-20"></div>
</div> </div>
</div> </div>
)} )}
apps/frontend/src/components/LogoFallback.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
export const LogoFallback = () => ( export const LogoFallback = () => (
<div <div
class={`size-8 flex-shrink-0 rounded-full flex items-center justify-center border transition-colors duration-200 ${"bg-gray-800 border-gray-700 text-gray-400"}`} class={`size-8 flex-shrink-0 rounded-full flex items-center justify-center border transition-colors duration-200 ${"bg-surface border-line text-ink-muted"}`}
> >
{/* Ein sauberes, sportliches Trikot-SVG */} {/* Ein sauberes, sportliches Trikot-SVG */}
<svg <svg
apps/frontend/src/components/MatchDetailsFutureSkeleton.tsx
+33 -29
View File
@@ -1,76 +1,80 @@
import { For } from "solid-js"; import { For } from "solid-js";
import { Card } from "./Card";
export function MatchDetailsFutureSkeleton() { export function MatchDetailsFutureSkeleton() {
return ( return (
<div class="animate-pulse"> <div class="animate-pulse">
<div class="bg-gradient-to-b from-gray-800 to-gray-850 p-6 border-b border-gray-800 text-center"> <div class="bg-gradient-to-b from-surface to-surface2 p-6 border-b border-line text-center">
<div class="h-2.5 bg-gray-700 rounded w-24 mx-auto mb-4 animate-skeleton-loop" /> <div class="h-2.5 bg-chip rounded w-24 mx-auto mb-4 animate-skeleton-loop" />
<div class="flex items-center justify-between gap-4 my-2"> <div class="flex items-center justify-between gap-4 my-2">
<div class="flex-1 flex flex-col items-center gap-2 min-w-0"> <div class="flex-1 flex flex-col items-center gap-2 min-w-0">
<div <div
class="size-14 bg-gray-700 rounded-full animate-skeleton-loop" class="size-14 bg-chip rounded-full animate-skeleton-loop"
style={{ "--delay": "0ms" }} style={{ "--delay": "0ms" }}
/> />
<div class="h-3 bg-gray-700 rounded w-20" /> <div class="h-3 bg-chip rounded w-20" />
</div> </div>
<div class="flex flex-col items-center justify-center px-4 py-2 bg-gray-950/50 rounded-2xl border border-gray-800 min-w-[100px] gap-1.5"> <div class="flex flex-col items-center justify-center px-4 py-2 bg-elevated/50 rounded-2xl border border-line min-w-[100px] gap-1.5">
<div class="h-2.5 bg-gray-700 rounded w-14" /> <div class="h-2.5 bg-chip rounded w-14" />
<div class="h-5 bg-gray-700 rounded w-12" /> <div class="h-5 bg-chip rounded w-12" />
<div class="h-2 bg-gray-700 rounded w-6" /> <div class="h-2 bg-chip rounded w-6" />
</div> </div>
<div class="flex-1 flex flex-col items-center gap-2 min-w-0"> <div class="flex-1 flex flex-col items-center gap-2 min-w-0">
<div <div
class="size-14 bg-gray-700 rounded-full animate-skeleton-loop" class="size-14 bg-chip rounded-full animate-skeleton-loop"
style={{ "--delay": "80ms" }} style={{ "--delay": "80ms" }}
/> />
<div class="h-3 bg-gray-700 rounded w-20" /> <div class="h-3 bg-chip rounded w-20" />
</div> </div>
</div> </div>
<div class="h-2.5 bg-gray-700 rounded w-32 mx-auto mt-4" /> <div class="h-2.5 bg-chip rounded w-32 mx-auto mt-4" />
</div> </div>
<div class="p-4 space-y-6"> <div class="p-4 space-y-6">
<div class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 animate-skeleton-loop"> <Card variant="section" class="p-4 animate-skeleton-loop">
<div class="h-2.5 bg-gray-700 rounded w-40 mx-auto mb-3" /> <div class="h-2.5 bg-chip rounded w-40 mx-auto mb-3" />
<div class="h-3.5 w-full rounded-full bg-gray-900 border border-gray-750" /> <div class="h-3.5 w-full rounded-full bg-app border border-line" />
<div class="flex justify-between items-center mt-2.5"> <div class="flex justify-between items-center mt-2.5">
<div class="h-2.5 bg-gray-700 rounded w-14" /> <div class="h-2.5 bg-chip rounded w-14" />
<div class="h-2.5 bg-gray-700 rounded w-14" /> <div class="h-2.5 bg-chip rounded w-14" />
<div class="h-2.5 bg-gray-700 rounded w-14" /> <div class="h-2.5 bg-chip rounded w-14" />
</div> </div>
</div> </Card>
<div <Card
class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 h-32 animate-skeleton-loop" variant="section"
class="p-4 h-32 animate-skeleton-loop"
style={{ "--delay": "120ms" }} style={{ "--delay": "120ms" }}
/> />
<div <Card
class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 space-y-4 animate-skeleton-loop" variant="section"
class="p-4 space-y-4 animate-skeleton-loop"
style={{ "--delay": "240ms" }} style={{ "--delay": "240ms" }}
> >
<div class="h-2.5 bg-gray-700 rounded w-32 mx-auto" /> <div class="h-2.5 bg-chip rounded w-32 mx-auto" />
<div class="flex items-center justify-between gap-2 px-2"> <div class="flex items-center justify-between gap-2 px-2">
<div class="flex gap-1"> <div class="flex gap-1">
<For each={[0, 1, 2, 3, 4]}> <For each={[0, 1, 2, 3, 4]}>
{() => <div class="size-6 bg-gray-700 rounded-full" />} {() => <div class="size-6 bg-chip rounded-full" />}
</For> </For>
</div> </div>
<div class="h-2.5 bg-gray-700 rounded w-8" /> <div class="h-2.5 bg-chip rounded w-8" />
<div class="flex gap-1"> <div class="flex gap-1">
<For each={[0, 1, 2, 3, 4]}> <For each={[0, 1, 2, 3, 4]}>
{() => <div class="size-6 bg-gray-700 rounded-full" />} {() => <div class="size-6 bg-chip rounded-full" />}
</For> </For>
</div> </div>
</div> </div>
</div> </Card>
<div <Card
class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 h-40 animate-skeleton-loop" variant="section"
class="p-4 h-40 animate-skeleton-loop"
style={{ "--delay": "360ms" }} style={{ "--delay": "360ms" }}
/> />
</div> </div>
apps/frontend/src/components/MatchDetailsGenericSkeleton.tsx
+8 -6
View File
@@ -1,19 +1,20 @@
import { For } from "solid-js"; import { For } from "solid-js";
import { Card } from "./Card";
export function MatchDetailsGenericSkeleton() { export function MatchDetailsGenericSkeleton() {
return ( return (
<div class="animate-pulse"> <div class="animate-pulse">
<div class="bg-gradient-to-b from-gray-800 to-gray-850 p-6 border-b border-gray-800 flex items-center justify-center gap-4"> <div class="bg-gradient-to-b from-surface to-surface2 p-6 border-b border-line flex items-center justify-center gap-4">
<div <div
class="size-10 bg-gray-700 rounded-full animate-skeleton-loop" class="size-10 bg-chip rounded-full animate-skeleton-loop"
style={{ "--delay": "0ms" }} style={{ "--delay": "0ms" }}
/> />
<div <div
class="w-14 h-7 bg-gray-950/60 rounded-lg border border-gray-700/50 animate-skeleton-loop" class="w-14 h-7 bg-elevated/60 rounded-lg border border-line/50 animate-skeleton-loop"
style={{ "--delay": "100ms" }} style={{ "--delay": "100ms" }}
/> />
<div <div
class="size-10 bg-gray-700 rounded-full animate-skeleton-loop" class="size-10 bg-chip rounded-full animate-skeleton-loop"
style={{ "--delay": "50ms" }} style={{ "--delay": "50ms" }}
/> />
</div> </div>
@@ -21,8 +22,9 @@ export function MatchDetailsGenericSkeleton() {
<div class="p-4 space-y-3"> <div class="p-4 space-y-3">
<For each={[0, 1, 2]}> <For each={[0, 1, 2]}>
{(i) => ( {(i) => (
<div <Card
class="bg-gray-800/40 rounded-2xl h-16 border border-gray-800 animate-skeleton-loop" variant="section"
class="h-16 animate-skeleton-loop"
style={{ "--delay": `${i * 150}ms` }} style={{ "--delay": `${i * 150}ms` }}
/> />
)} )}
apps/frontend/src/components/MatchDetailsSkeleton.tsx
+17 -15
View File
@@ -1,31 +1,32 @@
import { For } from "solid-js"; import { For } from "solid-js";
import { Card } from "./Card";
export function MatchDetailsSkeleton() { export function MatchDetailsSkeleton() {
return ( return (
<div class="animate-pulse"> <div class="animate-pulse">
<div class="bg-gradient-to-b from-gray-800 to-gray-850 w-full py-5.5 px-10 border-b border-gray-800"> <div class="bg-gradient-to-b from-surface to-surface2 w-full py-5.5 px-10 border-b border-line">
<div class="flex items-center justify-between gap-2"> <div class="flex items-center justify-between gap-2">
<div class="flex-1 flex items-center gap-2 justify-end"> <div class="flex-1 flex items-center gap-2 justify-end">
<div <div
class="h-3 bg-gray-700 rounded w-16 animate-skeleton-loop" class="h-3 bg-chip rounded w-16 animate-skeleton-loop"
style={{ "--delay": "0ms" }} style={{ "--delay": "0ms" }}
/> />
<div <div
class="size-8 bg-gray-700 rounded-full animate-skeleton-loop" class="size-8 bg-chip rounded-full animate-skeleton-loop"
style={{ "--delay": "50ms" }} style={{ "--delay": "50ms" }}
/> />
</div> </div>
<div <div
class="w-16 min-w-16 h-7 bg-gray-950/60 rounded-lg border border-gray-700/50 animate-skeleton-loop" class="w-16 min-w-16 h-7 bg-elevated/60 rounded-lg border border-line/50 animate-skeleton-loop"
style={{ "--delay": "100ms" }} style={{ "--delay": "100ms" }}
/> />
<div class="flex-1 flex items-center gap-2 justify-start"> <div class="flex-1 flex items-center gap-2 justify-start">
<div <div
class="size-8 bg-gray-700 rounded-full animate-skeleton-loop" class="size-8 bg-chip rounded-full animate-skeleton-loop"
style={{ "--delay": "50ms" }} style={{ "--delay": "50ms" }}
/> />
<div <div
class="h-3 bg-gray-700 rounded w-16 animate-skeleton-loop" class="h-3 bg-chip rounded w-16 animate-skeleton-loop"
style={{ "--delay": "0ms" }} style={{ "--delay": "0ms" }}
/> />
</div> </div>
@@ -35,29 +36,30 @@ export function MatchDetailsSkeleton() {
<div class="p-4 space-y-3"> <div class="p-4 space-y-3">
<For each={[0, 1, 2, 3]}> <For each={[0, 1, 2, 3]}>
{(i) => ( {(i) => (
<div <Card
class="bg-gray-800/40 rounded-2xl p-3 border border-gray-800 animate-skeleton-loop" variant="section"
class="p-3 animate-skeleton-loop"
style={{ "--delay": `${i * 120}ms` }} style={{ "--delay": `${i * 120}ms` }}
> >
<div class="flex justify-center mb-2"> <div class="flex justify-center mb-2">
<div class="h-2.5 bg-gray-700 rounded w-14" /> <div class="h-2.5 bg-chip rounded w-14" />
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<div class="flex-1 flex flex-col gap-2"> <div class="flex-1 flex flex-col gap-2">
<div class="flex items-center gap-2 justify-end"> <div class="flex items-center gap-2 justify-end">
<div class="h-3 bg-gray-700 rounded w-16" /> <div class="h-3 bg-chip rounded w-16" />
<div class="size-8 bg-gray-700 rounded-full" /> <div class="size-8 bg-chip rounded-full" />
</div> </div>
</div> </div>
<div class="w-8 h-6 bg-gray-950/60 rounded border border-gray-700/50 flex-shrink-0" /> <div class="w-8 h-6 bg-elevated/60 rounded border border-line/50 flex-shrink-0" />
<div class="flex-1 flex flex-col gap-2"> <div class="flex-1 flex flex-col gap-2">
<div class="flex items-center gap-2 justify-start"> <div class="flex items-center gap-2 justify-start">
<div class="size-8 bg-gray-700 rounded-full" /> <div class="size-8 bg-chip rounded-full" />
<div class="h-3 bg-gray-700 rounded w-16" /> <div class="h-3 bg-chip rounded w-16" />
</div> </div>
</div> </div>
</div> </div>
</div> </Card>
)} )}
</For> </For>
</div> </div>
apps/frontend/src/components/MatchInsights.tsx
+8 -7
View File
@@ -1,5 +1,6 @@
import { Show } from "solid-js"; import { Show } from "solid-js";
import { MatchItem } from "./MatchItem"; import { MatchItem } from "./MatchItem";
import { Card } from "./Card";
interface FirstLeg { interface FirstLeg {
homeScore: number; homeScore: number;
awayScore: number; awayScore: number;
@@ -15,13 +16,13 @@ export function MatchInsights(props: {
awayAvgGoals?: number; // z.B. 4.8 awayAvgGoals?: number; // z.B. 4.8
}) { }) {
return ( return (
<div class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 space-y-4"> <Show when={props.firstLeg}>
<h3 class="text-xs font-bold uppercase tracking-wider text-gray-400 text-center"> <Card variant="section" class="p-4 space-y-4">
Hinspiel <h3 class="text-xs font-bold uppercase tracking-wider text-ink-muted text-center">
</h3> Hinspiel
<Show when={props.firstLeg}> </h3>
<MatchItem game={props.firstLeg} /> <MatchItem game={props.firstLeg} />
</Show> </Card>
</div> </Show>
); );
} }
apps/frontend/src/components/ResultTile.tsx
+4 -4
View File
@@ -1,15 +1,15 @@
export const ResultTile = (props: { home?: number; away?: number }) => { export const ResultTile = (props: { home?: number; away?: number }) => {
return ( return (
<div class="flex flex-col items-center justify-center bg-gray-900/60 p-2 rounded-lg border border-gray-700"> <div class="flex flex-col items-center justify-center bg-app/60 p-2 rounded-lg border border-line">
<div class="flex items-center gap-1 font-mono text-xs font-bold"> <div class="flex items-center gap-1 font-mono text-xs font-bold">
<span <span
class={props.home > props.away ? "text-emerald-400" : "text-gray-300"} class={props.home > props.away ? "text-accent" : "text-ink"}
> >
{props.home ?? "-"} {props.home ?? "-"}
</span> </span>
<span class="text-gray-600">:</span> <span class="text-ink-faint">:</span>
<span <span
class={props.away > props.home ? "text-emerald-400" : "text-gray-300"} class={props.away > props.home ? "text-accent" : "text-ink"}
> >
{props.away ?? "-"} {props.away ?? "-"}
</span> </span>
apps/frontend/src/components/SquadComparison.tsx
+12 -9
View File
@@ -1,17 +1,20 @@
import { For } from "solid-js";
import { Card } from "./Card";
export function SquadComparison(props: { homeTeam: any; awayTeam: any }) { export function SquadComparison(props: { homeTeam: any; awayTeam: any }) {
const homeMembers = () => props.homeRosters || []; const homeMembers = () => props.homeRosters || [];
const awayMembers = () => props.awayRosters || []; const awayMembers = () => props.awayRosters || [];
return ( return (
<div class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 space-y-4 overflow-hidden"> <Card variant="section" class="p-4 space-y-4 overflow-hidden">
<h3 class="text-xs font-bold uppercase tracking-wider text-gray-400 text-center"> <h3 class="text-xs font-bold uppercase tracking-wider text-ink-muted text-center">
Kaderübersicht Kaderübersicht
</h3> </h3>
<div class="space-y-4"> <div class="space-y-4">
{/* HEIM TEAM ROW */} {/* HEIM TEAM ROW */}
<div class="space-y-2"> <div class="space-y-2">
<div class="text-[10px] uppercase font-bold text-emerald-400 px-1"> <div class="text-[10px] uppercase font-bold text-accent px-1">
{props.homeTeam.name} {props.homeTeam.name}
</div> </div>
{/* Horizontale Scrollbar */} {/* Horizontale Scrollbar */}
@@ -19,14 +22,14 @@ export function SquadComparison(props: { homeTeam: any; awayTeam: any }) {
<For each={homeMembers()}> <For each={homeMembers()}>
{(player) => ( {(player) => (
<div class="flex flex-col items-center justify-center text-center w-14 flex-shrink-0 snap-start"> <div class="flex flex-col items-center justify-center text-center w-14 flex-shrink-0 snap-start">
<div class="size-10 rounded-full border border-emerald-500/20 p-0.5 bg-gray-900 mb-1"> <div class="size-10 rounded-full border border-accent/20 p-0.5 bg-app mb-1">
<img <img
src={player.imageUrl || "/fallback-avatar.svg"} src={player.imageUrl || "/fallback-avatar.svg"}
class="size-full rounded-full object-cover" class="size-full rounded-full object-cover"
alt="" alt=""
/> />
</div> </div>
<span class="text-[10px] text-gray-300 font-medium truncate w-full"> <span class="text-[10px] text-ink font-medium truncate w-full">
{player.name} {player.name}
{/* Nur Nachname spart Platz */} {/* Nur Nachname spart Platz */}
</span> </span>
@@ -38,21 +41,21 @@ export function SquadComparison(props: { homeTeam: any; awayTeam: any }) {
{/* AUSWÄRTS TEAM ROW */} {/* AUSWÄRTS TEAM ROW */}
<div class="space-y-2"> <div class="space-y-2">
<div class="text-[10px] uppercase font-bold text-gray-400 px-1"> <div class="text-[10px] uppercase font-bold text-ink-muted px-1">
{props.awayTeam.name} {props.awayTeam.name}
</div> </div>
<div class="flex gap-3 overflow-x-auto pb-2 scrollbar-none snap-x"> <div class="flex gap-3 overflow-x-auto pb-2 scrollbar-none snap-x">
<For each={awayMembers()}> <For each={awayMembers()}>
{(player) => ( {(player) => (
<div class="flex flex-col items-center justify-center text-center w-14 flex-shrink-0 snap-start"> <div class="flex flex-col items-center justify-center text-center w-14 flex-shrink-0 snap-start">
<div class="size-10 rounded-full border border-gray-700 p-0.5 bg-gray-900 mb-1"> <div class="size-10 rounded-full border border-line p-0.5 bg-app mb-1">
<img <img
src={player.imageUrl || "/fallback-avatar.svg"} src={player.imageUrl || "/fallback-avatar.svg"}
class="size-full rounded-full object-cover" class="size-full rounded-full object-cover"
alt="" alt=""
/> />
</div> </div>
<span class="text-[10px] text-gray-300 font-medium truncate w-full"> <span class="text-[10px] text-ink font-medium truncate w-full">
{player.name.split(" ")[1] || player.name} {player.name.split(" ")[1] || player.name}
</span> </span>
</div> </div>
@@ -61,6 +64,6 @@ export function SquadComparison(props: { homeTeam: any; awayTeam: any }) {
</div> </div>
</div> </div>
</div> </div>
</div> </Card>
); );
} }
apps/frontend/src/components/TableComparison.tsx
+20 -18
View File
@@ -1,3 +1,5 @@
import { Card } from "./Card";
export function TableComparison(props: { homeTeam: any; awayTeam: any }) { export function TableComparison(props: { homeTeam: any; awayTeam: any }) {
// Beispielhafte Mock-Daten – hier kommen später die echten Tabellenplatz-Daten rein // Beispielhafte Mock-Daten – hier kommen später die echten Tabellenplatz-Daten rein
const homeStats = props.homeTeam; const homeStats = props.homeTeam;
@@ -24,14 +26,14 @@ export function TableComparison(props: { homeTeam: any; awayTeam: any }) {
const diffInPlaces = () => Math.abs(homeStats.pos - awayStats.pos) - 1; const diffInPlaces = () => Math.abs(homeStats.pos - awayStats.pos) - 1;
return ( return (
<div class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 space-y-3"> <Card variant="section" class="p-4 space-y-3">
<h3 class="text-xs font-bold uppercase tracking-wider text-gray-400 text-center"> <h3 class="text-xs font-bold uppercase tracking-wider text-ink-muted text-center">
Tabellen-Ausschnitt Tabellen-Ausschnitt
</h3> </h3>
<div class="w-full space-y-1"> <div class="w-full space-y-1">
{/* Header-Zeile */} {/* Header-Zeile */}
<div class="flex text-[10px] uppercase font-bold text-gray-500 px-2 pb-1 border-b border-gray-800"> <div class="flex text-[10px] uppercase font-bold text-ink-muted px-2 pb-1 border-b border-line">
<span class="w-8">Pl.</span> <span class="w-8">Pl.</span>
<span class="flex-1">Verein</span> <span class="flex-1">Verein</span>
<span class="w-8 text-center">Sp.</span> <span class="w-8 text-center">Sp.</span>
@@ -43,11 +45,11 @@ export function TableComparison(props: { homeTeam: any; awayTeam: any }) {
<div <div
class={`flex items-center text-xs p-2 rounded-xl border ${ class={`flex items-center text-xs p-2 rounded-xl border ${
sortedTeams()[0].name === props.homeTeam.name sortedTeams()[0].name === props.homeTeam.name
? "bg-emerald-950/20 border-emerald-500/20" ? "bg-accent/20 border-accent/20"
: "bg-gray-900/40 border-transparent" : "bg-app/40 border-transparent"
}`} }`}
> >
<span class="w-8 font-mono font-bold text-gray-400"> <span class="w-8 font-mono font-bold text-ink-muted">
#{sortedTeams()[0].pos} #{sortedTeams()[0].pos}
</span> </span>
<span class="flex-1 font-medium truncate flex items-center gap-2"> <span class="flex-1 font-medium truncate flex items-center gap-2">
@@ -58,21 +60,21 @@ export function TableComparison(props: { homeTeam: any; awayTeam: any }) {
/> />
{sortedTeams()[0].name} {sortedTeams()[0].name}
</span> </span>
<span class="w-8 text-center text-gray-400 font-mono"> <span class="w-8 text-center text-ink-muted font-mono">
{sortedTeams()[0].games} {sortedTeams()[0].games}
</span> </span>
<span class="w-10 text-center text-gray-400 font-mono"> <span class="w-10 text-center text-ink-muted font-mono">
{sortedTeams()[0].diff} {sortedTeams()[0].diff}
</span> </span>
<span class="w-10 text-right font-bold text-emerald-400 font-mono"> <span class="w-10 text-right font-bold text-accent font-mono">
{sortedTeams()[0].points} {sortedTeams()[0].points}
</span> </span>
</div> </div>
{/* Platzhalter-Trenner, wenn Teams weiter auseinanderliegen */} {/* Platzhalter-Trenner, wenn Teams weiter auseinanderliegen */}
<Show when={diffInPlaces() > 0}> <Show when={diffInPlaces() > 0}>
<div class="flex items-center px-4 py-1 text-[10px] text-gray-600 font-medium"> <div class="flex items-center px-4 py-1 text-[10px] text-ink-faint font-medium">
<div class="w-1 h-3 border-l border-dashed border-gray-700 mr-3"></div> <div class="w-1 h-3 border-l border-dashed border-line mr-3"></div>
<span> <span>
... {diffInPlaces()} {diffInPlaces() === 1 ? "Platz" : "Plätze"}{" "} ... {diffInPlaces()} {diffInPlaces() === 1 ? "Platz" : "Plätze"}{" "}
dazwischen ... dazwischen ...
@@ -84,11 +86,11 @@ export function TableComparison(props: { homeTeam: any; awayTeam: any }) {
<div <div
class={`flex items-center text-xs p-2 rounded-xl border ${ class={`flex items-center text-xs p-2 rounded-xl border ${
sortedTeams()[1].name === props.homeTeam.name sortedTeams()[1].name === props.homeTeam.name
? "bg-emerald-950/20 border-emerald-500/20" ? "bg-accent/20 border-accent/20"
: "bg-gray-900/40 border-transparent" : "bg-app/40 border-transparent"
}`} }`}
> >
<span class="w-8 font-mono font-bold text-gray-400"> <span class="w-8 font-mono font-bold text-ink-muted">
#{sortedTeams()[1].pos} #{sortedTeams()[1].pos}
</span> </span>
<span class="flex-1 font-medium truncate flex items-center gap-2"> <span class="flex-1 font-medium truncate flex items-center gap-2">
@@ -99,17 +101,17 @@ export function TableComparison(props: { homeTeam: any; awayTeam: any }) {
/> />
{sortedTeams()[1].name} {sortedTeams()[1].name}
</span> </span>
<span class="w-8 text-center text-gray-400 font-mono"> <span class="w-8 text-center text-ink-muted font-mono">
{sortedTeams()[1].games} {sortedTeams()[1].games}
</span> </span>
<span class="w-10 text-center text-gray-400 font-mono"> <span class="w-10 text-center text-ink-muted font-mono">
{sortedTeams()[1].diff} {sortedTeams()[1].diff}
</span> </span>
<span class="w-10 text-right font-bold text-emerald-400 font-mono"> <span class="w-10 text-right font-bold text-accent font-mono">
{sortedTeams()[1].points} {sortedTeams()[1].points}
</span> </span>
</div> </div>
</div> </div>
</div> </Card>
); );
} }
apps/frontend/src/index.css
+67
View File
@@ -1,5 +1,72 @@
@import "tailwindcss"; @import "tailwindcss";
/* Dark mode toggled via a class on <html> (see stores/themeStore.ts),
so the `dark:` variant and CSS tokens follow the user's Light/Dark/Auto choice. */
@custom-variant dark (&:where(.dark, .dark *));
:root {
color-scheme: light;
--c-app: #f1f5f9;
--c-surface: #ffffff;
--c-surface2: #f8fafc;
--c-elevated: #e2e8f0;
--c-line: #e2e8f0;
--c-line-soft: #e8edf4;
--c-ink: #0f172a;
--c-ink-muted: #475569;
--c-ink-faint: #94a3b8;
--c-chip: #cbd5e1;
--c-accent: #047857;
--c-accent2: #2563eb;
--c-accent3: #e11d48;
--c-accent4: #d97706;
--c-accent5: #0284c7;
--c-accent-contrast: #ffffff;
}
.dark {
color-scheme: dark;
--c-app: #111827;
--c-surface: #1f2937;
--c-surface2: #182337;
--c-elevated: #0b1120;
--c-line: #374151;
--c-line-soft: #263248;
--c-ink: #f8fafc;
--c-ink-muted: #9ca3af;
--c-ink-faint: #6b7280;
--c-chip: #334155;
--c-accent: #34d399;
--c-accent2: #60a5fa;
--c-accent3: #fb7185;
--c-accent4: #fbbf24;
--c-accent5: #38bdf8;
--c-accent-contrast: #052e1a;
}
@theme inline {
--color-app: var(--c-app);
--color-surface: var(--c-surface);
--color-surface2: var(--c-surface2);
--color-elevated: var(--c-elevated);
--color-line: var(--c-line);
--color-line-soft: var(--c-line-soft);
--color-ink: var(--c-ink);
--color-ink-muted: var(--c-ink-muted);
--color-ink-faint: var(--c-ink-faint);
--color-chip: var(--c-chip);
--color-accent: var(--c-accent);
--color-accent2: var(--c-accent2);
--color-accent3: var(--c-accent3);
--color-accent4: var(--c-accent4);
--color-accent5: var(--c-accent5);
--color-accent-contrast: var(--c-accent-contrast);
}
html,
body {
background-color: var(--c-app);
}
@keyframes move-stripes { @keyframes move-stripes {
0% { background-position: 0 0; } 0% { background-position: 0 0; }
apps/frontend/src/pages/MatchDetails.tsx
+43 -42
View File
@@ -21,7 +21,7 @@ export function MatchPage() {
return ( return (
<> <>
<div class="w-full h-full overflow-y-auto bg-gray-800"> <div class="w-full h-full overflow-y-auto bg-surface">
<button <button
class="sticky top-5 left-2 z-22 p-2 cursor-pointer" class="sticky top-5 left-2 z-22 p-2 cursor-pointer"
onClick={() => { onClick={() => {
@@ -44,8 +44,8 @@ export function MatchPage() {
</svg> </svg>
<span class="sr-only">Back</span> <span class="sr-only">Back</span>
</button> </button>
<div class="bg-gray-900"> <div class="bg-surface">
{/* <Header title={""} showBackButton /> */} {/* <Header title="" showBackButton /> */}
<Show when={match()} fallback={<MatchDetailsGenericSkeleton />}> <Show when={match()} fallback={<MatchDetailsGenericSkeleton />}>
<Show when={match().status !== "SCHEDULED"}> <Show when={match().status !== "SCHEDULED"}>
<Show <Show
@@ -77,9 +77,9 @@ const SLOT_LABEL: Record<string, string> = {
}; };
const SLOT_TEXT: Record<string, string> = { const SLOT_TEXT: Record<string, string> = {
SINGLE: "text-emerald-400/80", SINGLE: "text-accent/80",
DOUBLE: "text-sky-400/80", DOUBLE: "text-accent5/80",
SHOOT_OUT: "text-amber-400/80", SHOOT_OUT: "text-accent4/80",
}; };
function sidePlayers(side: any) { function sidePlayers(side: any) {
@@ -97,14 +97,14 @@ function PlayerChip(props: {
const name = () => (p() ? `${p().firstName} ${p().lastName}`.trim() : "Unbesetzt"); const name = () => (p() ? `${p().firstName} ${p().lastName}`.trim() : "Unbesetzt");
const avatar = ( const avatar = (
<div <div
class={`size-8 rounded-full border p-0.5 bg-gray-900 flex-shrink-0 ${ class={`size-8 rounded-full border p-0.5 bg-app flex-shrink-0 ${
props.winning ? "border-emerald-500/40" : "border-gray-700" props.winning ? "border-accent/40" : "border-line"
}`} }`}
> >
<Show <Show
when={p()?.imageUrl} when={p()?.imageUrl}
fallback={ fallback={
<span class="size-full flex items-center justify-center text-[10px] font-bold text-gray-600"> <span class="size-full flex items-center justify-center text-[10px] font-bold text-ink-faint">
{p()?.firstName?.[0]?.toUpperCase() || "?"} {p()?.firstName?.[0]?.toUpperCase() || "?"}
</span> </span>
} }
@@ -121,7 +121,7 @@ function PlayerChip(props: {
<span <span
class={`min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-xs font-medium ${ class={`min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-xs font-medium ${
props.side === "home" ? "text-left" : "text-right" props.side === "home" ? "text-left" : "text-right"
} ${props.winning ? "text-emerald-300" : "text-gray-200"}`} } ${props.winning ? "text-accent" : "text-ink"}`}
> >
{name()} {name()}
</span> </span>
@@ -159,7 +159,7 @@ function PlayerSide(props: {
when={players().length > 0} when={players().length > 0}
fallback={ fallback={
<span <span
class={`text-xs font-semibold text-gray-600 py-2.5 ${ class={`text-xs font-semibold text-ink-faint py-2.5 ${
props.align === "home" ? "text-left" : "text-right" props.align === "home" ? "text-left" : "text-right"
}`} }`}
> >
@@ -186,7 +186,7 @@ function SlotCard(props: { slot: any }) {
const awayWins = () => awayTotal() > homeTotal(); const awayWins = () => awayTotal() > homeTotal();
return ( return (
<div class="bg-gray-800/40 rounded-2xl p-3 border border-gray-800"> <Card variant="section" class="p-3">
<div class="flex justify-center mb-2"> <div class="flex justify-center mb-2">
<span <span
class={`text-[9px] font-semibold uppercase tracking-wider whitespace-nowrap ${ class={`text-[9px] font-semibold uppercase tracking-wider whitespace-nowrap ${
@@ -202,7 +202,7 @@ function SlotCard(props: { slot: any }) {
<div class="flex flex-col items-center gap-1 flex-shrink-0"> <div class="flex flex-col items-center gap-1 flex-shrink-0">
<Show <Show
when={sets().length > 0} when={sets().length > 0}
fallback={<span class="text-xs font-bold text-gray-600">—</span>} fallback={<span class="text-xs font-bold text-ink-faint">—</span>}
> >
{sets().map((s: any) => ( {sets().map((s: any) => (
<ResultTile home={s.homeGoals} away={s.awayGoals} /> <ResultTile home={s.homeGoals} away={s.awayGoals} />
@@ -212,21 +212,21 @@ function SlotCard(props: { slot: any }) {
<PlayerSide side={slot().away} align="away" winning={awayWins()} /> <PlayerSide side={slot().away} align="away" winning={awayWins()} />
</div> </div>
</div> </Card>
); );
} }
function MatchDetails(props: { match: any }) { function MatchDetails(props: { match: any }) {
return ( return (
<> <>
<div class="bg-gradient-to-b from-gray-800 to-gray-850 w-full py-5.5 px-10 border-b border-gray-800 text-center sticky top-0 backdrop-blur-md z-21"> <div class="bg-gradient-to-b from-surface/90 to-surface/80 w-full py-5.5 px-10 border-b border-line text-center sticky top-0 backdrop-blur-md z-21">
<MatchItem game={props.match} /> <MatchItem game={props.match} />
</div> </div>
<div class="p-4 space-y-3"> <div class="p-4 space-y-3">
<Show <Show
when={props.match.slots?.length} when={props.match.slots?.length}
fallback={ fallback={
<div class="text-center text-sm text-gray-500 py-6"> <div class="text-center text-sm text-ink-muted py-6">
Noch keine Ergebnisse Noch keine Ergebnisse
</div> </div>
} }
@@ -241,6 +241,7 @@ function MatchDetails(props: { match: any }) {
} }
import { For, Show } from "solid-js"; import { For, Show } from "solid-js";
import { Card } from "../components/Card.tsx";
import { LogoFallback as JerseyFallback } from "../components/LogoFallback.tsx"; import { LogoFallback as JerseyFallback } from "../components/LogoFallback.tsx";
import { TableComparison } from "../components/TableComparison.tsx"; import { TableComparison } from "../components/TableComparison.tsx";
import { SquadComparison } from "../components/SquadComparison.tsx"; import { SquadComparison } from "../components/SquadComparison.tsx";
@@ -252,8 +253,8 @@ export default function MatchDetailsFuture(props: { match: any }) {
return ( return (
<div> <div>
{/* 1. DER SHOWDOWN HEADER */} {/* 1. DER SHOWDOWN HEADER */}
<div class="bg-gradient-to-b from-gray-800 to-gray-850 p-6 border-b border-gray-800 text-center relative sticky top-0 backdrop-blur-md z-21"> <div class="bg-gradient-to-b from-surface/90 to-surface/80 p-6 border-b border-line text-center relative sticky top-0 backdrop-blur-md z-21">
<span class="text-xs font-bold uppercase tracking-widest text-emerald-400 block mb-4"> <span class="text-xs font-bold uppercase tracking-widest text-accent block mb-4">
{props.match.event.name} {props.match.event.name}
</span> </span>
@@ -270,27 +271,27 @@ export default function MatchDetailsFuture(props: { match: any }) {
alt="" alt=""
/> />
</Show> </Show>
<span class="text-sm font-semibold text-gray-200 text-center line-clamp-2 leading-tight"> <span class="text-sm font-semibold text-ink text-center line-clamp-2 leading-tight">
{props.match.homeTeam.name} {props.match.homeTeam.name}
</span> </span>
</div> </div>
{/* Mittlerer Zeitblock */} {/* Mittlerer Zeitblock */}
<div class="flex flex-col items-center justify-center px-4 py-2 bg-gray-950/50 rounded-2xl border border-gray-800 min-w-[100px]"> <div class="flex flex-col items-center justify-center px-4 py-2 bg-elevated/50 rounded-2xl border border-line min-w-[100px]">
<span class="text-xs font-semibold text-emerald-400 tracking-wider"> <span class="text-xs font-semibold text-accent tracking-wider">
{new Date(props.match.scheduledAt).toLocaleDateString("de-DE", { {new Date(props.match.scheduledAt).toLocaleDateString("de-DE", {
weekday: "short", weekday: "short",
day: "2-digit", day: "2-digit",
month: "2-digit", month: "2-digit",
})} })}
</span> </span>
<span class="text-xl font-mono font-bold text-white mt-0.5"> <span class="text-xl font-mono font-bold text-ink mt-0.5">
{new Date(props.match.scheduledAt).toLocaleTimeString([], { {new Date(props.match.scheduledAt).toLocaleTimeString([], {
hour: "2-digit", hour: "2-digit",
minute: "2-digit", minute: "2-digit",
})} })}
</span> </span>
<span class="text-[10px] text-gray-500 uppercase tracking-widest font-bold mt-1"> <span class="text-[10px] text-ink-muted uppercase tracking-widest font-bold mt-1">
VS VS
</span> </span>
</div> </div>
@@ -307,14 +308,14 @@ export default function MatchDetailsFuture(props: { match: any }) {
alt="" alt=""
/> />
</Show> </Show>
<span class="text-sm font-semibold text-gray-200 text-center line-clamp-2 leading-tight"> <span class="text-sm font-semibold text-ink text-center line-clamp-2 leading-tight">
{props.match.awayTeam.name} {props.match.awayTeam.name}
</span> </span>
</div> </div>
</div> </div>
{/* Location Info */} {/* Location Info */}
<p class="text-xs text-gray-500 mt-4 flex items-center justify-center gap-1"> <p class="text-xs text-ink-muted mt-4 flex items-center justify-center gap-1">
<svg <svg
class="size-3.5" class="size-3.5"
fill="none" fill="none"
@@ -340,24 +341,24 @@ export default function MatchDetailsFuture(props: { match: any }) {
{/* INHALT / ANALYSE SEKTIONEN */} {/* INHALT / ANALYSE SEKTIONEN */}
<div class="p-4 space-y-6"> <div class="p-4 space-y-6">
{/* 2. PROGNOSE / VOTING BAR */} {/* 2. PROGNOSE / VOTING BAR */}
<div class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800"> <Card variant="section" class="p-4">
<h3 class="text-xs font-bold uppercase tracking-wider text-gray-400 mb-3 text-center"> <h3 class="text-xs font-bold uppercase tracking-wider text-ink-muted mb-3 text-center">
Wer gewinnt das Match? Wer gewinnt das Match?
</h3> </h3>
{/* Der 3-geteilte Balken */} {/* Der 3-geteilte Balken */}
<div class="h-3.5 w-full rounded-full overflow-hidden flex bg-gray-900 border border-gray-750"> <div class="h-3.5 w-full rounded-full overflow-hidden flex bg-app border border-line">
<div <div
class="bg-emerald-500 h-full transition-all duration-500" class="bg-accent h-full transition-all duration-500"
style={{ style={{
width: `${props.match.prediction?.homeWinChance ?? 0}%`, width: `${props.match.prediction?.homeWinChance ?? 0}%`,
}} }}
></div> ></div>
<div <div
class="bg-gray-700 h-full transition-all duration-500" class="bg-chip h-full transition-all duration-500"
style={{ width: `${props.match.prediction?.drawChance ?? 0}%` }} style={{ width: `${props.match.prediction?.drawChance ?? 0}%` }}
></div> ></div>
<div <div
class="bg-blue-500 h-full transition-all duration-500" class="bg-accent2 h-full transition-all duration-500"
style={{ style={{
width: `${props.match.prediction?.awayWinChance ?? 0}%`, width: `${props.match.prediction?.awayWinChance ?? 0}%`,
}} }}
@@ -365,17 +366,17 @@ export default function MatchDetailsFuture(props: { match: any }) {
</div> </div>
{/* Legende / Prozentzahlen */} {/* Legende / Prozentzahlen */}
<div class="flex justify-between items-center mt-2.5 text-xs font-semibold px-0.5"> <div class="flex justify-between items-center mt-2.5 text-xs font-semibold px-0.5">
<span class="text-emerald-400"> <span class="text-accent">
Heim ({props.match.prediction?.homeWinChance}%) Heim ({props.match.prediction?.homeWinChance}%)
</span> </span>
<span class="text-gray-400"> <span class="text-ink-muted">
Remis ({props.match.prediction?.drawChance}%) Remis ({props.match.prediction?.drawChance}%)
</span> </span>
<span class="text-blue-400"> <span class="text-accent2">
Auswärts ({props.match.prediction?.awayWinChance}%) Auswärts ({props.match.prediction?.awayWinChance}%)
</span> </span>
</div> </div>
</div> </Card>
{props.match.standing && ( {props.match.standing && (
<TableComparison <TableComparison
@@ -385,8 +386,8 @@ export default function MatchDetailsFuture(props: { match: any }) {
)} )}
{/* 3. FORMKURVE (LAST 5 MATCHES) */} {/* 3. FORMKURVE (LAST 5 MATCHES) */}
<div class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 space-y-4"> <Card variant="section" class="p-4 space-y-4">
<h3 class="text-xs font-bold uppercase tracking-wider text-gray-400 text-center"> <h3 class="text-xs font-bold uppercase tracking-wider text-ink-muted text-center">
Aktuelle Formkurve Aktuelle Formkurve
</h3> </h3>
<div class="flex items-center justify-between gap-2 px-2"> <div class="flex items-center justify-between gap-2 px-2">
@@ -404,7 +405,7 @@ export default function MatchDetailsFuture(props: { match: any }) {
/> />
))} ))}
</div> </div>
<span class="text-[11px] uppercase tracking-widest font-bold text-gray-600"> <span class="text-[11px] uppercase tracking-widest font-bold text-ink-faint">
Form Form
</span> </span>
{/* Form Team B */} {/* Form Team B */}
@@ -422,7 +423,7 @@ export default function MatchDetailsFuture(props: { match: any }) {
))} ))}
</div> </div>
</div> </div>
</div> </Card>
<SquadComparison <SquadComparison
homeRosters={props.match.homeRosters} homeRosters={props.match.homeRosters}
@@ -441,11 +442,11 @@ function FormBadge(props: { result: "S" | "U" | "N" }) {
const styles = () => { const styles = () => {
switch (props.result) { switch (props.result) {
case "S": // Sieg case "S": // Sieg
return "bg-emerald-500/20 text-emerald-400 border-emerald-500/30"; return "bg-accent/20 text-accent border-accent/30";
case "U": // Unentschieden case "U": // Unentschieden
return "bg-gray-700/40 text-gray-400 border-gray-600/30"; return "bg-chip/40 text-ink-muted border-line/30";
case "N": // Niederlage case "N": // Niederlage
return "bg-rose-500/20 text-rose-400 border-rose-500/30"; return "bg-accent3/20 text-accent3 border-accent3/30";
} }
}; };
apps/frontend/src/pages/Overview.tsx
+15 -15
View File
@@ -10,6 +10,7 @@ import {
// import { useSearchParams } from "@solidjs/router"; // import { useSearchParams } from "@solidjs/router";
import { Header } from "../components/Header"; import { Header } from "../components/Header";
import { DayTab } from "../components/DayTab"; import { DayTab } from "../components/DayTab";
import { Card } from "../components/Card";
import { ListSkeleton } from "../components/ListSkeleton"; import { ListSkeleton } from "../components/ListSkeleton";
import { MatchItem } from "../components/MatchItem"; import { MatchItem } from "../components/MatchItem";
import { loadMatches, matchStore, type Match } from "../stores/matchStore"; import { loadMatches, matchStore, type Match } from "../stores/matchStore";
@@ -182,11 +183,11 @@ export function OverviewPage() {
<> <>
<div <div
ref={topContainerRef} ref={topContainerRef}
class="fixed w-full top-0 backdrop-blur-md z-21 bg-gradient-to-b from-gray-800 to-gray-850" class="fixed w-full top-0 backdrop-blur-md z-21 bg-gradient-to-b from-surface/90 to-surface/80"
> >
<div <div
ref={navContainerRef} ref={navContainerRef}
class="p-3 overflow-x-auto flex gap-2 scrollbar-none border-b border-gray-700/50 flex-none p-6 border-b border-gray-800 text-center" class="p-3 overflow-x-auto flex gap-2 scrollbar-none border-b border-line/50 flex-none p-6 border-b border-line text-center"
> >
<For each={daysList()}> <For each={daysList()}>
{(day) => ( {(day) => (
@@ -201,13 +202,13 @@ export function OverviewPage() {
</div> </div>
<div <div
class={`px-4 py-2 bg-gray-800/40 border-b border-gray-800 flex justify-between items-center flex-none transition-colors duration-300 ${ class={`px-4 py-2 bg-surface2/40 border-b border-line flex justify-between items-center flex-none transition-colors duration-300 ${
matchStore.isLoading matchStore.isLoading
? "bg-emerald-600/30 border-emerald-500/40 bg-striped-loading-dark" ? "bg-accent/10 border-accent/40 bg-striped-loading-dark"
: "bg-gray-800/40 border-gray-800" : ""
}`} }`}
> >
<span class="text-xs font-semibold uppercase text-gray-400"> <span class="text-xs font-semibold uppercase text-ink-muted">
{new Date(activeDate()).toLocaleDateString("de-DE", { {new Date(activeDate()).toLocaleDateString("de-DE", {
weekday: "long", weekday: "long",
day: "numeric", day: "numeric",
@@ -218,7 +219,7 @@ export function OverviewPage() {
</div> </div>
<div <div
ref={scrollContainerRef} ref={scrollContainerRef}
class="flex-1 flex overflow-x-auto snap-x snap-mandatory scrollbar-none scroll-smooth bg-gray-900" class="flex-1 flex overflow-x-auto snap-x snap-mandatory scrollbar-none scroll-smooth bg-app"
> >
<For each={daysList()}> <For each={daysList()}>
{(day) => { {(day) => {
@@ -250,11 +251,11 @@ export function OverviewPage() {
style={{ style={{
"--delay": `${itemIndex.current++ * 25}ms`, "--delay": `${itemIndex.current++ * 25}ms`,
}} }}
class={`bg-gray-900 flex items-center justify-between border-b border-gray-800 pb-1.5 px-1 ${shouldAnimateOnEnter ? "animate-waterfall" : ""}`} class={`bg-app flex items-center justify-between border-b border-line pb-1.5 px-1 ${shouldAnimateOnEnter ? "animate-waterfall" : ""}`}
> >
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
{/* sapce for event icon */} {/* sapce for event icon */}
<span class="text-xs font-bold uppercase tracking-wider text-emeral-400"> <span class="text-xs font-bold uppercase tracking-wider text-accent">
{event.eventName} {event.eventName}
</span> </span>
</div> </div>
@@ -262,19 +263,18 @@ export function OverviewPage() {
<div class="space-y-2.5"> <div class="space-y-2.5">
<For each={event.matches}> <For each={event.matches}>
{(game) => ( {(game) => (
<a <Card
style={{ style={{
"--delay": `${itemIndex.current++ * 25}ms`, "--delay": `${itemIndex.current++ * 25}ms`,
}} }}
href={`/match/${game.id}`} href={`/match/${game.id}`}
class={`bg-gray-800 p-4 rounded-xl border border-gray-700/60 shadow-md flex ${ shadowed
shouldAnimateOnEnter class={`p-4 flex ${
? "animate-waterfall" shouldAnimateOnEnter ? "animate-waterfall" : ""
: ""
}`} }`}
> >
<MatchItem game={game} /> <MatchItem game={game} />
</a> </Card>
)} )}
</For> </For>
</div> </div>
apps/frontend/src/pages/Settings.tsx
+170
View File
@@ -0,0 +1,170 @@
import { For, Show } from "solid-js";
import { themeStore, type ThemeMode } from "../stores/themeStore";
const MODES: { value: ThemeMode; label: string; icon: string }[] = [
{ value: "light", label: "Hell", icon: "sun" },
{ value: "dark", label: "Dunkel", icon: "moon" },
{ value: "auto", label: "Auto", icon: "auto" },
];
const PRESETS = [
"#047857",
"#2563eb",
"#e11d48",
"#d97706",
"#7c3aed",
"#0284c7",
"#16a34a",
"#db2777",
];
function Icon({ name }: { name: string }) {
const common = {
class: "h-4 w-4",
fill: "none",
stroke: "currentColor",
"stroke-width": 2,
} as const;
switch (name) {
case "sun":
return (
<svg {...common} viewBox="0 0 24 24">
<circle cx="12" cy="12" r="4" />
<path
stroke-linecap="round"
d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"
/>
</svg>
);
case "moon":
return (
<svg {...common} viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" />
</svg>
);
case "auto":
return (
<svg {...common} viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 3l1.6 3.6L17 8l-3.4 1.4L12 13l-1.6-3.6L7 8l3.4-1.4L12 3z" />
<path d="M19 14l.8 1.8 1.7.4-1.4 1.3.3 1.9-1.7-1-1.5 1 .2-2-1.2-1.4 2-.2z" />
</svg>
);
}
}
export function SettingsPage() {
const current = () => themeStore.mode;
const customAccent = () => themeStore.accent;
return (
<div class="h-full overflow-y-auto">
<header class="sticky top-0 z-20 flex items-center gap-3 px-4 py-3.5 bg-surface/90 backdrop-blur-md border-b border-line">
<span class="text-lg font-bold tracking-wide text-accent">
Einstellungen
</span>
</header>
<div class="p-4 max-w-md mx-auto space-y-6">
<section class="bg-surface rounded-2xl border border-line-soft p-4 space-y-3">
<div>
<h2 class="text-base font-semibold text-ink">Erscheinungsbild</h2>
<p class="text-xs text-ink-muted mt-0.5">
Wähle, wie die App aussehen soll.
</p>
</div>
<div class="grid grid-cols-3 gap-1.5 p-1 bg-surface2 rounded-xl border border-line-soft">
<For each={MODES}>
{(mode) => (
<button
onClick={() => themeStore.set(mode.value)}
class={`flex flex-col items-center gap-1.5 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${
current() === mode.value
? "bg-accent text-accent-contrast shadow-md shadow-accent/25"
: "text-ink-muted hover:text-ink hover:bg-elevated/60"
}`}
>
<Icon name={mode.icon} />
{mode.label}
</button>
)}
</For>
</div>
<Show when={current() === "auto"}>
<p class="text-[11px] text-ink-faint">
Auto folgt den Systemeinstellungen deines Geräts.
</p>
</Show>
</section>
<section class="bg-surface rounded-2xl border border-line-soft p-4 space-y-3">
<div>
<h2 class="text-base font-semibold text-ink">Akzentfarbe</h2>
<p class="text-xs text-ink-muted mt-0.5">
Wähle die Hauptfarbe der App.
</p>
</div>
<div class="flex items-center gap-3 flex-wrap">
<button
onClick={() => themeStore.setAccent(null)}
class="w-8 h-8 rounded-full border-2 transition-transform active:scale-95 border-ink"
style={{
background:
"conic-gradient(to right, #047857, #2563eb, #e11d48, #d97706, #047857)",
}}
aria-label="Standard"
></button>
<For each={PRESETS}>
{(color) => (
<button
onClick={() => themeStore.setAccent(color)}
class={`w-8 h-8 rounded-full border-2 transition-transform active:scale-95 ${
customAccent() === color
? "border-ink ring-2 ring-ink/40"
: "border-line"
}`}
style={{ background: color }}
aria-label={color}
></button>
)}
</For>
</div>
<div class="flex items-center gap-3 pt-1 border-t border-line-soft">
<span class="text-xs font-medium text-ink-muted">Eigene:</span>
<label
class="relative inline-flex items-center gap-2 cursor-pointer text-xs"
>
<input
type="color"
value={customAccent() ?? "#047857"}
onChange={(e) =>
themeStore.setAccent((e.currentTarget.value as string) || null)
}
class="w-9 h-9 rounded-lg cursor-pointer border border-line bg-transparent p-0.5"
/>
<span class="text-ink truncate w-24">
{customAccent() ?? "Standard"}
</span>
</label>
<button
onClick={() => themeStore.setAccent(null)}
class="ml-auto text-xs text-ink-muted hover:text-accent"
>
Zurücksetzen
</button>
</div>
</section>
<section class="text-[11px] text-ink-faint leading-relaxed">
<p>
Kickern – deine Kicker-Liga auf einen Blick.
</p>
</section>
</div>
</div>
);
}
apps/frontend/src/stores/themeStore.ts
+117
View File
@@ -0,0 +1,117 @@
import { createSignal, createEffect } from "solid-js";
export type ThemeMode = "light" | "dark" | "auto";
const STORAGE_KEY = "theme";
const ACCENT_KEY = "accent";
const media = window.matchMedia("(prefers-color-scheme: dark)");
const root = document.documentElement;
function readStored(): ThemeMode {
try {
const raw = localStorage.getItem(STORAGE_KEY);
if (raw === "light" || raw === "dark" || raw === "auto") return raw;
} catch {
/* ignore */
}
return "auto";
}
function isDark(mode: ThemeMode): boolean {
if (mode === "auto") return media.matches;
return mode === "dark";
}
function apply(mode: ThemeMode) {
root.classList.toggle("dark", isDark(mode));
}
const [getMode, setModeSignal] = createSignal<ThemeMode>(readStored());
// Track the OS preference so "auto" follows the system live.
const onSystemChange = () => {
if (getMode() === "auto") apply("auto");
};
media.addEventListener("change", onSystemChange);
// Persist + apply whenever the mode (or, for auto, the system) changes.
createEffect(() => {
const mode = getMode();
if (mode !== "auto") {
try {
localStorage.setItem(STORAGE_KEY, mode);
} catch {
/* ignore */
}
}
apply(mode);
});
export type AccentColor = string | null;
function readableText(color: string): string {
const hex = color.replace("#", "");
const full =
hex.length === 3
? hex
.split("")
.map((c) => c + c)
.join("")
: hex;
const r = parseInt(full.slice(0, 2), 16) / 255;
const g = parseInt(full.slice(2, 4), 16) / 255;
const b = parseInt(full.slice(4, 6), 16) / 255;
const lin = (c: number) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
const lum = 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
return lum > 0.45 ? "#0b1220" : "#ffffff";
}
function readAccent(): string | null {
try {
const raw = localStorage.getItem(ACCENT_KEY);
if (raw && /^#[0-9a-fA-F]{6}$/.test(raw)) return raw;
} catch {
/* ignore */
}
return null;
}
const [getAccent, setAccentSignal] = createSignal<AccentColor>(readAccent());
// Apply a custom accent (or fall back to the theme token) + readable contrast.
function applyAccent(color: string | null) {
if (color) {
root.style.setProperty("--c-accent", color);
root.style.setProperty("--c-accent-contrast", readableText(color));
} else {
root.style.removeProperty("--c-accent");
root.style.removeProperty("--c-accent-contrast");
}
}
createEffect(() => {
const color = getAccent();
try {
if (color) localStorage.setItem(ACCENT_KEY, color);
else localStorage.removeItem(ACCENT_KEY);
} catch {
/* ignore */
}
applyAccent(color);
});
export const themeStore = {
get mode() {
return getMode();
},
set(mode: ThemeMode) {
setModeSignal(mode);
},
isDark: () => isDark(getMode()),
get accent() {
return getAccent();
},
setAccent(color: string | null) {
setAccentSignal(color);
},
};