ggs-header Batch 2 Start: Farmer + Komponenten-Vorruestung

- Komponente: Logo-Fallback (Kreis-Logo wenn Sim keins hat), Overlay-Modus
  (data-ggs-overlay fuer Vollbild-Canvas), generische Icon-Button-Optik fuer
  Aktionen ohne .ggs-btn-ghost-Klasse, Ton-IDs erweitert (audio-toggle/btnSound).
- Farmer als erstes Bespoke-Muster: ggs-topbar -> ggs-header, schwebende Pille
  (Fallback-Logo + Titel) + Geld-KPI + Icon-Buttons; interne Fachinfo bleibt
  (data-ggs-no-glossar).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-08-25 14:33:53 +02:00
parent c913522a77
commit 7b1bdb8d1b
3 changed files with 63 additions and 11 deletions
+12 -9
View File
@@ -8,6 +8,9 @@
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="">
<link rel="stylesheet" href="../../assets/css/ggs-header.css">
<script src="../../assets/js/ggs-header.js"></script>
<style>
html, body { margin: 0; padding: 0; height: 100dvh; overflow: hidden;
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
@@ -19,9 +22,6 @@
/* ===== Topbar ===== */
.ggs-topbar {
position: absolute; top: 8px; left: 8px; z-index: 1000;
background: rgba(255, 255, 255, 0.95);
padding: 6px 10px; border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
display: flex; gap: 8px; align-items: center; font-size: 13px;
}
.ggs-topbar a {
@@ -487,13 +487,16 @@
</head>
<body>
<div class="ggs-topbar">
<h1>🌾 Landwirtschaft</h1>
<a href="/schueler" title="Zurück zur Schülerseite">🏠</a>
<button id="audio-toggle" title="Ton an/aus" onclick="toggleAudio()">🔊</button>
<button id="btn-info" title="Anleitung nochmal zeigen" onclick="if(window.GGS_TUTORIAL&&typeof window.GGS_TUTORIAL.replay==='function')window.GGS_TUTORIAL.replay();"></button>
<button id="glossar-btn" title="Fachinfo / Glossar" onclick="openInfoModal()">📖</button>
<div class="ggs-topbar ggs-header" data-ggs-sim="farmer" data-ggs-no-glossar data-ggs-home="/schueler">
<h1 class="ggs-header-module">🌾 Landwirtschaft</h1>
<div class="farmer-money" id="money-display">0 €</div>
<div class="ggs-header-spacer"></div>
<div class="ggs-header-actions">
<a href="/schueler" title="Zurück zur Schülerseite">🏠</a>
<button id="audio-toggle" title="Ton an/aus" onclick="toggleAudio()">🔊</button>
<button id="btn-info" title="Anleitung nochmal zeigen" onclick="if(window.GGS_TUTORIAL&&typeof window.GGS_TUTORIAL.replay==='function')window.GGS_TUTORIAL.replay();"></button>
<button id="glossar-btn" title="Fachinfo / Glossar" onclick="openInfoModal()">📖</button>
</div>
</div>
<div class="farmer-year-bar">