Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NexusFeed - Your Personalized News Hub</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); | |
| } | |
| .article-card { | |
| transition: all 0.3s ease; | |
| transform-style: preserve-3d; | |
| } | |
| .article-card:hover { | |
| transform: translateY(-5px) rotateX(5deg); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3); | |
| } | |
| .glow { | |
| box-shadow: 0 0 15px rgba(100, 149, 237, 0.5); | |
| } | |
| .holographic { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .holographic::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: linear-gradient( | |
| to bottom right, | |
| rgba(255, 255, 255, 0.1) 0%, | |
| rgba(255, 255, 255, 0) 20%, | |
| rgba(255, 255, 255, 0) 80%, | |
| rgba(255, 255, 255, 0.1) 100% | |
| ); | |
| transform: rotate(30deg); | |
| pointer-events: none; | |
| } | |
| .typewriter { | |
| overflow: hidden; | |
| border-right: 2px solid #4cc9f0; | |
| white-space: nowrap; | |
| animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite; | |
| } | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: #4cc9f0 } | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 5px #4cc9f0, 0 0 10px #4cc9f0, 0 0 15px #4cc9f0; | |
| } | |
| .parallax { | |
| background-attachment: fixed; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen text-gray-100 font-sans"> | |
| <!-- App Container --> | |
| <div class="container mx-auto px-4 py-8 max-w-7xl"> | |
| <!-- Header with Floating Elements --> | |
| <header class="flex flex-col items-center mb-12 relative"> | |
| <div class="absolute -top-20 -left-20 w-40 h-40 bg-blue-500 rounded-full filter blur-3xl opacity-20 floating"></div> | |
| <div class="absolute -bottom-20 -right-20 w-40 h-40 bg-purple-500 rounded-full filter blur-3xl opacity-20 floating" style="animation-delay: 2s;"></div> | |
| <div class="flex items-center mb-6"> | |
| <i class="fas fa-atom text-4xl text-cyan-400 mr-3"></i> | |
| <h1 class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-blue-500"> | |
| Nexus<span class="neon-text">Feed</span> | |
| </h1> | |
| </div> | |
| <p class="text-lg text-center mb-8 max-w-2xl opacity-90"> | |
| <span class="typewriter">Your hyper-personalized news experience powered by AI</span> | |
| </p> | |
| <!-- User Profile & Settings --> | |
| <div class="flex items-center space-x-4 mb-8"> | |
| <div class="relative group"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-br from-cyan-400 to-blue-600 flex items-center justify-center cursor-pointer hover:glow transition-all"> | |
| <i class="fas fa-user text-white"></i> | |
| </div> | |
| <div class="absolute right-0 mt-2 w-48 bg-gray-800 rounded-lg shadow-xl z-10 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0"> | |
| <div class="py-1"> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700">Profile</a> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700">Settings</a> | |
| <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700">Sign out</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <button id="settingsBtn" class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg flex items-center transition-all"> | |
| <i class="fas fa-sliders-h mr-2 text-cyan-400"></i> | |
| <span>Customize Feed</span> | |
| </button> | |
| <!-- Settings Panel --> | |
| <div id="settingsPanel" class="absolute left-0 mt-2 w-64 bg-gray-800 rounded-lg shadow-xl z-10 p-4 hidden"> | |
| <h3 class="font-medium mb-3 text-cyan-400">Feed Preferences</h3> | |
| <div class="mb-4"> | |
| <label class="block text-sm mb-2">Interests</label> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-blue-900 rounded-full text-xs flex items-center"> | |
| Technology <button class="ml-1 text-gray-400 hover:text-white">×</button> | |
| </span> | |
| <span class="px-3 py-1 bg-blue-900 rounded-full text-xs flex items-center"> | |
| Science <button class="ml-1 text-gray-400 hover:text-white">×</button> | |
| </span> | |
| <span class="px-3 py-1 bg-blue-900 rounded-full text-xs flex items-center"> | |
| AI <button class="ml-1 text-gray-400 hover:text-white">×</button> | |
| </span> | |
| <button class="text-cyan-400 text-xs flex items-center"> | |
| <i class="fas fa-plus mr-1"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm mb-2">Reading Time</label> | |
| <select class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-sm"> | |
| <option>Quick Reads (1-3 min)</option> | |
| <option selected>Standard (3-10 min)</option> | |
| <option>Deep Dives (10+ min)</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-4 w-4 text-cyan-500" checked> | |
| <span class="ml-2 text-sm">Show multimedia content</span> | |
| </label> | |
| </div> | |
| <button class="w-full bg-cyan-600 hover:bg-cyan-700 text-white py-2 rounded-lg text-sm transition-all"> | |
| Apply Preferences | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Left Sidebar - Trending Topics --> | |
| <aside class="lg:col-span-1"> | |
| <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 backdrop-blur-sm border border-gray-700 holographic"> | |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-fire text-orange-400 mr-2"></i> | |
| <span>Trending Topics</span> | |
| </h2> | |
| <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> | |
| <div class="mt-6 pt-4 border-t border-gray-700"> | |
| <h3 class="text-sm font-medium mb-3">Your Reading Stats</h3> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>This week</span> | |
| <span>42 articles</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-1.5"> | |
| <div class="bg-gradient-to-r from-cyan-500 to-blue-600 h-1.5 rounded-full" style="width: 70%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 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 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> | |
| <h3 class="ml-3 font-medium">Nexus AI Assistant</h3> | |
| </div> | |
| <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 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 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> | |
| </div> | |
| </aside> | |
| <!-- Main Feed --> | |
| <section class="lg:col-span-2 space-y-6"> | |
| <!-- Feed Filters --> | |
| <div class="flex flex-wrap items-center justify-between bg-gray-800 bg-opacity-50 rounded-xl p-4 backdrop-blur-sm border border-gray-700"> | |
| <div class="flex space-x-2 mb-2 sm:mb-0"> | |
| <button class="px-3 py-1 bg-cyan-600 rounded-lg text-sm">For You</button> | |
| <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded-lg text-sm">Latest</button> | |
| <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded-lg text-sm">Bookmarked</button> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-sm mr-2">Sort by:</span> | |
| <select class="bg-gray-700 border border-gray-600 rounded px-3 py-1 text-sm"> | |
| <option>Relevance</option> | |
| <option>Newest</option> | |
| <option>Popular</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-- Article Cards --> | |
| <article class="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"> | |
| <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">TechChronicle • 2h ago</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"> | |
| Quantum Supremacy Achieved: New Processor Solves Problem in 200 Seconds | |
| </h2> | |
| <p class="text-gray-300 mb-4"> | |
| Researchers at Quantum Labs have demonstrated a quantum processor that solved a problem in 200 seconds that would take the world's fastest supercomputer 10,000 years... | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-2 py-1 bg-blue-900 bg-opacity-50 rounded-full text-xs">Quantum Computing</span> | |
| <span class="px-2 py-1 bg-blue-900 bg-opacity-50 rounded-full text-xs">Physics</span> | |
| <span class="px-2 py-1 bg-blue-900 bg-opacity-50 rounded-full text-xs">Breakthrough</span> | |
| </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> 4.2K | |
| </button> | |
| <button class="flex items-center text-sm text-gray-400 hover:text-cyan-400"> | |
| <i class="fas fa-comment mr-1"></i> 156 | |
| </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> | |
| <button 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> | |
| </button> | |
| </div> | |
| </div> | |
| </article> | |
| <article class="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"> | |
| <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-purple-900 flex items-center justify-center mr-2"> | |
| <i class="fas fa-brain text-purple-300 text-xs"></i> | |
| </div> | |
| <span class="text-sm">AI Frontiers • 5h ago</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"> | |
| GPT-5: Leaked Details Suggest Human-Level Reasoning Capabilities | |
| </h2> | |
| <p class="text-gray-300 mb-4"> | |
| Internal documents suggest the next generation of OpenAI's language model may achieve human-level reasoning on certain benchmarks, with potential release in early 2024... | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-2 py-1 bg-purple-900 bg-opacity-50 rounded-full text-xs">Artificial Intelligence</span> | |
| <span class="px-2 py-1 bg-purple-900 bg-opacity-50 rounded-full text-xs">LLMs</span> | |
| <span class="px-2 py-1 bg-purple-900 bg-opacity-50 rounded-full text-xs">OpenAI</span> | |
| </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> 8.7K | |
| </button> | |
| <button class="flex items-center text-sm text-gray-400 hover:text-cyan-400"> | |
| <i class="fas fa-comment mr-1"></i> 432 | |
| </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> | |
| <button 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> | |
| </button> | |
| </div> | |
| </div> | |
| </article> | |
| <article class="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"> | |
| <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-green-900 flex items-center justify-center mr-2"> | |
| <i class="fas fa-bolt text-green-300 text-xs"></i> | |
| </div> | |
| <span class="text-sm">Energy Pulse • 8h ago</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"> | |
| Breakthrough in Solid-State Batteries Could Double EV Range | |
| </h2> | |
| <p class="text-gray-300 mb-4"> | |
| A team at MIT has developed a new solid-state battery design that promises to double the energy density of current lithium-ion batteries while being safer and charging faster... | |
| </p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="px-2 py-1 bg-green-900 bg-opacity-50 rounded-full text-xs">Battery Tech</span> | |
| <span class="px-2 py-1 bg-green-900 bg-opacity-50 rounded-full text-xs">Electric Vehicles</span> | |
| <span class="px-2 py-1 bg-green-900 bg-opacity-50 rounded-full text-xs">Clean Energy</span> | |
| </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> 6.1K | |
| </button> | |
| <button class="flex items-center text-sm text-gray-400 hover:text-cyan-400"> | |
| <i class="fas fa-comment mr-1"></i> 289 | |
| </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> | |
| <button 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> | |
| </button> | |
| </div> | |
| </div> | |
| </article> | |
| <!-- Load More Button --> | |
| <div class="flex justify-center mt-6"> | |
| <button class="px-6 py-2 bg-gray-800 hover:bg-gray-700 border border-gray-700 rounded-lg flex items-center transition-all"> | |
| <i class="fas fa-sync-alt mr-2"></i> | |
| <span>Load More Articles</span> | |
| </button> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Floating Action Button --> | |
| <div class="fixed bottom-8 right-8"> | |
| <button id="fab" class="w-14 h-14 rounded-full bg-gradient-to-br from-cyan-500 to-blue-600 shadow-lg flex items-center justify-center text-white hover:glow transition-all"> | |
| <i class="fas fa-magic text-xl"></i> | |
| </button> | |
| <!-- FAB Menu --> | |
| <div id="fabMenu" class="absolute bottom-16 right-0 w-56 bg-gray-800 rounded-lg shadow-xl p-2 hidden"> | |
| <button class="w-full flex items-center px-3 py-2 text-sm hover:bg-gray-700 rounded"> | |
| <i class="fas fa-search mr-2 text-cyan-400"></i> | |
| <span>Search Articles</span> | |
| </button> | |
| <button class="w-full flex items-center px-3 py-2 text-sm hover:bg-gray-700 rounded"> | |
| <i class="fas fa-filter mr-2 text-cyan-400"></i> | |
| <span>Advanced Filters</span> | |
| </button> | |
| <button class="w-full flex items-center px-3 py-2 text-sm hover:bg-gray-700 rounded"> | |
| <i class="fas fa-moon mr-2 text-cyan-400"></i> | |
| <span>Dark/Light Mode</span> | |
| </button> | |
| <button class="w-full flex items-center px-3 py-2 text-sm hover:bg-gray-700 rounded"> | |
| <i class="fas fa-cog mr-2 text-cyan-400"></i> | |
| <span>Settings</span> | |
| </button> | |
| </div> | |
| </div> | |
| </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'); | |
| panel.classList.toggle('hidden'); | |
| }); | |
| // Close Settings Panel when clicking outside | |
| document.addEventListener('click', function(event) { | |
| const settingsBtn = document.getElementById('settingsBtn'); | |
| const settingsPanel = document.getElementById('settingsPanel'); | |
| if (!settingsBtn.contains(event.target) && !settingsPanel.contains(event.target)) { | |
| settingsPanel.classList.add('hidden'); | |
| } | |
| }); | |
| // Toggle FAB Menu | |
| document.getElementById('fab').addEventListener('click', function() { | |
| const fabMenu = document.getElementById('fabMenu'); | |
| fabMenu.classList.toggle('hidden'); | |
| }); | |
| // Close FAB Menu when clicking outside | |
| document.addEventListener('click', function(event) { | |
| const fab = document.getElementById('fab'); | |
| const fabMenu = document.getElementById('fabMenu'); | |
| if (!fab.contains(event.target) && !fabMenu.contains(event.target)) { | |
| fabMenu.classList.add('hidden'); | |
| } | |
| }); | |
| // Article Card Click Effect | |
| document.querySelectorAll('.article-card').forEach(card => { | |
| card.addEventListener('click', function(e) { | |
| // Don't trigger if clicking on interactive elements | |
| if (e.target.tagName === 'BUTTON' || e.target.tagName === 'I' || e.target.tagName === 'A') { | |
| return; | |
| } | |
| // In a real app, this would navigate to the article | |
| alert('Navigating to article: ' + this.querySelector('h2').textContent); | |
| }); | |
| }); | |
| // 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>'; | |
| this.parentNode.insertBefore(loader, this); | |
| // Simulate network delay | |
| setTimeout(() => { | |
| loader.remove(); | |
| // In a real app, this would append new articles | |
| alert('More articles would be loaded here in a real application'); | |
| }, 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'); | |
| document.body.classList.toggle('bg-gray-100'); | |
| document.body.classList.toggle('text-gray-100'); | |
| document.body.classList.toggle('text-gray-800'); | |
| alert('Theme would switch between dark/light modes in a real application'); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=flen-crypto/nexusfeed" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |