fix all feeds into app using free APis - Follow Up Deployment

index.html

@@ -183,45 +183,10 @@
                         <span>Trending Topics</span>
                     </h2>
                     
-                    <div class="space-y-4">
-                        <div class="flex items-start group cursor-pointer">
-                            <div class="bg-blue-900 bg-opacity-50 rounded-lg p-2 mr-3 group-hover:bg-opacity-70 transition-all">
-                                <i class="fas fa-microchip text-blue-300"></i>
-                            </div>
-                            <div>
-                                <h3 class="font-medium group-hover:text-cyan-400 transition-all">Quantum Computing</h3>
-                                <p class="text-xs text-gray-400">+1,245 articles today</p>
-                            </div>
-                        </div>
-                        
-                        <div class="flex items-start group cursor-pointer">
-                            <div class="bg-purple-900 bg-opacity-50 rounded-lg p-2 mr-3 group-hover:bg-opacity-70 transition-all">
-                                <i class="fas fa-robot text-purple-300"></i>
-                            </div>
-                            <div>
-                                <h3 class="font-medium group-hover:text-cyan-400 transition-all">AI Regulation</h3>
-                                <p class="text-xs text-gray-400">+892 articles today</p>
-                            </div>
-                        </div>
-                        
-                        <div class="flex items-start group cursor-pointer">
-                            <div class="bg-green-900 bg-opacity-50 rounded-lg p-2 mr-3 group-hover:bg-opacity-70 transition-all">
-                                <i class="fas fa-leaf text-green-300"></i>
-                            </div>
-                            <div>
-                                <h3 class="font-medium group-hover:text-cyan-400 transition-all">Climate Tech</h3>
-                                <p class="text-xs text-gray-400">+1,532 articles today</p>
-                            </div>
-                        </div>
-                        
-                        <div class="flex items-start group cursor-pointer">
-                            <div class="bg-yellow-900 bg-opacity-50 rounded-lg p-2 mr-3 group-hover:bg-opacity-70 transition-all">
-                                <i class="fas fa-dna text-yellow-300"></i>
-                            </div>
-                            <div>
-                                <h3 class="font-medium group-hover:text-cyan-400 transition-all">CRISPR Breakthrough</h3>
-                                <p class="text-xs text-gray-400">+756 articles today</p>
-                            </div>
+                    <div class="space-y-4" id="trendingTopics">
+                        <!-- Will be populated by JavaScript -->
+                        <div class="flex justify-center py-4">
+                            <i class="fas fa-circle-notch fa-spin text-cyan-400"></i>
                         </div>
                     </div>
                     
@@ -239,23 +204,37 @@
                 
                 <!-- AI Assistant -->
                 <div class="mt-6 bg-gray-800 bg-opacity-50 rounded-xl p-6 backdrop-blur-sm border border-gray-700 holographic">
-                    <div class="flex items-center mb-4">
-                        <div class="relative">
-                            <div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center">
-                                <i class="fas fa-robot text-white"></i>
+                    <div class="flex items-center justify-between mb-4">
+                        <div class="flex items-center">
+                            <div class="relative">
+                                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center">
+                                    <i class="fas fa-robot text-white"></i>
+                                </div>
+                                <div class="absolute -bottom-1 -right-1 w-4 h-4 bg-green-400 rounded-full border-2 border-gray-800"></div>
                             </div>
-                            <div class="absolute -bottom-1 -right-1 w-4 h-4 bg-green-400 rounded-full border-2 border-gray-800"></div>
+                            <h3 class="ml-3 font-medium">Nexus AI Assistant</h3>
                         </div>
-                        <h3 class="ml-3 font-medium">Nexus AI Assistant</h3>
+                        <button id="clearChat" class="text-xs text-gray-400 hover:text-cyan-400">
+                            <i class="fas fa-trash-alt mr-1"></i> Clear
+                        </button>
                     </div>
                     
