frontend/src/App.jsx

@@ -4,9 +4,13 @@ import React, { useEffect, useState } from "react";
 import { api } from "./api/client";
 import { cycleTag } from "./utils/cycleTag";
 import { getChipLS, setChipLS, clearChipLS } from "./utils/chipStorage";
+import { getWinner, setWinner as saveWinnerLS } from "./utils/winnerStorage";
+
 import { useHpGlobalStyles } from "./styles/hooks/useHpGlobalStyles";
 import { styles } from "./styles/styles";
 
+import { applyTheme, loadThemeKey, saveThemeKey, DEFAULT_THEME_KEY } from "./styles/themes";
+
 import AdminPanel from "./components/AdminPanel";
 import LoginPage from "./components/LoginPage";
 import TopBar from "./components/TopBar";
@@ -15,6 +19,8 @@ import ChipModal from "./components/ChipModal";
 import HelpModal from "./components/HelpModal";
 import GamePickerCard from "./components/GamePickerCard";
 import SheetSection from "./components/SheetSection";
+import DesignModal from "./components/DesignModal";
+import WinnerCard from "./components/WinnerCard";
 
 export default function App() {
   useHpGlobalStyles();
@@ -31,6 +37,9 @@ export default function App() {
   const [sheet, setSheet] = useState(null);
   const [pulseId, setPulseId] = useState(null);
 
+  // Winner (per game)
+  const [winnerName, setWinnerName] = useState("");
+
   // Modals
   const [helpOpen, setHelpOpen] = useState(false);
 
@@ -45,11 +54,20 @@ export default function App() {
   const [pwMsg, setPwMsg] = useState("");
   const [pwSaving, setPwSaving] = useState(false);
 
+  // Theme
+  const [designOpen, setDesignOpen] = useState(false);
+  const [themeKey, setThemeKey] = useState(DEFAULT_THEME_KEY);
+
   // ===== Data loaders =====
   const load = async () => {
     const m = await api("/auth/me");
     setMe(m);
 
+    // Theme pro User laden & anwenden
+    const tk = loadThemeKey(m?.email);
+    setThemeKey(tk);
+    applyTheme(tk);
+
     const gs = await api("/games");
     setGames(gs);
 
@@ -62,8 +80,6 @@ export default function App() {
     setSheet(sh);
   };
 
-  // ===== Effects =====
-
   // Dropdown outside click
   useEffect(() => {
     const onDown = (e) => {
@@ -92,9 +108,9 @@ export default function App() {
       if (!gameId) return;
       try {
         await reloadSheet();
-      } catch {
+      } catch {}
-        // ignore
+      // Winner pro Game aus LS laden
-      }
+      setWinnerName(getWinner(gameId));
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [gameId]);
@@ -114,6 +130,7 @@ export default function App() {
     setGames([]);
     setGameId(null);
     setSheet(null);
+    setWinnerName("");
   };
 
   // ===== Password change =====
@@ -153,6 +170,18 @@ export default function App() {
     }
   };
 
+  // ===== Theme actions =====
+  const openDesignModal = () => {
+    setDesignOpen(true);
+    setUserMenuOpen(false);
+  };
+
+  const selectTheme = (key) => {
+    setThemeKey(key);
+    applyTheme(key);
+    saveThemeKey(me?.email, key);
+  };
+
   // ===== Game actions =====
   const newGame = async () => {
     const g = await api("/games", {
@@ -164,6 +193,12 @@ export default function App() {
     setGameId(g.id);
   };
 
+  // ===== Winner actions =====
+  const saveWinner = () => {
+    if (!gameId) return;
+    saveWinnerLS(gameId, winnerName.trim());
+  };
+
   // ===== Sheet actions =====
   const cycleStatus = async (entry) => {
     let next = 0;
@@ -185,14 +220,12 @@ export default function App() {
   const toggleTag = async (entry) => {
     const next = cycleTag(entry.note_tag);
 
-    // going to "s" -> open chip modal, don't write backend yet
     if (next === "s") {
       setChipEntry(entry);
       setChipOpen(true);
       return;
     }
 
-    // s -> — : clear local chip
     if (next === null) clearChipLS(gameId, entry.entry_id);
 
     await api(`/games/${gameId}/sheet/${entry.entry_id}`, {
@@ -210,11 +243,9 @@ export default function App() {
     setChipOpen(false);
     setChipEntry(null);
 
-    // frontend-only save
     setChipLS(gameId, entry.entry_id, chip);
 
     try {
-      // backend only gets "s"
       await api(`/games/${gameId}/sheet/${entry.entry_id}`, {
         method: "PATCH",
         body: JSON.stringify({ note_tag: "s" }),
@@ -253,7 +284,7 @@ export default function App() {
       const chip = getChipLS(gameId, entry.entry_id);
       return chip ? `s.${chip}` : "s";
     }
-    return t; // i oder m
+    return t;
   };
 
   // ===== Login page =====
@@ -291,6 +322,7 @@ export default function App() {
           userMenuOpen={userMenuOpen}
           setUserMenuOpen={setUserMenuOpen}
           openPwModal={openPwModal}
+          openDesignModal={openDesignModal}
           doLogout={doLogout}
           newGame={newGame}
         />
@@ -320,6 +352,9 @@ export default function App() {
           ))}
         </div>
 
+        {/* Sieger ganz unten */}
+        <WinnerCard value={winnerName} setValue={setWinnerName} onSave={saveWinner} />
+
         <div style={{ height: 24 }} />
       </div>
 
@@ -335,11 +370,17 @@ export default function App() {
         savePassword={savePassword}
       />
 
-      <ChipModal
+      <DesignModal
-        chipOpen={chipOpen}
+        open={designOpen}
-        closeChipModalToDash={closeChipModalToDash}
+        onClose={() => setDesignOpen(false)}
-        chooseChip={chooseChip}
+        themeKey={themeKey}
+        onSelect={(k) => {
+          selectTheme(k);
+          setDesignOpen(false);
+        }}
       />
+
+      <ChipModal chipOpen={chipOpen} closeChipModalToDash={closeChipModalToDash} chooseChip={chooseChip} />
     </div>
   );
 }

frontend/src/components/DesignModal.jsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { styles } from "../styles/styles";
+import { stylesTokens } from "../styles/theme";
+import { THEMES } from "../styles/themes";
+
+export default function DesignModal({ open, onClose, themeKey, onSelect }) {
+  if (!open) return null;
+
+  const themeEntries = Object.entries(THEMES);
+
+  return (
+    <div style={styles.modalOverlay} onMouseDown={onClose}>
+      <div style={styles.modalCard} onMouseDown={(e) => e.stopPropagation()}>
+        <div style={styles.modalHeader}>
+          <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>Design ändern</div>
+          <button onClick={onClose} style={styles.modalCloseBtn} aria-label="Schließen">
+            ✕
+          </button>
+        </div>
+
+        <div style={{ marginTop: 12, color: stylesTokens.textMain, opacity: 0.92 }}>
+          Wähle dein Theme:
+        </div>
+
+        <div style={{ marginTop: 12, display: "grid", gap: 10 }}>
+          {themeEntries.map(([key, t]) => {
+            const active = key === themeKey;
+
+            return (
+              <button
+                key={key}
+                onClick={() => onSelect(key)}
+                style={{
+                  ...styles.secondaryBtn,
+                  textAlign: "left",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  border: active
+                    ? `1px solid rgba(233,216,166,0.40)`
+                    : `1px solid rgba(233,216,166,0.18)`,
+                }}
+              >
+                <span style={{ fontWeight: 1000 }}>{t.label}</span>
+                <span style={{ opacity: 0.75 }}>{active ? "✓ aktiv" : ""}</span>
+              </button>
+            );
+          })}
+        </div>
+
+        <div style={{ marginTop: 12, fontSize: 12, opacity: 0.75, color: stylesTokens.textDim }}>
+          Hinweis: Das Design wird pro User gespeichert (Email).
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/TopBar.jsx

@@ -7,44 +7,20 @@ export default function TopBar({
   userMenuOpen,
   setUserMenuOpen,
   openPwModal,
+  openDesignModal,
   doLogout,
   newGame,
 }) {
   return (
     <div style={styles.topBar}>
-      {/* LINKS: nur Rolle */}
       <div>
-        <div style={{ fontWeight: 900, color: stylesTokens.textGold }}>
+        <div style={{ fontWeight: 900, color: stylesTokens.textGold }}>Notizbogen</div>
-          Notizbogen
+        <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>{me.email}</div>
-        </div>
-        <div
-          style={{
-            fontSize: 12,
-            opacity: 0.8,
-            color: stylesTokens.textDim,
-          }}
-        >
-          {me.email}
-        </div>
       </div>
 
-      {/* RECHTS: Account + Neues Spiel */}
+      <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "nowrap" }} data-user-menu>
-      <div
-        style={{
-          display: "flex",
-          gap: 8,
-          alignItems: "center",
-          flexWrap: "nowrap",
-        }}
-        data-user-menu
-      >
-        {/* Account Dropdown */}
         <div style={{ position: "relative" }}>
-          <button
+          <button onClick={() => setUserMenuOpen((v) => !v)} style={styles.userBtn} title="User Menü">
-            onClick={() => setUserMenuOpen((v) => !v)}
-            style={styles.userBtn}
-            title="User Menü"
-          >
             <span style={{ fontSize: 16 }}>👤</span>
             <span>User</span>
             <span style={{ opacity: 0.7 }}>▾</span>
@@ -52,7 +28,6 @@ export default function TopBar({
 
           {userMenuOpen && (
             <div style={styles.userDropdown}>
-              {/* Email Info */}
               <div
                 style={{
                   padding: "10px 12px",
@@ -65,11 +40,14 @@ export default function TopBar({
                 {me.email}
               </div>
 
-              {/* Actions */}
               <button onClick={openPwModal} style={styles.userDropdownItem}>
                 Passwort setzen
               </button>
 
+              <button onClick={openDesignModal} style={styles.userDropdownItem}>
+                Design ändern
+              </button>
+
               <div style={styles.userDropdownDivider} />
 
               <button
@@ -77,10 +55,7 @@ export default function TopBar({
                   setUserMenuOpen(false);
                   doLogout();
                 }}
-                style={{
+                style={{ ...styles.userDropdownItem, color: "#ffb3b3" }}
-                  ...styles.userDropdownItem,
-                  color: "#ffb3b3",
-                }}
               >
                 Logout
               </button>
@@ -88,7 +63,6 @@ export default function TopBar({
           )}
         </div>
 
-        {/* Neues Spiel Button */}
         <button onClick={newGame} style={styles.primaryBtn}>
           ✦ New Game
         </button>

frontend/src/components/WinnerCard.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { styles } from "../styles/styles";
+import { stylesTokens } from "../styles/theme";
+
+export default function WinnerCard({ value, setValue, onSave }) {
+  return (
+    <div style={{ marginTop: 14 }}>
+      <div style={styles.card}>
+        <div style={styles.sectionHeader}>Sieger</div>
+
+        <div style={styles.cardBody}>
+          <input
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            placeholder="Name des Siegers"
+            style={{ ...styles.input, flex: 1 }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") onSave();
+            }}
+          />
+
+          <button onClick={onSave} style={styles.primaryBtn} title="Speichern">
+            Speichern
+          </button>
+        </div>
+
+        <div style={{ padding: "0 12px 12px", fontSize: 12, color: stylesTokens.textDim }}>
+          Wird pro Spiel lokal gespeichert.
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/styles/hooks/useHpGlobalStyles.js

@@ -1,5 +1,8 @@
 import { useEffect } from "react";
 import { stylesTokens } from "../theme";
+import { applyTheme } from "../themes";
+
+
 
 export function useHpGlobalStyles() {
   // Google Fonts
@@ -81,4 +84,9 @@ export function useHpGlobalStyles() {
     `;
     document.head.appendChild(style);
   }, []);
+
+  // Ensure a theme is applied once (fallback)
+  useEffect(() => {
+    applyTheme("default");
+  }, []);
 }

frontend/src/styles/theme.js

@@ -1,11 +1,11 @@
 export const stylesTokens = {
-    pageBg: "#0b0b0c",
+    pageBg: "var(--hp-pageBg)",
-    panelBg: "rgba(20, 20, 22, 0.55)",
+    panelBg: "var(--hp-panelBg)",
-    panelBorder: "rgba(233, 216, 166, 0.14)",
+    panelBorder: "var(--hp-panelBorder)",
 
-    textMain: "rgba(245, 239, 220, 0.92)",
+    textMain: "var(--hp-textMain)",
-    textDim: "rgba(233, 216, 166, 0.70)",
+    textDim: "var(--hp-textDim)",
-    textGold: "#e9d8a6",
+    textGold: "var(--hp-textGold)",
 
-    goldLine: "rgba(233, 216, 166, 0.18)",
+    goldLine: "var(--hp-goldLine)",
   };

frontend/src/styles/themes.js

@@ -0,0 +1,106 @@
+// frontend/src/styles/themes.js
+export const THEMES = {
+  default: {
+    label: "Standard",
+    tokens: {
+      pageBg: "#0b0b0c",
+      panelBg: "rgba(20, 20, 22, 0.55)",
+      panelBorder: "rgba(233, 216, 166, 0.14)",
+
+      textMain: "rgba(245, 239, 220, 0.92)",
+      textDim: "rgba(233, 216, 166, 0.70)",
+      textGold: "#e9d8a6",
+
+      goldLine: "rgba(233, 216, 166, 0.18)",
+    },
+  },
+
+  gryffindor: {
+    label: "Gryffindor",
+    tokens: {
+      pageBg: "#0b0b0c",
+      panelBg: "rgba(20, 14, 14, 0.58)",
+      panelBorder: "rgba(255, 190, 120, 0.16)",
+
+      textMain: "rgba(245, 239, 220, 0.92)",
+      textDim: "rgba(255, 210, 170, 0.70)",
+      textGold: "#ffb86b",
+
+      goldLine: "rgba(255, 184, 107, 0.18)",
+    },
+  },
+
+  slytherin: {
+    label: "Slytherin",
+    tokens: {
+      pageBg: "#070a09",
+      panelBg: "rgba(12, 20, 16, 0.58)",
+      panelBorder: "rgba(120, 255, 190, 0.12)",
+
+      textMain: "rgba(235, 245, 240, 0.92)",
+      textDim: "rgba(175, 240, 210, 0.70)",
+      textGold: "#7CFFB6",
+
+      goldLine: "rgba(124, 255, 182, 0.18)",
+    },
+  },
+
+  ravenclaw: {
+    label: "Ravenclaw",
+    tokens: {
+      pageBg: "#07080c",
+      panelBg: "rgba(14, 16, 24, 0.60)",
+      panelBorder: "rgba(140, 180, 255, 0.14)",
+
+      textMain: "rgba(235, 240, 250, 0.92)",
+      textDim: "rgba(180, 205, 255, 0.72)",
+      textGold: "#8FB6FF",
+
+      goldLine: "rgba(143, 182, 255, 0.18)",
+    },
+  },
+
+  hufflepuff: {
+    label: "Hufflepuff",
+    tokens: {
+      pageBg: "#0b0b0c",
+      panelBg: "rgba(18, 18, 14, 0.60)",
+      panelBorder: "rgba(255, 230, 120, 0.16)",
+
+      textMain: "rgba(245, 239, 220, 0.92)",
+      textDim: "rgba(255, 240, 180, 0.70)",
+      textGold: "#FFE27A",
+
+      goldLine: "rgba(255, 226, 122, 0.18)",
+    },
+  },
+};
+
+export const DEFAULT_THEME_KEY = "default";
+
+export function applyTheme(themeKey) {
+  const t = THEMES[themeKey] || THEMES[DEFAULT_THEME_KEY];
+  const root = document.documentElement;
+
+  for (const [k, v] of Object.entries(t.tokens)) {
+    root.style.setProperty(`--hp-${k}`, v);
+  }
+}
+
+export function themeStorageKey(email) {
+  return `hpTheme:${(email || "guest").toLowerCase()}`;
+}
+
+export function loadThemeKey(email) {
+  try {
+    return localStorage.getItem(themeStorageKey(email)) || DEFAULT_THEME_KEY;
+  } catch {
+    return DEFAULT_THEME_KEY;
+  }
+}
+
+export function saveThemeKey(email, key) {
+  try {
+    localStorage.setItem(themeStorageKey(email), key);
+  } catch {}
+}

frontend/src/utils/winnerStorage.js

@@ -0,0 +1,20 @@
+function winnerKey(gameId) {
+    return `winner:${gameId}`;
+  }
+
+  export function getWinner(gameId) {
+    if (!gameId) return "";
+    try {
+      return localStorage.getItem(winnerKey(gameId)) || "";
+    } catch {
+      return "";
+    }
+  }
+
+  export function setWinner(gameId, name) {
+    if (!gameId) return;
+    try {
+      localStorage.setItem(winnerKey(gameId), name || "");
+    } catch {}
+  }
+