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

Home-Button oben links auf allen Seiten + ÖPNV-Control einklappbar + Mobile-Anpassungen

Browse Source 
User-Requests:
1. Legendenmenü auf Mobile war außerhalb des Displays -> jetzt
   eingeklappt (nur Header) auf beiden Map-Files. Body scrollbar
   bei Bedarf.
2. ÖPNV-Control soll auch klappbar sein -> gleiche Einklapp-Logik
   wie Legende auf tourenplan-mit-tram.html.
3. Home-Button oben links auf jeder Seite -> alle 9 HTML-Files
   (index ausgenommen weil es die Startseite ist) haben jetzt einen
   🏠 Startseite Button fixed-position oben links.

Mobile-Optimierungen (max-width: 768px):
- Home-Button + Theme-Toggle kleiner (10px margin statt 16px,
  padding 8x12 statt 10x16)
- Leaflet-Controls kleinere Margins
- Legende + ÖPNV-Control max-width 180px (von 220px)
- topleft-Control margin-top 56px damit es unter dem Home-Button
  sitzt statt ihn zu überdecken

Auch im jga_wetter_update.py (für Cron-generierte wetter.html):
- CSS-Variablen statt hardcoded Farben
- home-btn CSS + Mobile-Override
- Home-Button HTML-Injection in get_body()
This commit is contained in:
Hermes AI Bot
2026-06-27 09:56:04 +00:00
parent f26a9fc344
commit 3a9bdd55ed
7 changed files with 231 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
countdown.html
+29 -1
View File
@@ -170,7 +170,34 @@
.share-btn:hover { .share-btn:hover {
transform: translateY(-2px); transform: translateY(-2px);
} }
.theme-toggle { .home-btn {
position: fixed;
top: 16px; left: 16px;
z-index: 1000;
background: var(--card-bg);
border: 1px solid var(--card-border);
color: var(--text);
text-decoration: none;
padding: 10px 16px;
border-radius: 22px;
font-size: 14px;
font-weight: 600;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 6px;
}
@media (max-width: 768px) {
.home-btn { top: 10px; left: 10px; padding: 8px 12px; font-size: 13px; }
.theme-toggle { top: 10px; right: 10px; width: 38px; height: 38px; font-size: 18px; }
}
.home-btn:hover {
transform: translateX(-2px);
border-color: var(--accent);
color: var(--accent);
}
.theme-toggle {
position: fixed; position: fixed;
top: 16px; top: 16px;
right: 16px; right: 16px;
@@ -205,6 +232,7 @@
</style> </style>
</head> </head>
<body> <body>
<a href="index.html" class="home-btn" title="Zurück zur Startseite">🏠 Startseite</a>
<button class="theme-toggle" id="theme-toggle" aria-label="Theme wechseln" title="Light/Dark Mode">🌙</button> <button class="theme-toggle" id="theme-toggle" aria-label="Theme wechseln" title="Light/Dark Mode">🌙</button>
<div class="container"> <div class="container">
memory.html
+29 -1
View File
@@ -65,7 +65,34 @@
.back-link { display: inline-block; margin-bottom: 16px; color: var(--accent-text); text-decoration: none; font-size: 14px; } .back-link { display: inline-block; margin-bottom: 16px; color: var(--accent-text); text-decoration: none; font-size: 14px; }
.back-link:hover { text-decoration: underline; } .back-link:hover { text-decoration: underline; }
.theme-toggle { .home-btn {
position: fixed;
top: 16px; left: 16px;
z-index: 1000;
background: var(--card-bg);
border: 1px solid var(--card-border);
color: var(--text);
text-decoration: none;
padding: 10px 16px;
border-radius: 22px;
font-size: 14px;
font-weight: 600;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 6px;
}
@media (max-width: 768px) {
.home-btn { top: 10px; left: 10px; padding: 8px 12px; font-size: 13px; }
.theme-toggle { top: 10px; right: 10px; width: 38px; height: 38px; font-size: 18px; }
}
.home-btn:hover {
transform: translateX(-2px);
border-color: var(--accent);
color: var(--accent);
}
.theme-toggle {
position: fixed; position: fixed;
top: 16px; right: 16px; top: 16px; right: 16px;
width: 44px; height: 44px; width: 44px; height: 44px;
@@ -509,6 +536,7 @@
</head> </head>
<body> <body>
<a href="index.html" class="home-btn" title="Zurück zur Startseite">🏠 Startseite</a>
<button class="theme-toggle" id="themeToggle" aria-label="Theme wechseln">🌙</button> <button class="theme-toggle" id="themeToggle" aria-label="Theme wechseln">🌙</button>
<div class="container"> <div class="container">
packliste.html
+29 -1
View File
@@ -69,7 +69,34 @@
.back-link:hover { text-decoration: underline; } .back-link:hover { text-decoration: underline; }
/* Theme-Toggle Button */ /* Theme-Toggle Button */
.theme-toggle { .home-btn {
position: fixed;
top: 16px; left: 16px;
z-index: 1000;
background: var(--card-bg);
border: 1px solid var(--card-border);
color: var(--text);
text-decoration: none;
padding: 10px 16px;
border-radius: 22px;
font-size: 14px;
font-weight: 600;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 6px;
}
@media (max-width: 768px) {
.home-btn { top: 10px; left: 10px; padding: 8px 12px; font-size: 13px; }
.theme-toggle { top: 10px; right: 10px; width: 38px; height: 38px; font-size: 18px; }
}
.home-btn:hover {
transform: translateX(-2px);
border-color: var(--accent);
color: var(--accent);
}
.theme-toggle {
position: fixed; position: fixed;
top: 16px; top: 16px;
right: 16px; right: 16px;
@@ -189,6 +216,7 @@
</style> </style>
</head> </head>
<body> <body>
<a href="index.html" class="home-btn" title="Zurück zur Startseite">🏠 Startseite</a>
<button class="theme-toggle" id="theme-toggle" aria-label="Theme wechseln" title="Light/Dark Mode">🌙</button> <button class="theme-toggle" id="theme-toggle" aria-label="Theme wechseln" title="Light/Dark Mode">🌙</button>
<div class="container"> <div class="container">
strafen.html
+29 -1
View File
@@ -63,7 +63,34 @@
.back-link { display: inline-block; margin-bottom: 16px; color: var(--accent-text); text-decoration: none; font-size: 14px; } .back-link { display: inline-block; margin-bottom: 16px; color: var(--accent-text); text-decoration: none; font-size: 14px; }
.back-link:hover { text-decoration: underline; } .back-link:hover { text-decoration: underline; }
.theme-toggle { .home-btn {
position: fixed;
top: 16px; left: 16px;
z-index: 1000;
background: var(--card-bg);
border: 1px solid var(--card-border);
color: var(--text);
text-decoration: none;
padding: 10px 16px;
border-radius: 22px;
font-size: 14px;
font-weight: 600;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 6px;
}
@media (max-width: 768px) {
.home-btn { top: 10px; left: 10px; padding: 8px 12px; font-size: 13px; }
.theme-toggle { top: 10px; right: 10px; width: 38px; height: 38px; font-size: 18px; }
}
.home-btn:hover {
transform: translateX(-2px);
border-color: var(--accent);
color: var(--accent);
}
.theme-toggle {
position: fixed; position: fixed;
top: 16px; right: 16px; top: 16px; right: 16px;
width: 44px; height: 44px; width: 44px; height: 44px;
@@ -373,6 +400,7 @@
</head> </head>
<body> <body>
<a href="index.html" class="home-btn" title="Zurück zur Startseite">🏠 Startseite</a>
<button class="theme-toggle" id="themeToggle" aria-label="Theme wechseln">🌙</button> <button class="theme-toggle" id="themeToggle" aria-label="Theme wechseln">🌙</button>
<div class="container"> <div class="container">
tourenplan-mit-tram.html
+51 -4
View File
@@ -73,6 +73,41 @@
transform: rotate(15deg) scale(1.1); transform: rotate(15deg) scale(1.1);
border-color: var(--accent); border-color: var(--accent);
} }
/* Home-Button (oben links) */
.home-btn {
position: fixed;
top: 16px;
left: 16px;
z-index: 1000;
background: var(--card-bg);
border: 1px solid var(--card-border);
color: var(--text);
text-decoration: none;
padding: 10px 16px;
border-radius: 22px;
font-size: 14px;
font-weight: 600;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 6px;
}
.home-btn:hover {
transform: translateX(-2px);
border-color: var(--accent);
color: var(--accent);
}
/* Mobile: kleinere Buttons, mehr Platz für Karte */
@media (max-width: 768px) {
.home-btn { top: 10px; left: 10px; padding: 8px 12px; font-size: 13px; }
.theme-toggle { top: 10px; right: 10px; width: 38px; height: 38px; font-size: 18px; }
/* Leaflet Controls am Rand kleiner / dichter */
.leaflet-control { margin: 8px !important; }
.leaflet-top.leaflet-left .leaflet-control { margin-top: 56px !important; }
.lines-toggle, .legend { max-width: 180px !important; font-size: 12px !important; }
.lines-toggle h4, .legend h4 { font-size: 12px !important; }
}
/* 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;
@@ -161,11 +196,20 @@
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 var(--card-border); border: 1px solid var(--card-border);
max-width: 220px; max-width: 220px;
max-height: 60vh;
overflow-y: auto;
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
} }
.lines-toggle h4 { margin: 0 0 8px 0; font-size: 14px; } .lines-toggle h4 {
margin: 0; font-size: 13px; cursor: pointer; user-select: none;
display: flex; align-items: center; gap: 6px;
}
.lines-toggle h4 .toggle {
margin-left: auto; font-size: 10px; opacity: 0.6; transition: transform 0.2s;
}
.lines-toggle.open h4 .toggle { transform: rotate(180deg); }
.lines-toggle .body {
display: none; margin-top: 8px; max-height: 50vh; overflow-y: auto;
}
.lines-toggle.open .body { display: block; }
.lines-toggle label { .lines-toggle label {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -343,6 +387,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>
<a href="index.html" class="home-btn" title="Zurück zur Startseite">🏠 Startseite</a>
<button class="theme-toggle" id="theme-toggle" aria-label="Theme wechseln" title="Light/Dark Mode">🌙</button> <button class="theme-toggle" id="theme-toggle" aria-label="Theme wechseln" title="Light/Dark Mode">🌙</button>
<div id="map"></div> <div id="map"></div>
@@ -840,7 +885,8 @@ IMPORTANT_STOPS.forEach(stop => {
const toggleControl = L.control({ position: 'topright' }); const toggleControl = L.control({ position: 'topright' });
toggleControl.onAdd = function() { toggleControl.onAdd = function() {
const div = L.DomUtil.create('div', 'lines-toggle'); const div = L.DomUtil.create('div', 'lines-toggle');
let html = '<h4>🚇 ÖPNV</h4>'; let html = '<h4 onclick="this.parentElement.classList.toggle(\'open\')">🚇 ÖPNV<span class="toggle">▼</span></h4>';
html += '<div class="body">';
// Metro: Checkboxen (mehrere gleichzeitig) // Metro: Checkboxen (mehrere gleichzeitig)
html += '<div class="group-header">Metro</div>'; html += '<div class="group-header">Metro</div>';
['metro_A','metro_B','metro_C'].forEach(key => { ['metro_A','metro_B','metro_C'].forEach(key => {
@@ -870,6 +916,7 @@ toggleControl.onAdd = function() {
${num} ${num}
</label>`; </label>`;
}); });
html += '</div>'; // Ende .body
div.innerHTML = html; div.innerHTML = html;
// Helper: Tram-Linie umschalten // Helper: Tram-Linie umschalten
tourenplan.html
+35
View File
@@ -83,6 +83,40 @@
transform: rotate(15deg) scale(1.1); transform: rotate(15deg) scale(1.1);
border-color: var(--accent); border-color: var(--accent);
} }
/* Home-Button (oben links) */
.home-btn {
position: fixed;
top: 16px;
left: 16px;
z-index: 1000;
background: var(--card-bg);
border: 1px solid var(--card-border);
color: var(--text);
text-decoration: none;
padding: 10px 16px;
border-radius: 22px;
font-size: 14px;
font-weight: 600;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 6px;
}
.home-btn:hover {
transform: translateX(-2px);
border-color: var(--accent);
color: var(--accent);
}
/* Mobile: kleinere Buttons, mehr Platz für Karte */
@media (max-width: 768px) {
.home-btn { top: 10px; left: 10px; padding: 8px 12px; font-size: 13px; }
.theme-toggle { top: 10px; right: 10px; width: 38px; height: 38px; font-size: 18px; }
.leaflet-control { margin: 8px !important; }
.leaflet-top.leaflet-left .leaflet-control { margin-top: 56px !important; }
.legend { max-width: 180px !important; font-size: 12px !important; }
.legend h4 { font-size: 12px !important; }
}
#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 {
@@ -166,6 +200,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>
<a href="index.html" class="home-btn" title="Zurück zur Startseite">🏠 Startseite</a>
<button class="theme-toggle" id="theme-toggle" aria-label="Theme wechseln" title="Light/Dark Mode">🌙</button> <button class="theme-toggle" id="theme-toggle" aria-label="Theme wechseln" title="Light/Dark Mode">🌙</button>
<div id="map"></div> <div id="map"></div>
trinkspiel.html
+29 -1
View File
@@ -82,7 +82,34 @@
.back-link:hover { text-decoration: underline; } .back-link:hover { text-decoration: underline; }
/* Theme-Toggle */ /* Theme-Toggle */
.theme-toggle { .home-btn {
position: fixed;
top: 16px; left: 16px;
z-index: 1000;
background: var(--card-bg);
border: 1px solid var(--card-border);
color: var(--text);
text-decoration: none;
padding: 10px 16px;
border-radius: 22px;
font-size: 14px;
font-weight: 600;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 6px;
}
@media (max-width: 768px) {
.home-btn { top: 10px; left: 10px; padding: 8px 12px; font-size: 13px; }
.theme-toggle { top: 10px; right: 10px; width: 38px; height: 38px; font-size: 18px; }
}
.home-btn:hover {
transform: translateX(-2px);
border-color: var(--accent);
color: var(--accent);
}
.theme-toggle {
position: fixed; position: fixed;
top: 16px; top: 16px;
right: 16px; right: 16px;
@@ -545,6 +572,7 @@
</head> </head>
<body> <body>
<a href="index.html" class="home-btn" title="Zurück zur Startseite">🏠 Startseite</a>
<button class="theme-toggle" id="themeToggle" aria-label="Theme wechseln">🌙</button> <button class="theme-toggle" id="themeToggle" aria-label="Theme wechseln">🌙</button>
<div class="container"> <div class="container">