update

frontend/public/admin.html

@@ -226,6 +226,54 @@
             <h3>🔗 AI Clustering & Aggregation</h3>
             <div id="clusteringStats" class="loading">Loading...</div>
         </div>
+
+        <!-- Subscriber Management -->
+        <div class="card">
+            <h3>👥 Subscriber Management</h3>
+            <div style="margin-bottom: 20px;">
+                <button onclick="viewSubscribers()" class="btn btn-primary" style="margin-right: 10px;">
+                    📋 View All Subscribers
+                </button>
+                <button onclick="deleteAllSubscribers()" class="btn btn-danger">
+                    🗑️ Delete All Subscribers
+                </button>
+            </div>
+            <div id="subscriberList"></div>
+            <div id="subscriberMessage"></div>
+        </div>
+
+        <!-- RSS Feed Management -->
+        <div class="card">
+            <h3>📡 RSS Feed Management</h3>
+            <div style="margin-bottom: 20px;">
+                <button onclick="exportRSSFeeds()" class="btn btn-primary" style="margin-right: 10px;">
+                    📥 Export RSS Feeds
+                </button>
+                <label class="btn btn-primary" style="margin-right: 10px; cursor: pointer;">
+                    📤 Import RSS Feeds
+                    <input type="file" id="rssImportFile" accept=".json" style="display: none;" onchange="importRSSFeeds(event)">
+                </label>
+                <button onclick="viewRSSFeeds()" class="btn btn-secondary">
+                    📋 View All Feeds
+                </button>
+            </div>
+            <div id="rssFeedList"></div>
+            <div id="rssFeedMessage"></div>
+        </div>
+
+        <!-- Recent Summarization Activity -->
+        <div class="card">
+            <h3>🤖 Recent AI Summarization Activity</h3>
+            <div style="margin-bottom: 15px;">
+                <button onclick="loadRecentArticles()" class="btn btn-primary">
+                    🔄 Refresh
+                </button>
+                <label style="margin-left: 15px;">
+                    <input type="checkbox" id="autoRefresh" onchange="toggleAutoRefresh()"> Auto-refresh (10s)
+                </label>
+            </div>
+            <div id="recentArticles" class="loading">Loading...</div>
+        </div>
     </div>
 
     <script src="admin.js"></script>

frontend/public/admin.js

@@ -313,3 +313,262 @@ async function loadClusteringStats() {
         document.getElementById('clusteringStats').innerHTML = `<div class="error">Error: ${error.message}</div>`;
     }
 }
