Spaces:

flitrx
/

autonews

Running

App Files Files Community

flitrx commited on May 23, 2025

Commit

b2215ae

verified ·

1 Parent(s): 3a67dc1

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +652 -19
prompts.txt +5 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Autonews
-emoji: 🐨
-colorFrom: gray
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: autonews
+emoji: 🐳
+colorFrom: yellow
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,652 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TechPulse - Real-time Technology 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">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        techDark: '#1e293b',
+                        techBlue: '#3b82f6',
+                        techGreen: '#10b981',
+                        techRed: '#ef4444',
+                        techPurple: '#8b5cf6',
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        .news-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+        }
+        .tech-gradient-bg {
+            background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { opacity: 1; }
+            50% { opacity: 0.5; }
+            100% { opacity: 1; }
+        }
+        .marquee {
+            white-space: nowrap;
+            overflow: hidden;
+            box-sizing: border-box;
+        }
+        .marquee span {
+            display: inline-block;
+            padding-left: 100%;
+            animation: marquee 20s linear infinite;
+        }
+        @keyframes marquee {
+            0% { transform: translate(0, 0); }
+            100% { transform: translate(-100%, 0); }
+        }
+    </style>
+</head>
+<body class="bg-gray-100 text-gray-900">
+    <!-- Header -->
+    <header class="tech-gradient-bg text-white shadow-lg">
+        <div class="container mx-auto px-4 py-6">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="flex items-center mb-4 md:mb-0">
+                    <i class="fas fa-microchip text-3xl text-techPurple mr-3"></i>
+                    <h1 class="text-2xl font-bold">Tech<span class="text-techBlue">Pulse</span></h1>
+                </div>
+                <div class="relative w-full md:w-1/3">
+                    <input type="text" placeholder="Search tech news..."
+                           class="w-full px-4 py-2 rounded-full bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-techBlue">
+                    <button class="absolute right-3 top-2 text-gray-400 hover:text-white">
+                        <i class="fas fa-search"></i>
+                    </button>
+                </div>
+                <div class="hidden md:flex space-x-4 mt-4 md:mt-0">
+                    <button class="px-4 py-2 rounded-full bg-techBlue hover:bg-blue-600 transition">Sign In</button>
+                    <button class="px-4 py-2 rounded-full bg-techPurple hover:bg-purple-600 transition">Register</button>
+                </div>
+            </div>
+        </div>
+    </header>
+    <!-- Tech Ticker -->
+    <div class="bg-gray-800 text-white py-2 px-4 overflow-hidden">
+        <div class="marquee">
+            <span id="tech-ticker" class="text-sm">
+                Loading technology news headlines...
+            </span>
+        </div>
+    </div>
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-8">
+        <div class="flex flex-col lg:flex-row gap-8">
+            <!-- Left Column - News Feed -->
+            <div class="w-full lg:w-2/3">
+                <div class="flex justify-between items-center mb-6">
+                    <h2 class="text-2xl font-bold text-techDark">Latest Tech News</h2>
+                    <div class="flex space-x-2">
+                        <button id="refresh-btn" class="px-3 py-1 bg-techBlue text-white rounded hover:bg-blue-600 transition">
+                            <i class="fas fa-sync-alt mr-1"></i> Refresh
+                        </button>
+                        <select id="news-category" class="px-3 py-1 bg-gray-200 rounded focus:outline-none">
+                            <option value="all">All Categories</option>
+                            <option value="technology">Technology</option>
+                            <option value="energy">Energy</option>
+                            <option value="communication">Communication Services</option>
+                            <option value="financial">Financial</option>
+                            <option value="healthcare">Healthcare</option>
+                            <option value="industrial">Industrial</option>
+                            <option value="real_estate">Real Estate</option>
+                            <option value="utilities">Utilities</option>
+                        </select>
+                    </div>
+                </div>
+                <!-- News Loading Skeleton -->
+                <div id="loading-skeleton" class="space-y-6">
+                    <div class="bg-white rounded-lg shadow-md p-6 animate-pulse">
+                        <div class="h-4 bg-gray-300 rounded w-3/4 mb-4"></div>
+                        <div class="h-3 bg-gray-200 rounded w-full mb-2"></div>
+                        <div class="h-3 bg-gray-200 rounded w-5/6 mb-2"></div>
+                        <div class="h-3 bg-gray-200 rounded w-4/6 mb-4"></div>
+                        <div class="h-2 bg-gray-200 rounded w-1/4"></div>
+                    </div>
+                    <div class="bg-white rounded-lg shadow-md p-6 animate-pulse">
+                        <div class="h-4 bg-gray-300 rounded w-3/4 mb-4"></div>
+                        <div class="h-3 bg-gray-200 rounded w-full mb-2"></div>
+                        <div class="h-3 bg-gray-200 rounded w-5/6 mb-2"></div>
+                        <div class="h-3 bg-gray-200 rounded w-4/6 mb-4"></div>
+                        <div class="h-2 bg-gray-200 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-6 py-2 bg-techPurple text-white rounded-full hover:bg-purple-600 transition">
+                        Load More News
+                    </button>
+                </div>
+            </div>
+            <!-- Right Column - Trending & Companies -->
+            <div class="w-full lg:w-1/3">
+                <!-- Trending Topics -->
+                <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+                    <h3 class="text-xl font-bold text-techDark mb-4">Trending Topics</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-gray-300 rounded-full mr-2"></div>
+                                <div class="h-4 bg-gray-200 rounded w-16"></div>
+                            </div>
+                            <div class="text-right">
+                                <div class="h-4 bg-gray-200 rounded w-12"></div>
+                            </div>
+                        </div>
+                        <div class="flex justify-between items-center animate-pulse">
+                            <div class="flex items-center">
+                                <div class="w-8 h-8 bg-gray-300 rounded-full mr-2"></div>
+                                <div class="h-4 bg-gray-200 rounded w-16"></div>
+                            </div>
+                            <div class="text-right">
+                                <div class="h-4 bg-gray-200 rounded w-12"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Tech Companies -->
+                <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+                    <h3 class="text-xl font-bold text-techDark mb-4">Tech Giants</h3>
+                    <div class="grid grid-cols-2 gap-4" id="tech-companies">
+                        <div class="flex items-center p-3 bg-gray-50 rounded-lg animate-pulse">
+                            <div class="w-10 h-10 bg-gray-300 rounded-full mr-3"></div>
+                            <div class="h-4 bg-gray-200 rounded w-16"></div>
+                        </div>
+                        <div class="flex items-center p-3 bg-gray-50 rounded-lg animate-pulse">
+                            <div class="w-10 h-10 bg-gray-300 rounded-full mr-3"></div>
+                            <div class="h-4 bg-gray-200 rounded w-16"></div>
+                        </div>
+                        <div class="flex items-center p-3 bg-gray-50 rounded-lg animate-pulse">
+                            <div class="w-10 h-10 bg-gray-300 rounded-full mr-3"></div>
+                            <div class="h-4 bg-gray-200 rounded w-16"></div>
+                        </div>
+                        <div class="flex items-center p-3 bg-gray-50 rounded-lg animate-pulse">
+                            <div class="w-10 h-10 bg-gray-300 rounded-full mr-3"></div>
+                            <div class="h-4 bg-gray-200 rounded w-16"></div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Newsletter -->
+                <div class="bg-techPurple text-white rounded-lg shadow-md p-6">
+                    <h3 class="text-xl font-bold mb-2">Stay Updated</h3>
+                    <p class="mb-4 opacity-90">Get the latest tech news delivered to your inbox daily.</p>
+                    <form class="space-y-3">
+                        <input type="email" placeholder="Your email address"
+                               class="w-full px-4 py-2 rounded bg-purple-700 text-white placeholder-purple-300 focus:outline-none focus:ring-2 focus:ring-white">
+                        <button type="submit" class="w-full px-4 py-2 bg-white text-techPurple rounded font-medium hover:bg-gray-100 transition">
+                            Subscribe
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Footer -->
+    <footer class="tech-gradient-bg text-white py-8">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <h4 class="text-lg font-bold mb-4">TechPulse</h4>
+                    <p class="text-gray-300">Your premier source for real-time technology news and industry insights.</p>
+                </div>
+                <div>
+                    <h4 class="text-lg font-bold mb-4">Quick Links</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-300 hover:text-white transition">Home</a></li>
+                        <li><a href="#" class="text-gray-300 hover:text-white transition">News</a></li>
+                        <li><a href="#" class="text-gray-300 hover:text-white transition">Trending</li>
+                        <li><a href="#" class="text-gray-300 hover:text-white transition">About Us</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-bold mb-4">Resources</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-300 hover:text-white transition">API</a></li>
+                        <li><a href="#" class="text-gray-300 hover:text-white transition">Developer Tools</a></li>
+                        <li><a href="#" class="text-gray-300 hover:text-white transition">Research</a></li>
+                        <li><a href="#" class="text-gray-300 hover:text-white transition">Glossary</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-bold mb-4">Connect</h4>
+                    <div class="flex space-x-4 mb-4">
+                        <a href="#" class="text-gray-300 hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a>
+                        <a href="#" class="text-gray-300 hover:text-white transition"><i class="fab fa-linkedin text-xl"></i></a>
+                        <a href="#" class="text-gray-300 hover:text-white transition"><i class="fab fa-github text-xl"></i></a>
+                        <a href="#" class="text-gray-300 hover:text-white transition"><i class="fab fa-youtube text-xl"></i></a>
+                    </div>
+                    <p class="text-gray-300 text-sm">© 2023 TechPulse. All rights reserved.</p>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // API Configuration
+        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
+            ],
+            technology: [
+                'https://newsapi.org/v2/everything?q=technology&from=2025-04-23&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,
+                '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
+            ],
+            energy: [
+                'https://newsapi.org/v2/everything?q=wind+solar&from=2025-05-22&to=2025-05-22&sortBy=popularity&apiKey=' + NEWSAPI_API_KEY,
+                'https://api.marketaux.com/v1/news/all?industries=Energy&filter_entities=true&limit=10&api_token=' + MARKETAUX_API_TOKEN,
+                '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
+            ],
+            communication: [
+                'https://api.marketaux.com/v1/news/all?industries=Communication Services&filter_entities=true&limit=10&api_token=' + MARKETAUX_API_TOKEN,
+                'https://newsapi.org/v2/everything?q=verizonORsprintORt-mobileORmetroOR5gORwireless&from=2025-05-22&to=2025-05-22&sortBy=popularity&apiKey=' + NEWSAPI_API_KEY
+            ],
+            financial: [
+                'https://api.marketaux.com/v1/news/all?industries=Financial&filter_entities=true&limit=10&api_token=' + MARKETAUX_API_TOKEN
+            ],
+            healthcare: [
+                'https://api.marketaux.com/v1/news/all?industries=Healthcare&filter_entities=true&limit=10&api_token=' + MARKETAUX_API_TOKEN
+            ],
+            industrial: [
+                'https://api.marketaux.com/v1/news/all?industries=Industrials&filter_entities=true&limit=10&api_token=' + MARKETAUX_API_TOKEN
+            ],
+            real_estate: [
+                'https://api.marketaux.com/v1/news/all?industries=Real Estate&filter_entities=true&limit=10&api_token=' + MARKETAUX_API_TOKEN
+            ],
+            utilities: [
+                'https://api.marketaux.com/v1/news/all?industries=Utilities&filter_entities=true&limit=10&api_token=' + MARKETAUX_API_TOKEN
+            ]
+        };
+        // State management
+        let currentNewsPage = 1;
+        let selectedCategory = 'all';
+        document.addEventListener('DOMContentLoaded', function() {
+            // Initial data load
+            loadAllData();
+            // Event listeners
+            document.getElementById('refresh-btn').addEventListener('click', refreshAllData);
+            document.getElementById('load-more').addEventListener('click', loadMoreNews);
+            document.getElementById('news-category').addEventListener('change', function(e) {
+                selectedCategory = e.target.value;
+                refreshNews();
+            });
+        });
+        async function loadAllData() {
+            try {
+                await Promise.all([
+                    fetchNews(),
+                    fetchTrendingTopics(),
+                    loadTechCompanies()
+                ]);
+            } catch (error) {
+                console.error('Error loading data:', error);
+                showError('Failed to load data. Please try again later.');
+            }
+        }
+        async function refreshAllData() {
+            // Show loading states
+            document.getElementById('loading-skeleton').classList.remove('hidden');
+            document.getElementById('news-container').classList.add('hidden');
+            document.getElementById('tech-ticker').textContent = 'Refreshing data...';
+            // Reset news page
+            currentNewsPage = 1;
+            try {
+                await Promise.all([
+                    fetchNews(true), // true indicates refresh
+                    fetchTrendingTopics(),
+                    loadTechCompanies()
+                ]);
+            } catch (error) {
+                console.error('Error refreshing data:', error);
+                showError('Failed to refresh 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('Failed to load more news. Please try again later.');
+                currentNewsPage--; // Revert page increment on failure
+            }
+            btn.innerHTML = originalText;
+            btn.disabled = false;
+        }
+        async function refreshNews() {
+            document.getElementById('loading-skeleton').classList.remove('hidden');
+            document.getElementById('news-container').classList.add('hidden');
+            document.getElementById('news-container').innerHTML = '';
+            currentNewsPage = 1;
+            try {
+                await fetchNews(true);
+            } catch (error) {
+                console.error('Error refreshing news:', error);
+                showError('Failed to refresh news. Please try again later.');
+            }
+        }
+        // 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);
+                    updateTicker(allArticles);
+                }
+            } 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
+                // In a real app, you might have an API endpoint for trending topics
+                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;
+            }
+        }
+        function loadTechCompanies() {
+            // Static list of major tech companies
+            const techCompanies = [
+                { name: "Apple", symbol: "AAPL", logo: "https://logo.clearbit.com/apple.com" },
+                { name: "Microsoft", symbol: "MSFT", logo: "https://logo.clearbit.com/microsoft.com" },
+                { name: "Google", symbol: "GOOGL", logo: "https://logo.clearbit.com/google.com" },
+                { name: "Amazon", symbol: "AMZN", logo: "https://logo.clearbit.com/amazon.com" },
+                { name: "Meta", symbol: "META", logo: "https://logo.clearbit.com/meta.com" },
+                { name: "Tesla", symbol: "TSLA", logo: "https://logo.clearbit.com/tesla.com" }
+            ];
+            updateTechCompaniesUI(techCompanies);
+        }
+        // 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-techPurple text-white flex items-center justify-center mr-2">
+                            <i class="fas fa-hashtag text-sm"></i>
+                        </div>
+                        <span>${topic.name}</span>
+                    </div>
+                    <div class="text-right">
+                        <span class="text-sm text-gray-500">${topic.mentions.toLocaleString()} mentions</span>
+                    </div>
+                `;
+                trendingContainer.appendChild(topicElement);
+            });
+        }
+        function updateTechCompaniesUI(companies) {
+            const companiesContainer = document.getElementById('tech-companies');
+            companiesContainer.innerHTML = '';
+            companies.forEach(company => {
+                const companyElement = document.createElement('div');
+                companyElement.className = 'flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition cursor-pointer';
+                companyElement.innerHTML = `
+                    <img src="${company.logo}" alt="${company.name}" class="w-10 h-10 rounded-full mr-3" onerror="this.src='https://via.placeholder.com/40?text=${company.symbol}'">
+                    <div>
+                        <div class="font-medium">${company.name}</div>
+                        <div class="text-xs text-gray-500">${company.symbol}</div>
+                    </div>
+                `;
+                companiesContainer.appendChild(companyElement);
+            });
+        }
+        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 bg-white rounded-lg shadow-md p-6 transition duration-300';
+                // Simple sentiment analysis based on title keywords
+                let sentimentColor = 'text-gray-500';
+                let sentimentIcon = 'fa-newspaper';
+                const title = article.title ? article.title.toLowerCase() : '';
+                if (title.includes('breakthrough') || title.includes('innovative') || title.includes('success') ||
+                    title.includes('growth') || title.includes('launch') || title.includes('record')) {
+                    sentimentColor = 'text-techGreen';
+                    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-techRed';
+                    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'
+                });
+                // Get source name
+                const sourceName = article.source || 'Unknown Source';
+                // Create card HTML
+                newsCard.innerHTML = `
+                    <div class="flex flex-col md:flex-row gap-4">
+                        <div class="md:w-1/4">
+                            <img src="${article.image_url || 'https://via.placeholder.com/300x200?text=No+Image'}"
+                                 alt="${article.title || 'News image'}"
+                                 class="w-full h-40 object-cover rounded-lg">
+                        </div>
+                        <div class="md:w-3/4">
+                            <div class="flex justify-between items-start mb-2">
+                                <h3 class="text-xl font-bold text-techDark">${article.title || 'No title available'}</h3>
+                                <i class="fas ${sentimentIcon} ${sentimentColor} text-lg"></i>
+                            </div>
+                            <p class="text-gray-600 mb-4">${article.description || 'No description available.'}</p>
+                            <div class="flex justify-between items-center text-sm text-gray-500">
+                                <span>${sourceName} • ${formattedDate}</span>
+                                <a href="${article.url || '#'}" target="_blank" rel="noopener noreferrer"
+                                   class="text-techBlue hover:underline">
+                                    Read More <i class="fas fa-arrow-right ml-1"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                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 updateTicker(articles) {
+            let tickerHTML = '';
+            if (articles && articles.length > 0) {
+                articles.slice(0, 8).forEach(article => {
+                    // Truncate title if too long
+                    const shortTitle = article.title && article.title.length > 50 ?
+                        article.title.substring(0, 47) + '...' : article.title || 'Tech news';
+                    tickerHTML += `
+                        <span class="font-medium">${shortTitle}</span>
+                        <span class="mx-3 text-gray-400">|</span>
+                    `;
+                });
+            }
+            document.getElementById('tech-ticker').innerHTML = tickerHTML || 'Technology news headlines loaded';
+        }
+        function showError(message) {
+            // Hide loading states
+            document.getElementById('loading-skeleton').classList.add('hidden');
+            // Show error message
+            const errorElement = document.createElement('div');
+            errorElement.className = 'bg-techRed text-white p-4 rounded-lg mb-6';
+            errorElement.innerHTML = `
+                <div class="flex items-center">
+                    <i class="fas fa-exclamation-circle 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>

prompts.txt ADDED Viewed

	@@ -0,0 +1,5 @@

+make a website that automatically aggregates the material that it will post, which is anything related to crypto currencies.   this site must be fully functional and automated with current stories scraped/acquired from the internet.  do not use any code that is going to only emulate or simulate a working site with some predefined stories coded into it, this must fuctionally get its own stories and articles, no "just-for-demonstration" coding.
+what the hell are you doing?  i specifically asked you not to code in fake/sample/simulated articles or any data that isnt aggrigated or scraped.  this site has to use APIs from other sources to get its current prices for the currencies and to get current articles and stories for its News.  Do not use any simulated articles or anything that isnt gotten through API, All information on this site must be current!
+make this into a Tech news automated news aggrigator instead of Crypto news.  use https://api.marketaux.com/v1/news/all?industries=Technology&filter_entities=true&limit=10&published_after=2025-05-22T08:54&api_token=x7do5W51vWCggI5OC0qDPYYPRRRBdpsZuydOkfPq for the api.
+in the Categories drop down menu, the categories should be: 1 - Energy, with API: https://api.marketaux.com/v1/news/all?industries=Energy&filter_entities=true&limit=10&published_after=2025-05-22T09:04&api_token=x7do5W51vWCggI5OC0qDPYYPRRRBdpsZuydOkfPq. 2 - Communication Services with API: https://api.marketaux.com/v1/news/all?industries=Communication Services&filter_entities=true&limit=10&published_after=2025-05-22T09:07&api_token=x7do5W51vWCggI5OC0qDPYYPRRRBdpsZuydOkfPq. 3 - Financial with API: https://api.marketaux.com/v1/news/all?industries=Financial&filter_entities=true&limit=10&published_after=2025-05-22T09:08&api_token=x7do5W51vWCggI5OC0qDPYYPRRRBdpsZuydOkfPq. 4 - Healthcare with API: https://api.marketaux.com/v1/news/all?industries=Healthcare&filter_entities=true&limit=10&published_after=2025-05-22T09:09&api_token=x7do5W51vWCggI5OC0qDPYYPRRRBdpsZuydOkfPq. 5 - Industrial with API: https://api.marketaux.com/v1/news/all?industries=Industrials&filter_entities=true&limit=10&published_after=2025-05-22T09:10&api_token=x7do5W51vWCggI5OC0qDPYYPRRRBdpsZuydOkfPq. 6 - Real Estate with API: https://api.marketaux.com/v1/news/all?industries=Real Estate&filter_entities=true&limit=10&published_after=2025-05-22T09:11&api_token=x7do5W51vWCggI5OC0qDPYYPRRRBdpsZuydOkfPq. 7 - Utilities with API: https://api.marketaux.com/v1/news/all?industries=Utilities&filter_entities=true&limit=10&published_after=2025-05-22T09:12&api_token=x7do5W51vWCggI5OC0qDPYYPRRRBdpsZuydOkfPq.
+add these additional APIs to their respective categories:  Technology API: https://newsapi.org/v2/everything?q=bitcoin&from=2025-04-23&sortBy=publishedAt&apiKey=f764fe522436442d9bdafbae241d7b63, https://newsapi.org/v2/everything?q=apple&from=2025-05-22&to=2025-05-22&sortBy=popularity&apiKey=f764fe522436442d9bdafbae241d7b63,  https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=f764fe522436442d9bdafbae241d7b63. Energy API - https://newsapi.org/v2/everything?q=energy&from=2025-05-22&to=2025-05-22&sortBy=popularity&apiKey=f764fe522436442d9bdafbae241d7b63, https://newsapi.org/v2/everything?q=solar&from=2025-05-22&to=2025-05-22&sortBy=popularity&apiKey=f764fe522436442d9bdafbae241d7b63, https://newsapi.org/v2/everything?q=wind+solar&from=2025-05-22&to=2025-05-22&sortBy=popularity&apiKey=f764fe522436442d9bdafbae241d7b63.  Communication Services API: https://newsapi.org/v2/everything?q=verizonORsprintORt-mobileORmetroOR5gORwireless&from=2025-05-22&to=2025-05-22&sortBy=popularity&apiKey=f764fe522436442d9bdafbae241d7b63