update

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();