+
+
+// Subscriber Management
+async function viewSubscribers() {
+    const listDiv = document.getElementById('subscriberList');
+    const messageDiv = document.getElementById('subscriberMessage');
+    
+    listDiv.innerHTML = '<p class="loading">Loading subscribers...</p>';
+    messageDiv.innerHTML = '';
+    
+    try {
+        const response = await fetch('/api/subscribers');
+        const data = await response.json();
+        
+        if (data.subscribers && data.subscribers.length > 0) {
+            let html = '<div style="max-height: 400px; overflow-y: auto; margin-top: 15px;">';
+            html += '<table style="width: 100%; border-collapse: collapse;">';
+            html += '<thead><tr style="background: #f5f5f5; position: sticky; top: 0;"><th style="padding: 10px; text-align: left;">Email</th><th style="padding: 10px; text-align: left;">Categories</th><th style="padding: 10px; text-align: left;">Status</th></tr></thead>';
+            html += '<tbody>';
+            
+            data.subscribers.forEach(sub => {
+                const categories = sub.categories ? sub.categories.join(', ') : 'All';
+                html += `<tr style="border-bottom: 1px solid #eee;">
+                    <td style="padding: 10px;">${sub.email}</td>
+                    <td style="padding: 10px;">${categories}</td>
+                    <td style="padding: 10px;"><span style="color: ${sub.status === 'active' ? 'green' : 'red'};">${sub.status}</span></td>
+                </tr>`;
+            });
+            
+            html += '</tbody></table></div>';
+            html += `<p style="margin-top: 10px; color: #666;">Total: ${data.total} subscribers</p>`;
+            listDiv.innerHTML = html;
+        } else {
+            listDiv.innerHTML = '<p style="color: #666;">No subscribers found.</p>';
+        }
+    } catch (error) {
+        listDiv.innerHTML = '<p style="color: red;">Failed to load subscribers</p>';
+    }
+}
+
+async function deleteAllSubscribers() {
+    const messageDiv = document.getElementById('subscriberMessage');
+    
+    if (!confirm('⚠️ Are you sure you want to delete ALL subscribers? This cannot be undone!')) {
+        return;
+    }
+    
+    if (!confirm('⚠️ FINAL WARNING: This will permanently delete all subscriber data. Continue?')) {
+        return;
+    }
+    
+    messageDiv.innerHTML = '<p class="loading">Deleting all subscribers...</p>';
+    
+    try {
+        const response = await fetch('/api/admin/subscribers/delete-all', {
+            method: 'DELETE'
+        });
+        
+        const data = await response.json();
+        
+        if (response.ok) {
+            messageDiv.innerHTML = `<p style="color: green;">✓ ${data.message}</p>`;
+            document.getElementById('subscriberList').innerHTML = '';
+            // Refresh stats
+            loadStats();
+        } else {
+            messageDiv.innerHTML = `<p style="color: red;">✗ ${data.error || 'Failed to delete subscribers'}</p>`;
+        }
+    } catch (error) {
+        messageDiv.innerHTML = '<p style="color: red;">✗ Network error</p>';
+    }
+}
+
+
+// RSS Feed Management
+async function exportRSSFeeds() {
+    const messageDiv = document.getElementById('rssFeedMessage');
+    messageDiv.innerHTML = '<p class="loading">Exporting RSS feeds...</p>';
+    
+    try {
+        const response = await fetch('/api/rss-feeds/export');
+        const data = await response.json();
+        
+        if (response.ok) {
+            // Create download
+            const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `rss-feeds-${new Date().toISOString().split('T')[0]}.json`;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+            
+            messageDiv.innerHTML = `<p style="color: green;">✓ Exported ${data.total} RSS feeds</p>`;
+        } else {
+            messageDiv.innerHTML = `<p style="color: red;">✗ ${data.error || 'Export failed'}</p>`;
+        }
+    } catch (error) {
+        messageDiv.innerHTML = '<p style="color: red;">✗ Network error</p>';
+    }
+}
+
+async function importRSSFeeds(event) {
+    const messageDiv = document.getElementById('rssFeedMessage');
+    const file = event.target.files[0];
+    
+    if (!file) return;
+    
+    messageDiv.innerHTML = '<p class="loading">Importing RSS feeds...</p>';
+    
+    try {
+        const text = await file.text();
+        const data = JSON.parse(text);
+        
+        const response = await fetch('/api/rss-feeds/import', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(data)
+        });
+        
+        const result = await response.json();
+        
+        if (response.ok) {
+            let html = `<p style="color: green;">✓ ${result.message}</p>`;
+            if (result.errors && result.errors.length > 0) {
+                html += '<details style="margin-top: 10px;"><summary>Show details</summary><ul>';
+                result.errors.forEach(err => {
+                    html += `<li style="color: orange;">${err}</li>`;
+                });
+                html += '</ul></details>';
+            }
+            messageDiv.innerHTML = html;
+            
+            // Refresh feed list if visible
+            if (document.getElementById('rssFeedList').innerHTML) {
+                viewRSSFeeds();
+            }
+        } else {
+            messageDiv.innerHTML = `<p style="color: red;">✗ ${result.error || 'Import failed'}</p>`;
+        }
+    } catch (error) {
+        messageDiv.innerHTML = `<p style="color: red;">✗ Error: ${error.message}</p>`;
+    }
+    
+    // Reset file input
+    event.target.value = '';
+}
+
+async function viewRSSFeeds() {
+    const listDiv = document.getElementById('rssFeedList');
+    const messageDiv = document.getElementById('rssFeedMessage');
+    
+    listDiv.innerHTML = '<p class="loading">Loading RSS feeds...</p>';
+    messageDiv.innerHTML = '';
+    
+    try {
+        const response = await fetch('/api/rss-feeds');
+        const data = await response.json();
+        
+        if (data.feeds && data.feeds.length > 0) {
+            let html = '<div style="max-height: 400px; overflow-y: auto; margin-top: 15px;">';
+            html += '<table style="width: 100%; border-collapse: collapse;">';
+            html += '<thead><tr style="background: #f5f5f5; position: sticky; top: 0;"><th style="padding: 10px; text-align: left;">Name</th><th style="padding: 10px; text-align: left;">Category</th><th style="padding: 10px; text-align: left;">URL</th><th style="padding: 10px; text-align: left;">Status</th></tr></thead>';
+            html += '<tbody>';
+            
+            data.feeds.forEach(feed => {
+                const statusColor = feed.active ? 'green' : 'gray';
+                const statusText = feed.active ? 'Active' : 'Inactive';
+                html += `<tr style="border-bottom: 1px solid #eee;">
+                    <td style="padding: 10px;">${feed.name}</td>
+                    <td style="padding: 10px;">${feed.category}</td>
+                    <td style="padding: 10px; font-size: 12px; max-width: 300px; overflow: hidden; text-overflow: ellipsis;">${feed.url}</td>
+                    <td style="padding: 10px;"><span style="color: ${statusColor};">${statusText}</span></td>
+                </tr>`;
+            });
+            
+            html += '</tbody></table></div>';
+            html += `<p style="margin-top: 10px; color: #666;">Total: ${data.total} feeds</p>`;
+            listDiv.innerHTML = html;
+        } else {
+            listDiv.innerHTML = '<p style="color: #666;">No RSS feeds found.</p>';
+        }
+    } catch (error) {
+        listDiv.innerHTML = '<p style="color: red;">Failed to load RSS feeds</p>';
+    }
+}
+
+
+// Recent Summarization Activity
+let autoRefreshInterval = null;
+
+async function loadRecentArticles() {
+    const container = document.getElementById('recentArticles');
+    
+    try {
+        const response = await fetch('/api/admin/recent-articles');
+        const data = await response.json();
+        
+        if (data.articles && data.articles.length > 0) {
+            let html = '<div style="max-height: 500px; overflow-y: auto;">';
+            html += '<table style="width: 100%; border-collapse: collapse; font-size: 14px;">';
+            html += '<thead><tr style="background: #f5f5f5; position: sticky; top: 0;"><th style="padding: 8px; text-align: left;">Time</th><th style="padding: 8px; text-align: left;">Title</th><th style="padding: 8px; text-align: left;">Source</th><th style="padding: 8px; text-align: left;">Category</th><th style="padding: 8px; text-align: right;">Words</th></tr></thead>';
+            html += '<tbody>';
+            
+            data.articles.forEach(article => {
+                const time = article.summarized_at ? new Date(article.summarized_at).toLocaleTimeString() : 'N/A';
+                const title = article.title_en || article.title;
+                const categoryColors = {
+                    'general': '#667eea',
+                    'local': '#f59e0b',
+                    'sports': '#10b981',
+                    'science': '#8b5cf6'
+                };
+                const categoryColor = categoryColors[article.category] || '#6b7280';
+                
+                html += `<tr style="border-bottom: 1px solid #eee;">
+                    <td style="padding: 8px; white-space: nowrap; color: #666;">${time}</td>
+                    <td style="padding: 8px; max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="${title}">${title}</td>
+                    <td style="padding: 8px;">${article.source}</td>
+                    <td style="padding: 8px;"><span style="background: ${categoryColor}; color: white; padding: 2px 8px; border-radius: 4px; font-size: 12px;">${article.category || 'N/A'}</span></td>
+                    <td style="padding: 8px; text-align: right;">${article.summary_word_count || 'N/A'}</td>
+                </tr>`;
+            });
+            
+            html += '</tbody></table></div>';
+            html += `<p style="margin-top: 10px; color: #666; font-size: 12px;">Last updated: ${new Date().toLocaleTimeString()}</p>`;
+            container.innerHTML = html;
+        } else {
+            container.innerHTML = '<p style="color: #666;">No summarized articles found.</p>';
+        }
+    } catch (error) {
+        container.innerHTML = '<p style="color: red;">Failed to load recent articles</p>';
+    }
+}
+
+function toggleAutoRefresh() {
+    const checkbox = document.getElementById('autoRefresh');
+    
+    if (checkbox.checked) {
+        // Start auto-refresh every 10 seconds
+        loadRecentArticles();
+        autoRefreshInterval = setInterval(loadRecentArticles, 10000);
+    } else {
+        // Stop auto-refresh
+        if (autoRefreshInterval) {
+            clearInterval(autoRefreshInterval);
+            autoRefreshInterval = null;
+        }
+    }
+}
+
+// Load recent articles on page load
+document.addEventListener('DOMContentLoaded', () => {
+    loadRecentArticles();
+});

