Spaces:

flitrx
/

autonews

Running

App Files Files Community

flitrx commited on May 25, 2025

Commit

294e3c7

verified ·

1 Parent(s): 9a61b83

Update index.html

Browse files

Files changed (1) hide show

index.html +347 -467

index.html CHANGED Viewed

@@ -3,53 +3,9 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>NEXUS | Futuristic Tech News</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">
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        quantumBlue: '#00e1ff',
-                        neonPink: '#ff36fc',
-                        matrixGreen: '#00ff9d',
-                        cyberPurple: '#a600ff',
-                        hologramTeal: '#00ffcc',
-                        voidBlack: '#050510',
-                        spaceGray: '#1a1a2e',
-                        uiGray: '#2a2a3a',
-                        uiLight: '#e0e0ff'
-                    },
-                    fontFamily: {
-                        'sans': ['"Rajdhani"', 'sans-serif'],
-                        'mono': ['"Space Mono"', 'monospace'],
-                        'display': ['"Orbitron"', 'sans-serif']
-                    },
-                    animation: {
-                        'glow': 'glow 2s ease-in-out infinite alternate',
-                        'float': 'float 6s ease-in-out infinite',
-                        'text-shine': 'text-shine 3s ease-in-out infinite alternate',
-                        'pulse-slow': 'pulse 5s infinite'
-                    },
-                    keyframes: {
-                        glow: {
-                            '0%': { 'box-shadow': '0 0 5px rgba(0, 225, 255, 0.3)' },
-                            '100%': { 'box-shadow': '0 0 20px rgba(0, 225, 255, 0.5)' }
-                        },
-                        float: {
-                            '0%, 100%': { transform: 'translateY(0)' },
-                            '50%': { transform: 'translateY(-10px)' }
-                        },
-                        'text-shine': {
-                            '0%': { 'background-position': '0% 50%' },
-                            '100%': { 'background-position': '100% 50%' }
-                        }
-                    }
-                }
-            }
-        }
-    </script>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Rajdhani:wght@300;400;500;600;700&display=swap');
@@ -59,6 +15,7 @@
             min-height: 100vh;
             position: relative;
             overflow-x: hidden;
         }
         body::before {
@@ -197,247 +154,156 @@
             pointer-events: none;
             z-index: -1;
         }
     </style>
 </head>
-<body class="font-sans">
-    <!-- Floating elements -->
-    <div class="fixed top-1/4 left-10 w-3 h-3 rounded-full bg-quantumBlue opacity-30 animate-float" style="animation-delay: 0s;"></div>
-    <div class="fixed top-1/3 right-20 w-4 h-4 rounded-full bg-neonPink opacity-30 animate-float" style="animation-delay: 1s;"></div>
-    <div class="fixed bottom-1/4 left-1/4 w-5 h-5 rounded-full bg-cyberPurple opacity-30 animate-float" style="animation-delay: 2s;"></div>
     <!-- Header -->
-    <header class="bg-voidBlack border-b border-uiGray/20 sticky top-0 z-50">
-        <div class="container mx-auto px-6 py-4">
-            <div class="flex flex-col md:flex-row justify-between items-center">
-                <div class="flex items-center mb-4 md:mb-0">
-                    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-quantumBlue to-cyberPurple flex items-center justify-center mr-3">
-                        <i class="fas fa-satellite text-white text-lg"></i>
                     </div>
-                    <h1 class="text-3xl font-bold font-display tracking-tighter">
-                        <span class="gradient-text">NEXUS</span>
-                    </h1>
                 </div>
-                <nav class="hidden md:flex space-x-6">
-                    <a href="#" class="text-uiLight hover:text-quantumBlue transition font-medium">HOME</a>
-                    <a href="#" class="text-uiLight hover:text-quantumBlue transition font-medium">TECH</a>
-                    <a href="#" class="text-uiLight hover:text-quantumBlue transition font-medium">AI</a>
-                    <a href="#" class="text-uiLight hover:text-quantumBlue transition font-medium">CYBER</a>
-                    <a href="#" class="text-uiLight hover:text-quantumBlue transition font-medium">SPACE</a>
-                </nav>
-                <div class="flex items-center space-x-4 mt-4 md:mt-0">
-                    <button class="px-4 py-2 rounded-md bg-uiGray/50 text-uiLight hover:bg-uiGray/70 transition font-mono text-sm cyber-button">
-                        <i class="fas fa-user-astronaut mr-2"></i> SIGN IN
-                    </button>
                 </div>
             </div>
         </div>
     </header>
     <!-- Main Content -->
-    <main class="container mx-auto px-6 py-8">
-        <!-- Hero Section -->
-        <section class="mb-12 grid-pattern rounded-xl overflow-hidden">
-            <div class="h-96 bg-gradient-to-br from-voidBlack to-spaceGray/80 relative flex items-center justify-center">
-                <div class="absolute inset-0 flex items-center justify-center">
-                    <div class="w-full h-full opacity-20" style="background: radial-gradient(circle, rgba(0,225,255,0.3) 0%, transparent 70%);"></div>
-                </div>
-                <div class="relative z-10 text-center px-6 max-w-4xl">
-                    <h2 class="text-4xl md:text-5xl font-display font-bold mb-4 tracking-tight">
-                        <span class="gradient-text">THE FUTURE</span> IN REAL-TIME
-                    </h2>
-                    <p class="text-uiLight/80 mb-8 text-lg font-sans">
-                        Cutting-edge technology news from across the quantum spectrum.
-                        Stay ahead with our neural network-curated feed.
-                    </p>
-                    <div class="relative max-w-xl mx-auto">
-                        <input type="text" placeholder="SEARCH THE NEXUS..."
-                               class="w-full px-6 py-3 rounded-full bg-spaceGray/80 text-uiLight placeholder-uiLight/50 border border-uiGray/30 focus:outline-none focus:ring-1 focus:ring-quantumBlue focus:bg-spaceGray font-mono tracking-wider">
-                        <button class="absolute right-3 top-3 text-uiLight hover:text-quantumBlue transition">
-                            <i class="fas fa-search"></i>
                         </button>
                     </div>
