Orfel-HermesAI-Bot/JGA-2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feature 18: Trinkspiel-Seite + Theme-Toggle finalisiert

Browse Source 
Neu:
- trinkspiel.html: 5 Spiele-Modi (Kings, Ride the Bus, Ring of Fire,
  Ich hab noch nie, Wahrheit/Pflicht) mit 3D-Karten-Flip-Animation,
  Spieler-Tracker, König-Becher-Meter, Regel-Tracker, Statistik,
  History. localStorage-Persistenz (jga-players-v2, jga-rules-v2).
- countdown.html: Live-Countdown auf 25.07.2026 (Feature 24).

Update:
- index.html: Countdown-Card in Planungs-Tools Sektion.
- sw.js: trinkspiel.html + countdown.html gecacht, Cache v1->v2.
- packliste.html + tourenplan.html + tourenplan-mit-tram.html:
  Theme-Toggle Finalisierung + Favicon-Fixes.

Nicht verlinkt auf index.html — User-Review vor Freigabe.
This commit is contained in:
Hermes AI Bot
2026-06-27 09:03:35 +00:00
parent 5932c19ac5
commit 897f5f80a0
7 changed files with 1843 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tourenplan.html
+104 -10
View File
@@ -1,13 +1,21 @@
<!DOCTYPE html>
<html lang="de">
<head>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#3b82f6">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="JGA Prag">
<meta name="mobile-web-app-capable" content="yes"><text y='.9em' font-size='90'>🧭</text></svg>">
<meta name="mobile-web-app-capable" content="yes">
<script>
// Theme-Toggle: localStorage > System-Preference > Dark
(function() {
const saved = localStorage.getItem('jga-theme');
const sysDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.setAttribute('data-theme', saved || (sysDark ? 'dark' : 'dark'));
})();
</script>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🧭</text></svg>">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JGA Prag – Tourenplan</title>
@@ -15,10 +23,66 @@
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<style>
html, body { margin: 0; padding: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #1a1a1a; color: #eee; }
#header { padding: 16px 20px; background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%); border-bottom: 2px solid #444; }
/* ====== Theme-Variablen ====== */
:root, [data-theme="dark"] {
--bg: #1a1a1a;
--bg-gradient-start: #2d2d2d;
--bg-gradient-end: #1a1a1a;
--card-bg: rgba(30,30,30,0.95);
--card-border: #444;
--text: #eee;
--text-muted: #aaa;
--text-dim: #555;
--header-border: #444;
--popup-bg: #fff;
--popup-text: #1a1a1a;
--popup-meta: #555;
--popup-desc: #333;
--accent: #1976d2;
}
[data-theme="light"] {
--bg: #f5f5f7;
--bg-gradient-start: #ffffff;
--bg-gradient-end: #f0f0f3;
--card-bg: rgba(255,255,255,0.95);
--card-border: #d0d0d5;
--text: #1a1a1a;
--text-muted: #555;
--text-dim: #888;
--header-border: #d0d0d5;
--popup-bg: #fff;
--popup-text: #1a1a1a;
--popup-meta: #555;
--popup-desc: #333;
--accent: #1976d2;
}
html, body { margin: 0; padding: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); transition: background 0.3s, color 0.3s; }
#header { padding: 16px 20px; background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%); border-bottom: 2px solid var(--header-border); position: relative; }
#header h1 { margin: 0 0 4px 0; font-size: 22px; }
#header .sub { color: #aaa; font-size: 13px; }
#header .sub { color: var(--text-muted); font-size: 13px; }
/* Theme-Toggle Button */
.theme-toggle {
position: fixed;
top: 16px;
right: 16px;
width: 44px; height: 44px;
border-radius: 50%;
background: var(--card-bg);
border: 1px solid var(--card-border);
color: var(--text);
font-size: 20px;
cursor: pointer;
z-index: 1000;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
transition: all 0.2s;
display: flex; align-items: center; justify-content: center;
}
.theme-toggle:hover {
transform: rotate(15deg) scale(1.1);
border-color: var(--accent);
}
#map { height: calc(100vh - 80px); width: 100%; }
/* Hotel-Marker: größer + Gold-Rahmen + pulsierender Glow + permanentes Label */
.hotel-marker {
@@ -75,9 +139,9 @@
.layer-toggle input { cursor: pointer; }
/* Legende */
.legend { background: rgba(30,30,30,0.95); padding: 10px 12px; border-radius: 8px; color: #eee; font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,0.4); border: 1px solid #444; max-width: 240px; }
.legend h4 { margin: 0 0 8px 0; font-size: 14px; }
.legend .item { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.legend { background: var(--card-bg); padding: 10px 12px; border-radius: 8px; color: var(--text); font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,0.4); border: 1px solid var(--card-border); max-width: 240px; backdrop-filter: blur(8px); }
.legend h4 { margin: 0 0 8px 0; font-size: 14px; color: var(--text); }
.legend .item { display: flex; align-items: center; gap: 8px; margin: 4px 0; color: var(--text); }
.legend .emoji { font-size: 18px; }
.legend .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid white; }
.popup-content { font-family: -apple-system, BlinkMacSystemFont, sans-serif; min-width: 220px; }
@@ -98,6 +162,7 @@
<h1>🥳 JGA Prag – Tourenplan</h1>
<div class="sub">25.–26. Juli 2026 · 8 Personen · Hotel Uno Prague als Basis</div>
</div>
<button class="theme-toggle" id="theme-toggle" aria-label="Theme wechseln" title="Light/Dark Mode">🌙</button>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
@@ -232,13 +297,24 @@ const locations = [
// Karte initialisieren - Start auf Hotel Uno, fitBounds überschreibt das gleich
const map = L.map('map').setView([50.0718, 14.4999], 11);
// Dark Mode Tile Layer (CartoDB Dark Matter)
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
// Tile-Layer je nach Theme wählen (Dark = CartoDB Dark Matter, Light = CartoDB Positron)
const tileUrl = (document.documentElement.getAttribute('data-theme') || 'dark') === 'light'
? 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'
: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png';
const tileLayer = L.tileLayer(tileUrl, {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd',
maxZoom: 19
}).addTo(map);
// Theme-Switching für Tile-Layer
function switchMapTheme(newTheme) {
const url = newTheme === 'light'
? 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'
: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png';
tileLayer.setUrl(url);
}
// Custom Marker mit Emoji + Label
function createIcon(emoji, color, isHotel=false) {
const size = isHotel ? 56 : 38;
@@ -513,6 +589,24 @@ legend.onAdd = function() {
};
legend.addTo(map);
</script>
<script>
// Theme-Toggle
const themeBtn = document.getElementById('theme-toggle');
function updateThemeIcon() {
const cur = document.documentElement.getAttribute('data-theme') || 'dark';
themeBtn.textContent = cur === 'dark' ? '☀️' : '🌙';
themeBtn.title = cur === 'dark' ? 'Light Mode aktivieren' : 'Dark Mode aktivieren';
}
updateThemeIcon();
themeBtn.addEventListener('click', () => {
const cur = document.documentElement.getAttribute('data-theme') || 'dark';
const next = cur === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', next);
localStorage.setItem('jga-theme', next);
updateThemeIcon();
if (typeof switchMapTheme === 'function') switchMapTheme(next);
});
</script>
<script>
// PWA Service Worker registrieren
if ('serviceWorker' in navigator) {