Adminator
fecd8bb9c9
562 Ersetzungen in 50 Dateien: Halbgeviertstrich zwischen zwei Ziffern (= "bis"-Bereich) bekommt Leerzeichen davor/danach (3–4 -> 3 – 4). Regex /([0-9])\s*–\s*(?=[0-9])/ auf Rohtext (format-erhaltend, CRLF/Einrueckung unveraendert), Bindestriche in Woertern und Minuszeichen unangetastet, alle JSON weiter gueltig. Energiemanager-Zeitbloecke sind Display-Labels (kein Logik-Key) -> safe. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
391 lines
13 KiB
HTML
391 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||
<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>
|