-                </div>
-            </div>
-        </section>
-        <div class="flex flex-col lg:flex-row gap-8">
-            <!-- Left Column - News Feed -->
-            <div class="w-full lg:w-2/3">
-                <!-- News Tabs -->
-                <div class="flex border-b border-uiGray/20 mb-6">
-                    <button class="px-4 py-3 border-b-2 border-quantumBlue text-quantumBlue font-medium">LATEST</button>
-                    <button class="px-4 py-3 text-uiLight/70 hover:text-uiLight transition">TRENDING</button>
-                    <button class="px-4 py-3 text-uiLight/70 hover:text-uiLight transition">AI</button>
-                    <button class="px-4 py-3 text-uiLight/70 hover:text-uiLight transition">QUANTUM</button>
-                    <button class="px-4 py-3 text-uiLight/70 hover:text-uiLight transition">CYBER</button>
-                </div>
-                <!-- News Loading Skeleton -->
-                <div id="loading-skeleton" class="space-y-6">
-                    <div class="ui-panel rounded-lg p-6 animate-pulse">
-                        <div class="h-6 bg-uiGray/30 rounded w-3/4 mb-4"></div>
-                        <div class="h-4 bg-uiGray/20 rounded w-full mb-2"></div>
-                        <div class="h-4 bg-uiGray/20 rounded w-5/6 mb-2"></div>
-                        <div class="h-4 bg-uiGray/20 rounded w-4/6 mb-4"></div>
-                        <div class="h-3 bg-uiGray/20 rounded w-1/4"></div>
-                    </div>
-                    <div class="ui-panel rounded-lg p-6 animate-pulse">
-                        <div class="h-6 bg-uiGray/30 rounded w-3/4 mb-4"></div>
-                        <div class="h-4 bg-uiGray/20 rounded w-full mb-2"></div>
-                        <div class="h-4 bg-uiGray/20 rounded w-5/6 mb-2"></div>
-                        <div class="h-4 bg-uiGray/20 rounded w-4/6 mb-4"></div>
-                        <div class="h-3 bg-uiGray/20 rounded w-1/4"></div>
                     </div>
                 </div>
-                <!-- News Container -->
-                <div id="news-container" class="space-y-6 hidden">
-                    <!-- News cards will be inserted here by JavaScript -->
-                </div>
-                <div class="mt-8 flex justify-center">
-                    <button id="load-more" class="px-8 py-3 bg-gradient-to-r from-cyberPurple to-quantumBlue text-white rounded-md hover:opacity-90 transition-all duration-300 font-mono cyber-button">
-                        <i class="fas fa-chevron-down mr-2"></i> LOAD MORE
-                    </button>
-                </div>
             </div>
-            <!-- Right Column - Sidebar -->
-            <div class="w-full lg:w-1/3">
-                <!-- Trending Now -->
-                <div class="ui-panel rounded-lg p-6 mb-6">
-                    <h3 class="text-lg font-bold font-mono text-quantumBlue mb-4 tracking-wider flex items-center">
-                        <i class="fas fa-bolt mr-2"></i> TRENDING NOW
-                    </h3>
-                    <div class="space-y-4" id="trending-topics">
-                        <div class="flex justify-between items-center animate-pulse">
-                            <div class="flex items-center">
-                                <div class="w-8 h-8 bg-uiGray/30 rounded-full mr-3"></div>
-                                <div class="h-4 bg-uiGray/20 rounded w-24"></div>
-                            </div>
-                            <div class="h-4 bg-uiGray/20 rounded w-12"></div>
-                        </div>
-                        <div class="flex justify-between items-center animate-pulse">
-                            <div class="flex items-center">
-                                <div class="w-8 h-8 bg-uiGray/30 rounded-full mr-3"></div>
-                                <div class="h-4 bg-uiGray/20 rounded w-24"></div>
-                            </div>
-                            <div class="h-4 bg-uiGray/20 rounded w-12"></div>
                         </div>
                     </div>
-                </div>
-                <!-- Tech Brief -->
-                <div class="ui-panel rounded-lg p-6 mb-6">
-                    <h3 class="text-lg font-bold font-mono text-quantumBlue mb-4 tracking-wider flex items-center">
-                        <i class="fas fa-microchip mr-2"></i> TECH BRIEF
-                    </h3>
-                    <div class="space-y-4">
-                        <div class="p-4 bg-spaceGray/50 rounded-md border-l-4 border-quantumBlue">
-                            <div class="flex items-start">
-                                <div class="flex-shrink-0 mt-1">
-                                    <div class="w-3 h-3 rounded-full bg-quantumBlue animate-pulse-slow"></div>
-                                </div>
-                                <div class="ml-3">
-                                    <p class="text-sm font-mono text-uiLight">QUANTUM COMPUTING BREAKTHROUGH AT GOOGLE</p>
-                                    <p class="text-xs text-uiLight/50 mt-1">12 MINUTES AGO</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="p-4 bg-spaceGray/50 rounded-md border-l-4 border-neonPink">
-                            <div class="flex items-start">
-                                <div class="flex-shrink-0 mt-1">
-                                    <div class="w-3 h-3 rounded-full bg-neonPink animate-pulse-slow"></div>
-                                </div>
-                                <div class="ml-3">
-                                    <p class="text-sm font-mono text-uiLight">APPLE ANNOUNCES NEURAL INTERFACE RESEARCH</p>
-                                    <p class="text-xs text-uiLight/50 mt-1">38 MINUTES AGO</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="p-4 bg-spaceGray/50 rounded-md border-l-4 border-matrixGreen">
-                            <div class="flex items-start">
-                                <div class="flex-shrink-0 mt-1">
-                                    <div class="w-3 h-3 rounded-full bg-matrixGreen animate-pulse-slow"></div>
-                                </div>
-                                <div class="ml-3">
-                                    <p class="text-sm font-mono text-uiLight">SPACEX LAUNCHES NEXT-GEN STARLINK SATELLITES</p>
-                                    <p class="text-xs text-uiLight/50 mt-1">1 HOUR AGO</p>
-                                </div>
-                            </div>
                         </div>
                     </div>
