From dca3a66206ec572932d4e9c0ee64d3a3ce20d3e3 Mon Sep 17 00:00:00 2001 From: Andreas Knuth Date: Wed, 1 Jul 2026 10:56:47 -0500 Subject: [PATCH] init localize --- .gitignore | 1 + app/{ => [locale]}/components/Bracket.tsx | 0 app/{ => [locale]}/components/Fixtures.tsx | 0 app/{ => [locale]}/components/Flag.tsx | 0 app/{ => [locale]}/components/Groups.tsx | 0 app/{ => [locale]}/components/KoFixtures.tsx | 0 app/{ => [locale]}/components/Simulation.tsx | 0 app/{ => [locale]}/components/ThirdPlace.tsx | 0 app/[locale]/favicon.ico | Bin 0 -> 15086 bytes app/[locale]/globals.css | 501 +++++++++++++++++++ app/[locale]/layout.tsx | 36 ++ app/{ => [locale]}/page.tsx | 0 app/layout.tsx | 27 +- lib/i18n/de.ts | 140 ++++++ lib/i18n/en.ts | 145 ++++++ lib/i18n/index.ts | 11 + lib/i18n/types.ts | 130 +++++ middleware.ts | 42 ++ 18 files changed, 1008 insertions(+), 25 deletions(-) rename app/{ => [locale]}/components/Bracket.tsx (100%) rename app/{ => [locale]}/components/Fixtures.tsx (100%) rename app/{ => [locale]}/components/Flag.tsx (100%) rename app/{ => [locale]}/components/Groups.tsx (100%) rename app/{ => [locale]}/components/KoFixtures.tsx (100%) rename app/{ => [locale]}/components/Simulation.tsx (100%) rename app/{ => [locale]}/components/ThirdPlace.tsx (100%) create mode 100644 app/[locale]/favicon.ico create mode 100644 app/[locale]/globals.css create mode 100644 app/[locale]/layout.tsx rename app/{ => [locale]}/page.tsx (100%) create mode 100644 lib/i18n/de.ts create mode 100644 lib/i18n/en.ts create mode 100644 lib/i18n/index.ts create mode 100644 lib/i18n/types.ts create mode 100644 middleware.ts diff --git a/.gitignore b/.gitignore index fd89724..922d93e 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ node_modules .env .env.local *.log +testdata \ No newline at end of file diff --git a/app/components/Bracket.tsx b/app/[locale]/components/Bracket.tsx similarity index 100% rename from app/components/Bracket.tsx rename to app/[locale]/components/Bracket.tsx diff --git a/app/components/Fixtures.tsx b/app/[locale]/components/Fixtures.tsx similarity index 100% rename from app/components/Fixtures.tsx rename to app/[locale]/components/Fixtures.tsx diff --git a/app/components/Flag.tsx b/app/[locale]/components/Flag.tsx similarity index 100% rename from app/components/Flag.tsx rename to app/[locale]/components/Flag.tsx diff --git a/app/components/Groups.tsx b/app/[locale]/components/Groups.tsx similarity index 100% rename from app/components/Groups.tsx rename to app/[locale]/components/Groups.tsx diff --git a/app/components/KoFixtures.tsx b/app/[locale]/components/KoFixtures.tsx similarity index 100% rename from app/components/KoFixtures.tsx rename to app/[locale]/components/KoFixtures.tsx diff --git a/app/components/Simulation.tsx b/app/[locale]/components/Simulation.tsx similarity index 100% rename from app/components/Simulation.tsx rename to app/[locale]/components/Simulation.tsx diff --git a/app/components/ThirdPlace.tsx b/app/[locale]/components/ThirdPlace.tsx similarity index 100% rename from app/components/ThirdPlace.tsx rename to app/[locale]/components/ThirdPlace.tsx diff --git a/app/[locale]/favicon.ico b/app/[locale]/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..220e24cfe0ae359721b7b84b1f08bdabee29b00b GIT binary patch literal 15086 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 V9HU>4@5FZ|K1c3_j{Z+S{{#Mnd!_&Y literal 0 HcmV?d00001 diff --git a/app/[locale]/globals.css b/app/[locale]/globals.css new file mode 100644 index 0000000..b33b2a5 --- /dev/null +++ b/app/[locale]/globals.css @@ -0,0 +1,501 @@ +:root { + /* Palette: Stadion bei Nacht über drei Zeitzonen. + Tiefes Mitternachtsblau, kühles Flutlicht-Weiß, warmer Rasen-Akzent, + ein Signal-Magenta für "live". Bewusst nicht die üblichen AI-Defaults. */ + --bg: #0b1020; + --bg-raised: #121a32; + --bg-card: #16203c; + --line: #243152; + --line-soft: #1b2540; + --ink: #eef2fb; + --ink-dim: #9aa6c4; + --ink-faint: #5f6d92; + --turf: #4ade80; /* Rasen / qualifiziert */ + --turf-deep: #1f7a45; + --floodlight: #cfe0ff; + --live: #ff3d7f; /* Live-Signal */ + --gold: #ffd24a; /* Sieger / Finale */ + --radius: 10px; + --radius-sm: 6px; + --shadow: 0 8px 30px rgba(0, 0, 0, 0.35); + + --font-display: "Archivo Expanded", "Archivo", system-ui, sans-serif; + --font-body: "Inter", system-ui, -apple-system, sans-serif; + --font-mono: "Geist Mono", "SFMono-Regular", ui-monospace, monospace; +} + +* { box-sizing: border-box; margin: 0; padding: 0; } + +html { scroll-behavior: smooth; } +@media (prefers-reduced-motion: reduce) { + html { scroll-behavior: auto; } + * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } +} + +body { + background: + radial-gradient(1200px 600px at 70% -10%, #16224a 0%, transparent 55%), + radial-gradient(900px 500px at 10% 0%, #102046 0%, transparent 50%), + var(--bg); + color: var(--ink); + font-family: var(--font-body); + font-size: 15px; + line-height: 1.5; + -webkit-font-smoothing: antialiased; + min-height: 100vh; +} + +a { color: inherit; text-decoration: none; } + +.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px 0 0; } + +/* ---------- Header / Hero ---------- */ +.masthead { + border-bottom: 1px solid var(--line); + background: linear-gradient(180deg, rgba(18,26,50,0.7), transparent); + position: sticky; top: 0; z-index: 50; + backdrop-filter: blur(10px); +} +.masthead-inner { + display: flex; align-items: center; justify-content: space-between; + padding: 14px 0; gap: 16px; flex-wrap: wrap; +} +.brand { display: flex; align-items: baseline; gap: 12px; } +.brand-mark { + font-family: var(--font-display); + font-weight: 800; letter-spacing: -0.02em; + font-size: clamp(20px, 3vw, 28px); + text-transform: uppercase; +} +.brand-mark .accent { color: var(--turf); } +.brand-sub { + font-family: var(--font-mono); font-size: 11px; + color: var(--ink-faint); letter-spacing: 0.08em; text-transform: uppercase; +} + +.status-pill { + display: inline-flex; align-items: center; gap: 8px; + font-family: var(--font-mono); font-size: 12px; + color: var(--ink-dim); + border: 1px solid var(--line); border-radius: 999px; + padding: 6px 12px; background: var(--bg-card); +} +.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); } +.dot.on { background: var(--turf); box-shadow: 0 0 0 3px rgba(74,222,128,0.18); } +.dot.live { background: var(--live); box-shadow: 0 0 0 3px rgba(255,61,127,0.2); animation: pulse 1.6s infinite; } +@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(255,61,127,0); } } + +/* ---------- Tabs ---------- */ +.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 4px; } +.masthead-tabs { width: 100%; border-bottom: none; margin: 0; } +.tab { + font-family: var(--font-display); font-weight: 700; + text-transform: uppercase; letter-spacing: 0.01em; + font-size: 14px; color: var(--ink-faint); + padding: 16px 18px; cursor: pointer; border: none; background: none; + border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; +} +.tab:hover { color: var(--ink-dim); } +.tab.active { color: var(--ink); border-bottom-color: var(--turf); } + +.section { padding: 28px 0 64px; } + +/* ---------- Gruppen ---------- */ +.group-grid { + display: grid; gap: 16px; + grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); +} +.group-card { + background: var(--bg-card); border: 1px solid var(--line); + border-radius: var(--radius); overflow: hidden; +} +.group-head { + display: flex; align-items: center; justify-content: space-between; + padding: 12px 14px; border-bottom: 1px solid var(--line-soft); + background: var(--bg-raised); +} +.group-name { + font-family: var(--font-display); font-weight: 800; font-size: 16px; + text-transform: uppercase; letter-spacing: 0.02em; +} +.group-name.group-complete { color: var(--turf); } +.group-tag { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); } + +table.standings { width: 100%; border-collapse: collapse; } +.standings th { + font-family: var(--font-mono); font-size: 10px; font-weight: 500; + text-transform: uppercase; letter-spacing: 0.06em; + color: var(--ink-faint); text-align: right; padding: 8px 6px; +} +.standings th.team { text-align: left; padding-left: 14px; } +.standings td { + padding: 9px 6px; text-align: right; font-variant-numeric: tabular-nums; + border-top: 1px solid var(--line-soft); font-size: 13px; +} +.standings td.team { + text-align: left; padding-left: 14px; display: flex; align-items: center; gap: 9px; +} +.rankdot { + width: 18px; height: 18px; border-radius: 5px; flex: none; + display: grid; place-items: center; + font-family: var(--font-mono); font-size: 10px; font-weight: 600; + color: var(--bg); background: var(--ink-faint); +} +.rankdot.q1, .rankdot.q2 { background: var(--turf); } +.rankdot.q3 { background: var(--gold); color: #2a2200; } +.rankdot.q3.out { background: var(--ink-faint); color: var(--bg); } +.team-name { font-weight: 600; } +.team-code { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); } +.pts { font-weight: 700; color: var(--floodlight); } + +/* Live-Zeile */ +.score-live { color: var(--live); font-weight: 700; } + +/* Gruppen-Tab: grüne Hervorhebung für Teams mit laufendem Spiel */ +.group-grid .row-live { background: rgba(74, 222, 128, 0.08); } +.group-grid .row-live .team-name { color: var(--turf); } +.group-grid .row-live-dot { + background: var(--turf); +} + +/* ---------- Drittplatzierte ---------- */ +.third-wrap { margin-top: 8px; } +.third-table { width: 100%; border-collapse: collapse; background: var(--bg-card); + border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } +.third-table th { + font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; + letter-spacing: 0.06em; color: var(--ink-faint); padding: 11px 12px; text-align: right; + background: var(--bg-raised); border-bottom: 1px solid var(--line); +} +.third-table th:first-child, .third-table td:first-child { text-align: left; } +.third-table td { + padding: 10px 12px; text-align: right; font-variant-numeric: tabular-nums; + border-top: 1px solid var(--line-soft); font-size: 13px; +} +.third-row.qual { background: linear-gradient(90deg, rgba(74,222,128,0.07), transparent); } +.third-row.cut td { border-top: 2px solid var(--turf-deep); } +.qual-badge { + font-family: var(--font-mono); font-size: 10px; padding: 2px 7px; border-radius: 999px; +} +.qual-badge.yes { background: rgba(74,222,128,0.16); color: var(--turf); } +.qual-badge.no { background: rgba(95,109,146,0.16); color: var(--ink-faint); } + +/* Drittplatzierte: Teamname grün, wenn alle 3 Gruppenspiele gespielt */ +.third-table td.team-complete { color: var(--turf); } + +/* ---------- Bracket ---------- */ +.bracket-banner { + display: flex; align-items: center; gap: 12px; flex-wrap: wrap; + background: var(--bg-card); border: 1px solid var(--line); + border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px; +} +.bracket-banner .k { + font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); +} +.bracket-banner .v { font-family: var(--font-mono); font-size: 12px; color: var(--turf); } +.bracket-scroll { + margin-left: -20px; + margin-right: -20px; + padding-left: 20px; + padding-right: 20px; + overflow-x: auto; + overflow-y: visible; + padding-bottom: 10px; + scrollbar-gutter: stable; +} +.bracket { + display: flex; gap: 26px; min-width: max-content; align-items: stretch; + padding-bottom: 8px; +} +.round { display: flex; flex-direction: column; min-width: 220px; } +.round-label { + font-family: var(--font-display); font-weight: 800; text-transform: uppercase; + font-size: 12px; letter-spacing: 0.06em; color: var(--ink-faint); + margin-bottom: 10px; padding-left: 2px; +} +.round-matches { display: flex; flex-direction: column; justify-content: space-around; flex: 1; gap: 12px; } + +.tie { + background: var(--bg-card); border: 1px solid var(--line); + border-radius: var(--radius-sm); position: relative; +} +.tie.final-tie { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(255,210,74,0.2); } +.tie-meta { + font-family: var(--font-mono); font-size: 9px; color: rgba(255,255,255,0.55); + letter-spacing: 0.04em; padding: 5px 10px 0; + white-space: nowrap; overflow: hidden; text-overflow: ellipsis; +} +.match-badge { + position: absolute; top: -6px; right: -6px; + font-family: var(--font-mono); font-size: 9px; font-weight: 700; + line-height: 18px; min-width: 18px; text-align: center; + border-radius: 999px; padding: 0 4px; + background: #1a2744; color: #ffffff; border: 1px solid rgba(255,255,255,0.15); +} +.side { + display: flex; align-items: center; justify-content: space-between; + padding: 8px 10px; font-size: 13px; +} +.side + .side { border-top: 1px solid var(--line-soft); } +.side .nm { display: flex; align-items: center; gap: 7px; min-width: 0; } +.side .nm .c { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); } +.side .lbl { color: var(--ink-dim); font-style: italic; } +.side .sc { font-family: var(--font-mono); font-weight: 700; color: var(--floodlight); } +.side.win .sc { color: var(--turf); } +.side .prob { + font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); + margin-left: 6px; +} + +.legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 16px; + font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); } +.legend span { display: inline-flex; align-items: center; gap: 6px; } +.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; } + +/* Tooltip im K.o.-Baum (position: fixed, damit overflow-x den Tooltip nicht abschneidet) */ +.kobaum-tip { + position: fixed; + z-index: 200; + pointer-events: none; + background: var(--bg-card); + border: 1px solid var(--line); + color: var(--ink); + font-family: var(--font-mono); + font-size: 12px; + padding: 6px 9px; + border-radius: var(--radius-sm); + white-space: nowrap; + box-shadow: 0 6px 20px rgba(0,0,0,0.4); +} + +/* ---------- Zustände ---------- */ +.notice { + background: var(--bg-card); border: 1px solid var(--line); + border-radius: var(--radius); padding: 18px 20px; color: var(--ink-dim); + font-size: 14px; +} +.notice.err { border-color: #5a2230; color: #ffb0c0; } +.skel { background: var(--bg-card); border: 1px solid var(--line); + border-radius: var(--radius); height: 220px; animation: shimmer 1.4s infinite; } +@keyframes shimmer { 50% { opacity: .55; } } + +.foot { + border-top: 1px solid var(--line); padding: 24px 0 48px; + color: var(--ink-faint); font-size: 12px; font-family: var(--font-mono); +} +.foot a { color: var(--ink-dim); text-decoration: underline; text-underline-offset: 2px; } + +/* ===================================================================== + MOBIL — Breakpoint 640px (iPhone ~375, Galaxy ~412, alle ≤640) + ===================================================================== */ +@media (max-width: 640px) { + body { font-size: 14px; } + .wrap { padding: 0 12px; } + + /* ---------- mobil: Header ---------- */ + .masthead { padding: 0 12px; } + .masthead-inner { padding: 10px 0; gap: 8px; } + .brand { gap: 6px; } + .brand-mark { font-size: 18px; } + .brand-sub { font-size: 9px; letter-spacing: 0.04em; } + .status-pill { font-size: 10px; padding: 4px 10px; gap: 5px; } + .dot { width: 6px; height: 6px; } + + /* ---------- mobil: Tabs (zwei Zeilen, kein horizontaler Scroll) ---------- */ + .masthead-tabs { + flex-wrap: wrap; + justify-content: center; + gap: 2px 4px; + } + .tab { padding: 8px 13px; font-size: 12px; } + + .section { padding: 18px 0 48px; } + + /* ---------- mobil: Gruppen ---------- */ + .group-grid { grid-template-columns: 1fr; gap: 12px; } + .group-head { padding: 10px 12px; } + .group-name { font-size: 14px; } + .standings th { font-size: 9px; padding: 6px 3px; } + .standings th.team { padding-left: 10px; } + .standings td { font-size: 11px; padding: 7px 3px; } + .standings td.team { padding-left: 10px; gap: 6px; } + .rankdot { width: 16px; height: 16px; font-size: 8px; } + .team-name { font-size: 12px; } + + /* ---------- mobil: Spiele (Fixtures) ---------- */ + .fx { grid-template-columns: 1fr; gap: 8px; padding: 10px 12px; } + .fx-meta { flex-direction: row; gap: 14px; align-items: center; } + .fx-status { order: -1; } + .fx-teams { column-gap: 16px; } + .fx-score { font-size: 16px; min-width: 44px; } + .fx-vs { font-size: 14px; min-width: 44px; } + .fx-name { font-size: 13px; max-width: 110px; } + .grp-switch { gap: 8px; } + .grp-chip { width: 40px; height: 40px; font-size: 14px; } + + /* ---------- mobil: Drittplatzierte ---------- */ + .third-table th { font-size: 9px; padding: 8px 6px; } + .third-table td { font-size: 11px; padding: 7px 6px; } + + /* ---------- mobil: K.o.-Baum ---------- */ + .bracket-scroll { + margin-left: -12px; + margin-right: -12px; + padding-left: 12px; + padding-right: 12px; + -webkit-overflow-scrolling: touch; + } + .bracket { gap: 18px; } + .round { min-width: 170px; } + .round-label { font-size: 10px; } + .round-matches { gap: 8px; } + .tie-meta { font-size: 8px; padding: 3px 8px 0; } + .side { padding: 6px 8px; font-size: 11px; } + .side .nm { gap: 5px; } + .prov-mark { font-size: 10px; } + .side .prob { font-size: 9px; } + .bracket-banner { padding: 10px 12px; font-size: 13px; } + .legend { font-size: 10px; gap: 12px; } + + /* ---------- mobil: Simulation ---------- */ + .sim-row { flex-wrap: wrap; gap: 6px; padding: 8px 10px; } + .sim-row-phase { min-width: 100%; font-size: 9px; } + .sim-row-date { min-width: auto; font-size: 9px; } + .sim-row input[type="number"] { width: 32px; height: 32px; font-size: 15px; } + + /* ---------- mobil: Footer ---------- */ + .foot { font-size: 11px; padding: 16px 0 32px; } + + /* Kein horizontaler Überlauf außer im Bracket */ + body { overflow-x: hidden; } + .bracket-scroll { overflow-x: auto; } +} + +/* ============ Erweiterungen v2 ============ */ + +/* Flaggen / Wappen */ +.flag { + border-radius: 50%; object-fit: cover; flex: none; + background: var(--bg-raised); border: 1px solid var(--line-soft); +} +.flag-fallback { + display: grid; place-items: center; + font-family: var(--font-mono); font-size: 9px; color: var(--ink-faint); + text-transform: uppercase; +} + +/* Gruppen-Header als Button */ +.group-head-btn { + width: 100%; cursor: pointer; text-align: left; + font: inherit; color: inherit; + transition: background .15s; +} +.group-head-btn:hover { background: var(--bg-card); } +.group-head-btn:hover .group-tag { color: var(--turf); } +.group-head-btn:focus-visible { outline: 2px solid var(--turf); outline-offset: -2px; } + +/* Gruppen-Wechsler im Spiele-Tab */ +.grp-switch { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; } +.grp-chip { + width: 38px; height: 38px; border-radius: 8px; + border: 1px solid var(--line); background: var(--bg-card); + color: var(--ink-dim); font-family: var(--font-display); font-weight: 700; + font-size: 14px; cursor: pointer; transition: all .15s; +} +.grp-chip:hover { border-color: var(--turf); color: var(--ink); } +.grp-chip.active { background: var(--turf); color: var(--bg); border-color: var(--turf); } + +/* Spiele-Karten */ +.fixtures { display: flex; flex-direction: column; gap: 10px; } +.fx { + background: var(--bg-card); border: 1px solid var(--line); + border-radius: var(--radius); padding: 12px 16px; + display: grid; grid-template-columns: 110px minmax(0, 560px) 1fr; gap: 14px; align-items: center; +} +.fx-live { border-color: rgba(255,61,127,0.4); } +.fx-status { + display: flex; align-items: center; gap: 7px; + font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); +} +.fx-teams { + display: grid; + grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); + align-items: center; column-gap: 34px; +} +/* Beide Teams: Flagge links, Name daneben. Linkes Team rechtsbündig an den Score, + rechtes Team linksbündig – so ist der Abstand zum Ergebnis beidseitig gleich. */ +.fx-team { display: flex; align-items: center; gap: 8px; min-width: 0; } +.fx-team.home { justify-content: flex-end; } +.fx-team.away { justify-content: flex-start; } +.fx-team .fx-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } +.fx-team.win .fx-name { color: var(--turf); } +.fx-score { font-family: var(--font-mono); font-weight: 700; font-size: 18px; color: var(--floodlight); white-space: nowrap; text-align: center; min-width: 54px; } +.fx-score.score-live { color: var(--live); } +.fx-vs { font-family: var(--font-mono); font-size: 15px; color: var(--ink-faint); text-align: center; min-width: 54px; } +.fx-meta { + display: flex; flex-direction: column; gap: 3px; align-items: flex-end; + font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); white-space: nowrap; +} +/* Austragungsort heller hervorheben. */ +.fx-venue { color: var(--ink-dim); } + +/* Live-Tabelle der Gruppe unterhalb der Spiele. */ +.fx-standings { margin-top: 22px; } +.fx-standings-title { + font-family: var(--font-display, var(--font-mono)); font-size: 13px; letter-spacing: 0.06em; + text-transform: uppercase; color: var(--ink-dim); margin: 0 2px 10px; + display: flex; align-items: center; gap: 10px; +} +.fx-standings-live { + font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; + color: var(--live); font-weight: 700; + animation: livepulse 1.6s ease-in-out infinite; +} +.fx-standings .standings { width: 100%; } +/* Zeile eines Teams mit laufendem Spiel hervorheben. */ +.fx-standings .row-live { background: rgba(255, 61, 127, 0.07); } +.fx-standings .row-live .team-name { color: var(--floodlight); } +.row-live-dot { + display: inline-block; width: 7px; height: 7px; border-radius: 50%; + background: var(--live); margin-left: 8px; vertical-align: middle; + animation: livepulse 1.6s ease-in-out infinite; +} +@keyframes livepulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.35; } +} + +@media (max-width: 720px) { + .fx { grid-template-columns: 1fr; gap: 8px; } + .fx-meta { flex-direction: row; gap: 14px; align-items: center; } + .fx-status { order: -1; } +} + +/* Bracket: Label-Header braucht kein Extra-Padding mehr (sitzt im Kasten) */ +.round-matches { padding-top: 0; } + +/* Bracket: fix vs. vorläufig. + .nm trägt die Standardfarbe; Team-Name liegt in .tn. */ +.side .nm .tn { color: var(--ink); } + +/* vorläufig: gedimmt + kursiv + Marker */ +.side.prov .nm .tn { color: var(--ink-dim); font-style: italic; } +.prov-mark { + color: #f0a23a; font-family: var(--font-mono); font-weight: 700; + font-size: 12px; margin-left: 2px; +} + +/* fix: echtes Team steht fest -> fett weiß + grüner Marker links */ +.side.fix .nm .tn { color: #ffffff; font-weight: 700; } +.side.fix { box-shadow: inset 3px 0 0 var(--turf-deep); } + +/* Sieger eines bereits gespielten Tie sticht zusätzlich grün hervor */ +.side.win .nm .tn { color: var(--turf); font-weight: 700; } +.side.win { box-shadow: inset 3px 0 0 var(--turf); } + +/* Legende-Marker */ +.legend i.leg-fix { background: var(--turf-deep); } +.legend i.leg-prov { + background: repeating-linear-gradient(45deg, #f0a23a, #f0a23a 3px, transparent 3px, transparent 6px); + border: 1px solid #f0a23a; +} \ No newline at end of file diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx new file mode 100644 index 0000000..2aedc84 --- /dev/null +++ b/app/[locale]/layout.tsx @@ -0,0 +1,36 @@ +import type { Metadata } from "next"; +import Script from "next/script"; +import { Locale, getDictionary } from "@/lib/i18n"; + +export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise { + const { locale } = await params; + const dict = getDictionary(locale as Locale); + return { + title: dict.meta.title, + description: dict.meta.description, + }; +} + +export async function generateStaticParams() { + return [{ locale: "en" }, { locale: "de" }]; +} + +export default function LocaleLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + <> + {children} + {process.env.NEXT_PUBLIC_UMAMI_SRC && process.env.NEXT_PUBLIC_UMAMI_ID && ( +