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,564 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>GeoGraSim — Klassenübersicht</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 { max-width: 1100px; 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); }
|
||||
|
||||
/* Klassen-Statistik Übersicht */
|
||||
.class-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: var(--ggs-gap-md);
|
||||
margin-bottom: var(--ggs-gap-xl);
|
||||
}
|
||||
.class-stat {
|
||||
background: var(--ggs-white);
|
||||
border: 1px solid var(--ggs-border);
|
||||
border-radius: var(--ggs-radius-md);
|
||||
padding: var(--ggs-gap-md);
|
||||
}
|
||||
.class-stat .big { font-size: 28px; font-weight: 800; color: var(--ggs-fjord-dark); }
|
||||
.class-stat .label { font-size: 11px; color: var(--ggs-text-muted); text-transform: uppercase; letter-spacing: .3px; }
|
||||
.class-stat .sub { font-size: 11px; color: var(--ggs-text-muted); margin-top: 2px; }
|
||||
|
||||
/* Heatmap */
|
||||
.heatmap-container { margin-bottom: var(--ggs-gap-xl); }
|
||||
.heatmap-container h2 { font-size: 16px; font-weight: 700; color: var(--ggs-fjord-dark); margin-bottom: var(--ggs-gap-md); }
|
||||
|
||||
.heatmap {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.heatmap th {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .3px;
|
||||
color: var(--ggs-text-muted);
|
||||
padding: 6px 8px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.heatmap th:first-child { text-align: left; min-width: 140px; }
|
||||
.heatmap td {
|
||||
text-align: center;
|
||||
padding: 6px 4px;
|
||||
border-radius: var(--ggs-radius-sm);
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.heatmap td:hover { transform: scale(1.15); z-index: 1; position: relative; }
|
||||
.heatmap td:first-child {
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: var(--ggs-fjord-dark);
|
||||
cursor: default;
|
||||
padding-left: 8px;
|
||||
}
|
||||
.heatmap td:first-child:hover { transform: none; }
|
||||
|
||||
/* Heatmap-Farbstufen */
|
||||
.hm-none { background: var(--ggs-bg-dark); color: var(--ggs-text-light); }
|
||||
.hm-low { background: #fde8e4; color: var(--ggs-coral); }
|
||||
.hm-mid { background: #fff3cd; color: #856404; }
|
||||
.hm-good { background: #d4edda; color: #155724; }
|
||||
.hm-great { background: var(--ggs-moss-light); color: var(--ggs-moss-dark); font-weight: 800; }
|
||||
|
||||
/* Modul-Spalten-Header mit Icon */
|
||||
.heatmap .mod-header { display: flex; flex-direction: column; align-items: center; gap: 2px; }
|
||||
.heatmap .mod-header .mod-icon { font-size: 16px; }
|
||||
|
||||
/* Insight Cards */
|
||||
.insights { margin-bottom: var(--ggs-gap-xl); }
|
||||
.insights h2 { font-size: 16px; font-weight: 700; color: var(--ggs-fjord-dark); margin-bottom: var(--ggs-gap-md); }
|
||||
|
||||
.insight-card {
|
||||
background: var(--ggs-white);
|
||||
border: 1px solid var(--ggs-border);
|
||||
border-left: 4px solid var(--ggs-fjord);
|
||||
border-radius: var(--ggs-radius-md);
|
||||
padding: var(--ggs-gap-md) var(--ggs-gap-lg);
|
||||
margin-bottom: var(--ggs-gap-md);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--ggs-gap-md);
|
||||
}
|
||||
.insight-card.warning { border-left-color: var(--ggs-orange); }
|
||||
.insight-card.success { border-left-color: var(--ggs-moss); }
|
||||
.insight-card .insight-icon { font-size: 24px; flex-shrink: 0; }
|
||||
.insight-card .insight-title { font-size: 14px; font-weight: 700; color: var(--ggs-fjord-dark); }
|
||||
.insight-card .insight-text { font-size: 13px; color: var(--ggs-text-muted); margin-top: 2px; line-height: 1.5; }
|
||||
.insight-card .insight-action {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--ggs-fjord);
|
||||
margin-top: var(--ggs-gap-sm);
|
||||
cursor: pointer;
|
||||
}
|
||||
.insight-card .insight-action:hover { text-decoration: underline; }
|
||||
|
||||
/* Einzelansicht */
|
||||
.student-detail { margin-bottom: var(--ggs-gap-xl); }
|
||||
.student-detail h2 { font-size: 16px; font-weight: 700; color: var(--ggs-fjord-dark); margin-bottom: var(--ggs-gap-md); }
|
||||
|
||||
.detail-card {
|
||||
background: var(--ggs-white);
|
||||
border: 1px solid var(--ggs-border);
|
||||
border-radius: var(--ggs-radius-md);
|
||||
padding: var(--ggs-gap-lg);
|
||||
}
|
||||
.detail-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--ggs-gap-md);
|
||||
margin-bottom: var(--ggs-gap-lg);
|
||||
padding-bottom: var(--ggs-gap-md);
|
||||
border-bottom: 1px solid var(--ggs-border);
|
||||
}
|
||||
.detail-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: var(--ggs-fjord-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
color: var(--ggs-fjord-dark);
|
||||
}
|
||||
.detail-name { font-size: 18px; font-weight: 800; color: var(--ggs-fjord-dark); }
|
||||
.detail-meta { font-size: 12px; color: var(--ggs-text-muted); }
|
||||
|
||||
/* Modul-Vergleich im Detail */
|
||||
.detail-modules {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: var(--ggs-gap-md);
|
||||
margin-bottom: var(--ggs-gap-lg);
|
||||
}
|
||||
.detail-module {
|
||||
border: 1px solid var(--ggs-border);
|
||||
border-radius: var(--ggs-radius-md);
|
||||
padding: var(--ggs-gap-md);
|
||||
}
|
||||
.detail-module-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--ggs-gap-sm);
|
||||
margin-bottom: var(--ggs-gap-sm);
|
||||
}
|
||||
.detail-module-header .icon { font-size: 20px; }
|
||||
.detail-module-header .name { font-size: 13px; font-weight: 700; }
|
||||
|
||||
.detail-level-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--ggs-gap-sm);
|
||||
padding: 4px 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
.detail-level-label { width: 50px; font-weight: 600; color: var(--ggs-text-muted); }
|
||||
.detail-level-bar { flex: 1; height: 8px; background: var(--ggs-bg-dark); border-radius: 4px; overflow: hidden; }
|
||||
.detail-level-fill { height: 100%; border-radius: 4px; }
|
||||
.detail-level-score { width: 36px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
|
||||
|
||||
/* Aktionslog */
|
||||
.action-log {
|
||||
margin-top: var(--ggs-gap-lg);
|
||||
padding-top: var(--ggs-gap-md);
|
||||
border-top: 1px solid var(--ggs-border);
|
||||
}
|
||||
.action-log h3 { font-size: 13px; font-weight: 700; color: var(--ggs-fjord-dark); margin-bottom: var(--ggs-gap-sm); }
|
||||
.log-entry {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--ggs-gap-sm);
|
||||
padding: 6px 0;
|
||||
font-size: 12px;
|
||||
border-bottom: 1px solid var(--ggs-bg-dark);
|
||||
}
|
||||
.log-time { width: 60px; color: var(--ggs-text-light); font-variant-numeric: tabular-nums; flex-shrink: 0; }
|
||||
.log-icon { font-size: 14px; flex-shrink: 0; }
|
||||
.log-text { color: var(--ggs-text-muted); }
|
||||
.log-text strong { color: var(--ggs-text); font-weight: 600; }
|
||||
|
||||
/* Reflexionsantworten */
|
||||
.reflections {
|
||||
margin-top: var(--ggs-gap-lg);
|
||||
padding-top: var(--ggs-gap-md);
|
||||
border-top: 1px solid var(--ggs-border);
|
||||
}
|
||||
.reflections h3 { font-size: 13px; font-weight: 700; color: var(--ggs-fjord-dark); margin-bottom: var(--ggs-gap-sm); }
|
||||
.reflection-entry {
|
||||
background: var(--ggs-bg);
|
||||
border-radius: var(--ggs-radius-sm);
|
||||
padding: var(--ggs-gap-sm) var(--ggs-gap-md);
|
||||
margin-bottom: var(--ggs-gap-sm);
|
||||
font-size: 12px;
|
||||
}
|
||||
.reflection-q { font-weight: 600; color: var(--ggs-fjord-dark); }
|
||||
.reflection-a { color: var(--ggs-text-muted); margin-top: 2px; }
|
||||
.reflection-a .chosen { color: var(--ggs-moss-dark); font-weight: 600; }
|
||||
</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">Klasse 2b — Klassenübersicht</span>
|
||||
<div class="ggs-header-spacer"></div>
|
||||
<div class="ggs-header-actions">
|
||||
<a href="../teacher" class="ggs-btn-ghost">Dashboard</a>
|
||||
<a href="../" class="ggs-btn-ghost">🏠</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="dashboard">
|
||||
|
||||
<h1>Klasse 2b — Geografie</h1>
|
||||
<p class="subtitle">20 Schülerinnen und Schüler · Schuljahr 2025/26 · Letzte Aktivität: heute</p>
|
||||
|
||||
<!-- ============================================================
|
||||
KLASSEN-STATISTIK
|
||||
============================================================ -->
|
||||
<div class="class-stats">
|
||||
<div class="class-stat">
|
||||
<div class="big">20</div>
|
||||
<div class="label">Aktive Schüler</div>
|
||||
<div class="sub">18 diese Woche aktiv</div>
|
||||
</div>
|
||||
<div class="class-stat">
|
||||
<div class="big">67%</div>
|
||||
<div class="label">Ø Fortschritt</div>
|
||||
<div class="sub">+12% seit letzter Woche</div>
|
||||
</div>
|
||||
<div class="class-stat">
|
||||
<div class="big">142</div>
|
||||
<div class="label">Badges verdient</div>
|
||||
<div class="sub">Ø 7,1 pro Schüler</div>
|
||||
</div>
|
||||
<div class="class-stat">
|
||||
<div class="big">3,4 ★</div>
|
||||
<div class="label">Ø Bewertung</div>
|
||||
<div class="sub">über alle Module</div>
|
||||
</div>
|
||||
<div class="class-stat">
|
||||
<div class="big">24 min</div>
|
||||
<div class="label">Ø Spieldauer</div>
|
||||
<div class="sub">pro Session</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ============================================================
|
||||
HEATMAP: Schüler × Module
|
||||
============================================================ -->
|
||||
<div class="heatmap-container">
|
||||
<h2>Fortschritt pro Modul</h2>
|
||||
|
||||
<table class="heatmap">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th><div class="mod-header"><span class="mod-icon">🌍</span>Klima L1</div></th>
|
||||
<th><div class="mod-header"><span class="mod-icon">🌍</span>Klima L2</div></th>
|
||||
<th><div class="mod-header"><span class="mod-icon">🌍</span>Klima L3</div></th>
|
||||
<th><div class="mod-header"><span class="mod-icon">🏞️</span>Fluss L1</div></th>
|
||||
<th><div class="mod-header"><span class="mod-icon">🏞️</span>Fluss L2</div></th>
|
||||
<th><div class="mod-header"><span class="mod-icon">🏞️</span>Fluss L3</div></th>
|
||||
<th><div class="mod-header"><span class="mod-icon">🚁</span>Heli L1</div></th>
|
||||
<th><div class="mod-header"><span class="mod-icon">🚁</span>Heli L2</div></th>
|
||||
<th><div class="mod-header"><span class="mod-icon">🚁</span>Heli L3</div></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Anna M.</td>
|
||||
<td class="hm-good">★★★</td>
|
||||
<td class="hm-great">★★★★</td>
|
||||
<td class="hm-mid">★★</td>
|
||||
<td class="hm-good">★★★</td>
|
||||
<td class="hm-mid">★★</td>
|
||||
<td class="hm-none">—</td>
|
||||
<td class="hm-good">★★★</td>
|
||||
<td class="hm-none">—</td>
|
||||
<td class="hm-none">—</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ben K.</td>
|
||||
<td class="hm-great">★★★★</td>
|
||||
<td class="hm-good">★★★</td>
|
||||
<td class="hm-none">—</td>
|
||||
<td class="hm-mid">★★</td>
|
||||
<td class="hm-none">—</td>
|
||||
<td class="hm-none">—</td>
|
||||
<td class="hm-great">★★★★★</td>
|
||||
<td class="hm-good">★★★</td>
|
||||
<td class="hm-none">—</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clara S.</td>
|
||||
<td class="hm-good">★★★</td>
|
||||
<td class="hm-good">★★★</td>
|
||||
<td class="hm-good">★★★</td>
|
||||
<td class="hm-great">★★★★</td>
|
||||
<td class="hm-good">★★★</td>
|
||||
<td class="hm-mid">★★</td>
|
||||
<td class="hm-mid">★★</td>
|
||||
<td class="hm-none">—</td>
|
||||
<td class="hm-none">—</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>David W.</td>
|
||||
<td class="hm-low">★</td>
|
||||
<td class="hm-low">★</td>
|
||||
<td class="hm-none">—</td>
|
||||
<td class="hm-low">★</td>
|
||||
<td class="hm-none">—</td>
|
||||
<td class="hm-none">—</td>
|
||||
<td class="hm-mid">★★</td>
|
||||
<td class="hm-none">—</td>
|
||||
<td class="hm-none">—</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Emma B.</td>
|
||||
<td class="hm-great">★★★★★</td>
|
||||
<td class="hm-great">★★★★</td>
|
||||
<td class="hm-good">★★★</td>
|
||||
<td class="hm-good">★★★</td>
|
||||
<td class="hm-good">★★★</td>
|
||||
<td class="hm-mid">★★</td>
|
||||
<td class="hm-great">★★★★</td>
|
||||
<td class="hm-good">★★★</td>
|
||||
<td class="hm-mid">★★</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Felix R.</td>
|
||||
<td class="hm-mid">★★</td>
|
||||
<td class="hm-none">—</td>
|
||||
<td class="hm-none">—</td>
|
||||
<td class="hm-none">—</td>
|
||||
<td class="hm-none">—</td>
|
||||
<td class="hm-none">—</td>
|
||||
<td class="hm-low">★</td>
|
||||
<td class="hm-none">—</td>
|
||||
<td class="hm-none">—</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p style="font-size:11px; color:var(--ggs-text-light); margin-top:8px;">Klick auf eine Zelle für Details · Zeigt 6 von 20 Schülern</p>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ============================================================
|
||||
INSIGHT CARDS — automatisch generierte Erkenntnisse
|
||||
============================================================ -->
|
||||
<div class="insights">
|
||||
<h2>Erkenntnisse</h2>
|
||||
|
||||
<div class="insight-card warning">
|
||||
<span class="insight-icon">⚠️</span>
|
||||
<div>
|
||||
<div class="insight-title">7 von 20 Schülern scheitern bei Klimawächter Level 2</div>
|
||||
<div class="insight-text">
|
||||
Häufigste Fehlstrategie: Investition in fossile Energie trotz steigender CO₂-Werte.
|
||||
Die Schüler erkennen den Zusammenhang zwischen Energiequelle und Emission noch nicht.
|
||||
</div>
|
||||
<div class="insight-action">→ Unterrichtsimpuls: Energieträger und ihre CO₂-Bilanz besprechen</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="insight-card success">
|
||||
<span class="insight-icon">📈</span>
|
||||
<div>
|
||||
<div class="insight-title">Entscheidungseffizienz steigt im Median um 38% von Level 1 zu Level 2</div>
|
||||
<div class="insight-text">
|
||||
Die Klasse braucht im zweiten Durchlauf deutlich weniger Massnahmen für bessere Ergebnisse.
|
||||
Das deutet auf wachsendes Systemverständnis hin.
|
||||
</div>
|
||||
<div class="insight-action">→ Vertiefen: Fragen Sie im Unterricht nach den "Warum"-Gründen</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="insight-card">
|
||||
<span class="insight-icon">🔍</span>
|
||||
<div>
|
||||
<div class="insight-title">David und Felix haben seit 5 Tagen nicht gespielt</div>
|
||||
<div class="insight-text">
|
||||
Beide Schüler sind bei Level 1 stehen geblieben. Mögliche Ursachen: Technische Probleme, fehlendes Verständnis oder geringe Motivation.
|
||||
</div>
|
||||
<div class="insight-action">→ Empfehlung: Kurzes Gespräch mit den Schülern führen</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="insight-card success">
|
||||
<span class="insight-icon">🚁</span>
|
||||
<div>
|
||||
<div class="insight-title">Heli-Navigation: Höchste Motivation in der Klasse</div>
|
||||
<div class="insight-text">
|
||||
Durchschnittlich 3,2 Versuche pro Schüler (vs. 1,8 bei Klimawächter). Ben K. hat 5 Sterne bei Level 1 — die Alpengeografie scheint zu begeistern.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ============================================================
|
||||
EINZELANSICHT — ein Schüler im Detail
|
||||
============================================================ -->
|
||||
<div class="student-detail">
|
||||
<h2>Einzelansicht</h2>
|
||||
|
||||
<div class="detail-card">
|
||||
<div class="detail-header">
|
||||
<div class="detail-avatar">A</div>
|
||||
<div>
|
||||
<div class="detail-name">Anna M.</div>
|
||||
<div class="detail-meta">1.240 XP · 14 Sterne · 7 Badges · Letzte Aktivität: heute, 10:42</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modul-Fortschritt -->
|
||||
<div class="detail-modules">
|
||||
<div class="detail-module">
|
||||
<div class="detail-module-header">
|
||||
<span class="icon">🌍</span>
|
||||
<span class="name">Klimawächter</span>
|
||||
</div>
|
||||
<div class="detail-level-row">
|
||||
<span class="detail-level-label">Level 1</span>
|
||||
<div class="detail-level-bar"><div class="detail-level-fill" style="width:78%; background:var(--ggs-moss);"></div></div>
|
||||
<span class="detail-level-score">78%</span>
|
||||
</div>
|
||||
<div class="detail-level-row">
|
||||
<span class="detail-level-label">Level 2</span>
|
||||
<div class="detail-level-bar"><div class="detail-level-fill" style="width:85%; background:var(--ggs-moss);"></div></div>
|
||||
<span class="detail-level-score">85%</span>
|
||||
</div>
|
||||
<div class="detail-level-row">
|
||||
<span class="detail-level-label">Level 3</span>
|
||||
<div class="detail-level-bar"><div class="detail-level-fill" style="width:52%; background:var(--ggs-orange);"></div></div>
|
||||
<span class="detail-level-score">52%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-module">
|
||||
<div class="detail-module-header">
|
||||
<span class="icon">🏞️</span>
|
||||
<span class="name">Flussmanagement</span>
|
||||
</div>
|
||||
<div class="detail-level-row">
|
||||
<span class="detail-level-label">Level 1</span>
|
||||
<div class="detail-level-bar"><div class="detail-level-fill" style="width:72%; background:var(--ggs-moss);"></div></div>
|
||||
<span class="detail-level-score">72%</span>
|
||||
</div>
|
||||
<div class="detail-level-row">
|
||||
<span class="detail-level-label">Level 2</span>
|
||||
<div class="detail-level-bar"><div class="detail-level-fill" style="width:61%; background:var(--ggs-orange);"></div></div>
|
||||
<span class="detail-level-score">61%</span>
|
||||
</div>
|
||||
<div class="detail-level-row">
|
||||
<span class="detail-level-label">Level 3</span>
|
||||
<div class="detail-level-bar"><div class="detail-level-fill" style="width:0%;"></div></div>
|
||||
<span class="detail-level-score">—</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-module">
|
||||
<div class="detail-module-header">
|
||||
<span class="icon">🚁</span>
|
||||
<span class="name">Heli-Navigation</span>
|
||||
</div>
|
||||
<div class="detail-level-row">
|
||||
<span class="detail-level-label">Level 1</span>
|
||||
<div class="detail-level-bar"><div class="detail-level-fill" style="width:68%; background:var(--ggs-fjord);"></div></div>
|
||||
<span class="detail-level-score">68%</span>
|
||||
</div>
|
||||
<div class="detail-level-row">
|
||||
<span class="detail-level-label">Level 2</span>
|
||||
<div class="detail-level-bar"><div class="detail-level-fill" style="width:0%;"></div></div>
|
||||
<span class="detail-level-score">—</span>
|
||||
</div>
|
||||
<div class="detail-level-row">
|
||||
<span class="detail-level-label">Level 3</span>
|
||||
<div class="detail-level-bar"><div class="detail-level-fill" style="width:0%;"></div></div>
|
||||
<span class="detail-level-score">—</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Aktionslog -->
|
||||
<div class="action-log">
|
||||
<h3>Letzte Aktionen — Klimawächter Level 2</h3>
|
||||
<div class="log-entry">
|
||||
<span class="log-time">R. 3</span>
|
||||
<span class="log-icon">🌬️</span>
|
||||
<span class="log-text"><strong>Windpark</strong> gebaut — Budget: 160 → 135 Mio</span>
|
||||
</div>
|
||||
<div class="log-entry">
|
||||
<span class="log-time">R. 5</span>
|
||||
<span class="log-icon">☀️</span>
|
||||
<span class="log-text"><strong>Solaranlage</strong> gebaut — CO₂: 780 → 730 Mt</span>
|
||||
</div>
|
||||
<div class="log-entry">
|
||||
<span class="log-time">R. 8</span>
|
||||
<span class="log-icon">🛡️</span>
|
||||
<span class="log-text"><strong>Küstenschutz</strong> gebaut — Schutz: 40% → 80%</span>
|
||||
</div>
|
||||
<div class="log-entry">
|
||||
<span class="log-time">R. 12</span>
|
||||
<span class="log-icon">🌊</span>
|
||||
<span class="log-text">Sturmflut! <strong>Deich hat gehalten</strong> — kein Schaden</span>
|
||||
</div>
|
||||
<div class="log-entry">
|
||||
<span class="log-time">R. 15</span>
|
||||
<span class="log-icon">⭐</span>
|
||||
<span class="log-text">Badge verdient: <strong>Küstenschutz-Expertin</strong></span>
|
||||
</div>
|
||||
<div class="log-entry">
|
||||
<span class="log-time">R. 20</span>
|
||||
<span class="log-icon">🌬️</span>
|
||||
<span class="log-text">Zweiter <strong>Windpark</strong> — Erneuerbare: 45% → 68%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reflexionsantworten -->
|
||||
<div class="reflections">
|
||||
<h3>Reflexionsantworten</h3>
|
||||
<div class="reflection-entry">
|
||||
<div class="reflection-q">Level 1 → 2: "Was war deine wirksamste Entscheidung?"</div>
|
||||
<div class="reflection-a">Antwort: <span class="chosen">Windpark gebaut</span></div>
|
||||
</div>
|
||||
<div class="reflection-entry">
|
||||
<div class="reflection-q">Level 2 → 3: "Was würdest du beim nächsten Mal anders machen?"</div>
|
||||
<div class="reflection-a">Antwort: <span class="chosen">Früher in Küstenschutz investieren</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user