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:d900e45352d3aa787d156a562cb836145c019d17
Branches Tags
kickern/app:develop
3 Commits
ed8a280d18 .. d900e45352
Author SHA1 Message Date
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
21 changed files with 519 additions and 192 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,
away: away.form,
},
standing: Number(match.veranstaltung.tabellenwertung)
? {
home: {
pos: Number(match.heim_team.platz),
name: match.heim_team.teamname,
logo: match.heim_team.teambild,
games:
match.heim_team.siege +
match.heim_team.unentschieden +
match.heim_team.niederlagen,
points: match.heim_team.begegnungspunkte,
diff: `${match.heim_team.spielpunkte_differenz > 0 ? "+" : ""}${match.heim_team.spielpunkte_differenz}`,
},
away: {
pos: Number(match.gast_team.platz),
name: match.gast_team.teamname,
logo: match.gast_team.teambild,
games:
match.gast_team.siege +
match.gast_team.unentschieden +
match.gast_team.niederlagen,
points: match.gast_team.begegnungspunkte,
diff: `${match.gast_team.spielpunkte_differenz > 0 ? "+" : ""}${match.gast_team.spielpunkte_differenz}`,
},
}
: undefined,
standing:
Number(match.veranstaltung.tabellenwertung) > 0
? {
home: {
pos: Number(match.heim_team.platz),
name: match.heim_team.teamname,
logo: match.heim_team.teambild,
games:
match.heim_team.siege +
match.heim_team.unentschieden +
match.heim_team.niederlagen,
points: match.heim_team.begegnungspunkte,
diff: `${match.heim_team.spielpunkte_differenz > 0 ? "+" : ""}${match.heim_team.spielpunkte_differenz}`,
},
away: {
pos: Number(match.gast_team.platz),
name: match.gast_team.teamname,
logo: match.gast_team.teambild,
games:
match.gast_team.siege +
match.gast_team.unentschieden +
match.gast_team.niederlagen,
points: match.gast_team.begegnungspunkte,
diff: `${match.gast_team.spielpunkte_differenz > 0 ? "+" : ""}${match.gast_team.spielpunkte_differenz}`,
},
}
: undefined,
firstLeg:
match.hinspiel &&
!(
apps/frontend/index.html
+26 -3
View File
@@ -1,11 +1,34 @@
<!doctype html>
<html lang="en" class="bg-gray-900">
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#00ff00" />
<title>fontend</title>
<meta name="theme-color" content="#111827" />
<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";
} catch (e) {
/* ignore */
}
})();
</script>
</head>
<body>
<div id="root"></div>
apps/frontend/src/App.tsx
+6 -3
View File
@@ -1,11 +1,11 @@
import { Router, Route, useNavigate, useBeforeLeave } from "@solidjs/router";
import { OverviewPage } from "./pages/Overview";
import { MatchPage } from "./pages/MatchDetails";
import { SettingsPage } from "./pages/Settings";
import { type ParentProps, onMount, onCleanup, createSignal } from "solid-js";
function Layout(props: ParentProps) {
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}
</div>
);
@@ -67,10 +67,13 @@ function App() {
});
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() === "/"}>
<OverviewPage />
</Show>
<Show when={path() === "/einstellungen" || path() === "/settings"}>
<SettingsPage />
</Show>
<Show when={path().startsWith("/match/")}>
<MatchPage />
</Show>
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}
class={`flex flex-col items-center justify-center min-w-13.75 p-2 rounded-xl transition-all duration-200 ${
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
? "bg-gray-700 text-emerald-400 border border-emerald-500/30"
: "bg-gray-800 text-gray-400"
? "bg-chip text-accent border border-accent/30"
: "bg-surface text-ink-muted"
}`}
>
<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 };
}) => {
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-sm mt-1">
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) => (
<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">
<Show when={props.showBackButton}>
<button
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
xmlns="http://www.w3.org/2000/svg"
@@ -35,7 +35,7 @@ export const Header = (props: HeaderProps) => (
</div>
<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}
>
{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
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>
{/* Wir rendern 4 gefälschte Spiele-Karten */}
<For each={[1, 2, 3, 4]}>
{(_, i) => (
<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` }}
>
{/* Team A (Rechtsbündig simuliert) */}
<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="size-8 bg-gray-700 rounded-full" />
<div class="h-4 bg-chip rounded w-20"></div>
<div class="size-8 bg-chip rounded-full" />
</div>
{/* Mittlerer Zeit-/Ergebnisblock */}
<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>
{/* Team B (Linksbündig simuliert) */}
<div class="w-full flex justify-start pl-2 gap-2 items-center">
<div class="size-8 bg-gray-700 rounded-full" />
<div class="h-4 bg-gray-700 rounded w-20"></div>
<div class="size-8 bg-chip rounded-full" />
<div class="h-4 bg-chip rounded w-20"></div>
</div>
</div>
)}
apps/frontend/src/components/LogoFallback.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
export const LogoFallback = () => (
<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 */}
<svg
apps/frontend/src/components/MatchDetailsFutureSkeleton.tsx
+33 -29
View File
@@ -1,76 +1,80 @@
import { For } from "solid-js";
import { Card } from "./Card";
export function MatchDetailsFutureSkeleton() {
return (
<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="h-2.5 bg-gray-700 rounded w-24 mx-auto mb-4 animate-skeleton-loop" />
<div class="bg-gradient-to-b from-surface to-surface2 p-6 border-b border-line text-center">
<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-1 flex flex-col items-center gap-2 min-w-0">
<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" }}
/>
<div class="h-3 bg-gray-700 rounded w-20" />
<div class="h-3 bg-chip rounded w-20" />
</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="h-2.5 bg-gray-700 rounded w-14" />
<div class="h-5 bg-gray-700 rounded w-12" />
<div class="h-2 bg-gray-700 rounded w-6" />
<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-chip rounded w-14" />
<div class="h-5 bg-chip rounded w-12" />
<div class="h-2 bg-chip rounded w-6" />
</div>
<div class="flex-1 flex flex-col items-center gap-2 min-w-0">
<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" }}
/>
<div class="h-3 bg-gray-700 rounded w-20" />
<div class="h-3 bg-chip rounded w-20" />
</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 class="p-4 space-y-6">
<div class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 animate-skeleton-loop">
<div class="h-2.5 bg-gray-700 rounded w-40 mx-auto mb-3" />
<div class="h-3.5 w-full rounded-full bg-gray-900 border border-gray-750" />
<Card variant="section" class="p-4 animate-skeleton-loop">
<div class="h-2.5 bg-chip rounded w-40 mx-auto mb-3" />
<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="h-2.5 bg-gray-700 rounded w-14" />
<div class="h-2.5 bg-gray-700 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-chip rounded w-14" />
<div class="h-2.5 bg-chip rounded w-14" />
</div>
</div>
</Card>
<div
class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 h-32 animate-skeleton-loop"
<Card
variant="section"
class="p-4 h-32 animate-skeleton-loop"
style={{ "--delay": "120ms" }}
/>
<div
class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 space-y-4 animate-skeleton-loop"
<Card
variant="section"
class="p-4 space-y-4 animate-skeleton-loop"
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 gap-1">
<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>
</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">
<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>
</div>
</div>
</div>
</Card>
<div
class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 h-40 animate-skeleton-loop"
<Card
variant="section"
class="p-4 h-40 animate-skeleton-loop"
style={{ "--delay": "360ms" }}
/>
</div>
apps/frontend/src/components/MatchDetailsGenericSkeleton.tsx
+8 -6
View File
@@ -1,19 +1,20 @@
import { For } from "solid-js";
import { Card } from "./Card";
export function MatchDetailsGenericSkeleton() {
return (
<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
class="size-10 bg-gray-700 rounded-full animate-skeleton-loop"
class="size-10 bg-chip rounded-full animate-skeleton-loop"
style={{ "--delay": "0ms" }}
/>
<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" }}
/>
<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" }}
/>
</div>
@@ -21,8 +22,9 @@ export function MatchDetailsGenericSkeleton() {
<div class="p-4 space-y-3">
<For each={[0, 1, 2]}>
{(i) => (
<div
class="bg-gray-800/40 rounded-2xl h-16 border border-gray-800 animate-skeleton-loop"
<Card
variant="section"
class="h-16 animate-skeleton-loop"
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 { Card } from "./Card";
export function MatchDetailsSkeleton() {
return (
<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-1 flex items-center gap-2 justify-end">
<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" }}
/>
<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" }}
/>
</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" }}
/>
<div class="flex-1 flex items-center gap-2 justify-start">
<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" }}
/>
<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" }}
/>
</div>
@@ -35,29 +36,30 @@ export function MatchDetailsSkeleton() {
<div class="p-4 space-y-3">
<For each={[0, 1, 2, 3]}>
{(i) => (
<div
class="bg-gray-800/40 rounded-2xl p-3 border border-gray-800 animate-skeleton-loop"
<Card
variant="section"
class="p-3 animate-skeleton-loop"
style={{ "--delay": `${i * 120}ms` }}
>
<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 class="flex items-center gap-2">
<div class="flex-1 flex flex-col gap-2">
<div class="flex items-center gap-2 justify-end">
<div class="h-3 bg-gray-700 rounded w-16" />
<div class="size-8 bg-gray-700 rounded-full" />
<div class="h-3 bg-chip rounded w-16" />
<div class="size-8 bg-chip rounded-full" />
</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 items-center gap-2 justify-start">
<div class="size-8 bg-gray-700 rounded-full" />
<div class="h-3 bg-gray-700 rounded w-16" />
<div class="size-8 bg-chip rounded-full" />
<div class="h-3 bg-chip rounded w-16" />
</div>
</div>
</div>
</div>
</Card>
)}
</For>
</div>
apps/frontend/src/components/MatchInsights.tsx
+8 -7
View File
@@ -1,5 +1,6 @@
import { Show } from "solid-js";
import { MatchItem } from "./MatchItem";
import { Card } from "./Card";
interface FirstLeg {
homeScore: number;
awayScore: number;
@@ -15,13 +16,13 @@ export function MatchInsights(props: {
awayAvgGoals?: number; // z.B. 4.8
}) {
return (
<div class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 space-y-4">
<h3 class="text-xs font-bold uppercase tracking-wider text-gray-400 text-center">
Hinspiel
</h3>
<Show when={props.firstLeg}>
<Show when={props.firstLeg}>
<Card variant="section" class="p-4 space-y-4">
<h3 class="text-xs font-bold uppercase tracking-wider text-ink-muted text-center">
Hinspiel
</h3>
<MatchItem game={props.firstLeg} />
</Show>
</div>
</Card>
</Show>
);
}
apps/frontend/src/components/ResultTile.tsx
+4 -4
View File
@@ -1,15 +1,15 @@
export const ResultTile = (props: { home?: number; away?: number }) => {
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">
<span
class={props.home > props.away ? "text-emerald-400" : "text-gray-300"}
class={props.home > props.away ? "text-accent" : "text-ink"}
>
{props.home ?? "-"}
</span>
<span class="text-gray-600">:</span>
<span class="text-ink-faint">:</span>
<span
class={props.away > props.home ? "text-emerald-400" : "text-gray-300"}
class={props.away > props.home ? "text-accent" : "text-ink"}
>
{props.away ?? "-"}
</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 }) {
const homeMembers = () => props.homeRosters || [];
const awayMembers = () => props.awayRosters || [];
return (
<div class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 space-y-4 overflow-hidden">
<h3 class="text-xs font-bold uppercase tracking-wider text-gray-400 text-center">
<Card variant="section" class="p-4 space-y-4 overflow-hidden">
<h3 class="text-xs font-bold uppercase tracking-wider text-ink-muted text-center">
Kaderübersicht
</h3>
<div class="space-y-4">
{/* HEIM TEAM ROW */}
<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}
</div>
{/* Horizontale Scrollbar */}
@@ -19,14 +22,14 @@ export function SquadComparison(props: { homeTeam: any; awayTeam: any }) {
<For each={homeMembers()}>
{(player) => (
<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
src={player.imageUrl || "/fallback-avatar.svg"}
class="size-full rounded-full object-cover"
alt=""
/>
</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}
{/* Nur Nachname spart Platz */}
</span>
@@ -38,21 +41,21 @@ export function SquadComparison(props: { homeTeam: any; awayTeam: any }) {
{/* AUSWÄRTS TEAM ROW */}
<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}
</div>
<div class="flex gap-3 overflow-x-auto pb-2 scrollbar-none snap-x">
<For each={awayMembers()}>
{(player) => (
<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
src={player.imageUrl || "/fallback-avatar.svg"}
class="size-full rounded-full object-cover"
alt=""
/>
</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}
</span>
</div>
@@ -61,6 +64,6 @@ export function SquadComparison(props: { homeTeam: any; awayTeam: any }) {
</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 }) {
// Beispielhafte Mock-Daten – hier kommen später die echten Tabellenplatz-Daten rein
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;
return (
<div class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 space-y-3">
<h3 class="text-xs font-bold uppercase tracking-wider text-gray-400 text-center">
<Card variant="section" class="p-4 space-y-3">
<h3 class="text-xs font-bold uppercase tracking-wider text-ink-muted text-center">
Tabellen-Ausschnitt
</h3>
<div class="w-full space-y-1">
{/* 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="flex-1">Verein</span>
<span class="w-8 text-center">Sp.</span>
@@ -43,11 +45,11 @@ export function TableComparison(props: { homeTeam: any; awayTeam: any }) {
<div
class={`flex items-center text-xs p-2 rounded-xl border ${
sortedTeams()[0].name === props.homeTeam.name
? "bg-emerald-950/20 border-emerald-500/20"
: "bg-gray-900/40 border-transparent"
? "bg-accent/20 border-accent/20"
: "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}
</span>
<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}
</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}
</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}
</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}
</span>
</div>
{/* Platzhalter-Trenner, wenn Teams weiter auseinanderliegen */}
<Show when={diffInPlaces() > 0}>
<div class="flex items-center px-4 py-1 text-[10px] text-gray-600 font-medium">
<div class="w-1 h-3 border-l border-dashed border-gray-700 mr-3"></div>
<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-line mr-3"></div>
<span>
... {diffInPlaces()} {diffInPlaces() === 1 ? "Platz" : "Plätze"}{" "}
dazwischen ...
@@ -84,11 +86,11 @@ export function TableComparison(props: { homeTeam: any; awayTeam: any }) {
<div
class={`flex items-center text-xs p-2 rounded-xl border ${
sortedTeams()[1].name === props.homeTeam.name
? "bg-emerald-950/20 border-emerald-500/20"
: "bg-gray-900/40 border-transparent"
? "bg-accent/20 border-accent/20"
: "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}
</span>
<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}
</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}
</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}
</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}
</span>
</div>
</div>
</div>
</Card>
);
}
apps/frontend/src/index.css
+67
View File
@@ -1,5 +1,72 @@
@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 {
0% { background-position: 0 0; }
apps/frontend/src/pages/MatchDetails.tsx
+43 -42
View File
@@ -21,7 +21,7 @@ export function MatchPage() {
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
class="sticky top-5 left-2 z-22 p-2 cursor-pointer"
onClick={() => {
@@ -44,8 +44,8 @@ export function MatchPage() {
</svg>
<span class="sr-only">Back</span>
</button>
<div class="bg-gray-900">
{/* <Header title={""} showBackButton /> */}
<div class="bg-surface">
{/* <Header title="" showBackButton /> */}
<Show when={match()} fallback={<MatchDetailsGenericSkeleton />}>
<Show when={match().status !== "SCHEDULED"}>
<Show
@@ -77,9 +77,9 @@ const SLOT_LABEL: Record<string, string> = {
};
const SLOT_TEXT: Record<string, string> = {
SINGLE: "text-emerald-400/80",
DOUBLE: "text-sky-400/80",
SHOOT_OUT: "text-amber-400/80",
SINGLE: "text-accent/80",
DOUBLE: "text-accent5/80",
SHOOT_OUT: "text-accent4/80",
};
function sidePlayers(side: any) {
@@ -97,14 +97,14 @@ function PlayerChip(props: {
const name = () => (p() ? `${p().firstName} ${p().lastName}`.trim() : "Unbesetzt");
const avatar = (
<div
class={`size-8 rounded-full border p-0.5 bg-gray-900 flex-shrink-0 ${
props.winning ? "border-emerald-500/40" : "border-gray-700"
class={`size-8 rounded-full border p-0.5 bg-app flex-shrink-0 ${
props.winning ? "border-accent/40" : "border-line"
}`}
>
<Show
when={p()?.imageUrl}
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() || "?"}
</span>
}
@@ -121,7 +121,7 @@ function PlayerChip(props: {
<span
class={`min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-xs font-medium ${
props.side === "home" ? "text-left" : "text-right"
} ${props.winning ? "text-emerald-300" : "text-gray-200"}`}
} ${props.winning ? "text-accent" : "text-ink"}`}
>
{name()}
</span>
@@ -159,7 +159,7 @@ function PlayerSide(props: {
when={players().length > 0}
fallback={
<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"
}`}
>
@@ -186,7 +186,7 @@ function SlotCard(props: { slot: any }) {
const awayWins = () => awayTotal() > homeTotal();
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">
<span
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">
<Show
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) => (
<ResultTile home={s.homeGoals} away={s.awayGoals} />
@@ -212,21 +212,21 @@ function SlotCard(props: { slot: any }) {
<PlayerSide side={slot().away} align="away" winning={awayWins()} />
</div>
</div>
</Card>
);
}
function MatchDetails(props: { match: any }) {
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} />
</div>
<div class="p-4 space-y-3">
<Show
when={props.match.slots?.length}
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
</div>
}
@@ -241,6 +241,7 @@ function MatchDetails(props: { match: any }) {
}
import { For, Show } from "solid-js";
import { Card } from "../components/Card.tsx";
import { LogoFallback as JerseyFallback } from "../components/LogoFallback.tsx";
import { TableComparison } from "../components/TableComparison.tsx";
import { SquadComparison } from "../components/SquadComparison.tsx";
@@ -252,8 +253,8 @@ export default function MatchDetailsFuture(props: { match: any }) {
return (
<div>
{/* 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">
<span class="text-xs font-bold uppercase tracking-widest text-emerald-400 block mb-4">
<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-accent block mb-4">
{props.match.event.name}
</span>
@@ -270,27 +271,27 @@ export default function MatchDetailsFuture(props: { match: any }) {
alt=""
/>
</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}
</span>
</div>
{/* 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]">
<span class="text-xs font-semibold text-emerald-400 tracking-wider">
<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-accent tracking-wider">
{new Date(props.match.scheduledAt).toLocaleDateString("de-DE", {
weekday: "short",
day: "2-digit",
month: "2-digit",
})}
</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([], {
hour: "2-digit",
minute: "2-digit",
})}
</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
</span>
</div>
@@ -307,14 +308,14 @@ export default function MatchDetailsFuture(props: { match: any }) {
alt=""
/>
</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}
</span>
</div>
</div>
{/* 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
class="size-3.5"
fill="none"
@@ -340,24 +341,24 @@ export default function MatchDetailsFuture(props: { match: any }) {
{/* INHALT / ANALYSE SEKTIONEN */}
<div class="p-4 space-y-6">
{/* 2. PROGNOSE / VOTING BAR */}
<div class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800">
<h3 class="text-xs font-bold uppercase tracking-wider text-gray-400 mb-3 text-center">
<Card variant="section" class="p-4">
<h3 class="text-xs font-bold uppercase tracking-wider text-ink-muted mb-3 text-center">
Wer gewinnt das Match?
</h3>
{/* 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
class="bg-emerald-500 h-full transition-all duration-500"
class="bg-accent h-full transition-all duration-500"
style={{
width: `${props.match.prediction?.homeWinChance ?? 0}%`,
}}
></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}%` }}
></div>
<div
class="bg-blue-500 h-full transition-all duration-500"
class="bg-accent2 h-full transition-all duration-500"
style={{
width: `${props.match.prediction?.awayWinChance ?? 0}%`,
}}
@@ -365,17 +366,17 @@ export default function MatchDetailsFuture(props: { match: any }) {
</div>
{/* Legende / Prozentzahlen */}
<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}%)
</span>
<span class="text-gray-400">
<span class="text-ink-muted">
Remis ({props.match.prediction?.drawChance}%)
</span>
<span class="text-blue-400">
<span class="text-accent2">
Auswärts ({props.match.prediction?.awayWinChance}%)
</span>
</div>
</div>
</Card>
{props.match.standing && (
<TableComparison
@@ -385,8 +386,8 @@ export default function MatchDetailsFuture(props: { match: any }) {
)}
{/* 3. FORMKURVE (LAST 5 MATCHES) */}
<div class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 space-y-4">
<h3 class="text-xs font-bold uppercase tracking-wider text-gray-400 text-center">
<Card variant="section" class="p-4 space-y-4">
<h3 class="text-xs font-bold uppercase tracking-wider text-ink-muted text-center">
Aktuelle Formkurve
</h3>
<div class="flex items-center justify-between gap-2 px-2">
@@ -404,7 +405,7 @@ export default function MatchDetailsFuture(props: { match: any }) {
/>
))}
</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
</span>
{/* Form Team B */}
@@ -422,7 +423,7 @@ export default function MatchDetailsFuture(props: { match: any }) {
))}
</div>
</div>
</div>
</Card>
<SquadComparison
homeRosters={props.match.homeRosters}
@@ -441,11 +442,11 @@ function FormBadge(props: { result: "S" | "U" | "N" }) {
const styles = () => {
switch (props.result) {
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
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
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
+37 -15
View File
@@ -10,6 +10,7 @@ import {
// import { useSearchParams } from "@solidjs/router";
import { Header } from "../components/Header";
import { DayTab } from "../components/DayTab";
import { Card } from "../components/Card";
import { ListSkeleton } from "../components/ListSkeleton";
import { MatchItem } from "../components/MatchItem";
import { loadMatches, matchStore, type Match } from "../stores/matchStore";
@@ -182,11 +183,11 @@ export function OverviewPage() {
<>
<div
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
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()}>
{(day) => (
@@ -201,24 +202,46 @@ export function OverviewPage() {
</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
? "bg-emerald-600/30 border-emerald-500/40 bg-striped-loading-dark"
: "bg-gray-800/40 border-gray-800"
? "bg-accent/10 border-accent/40 bg-striped-loading-dark"
: ""
}`}
>
<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", {
weekday: "long",
day: "numeric",
month: "long",
})}
</span>
<a href="/einstellungen" class="shrink-0">
<button
aria-label="Einstellungen"
class="p-1.5 -m-0.5 rounded-lg text-ink-muted hover:text-ink hover:bg-elevated/60 transition-colors"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<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>
</button>
</a>
</div>
</div>
<div
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()}>
{(day) => {
@@ -250,11 +273,11 @@ export function OverviewPage() {
style={{
"--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">
{/* 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}
</span>
</div>
@@ -262,19 +285,18 @@ export function OverviewPage() {
<div class="space-y-2.5">
<For each={event.matches}>
{(game) => (
<a
<Card
style={{
"--delay": `${itemIndex.current++ * 25}ms`,
}}
href={`/match/${game.id}`}
class={`bg-gray-800 p-4 rounded-xl border border-gray-700/60 shadow-md flex ${
shouldAnimateOnEnter
? "animate-waterfall"
: ""
shadowed
class={`p-4 flex ${
shouldAnimateOnEnter ? "animate-waterfall" : ""
}`}
>
<MatchItem game={game} />
</a>
</Card>
)}
</For>
</div>
apps/frontend/src/pages/Settings.tsx
+97
View File
@@ -0,0 +1,97 @@
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" },
];
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;
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="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
+57
View File
@@ -0,0 +1,57 @@
import { createSignal, createEffect } from "solid-js";
export type ThemeMode = "light" | "dark" | "auto";
const STORAGE_KEY = "theme";
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 const themeStore = {
get mode() {
return getMode();
},
set(mode: ThemeMode) {
setModeSignal(mode);
},
isDark: () => isDark(getMode()),
};