update

frontend/public/app.js

@@ -0,0 +1,170 @@
+// Load news on page load
+document.addEventListener('DOMContentLoaded', () => {
+    loadNews();
+    loadStats();
+});
+
+async function loadNews() {
+    const newsGrid = document.getElementById('newsGrid');
+    newsGrid.innerHTML = '<div class="loading">Loading news...</div>';
+    
+    try {
+        const response = await fetch('/api/news');
+        const data = await response.json();
+        
+        if (data.articles && data.articles.length > 0) {
+            displayNews(data.articles);
+        } else {
+            newsGrid.innerHTML = '<div class="loading">No news available at the moment. Check back later!</div>';
+        }
+    } catch (error) {
+        console.error('Error loading news:', error);
+        newsGrid.innerHTML = '<div class="loading">Failed to load news. Please try again later.</div>';
+    }
+}
+
+function displayNews(articles) {
+    const newsGrid = document.getElementById('newsGrid');
+    newsGrid.innerHTML = '';
+    
+    articles.forEach(article => {
+        const card = document.createElement('div');
+        card.className = 'news-card';
+        card.onclick = () => window.open(article.link, '_blank');
+        
+        card.innerHTML = `
+            <div class="source">${article.source || 'Munich News'}</div>
+            <h3>${article.title}</h3>
+            <p>${article.summary || 'No summary available.'}</p>
+            <a href="${article.link}" target="_blank" class="read-more" onclick="event.stopPropagation()">Read more →</a>
+        `;
+        
+        newsGrid.appendChild(card);
+    });
+}
+
+async function loadStats() {
+    try {
+        const response = await fetch('/api/stats');
+        const data = await response.json();
+        
+        if (data.subscribers !== undefined) {
+            document.getElementById('subscriberCount').textContent = data.subscribers.toLocaleString();
+        }
+    } catch (error) {
+        console.error('Error loading stats:', error);
+    }
+}
+
+async function subscribe() {
+    const emailInput = document.getElementById('emailInput');
+    const subscribeBtn = document.getElementById('subscribeBtn');
+    const formMessage = document.getElementById('formMessage');
+    
+    const email = emailInput.value.trim();
+    
+    if (!email || !email.includes('@')) {
+        formMessage.textContent = 'Please enter a valid email address';
+        formMessage.className = 'form-message error';
+        return;
+    }
+    
+    subscribeBtn.disabled = true;
+    subscribeBtn.textContent = 'Subscribing...';
+    formMessage.textContent = '';
+    
+    try {
+        const response = await fetch('/api/subscribe', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ email: email })
+        });
+        
+        const data = await response.json();
+        
+        if (response.ok) {
+            formMessage.textContent = data.message || 'Successfully subscribed! Check your email for confirmation.';
+            formMessage.className = 'form-message success';
+            emailInput.value = '';
+            loadStats(); // Refresh stats
+        } else {
+            formMessage.textContent = data.error || 'Failed to subscribe. Please try again.';
+            formMessage.className = 'form-message error';
+        }
+    } catch (error) {
+        formMessage.textContent = 'Network error. Please try again later.';
+        formMessage.className = 'form-message error';
+    } finally {
+        subscribeBtn.disabled = false;
+        subscribeBtn.textContent = 'Subscribe Free';
+    }
+}
+
+// Allow Enter key to submit
+document.getElementById('emailInput').addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') {
+        subscribe();
+    }
+});
+
+function showUnsubscribe() {
+    document.getElementById('unsubscribeModal').style.display = 'block';
+}
+
+function closeUnsubscribe() {
+    document.getElementById('unsubscribeModal').style.display = 'none';
+    document.getElementById('unsubscribeEmail').value = '';
+    document.getElementById('unsubscribeMessage').textContent = '';
+}
+
+async function unsubscribe() {
+    const emailInput = document.getElementById('unsubscribeEmail');
+    const unsubscribeMessage = document.getElementById('unsubscribeMessage');
+    
+    const email = emailInput.value.trim();
+    
+    if (!email || !email.includes('@')) {
+        unsubscribeMessage.textContent = 'Please enter a valid email address';
+        unsubscribeMessage.className = 'form-message error';
+        return;
+    }
+    
+    try {
+        const response = await fetch('/api/unsubscribe', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ email: email })
+        });
+        
+        const data = await response.json();
+        
+        if (response.ok) {
+            unsubscribeMessage.textContent = data.message || 'Successfully unsubscribed.';
+            unsubscribeMessage.className = 'form-message success';
+            emailInput.value = '';
+            setTimeout(() => {
+                closeUnsubscribe();
+                loadStats();
+            }, 2000);
+        } else {
+            unsubscribeMessage.textContent = data.error || 'Failed to unsubscribe. Please try again.';
+            unsubscribeMessage.className = 'form-message error';
+        }
+    } catch (error) {
+        unsubscribeMessage.textContent = 'Network error. Please try again later.';
+        unsubscribeMessage.className = 'form-message error';
+    }
+}
+
+// Close modal when clicking outside
+window.onclick = function(event) {
+    const modal = document.getElementById('unsubscribeModal');
+    if (event.target === modal) {
+        closeUnsubscribe();
+    }
+}
+