-                </div>
-                <!-- Newsletter -->
-                <div class="ui-panel rounded-lg p-6 bg-gradient-to-br from-spaceGray/80 to-voidBlack/80">
-                    <h3 class="text-lg font-bold font-mono text-quantumBlue mb-2 tracking-wider">
-                        <i class="fas fa-envelope mr-2"></i> NEXUS NEWSLETTER
-                    </h3>
-                    <p class="mb-4 text-uiLight/70 text-sm">Get the future delivered to your inbox</p>
-                    <form class="space-y-3">
-                        <input type="email" placeholder="YOUR@EMAIL.COM"
-                               class="w-full px-4 py-2 rounded bg-spaceGray/70 text-uiLight placeholder-uiLight/50 border border-uiGray/30 focus:outline-none focus:ring-1 focus:ring-quantumBlue font-mono text-sm tracking-wider">
-                        <button type="submit" class="w-full px-4 py-2 bg-gradient-to-r from-quantumBlue/90 to-cyberPurple/90 text-white rounded-md font-medium hover:opacity-90 transition font-mono text-sm tracking-wider cyber-button">
-                            <i class="fas fa-paper-plane mr-2"></i> SUBSCRIBE
                         </button>
-                    </form>
                 </div>
             </div>
         </div>
     </main>
     <!-- Footer -->
-    <footer class="bg-voidBlack border-t border-uiGray/20 py-12 mt-12">
-        <div class="container mx-auto px-6">
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
-                <div>
-                    <h4 class="text-xl font-bold font-display text-uiLight mb-4 tracking-tighter">
-                        <span class="gradient-text">NEXUS</span>
-                    </h4>
-                    <p class="text-uiLight/60 text-sm font-sans">The premier source for tomorrow's technology, today.</p>
-                    <div class="flex space-x-4 mt-4">
-                        <a href="#" class="text-uiLight/60 hover:text-quantumBlue transition"><i class="fab fa-twitter"></i></a>
-                        <a href="#" class="text-uiLight/60 hover:text-quantumBlue transition"><i class="fab fa-linkedin"></i></a>
-                        <a href="#" class="text-uiLight/60 hover:text-quantumBlue transition"><i class="fab fa-github"></i></a>
-                        <a href="#" class="text-uiLight/60 hover:text-quantumBlue transition"><i class="fab fa-youtube"></i></a>
-                    </div>
-                </div>
-                <div>
-                    <h4 class="text-sm font-bold font-mono text-quantumBlue mb-4 tracking-wider">EXPLORE</h4>
-                    <ul class="space-y-2">
-                        <li><a href="#" class="text-uiLight/60 hover:text-uiLight transition text-sm">Technology</a></li>
-                        <li><a href="#" class="text-uiLight/60 hover:text-uiLight transition text-sm">Artificial Intelligence</a></li>
-                        <li><a href="#" class="text-uiLight/60 hover:text-uiLight transition text-sm">Quantum Computing</a></li>
-                        <li><a href="#" class="text-uiLight/60 hover:text-uiLight transition text-sm">Cybersecurity</a></li>
-                    </ul>
-                </div>
-                <div>
-                    <h4 class="text-sm font-bold font-mono text-quantumBlue mb-4 tracking-wider">COMPANY</h4>
-                    <ul class="space-y-2">
-                        <li><a href="#" class="text-uiLight/60 hover:text-uiLight transition text-sm">About</a></li>
-                        <li><a href="#" class="text-uiLight/60 hover:text-uiLight transition text-sm">Careers</a></li>
-                        <li><a href="#" class="text-uiLight/60 hover:text-uiLight transition text-sm">Privacy</a></li>
-                        <li><a href="#" class="text-uiLight/60 hover:text-uiLight transition text-sm">Terms</a></li>
-                    </ul>
-                </div>
-                <div>
-                    <h4 class="text-sm font-bold font-mono text-quantumBlue mb-4 tracking-wider">CONTACT</h4>
-                    <ul class="space-y-2">
-                        <li class="text-uiLight/60 text-sm">hello@nexus.tech</li>
-                        <li class="text-uiLight/60 text-sm">+1 (555) 123-4567</li>
-                        <li class="text-uiLight/60 text-sm">San Francisco, CA</li>
-                    </ul>
                 </div>
-            </div>
-            <div class="border-t border-uiGray/20 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
-                <p class="text-uiLight/50 text-xs mb-4 md:mb-0">© 2023 NEXUS TECHNOLOGIES. ALL RIGHTS RESERVED.</p>
                 <div class="flex space-x-4">
-                    <a href="#" class="text-uiLight/50 hover:text-uiLight transition text-xs">Privacy Policy</a>
-                    <a href="#" class="text-uiLight/50 hover:text-uiLight transition text-xs">Terms of Service</a>
-                    <a href="#" class="text-uiLight/50 hover:text-uiLight transition text-xs">Cookies</a>
                 </div>
             </div>
         </div>