-                    <div class="bg-gray-900 rounded-lg p-3 mb-3 text-sm">
-                        <p>Hi there! I can summarize articles, find related content, or answer questions about what you're reading.</p>
+                    <div id="chatContainer" class="bg-gray-900 rounded-lg p-3 mb-3 text-sm h-64 overflow-y-auto space-y-3">
+                        <div class="flex items-start">
+                            <div class="w-8 h-8 rounded-full bg-purple-500 flex-shrink-0 flex items-center justify-center mr-2">
+                                <i class="fas fa-robot text-white text-xs"></i>
+                            </div>
+                            <div class="bg-gray-800 rounded-lg p-2 px-3">
+                                <p>Hi there! I'm your Nexus AI Assistant. I can summarize articles, find related content, or answer questions about what you're reading. How can I help you today?</p>
+                            </div>
+                        </div>
                     </div>
                     
                     <div class="flex">
-                        <input type="text" placeholder="Ask me anything..." class="flex-1 bg-gray-700 border border-gray-600 rounded-l-lg px-3 py-2 text-sm focus:outline-none focus:border-cyan-500">
-                        <button class="bg-cyan-600 hover:bg-cyan-700 px-4 rounded-r-lg transition-all">
+                        <input id="aiInput" type="text" placeholder="Ask me anything..." 
+                            class="flex-1 bg-gray-700 border border-gray-600 rounded-l-lg px-3 py-2 text-sm focus:outline-none focus:border-cyan-500"
+                            onkeypress="if(event.keyCode === 13) sendAIQuery()">
+                        <button id="sendAIQuery" class="bg-cyan-600 hover:bg-cyan-700 px-4 rounded-r-lg transition-all">
                             <i class="fas fa-paper-plane"></i>
                         </button>
                     </div>
@@ -469,6 +448,118 @@
     </div>
     
     <script>
+        // API Configuration
+        const NEWS_API_KEY = 'YOUR_NEWSAPI_KEY'; // Get free key from newsapi.org
+        const GNEWS_API_KEY = 'YOUR_GNEWS_KEY'; // Get free key from gnews.io
+        
+        // Fetch from NewsAPI
+        async function fetchNewsAPI() {
+            try {
+                const response = await fetch(`https://newsapi.org/v2/top-headlines?country=us&apiKey=${NEWS_API_KEY}`);
+                const data = await response.json();
+                return data.articles;
+            } catch (error) {
+                console.error('Error fetching from NewsAPI:', error);
+                return [];
+            }
+        }
+        
+        // Fetch from GNews
+        async function fetchGNews() {
+            try {
+                const response = await fetch(`https://gnews.io/api/v4/top-headlines?token=${GNEWS_API_KEY}&lang=en`);
+                const data = await response.json();
+                return data.articles;
+            } catch (error) {
+                console.error('Error fetching from GNews:', error);
+                return [];
+            }
+        }
+        
+        // AI Assistant functionality
+        function sendAIQuery() {
+            const input = document.getElementById('aiInput');
+            const query = input.value.trim();
+            if (!query) return;
+            
+            const chatContainer = document.getElementById('chatContainer');
+            
+            // Add user message
+            chatContainer.innerHTML += `
+                <div class="flex items-start justify-end">
+                    <div class="bg-cyan-600 rounded-lg p-2 px-3 max-w-xs">
+                        <p>${query}</p>
+                    </div>
+                </div>
+            `;
+            
+            input.value = '';
+            
+            // Show typing indicator
+            chatContainer.innerHTML += `
+                <div class="flex items-start">
+                    <div class="w-8 h-8 rounded-full bg-purple-500 flex-shrink-0 flex items-center justify-center mr-2">
+                        <i class="fas fa-robot text-white text-xs"></i>
+                    </div>
+                    <div class="bg-gray-800 rounded-lg p-2 px-3 w-16">
+                        <div class="flex space-x-1">
+                            <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
+                            <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
+                            <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.4s"></div>
+                        </div>
+                    </div>
+                </div>
+            `;
+            
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+            
+            // Simulate AI response after delay
+            setTimeout(() => {
+                // Remove typing indicator
+                chatContainer.removeChild(chatContainer.lastChild);
+                
+                // Add AI response (in a real app, this would come from an API)
+                const responses = [
+                    `I found some information about "${query}". According to recent articles, this technology is advancing rapidly with several new breakthroughs expected this year.`,
+                    `Interesting question about ${query}! Based on your reading history, you might want to check the latest research papers on this topic.`,
+                    `Here's a summary of ${query}: The current state shows promising developments, though challenges remain in scalability and real-world implementation.`,
+                    `Regarding ${query}, I can recommend these related articles: "New Advances in the Field" and "Future Applications". Would you like me to fetch them?`
+                ];
+                
+                const randomResponse = responses[Math.floor(Math.random() * responses.length)];
+                
+                chatContainer.innerHTML += `
+                    <div class="flex items-start">
+                        <div class="w-8 h-8 rounded-full bg-purple-500 flex-shrink-0 flex items-center justify-center mr-2">
+                            <i class="fas fa-robot text-white text-xs"></i>
+                        </div>
+                        <div class="bg-gray-800 rounded-lg p-2 px-3">
+                            <p>${randomResponse}</p>
+                        </div>
+                    </div>
+                `;
+                
+                chatContainer.scrollTop = chatContainer.scrollHeight;
+            }, 1500);
+        }
+        
+        // Clear chat history
+        document.getElementById('clearChat').addEventListener('click', function() {
+            document.getElementById('chatContainer').innerHTML = `
+                <div class="flex items-start">
+                    <div class="w-8 h-8 rounded-full bg-purple-500 flex-shrink-0 flex items-center justify-center mr-2">
+                        <i class="fas fa-robot text-white text-xs"></i>
+                    </div>
+                    <div class="bg-gray-800 rounded-lg p-2 px-3">
+                        <p>Hi there! I'm your Nexus AI Assistant. I can summarize articles, find related content, or answer questions about what you're reading. How can I help you today?</p>
+                    </div>
+                </div>
+            `;
+        });
+        
+        // Send query on button click
+        document.getElementById('sendAIQuery').addEventListener('click', sendAIQuery);
+        
         // Toggle Settings Panel
         document.getElementById('settingsBtn').addEventListener('click', function() {
             const panel = document.getElementById('settingsPanel');
@@ -514,8 +605,109 @@
             });
         });
         
