Atlas: Infrastruktur + Team-Konventionen + Sprachregel Lernarbeit
- Design-System (assets/css/design-system.css) mit 21 Komponenten, iPad-Responsive-Breakpoints, Touch-Ziele 36px, Music-Player, Glossar-Tooltips - Templates (sims/template.html + student/teacher-Dashboard) - Docs: module-interface.md (inkl. 4a Sprachregel, 4b Leichte Sprache, 4c iPad), content-architecture.md, crash-recovery.md, music-registry.md - Admin-Infrastruktur: admin-modules.html + api/admin-modules.php (Titel, Emoji, Bild, Status, Dauer, Alter pro Modul) - Inbox-System: _inbox/README.md + _status.md fuer Atlas + Briefings an Klima, Glossar, Lehrplan, Fluss - Zentrale SFX-Pipeline (scripts/generate-sounds.py) - DALL-E-Bilder: 8 Badges + 5 Glossar-Repraesentationsbilder (Querformat) - Logo + Inter-Font lokal - PHP-APIs: admin, glossar, levels, licenses, progress, waypoints, assignments, profile, tickets - Spielsprache entfernt (admin-modules, admin-levels, schueler) - Landing-Page-Bearbeitungen (Boote sichtbarer, Button-Hintergrund) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,390 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>GeoGraSim — Mein Fortschritt</title>
|
||||
<link rel="icon" type="image/svg+xml" href="../favicon.svg">
|
||||
<link rel="stylesheet" href="../assets/fonts/inter.css">
|
||||
<link rel="stylesheet" href="../assets/css/design-system.css">
|
||||
<style>
|
||||
body { overflow-y: auto; }
|
||||
|
||||
/* Dashboard-Layout */
|
||||
.dashboard { max-width: 960px; margin: 0 auto; padding: var(--ggs-gap-lg); }
|
||||
.dashboard h1 { font-size: 22px; font-weight: 800; color: var(--ggs-fjord-dark); margin-bottom: var(--ggs-gap-xs); }
|
||||
.dashboard .subtitle { font-size: 14px; color: var(--ggs-text-muted); margin-bottom: var(--ggs-gap-xl); }
|
||||
|
||||
/* Gesamt-Fortschritt */
|
||||
.progress-overview {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
gap: var(--ggs-gap-md);
|
||||
margin-bottom: var(--ggs-gap-xl);
|
||||
}
|
||||
.stat-card {
|
||||
background: var(--ggs-white);
|
||||
border: 1px solid var(--ggs-border);
|
||||
border-radius: var(--ggs-radius-md);
|
||||
padding: var(--ggs-gap-md);
|
||||
text-align: center;
|
||||
}
|
||||
.stat-card .big { font-size: 28px; font-weight: 800; color: var(--ggs-fjord-dark); font-variant-numeric: tabular-nums; }
|
||||
.stat-card .label { font-size: 11px; color: var(--ggs-text-muted); text-transform: uppercase; letter-spacing: .3px; margin-top: 2px; }
|
||||
|
||||
/* Lernpfad */
|
||||
.learning-path {
|
||||
display: flex;
|
||||
gap: var(--ggs-gap-lg);
|
||||
overflow-x: auto;
|
||||
padding-bottom: var(--ggs-gap-md);
|
||||
margin-bottom: var(--ggs-gap-xl);
|
||||
}
|
||||
.path-module {
|
||||
flex-shrink: 0;
|
||||
width: 200px;
|
||||
background: var(--ggs-white);
|
||||
border: 1.5px solid var(--ggs-border);
|
||||
border-radius: var(--ggs-radius-md);
|
||||
padding: var(--ggs-gap-md);
|
||||
position: relative;
|
||||
transition: all var(--ggs-duration) var(--ggs-ease);
|
||||
}
|
||||
.path-module:hover { border-color: var(--ggs-fjord); transform: translateY(-2px); box-shadow: var(--ggs-shadow-md); }
|
||||
.path-module.locked { opacity: .5; pointer-events: none; }
|
||||
.path-module .mod-icon { font-size: 32px; margin-bottom: var(--ggs-gap-sm); }
|
||||
.path-module .mod-name { font-size: 14px; font-weight: 700; color: var(--ggs-fjord-dark); }
|
||||
.path-module .mod-desc { font-size: 11px; color: var(--ggs-text-muted); margin-top: 4px; }
|
||||
|
||||
/* Level-Dots unter dem Modul */
|
||||
.path-levels {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-top: var(--ggs-gap-sm);
|
||||
}
|
||||
.path-level {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--ggs-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--ggs-text-muted);
|
||||
}
|
||||
.path-level.done { border-color: var(--ggs-moss); background: var(--ggs-moss-light); color: var(--ggs-moss-dark); }
|
||||
.path-level.current { border-color: var(--ggs-fjord); background: var(--ggs-fjord-light); color: var(--ggs-fjord-dark); }
|
||||
|
||||
/* Verbindungslinie zwischen Modulen */
|
||||
.path-connector {
|
||||
flex-shrink: 0;
|
||||
width: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--ggs-border);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* Badge-Sammlung */
|
||||
.badge-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: var(--ggs-gap-md);
|
||||
margin-bottom: var(--ggs-gap-xl);
|
||||
}
|
||||
.badge-item {
|
||||
background: var(--ggs-white);
|
||||
border: 1.5px solid var(--ggs-border);
|
||||
border-radius: var(--ggs-radius-md);
|
||||
padding: var(--ggs-gap-md);
|
||||
text-align: center;
|
||||
transition: all var(--ggs-duration) var(--ggs-ease);
|
||||
}
|
||||
.badge-item:hover { transform: translateY(-2px); box-shadow: var(--ggs-shadow-sm); }
|
||||
.badge-item.earned { border-color: var(--ggs-moss); }
|
||||
.badge-item.locked { opacity: .35; }
|
||||
.badge-item .badge-icon { font-size: 32px; margin-bottom: var(--ggs-gap-xs); }
|
||||
.badge-item .badge-name { font-size: 12px; font-weight: 700; color: var(--ggs-fjord-dark); }
|
||||
.badge-item .badge-from { font-size: 10px; color: var(--ggs-text-muted); }
|
||||
.badge-item .badge-date { font-size: 9px; color: var(--ggs-text-light); margin-top: 2px; }
|
||||
|
||||
/* Leistungsverlauf */
|
||||
.perf-section { margin-bottom: var(--ggs-gap-xl); }
|
||||
.perf-section h2 { font-size: 16px; font-weight: 700; color: var(--ggs-fjord-dark); margin-bottom: var(--ggs-gap-md); }
|
||||
|
||||
.perf-module {
|
||||
background: var(--ggs-white);
|
||||
border: 1px solid var(--ggs-border);
|
||||
border-radius: var(--ggs-radius-md);
|
||||
padding: var(--ggs-gap-md);
|
||||
margin-bottom: var(--ggs-gap-md);
|
||||
}
|
||||
.perf-module-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--ggs-gap-sm);
|
||||
margin-bottom: var(--ggs-gap-sm);
|
||||
}
|
||||
.perf-module-header .icon { font-size: 20px; }
|
||||
.perf-module-header .name { font-size: 14px; font-weight: 700; }
|
||||
|
||||
/* Level-Vergleich (Balken nebeneinander) */
|
||||
.perf-levels {
|
||||
display: flex;
|
||||
gap: var(--ggs-gap-md);
|
||||
}
|
||||
.perf-level {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.perf-level .level-label { font-size: 10px; font-weight: 600; color: var(--ggs-text-muted); text-transform: uppercase; margin-bottom: 4px; }
|
||||
.perf-level .level-bar {
|
||||
height: 80px;
|
||||
background: var(--ggs-bg-dark);
|
||||
border-radius: var(--ggs-radius-sm);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.perf-level .level-fill {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-radius: var(--ggs-radius-sm);
|
||||
transition: height 0.8s var(--ggs-ease);
|
||||
}
|
||||
.perf-level .level-score { font-size: 13px; font-weight: 800; margin-top: 4px; }
|
||||
.perf-level .level-stars { font-size: 12px; color: #f0c040; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Header -->
|
||||
<header class="ggs-header">
|
||||
<a href="../" class="ggs-header-logo">
|
||||
<img src="../assets/img/bildLogo.png" alt="" class="ggs-header-logo-icon">
|
||||
<img src="../assets/img/textlogo_geograsim.svg" alt="GeoGraSim" class="ggs-header-logo-text">
|
||||
</a>
|
||||
<div class="ggs-header-separator"></div>
|
||||
<span class="ggs-header-module">Mein Fortschritt</span>
|
||||
<div class="ggs-header-spacer"></div>
|
||||
<div class="ggs-header-actions">
|
||||
<a href="../schueler" class="ggs-btn-ghost">Dashboard</a>
|
||||
<a href="../" class="ggs-btn-ghost">🏠</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="dashboard">
|
||||
|
||||
<!-- Gesamt-Statistik -->
|
||||
<h1>Hallo, Anna! 👋</h1>
|
||||
<p class="subtitle">Hier siehst du deinen Lernfortschritt über alle Module.</p>
|
||||
|
||||
<div class="progress-overview">
|
||||
<div class="stat-card">
|
||||
<div class="big">1.240</div>
|
||||
<div class="label">Erfahrungspunkte</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="big">14</div>
|
||||
<div class="label">Sterne gesamt</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="big">7</div>
|
||||
<div class="label">Badges verdient</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="big">3/6</div>
|
||||
<div class="label">Module begonnen</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Lernpfad -->
|
||||
<h2 style="font-size:16px; font-weight:700; color:var(--ggs-fjord-dark); margin-bottom:var(--ggs-gap-md);">Lernpfad</h2>
|
||||
|
||||
<div class="learning-path">
|
||||
<!-- Modul 1: Klimawächter -->
|
||||
<div class="path-module">
|
||||
<div class="mod-icon">🌍</div>
|
||||
<div class="mod-name">Klimawächter</div>
|
||||
<div class="mod-desc">Klimaschutz-Strategien entwickeln</div>
|
||||
<div class="path-levels">
|
||||
<div class="path-level done">★</div>
|
||||
<div class="path-level done">★</div>
|
||||
<div class="path-level current">3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="path-connector">→</div>
|
||||
|
||||
<!-- Modul 2: Fluss -->
|
||||
<div class="path-module">
|
||||
<div class="mod-icon">🏞️</div>
|
||||
<div class="mod-name">Flussmanagement</div>
|
||||
<div class="mod-desc">Lebensraum Fluss gestalten</div>
|
||||
<div class="path-levels">
|
||||
<div class="path-level done">★</div>
|
||||
<div class="path-level current">2</div>
|
||||
<div class="path-level">3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="path-connector">→</div>
|
||||
|
||||
<!-- Modul 3: Heli -->
|
||||
<div class="path-module">
|
||||
<div class="mod-icon">🚁</div>
|
||||
<div class="mod-name">Heli-Navigation</div>
|
||||
<div class="mod-desc">Alpengeografie durch Rettungseinsätze</div>
|
||||
<div class="path-levels">
|
||||
<div class="path-level done">★</div>
|
||||
<div class="path-level">2</div>
|
||||
<div class="path-level">3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="path-connector" style="color:var(--ggs-text-light);">→</div>
|
||||
|
||||
<!-- Modul 4: Stadt (noch gesperrt) -->
|
||||
<div class="path-module locked">
|
||||
<div class="mod-icon">🏙️</div>
|
||||
<div class="mod-name">Stadt & Raum</div>
|
||||
<div class="mod-desc">Stadtplanung und Raumordnung</div>
|
||||
<div class="path-levels">
|
||||
<div class="path-level">1</div>
|
||||
<div class="path-level">2</div>
|
||||
<div class="path-level">3</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Badge-Sammlung -->
|
||||
<h2 style="font-size:16px; font-weight:700; color:var(--ggs-fjord-dark); margin-bottom:var(--ggs-gap-md);">Meine Badges</h2>
|
||||
|
||||
<div class="badge-grid">
|
||||
<div class="badge-item earned">
|
||||
<div class="badge-icon">🌬️</div>
|
||||
<div class="badge-name">Windkraft-Pionier</div>
|
||||
<div class="badge-from">Klimawächter</div>
|
||||
<div class="badge-date">12. Apr 2026</div>
|
||||
</div>
|
||||
<div class="badge-item earned">
|
||||
<div class="badge-icon">🛡️</div>
|
||||
<div class="badge-name">Küstenschutz</div>
|
||||
<div class="badge-from">Klimawächter</div>
|
||||
<div class="badge-date">12. Apr 2026</div>
|
||||
</div>
|
||||
<div class="badge-item earned">
|
||||
<div class="badge-icon">🐟</div>
|
||||
<div class="badge-name">Artenvielfalt</div>
|
||||
<div class="badge-from">Flussmanagement</div>
|
||||
<div class="badge-date">13. Apr 2026</div>
|
||||
</div>
|
||||
<div class="badge-item earned">
|
||||
<div class="badge-icon">🎯</div>
|
||||
<div class="badge-name">Punktlandung</div>
|
||||
<div class="badge-from">Heli-Navigation</div>
|
||||
<div class="badge-date">14. Apr 2026</div>
|
||||
</div>
|
||||
<div class="badge-item earned">
|
||||
<div class="badge-icon">⚡</div>
|
||||
<div class="badge-name">100% Erneuerbar</div>
|
||||
<div class="badge-from">Klimawächter</div>
|
||||
<div class="badge-date">14. Apr 2026</div>
|
||||
</div>
|
||||
<div class="badge-item earned">
|
||||
<div class="badge-icon">🌊</div>
|
||||
<div class="badge-name">Hochwasserschutz</div>
|
||||
<div class="badge-from">Flussmanagement</div>
|
||||
<div class="badge-date">14. Apr 2026</div>
|
||||
</div>
|
||||
<div class="badge-item earned">
|
||||
<div class="badge-icon">⛽</div>
|
||||
<div class="badge-name">Sparflieger</div>
|
||||
<div class="badge-from">Heli-Navigation</div>
|
||||
<div class="badge-date">15. Apr 2026</div>
|
||||
</div>
|
||||
<!-- Locked badges -->
|
||||
<div class="badge-item locked">
|
||||
<div class="badge-icon">🏆</div>
|
||||
<div class="badge-name">Klimaretterin</div>
|
||||
<div class="badge-from">Klimawächter L3</div>
|
||||
</div>
|
||||
<div class="badge-item locked">
|
||||
<div class="badge-icon">🗺️</div>
|
||||
<div class="badge-name">Alpenkennerin</div>
|
||||
<div class="badge-from">Heli-Navigation L3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Leistungsverlauf pro Modul -->
|
||||
<div class="perf-section">
|
||||
<h2>Leistungsverlauf</h2>
|
||||
|
||||
<div class="perf-module">
|
||||
<div class="perf-module-header">
|
||||
<span class="icon">🌍</span>
|
||||
<span class="name">Klimawächter</span>
|
||||
<span class="ggs-badge level-easy" style="margin-left:auto;">Level 1–3</span>
|
||||
</div>
|
||||
<div class="perf-levels">
|
||||
<div class="perf-level">
|
||||
<div class="level-label">Level 1</div>
|
||||
<div class="level-bar"><div class="level-fill" style="height:45%; background:var(--ggs-moss-light);"></div></div>
|
||||
<div class="level-score">45%</div>
|
||||
<div class="level-stars">★★☆☆☆</div>
|
||||
</div>
|
||||
<div class="perf-level">
|
||||
<div class="level-label">Level 2</div>
|
||||
<div class="level-bar"><div class="level-fill" style="height:72%; background:var(--ggs-moss);"></div></div>
|
||||
<div class="level-score">72%</div>
|
||||
<div class="level-stars">★★★★☆</div>
|
||||
</div>
|
||||
<div class="perf-level">
|
||||
<div class="level-label">Level 3</div>
|
||||
<div class="level-bar"><div class="level-fill" style="height:0%; background:var(--ggs-border);"></div></div>
|
||||
<div class="level-score">—</div>
|
||||
<div class="level-stars">☆☆☆☆☆</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="perf-module">
|
||||
<div class="perf-module-header">
|
||||
<span class="icon">🚁</span>
|
||||
<span class="name">Heli-Navigation</span>
|
||||
<span class="ggs-badge level-easy" style="margin-left:auto;">Level 1</span>
|
||||
</div>
|
||||
<div class="perf-levels">
|
||||
<div class="perf-level">
|
||||
<div class="level-label">Level 1</div>
|
||||
<div class="level-bar"><div class="level-fill" style="height:68%; background:var(--ggs-fjord);"></div></div>
|
||||
<div class="level-score">68%</div>
|
||||
<div class="level-stars">★★★☆☆</div>
|
||||
</div>
|
||||
<div class="perf-level">
|
||||
<div class="level-label">Level 2</div>
|
||||
<div class="level-bar"><div class="level-fill" style="height:0%; background:var(--ggs-border);"></div></div>
|
||||
<div class="level-score">—</div>
|
||||
<div class="level-stars">☆☆☆☆☆</div>
|
||||
</div>
|
||||
<div class="perf-level">
|
||||
<div class="level-label">Level 3</div>
|
||||
<div class="level-bar"><div class="level-fill" style="height:0%; background:var(--ggs-border);"></div></div>
|
||||
<div class="level-score">—</div>
|
||||
<div class="level-stars">☆☆☆☆☆</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user