Serverlele30/VBB-Status-Web-App
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Serverlele30 authored and GitHub committed 2026-02-10 11:00:40 +01:00
1 parent fa43894ea8
commit 004dcef07b
5 files changed
+13 -577
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
-17
View File
@@ -68,10 +68,6 @@
<span class="nav-icon">🌍</span>
<span class="nav-label">Live-Map</span>
</button>
<button class="nav-item" data-view="updates">
<span class="nav-icon">📋</span>
<span class="nav-label">Updates</span>
</button>
</div>
</div>
<div class="nav-overlay" id="navOverlay"></div>
@@ -365,19 +361,6 @@
</div>
</div>
<!-- View: Updates -->
<div class="view-container" id="view-updates">
<div class="container">
<div class="updates-header">
<h2>📋 Updates & Changelog</h2>
<p class="updates-subtitle">Versionshistorie und neue Features</p>
</div>
<div id="changelogContent" class="changelog-container">
<div class="loading-detail">⏳ Lade Changelog...</div>
</div>
</div>
</div>
<!-- Detail Modal -->
<div class="detail-modal" id="detailModal">
<div class="detail-header">
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "vbb-netz-status",
"version": "30.0.0",
"version": "29.0.0",
"description": "Live-Nahverkehr für Berlin & Brandenburg - Progressive Web App (PWA) für Echtzeit-Abfahrten, Routenplanung und Live-Fahrzeugverfolgung im VBB-Gebiet",
"main": "server.js",
"scripts": {
script.js
-169
View File
@@ -1990,172 +1990,3 @@
}
});
// ==========================================
// UPDATES VIEW - CHANGELOG LOADER
// ==========================================
async function loadChangelog() {
const container = document.getElementById('changelogContent');
try {
const response = await fetch('CHANGELOG.md');
if (!response.ok) throw new Error('CHANGELOG nicht gefunden');
const markdown = await response.text();
const html = parseChangelog(markdown);
container.innerHTML = html;
// Accordion-Funktionalität
document.querySelectorAll('.version-header').forEach(header => {
header.addEventListener('click', () => {
const versionBox = header.parentElement;
versionBox.classList.toggle('open');
// Vibration Feedback
if (navigator.vibrate) navigator.vibrate(5);
});
});
} catch (error) {
console.error('Changelog Fehler:', error);
container.innerHTML = `
<div style="text-align: center; padding: 40px 20px; color: #ff5555;">
<p style="font-size: 18px; margin-bottom: 10px;">⚠️ Changelog konnte nicht geladen werden</p>
<p style="font-size: 14px; opacity: 0.7;">${error.message}</p>
</div>
`;
}
}
function parseChangelog(markdown) {
const lines = markdown.split('\n');
let html = '';
let currentVersion = null;
let currentCategory = null;
let changes = {};
// Parse Markdown
for (let i = 0; i < lines.length; i++) {
const line = lines[i].trim();
// Version Header: ## [30.0.0] - 2026-02-10
if (line.match(/^## \[(\d+\.\d+\.\d+)\] - (.+)$/)) {
// Speichere vorherige Version
if (currentVersion) {
html += renderVersion(currentVersion, changes);
changes = {};
}
const match = line.match(/^## \[(\d+\.\d+\.\d+)\] - (.+)$/);
currentVersion = {
number: match[1],
date: match[2]
};
}
// Kategorie: ### Added
else if (line.match(/^### (.+)$/)) {
const match = line.match(/^### (.+)$/);
currentCategory = match[1];
if (!changes[currentCategory]) {
changes[currentCategory] = [];
}
}
// Change Item: - Feature xyz
else if (line.match(/^[-*] (.+)$/) && currentCategory) {
const match = line.match(/^[-*] (.+)$/);
changes[currentCategory].push(match[1]);
}
}
// Speichere letzte Version
if (currentVersion) {
html += renderVersion(currentVersion, changes);
}
// GitHub Link Button
html += `
<a href="https://github.com/Serverlele30/VBB-Status-Web-App"
target="_blank"
class="github-link-btn">
💻 Alle Updates & Code auf GitHub
</a>
`;
return html;
}
function renderVersion(version, changes) {
const categoryIcons = {
'Added': '✨',
'Changed': '🔄',
'Fixed': '🐛',
'Removed': '🗑️',
'Deprecated': '⚠️',
'Security': '🔒'
};
let categoriesHtml = '';
for (const [category, items] of Object.entries(changes)) {
if (items.length === 0) continue;
const icon = categoryIcons[category] || '📝';
const itemsHtml = items.map(item => `<li class="change-item">${item}</li>`).join('');
categoriesHtml += `
<div class="change-category">
<div class="change-category-title">${icon} ${category}</div>
<ul class="change-list">
${itemsHtml}
</ul>
</div>
`;
}
return `
<div class="version-box">
<div class="version-header">
<div class="version-title">
<span class="version-number">v${version.number}</span>
<span class="version-date">${version.date}</span>
</div>
<span class="version-toggle">▼</span>
</div>
<div class="version-content">
<div class="version-content-inner">
${categoriesHtml}
</div>
</div>
</div>
`;
}
// Changelog laden wenn Updates-View geöffnet wird
document.addEventListener('DOMContentLoaded', () => {
// Wenn direkt Updates-View aktiv ist
if (document.getElementById('view-updates')?.classList.contains('active')) {
loadChangelog();
}
// Beim View-Wechsel
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.target.id === 'view-updates' &&
mutation.target.classList.contains('active')) {
// Nur laden wenn noch nicht geladen
const content = document.getElementById('changelogContent');
if (content.innerHTML.includes('Lade Changelog')) {
loadChangelog();
}
}
});
});
const updatesView = document.getElementById('view-updates');
if (updatesView) {
observer.observe(updatesView, { attributes: true, attributeFilter: ['class'] });
}
});
service-worker.js
+1 -4
View File
@@ -1,11 +1,8 @@
const CACHE_NAME = 'vbb-status-v30';
const CACHE_NAME = 'vbb-status-v29';
const urlsToCache = [
'/',
'/index.html',
'/styles.css',
'/script.js',
'/manifest.json',
'/CHANGELOG.md',
'/DotMatrix.ttf',
'/images/favicon.png'
];
styles.css
+11 -386
View File
@@ -1018,7 +1018,7 @@
@media (min-width: 768px) {
.container {
max-width: 900px;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
@@ -1026,7 +1026,7 @@
.detail-modal {
left: 50%;
transform: translateX(-50%);
max-width: 900px;
max-width: 600px;
}
}
@@ -1070,7 +1070,7 @@
/* Tablet & Desktop */
@media (min-width: 768px) {
.container {
max-width: 900px;
max-width: 1200px;
margin: 0 auto;
padding: 20px 30px;
}
@@ -1123,28 +1123,28 @@
}
.nav-menu {
width: 320px;
width: 280px;
}
/* Header größer auf Desktop */
.header h1 {
font-size: 38px;
font-size: 36px;
letter-spacing: 3px;
}
.header .subtitle {
font-size: 15px;
font-size: 14px;
}
.header .author {
font-size: 12px;
font-size: 11px;
}
/* Controls größer */
.controls {
padding: 22px;
background-color: rgba(10, 10, 10, 0.6);
border-radius: 10px;
padding: 20px;
background-color: rgba(10, 10, 10, 0.5);
border-radius: 8px;
}
.search-input {
@@ -1355,7 +1355,6 @@
/* Large Desktop - 2 Column Layout */
@media (min-width: 1200px) {
.container {
max-width: 1100px;
padding: 30px 40px;
}
@@ -1376,12 +1375,7 @@
}
.journey-leg {
padding: 18px;
}
/* Detail Modal größer */
.detail-modal {
max-width: 1100px;
padding: 16px;
}
}
@@ -1399,11 +1393,6 @@
.station-info {
grid-column: 1 / -1;
}
/* Detail Modal noch größer */
.detail-modal {
max-width: 1300px;
}
}
/* Mobile Optimierungen */
@@ -2323,367 +2312,3 @@
padding: 7px 14px;
}
}
/* Desktop-Optimierungen für Live-Map */
@media (min-width: 768px) {
.livemap-controls {
top: 20px;
left: 20px;
right: auto;
max-width: 400px;
gap: 12px;
}
.livemap-info {
padding: 14px 20px;
font-size: 18px;
border-radius: 10px;
}
.filter-btn {
padding: 10px 16px;
font-size: 15px;
border-radius: 8px;
}
.filter-btn:hover {
background-color: rgba(255, 237, 0, 0.2);
border-color: #FFED00;
}
.filter-btn.active:hover {
background-color: #FFED00;
}
.vehicle-popup .popup-line {
font-size: 18px;
}
.vehicle-popup .popup-direction {
font-size: 16px;
}
.vehicle-popup .popup-delay {
font-size: 14px;
}
}
/* Large Desktop Live-Map */
@media (min-width: 1200px) {
.livemap-controls {
max-width: 450px;
}
.livemap-info {
padding: 16px 24px;
font-size: 20px;
}
.filter-btn {
padding: 12px 18px;
font-size: 16px;
}
}
/* Desktop-Optimierungen für Home View */
@media (min-width: 768px) {
.home-container {
max-width: 900px;
padding: 20px;
}
.home-hero-combined {
padding: 30px;
margin: 30px 0;
border-radius: 14px;
}
.home-hint-text {
font-size: 16px;
}
.home-nav-buttons {
gap: 15px;
}
.home-nav-btn {
padding: 20px;
min-height: 80px;
}
.home-nav-btn .nav-icon {
font-size: 32px;
}
.home-nav-btn .nav-label {
font-size: 18px;
}
.home-nav-btn:hover {
background-color: rgba(255, 237, 0, 0.05);
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(255, 237, 0, 0.2);
}
}
@media (min-width: 1200px) {
.home-container {
max-width: 1100px;
}
.home-hero-combined {
padding: 40px;
}
.home-nav-buttons {
grid-template-columns: repeat(3, 1fr);
}
}
/* ==========================================
DESKTOP LAYOUT ZUSAMMENFASSUNG
==========================================
Mobile (bis 767px):
- Original Mobile-Styles bleiben unverändert
- Optimiert für Touch-Bedienung
Tablet/Desktop (768px - 1199px):
- Container: 900px
- Single Column Layout
- Detail-Modal: 900px
- Größere Schrift und Abstände
Large Desktop (1200px - 1599px):
- Container: 1100px
- 2 Spalten für Abfahrten
- Detail-Modal: 1100px
Extra Large Desktop (1600px+):
- Container: 1400px
- 3 Spalten für Abfahrten
- Detail-Modal: 1300px
========================================== */
/* ==========================================
UPDATES VIEW STYLING
========================================== */
.updates-header {
text-align: center;
padding: 30px 20px 20px;
border-bottom: 2px solid #FFED00;
margin-bottom: 20px;
}
.updates-header h2 {
font-size: 28px;
margin-bottom: 8px;
color: #FFED00;
}
.updates-subtitle {
font-size: 14px;
opacity: 0.7;
color: #fff;
}
.changelog-container {
padding: 10px;
}
/* Version Box - wie im Screenshot */
.version-box {
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
border: 2px solid #FFED00;
border-radius: 10px;
margin-bottom: 20px;
overflow: hidden;
}
.version-header {
background-color: #000;
border-bottom: 2px solid #FFED00;
padding: 15px 20px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.2s;
}
.version-header:hover {
background-color: #0a0a0a;
}
.version-header:active {
background-color: #1a1a1a;
}
.version-title {
display: flex;
align-items: center;
gap: 12px;
}
.version-number {
background-color: #FFED00;
color: #000;
padding: 4px 12px;
border-radius: 6px;
font-size: 16px;
font-weight: bold;
}
.version-date {
color: #fff;
opacity: 0.7;
font-size: 13px;
}
.version-toggle {
font-size: 20px;
color: #FFED00;
transition: transform 0.3s;
}
.version-box.open .version-toggle {
transform: rotate(180deg);
}
.version-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.version-box.open .version-content {
max-height: 2000px;
}
.version-content-inner {
padding: 20px;
}
/* Change Categories */
.change-category {
margin-bottom: 20px;
}
.change-category-title {
color: #FFED00;
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.change-list {
list-style: none;
padding: 0;
}
.change-item {
padding: 8px 0 8px 25px;
position: relative;
color: #fff;
font-size: 14px;
line-height: 1.5;
}
.change-item:before {
content: "•";
position: absolute;
left: 10px;
color: #FFED00;
font-size: 18px;
}
/* GitHub Button - wie im Screenshot */
.github-link-btn {
display: block;
width: 100%;
padding: 15px;
margin-top: 20px;
background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
border: 2px solid #FFED00;
border-radius: 8px;
color: #FFED00;
text-decoration: none;
text-align: center;
font-size: 16px;
font-weight: bold;
transition: all 0.2s;
}
.github-link-btn:hover {
background: #FFED00;
color: #000;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 237, 0, 0.3);
}
.github-link-btn:active {
transform: translateY(0);
}
/* Older Updates Button */
.older-updates-btn {
display: block;
width: 100%;
padding: 12px;
margin-top: 15px;
background-color: #0a0a0a;
border: 1px solid #333;
border-radius: 6px;
color: #FFED00;
text-align: center;
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
}
.older-updates-btn:hover {
background-color: #1a1a1a;
border-color: #FFED00;
}
.older-updates-btn:active {
background-color: #000;
}
/* Desktop Optimierungen */
@media (min-width: 768px) {
.updates-header h2 {
font-size: 36px;
}
.updates-subtitle {
font-size: 16px;
}
.version-number {
font-size: 18px;
padding: 6px 16px;
}
.version-date {
font-size: 15px;
}
.change-category-title {
font-size: 18px;
}
.change-item {
font-size: 15px;
}
.github-link-btn {
font-size: 18px;
padding: 18px;
}
}