Tourismusregion: eigene SVG-Icons (Log/Anim/Kamera) + Tempo ganz links

- Komponente: Tempo-Steuerung an erste Aktions-Position (ganz links),
  Rest ans Ende.
- Region: 🔔/🐢/🎯 durch eigene SVG-Icons ersetzt (logBadge erhalten).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-08-25 19:34:02 +02:00
parent 6009eabca1
commit 2e9ad6a83f
2 changed files with 8 additions and 5 deletions
+5 -2
View File
@@ -302,8 +302,11 @@
/* --- 7) Aktionen in Mockup-Reihenfolge sortieren ---------- */
if (actions) {
var order = [tempoWrap, musicWrap, soundBtn, resetBtn, helpBtn, q('.ggs-glossar')];
for (var o = 0; o < order.length; o++) if (order[o]) actions.appendChild(order[o]);
// Standard-Steuerung ans Ende (Musik · Ton · Neustart · Hilfe · Glossar)
var tail = [musicWrap, soundBtn, resetBtn, helpBtn, q('.ggs-glossar')];
for (var o = 0; o < tail.length; o++) if (tail[o]) actions.appendChild(tail[o]);
// Tempo IMMER ganz links (erste Position der Aktionen)
if (tempoWrap) actions.insertBefore(tempoWrap, actions.firstChild);
}
/* --- 8) Panels bei Außen-Klick schließen ------------------ */
+3 -3
View File
@@ -28,11 +28,11 @@
<button data-speed="3" class="icon-btn speed-btn ggs-speed-btn" title="Dreifach">3×</button>
<button data-speed="4" class="icon-btn speed-btn ggs-speed-btn" title="Vierfach">4×</button>
</div>
<button id="btnLog" class="icon-btn" title="Meldungen">🔔<span id="logBadge" class="badge hidden">0</span></button>
<button id="btnLog" class="icon-btn" title="Meldungen"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8.5a6 6 0 0 0-12 0c0 6-2.5 7.5-2.5 7.5h17S18 14.5 18 8.5z"/><path d="M13.7 19a2 2 0 0 1-3.4 0"/></svg><span id="logBadge" class="badge hidden">0</span></button>
<button id="btnSound" class="icon-btn" title="Sound an/aus">🔊</button>
<button id="btnMusic" class="icon-btn" title="Musik-Player">🎵</button>
<button id="btnAnim" class="icon-btn" title="Reduzierte Animationen">🐢</button>
<button id="btnCamera" class="icon-btn" title="Ansicht zurücksetzen">🎯</button>
<button id="btnAnim" class="icon-btn" title="Reduzierte Animationen"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 15a5.5 4 0 0 1 11 0"/><path d="M15.4 13.7c1.4-.5 3-.1 3.5 1.1"/><circle cx="19.2" cy="13" r=".5" fill="currentColor" stroke="none"/><path d="M6.5 15.2v2M9.7 15.6v2.2M12.7 15.6v2.2M15.3 15.2v2"/></svg></button>
<button id="btnCamera" class="icon-btn" title="Ansicht zurücksetzen"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="7.5"/><circle cx="12" cy="12" r="3"/><path d="M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3"/></svg></button>
<button id="btnHelp" class="icon-btn" title="Anleitung">?</button>
</div>
</header>