Add files via upload

script.js

@@ -1990,3 +1990,172 @@
             }
         });
 
+
+// ==========================================
+// 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'] });
+    }
+});