Initial commit

2026-04-07 12:59:01 +02:00
commit 4b029c2bce
174 changed files with 34730 additions and 0 deletions
--- a/main.js
+++ b/main.js
@@ -0,0 +1,162 @@
+// ==========================================================================
+// SG 07 ST. LEON - ZENTRALES JAVASCRIPT
+// ==========================================================================
+
+document.addEventListener('DOMContentLoaded', () => {
+
+    // --- 1. Mobiles Menü Toggle ---
+    const menuToggle = document.getElementById('menuToggle');
+    const navMenu = document.getElementById('navMenu');
+    
+    if (menuToggle && navMenu) {
+        menuToggle.addEventListener('click', () => {
+            navMenu.classList.toggle('show');
+        });
+    }
+
+    // --- 2. News & API Logik ---
+    const newsContainer = document.getElementById('news-container');
+    
+    if (newsContainer) {
+        window.allNews = [];
+
+        async function loadNewsFromDatabase() {
+            try {
+                const response = await fetch('api.php');
+                window.allNews = await response.json();
+                newsContainer.innerHTML = '';
+
+                if (window.allNews.error) {
+                    newsContainer.innerHTML = `<p style="color: red; grid-column: 1 / -1;">Fehler: ${window.allNews.error}</p>`;
+                    return;
+                }
+
+                // Prüfen, ob der Container ein Limit hat (z.B. auf der Startseite: data-limit="3")
+                const limit = newsContainer.getAttribute('data-limit');
+                let newsToShow = window.allNews;
+                if (limit) {
+                    newsToShow = window.allNews.slice(0, parseInt(limit));
+                }
+
+                newsToShow.forEach(news => {
+                    const imgSrc = news.image ? news.image : "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23f4f4f4'/%3E%3Ctext x='50' y='55' font-size='14' fill='%23cccccc' text-anchor='middle' font-family='sans-serif'%3ESportgemeinschaft%3C/text%3E%3C/svg%3E";
+                    
+                    const card = document.createElement('div');
+                    card.className = 'card';
+                    card.innerHTML = `
+                        <img src="${imgSrc}" alt="${news.title}" class="card-img" loading="lazy">
+                        <div class="card-content">
+                            <div class="card-date">
+                                <span>${news.date}</span>
+                                <span class="card-tag">${news.department}</span>
+                            </div>
+                            <h3>${news.title}</h3>
+                            <p>${news.content}</p>
+                            <a class="read-more" onclick="openNewsModal(${news.id})">Weiterlesen &rarr;</a>
+                        </div>
+                    `;
+                    newsContainer.appendChild(card);
+                });
+            } catch (error) {
+                console.error("News Fehler:", error);
+            }
+        }
+
+        loadNewsFromDatabase();
+    }
+
+    // --- 3. News Modal (Popup) Logik ---
+    const newsModal = document.getElementById('newsModal');
+    
+    if (newsModal) {
+        // Global verfügbar machen für das onclick-Attribut in den HTML-Karten
+        window.openNewsModal = function(id) {
+            const news = window.allNews.find(n => n.id === id);
+            if(!news) return;
+
+            document.getElementById('modalTitle').innerText = news.title;
+            document.getElementById('modalMeta').innerText = news.date + ' | ' + news.department;
+            document.getElementById('modalBody').innerText = news.full_text || news.content;
+
+            const imgEl = document.getElementById('modalImage');
+            if(news.image && news.image.trim() !== "") {
+                imgEl.src = news.image;
+                imgEl.style.display = 'block';
+            } else {
+                imgEl.style.display = 'none';
+            }
+
+            newsModal.classList.add('active');
+            document.body.style.overflow = 'hidden'; 
+        };
+
+        window.closeNewsModal = function() {
+            newsModal.classList.remove('active');
+            document.body.style.overflow = 'auto';
+        };
+
+        newsModal.addEventListener('click', function(e) {
+            if (e.target === this) closeNewsModal();
+        });
+
+        document.addEventListener('keydown', function(e) {
+            if(e.key === "Escape" && newsModal.classList.contains('active')) {
+                closeNewsModal();
+            }
+        });
+    }
+
+    // --- 4. Lightbox / Bildergalerie Logik (Vereinsheim) ---
+    const lightbox = document.getElementById('lightbox');
+    
+    if (lightbox) {
+        let currentImageIndex = 0;
+        const galleryImages = document.querySelectorAll('.gallery-item img');
+        const lightboxImg = document.getElementById('lightboxImg');
+        const lightboxCounter = document.getElementById('lightboxCounter');
+
+        window.openLightbox = function(index) {
+            currentImageIndex = index;
+            updateLightbox();
+            lightbox.classList.add('active');
+            document.body.style.overflow = 'hidden'; 
+        };
+
+        window.closeLightbox = function() {
+            lightbox.classList.remove('active');
+            document.body.style.overflow = 'auto'; 
+        };
+
+        window.changeImage = function(direction) {
+            currentImageIndex += direction;
+            if (currentImageIndex >= galleryImages.length) {
+                currentImageIndex = 0;
+            } else if (currentImageIndex < 0) {
+                currentImageIndex = galleryImages.length - 1;
+            }
+            updateLightbox();
+        };
+
+        function updateLightbox() {
+            if (galleryImages[currentImageIndex]) {
+                lightboxImg.src = galleryImages[currentImageIndex].src;
+                lightboxCounter.innerText = (currentImageIndex + 1) + ' / ' + galleryImages.length;
+            }
+        }
+
+        lightbox.addEventListener('click', function(event) {
+            if (event.target === lightbox || event.target.className === 'lightbox-content') {
+                closeLightbox();
+            }
+        });
+
+        document.addEventListener('keydown', function(event) {
+            if (lightbox.classList.contains('active')) {
+                if (event.key === "Escape") closeLightbox();
+                if (event.key === "ArrowRight") changeImage(1);
+                if (event.key === "ArrowLeft") changeImage(-1);
+            }
+        });
+    }
+
+});