Farmer-Header v2 nach Thomas-Feedback + Default-Musikplayer

- Header nach oben RECHTS (raus aus dem Leaflet-Zoom oben links),
  Geld-Anzeige entfernt (steht in linker Sidebar), Emoji aus Titel,
  Jahr als Badge in die Pille (Konsistenz mit Batch 1), Inter-Font.
- Jahr-Leiste + Anbau-Versuch-Spalte nach unten geschoben (unter Header).
- Komponente: wiederverwendbarer Default-Musikplayer (data-ggs-music,
  Klima-Tracks als Plattform-Standard) + Musik-Widget-Styling fuer Sims
  ohne design-system.css.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-08-25 15:02:18 +02:00
parent 7b1bdb8d1b
commit 6c2990aa5e
3 changed files with 82 additions and 9 deletions
+7 -8
View File
@@ -8,6 +8,7 @@
<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/fonts/inter.css">
<link rel="stylesheet" href="../../assets/css/ggs-header.css">
<script src="../../assets/js/ggs-header.js"></script>
@@ -21,7 +22,7 @@
/* ===== Topbar ===== */
.ggs-topbar {
position: absolute; top: 8px; left: 8px; z-index: 1000;
position: absolute; top: 8px; right: 8px; left: auto; z-index: 1001;
display: flex; gap: 8px; align-items: center; font-size: 13px;
}
.ggs-topbar a {
@@ -42,7 +43,7 @@
/* ===== Year-Bar ===== */
.farmer-year-bar {
position: absolute; top: 8px; right: 8px; z-index: 1000;
position: absolute; top: 60px; right: 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);
@@ -125,7 +126,7 @@
/* ===== Side-Panel (rechts unter Year-Bar) — toggelt zwischen Picker und Report ===== */
.farmer-side {
position: absolute; right: 8px; top: 76px; z-index: 1000;
position: absolute; right: 8px; top: 112px; z-index: 1000;
max-height: calc(100dvh - 92px - env(safe-area-inset-bottom));
overflow-y: auto;
width: 240px;
@@ -487,9 +488,9 @@
</head>
<body>
<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-topbar ggs-header" data-ggs-sim="farmer" data-ggs-no-glossar data-ggs-home="/schueler" data-ggs-music="default">
<h1 class="ggs-header-module">Landwirtschaft</h1>
<span class="ggs-header-badge">Jahr&nbsp;<span id="year-num">1</span></span>
<div class="ggs-header-spacer"></div>
<div class="ggs-header-actions">
<a href="/schueler" title="Zurück zur Schülerseite">🏠</a>
@@ -500,8 +501,6 @@
</div>
<div class="farmer-year-bar">
<span class="farmer-year-label">Jahr</span>
<span class="farmer-year-num" id="year-num">1</span>
<span class="farmer-market" id="market-display" title="Markt-Auftrag dieses Jahres — alle Lieferungen gehen hierher">
<span class="farmer-market-label">Markt</span>
<span id="market-text"></span>