diff --git a/classes/grundrechenarten.json b/classes/grundrechenarten.json
index 0e7609c..3439d7d 100644
--- a/classes/grundrechenarten.json
+++ b/classes/grundrechenarten.json
@@ -3,29 +3,12 @@
"name": "Einhorn-Mathe",
"icon": "π¦",
"description": "Magische Mathematik mit EinhΓΆrnern und RegenbΓΆgen",
- "theme": {
- "--theme-bg": "#2d1b69",
- "--theme-bg-mid": "#4a1a8a",
- "--theme-bg-light": "#6b35b5",
- "--theme-bg-hover": "#7d42cc",
- "--theme-text": "#fce4ff",
- "--theme-muted": "#c4a0dc",
- "--theme-muted-light": "#dfc4f0",
- "--theme-accent": "#ff69b4",
- "--theme-accent-hover": "#e91e8c",
- "--theme-content-bg": "#fef0ff",
- "--theme-card-bg": "#fce8ff",
- "--theme-card-radius": "16px",
- "--theme-ui-radius": "12px",
- "--theme-card-shadow": "0 6px 24px rgba(255,105,180,0.18)",
- "--theme-font": "'Trebuchet MS', sans-serif",
- "--theme-text-transform": "none",
- "--theme-letter-spacing": "0px",
- "--theme-h1-letter-spacing": "0px",
- "--theme-sidebar-item-margin": "3px 8px",
- "--theme-sidebar-active-bg": "#ff69b4",
- "--theme-sidebar-active-border": "none",
- "--theme-sidebar-active-color": "#ffffff"
+ "theme": "unicorn",
+ "colors": {
+ "bg": "#3d2280",
+ "accent": "#ff69b4",
+ "text": "#fce4ff",
+ "muted": "#c4a0dc"
},
"lessons": ["adding"]
}
diff --git a/classes/kriminalfΓ€lle.json b/classes/kriminalfΓ€lle.json
index 9cca990..4c3eaa8 100644
--- a/classes/kriminalfΓ€lle.json
+++ b/classes/kriminalfΓ€lle.json
@@ -3,29 +3,12 @@
"name": "KriminalfΓ€lle",
"icon": "π",
"description": "LΓΆse echte KriminalfΓ€lle aus Deutschland mit Mathematik",
- "theme": {
- "--theme-bg": "#1a252f",
- "--theme-bg-mid": "#2c3e50",
- "--theme-bg-light": "#34495e",
- "--theme-bg-hover": "#3d566e",
- "--theme-text": "#ecf0f1",
- "--theme-muted": "#7f8c8d",
- "--theme-muted-light": "#bdc3c7",
- "--theme-accent": "#3498db",
- "--theme-accent-hover": "#2980b9",
- "--theme-content-bg": "#f4f1ec",
- "--theme-card-bg": "#ffffff",
- "--theme-card-radius": "0px",
- "--theme-ui-radius": "0px",
- "--theme-card-shadow": "0 1px 3px rgba(0,0,0,0.12)",
- "--theme-font": "Georgia, 'Times New Roman', serif",
- "--theme-text-transform": "uppercase",
- "--theme-letter-spacing": "1px",
- "--theme-h1-letter-spacing": "2px",
- "--theme-sidebar-item-margin": "0",
- "--theme-sidebar-active-bg": "#1a252f",
- "--theme-sidebar-active-border": "4px solid #3498db",
- "--theme-sidebar-active-color": "#ecf0f1"
+ "theme": "noir",
+ "colors": {
+ "bg": "#21262d",
+ "accent": "#4393e4",
+ "text": "#e6edf3",
+ "muted": "#848d97"
},
"lessons": ["steglitz", "bode-museum", "dresden-gruenes-gewoelbe"]
}
diff --git a/classes/stricken.json b/classes/stricken.json
new file mode 100644
index 0000000..238ea9c
--- /dev/null
+++ b/classes/stricken.json
@@ -0,0 +1,14 @@
+{
+ "id": "stricken",
+ "name": "Mathe-Stricken",
+ "icon": "π§Ά",
+ "description": "Rechnen mit Wolle, Maschen und Strickmustern",
+ "theme": "unicorn",
+ "colors": {
+ "bg": "#3d2280",
+ "accent": "#ff69b4",
+ "text": "#fce4ff",
+ "muted": "#c4a0dc"
+ },
+ "lessons": ["stricken"]
+}
diff --git a/lessons/stricken.json b/lessons/stricken.json
new file mode 100644
index 0000000..b2f799e
--- /dev/null
+++ b/lessons/stricken.json
@@ -0,0 +1,55 @@
+{
+ "chapter": "π§Ά Stricken mit Zahlen",
+ "description": "Beim Stricken steckt ΓΌberall Mathematik drin β in den Maschen, der Wolle und den Mustern. LΓΆse die Aufgaben und werde zur Mathe-Strick-Meisterin!",
+ "tasks": [
+ {
+ "id": "stricken-1",
+ "question": "Lena strickt einen Schal. Eine Reihe hat 24 Maschen.\nSie strickt 6 Reihen. Wie viele Maschen hat sie insgesamt gestrickt?",
+ "answer": 144,
+ "points": 10,
+ "type": "word-problem"
+ },
+ {
+ "id": "stricken-2",
+ "question": "Ein KnΓ€uel Wolle hat 200 Meter.\nFΓΌr eine MΓΌtze braucht Emma 75 Meter.\nWie viele Meter Wolle hat sie nach der MΓΌtze noch ΓΌbrig?",
+ "answer": 125,
+ "points": 10,
+ "type": "word-problem"
+ },
+ {
+ "id": "stricken-3",
+ "question": "Mia strickt ein Muster aus 8 rosa und 4 lila Maschen β immer abwechselnd.\nSie strickt das Muster 5 Mal in einer Reihe.\nWie viele Maschen hat die Reihe insgesamt?",
+ "answer": 60,
+ "points": 15,
+ "type": "word-problem"
+ },
+ {
+ "id": "stricken-4",
+ "question": "FΓΌr eine Decke braucht man 12 KnΓ€uel Wolle.\nJedes KnΓ€uel kostet 3 Euro.\nWie viel kostet die Wolle fΓΌr die ganze Decke?",
+ "answer": 36,
+ "points": 10,
+ "type": "word-problem"
+ },
+ {
+ "id": "stricken-5",
+ "question": "Sophie strickt jeden Tag 9 Reihen.\nNach wie vielen Tagen hat sie 63 Reihen gestrickt?",
+ "answer": 7,
+ "points": 15,
+ "type": "word-problem"
+ },
+ {
+ "id": "stricken-6",
+ "question": "Ein Pullover braucht 450 Meter Wolle.\nEin KnΓ€uel hat 150 Meter.\nWie viele KnΓ€uel braucht man fΓΌr den Pullover?",
+ "answer": 3,
+ "points": 10,
+ "type": "word-problem"
+ },
+ {
+ "id": "stricken-7",
+ "question": "In einem Strickclub sind 5 Kinder.\nJedes Kind strickt 8 Maschen pro Minute.\nWie viele Maschen stricken sie zusammen in 3 Minuten?",
+ "answer": 120,
+ "points": 20,
+ "type": "word-problem"
+ }
+ ]
+}
diff --git a/public/app.js b/public/app.js
index 765ec34..c1b9c7c 100644
--- a/public/app.js
+++ b/public/app.js
@@ -77,11 +77,15 @@ async function apiFetch(url, options = {}) {
// βββ Theme βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
-function applyTheme(theme) {
- const root = document.documentElement;
- Object.entries(theme).forEach(([prop, value]) => {
- root.style.setProperty(prop, value);
- });
+function applyTheme(themeName) {
+ let link = document.getElementById('class-theme');
+ if (!link) {
+ link = document.createElement('link');
+ link.id = 'class-theme';
+ link.rel = 'stylesheet';
+ document.head.appendChild(link);
+ }
+ link.href = `/themes/${encodeURIComponent(themeName)}.css`;
}
@@ -109,7 +113,7 @@ function showScreen(screen) {
async function showClassPicker() {
showScreen('class-picker');
const listEl = document.getElementById('classList');
- listEl.innerHTML = 'Laden...
';
+ listEl.innerHTML = 'Laden...
';
const res = await apiFetch('/api/classes');
if (!res) return;
@@ -118,24 +122,21 @@ async function showClassPicker() {
listEl.innerHTML = '';
if (classes.length === 0) {
- listEl.innerHTML = 'Keine Klassen verfΓΌgbar.
';
+ listEl.innerHTML = 'Keine Klassen verfΓΌgbar.
';
return;
}
classes.forEach(cls => {
const card = document.createElement('div');
card.className = 'class-card';
- const bg = cls.theme['--theme-bg-mid'] || '';
- const border = cls.theme['--theme-accent'] || '';
- const text = cls.theme['--theme-text'] || '';
- const muted = cls.theme['--theme-muted'] || '';
- if (bg) card.style.background = bg;
- if (border) card.style.borderColor = border;
+ const c = cls.colors || {};
+ if (c.bg) card.style.background = c.bg;
+ if (c.accent) card.style.borderColor = c.accent;
card.innerHTML = `
${cls.icon || 'π'}
-
${cls.name}
-
${cls.description || ''}
+
${cls.name}
+
${cls.description || ''}