@@ -448,17 +314,19 @@
         const NEWSAPI_API_KEY = 'f764fe522436442d9bdafbae241d7b63';
         const MARKETAUX_API_TOKEN = 'x7do5W51vWCggI5OC0qDPYYPRRRBdpsZuydOkfPq';
         // API endpoints for each category
         const API_ENDPOINTS = {
             all: [
                 'https://api.marketaux.com/v1/news/all?industries=Technology&filter_entities=true&limit=10&api_token=' + MARKETAUX_API_TOKEN,
                 'https://newsapi.org/v2/everything?q=bitcoin&from=2025-04-23&sortBy=publishedAt&apiKey=' + NEWSAPI_API_KEY,
                 'https://newsapi.org/v2/everything?q=apple&from=2025-05-22&to=2025-05-22&sortBy=popularity&apiKey=' + NEWSAPI_API_KEY,
-                'https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=' + NEWSAPI_API_KEY,
-                'https://newsapi.org/v2/everything?q=energy&from=2025-05-22&to=2025-05-22&sortBy=popularity&apiKey=' + NEWSAPI_API_KEY,
-                'https://newsapi.org/v2/everything?q=solar&from=2025-05-22&to=2025-05-22&sortBy=popularity&apiKey=' + NEWSAPI_API_KEY,
-                'https://newsapi.org/v2/everything?q=wind+solar&from=2025-05-22&to=2025-05-22&sortBy=popularity&apiKey=' + NEWSAPI_API_KEY,
-                'https://newsapi.org/v2/everything?q=verizonORsprintORt-mobileORmetroOR5gORwireless&from=2025-05-22&to=2025-05-22&sortBy=popularity&apiKey=' + NEWSAPI_API_KEY
             ],
             technology: [
                 'https://newsapi.org/v2/everything?q=technology&from=2025-04-23&sortBy=publishedAt&apiKey=' + NEWSAPI_API_KEY,
@@ -494,229 +362,261 @@
             ]
         };
-        // State management
-        let currentNewsPage = 1;
-        let selectedCategory = 'all';
         document.addEventListener('DOMContentLoaded', function() {
-            // Initial data load
-            loadAllData();
-            // Event listeners
-            document.getElementById('load-more').addEventListener('click', loadMoreNews);
         });
-        async function loadAllData() {
-            try {
-                await Promise.all([
-                    fetchNews(),
-                    fetchTrendingTopics()
-                ]);
-            } catch (error) {
-                console.error('Error loading data:', error);
-                showError('SYSTEM ERROR: FAILED TO LOAD DATA. PLEASE TRY AGAIN LATER.');
-            }
         }
-        async function loadMoreNews() {
-            const btn = document.getElementById('load-more');
-            const originalText = btn.innerHTML;
-            btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> LOADING...';
-            btn.disabled = true;
-            currentNewsPage++;
-            try {
-                await fetchNews(false, true); // false = not refresh, true = append
-            } catch (error) {
-                console.error('Error loading more news:', error);
-                showError('NETWORK ERROR: FAILED TO LOAD MORE DATA.');
-                currentNewsPage--; // Revert page increment on failure
             }
-            btn.innerHTML = originalText;
-            btn.disabled = false;
         }
-        // API Fetch Functions
-        async function fetchNews(refresh = false, append = false) {
-            try {
-                const endpoints = API_ENDPOINTS[selectedCategory];
-                let allArticles = [];
-                // Fetch from all endpoints for the selected category
-                for (const endpoint of endpoints) {
-                    let url = endpoint;
-                    // Add pagination for Marketaux API
-                    if (url.includes('marketaux.com')) {
-                        url += `&page=${currentNewsPage}`;
-                        // Use current date for published_after
-                        const now = new Date();
-                        const oneDayAgo = new Date(now.getTime() - (24 * 60 * 60 * 1000));
-                        const isoString = oneDayAgo.toISOString().split('.')[0];
-                        url += `&published_after=${isoString}`;
-                    }
-                    const response = await fetch(url);
-                    const data = await response.json();
-                    if (data) {
-                        // Handle different API response formats
-                        if (data.data) {
-                            // Marketaux format
-                            allArticles = [...allArticles, ...data.data];
-                        } else if (data.articles) {
-                            // NewsAPI format
-                            allArticles = [...allArticles, ...data.articles.map(article => ({
-                                title: article.title,
-                                description: article.description,
-                                url: article.url,
-                                image_url: article.urlToImage,
-                                published_at: article.publishedAt,
-                                source: article.source?.name
-                            }))];
-                        }
-                    }
-                }
-                // Shuffle articles for variety
-                allArticles = shuffleArray(allArticles);
-                if (allArticles.length > 0) {
-                    updateNewsUI(allArticles, refresh, append);
-                }
-            } catch (error) {
-                console.error('Error fetching news:', error);
-                throw error;
-            }
         }
