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
countdown.html
+383
View File
@@ -0,0 +1,383 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JGA Prag 2026 — Countdown</title>
<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>">
<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">
<script>
(function() {
var saved = localStorage.getItem('jga-theme');
document.documentElement.setAttribute('data-theme', saved || 'dark');
})();
</script>
<style>
:root, [data-theme="dark"] {
--bg: #1c1c1f; --card-bg: #26262a; --card-border: #353539;
--text: #e8e8ea; --text-strong: #fff; --text-muted: #999;
--accent: #3b82f6; --accent-text: #60a5fa;
--gradient-start: #1c1c1f; --gradient-end: #2a2a30;
}
[data-theme="light"] {
--bg: #f5f5f7; --card-bg: #ffffff; --card-border: #e0e0e3;
--text: #1a1a1a; --text-strong: #000; --text-muted: #666;
--accent: #2563eb; --accent-text: #2563eb;
--gradient-start: #ffffff; --gradient-end: #e0e7ff;
}
* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: var(--bg); color: var(--text);
min-height: 100vh;
transition: background 0.3s, color 0.3s;
display: flex; align-items: center; justify-content: center;
}
.container {
text-align: center;
max-width: 700px;
padding: 40px 24px;
width: 100%;
}
.emoji-big {
font-size: 100px;
line-height: 1;
margin-bottom: 16px;
animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
h1 {
font-size: 38px;
margin: 0 0 8px 0;
color: var(--text-strong);
font-weight: 700;
}
.subtitle {
color: var(--text-muted);
font-size: 18px;
margin: 0 0 40px 0;
}
.countdown-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 32px;
}
.countdown-cell {
background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
border: 1px solid var(--card-border);
border-radius: 16px;
padding: 24px 12px;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.countdown-num {
font-size: 64px;
font-weight: 800;
color: var(--accent-text);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.countdown-label {
font-size: 12px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1.5px;
margin-top: 8px;
font-weight: 600;
}
.countdown-message {
font-size: 22px;
color: var(--text);
margin: 24px 0;
line-height: 1.5;
}
.countdown-message.celebrating {
font-size: 32px;
color: var(--accent-text);
font-weight: 700;
}
.progress-bar {
background: var(--card-border);
height: 12px;
border-radius: 6px;
overflow: hidden;
margin: 32px 0 16px 0;
}
.progress-bar .fill {
height: 100%;
background: linear-gradient(90deg, var(--accent) 0%, #06b6d4 100%);
width: 0%;
transition: width 1s ease;
border-radius: 6px;
}
.progress-text {
font-size: 14px;
color: var(--text-muted);
margin-top: 8px;
}
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
margin-top: 32px;
}
.info-item {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-left: 3px solid var(--accent);
padding: 12px 16px;
border-radius: 8px;
text-align: left;
}
.info-item .label {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 4px;
}
.info-item .value {
font-size: 15px;
color: var(--text-strong);
font-weight: 600;
}
.share-btn {
display: inline-block;
padding: 12px 28px;
background: var(--accent);
color: #fff;
border: none;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
margin-top: 24px;
text-decoration: none;
transition: transform 0.2s, background 0.2s;
}
.share-btn:hover {
transform: translateY(-2px);
}
.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: 100;
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);
}
.back-link {
display: inline-block;
margin-bottom: 16px;
color: var(--accent-text);
text-decoration: none;
font-size: 14px;
}
.back-link:hover { text-decoration: underline; }
@media (max-width: 480px) {
.countdown-num { font-size: 40px; }
h1 { font-size: 28px; }
}
</style>
</head>
<body>
<button class="theme-toggle" id="theme-toggle" aria-label="Theme wechseln" title="Light/Dark Mode">🌙</button>
<div class="container">
<a href="index.html" class="back-link">← Zurück zur Übersicht</a>
<div class="emoji-big" id="emoji">🥳</div>
<h1 id="title">JGA Prag 2026</h1>
<p class="subtitle" id="subtitle">Countdown bis zum Junggesellenabschied</p>
<div class="countdown-grid">
<div class="countdown-cell">
<div class="countdown-num" id="days">--</div>
<div class="countdown-label">Tage</div>
</div>
<div class="countdown-cell">
<div class="countdown-num" id="hours">--</div>
<div class="countdown-label">Stunden</div>
</div>
<div class="countdown-cell">
<div class="countdown-num" id="minutes">--</div>
<div class="countdown-label">Minuten</div>
</div>
<div class="countdown-cell">
<div class="countdown-num" id="seconds">--</div>
<div class="countdown-label">Sekunden</div>
</div>
</div>
<div class="countdown-message" id="message">Noch so lange bis zur wildesten Party des Jahres!</div>
<div class="progress-bar"><div class="fill" id="progress-fill"></div></div>
<div class="progress-text" id="progress-text">Vorbereitung: 0%</div>
<div class="info-grid">
<div class="info-item">
<div class="label">📅 Datum</div>
<div class="value">25.–26. Juli 2026</div>
</div>
<div class="info-item">
<div class="label">👥 Gruppe</div>
<div class="value">8 Personen</div>
</div>
<div class="info-item">
<div class="label">🏨 Hotel</div>
<div class="value">Hotel Uno Prague</div>
</div>
<div class="info-item">
<div class="label">🎯 Aktivitäten</div>
<div class="value">11 Locations</div>
</div>
</div>
<button class="share-btn" id="share-btn">📤 Teilen</button>
</div>
<script>
// JGA-Daten: 25. Juli 2026, Start 12:00 Uhr Berlin (Annahme)
const JGA_START = new Date('2026-07-25T12:00:00+02:00').getTime();
// Planungsstart: heute minus 30 Tage = ca. 1. Juni 2026
const PLANNING_START = new Date('2026-06-01T00:00:00+02:00').getTime();
function update() {
const now = Date.now();
const diff = JGA_START - now;
if (diff <= 0) {
// JGA läuft oder vorbei
document.getElementById('days').textContent = '🎉';
document.getElementById('hours').textContent = '🎉';
document.getElementById('minutes').textContent = '🎉';
document.getElementById('seconds').textContent = '🎉';
document.getElementById('message').classList.add('celebrating');
const jgaEnd = new Date('2026-07-26T23:59:00+02:00').getTime();
if (now > jgaEnd) {
document.getElementById('message').innerHTML = '🥲 Der JGA ist vorbei — was für ein Wochenende!';
document.getElementById('emoji').textContent = '🥲';
document.getElementById('title').textContent = 'Erinnerungen';
} else {
document.getElementById('message').innerHTML = '🎉 Der JGA LÄUFT! Genießt jeden Moment! 🎉';
document.getElementById('emoji').textContent = '🥳';
document.getElementById('title').textContent = 'Es ist soweit!';
}
document.getElementById('progress-fill').style.width = '100%';
document.getElementById('progress-text').textContent = 'Planung abgeschlossen';
return;
}
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
document.getElementById('days').textContent = days;
document.getElementById('hours').textContent = String(hours).padStart(2, '0');
document.getElementById('minutes').textContent = String(minutes).padStart(2, '0');
document.getElementById('seconds').textContent = String(seconds).padStart(2, '0');
// Progress Bar
const total = JGA_START - PLANNING_START;
const elapsed = now - PLANNING_START;
const pct = Math.min(100, Math.max(0, (elapsed / total) * 100));
document.getElementById('progress-fill').style.width = pct.toFixed(1) + '%';
document.getElementById('progress-text').textContent = `Vorbereitung: ${pct.toFixed(1)}%`;
// Kontextabhängige Nachricht
let msg = 'Noch so lange bis zur wildesten Party des Jahres!';
let emoji = '🥳';
if (days === 0) {
msg = '🔥 Heute ist der Tag! Auf geht\'s nach Prag!';
emoji = '🔥';
} else if (days === 1) {
msg = '😱 MORGEN ist es soweit! Letzte Vorbereitungen!';
emoji = '😱';
} else if (days <= 7) {
msg = '⚡ Nur noch ' + days + ' Tage! Packlisten checken!';
emoji = '⚡';
} else if (days <= 30) {
msg = '📦 Bald geht\'s los! Restliche Buchungen klären.';
emoji = '📦';
} else if (days <= 90) {
msg = '🗓️ ' + days + ' Tage — genug Zeit für Feinschliff.';
emoji = '🗓️';
}
document.getElementById('message').textContent = msg;
document.getElementById('emoji').textContent = emoji;
}
update();
setInterval(update, 1000);
// Theme-Toggle
var themeBtn = document.getElementById('theme-toggle');
function syncThemeIcon() {
var t = document.documentElement.getAttribute('data-theme') || 'dark';
themeBtn.textContent = t === 'dark' ? '☀️' : '🌙';
themeBtn.title = t === 'dark' ? 'Light Mode aktivieren' : 'Dark Mode aktivieren';
}
syncThemeIcon();
themeBtn.addEventListener('click', function() {
var t = document.documentElement.getAttribute('data-theme') || 'dark';
var next = t === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', next);
try { localStorage.setItem('jga-theme', next); } catch (e) {}
syncThemeIcon();
});
// Share-Button
document.getElementById('share-btn').addEventListener('click', async function() {
var days = document.getElementById('days').textContent;
var shareText = '🥳 JGA Prag 2026 — noch ' + days + ' Tage! 25.–26. Juli 2026 · jga.orfel.de';
if (navigator.share) {
try {
await navigator.share({ title: 'JGA Prag 2026', text: shareText, url: window.location.href });
} catch (e) { /* user cancelled */ }
} else if (navigator.clipboard) {
try {
await navigator.clipboard.writeText(shareText);
this.textContent = '✅ Kopiert!';
setTimeout(() => { this.textContent = '📤 Teilen'; }, 2000);
} catch (e) { /* clipboard failed */ }
} else {
prompt('Zum Kopieren:', shareText);
}
});
// PWA SW
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('./sw.js')
.then(function(r){ console.log('[PWA] SW registered:', r.scope); })
.catch(function(e){ console.warn('[PWA] SW failed:', e); });
});
}
</script>
</body>
</html>
index.html
+10
View File
@@ -335,6 +335,16 @@
<a href="packliste.html" class="open-btn">Packliste öffnen →</a> <a href="packliste.html" class="open-btn">Packliste öffnen →</a>
</div> </div>
<div class="card">
<div class="card-icon">⏱️</div>
<h2>JGA-Countdown</h2>
<p class="description">
Großer Live-Countdown bis zum 25. Juli 2026 mit Tagen/Stunden/Minuten/Sekunden.
Vorbereitungsfortschritt + Teilen-Button für Social Media.
</p>
<a href="countdown.html" class="open-btn">Countdown öffnen →</a>
</div>
</div> </div>
<!-- Locations Übersicht --> <!-- Locations Übersicht -->
packliste.html
+89 -19
View File
@@ -4,43 +4,95 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JGA Prag Packliste</title> <title>JGA Prag Packliste</title>
<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"> <link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#3b82f6"> <meta name="theme-color" content="#3b82f6">
<meta name="apple-mobile-web-app-capable" content="yes"> <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-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="JGA Prag"> <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>">
<style> <style>
/* ====== Theme-Variablen ====== */
:root, [data-theme="dark"] {
--bg: #1c1c1f;
--card-bg: #26262a;
--card-border: #353539;
--text: #e8e8ea;
--text-muted: #999;
--text-strong: #fff;
--accent: #3b82f6;
--accent-text: #60a5fa;
--progress-bg: #2a2a2d;
}
[data-theme="light"] {
--bg: #f5f5f7;
--card-bg: #ffffff;
--card-border: #e0e0e3;
--text: #1a1a1a;
--text-muted: #666;
--text-strong: #000;
--accent: #2563eb;
--accent-text: #2563eb;
--progress-bg: #e0e0e3;
}
* { box-sizing: border-box; } * { box-sizing: border-box; }
html, body { html, body {
margin: 0; padding: 0; margin: 0; padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: #1c1c1f; background: var(--bg);
color: #e8e8ea; color: var(--text);
min-height: 100vh; min-height: 100vh;
transition: background 0.3s, color 0.3s;
} }
.container { max-width: 900px; margin: 0 auto; padding: 40px 24px; } .container { max-width: 900px; margin: 0 auto; padding: 40px 24px; }
h1 { h1 {
font-size: 38px; font-size: 38px;
margin: 0 0 8px 0; margin: 0 0 8px 0;
color: #fff; color: var(--text-strong);
font-weight: 700; font-weight: 700;
} }
.subtitle { color: #999; margin-bottom: 32px; font-size: 16px; } .subtitle { color: var(--text-muted); margin-bottom: 32px; font-size: 16px; }
.back-link { .back-link {
display: inline-block; display: inline-block;
margin-bottom: 24px; margin-bottom: 24px;
color: #60a5fa; color: var(--accent-text);
text-decoration: none; text-decoration: none;
font-size: 14px; font-size: 14px;
} }
.back-link:hover { text-decoration: underline; } .back-link:hover { text-decoration: underline; }
/* 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: 100;
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);
}
.category { .category {
background: #26262a; background: var(--card-bg);
border: 1px solid #353539; border: 1px solid var(--card-border);
border-radius: 12px; border-radius: 12px;
padding: 20px 24px; padding: 20px 24px;
margin-bottom: 16px; margin-bottom: 16px;
@@ -48,7 +100,7 @@
.category h2 { .category h2 {
margin: 0 0 16px 0; margin: 0 0 16px 0;
font-size: 20px; font-size: 20px;
color: #fff; color: var(--text-strong);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
@@ -62,18 +114,19 @@
.checklist { list-style: none; padding: 0; margin: 0; } .checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { .checklist li {
padding: 8px 0; padding: 8px 0;
border-bottom: 1px solid #2a2a2d; border-bottom: 1px solid var(--card-border);
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 10px; gap: 10px;
font-size: 15px; font-size: 15px;
color: var(--text);
} }
.checklist li:last-child { border-bottom: none; } .checklist li:last-child { border-bottom: none; }
.checklist input[type="checkbox"] { .checklist input[type="checkbox"] {
appearance: none; appearance: none;
width: 18px; width: 18px;
height: 18px; height: 18px;
border: 2px solid #3b82f6; border: 2px solid var(--accent);
border-radius: 4px; border-radius: 4px;
flex-shrink: 0; flex-shrink: 0;
margin-top: 2px; margin-top: 2px;
@@ -82,8 +135,8 @@
background: transparent; background: transparent;
} }
.checklist input[type="checkbox"]:checked { .checklist input[type="checkbox"]:checked {
background: #3b82f6; background: var(--accent);
border-color: #3b82f6; border-color: var(--accent);
} }
.checklist input[type="checkbox"]:checked::after { .checklist input[type="checkbox"]:checked::after {
content: "✓"; content: "✓";
@@ -96,17 +149,17 @@
} }
.checklist li.checked span { .checklist li.checked span {
text-decoration: line-through; text-decoration: line-through;
color: #666; color: var(--text-muted);
} }
.checklist li small { .checklist li small {
display: block; display: block;
color: #888; color: var(--text-muted);
font-size: 12px; font-size: 12px;
margin-top: 2px; margin-top: 2px;
} }
.progress-bar { .progress-bar {
background: #2a2a2d; background: var(--progress-bg);
height: 8px; height: 8px;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
@@ -114,13 +167,13 @@
} }
.progress-bar .fill { .progress-bar .fill {
height: 100%; height: 100%;
background: #3b82f6; background: var(--accent);
width: 0%; width: 0%;
transition: width 0.3s ease; transition: width 0.3s ease;
} }
.progress-text { .progress-text {
text-align: center; text-align: center;
color: #aaa; color: var(--text-muted);
font-size: 13px; font-size: 13px;
margin-bottom: 24px; margin-bottom: 24px;
} }
@@ -136,6 +189,7 @@
</style> </style>
</head> </head>
<body> <body>
<button class="theme-toggle" id="theme-toggle" aria-label="Theme wechseln" title="Light/Dark Mode">🌙</button>
<div class="container"> <div class="container">
<a href="index.html" class="back-link">← Zurück zur Übersicht</a> <a href="index.html" class="back-link">← Zurück zur Übersicht</a>
@@ -280,6 +334,22 @@
updateProgress(); updateProgress();
}); });
// 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();
});
updateProgress(); updateProgress();
</script> </script>
<script> <script>
sw.js
+3 -1
View File
@@ -1,6 +1,6 @@
// JGA Prag 2026 — Service Worker // JGA Prag 2026 — Service Worker
// Cache-Strategie: cache-first für HTML/Assets, network-first für externe APIs (OSRM) // Cache-Strategie: cache-first für HTML/Assets, network-first für externe APIs (OSRM)
const CACHE_VERSION = 'jga-2026-v1'; const CACHE_VERSION = 'jga-2026-v2';
const CORE_ASSETS = [ const CORE_ASSETS = [
'./', './',
'./index.html', './index.html',
@@ -8,6 +8,8 @@ const CORE_ASSETS = [
'./tourenplan-mit-tram.html', './tourenplan-mit-tram.html',
'./wetter.html', './wetter.html',
'./packliste.html', './packliste.html',
'./countdown.html',
'./trinkspiel.html',
'./manifest.json' './manifest.json'
]; ];
tourenplan-mit-tram.html
+95 -11
View File
@@ -1,13 +1,19 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <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"> <link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#3b82f6"> <meta name="theme-color" content="#3b82f6">
<meta name="apple-mobile-web-app-capable" content="yes"> <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-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="JGA Prag"> <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 charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JGA Prag – Tourenplan mit Tram & Metro</title> <title>JGA Prag – Tourenplan mit Tram & Metro</title>
@@ -15,11 +21,58 @@
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/> crossorigin=""/>
<style> <style>
html, body { margin: 0; padding: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #1a1a1a; color: #eee; } /* ====== Theme-Variablen ====== */
#header { padding: 16px 20px; background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%); border-bottom: 2px solid #444; } :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 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%; } #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: größer + Gold-Rahmen + pulsierender Glow + permanentes Label */
.hotel-marker { .hotel-marker {
position: relative; position: relative;
@@ -71,7 +124,7 @@
.layer-toggle { margin-top: 8px; padding-top: 6px; border-top: 1px solid #555; font-size: 12px; } .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 label { display: flex; align-items: center; gap: 6px; margin: 3px 0; cursor: pointer; user-select: none; color: #eee; }
.layer-toggle input { cursor: pointer; } .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 h4 { margin: 0 0 8px 0; font-size: 14px; }
.legend .item { display: flex; align-items: center; gap: 8px; margin: 4px 0; } .legend .item { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.legend .emoji { font-size: 18px; } .legend .emoji { font-size: 18px; }
@@ -96,16 +149,17 @@
.tram-popup .popup-content .meta { color: #ccc !important; } .tram-popup .popup-content .meta { color: #ccc !important; }
.lines-toggle { .lines-toggle {
background: rgba(30,30,30,0.95); background: var(--lines-bg);
padding: 10px 12px; padding: 10px 12px;
border-radius: 8px; border-radius: 8px;
color: #eee; color: var(--text);
font-size: 13px; font-size: 13px;
box-shadow: 0 2px 8px rgba(0,0,0,0.4); 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-width: 220px;
max-height: 60vh; max-height: 60vh;
overflow-y: auto; overflow-y: auto;
backdrop-filter: blur(8px);
} }
.lines-toggle h4 { margin: 0 0 8px 0; font-size: 14px; } .lines-toggle h4 { margin: 0 0 8px 0; font-size: 14px; }
.lines-toggle label { .lines-toggle label {
@@ -285,6 +339,7 @@
<h1>🥳 JGA Prag – Tourenplan mit ÖPNV</h1> <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 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> </div>
<button class="theme-toggle" id="theme-toggle" aria-label="Theme wechseln" title="Light/Dark Mode">🌙</button>
<div id="map"></div> <div id="map"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" <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); 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>', attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd', subdomains: 'abcd',
maxZoom: 19 maxZoom: 19
}).addTo(map); }).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) { function createIcon(emoji, color, isHotel=false) {
const size = isHotel ? 56 : 38; const size = isHotel ? 56 : 38;
const wrapperClass = isHotel ? 'custom-marker hotel-marker' : 'custom-marker'; const wrapperClass = isHotel ? 'custom-marker hotel-marker' : 'custom-marker';
@@ -1011,7 +1077,25 @@ document.addEventListener('keydown', (e) => {
</div> </div>
</div> </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> <script>
// PWA Service Worker registrieren // PWA Service Worker registrieren
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
tourenplan.html
+104 -10
View File
@@ -1,13 +1,21 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <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"> <link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#3b82f6"> <meta name="theme-color" content="#3b82f6">
<meta name="apple-mobile-web-app-capable" content="yes"> <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-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="JGA Prag"> <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 charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JGA Prag – Tourenplan</title> <title>JGA Prag – Tourenplan</title>
@@ -15,10 +23,66 @@
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/> crossorigin=""/>
<style> <style>
html, body { margin: 0; padding: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #1a1a1a; color: #eee; } /* ====== Theme-Variablen ====== */
#header { padding: 16px 20px; background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%); border-bottom: 2px solid #444; } :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 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%; } #map { height: calc(100vh - 80px); width: 100%; }
/* Hotel-Marker: größer + Gold-Rahmen + pulsierender Glow + permanentes Label */ /* Hotel-Marker: größer + Gold-Rahmen + pulsierender Glow + permanentes Label */
.hotel-marker { .hotel-marker {
@@ -75,9 +139,9 @@
.layer-toggle input { cursor: pointer; } .layer-toggle input { cursor: pointer; }
/* Legende */ /* 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 { 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 h4 { margin: 0 0 8px 0; font-size: 14px; color: var(--text); }
.legend .item { display: flex; align-items: center; gap: 8px; margin: 4px 0; } .legend .item { display: flex; align-items: center; gap: 8px; margin: 4px 0; color: var(--text); }
.legend .emoji { font-size: 18px; } .legend .emoji { font-size: 18px; }
.legend .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid white; } .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; } .popup-content { font-family: -apple-system, BlinkMacSystemFont, sans-serif; min-width: 220px; }
@@ -98,6 +162,7 @@
<h1>🥳 JGA Prag – Tourenplan</h1> <h1>🥳 JGA Prag – Tourenplan</h1>
<div class="sub">25.–26. Juli 2026 · 8 Personen · Hotel Uno Prague als Basis</div> <div class="sub">25.–26. Juli 2026 · 8 Personen · Hotel Uno Prague als Basis</div>
</div> </div>
<button class="theme-toggle" id="theme-toggle" aria-label="Theme wechseln" title="Light/Dark Mode">🌙</button>
<div id="map"></div> <div id="map"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" <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 // Karte initialisieren - Start auf Hotel Uno, fitBounds überschreibt das gleich
const map = L.map('map').setView([50.0718, 14.4999], 11); const map = L.map('map').setView([50.0718, 14.4999], 11);
// Dark Mode Tile Layer (CartoDB Dark Matter) // Tile-Layer je nach Theme wählen (Dark = CartoDB Dark Matter, Light = CartoDB Positron)
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', { 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>', attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd', subdomains: 'abcd',
maxZoom: 19 maxZoom: 19
}).addTo(map); }).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 // Custom Marker mit Emoji + Label
function createIcon(emoji, color, isHotel=false) { function createIcon(emoji, color, isHotel=false) {
const size = isHotel ? 56 : 38; const size = isHotel ? 56 : 38;
@@ -513,6 +589,24 @@ legend.onAdd = function() {
}; };
legend.addTo(map); legend.addTo(map);
</script> </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> <script>
// PWA Service Worker registrieren // PWA Service Worker registrieren
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
trinkspiel.html
+1159
View File
File diff suppressed because it is too large Load Diff