frontend/public/app.js

@@ -11,8 +11,32 @@ document.addEventListener('DOMContentLoaded', () => {
     loadNews();
     loadStats();
     setupInfiniteScroll();
+    loadCategories();
 });
 
+async function loadCategories() {
+    try {
+        const response = await fetch('/api/categories');
+        const data = await response.json();
+        const categories = data.categories || [];
+        
+        const container = document.getElementById('categoryCheckboxes');
+        container.innerHTML = '';
+        
+        categories.forEach(category => {
+            const label = document.createElement('label');
+            label.className = 'flex items-center space-x-3 cursor-pointer';
+            label.innerHTML = `
+                <input type="checkbox" value="${category.id}" checked class="w-5 h-5 rounded border-2 border-white/30 bg-white/20 checked:bg-white checked:border-white focus:ring-2 focus:ring-white/50">
+                <span class="text-white text-sm">${category.icon} ${category.name}</span>
+            `;
+            container.appendChild(label);
+        });
+    } catch (error) {
+        console.error('Failed to load categories:', error);
+    }
+}
+
 async function loadNews() {
     const newsGrid = document.getElementById('newsGrid');
     newsGrid.innerHTML = '<div class="text-center py-10 text-gray-500">Loading news...</div>';
@@ -291,6 +315,16 @@ async function subscribe() {
         return;
     }
     
+    // Get selected categories
+    const checkboxes = document.querySelectorAll('#categoryCheckboxes input[type="checkbox"]:checked');
+    const categories = Array.from(checkboxes).map(cb => cb.value);
+    
+    if (categories.length === 0) {
+        formMessage.textContent = 'Please select at least one category';
+        formMessage.className = 'text-red-200 font-medium';
+        return;
+    }
+    
     subscribeBtn.disabled = true;
     subscribeBtn.textContent = 'Subscribing...';
     subscribeBtn.classList.add('opacity-75', 'cursor-not-allowed');
@@ -302,7 +336,10 @@ async function subscribe() {
             headers: {
                 'Content-Type': 'application/json'
             },
-            body: JSON.stringify({ email: email })
+            body: JSON.stringify({ 
+                email: email,
+                categories: categories
+            })
         });
         
         const data = await response.json();

