make css more generic
This commit is contained in:
Lukas Cremer
@@ -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"]
|
||||
}
|
||||
|
||||
@@ -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"]
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -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 = `
|
||||
<div class="class-card-icon">${cls.icon || '📚'}</div>
|
||||
<div class="class-card-info">
|
||||
<div class="class-card-name">${cls.name}</div>
|
||||
<div class="class-card-desc">${cls.description || ''}</div>
|
||||
<div class="class-card-name" style="color:${text}">${cls.name}</div>
|
||||
<div class="class-card-desc" style="color:${muted}">${cls.description || ''}</div>
|
||||
</div>
|
||||
`;
|
||||
card.onclick = () => selectClass(cls.id);
|
||||
|
||||
@@ -118,9 +118,10 @@
|
||||
</div>
|
||||
<div class="user-display">
|
||||
<div class="user-name" id="userDisplayName"></div>
|
||||
<button class="logout-button" onclick="logout()">
|
||||
Abmelden
|
||||
</button>
|
||||
<div class="user-buttons">
|
||||
<button class="logout-button" onclick="showClassPicker()">Klasse wechseln</button>
|
||||
<button class="logout-button" onclick="logout()">Abmelden</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
127
public/style.css
127
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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user