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-mit-tram.html
+95 -11
View File
@@ -1,13 +1,19 @@
<!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>
(function() {
const saved = localStorage.getItem('jga-theme');
document.documentElement.setAttribute('data-theme', saved || '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 mit Tram & Metro</title>
@@ -15,11 +21,58 @@
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;
--header-border: #444;
--lines-bg: rgba(30,30,30,0.95);
--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;
--header-border: #d0d0d5;
--lines-bg: rgba(255,255,255,0.95);
--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; }
#map { height: calc(100vh - 80px); width: 100%; }
/* 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);
}
/* Hotel-Marker: größer + Gold-Rahmen + pulsierender Glow + permanentes Label */
.hotel-marker {
position: relative;
@@ -71,7 +124,7 @@
.layer-toggle { margin-top: 8px; padding-top: 6px; border-top: 1px solid #555; font-size: 12px; }
.layer-toggle label { display: flex; align-items: center; gap: 6px; margin: 3px 0; cursor: pointer; user-select: none; color: #eee; }
.layer-toggle input { cursor: pointer; }
.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 { 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; }
.legend .item { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.legend .emoji { font-size: 18px; }
@@ -96,16 +149,17 @@
.tram-popup .popup-content .meta { color: #ccc !important; }
.lines-toggle {
background: rgba(30,30,30,0.95);
background: var(--lines-bg);
padding: 10px 12px;
border-radius: 8px;
color: #eee;
color: var(--text);
font-size: 13px;
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
border: 1px solid #444;
border: 1px solid var(--card-border);
max-width: 220px;
max-height: 60vh;
overflow-y: auto;
backdrop-filter: blur(8px);
}
.lines-toggle h4 { margin: 0 0 8px 0; font-size: 14px; }
.lines-toggle label {
@@ -285,6 +339,7 @@
<h1>🥳 JGA Prag – Tourenplan mit ÖPNV</h1>
<div class="sub">25.–26. Juli 2026 · 8 Personen · Hotel Uno Prague als Basis · Daten: offizieller PID GTFS-Feed · Metro + Tram sauber verknüpft</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"
@@ -464,12 +519,23 @@ const LINES = {
const map = L.map('map').setView([50.0718, 14.4999], 11);
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
// Tile-Layer je nach Theme wählen
const initialTileUrl = (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(initialTileUrl, {
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);
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);
}
function createIcon(emoji, color, isHotel=false) {
const size = isHotel ? 56 : 38;
const wrapperClass = isHotel ? 'custom-marker hotel-marker' : 'custom-marker';
@@ -1011,7 +1077,25 @@ document.addEventListener('keydown', (e) => {
</div>
</div>
</div>
</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) {