Atlas: Phase A Integrations-Konzept + Cockpit + End-Screen

- Integrations-Konzept dokumentiert (App/docs/integration-konzept.md)
- Module-IDs vereinheitlicht: sim-XX -> semantische IDs (klima/heli/fluss/logistik/...)
- class_modules um current_level + quiz_enabled Spalten erweitert
- modules.php liefert dynamisch aus module_info, inkl. forcedLevel, quizEnabled,
  play_url, dueDate; neuer Filter ?module_id=X fuer einzeln
- schueler.html Cockpit: komplett API-first, teacher_started-Sektion als
  Auftrags-Block, neue IDs, Sprachregel 4a (Starten statt Spielen)
- teacher.html: Hardcoded ALL_MODS entfernt, laedt dynamisch
- Design-System: .ggs-endscreen-Komponente fuer einheitliche Modul-Abschluesse
- index.html Landing-Links gefixt: App/modul-X -> modul-X, V1-HTMLs auf
  Front-Controller-Routen (fluss, heli-game, stadt)
- 6 Inbox-Auftraege an Instanzen (Klima/Heli/Fluss/Logistik/Lehrplan/Glossar)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-23 11:42:19 +02:00
parent b94658f57c
commit b356c79134
14 changed files with 1266 additions and 101 deletions
+69
View File
@@ -1127,3 +1127,72 @@ button, a, input, select, textarea {
.ggs-flex { display: flex; }
.ggs-flex-col { display: flex; flex-direction: column; }
.ggs-flex-center { display: flex; align-items: center; justify-content: center; }
/* --- 22. End-Screen (einheitlich in allen Modulen) ---
Nutzung: Overlay am Modul-Ende. Drei Buttons (Cockpit, Neu, Auswertung).
Module fuellen .ggs-endscreen-body mit modul-spezifischer Auswertung. */
.ggs-endscreen-overlay {
position: fixed; inset: 0;
background: rgba(20, 40, 50, 0.75);
backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
z-index: 9999;
padding: 16px;
}
.ggs-endscreen {
background: var(--ggs-white);
border-radius: var(--ggs-radius-lg);
box-shadow: 0 12px 40px rgba(0,0,0,0.25);
max-width: 560px;
width: 100%;
padding: 24px 28px;
text-align: center;
}
.ggs-endscreen-icon { font-size: 3rem; margin-bottom: 8px; }
.ggs-endscreen-title {
font-size: 1.3rem; font-weight: 800;
color: var(--ggs-text); margin-bottom: 4px;
}
.ggs-endscreen-subtitle {
font-size: 0.88rem; color: var(--ggs-text-muted);
margin-bottom: 20px;
}
.ggs-endscreen-body {
text-align: left;
background: var(--ggs-bg);
border-radius: var(--ggs-radius-md);
padding: 14px 16px;
margin-bottom: 20px;
font-size: 0.92rem;
line-height: 1.5;
}
.ggs-endscreen-kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 8px;
margin: 10px 0;
}
.ggs-endscreen-kpi {
background: var(--ggs-white);
border: 1px solid var(--ggs-border);
border-radius: 8px;
padding: 8px;
text-align: center;
}
.ggs-endscreen-kpi .n {
font-size: 1.3rem; font-weight: 800;
color: var(--ggs-fjord-dark);
}
.ggs-endscreen-kpi .l {
font-size: 0.68rem; color: var(--ggs-text-muted);
text-transform: uppercase; letter-spacing: 0.05em;
}
.ggs-endscreen-actions {
display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
}
.ggs-endscreen-actions .ggs-btn {
min-width: 120px; min-height: 44px; /* iPad-tauglich */
}
.ggs-endscreen.success .ggs-endscreen-icon { color: var(--ggs-moss); }
.ggs-endscreen.failed .ggs-endscreen-icon { color: var(--ggs-coral); }
.ggs-endscreen.failed .ggs-endscreen-title { color: var(--ggs-coral-dark, #8a3a2a); }