-        // Simulate loading more articles
-        document.querySelector('button:contains("Load More Articles")').addEventListener('click', function() {
+        // Render articles from API data
+        async function renderArticles() {
+            const mainFeed = document.querySelector('.lg\\:col-span-2');
+            const articleContainer = mainFeed.querySelector('.space-y-6');
+            
+            // Clear existing articles (except first 3 demo ones)
+            const articles = articleContainer.querySelectorAll('.article-card');
+            for (let i = 3; i < articles.length; i++) {
+                articles[i].remove();
+            }
+            
+            // Show loading
+            const loader = document.createElement('div');
+            loader.className = 'flex justify-center my-4';
+            loader.innerHTML = '<i class="fas fa-circle-notch fa-spin text-2xl text-cyan-400"></i>';
+            articleContainer.appendChild(loader);
+            
+            try {
+                // Fetch from both APIs
+                const [newsAPIArticles, gNewsArticles] = await Promise.all([
+                    fetchNewsAPI(),
+                    fetchGNews()
+                ]);
+                
+                // Combine and shuffle articles
+                const allArticles = [...newsAPIArticles, ...gNewsArticles]
+                    .sort(() => 0.5 - Math.random())
+                    .slice(0, 10); // Show 10 random articles
+                
+                // Remove loader
+                loader.remove();
+                
+                // Render each article
+                allArticles.forEach(article => {
+                    if (!article.title || !article.description) return;
+                    
+                    const categories = article.source?.name ? [article.source.name] : ['General'];
+                    if (article.urlToImage) categories.push('Multimedia');
+                    
+                    const articleEl = document.createElement('article');
+                    articleEl.className = 'article-card bg-gray-800 bg-opacity-50 rounded-xl overflow-hidden border border-gray-700 backdrop-blur-sm hover:border-cyan-500 transition-all';
+                    articleEl.innerHTML = `
+                        <div class="p-6">
+                            <div class="flex items-center justify-between mb-3">
+                                <div class="flex items-center">
+                                    <div class="w-8 h-8 rounded-full bg-blue-900 flex items-center justify-center mr-2">
+                                        <i class="fas fa-newspaper text-blue-300 text-xs"></i>
+                                    </div>
+                                    <span class="text-sm">${article.source?.name || 'News Source'} • ${new Date(article.publishedAt).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</span>
+                                </div>
+                                <button class="text-gray-400 hover:text-cyan-400">
+                                    <i class="fas fa-bookmark"></i>
+                                </button>
+                            </div>
+                            
+                            <h2 class="text-xl font-semibold mb-2 hover:text-cyan-400 cursor-pointer">
+                                ${article.title}
+                            </h2>
+                            
+                            <p class="text-gray-300 mb-4">
+                                ${article.description || 'No description available...'}
+                            </p>
+                            
+                            <div class="flex flex-wrap gap-2 mb-4">
+                                ${categories.map(cat => 
+                                    `<span class="px-2 py-1 bg-blue-900 bg-opacity-50 rounded-full text-xs">${cat}</span>`
+                                ).join('')}
+                            </div>
+                            
+                            <div class="flex items-center justify-between">
+                                <div class="flex items-center space-x-4">
+                                    <button class="flex items-center text-sm text-gray-400 hover:text-cyan-400">
+                                        <i class="fas fa-eye mr-1"></i> ${Math.floor(Math.random() * 9000) + 1000}
+                                    </button>
+                                    <button class="flex items-center text-sm text-gray-400 hover:text-cyan-400">
+                                        <i class="fas fa-comment mr-1"></i> ${Math.floor(Math.random() * 500)}
+                                    </button>
+                                    <button class="flex items-center text-sm text-gray-400 hover:text-cyan-400">
+                                        <i class="fas fa-share-alt mr-1"></i>
+                                    </button>
+                                </div>
+                                
+                                <a href="${article.url}" target="_blank" class="text-sm bg-cyan-600 hover:bg-cyan-700 px-4 py-1 rounded-lg transition-all flex items-center">
+                                    <span>Read</span>
+                                    <i class="fas fa-arrow-right ml-1 text-xs"></i>
+                                </a>
+                            </div>
+                        </div>
+                    `;
+                    
+                    articleContainer.appendChild(articleEl);
+                });
+                
+            } catch (error) {
+                loader.innerHTML = '<p class="text-red-400">Failed to load articles. Please try again later.</p>';
+            }
+        }
+        
+        // Load articles on page load
+        document.addEventListener('DOMContentLoaded', renderArticles);
+        
+        // Load more articles
+        document.querySelector('button:contains("Load More Articles")').addEventListener('click', renderArticles);
             const loader = document.createElement('div');
             loader.className = 'flex justify-center my-4';
             loader.innerHTML = '<i class="fas fa-circle-notch fa-spin text-2xl text-cyan-400"></i>';
@@ -531,6 +723,42 @@
             }, 1500);
         });
         
