Adminator/geograsim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Busfahrt: ggs-header eingebaut (Batch 2)

Browse Source 
ggs-topbar -> ggs-header (Vollbreite, klick-durchlaessig), Titel ohne
Emoji, Logo-Fallback, KPIs (Budget/Auftrag/Nacht) bleiben als Pillen,
eigener Musik-Player in #ggs-music gewrappt (Popup), Sim-Buttons
(Beschriftung/EN-Info) + Ton/Hilfe/Home + Plattform-Glossar. Keine
Elemente entfernt (alle IDs/onclicks erhalten).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Thomas
2026-08-25 15:54:57 +02:00
parent e901f5addb
commit 014eb418a6
1 changed files with 23 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App/sims/busfahrt/game.html
+21 -15
View File
@@ -8,6 +8,10 @@
<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>
<style>
:root {
--bf-green: #1f4b37;
@@ -33,13 +37,10 @@
/* ===== 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: var(--bf-shadow);
position: absolute; top: 8px; left: 8px; right: 8px; z-index: 1001;
display: flex; gap: 8px; align-items: center;
font-size: 13px; flex-wrap: wrap;
max-width: calc(100vw - 16px);
pointer-events: none; /* leere Bereiche zur Karte durchlassen */
}
.ggs-topbar a {
text-decoration: none;
@@ -607,21 +608,26 @@
<body>
<!-- Topbar -->
<div class="ggs-topbar">
<h1>🚌 Busfahrt</h1>
<a href="../../schueler.html" title="Zurück zur Schülerseite">🏠</a>
<div class="ggs-topbar ggs-header" data-ggs-sim="busfahrt" data-ggs-home="../../schueler.html">
<h1 class="ggs-header-module">Busfahrt</h1>
<span class="bf-budget" id="topbar-budget">💰 5.000 €</span>
<span class="bf-counter" id="topbar-counter">—</span>
<span class="bf-night-pill" id="topbar-night">🌙 Nachtfahrt</span>
<button class="bf-toggle" id="black-map-toggle" onclick="toggleBlackMap()" title="Beschriftung ein/aus" aria-label="Beschriftung umschalten">🏷️</button>
<button class="bf-toggle" id="btn-info" onclick="if(window.GGS_TUTORIAL&&typeof window.GGS_TUTORIAL.replay==='function')window.GGS_TUTORIAL.replay();" title="Anleitung nochmal zeigen" aria-label="Anleitung">ℹ</button>
<button class="bf-toggle" id="map-en-info" onclick="showMapEnglishInfo()" title="Warum ist die Karte auf Englisch?" aria-label="Karte auf Englisch — Erklärung">ℹ️ EN</button>
<button class="bf-toggle active" id="audio-toggle" onclick="toggleAudio()" title="Ton (SFX) ein/aus" aria-label="Ton umschalten">🔊</button>
<select id="song-select" onchange="onSongSelect(this.value)" style="background:#f7f6f3;border:1px solid rgba(0,0,0,.15);border-radius:6px;font-size:.8rem;padding:.2rem .35rem;font-family:inherit" title="Hintergrundmusik wählen">
<div class="ggs-header-spacer"></div>
<div class="ggs-header-actions">
<a href="../../schueler.html" title="Zurück zur Schülerseite">🏠</a>
<div class="ggs-music" id="ggs-music">
<select class="ggs-music-sel" id="song-select" onchange="onSongSelect(this.value)" title="Hintergrundmusik wählen">
<option value="__random__">🎲 Random</option>
</select>
<button class="bf-toggle" id="music-toggle" onclick="toggleMusicPlay()" title="Musik Pause/Wiedergabe" aria-label="Musik Pause">⏸</button>
<button class="bf-toggle" id="next-song" onclick="nextSong()" title="Nächster Song" aria-label="Nächster Song">⏭️</button>
<button class="ggs-music-btn" id="music-toggle" onclick="toggleMusicPlay()" title="Musik Pause/Wiedergabe" aria-label="Musik Pause">⏸</button>
<button class="ggs-music-btn" id="next-song" onclick="nextSong()" title="Nächster Song" aria-label="Nächster Song">⏭️</button>
</div>
<button class="bf-toggle active" id="audio-toggle" onclick="toggleAudio()" title="Ton (SFX) ein/aus" aria-label="Ton umschalten">🔊</button>
<button class="bf-toggle" id="btn-info" onclick="if(window.GGS_TUTORIAL&&typeof window.GGS_TUTORIAL.replay==='function')window.GGS_TUTORIAL.replay();" title="Anleitung nochmal zeigen" aria-label="Anleitung">ℹ</button>
<button class="bf-toggle" id="black-map-toggle" onclick="toggleBlackMap()" title="Beschriftung ein/aus" aria-label="Beschriftung umschalten">🏷️</button>
<button class="bf-toggle" id="map-en-info" onclick="showMapEnglishInfo()" title="Warum ist die Karte auf Englisch?" aria-label="Karte auf Englisch — Erklärung" style="width:auto;padding:0 10px">ℹ️ EN</button>
</div>
</div>
<!-- Stats-Panel (links) -->