frontend/public/index.html

@@ -41,6 +41,15 @@
                         class="w-full px-6 py-4 rounded-lg text-gray-800 text-lg focus:outline-none focus:ring-4 focus:ring-white/30 shadow-lg"
                         required
                     >
+                    
+                    <!-- Category Selection -->
+                    <div class="bg-white/10 backdrop-blur-sm rounded-lg p-4">
+                        <p class="text-white font-semibold mb-3 text-sm">Choose your interests:</p>
+                        <div class="space-y-2" id="categoryCheckboxes">
+                            <!-- Categories will be loaded dynamically -->
+                        </div>
+                    </div>
+                    
                     <button 
                         id="subscribeBtn" 
                         onclick="subscribe()"

frontend/public/preferences.html

@@ -0,0 +1,257 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Manage Preferences - Munich News Daily</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#667eea',
+                        secondary: '#764ba2',
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gradient-to-br from-primary to-secondary min-h-screen">
+    <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <!-- Header -->
+        <header class="text-center text-white py-12">
+            <h1 class="text-4xl sm:text-5xl font-extrabold mb-4">📰 Munich News Daily</h1>
+            <p class="text-xl opacity-95">Manage Your Preferences</p>
+        </header>
+
+        <!-- Preferences Form -->
+        <div class="bg-white rounded-2xl shadow-2xl p-8 mb-8">
+            <div id="loadingState" class="text-center py-10">
+                <div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
+                <p class="mt-4 text-gray-600">Loading your preferences...</p>
+            </div>
+
+            <div id="emailForm" class="hidden">
+                <h2 class="text-2xl font-bold text-gray-800 mb-4">Enter Your Email</h2>
+                <p class="text-gray-600 mb-6">Enter your email address to manage your newsletter preferences.</p>
+                
+                <input 
+                    type="email" 
+                    id="emailInput" 
+                    placeholder="your@email.com" 
+                    class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:border-primary mb-4"
+                >
+                <button 
+                    onclick="loadPreferences()"
+                    class="w-full px-6 py-3 bg-primary hover:bg-secondary text-white font-semibold rounded-lg transition"
+                >
+                    Load Preferences
+                </button>
+                <p id="emailError" class="mt-4 text-sm text-red-600 hidden"></p>
+            </div>
+
+            <div id="preferencesForm" class="hidden">
+                <h2 class="text-2xl font-bold text-gray-800 mb-2">Your Preferences</h2>
+                <p class="text-gray-600 mb-6">Email: <strong id="userEmail"></strong></p>
+                
+                <div class="mb-6">
+                    <h3 class="text-lg font-semibold text-gray-800 mb-3">Choose your interests:</h3>
+                    <div class="space-y-3" id="categoryCheckboxes">
+                        <!-- Categories will be loaded dynamically -->
+                    </div>
+                </div>
+
+                <button 
+                    onclick="savePreferences()"
+                    class="w-full px-6 py-3 bg-primary hover:bg-secondary text-white font-semibold rounded-lg transition mb-3"
+                >
+                    Save Preferences
+                </button>
+                
+                <button 
+                    onclick="showEmailForm()"
+                    class="w-full px-6 py-3 bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold rounded-lg transition"
+                >
+                    Change Email
+                </button>
+
+                <p id="saveMessage" class="mt-4 text-sm min-h-[20px]"></p>
+            </div>
+        </div>
+
+        <!-- Back to Home -->
+        <div class="text-center">
+            <a href="/" class="text-white underline hover:opacity-80">← Back to Home</a>
+        </div>
+    </div>
+
+    <script>
+        let currentEmail = '';
+        let availableCategories = [];
+
+        // Load categories from API
+        async function loadCategories() {
+            try {
+                const response = await fetch('/api/categories');
+                const data = await response.json();
+                availableCategories = data.categories || [];
+                renderCategories();
+            } catch (error) {
+                console.error('Failed to load categories:', error);
+                // Fallback to default categories
+                availableCategories = [
+                    { id: 'general', name: 'Top Trending', description: 'Top trending news and updates', icon: '🔥' },
+                    { id: 'local', name: 'Local Events', description: 'Local events and community news', icon: '🏛️' },
+                    { id: 'sports', name: 'Sports', description: 'Sports news', icon: '⚽' }
+                ];
+                renderCategories();
+            }
+        }
+
+        function renderCategories(selectedCategories = []) {
+            const container = document.getElementById('categoryCheckboxes');
+            container.innerHTML = '';
+            
+            availableCategories.forEach(category => {
+                const isChecked = selectedCategories.length === 0 || selectedCategories.includes(category.id);
+                
+                const label = document.createElement('label');
+                label.className = 'flex items-center space-x-3 p-3 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-primary transition';
+                label.innerHTML = `
+                    <input type="checkbox" value="${category.id}" ${isChecked ? 'checked' : ''} class="w-5 h-5 text-primary rounded focus:ring-2 focus:ring-primary">
+                    <div>
+                        <div class="font-semibold text-gray-800">${category.icon} ${category.name}</div>
+                        <div class="text-sm text-gray-500">${category.description}</div>
+                    </div>
+                `;
+                container.appendChild(label);
+            });
+        }
+
+        // Check if email is in URL parameter
+        window.addEventListener('DOMContentLoaded', async () => {
+            // Load categories first
+            await loadCategories();
+            
+            const urlParams = new URLSearchParams(window.location.search);
+            const email = urlParams.get('email');
+            
+            if (email) {
+                document.getElementById('emailInput').value = email;
+                loadPreferences();
+            } else {
+                showEmailForm();
+            }
+        });
+
+        function showEmailForm() {
+            document.getElementById('loadingState').classList.add('hidden');
+            document.getElementById('emailForm').classList.remove('hidden');
+            document.getElementById('preferencesForm').classList.add('hidden');
+        }
+
+        async function loadPreferences() {
+            const emailInput = document.getElementById('emailInput');
+            const email = emailInput.value.trim().toLowerCase();
+            const emailError = document.getElementById('emailError');
+
+            if (!email || !email.includes('@')) {
+                emailError.textContent = 'Please enter a valid email address';
+                emailError.classList.remove('hidden');
+                return;
+            }
+
+            emailError.classList.add('hidden');
+            currentEmail = email;
+
+            // Show loading
+            document.getElementById('emailForm').classList.add('hidden');
+            document.getElementById('loadingState').classList.remove('hidden');
+
+            try {
+                // Try to get subscriber info (we'll need to add this endpoint)
+                const response = await fetch(`/api/subscribers/${encodeURIComponent(email)}`);
+                
+                if (response.ok) {
+                    const data = await response.json();
+                    const categories = data.categories || [];
+                    
+                    // Update UI
+                    document.getElementById('userEmail').textContent = email;
+                    
+                    // Render categories with user's selections
+                    renderCategories(categories);
+                    
+                    // Show preferences form
+                    document.getElementById('loadingState').classList.add('hidden');
+                    document.getElementById('preferencesForm').classList.remove('hidden');
+                } else if (response.status === 404) {
+                    // Email not found - show preferences form with all categories checked (new subscription)
+                    document.getElementById('userEmail').textContent = email;
+                    
+                    // Render all categories checked by default
+                    renderCategories([]);
+                    
+                    // Show preferences form
+                    document.getElementById('loadingState').classList.add('hidden');
+                    document.getElementById('preferencesForm').classList.remove('hidden');
+                    
+                    // Show info message
+                    const saveMessage = document.getElementById('saveMessage');
+                    saveMessage.textContent = 'New subscriber - select your preferences and save to subscribe!';
+                    saveMessage.className = 'mt-4 text-sm text-blue-600';
+                } else {
+                    throw new Error('Failed to load preferences');
+                }
+            } catch (error) {
+                emailError.textContent = 'Error loading preferences. Please try again.';
+                emailError.classList.remove('hidden');
+                showEmailForm();
+            }
+        }
+
+        async function savePreferences() {
+            const saveMessage = document.getElementById('saveMessage');
+            const checkboxes = document.querySelectorAll('#preferencesForm input[type="checkbox"]:checked');
+            const categories = Array.from(checkboxes).map(cb => cb.value);
+
+            if (categories.length === 0) {
+                saveMessage.textContent = 'Please select at least one category';
+                saveMessage.className = 'mt-4 text-sm text-red-600';
+                return;
+            }
+
+            saveMessage.textContent = 'Saving...';
+            saveMessage.className = 'mt-4 text-sm text-gray-600';
+
+            try {
+                const response = await fetch('/api/subscribe', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        email: currentEmail,
+                        categories: categories
+                    })
+                });
+
+                const data = await response.json();
+
+                if (response.ok) {
+                    saveMessage.textContent = '✓ Preferences saved successfully!';
+                    saveMessage.className = 'mt-4 text-sm text-green-600 font-semibold';
+                } else {
+                    saveMessage.textContent = data.error || 'Failed to save preferences';
+                    saveMessage.className = 'mt-4 text-sm text-red-600';
+                }
+            } catch (error) {
+                saveMessage.textContent = 'Network error. Please try again.';
+                saveMessage.className = 'mt-4 text-sm text-red-600';
+            }
+        }
+    </script>
+</body>
+</html>