From f4a1b4dca988712b76d01fbc154ff26bf7d4c654 Mon Sep 17 00:00:00 2001 From: Lukas Cremer Date: Wed, 13 May 2026 23:30:53 +0200 Subject: [PATCH] make css more generic --- classes/grundrechenarten.json | 37 ++++++---- classes/kriminalfälle.json | 15 +++- lessons/adding.json | 126 --------------------------------- public/app.js | 12 +++- public/index.html | 7 +- public/style.css | 127 +++++++++++++++++++++------------- 6 files changed, 129 insertions(+), 195 deletions(-) diff --git a/classes/grundrechenarten.json b/classes/grundrechenarten.json index 58417f3..0e7609c 100644 --- a/classes/grundrechenarten.json +++ b/classes/grundrechenarten.json @@ -1,18 +1,31 @@ { "id": "grundrechenarten", - "name": "Grundrechenarten", - "icon": "➕", - "description": "Lerne die Grundlagen der Mathematik", + "name": "Einhorn-Mathe", + "icon": "🦄", + "description": "Magische Mathematik mit Einhörnern und Regenbögen", "theme": { - "--theme-bg": "#1a2f1a", - "--theme-bg-mid": "#2a4a2a", - "--theme-bg-light": "#3a6a3a", - "--theme-bg-hover": "#4a7a4a", - "--theme-text": "#e8f5e8", - "--theme-muted": "#7fa87f", - "--theme-muted-light": "#aed4ae", - "--theme-accent": "#4caf50", - "--theme-accent-hover": "#388e3c" + "--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" }, "lessons": ["adding"] } diff --git a/classes/kriminalfälle.json b/classes/kriminalfälle.json index b20d2b1..9cca990 100644 --- a/classes/kriminalfälle.json +++ b/classes/kriminalfälle.json @@ -12,7 +12,20 @@ "--theme-muted": "#7f8c8d", "--theme-muted-light": "#bdc3c7", "--theme-accent": "#3498db", - "--theme-accent-hover": "#2980b9" + "--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" }, "lessons": ["steglitz", "bode-museum", "dresden-gruenes-gewoelbe"] } diff --git a/lessons/adding.json b/lessons/adding.json index 7adfbf3..942159d 100644 --- a/lessons/adding.json +++ b/lessons/adding.json @@ -15,132 +15,6 @@ "answer": 3, "points": 10, "type": "word-problem" - }, - { - "id": "adding-3", - "question": "Was ist 2 + 2?", - "answer": 4, - "points": 10, - "type": "word-problem" - }, - { - "id": "adding-4", - "question": "Was ist 3 + 2?", - "answer": 5, - "points": 10, - "type": "word-problem" - }, - { - "id": "adding-5", - "question": "Was ist 3 + 3?", - "answer": 6, - "points": 10, - "type": "word-problem" - }, - { - "id": "adding-6", - "question": "Was ist 4 + 3?", - "answer": 7, - "points": 10, - "type": "word-problem" - }, - { - "id": "adding-7", - "question": "Was ist 4 + 4?", - "answer": 8, - "points": 10, - "type": "word-problem" - }, - { - "id": "adding-8", - "question": "Was ist 5 + 4?", - "answer": 9, - "points": 10, - "type": "word-problem" - }, - { - "id": "adding-9", - "question": "Was ist 5 + 5?", - "answer": 10, - "points": 10, - "type": "word-problem" - }, - { - "id": "adding-10", - "question": "Was ist 6 + 4?", - "answer": 10, - "points": 10, - "type": "word-problem" - }, - { - "id": "adding-11", - "question": "Was ist 6 + 5?", - "answer": 11, - "points": 10, - "type": "word-problem" - }, - { - "id": "adding-12", - "question": "Was ist 6 + 6?", - "answer": 12, - "points": 10, - "type": "word-problem" - }, - { - "id": "adding-13", - "question": "Was ist 7 + 5?", - "answer": 12, - "points": 10, - "type": "word-problem" - }, - { - "id": "adding-14", - "question": "Was ist 7 + 6?", - "answer": 13, - "points": 10, - "type": "word-problem" - }, - { - "id": "adding-15", - "question": "Was ist 7 + 7?", - "answer": 14, - "points": 10, - "type": "word-problem" - }, - { - "id": "adding-16", - "question": "Was ist 8 + 6?", - "answer": 14, - "points": 10, - "type": "word-problem" - }, - { - "id": "adding-17", - "question": "Was ist 8 + 7?", - "answer": 15, - "points": 10, - "type": "word-problem" - }, - { - "id": "adding-18", - "question": "Was ist 9 + 7?", - "answer": 16, - "points": 10, - "type": "word-problem" - }, - { - "id": "adding-19", - "question": "Was ist 9 + 8?", - "answer": 17, - "points": 10, - "type": "word-problem" - }, - { - "id": "adding-20", - "question": "Was ist 9 + 9?", - "answer": 18, - "points": 10, - "type": "word-problem" } ] } diff --git a/public/app.js b/public/app.js index 8cca3e1..765ec34 100644 --- a/public/app.js +++ b/public/app.js @@ -84,6 +84,7 @@ function applyTheme(theme) { }); } + // ─── Screen management ─────────────────────────────────────────────────────── function showScreen(screen) { @@ -124,12 +125,17 @@ async function showClassPicker() { classes.forEach(cls => { const card = document.createElement('div'); card.className = 'class-card'; - card.style.setProperty('--card-accent', cls.theme['--theme-accent'] || 'var(--theme-accent)'); + 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; card.innerHTML = `
${cls.icon || '📚'}
-
${cls.name}
-
${cls.description || ''}
+
${cls.name}
+
${cls.description || ''}
`; card.onclick = () => selectClass(cls.id); diff --git a/public/index.html b/public/index.html index b8d3765..ce68192 100644 --- a/public/index.html +++ b/public/index.html @@ -118,9 +118,10 @@
- +
+ + +
diff --git a/public/style.css b/public/style.css index 8fe1689..11268f2 100644 --- a/public/style.css +++ b/public/style.css @@ -1,13 +1,29 @@ :root { - --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; + /* Shell colors — neutral light defaults (auth, class picker) */ + --theme-bg: #f0f2f5; + --theme-bg-mid: #ffffff; + --theme-bg-light: #e0e4ea; + --theme-bg-hover: #d0d5de; + --theme-text: #2c3e50; + --theme-muted: #8892a4; + --theme-muted-light: #a8b2c0; + --theme-accent: #4a90d9; + --theme-accent-hover: #3a7bc8; + + /* Content area / lesson-level theming */ + --theme-content-bg: #e8ecf0; + --theme-card-bg: #ffffff; + --theme-card-radius: 4px; + --theme-card-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); + --theme-font: 'Arial', sans-serif; + --theme-ui-radius: 0px; + --theme-text-transform: uppercase; + --theme-letter-spacing: 1px; + --theme-h1-letter-spacing: 2px; + --theme-sidebar-item-margin: 0; + --theme-sidebar-active-bg: var(--theme-bg); + --theme-sidebar-active-border: 4px solid var(--theme-accent); + --theme-sidebar-active-color: var(--theme-text); } * { @@ -17,7 +33,7 @@ } body { - font-family: 'Arial', 'Helvetica', sans-serif; + font-family: var(--theme-font); background: var(--theme-bg-mid); min-height: 100vh; padding: 0; @@ -54,8 +70,8 @@ body { color: var(--theme-text); font-size: 1.2em; font-weight: bold; - text-transform: uppercase; - letter-spacing: 1px; + text-transform: var(--theme-text-transform); + letter-spacing: var(--theme-letter-spacing); } .sidebar-item { @@ -65,6 +81,8 @@ body { border-bottom: 1px solid var(--theme-bg-mid); background: var(--theme-bg-light); color: var(--theme-text); + margin: var(--theme-sidebar-item-margin); + border-radius: var(--theme-ui-radius); } .sidebar-item:hover { @@ -72,9 +90,9 @@ body { } .sidebar-item.active { - background: var(--theme-bg); - border-left: 4px solid var(--theme-accent); - color: var(--theme-text); + background: var(--theme-sidebar-active-bg); + border-left: var(--theme-sidebar-active-border); + color: var(--theme-sidebar-active-color); font-weight: bold; } @@ -88,7 +106,7 @@ body { } .sidebar-item.completed.active { - background: var(--theme-bg); + background: var(--theme-sidebar-active-bg); border-left: 4px solid #27ae60; } @@ -104,9 +122,7 @@ body { border: 1px solid #7f3030; color: #c0392b; font-size: 0.8em; - font-family: 'Arial', sans-serif; - text-transform: uppercase; - letter-spacing: 0.5px; + font-family: inherit; cursor: pointer; transition: background-color 0.2s, color 0.2s; display: block; @@ -125,7 +141,7 @@ body { .container { max-width: 100%; - background: #ffffff; + background: var(--theme-content-bg); padding: 0; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); min-height: 100vh; @@ -151,23 +167,23 @@ h1 { color: var(--theme-text); margin: 0; font-weight: bold; - text-transform: uppercase; - letter-spacing: 2px; + text-transform: var(--theme-text-transform); + letter-spacing: var(--theme-h1-letter-spacing); } .points-display { background: var(--theme-bg-mid); padding: 15px 25px; border: 2px solid var(--theme-accent); - border-radius: 4px; + border-radius: var(--theme-ui-radius); text-align: center; } .points-label { font-size: 0.85em; color: var(--theme-muted-light); - text-transform: uppercase; - letter-spacing: 1px; + text-transform: var(--theme-text-transform); + letter-spacing: var(--theme-letter-spacing); margin-bottom: 5px; } @@ -193,8 +209,8 @@ h1 { color: var(--theme-text); margin-bottom: 10px; font-weight: bold; - text-transform: uppercase; - letter-spacing: 1px; + text-transform: var(--theme-text-transform); + letter-spacing: var(--theme-letter-spacing); } .progress-bar-container { @@ -202,6 +218,7 @@ h1 { height: 25px; background: var(--theme-bg-mid); border: 1px solid var(--theme-bg); + border-radius: var(--theme-ui-radius); overflow: hidden; margin-bottom: 8px; } @@ -226,17 +243,16 @@ h1 { } .chapter-description { - background: #f8f9fa; + background: rgba(0, 0, 0, 0.04); padding: 20px 25px; margin-bottom: 30px; font-size: 1em; line-height: 1.7; color: #2c3e50; border-left: 4px solid var(--theme-accent); - border-top: 1px solid #e0e0e0; - border-right: 1px solid #e0e0e0; - border-bottom: 1px solid #e0e0e0; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + border-top: 1px solid rgba(0, 0, 0, 0.08); + border-right: 1px solid rgba(0, 0, 0, 0.08); + border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .task-container { @@ -245,13 +261,14 @@ h1 { } .task-card { - background: #ffffff; + background: var(--theme-card-bg); padding: 30px; - border: 2px solid #e0e0e0; + border: 2px solid rgba(0, 0, 0, 0.08); border-left: 4px solid var(--theme-accent); + border-radius: var(--theme-card-radius); transition: border-color 0.2s, box-shadow 0.2s; position: relative; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + box-shadow: var(--theme-card-shadow); } .task-card:hover { @@ -301,16 +318,16 @@ h1 { .task-title { font-size: 1.1em; font-weight: bold; - color: var(--theme-bg); - text-transform: uppercase; - letter-spacing: 1px; + color: #1a252f; + text-transform: var(--theme-text-transform); + letter-spacing: var(--theme-letter-spacing); } .task-points { background: var(--theme-bg-light); color: var(--theme-text); padding: 6px 15px; - border-radius: 2px; + border-radius: var(--theme-ui-radius); font-weight: bold; font-size: 0.9em; border: 1px solid var(--theme-bg-mid); @@ -339,10 +356,10 @@ h1 { font-size: 1.2em; padding: 12px 18px; border: 2px solid #bdc3c7; - border-radius: 2px; + border-radius: var(--theme-ui-radius); width: 150px; text-align: center; - font-family: 'Arial', sans-serif; + font-family: inherit; font-weight: bold; background: #ffffff; color: #1a1a1a; @@ -360,12 +377,12 @@ h1 { border: none; padding: 12px 30px; font-size: 1em; - border-radius: 2px; + border-radius: var(--theme-ui-radius); cursor: pointer; - font-family: 'Arial', sans-serif; + font-family: inherit; font-weight: bold; - text-transform: uppercase; - letter-spacing: 1px; + text-transform: var(--theme-text-transform); + letter-spacing: var(--theme-letter-spacing); transition: background-color 0.2s; } @@ -437,6 +454,7 @@ h1 { .auth-card { background: var(--theme-bg-mid); border: 1px solid var(--theme-bg-light); + border-radius: var(--theme-ui-radius); padding: 32px; width: 100%; max-width: 360px; @@ -479,6 +497,7 @@ h1 { margin-bottom: 10px; background: var(--theme-bg); border: 1px solid var(--theme-bg-light); + border-radius: var(--theme-ui-radius); color: var(--theme-text); font-size: 0.95em; transition: border-color 0.2s; @@ -507,6 +526,7 @@ h1 { background: var(--theme-accent); color: white; border: none; + border-radius: var(--theme-ui-radius); font-size: 0.95em; cursor: pointer; transition: background-color 0.2s; @@ -532,6 +552,7 @@ h1 { .class-picker-card { background: var(--theme-bg-mid); border: 1px solid var(--theme-bg-light); + border-radius: var(--theme-ui-radius); padding: 40px; width: 100%; max-width: 560px; @@ -558,6 +579,7 @@ h1 { .class-card { background: var(--theme-bg); border: 2px solid var(--card-accent, var(--theme-accent)); + border-radius: var(--theme-ui-radius); padding: 20px 24px; cursor: pointer; transition: opacity 0.15s, transform 0.15s; @@ -615,8 +637,13 @@ h1 { .user-name { color: var(--theme-muted-light); font-size: 0.85em; - text-transform: uppercase; - letter-spacing: 1px; + text-transform: var(--theme-text-transform); + letter-spacing: var(--theme-letter-spacing); +} + +.user-buttons { + display: flex; + gap: 6px; } .logout-button { @@ -625,9 +652,9 @@ h1 { color: var(--theme-muted); padding: 5px 12px; font-size: 0.8em; - font-family: 'Arial', sans-serif; - text-transform: uppercase; - letter-spacing: 1px; + font-family: inherit; + text-transform: var(--theme-text-transform); + letter-spacing: var(--theme-letter-spacing); cursor: pointer; transition: border-color 0.2s, color 0.2s; }