-        // Helper function to shuffle array
-        function shuffleArray(array) {
-            const newArray = [...array];
-            for (let i = newArray.length - 1; i > 0; i--) {
-                const j = Math.floor(Math.random() * (i + 1));
-                [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
-            }
-            return newArray;
         }
-        async function fetchTrendingTopics() {
             try {
-                // For demo purposes, we'll use a static list
-                const trendingTopics = [
-                    { name: "AI ADVANCEMENTS", mentions: 1245 },
-                    { name: "QUANTUM COMPUTING", mentions: 876 },
-                    { name: "5G ROLLOUT", mentions: 754 },
-                    { name: "METAVERSE", mentions: 689 },
-                    { name: "CYBERSECURITY", mentions: 632 }
-                ];
-                updateTrendingTopicsUI(trendingTopics);
             } catch (error) {
-                console.error('Error fetching trending topics:', error);
-                throw error;
             }
         }
-        // UI Update Functions
-        function updateTrendingTopicsUI(topics) {
-            const trendingContainer = document.getElementById('trending-topics');
-            trendingContainer.innerHTML = '';
-            topics.slice(0, 5).forEach(topic => {
-                const topicElement = document.createElement('div');
-                topicElement.className = 'flex justify-between items-center';
-                topicElement.innerHTML = `
-                    <div class="flex items-center">
-                        <div class="w-8 h-8 rounded-full bg-gradient-to-br from-quantumBlue/20 to-neonPink/20 text-quantumBlue flex items-center justify-center mr-3 text-xs font-mono">
-                            ${Math.floor(Math.random() * 9) + 1}
-                        </div>
-                        <span class="font-mono text-sm text-uiLight">${topic.name}</span>
-                    </div>
-                    <div class="text-right">
-                        <span class="text-xs font-mono text-uiLight/60">${topic.mentions.toLocaleString()}</span>
-                    </div>
-                `;
-                trendingContainer.appendChild(topicElement);
             });
         }
-        function updateNewsUI(articles, refresh, append) {
-            const newsContainer = document.getElementById('news-container');
-            // Clear container if refreshing
-            if (refresh) {
                 newsContainer.innerHTML = '';
             }
-            // Hide loading skeleton
-            document.getElementById('loading-skeleton').classList.add('hidden');
-            // Show news container if it's hidden
-            if (!append) {
-                newsContainer.classList.remove('hidden');
-            }
-            // Add articles to container
-            articles.forEach(article => {
                 const newsCard = document.createElement('div');
-                newsCard.className = 'news-card ui-panel rounded-lg p-6';
-                // Simple sentiment analysis based on title keywords
-                let sentimentColor = 'text-quantumBlue';
-                let sentimentIcon = 'fa-newspaper';
-                const title = article.title ? article.title.toUpperCase() : '';
-                if (title.includes('BREAKTHROUGH') || title.includes('INNOVATIVE') || title.includes('SUCCESS') ||
-                    title.includes('GROWTH') || title.includes('LAUNCH') || title.includes('RECORD')) {
-                    sentimentColor = 'text-matrixGreen';
-                    sentimentIcon = 'fa-arrow-up';
-                } else if (title.includes('HACK') || title.includes('BREACH') || title.includes('LAYOFF') ||
-                          title.includes('DECLINE') || title.includes('WARNING') || title.includes('ISSUE') ||
-                          title.includes('PROBLEM') || title.includes('FAILURE')) {
-                    sentimentColor = 'text-neonPink';
-                    sentimentIcon = 'fa-arrow-down';
-                }
                 // Format date
-                const date = article.published_at ? new Date(article.published_at) : new Date();
                 const formattedDate = date.toLocaleDateString('en-US', {
                     year: 'numeric',
                     month: 'short',
-                    day: 'numeric'
-                }).toUpperCase();
-                // Get source name
-                const sourceName = article.source ? article.source.toUpperCase() : 'UNKNOWN SOURCE';
                 // Create card HTML
                 newsCard.innerHTML = `
-                    <div class="flex flex-col md:flex-row gap-6">
-                        <div class="md:w-1/3">
-                            <div class="w-full h-40 bg-uiGray/30 rounded-lg overflow-hidden">
-                                <img src="${article.image_url || 'https://via.placeholder.com/300x200/1a1a2e/00e1ff?text=NEXUS'}"
-                                     alt="${article.title || 'NEWS IMAGE'}"
-                                     class="w-full h-full object-cover">
-                            </div>
                         </div>
-                        <div class="md:w-2/3">
-                            <div class="flex justify-between items-start mb-2">
-                                <h3 class="text-xl font-medium font-sans text-uiLight">${article.title || 'NO TITLE AVAILABLE'}</h3>
-                                <i class="fas ${sentimentIcon} ${sentimentColor} text-lg"></i>
-                            </div>
-                            <p class="text-uiLight/70 mb-4 text-sm">${article.description || 'NO DESCRIPTION AVAILABLE.'}</p>
-                            <div class="flex justify-between items-center text-xs font-mono tracking-wider text-uiLight/50">
-                                <span>${sourceName} <span class="mx-2">•</span> ${formattedDate}</span>
-                                <a href="${article.url || '#'}" target="_blank" rel="noopener noreferrer"
-                                   class="text-quantumBlue hover:text-uiLight transition flex items-center">
-                                    READ <i class="fas fa-external-link-alt ml-1 text-xs"></i>
-                                </a>
                             </div>
                         </div>
                     </div>
                 `;
@@ -724,33 +624,13 @@
                 newsContainer.appendChild(newsCard);
             });
-            // Hide load more button if no more articles
-            if (articles.length < 10) {
-                document.getElementById('load-more').classList.add('hidden');
             } else {
-                document.getElementById('load-more').classList.remove('hidden');
             }
         }
-        function showError(message) {
-            // Hide loading states
-            document.getElementById('loading-skeleton').classList.add('hidden');
-            // Show error message
-            const errorElement = document.createElement('div');
-            errorElement.className = 'ui-panel rounded-lg p-6';
-            errorElement.innerHTML = `
-                <div class="flex items-center text-quantumBlue font-mono tracking-wider">
-                    <i class="fas fa-exclamation-triangle mr-2"></i>
-                    <span>${message}</span>
-                </div>
-            `;
-            const newsContainer = document.getElementById('news-container');
-            newsContainer.innerHTML = '';
-            newsContainer.appendChild(errorElement);
-            newsContainer.classList.remove('hidden');
-        }
     </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=flitrx/autonews" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TechPulse - Automated Tech News Aggregator</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>
         @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Rajdhani:wght@300;400;500;600;700&display=swap');
             min-height: 100vh;
             position: relative;
             overflow-x: hidden;
+            font-family: 'Rajdhani', sans-serif;
         }
         body::before {
             pointer-events: none;
             z-index: -1;
         }
