lukas/mathquest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add diffent lessions

Browse Source
This commit is contained in:
Lukas Cremer
2026-05-13 22:49:40 +02:00
parent 79612c348a
commit f3fa43d452
10 changed files with 868 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
public/app.js
View File

@@ -1,4 +1,3 @@
// ─── Supabase config (injected by server from .env via /config.js) ───────────
const supabaseClient = supabase.createClient(window.SUPABASE_URL, window.SUPABASE_ANON_KEY);
// ─── App state ───────────────────────────────────────────────────────────────
@@ -7,6 +6,7 @@ let tasks = [];
let chapters = [];
let chapterDescriptions = {};
let activeChapter = null;
let activeClassData = null;
// ─── Auth ────────────────────────────────────────────────────────────────────
@@ -22,7 +22,6 @@ async function login() {
const password = document.getElementById('loginPassword').value;
const errorEl = document.getElementById('loginError');
errorEl.textContent = '';
const { error } = await supabaseClient.auth.signInWithPassword({ email, password });
if (error) errorEl.textContent = error.message;
}
@@ -43,11 +42,9 @@ async function register() {
if (error) {
errorEl.textContent = error.message;
} else if (!session) {
// Email confirmation is enabled — user must confirm before logging in
errorEl.style.color = '#27ae60';
errorEl.textContent = 'Konto erstellt! Bitte E-Mail bestätigen, dann anmelden.';
}
// If session exists, onAuthStateChange fires and opens the app automatically
}
async function logout() {
@@ -78,34 +75,140 @@ async function apiFetch(url, options = {}) {
return res;
}
// ─── Theme ───────────────────────────────────────────────────────────────────
function applyTheme(theme) {
const root = document.documentElement;
Object.entries(theme).forEach(([prop, value]) => {
root.style.setProperty(prop, value);
});
}
// ─── Screen management ───────────────────────────────────────────────────────
function showScreen(screen) {
document.getElementById('authOverlay').style.display = 'none';
document.getElementById('classPickerOverlay').style.display = 'none';
document.getElementById('classCompletionOverlay').style.display = 'none';
document.getElementById('appWrapper').style.display = 'none';
if (screen === 'auth') {
document.getElementById('authOverlay').style.display = 'flex';
} else if (screen === 'class-picker') {
document.getElementById('classPickerOverlay').style.display = 'flex';
} else if (screen === 'class-completion') {
document.getElementById('classCompletionOverlay').style.display = 'flex';
} else if (screen === 'app') {
document.getElementById('appWrapper').style.display = 'flex';
}
}
// ─── Class picker ────────────────────────────────────────────────────────────
async function showClassPicker() {
showScreen('class-picker');
const listEl = document.getElementById('classList');
listEl.innerHTML = '<p style="color: var(--theme-muted)">Laden...</p>';
const res = await apiFetch('/api/classes');
if (!res) return;
const { classes } = await res.json();
listEl.innerHTML = '';
if (classes.length === 0) {
listEl.innerHTML = '<p style="color: var(--theme-muted)">Keine Klassen verfügbar.</p>';
return;
}
classes.forEach(cls => {
const card = document.createElement('div');
card.className = 'class-card';
card.style.setProperty('--card-accent', cls.theme['--theme-accent'] || 'var(--theme-accent)');
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>
`;
card.onclick = () => selectClass(cls.id);
listEl.appendChild(card);
});
}
async function selectClass(classId) {
const res = await apiFetch('/api/set-class', {
method: 'POST',
body: JSON.stringify({ classId }),
});
if (!res || !res.ok) return;
const data = await res.json();
activeClassData = data.class;
applyTheme(activeClassData.theme);
const h1 = document.querySelector('header h1');
if (h1) h1.textContent = activeClassData.name;
activeChapter = null;
showScreen('app');
await loadAndRenderApp();
}
async function completeAndPickClass() {
await apiFetch('/api/complete-class', { method: 'POST' });
activeClassData = null;
activeChapter = null;
tasks = [];
await showClassPicker();
}
// ─── App init ────────────────────────────────────────────────────────────────
async function initApp(user) {
const displayName = user.user_metadata?.display_name || user.email;
document.getElementById('userDisplayName').textContent = displayName;
document.getElementById('authOverlay').style.display = 'none';
document.getElementById('appWrapper').style.display = 'flex';
const meRes = await apiFetch('/api/me');
if (!meRes) return;
const meta = await meRes.json();
if (!meta.activeClass) {
await showClassPicker();
return;
}
const classesRes = await apiFetch('/api/classes');
if (classesRes) {
const { classes } = await classesRes.json();
activeClassData = classes.find(c => c.id === meta.activeClass) || null;
if (activeClassData) {
applyTheme(activeClassData.theme);
const h1 = document.querySelector('header h1');
if (h1) h1.textContent = activeClassData.name;
}
}
showScreen('app');
await loadAndRenderApp();
}
async function loadAndRenderApp() {
await loadTasks();
extractChapters();
calculateTotalPoints();
renderSidebar();
renderTasks();
updateProgress();
checkClassCompletion();
}
function showAuthScreen() {
document.getElementById('authOverlay').style.display = 'flex';
document.getElementById('appWrapper').style.display = 'none';
}
// React to login/logout events
supabaseClient.auth.onAuthStateChange((_event, session) => {
if (session?.user) {
initApp(session.user);
} else {
showAuthScreen();
showScreen('auth');
}
});
@@ -151,6 +254,42 @@ function isChapterCompleted(chapter) {
return chapterTasks.length > 0 && chapterTasks.every(task => task.isCorrect === true);
}
function checkClassCompletion() {
if (tasks.length > 0 && tasks.every(t => t.isCorrect === true)) {
const maxPoints = tasks.reduce((sum, task) => sum + (task.points || 0), 0);
document.getElementById('completionPoints').textContent = maxPoints;
showScreen('class-completion');
}
}
async function resetClassProgress(btn) {
if (!btn.dataset.confirmed) {
btn.dataset.confirmed = '1';
btn.textContent = 'Wirklich löschen? Nochmal klicken.';
btn.style.background = '#7f3030';
btn.style.color = '#fff';
setTimeout(() => {
delete btn.dataset.confirmed;
btn.textContent = 'Fortschritt zurücksetzen';
btn.style.background = '';
btn.style.color = '';
}, 3000);
return;
}
const res = await apiFetch('/api/reset-class-progress', { method: 'POST' });
if (!res || !res.ok) return;
activeChapter = null;
await loadTasks();
extractChapters();
calculateTotalPoints();
showScreen('app');
renderSidebar();
renderTasks();
updateProgress();
}
function renderSidebar() {
const sidebar = document.getElementById('sidebar');
sidebar.innerHTML = '';
@@ -163,7 +302,7 @@ function renderSidebar() {
const header = document.createElement('div');
header.className = 'sidebar-header';
header.innerHTML = '<h2>Aktenübersicht</h2>';
header.innerHTML = '<h2>Lektionen</h2>';
sidebar.appendChild(header);
chapters.forEach(chapter => {
@@ -174,6 +313,7 @@ function renderSidebar() {
item.innerHTML = `<div class="sidebar-item-title">${isCompleted ? '✓ ' : ''}${chapter}</div>`;
sidebar.appendChild(item);
});
}
function switchChapter(chapter) {
@@ -204,8 +344,8 @@ function renderTasks() {
card.id = `task-${task.id}`;
card.innerHTML = `
<div class="task-header">
<div class="task-title">Ermittlungsaufgabe</div>
<div class="task-points">${task.points} EP</div>
<div class="task-title">Aufgabe</div>
<div class="task-points">${task.points} Punkte</div>
</div>
<div class="task-question">${task.question}</div>
<div class="task-input-group">
@@ -214,7 +354,7 @@ function renderTasks() {
<button class="task-button" onclick="checkAnswer('${task.id}')">Prüfen</button>
</div>
<div class="task-status ${hasAnswer && !task.isCorrect ? 'error' : ''}" id="status-${task.id}">
${hasAnswer && !task.isCorrect ? '✗ Berechnung fehlerhaft. Bitte erneut prüfen.' : ''}
${hasAnswer && !task.isCorrect ? '✗ Falsche Antwort. Bitte erneut versuchen.' : ''}
</div>
`;
container.appendChild(card);
@@ -248,18 +388,23 @@ async function checkAnswer(taskId) {
calculateTotalPoints();
if (data.correct) {
status.textContent = '✓ Berechnung korrekt. Fall weiter bearbeiten.';
status.textContent = '✓ Richtig!';
status.className = 'task-status success';
showMessage(`✓ ${data.points} Ermittlungspunkte erhalten`, 'success');
showMessage(`✓ ${data.points} Punkte erhalten`, 'success');
const taskCard = document.getElementById(`task-${taskId}`);
if (taskCard) {
createConfetti(taskCard);
taskCard.classList.add('confetti-animation');
setTimeout(() => { renderSidebar(); renderTasks(); updateProgress(); }, 1500);
setTimeout(() => {
renderSidebar();
renderTasks();
updateProgress();
checkClassCompletion();
}, 1500);
}
} else {
status.textContent = '✗ Berechnung fehlerhaft. Bitte erneut prüfen.';
status.textContent = '✗ Falsche Antwort. Bitte erneut versuchen.';
status.className = 'task-status error';
input.focus();
renderSidebar();
@@ -268,7 +413,7 @@ async function checkAnswer(taskId) {
}
}
// ─── UI helpers ───────────────────────────────────────────────────────────────
// ─── UI helpers ──────────────────────────────────────────────────────────────
function updatePointsDisplay() {
document.getElementById('totalPoints').textContent = totalPoints;

36
public/index.html
View File

@@ -75,17 +75,45 @@
</div>
</div>
<!-- Main app — hidden until logged in -->
<!-- Class picker — shown after login when no class is active -->
<div id="classPickerOverlay" class="class-picker-overlay" style="display: none">
<div class="class-picker-card">
<h2 class="class-picker-title">Klasse wählen</h2>
<p class="class-picker-subtitle">Wähle deine Klasse, um fortzufahren.</p>
<div id="classList" class="class-list"></div>
</div>
</div>
<!-- Class completion — shown when all lessons in the active class are done -->
<div id="classCompletionOverlay" class="class-picker-overlay" style="display: none">
<div class="class-picker-card" style="text-align: center">
<div class="completion-icon">🎉</div>
<h2 class="class-picker-title">Klasse abgeschlossen!</h2>
<p class="class-picker-subtitle">
Du hast alle Aufgaben gelöst und
<strong id="completionPoints" style="color: var(--theme-accent)">0</strong>
Punkte erreicht.
</p>
<button class="auth-button" style="margin-top: 24px" onclick="completeAndPickClass()">
Nächste Klasse wählen
</button>
<button class="reset-button" style="margin-top: 10px" onclick="resetClassProgress(this)">
Fortschritt zurücksetzen
</button>
</div>
</div>
<!-- Main app — hidden until logged in and class is active -->
<div id="appWrapper" class="app-wrapper" style="display: none">
<aside class="sidebar" id="sidebar"></aside>
<div class="main-content">
<div class="container">
<header>
<div class="header-content">
<h1>Kriminalfälle - Mathematische Ermittlungen</h1>
<h1>Mathquest</h1>
<div class="header-right">
<div class="points-display">
<div class="points-label">Ermittlungspunkte</div>
<div class="points-label">Punkte</div>
<div class="points-value" id="totalPoints">0</div>
</div>
<div class="user-display">
@@ -100,7 +128,7 @@
<div class="progress-section">
<div class="progress-content">
<div class="progress-label">Ermittlungsfortschritt</div>
<div class="progress-label">Fortschritt</div>
<div class="progress-bar-container">
<div class="progress-bar" id="progressBar"></div>
</div>

322
public/style.css
View File

@@ -1,3 +1,15 @@
: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;
}
* {
margin: 0;
padding: 0;
@@ -6,7 +18,7 @@
body {
font-family: 'Arial', 'Helvetica', sans-serif;
background: #2c3e50;
background: var(--theme-bg-mid);
min-height: 100vh;
padding: 0;
margin: 0;
@@ -22,8 +34,8 @@ body {
.sidebar {
width: 280px;
background: #34495e;
border-right: 3px solid #1a252f;
background: var(--theme-bg-light);
border-right: 3px solid var(--theme-bg);
padding: 0;
position: sticky;
top: 0;
@@ -33,13 +45,13 @@ body {
}
.sidebar-header {
background: #1a252f;
background: var(--theme-bg);
padding: 20px;
border-bottom: 2px solid #0f1419;
border-bottom: 2px solid rgba(0, 0, 0, 0.3);
}
.sidebar-header h2 {
color: #ecf0f1;
color: var(--theme-text);
font-size: 1.2em;
font-weight: bold;
text-transform: uppercase;
@@ -50,19 +62,19 @@ body {
padding: 15px 20px;
cursor: pointer;
transition: background-color 0.2s;
border-bottom: 1px solid #2c3e50;
background: #34495e;
color: #ecf0f1;
border-bottom: 1px solid var(--theme-bg-mid);
background: var(--theme-bg-light);
color: var(--theme-text);
}
.sidebar-item:hover {
background: #3d566e;
background: var(--theme-bg-hover);
}
.sidebar-item.active {
background: #1a252f;
border-left: 4px solid #3498db;
color: #ecf0f1;
background: var(--theme-bg);
border-left: 4px solid var(--theme-accent);
color: var(--theme-text);
font-weight: bold;
}
@@ -76,7 +88,7 @@ body {
}
.sidebar-item.completed.active {
background: #1a252f;
background: var(--theme-bg);
border-left: 4px solid #27ae60;
}
@@ -85,6 +97,26 @@ body {
line-height: 1.4;
}
.reset-button {
width: 100%;
padding: 8px 12px;
background: none;
border: 1px solid #7f3030;
color: #c0392b;
font-size: 0.8em;
font-family: 'Arial', sans-serif;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
display: block;
}
.reset-button:hover {
background: #7f3030;
color: #fff;
}
.main-content {
flex: 1;
min-width: 0;
@@ -100,10 +132,10 @@ body {
}
header {
background: #1a252f;
background: var(--theme-bg);
padding: 25px 40px;
border-bottom: 4px solid #3498db;
color: #ecf0f1;
border-bottom: 4px solid var(--theme-accent);
color: var(--theme-text);
}
.header-content {
@@ -116,7 +148,7 @@ header {
h1 {
font-size: 1.8em;
color: #ecf0f1;
color: var(--theme-text);
margin: 0;
font-weight: bold;
text-transform: uppercase;
@@ -124,16 +156,16 @@ h1 {
}
.points-display {
background: #2c3e50;
background: var(--theme-bg-mid);
padding: 15px 25px;
border: 2px solid #3498db;
border: 2px solid var(--theme-accent);
border-radius: 4px;
text-align: center;
}
.points-label {
font-size: 0.85em;
color: #bdc3c7;
color: var(--theme-muted-light);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 5px;
@@ -142,13 +174,13 @@ h1 {
.points-value {
font-size: 2em;
font-weight: bold;
color: #3498db;
color: var(--theme-accent);
}
.progress-section {
background: #34495e;
background: var(--theme-bg-light);
padding: 20px 40px;
border-bottom: 2px solid #2c3e50;
border-bottom: 2px solid var(--theme-bg-mid);
}
.progress-content {
@@ -158,7 +190,7 @@ h1 {
.progress-label {
font-size: 0.9em;
color: #ecf0f1;
color: var(--theme-text);
margin-bottom: 10px;
font-weight: bold;
text-transform: uppercase;
@@ -168,22 +200,22 @@ h1 {
.progress-bar-container {
width: 100%;
height: 25px;
background: #2c3e50;
border: 1px solid #1a252f;
background: var(--theme-bg-mid);
border: 1px solid var(--theme-bg);
overflow: hidden;
margin-bottom: 8px;
}
.progress-bar {
height: 100%;
background: #3498db;
background: var(--theme-accent);
width: 0%;
transition: width 0.5s ease;
}
.progress-text {
font-size: 0.9em;
color: #bdc3c7;
color: var(--theme-muted-light);
font-weight: bold;
}
@@ -200,7 +232,7 @@ h1 {
font-size: 1em;
line-height: 1.7;
color: #2c3e50;
border-left: 4px solid #3498db;
border-left: 4px solid var(--theme-accent);
border-top: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
@@ -216,14 +248,14 @@ h1 {
background: #ffffff;
padding: 30px;
border: 2px solid #e0e0e0;
border-left: 4px solid #3498db;
border-left: 4px solid var(--theme-accent);
transition: border-color 0.2s, box-shadow 0.2s;
position: relative;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.task-card:hover {
border-color: #3498db;
border-color: var(--theme-accent);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
@@ -232,20 +264,15 @@ h1 {
}
@keyframes confettiFadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(-20px);
}
0% { opacity: 1; }
100% { opacity: 0; transform: translateY(-20px); }
}
.confetti {
position: absolute;
width: 8px;
height: 8px;
background: #3498db;
background: var(--theme-accent);
animation: confettiFall linear forwards;
z-index: 1000;
pointer-events: none;
@@ -274,19 +301,19 @@ h1 {
.task-title {
font-size: 1.1em;
font-weight: bold;
color: #1a252f;
color: var(--theme-bg);
text-transform: uppercase;
letter-spacing: 1px;
}
.task-points {
background: #34495e;
color: #ecf0f1;
background: var(--theme-bg-light);
color: var(--theme-text);
padding: 6px 15px;
border-radius: 2px;
font-weight: bold;
font-size: 0.9em;
border: 1px solid #2c3e50;
border: 1px solid var(--theme-bg-mid);
}
.task-question {
@@ -323,12 +350,12 @@ h1 {
.task-input:focus {
outline: none;
border-color: #3498db;
border-color: var(--theme-accent);
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}
.task-button {
background: #3498db;
background: var(--theme-accent);
color: white;
border: none;
padding: 12px 30px;
@@ -343,7 +370,7 @@ h1 {
}
.task-button:hover {
background: #2980b9;
background: var(--theme-accent-hover);
}
.task-button:active {
@@ -362,17 +389,9 @@ h1 {
min-height: 25px;
}
.task-status.success {
color: #27ae60;
}
.task-status.error {
color: #e74c3c;
}
.task-status.completed {
color: #f39c12;
}
.task-status.success { color: #27ae60; }
.task-status.error { color: #e74c3c; }
.task-status.completed { color: #f39c12; }
.message {
position: fixed;
@@ -389,9 +408,7 @@ h1 {
border: 2px solid;
}
.message.show {
transform: translateX(0);
}
.message.show { transform: translateX(0); }
.message.success {
background: #27ae60;
@@ -410,7 +427,7 @@ h1 {
.auth-overlay {
position: fixed;
inset: 0;
background: #1a252f;
background: var(--theme-bg);
display: flex;
align-items: center;
justify-content: center;
@@ -418,23 +435,30 @@ h1 {
}
.auth-card {
background: #2c3e50;
border: 1px solid #34495e;
background: var(--theme-bg-mid);
border: 1px solid var(--theme-bg-light);
padding: 32px;
width: 100%;
max-width: 360px;
}
.auth-title {
color: var(--theme-text);
font-size: 1.4em;
font-weight: bold;
margin-bottom: 20px;
}
.auth-tabs {
display: flex;
margin-bottom: 20px;
border-bottom: 1px solid #34495e;
border-bottom: 1px solid var(--theme-bg-light);
}
.auth-tab {
background: none;
border: none;
color: #7f8c8d;
color: var(--theme-muted);
padding: 8px 16px;
font-size: 0.9em;
cursor: pointer;
@@ -444,8 +468,8 @@ h1 {
}
.auth-tab.active {
color: #ecf0f1;
border-bottom-color: #3498db;
color: var(--theme-text);
border-bottom-color: var(--theme-accent);
}
.auth-input {
@@ -453,9 +477,9 @@ h1 {
width: 100%;
padding: 10px 12px;
margin-bottom: 10px;
background: #1a252f;
border: 1px solid #34495e;
color: #ecf0f1;
background: var(--theme-bg);
border: 1px solid var(--theme-bg-light);
color: var(--theme-text);
font-size: 0.95em;
transition: border-color 0.2s;
box-sizing: border-box;
@@ -463,11 +487,11 @@ h1 {
.auth-input:focus {
outline: none;
border-color: #3498db;
border-color: var(--theme-accent);
}
.auth-input::placeholder {
color: #7f8c8d;
color: var(--theme-muted);
}
.auth-error {
@@ -480,7 +504,7 @@ h1 {
.auth-button {
width: 100%;
padding: 11px;
background: #3498db;
background: var(--theme-accent);
color: white;
border: none;
font-size: 0.95em;
@@ -489,7 +513,88 @@ h1 {
}
.auth-button:hover {
background: #2980b9;
background: var(--theme-accent-hover);
}
/* ─── Class picker & completion ──────────────────────────────────────────────── */
.class-picker-overlay {
position: fixed;
inset: 0;
background: var(--theme-bg);
display: flex;
align-items: center;
justify-content: center;
z-index: 9998;
padding: 20px;
}
.class-picker-card {
background: var(--theme-bg-mid);
border: 1px solid var(--theme-bg-light);
padding: 40px;
width: 100%;
max-width: 560px;
}
.class-picker-title {
color: var(--theme-text);
font-size: 1.4em;
font-weight: bold;
margin-bottom: 8px;
}
.class-picker-subtitle {
color: var(--theme-muted);
font-size: 0.9em;
margin-bottom: 28px;
}
.class-list {
display: grid;
gap: 12px;
}
.class-card {
background: var(--theme-bg);
border: 2px solid var(--card-accent, var(--theme-accent));
padding: 20px 24px;
cursor: pointer;
transition: opacity 0.15s, transform 0.15s;
display: flex;
align-items: center;
gap: 16px;
}
.class-card:hover {
opacity: 0.85;
transform: translateY(-2px);
}
.class-card-icon {
font-size: 2.2em;
flex-shrink: 0;
}
.class-card-info {
flex: 1;
}
.class-card-name {
color: var(--theme-text);
font-size: 1.1em;
font-weight: bold;
margin-bottom: 4px;
}
.class-card-desc {
color: var(--theme-muted);
font-size: 0.85em;
}
.completion-icon {
font-size: 3em;
margin-bottom: 16px;
}
/* ─── User display in header ─────────────────────────────────────────────── */
@@ -508,7 +613,7 @@ h1 {
}
.user-name {
color: #bdc3c7;
color: var(--theme-muted-light);
font-size: 0.85em;
text-transform: uppercase;
letter-spacing: 1px;
@@ -516,8 +621,8 @@ h1 {
.logout-button {
background: none;
border: 1px solid #34495e;
color: #7f8c8d;
border: 1px solid var(--theme-bg-light);
color: var(--theme-muted);
padding: 5px 12px;
font-size: 0.8em;
font-family: 'Arial', sans-serif;
@@ -536,20 +641,20 @@ h1 {
.app-wrapper {
flex-direction: column;
}
.sidebar {
width: 100%;
position: relative;
height: auto;
max-height: 300px;
border-right: none;
border-bottom: 3px solid #1a252f;
border-bottom: 3px solid var(--theme-bg);
}
.sidebar-item {
border-bottom: 1px solid #2c3e50;
border-bottom: 1px solid var(--theme-bg-mid);
}
.header-content {
flex-direction: column;
gap: 20px;
@@ -558,44 +663,15 @@ h1 {
}
@media (max-width: 600px) {
.container {
padding: 0;
}
header {
padding: 20px;
}
h1 {
font-size: 1.4em;
}
.points-value {
font-size: 1.5em;
}
.task-section {
padding: 20px;
}
.task-input-group {
flex-direction: column;
align-items: stretch;
}
.task-input {
width: 100%;
}
.task-button {
width: 100%;
}
.sidebar-item {
padding: 12px 15px;
}
.sidebar-item-title {
font-size: 0.9em;
}
.container { padding: 0; }
header { padding: 20px; }
h1 { font-size: 1.4em; }
.points-value { font-size: 1.5em; }
.task-section { padding: 20px; }
.task-input-group { flex-direction: column; align-items: stretch; }
.task-input { width: 100%; }
.task-button { width: 100%; }
.sidebar-item { padding: 12px 15px; }
.sidebar-item-title { font-size: 0.9em; }
.class-picker-card { padding: 24px; }
}