+        // Fetch trending topics
+        async function fetchTrendingTopics() {
+            const container = document.getElementById('trendingTopics');
+            
+            try {
+                const response = await fetch('https://newsapi.org/v2/top-headlines/sources?apiKey=' + NEWS_API_KEY);
+                const data = await response.json();
+                
+                container.innerHTML = '';
+                
+                // Show first 4 categories
+                data.sources.slice(0, 4).forEach(source => {
+                    const topicEl = document.createElement('div');
+                    topicEl.className = 'flex items-start group cursor-pointer';
+                    topicEl.innerHTML = `
+                        <div class="bg-blue-900 bg-opacity-50 rounded-lg p-2 mr-3 group-hover:bg-opacity-70 transition-all">
+                            <i class="fas fa-newspaper text-blue-300"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-medium group-hover:text-cyan-400 transition-all">${source.category}</h3>
+                            <p class="text-xs text-gray-400">${source.country} coverage</p>
+                        </div>
+                    `;
+                    container.appendChild(topicEl);
+                });
+            } catch (error) {
+                container.innerHTML = '<p class="text-red-400 text-sm">Failed to load trending topics</p>';
+            }
+        }
+        
+        // Initialize on load
+        document.addEventListener('DOMContentLoaded', () => {
+            renderArticles();
+            fetchTrendingTopics();
+        });
+        
         // Dynamic theme switcher (simplified)
         document.querySelector('button:contains("Dark/Light Mode")').addEventListener('click', function() {
             document.body.classList.toggle('gradient-bg');