+        .category-btn {
+            transition: all 0.3s ease;
+        }
+        .category-btn:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 15px rgba(0, 225, 255, 0.5);
+        }
+        .loading-spinner {
+            border: 3px solid rgba(0, 225, 255, 0.3);
+            border-radius: 50%;
+            border-top: 3px solid #00e1ff;
+            width: 30px;
+            height: 30px;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .source-tag {
+            background: rgba(0, 225, 255, 0.1);
+            border-left: 3px solid #00e1ff;
+        }
+        .date-badge {
+            background: rgba(255, 54, 252, 0.1);
+            border-left: 3px solid #ff36fc;
+        }
     </style>
 </head>
+<body class="min-h-screen flex flex-col">
     <!-- Header -->
+    <header class="holographic-effect">
+        <div class="container mx-auto px-4 py-6">
+            <div class="flex justify-between items-center">
+                <div class="flex items-center space-x-4">
+                    <div class="ui-panel px-6 py-3 rounded-lg">
+                        <h1 class="text-3xl font-bold gradient-text font-['Orbitron']">TechPulse</h1>
                     </div>
+                    <p class="text-sm text-gray-400 hidden md:block">Your automated tech news aggregator</p>
                 </div>
+                <div class="ui-panel px-4 py-2 rounded-lg">
+                    <div class="marquee">
+                        <span class="text-sm">
+                            <i class="fas fa-bolt text-yellow-400 mr-2"></i> Latest in Tech: AI advancements • Quantum computing breakthroughs • New smartphone releases • Cybersecurity threats • Cloud computing innovations • Blockchain developments • AR/VR trends • 5G expansion • Semiconductor news • Robotics progress
+                        </span>
+                    </div>
                 </div>
             </div>
         </div>
     </header>
     <!-- Main Content -->
+    <main class="flex-grow container mx-auto px-4 pb-12">
+        <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
+            <!-- Sidebar - Categories -->
+            <div class="lg:col-span-1">
+                <div class="ui-panel p-6 rounded-xl grid-pattern sticky top-6">
+                    <h2 class="text-xl font-bold mb-4 gradient-text font-['Orbitron']">Categories</h2>
+                    <div class="space-y-3">
+                        <button onclick="loadNews('all')" class="category-btn w-full ui-panel px-4 py-3 rounded-lg text-left flex items-center cyber-button active">
+                            <i class="fas fa-globe mr-3 text-blue-400"></i>
+                            <span>All Tech News</span>
+                        </button>
+                        <button onclick="loadNews('technology')" class="category-btn w-full ui-panel px-4 py-3 rounded-lg text-left flex items-center cyber-button">
+                            <i class="fas fa-microchip mr-3 text-purple-400"></i>
+                            <span>Technology</span>
+                        </button>
+                        <button onclick="loadNews('energy')" class="category-btn w-full ui-panel px-4 py-3 rounded-lg text-left flex items-center cyber-button">
+                            <i class="fas fa-bolt mr-3 text-yellow-400"></i>
+                            <span>Energy Tech</span>
+                        </button>
+                        <button onclick="loadNews('communication')" class="category-btn w-full ui-panel px-4 py-3 rounded-lg text-left flex items-center cyber-button">
+                            <i class="fas fa-satellite-dish mr-3 text-green-400"></i>
+                            <span>Communication</span>
+                        </button>
+                        <button onclick="loadNews('financial')" class="category-btn w-full ui-panel px-4 py-3 rounded-lg text-left flex items-center cyber-button">
+                            <i class="fas fa-chart-line mr-3 text-teal-400"></i>
+                            <span>FinTech</span>
                         </button>
                     </div>
+                    <div class="mt-8">
+                        <h3 class="text-lg font-semibold mb-3">Quick Filters</h3>
+                        <div class="space-y-2">
+                            <button onclick="loadFilteredNews('ai')" class="quick-filter-btn w-full ui-panel px-3 py-2 rounded-lg text-left text-sm cyber-button">
+                                <i class="fas fa-robot mr-2"></i> Artificial Intelligence
+                            </button>
+                            <button onclick="loadFilteredNews('crypto')" class="quick-filter-btn w-full ui-panel px-3 py-2 rounded-lg text-left text-sm cyber-button">
+                                <i class="fab fa-bitcoin mr-2"></i> Cryptocurrency
+                            </button>
+                            <button onclick="loadFilteredNews('startups')" class="quick-filter-btn w-full ui-panel px-3 py-2 rounded-lg text-left text-sm cyber-button">
+                                <i class="fas fa-rocket mr-2"></i> Startups
+                            </button>
+                        </div>
                     </div>
                 </div>
             </div>
+            <!-- News Feed -->
+            <div class="lg:col-span-3">
+                <div class="ui-panel p-6 rounded-xl grid-pattern">
+                    <div class="flex justify-between items-center mb-6">
+                        <h2 class="text-2xl font-bold gradient-text font-['Orbitron']" id="current-category">Latest Tech News</h2>
+                        <div class="flex items-center space-x-3">
+                            <button onclick="refreshNews()" class="ui-panel px-4 py-2 rounded-lg cyber-button flex items-center">
+                                <i class="fas fa-sync-alt mr-2"></i> Refresh
+                            </button>
                         </div>
                     </div>
+                    <div id="news-container" class="space-y-6">
+                        <!-- News cards will be inserted here by JavaScript -->
+                        <div class="flex justify-center py-12">
+                            <div class="loading-spinner"></div>
                         </div>
                     </div>
+                    <div class="mt-8 flex justify-center">
+                        <button onclick="loadMoreNews()" id="load-more-btn" class="ui-panel px-6 py-3 rounded-lg cyber-button hidden">
+                            <i class="fas fa-plus-circle mr-2"></i> Load More
                         </button>
+                    </div>
                 </div>
             </div>
         </div>
     </main>
     <!-- Footer -->
+    <footer class="holographic-effect mt-auto">
+        <div class="container mx-auto px-4 py-6">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="mb-4 md:mb-0">
+                    <p class="text-sm text-gray-400">© 2023 TechPulse - Automated Tech News Aggregator</p>
                 </div>
                 <div class="flex space-x-4">
+                    <a href="#" class="text-gray-400 hover:text-white transition">
+                        <i class="fab fa-github"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-white transition">
+                        <i class="fab fa-twitter"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-white transition">
+                        <i class="fab fa-linkedin"></i>
+                    </a>
                 </div>
             </div>
         </div>
         const NEWSAPI_API_KEY = 'f764fe522436442d9bdafbae241d7b63';
         const MARKETAUX_API_TOKEN = 'x7do5W51vWCggI5OC0qDPYYPRRRBdpsZuydOkfPq';
+        // Current state
+        let currentCategory = 'all';
+        let currentPage = 1;
+        let isLoading = false;
+        let allArticles = [];
         // API endpoints for each category
         const API_ENDPOINTS = {
             all: [
                 'https://api.marketaux.com/v1/news/all?industries=Technology&filter_entities=true&limit=10&api_token=' + MARKETAUX_API_TOKEN,
                 'https://newsapi.org/v2/everything?q=bitcoin&from=2025-04-23&sortBy=publishedAt&apiKey=' + NEWSAPI_API_KEY,
                 'https://newsapi.org/v2/everything?q=apple&from=2025-05-22&to=2025-05-22&sortBy=popularity&apiKey=' + NEWSAPI_API_KEY,
+                'https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=' + NEWSAPI_API_KEY
             ],
             technology: [
                 'https://newsapi.org/v2/everything?q=technology&from=2025-04-23&sortBy=publishedAt&apiKey=' + NEWSAPI_API_KEY,
             ]
         };
+        // Category display names
+        const CATEGORY_NAMES = {
+            all: 'Latest Tech News',
+            technology: 'Technology',
+            energy: 'Energy Tech',
+            communication: 'Communication Tech',
+            financial: 'FinTech',
+            healthcare: 'Health Tech',
+            industrial: 'Industrial Tech',
+            real_estate: 'Real Estate Tech',
+            utilities: 'Utilities Tech',
+            ai: 'AI News',
+            crypto: 'Cryptocurrency',
+            startups: 'Tech Startups'
+        };
+        // DOM elements
+        const newsContainer = document.getElementById('news-container');
+        const currentCategoryElement = document.getElementById('current-category');
+        const loadMoreBtn = document.getElementById('load-more-btn');
+        // Initialize the page
         document.addEventListener('DOMContentLoaded', function() {
+            loadNews('all');
+            // Set active category button
+            document.querySelectorAll('.category-btn').forEach(btn => {
+                btn.addEventListener('click', function() {
+                    document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active'));
+                    this.classList.add('active');
+                });
+            });
         });
+        // Load news for a category
+        async function loadNews(category) {
+            currentCategory = category;
+            currentPage = 1;
+            allArticles = [];
+            // Update UI
+            currentCategoryElement.textContent = CATEGORY_NAMES[category] || 'Tech News';
+            newsContainer.innerHTML = '<div class="flex justify-center py-12"><div class="loading-spinner"></div></div>';
+            loadMoreBtn.classList.add('hidden');
+            // Fetch news
+            await fetchNews(category);
         }
+        // Load filtered news
+        async function loadFilteredNews(filter) {
+            currentCategory = filter;
+            currentPage = 1;
+            allArticles = [];
+            // Update UI
+            currentCategoryElement.textContent = CATEGORY_NAMES[filter] || 'Tech News';
+            newsContainer.innerHTML = '<div class="flex justify-center py-12"><div class="loading-spinner"></div></div>';
+            loadMoreBtn.classList.add('hidden');
+            // Determine which endpoints to use based on filter
+            let endpoints = [];
+            switch(filter) {
+                case 'ai':
+                    endpoints = [
+                        'https://newsapi.org/v2/everything?q=artificial+intelligence+OR+AI&sortBy=publishedAt&apiKey=' + NEWSAPI_API_KEY,
+                        'https://api.marketaux.com/v1/news/all?industries=Technology&filter_entities=true&limit=10&api_token=' + MARKETAUX_API_TOKEN
+                    ];
+                    break;
+                case 'crypto':
+                    endpoints = [
+                        'https://newsapi.org/v2/everything?q=bitcoin+OR+cryptocurrency+OR+blockchain&sortBy=publishedAt&apiKey=' + NEWSAPI_API_KEY,
+                        'https://api.marketaux.com/v1/news/all?industries=Financial&filter_entities=true&limit=10&api_token=' + MARKETAUX_API_TOKEN
+                    ];
+                    break;
+                case 'startups':
+                    endpoints = [
+                        'https://newsapi.org/v2/everything?q=startup+OR+startups+OR+venture+capital&sortBy=publishedAt&apiKey=' + NEWSAPI_API_KEY,
+                        'https://api.marketaux.com/v1/news/all?industries=Technology&filter_entities=true&limit=10&api_token=' + MARKETAUX_API_TOKEN
+                    ];
+                    break;
+                default:
+                    endpoints = API_ENDPOINTS.all;
             }
+            await fetchFromEndpoints(endpoints);
         }
+        // Refresh news
+        async function refreshNews() {
+            await loadNews(currentCategory);
         }
+        // Load more news
+        async function loadMoreNews() {
+            if (isLoading) return;
+            currentPage++;
+            loadMoreBtn.innerHTML = '<div class="loading-spinner"></div>';
+            await fetchNews(currentCategory);
         }
+        // Fetch news from all endpoints for a category
+        async function fetchNews(category) {
+            if (isLoading) return;
+            isLoading = true;
             try {
+                const endpoints = API_ENDPOINTS[category] || API_ENDPOINTS.all;
+                await fetchFromEndpoints(endpoints);
             } catch (error) {
+                console.error('Error fetching news:', error);
+                newsContainer.innerHTML = `
+                    <div class="ui-panel p-6 rounded-lg text-center">
+                        <i class="fas fa-exclamation-triangle text-yellow-400 text-4xl mb-3"></i>
+                        <p class="text-lg">Failed to load news. Please try again later.</p>
+                        <button onclick="refreshNews()" class="mt-4 ui-panel px-4 py-2 rounded-lg cyber-button">
+                            <i class="fas fa-sync-alt mr-2"></i> Retry
+                        </button>
+                    </div>
+                `;
+            } finally {
+                isLoading = false;
+                loadMoreBtn.innerHTML = '<i class="fas fa-plus-circle mr-2"></i> Load More';
             }
         }
+        // Fetch from multiple endpoints
+        async function fetchFromEndpoints(endpoints) {
+            const promises = endpoints.map(endpoint => {
+                return fetch(endpoint)
+                    .then(response => {
+                        if (!response.ok) throw new Error('Network response was not ok');
+                        return response.json();
+                    })
+                    .catch(error => {
+                        console.error('Error fetching from endpoint:', endpoint, error);
+                        return null;
+                    });
+            });
+            const results = await Promise.all(promises);
+            // Process results
+            const newArticles = [];
+            results.forEach(result => {
+                if (!result) return;
+                // Handle Marketaux API format
+                if (result.data) {
+                    result.data.forEach(article => {
+                        newArticles.push({
+                            title: article.title,
+                            description: article.description,
+                            url: article.url,
+                            source: article.source,
+                            publishedAt: article.published_at,
+                            imageUrl: article.image_url
+                        });
+                    });
+                }
+                // Handle NewsAPI format
+                else if (result.articles) {
+                    result.articles.forEach(article => {
+                        newArticles.push({
+                            title: article.title,
+                            description: article.description,
+                            url: article.url,
+                            source: article.source?.name || 'Unknown',
+                            publishedAt: article.publishedAt,
+                            imageUrl: article.urlToImage
+                        });
+                    });
+                }
+            });
+            // Filter out duplicates
+            const uniqueArticles = filterDuplicateArticles([...allArticles, ...newArticles]);
+            allArticles = uniqueArticles;
+            // Display articles
+            displayArticles();
+        }
+        // Filter duplicate articles by URL
+        function filterDuplicateArticles(articles) {
+            const uniqueUrls = new Set();
+            return articles.filter(article => {
+                if (!article.url || uniqueUrls.has(article.url)) {
+                    return false;
+                }
+                uniqueUrls.add(article.url);
+                return true;
             });
         }
+        // Display articles in the UI
+        function displayArticles() {
+            if (allArticles.length === 0) {
+                newsContainer.innerHTML = `
+                    <div class="ui-panel p-6 rounded-lg text-center">
+                        <i class="fas fa-newspaper text-blue-400 text-4xl mb-3"></i>
+                        <p class="text-lg">No news articles found for this category.</p>
+                        <button onclick="refreshNews()" class="mt-4 ui-panel px-4 py-2 rounded-lg cyber-button">
+                            <i class="fas fa-sync-alt mr-2"></i> Refresh
+                        </button>
+                    </div>
+                `;
+                loadMoreBtn.classList.add('hidden');
+                return;
+            }
+            // Clear loading spinner
+            if (currentPage === 1) {
                 newsContainer.innerHTML = '';
             }
+            // Display articles
+            const articlesToShow = allArticles.slice(0, currentPage * 10);
+            articlesToShow.forEach(article => {
                 const newsCard = document.createElement('div');
+                newsCard.className = 'news-card ui-panel p-5 rounded-lg';
                 // Format date
+                const date = new Date(article.publishedAt);
                 const formattedDate = date.toLocaleDateString('en-US', {
                     year: 'numeric',
                     month: 'short',
+                    day: 'numeric',
+                    hour: '2-digit',
+                    minute: '2-digit'
+                });
                 // Create card HTML
                 newsCard.innerHTML = `
+                    <div class="flex flex-col md:flex-row gap-4">
+                        ${article.imageUrl ? `
+                        <div class="md:w-1/4">
+                            <img src="${article.imageUrl}" alt="${article.title}" class="w-full h-40 object-cover rounded-lg">
                         </div>
+                        ` : ''}
+                        <div class="${article.imageUrl ? 'md:w-3/4' : 'w-full'}">
+                            <h3 class="text-xl font-bold mb-2">${article.title}</h3>
+                            <p class="text-gray-300 mb-4">${article.description || 'No description available.'}</p>
+                            <div class="flex flex-wrap gap-2 mb-3">
+                                <span class="source-tag px-3 py-1 rounded-full text-xs">${article.source || 'Unknown source'}</span>
+                                <span class="date-badge px-3 py-1 rounded-full text-xs">${formattedDate}</span>
                             </div>
+                            <a href="${article.url}" target="_blank" rel="noopener noreferrer" class="inline-block ui-panel px-4 py-2 rounded-lg cyber-button">
+                                <i class="fas fa-external-link-alt mr-2"></i> Read Full Article
+                            </a>
                         </div>
                     </div>
                 `;
                 newsContainer.appendChild(newsCard);
             });
+            // Show/hide load more button
+            if (allArticles.length > articlesToShow.length) {
+                loadMoreBtn.classList.remove('hidden');
             } else {
+                loadMoreBtn.classList.add('hidden');
             }
         }
     </script>
+</body>
 </html>