RSS_News_1

Running

App Files Files Community

broadfield-dev commited on Jun 17

Commit

9aa5d32

verified ·

1 Parent(s): 521e7ef

Create index.html

Browse files

Files changed (1) hide show

index.html +308 -0

index.html ADDED Viewed

	@@ -0,0 +1,308 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>News Feed Hub</title>
+    <style>
+        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 20px; background-color: #f5f5f5; color: #333; }
+        h1 { text-align: center; color: #2c3e50; }
+        .container { display: flex; }
+        .sidebar { width: 200px; background-color: #2c3e50; color: white; padding: 15px; border-radius: 5px; min-height: calc(100vh - 100px); }
+        .sidebar h3 { margin: 0 0 15px; font-size: 1.2em; }
+        .sidebar ul { list-style: none; padding: 0; }
+        .sidebar li { padding: 10px; cursor: pointer; border-radius: 5px; margin-bottom: 5px; }
+        .sidebar li:hover { background-color: #34495e; }
+        .sidebar li.active { background-color: #3498db; }
+        .content { flex-grow: 1; padding-left: 20px; }
+        .search-container { text-align: center; margin: 20px 0; }
+        .search-bar { width: 50%; padding: 10px; border: 2px solid #3498db; border-radius: 25px; margin-right: 10px; font-size: 1em; }
+        .search-button { padding: 10px 20px; border: none; border-radius: 25px; background-color: #3498db; color: white; cursor: pointer; font-size: 1em; }
+        .search-button:hover { background-color: #2980b9; }
+        .category-section { margin: 20px 0; }
+        .category-title { background-color: #3498db; color: white; padding: 10px; border-radius: 5px; cursor: pointer; user-select: none; }
+        .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-top: 15px; }
+        .article-tile {
+            background: white;
+            height: 380px;
+            padding: 15px;
+            border-radius: 8px;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+        .article-tile img, .article-tile svg {
+            width: 100%;
+            height: 150px;
+            object-fit: cover;
+            border-radius: 5px;
+            flex-shrink: 0;
+        }
+        .title { margin-top: 10px; }
+        .title a { font-size: 1.2em; color: #2c3e50; text-decoration: none; font-weight: 600; }
+        .title a:hover { color: #3498db; }
+        .description {
+            color: #555;
+            font-size: 0.9em;
+            flex-grow: 1;
+            overflow-y: auto;
+            margin-top: 8px;
+            word-wrap: break-word;
+        }
+        .description p { margin: 0 0 0.5em 0; }
+        .description a { color: #3498db; }
+        .published { font-size: 0.8em; color: #95a5a6; margin-top: 8px; flex-shrink: 0; }
+        .no-articles { text-align: center; color: #2c3e50; margin-top: 20px; }
+        .loading-container { text-align: center; margin: 10px 0; }
+        .loading-spinner { display: inline-block; vertical-align: middle; border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; }
+        .pagination { text-align: center; margin: 20px 0; }
+        .pagination button { padding: 8px 12px; margin: 0 5px; border: none; border-radius: 5px; background-color: #3498db; color: white; cursor: pointer; }
+        .pagination button:disabled { background-color: #95a5a6; cursor: not-allowed; }
+        .pagination span { margin: 0 10px; }
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+    </style>
+</head>
+<body>
+    <h1>News Feed Hub</h1>
+    <div class="search-container">
+        <form method="POST" action="/search" id="searchForm">
+            <input type="text" name="search" class="search-bar" placeholder="Search semantically...">
+            <button type="submit" class="search-button">Search</button>
+        </form>
+        <button id="backButton" style="display: none; margin-top: 10px;" class="search-button">Back to Main</button>
+    </div>
+    {% if loading %}
+        <div class="loading-container" id="loadingContainer">
+            <div class="loading-spinner"></div>
+        </div>
+    {% endif %}
+    <div class="container">
+        <div class="sidebar">
+            <h3>Categories</h3>
+            <ul>
+                {% for category in categories %}
+                    <li onclick="showCategory('{{ category }}')" id="sidebar-{{ category }}">{{ category }}</li>
+                {% endfor %}
+            </ul>
+        </div>
+        <div class="content">
+            <div id="contentContainer">
+                {% if has_articles %}
+                    {% for category, articles in categorized_articles.items() %}
+                    <div class="category-section" id="section-{{ category }}" style="display: none;">
+                        <div class="category-title">{{ category }} <span class="loading-spinner" id="spinner-{{ category }}" style="display: none;"></span></div>
+                        <div class="tiles" id="category-{{ category }}"></div>
+                        <div class="pagination" id="pagination-{{ category }}">
+                            <button onclick="changePage('{{ category }}', -1)">Previous</button>
+                            <span id="page-info-{{ category }}">Page 1</span>
+                            <button onclick="changePage('{{ category }}', 1)">Next</button>
+                        </div>
+                    </div>
+                    {% endfor %}
+                {% else %}
+                    {% if not loading %}
+                    <div class="no-articles">No articles available yet. Loading new feeds...</div>
+                    {% endif %}
+                {% endif %}
+            </div>
+        </div>
+    </div>
+    <script>
+        let lastUpdate = 0;
+        let currentCategory = null;
+        let currentPages = {};
+        let articlesPerPage = 9;
+        let allArticles = {};
+        document.addEventListener('DOMContentLoaded', () => {
+            const storedCategory = sessionStorage.getItem('currentCategory');
+            if (storedCategory) {
+                showCategory(storedCategory);
+            } else if (document.querySelector('.sidebar li')) {
+                showCategory(document.querySelector('.sidebar li').textContent);
+            }
+            if (document.getElementById('loadingContainer')) {
+                checkLoadingStatus();
+            }
+            document.getElementById('searchForm').addEventListener('submit', handleSearch);
+            document.getElementById('backButton').addEventListener('click', () => {
+                window.location.href = '/';
+            });
+        });
+        function getArticleKey(article) {
+            return `${article.title}|${article.link}|${article.published}`;
+        }
+        function createArticleTileHTML(article) {
+            const key = getArticleKey(article);
+            const imageHTML = article.image !== "svg"
+                ? `<img src="${article.image}" alt="Article Image" onerror="this.style.display='none';">`
+                : `<svg width="100%" height="150" xmlns="http://www.w3.org/2000/svg">
+                       <rect width="100%" height="100%" fill="#e0e0e0"/>
+                       <text x="50%" y="50%" text-anchor="middle" dy=".3em" fill="#666">No Image</text>
+                   </svg>`;
+            return `
+                <div class="article-tile" data-published="${article.published}" data-key="${key}">
+                    ${imageHTML}
+                    <div class="title"><a href="${article.link}" target="_blank">${article.title}</a></div>
+                    <div class="description">${article.description}</div>
+                    <div class="published">Published: ${article.published}</div>
+                </div>`;
+        }
+        function renderArticles(container, articles, category, page) {
+            const start = (page - 1) * articlesPerPage;
+            const end = start + articlesPerPage;
+            const paginatedArticles = articles.slice(start, end);
+            container.innerHTML = paginatedArticles.map(createArticleTileHTML).join('');
+            updatePagination(category, page, articles.length);
+        }
+        function updatePagination(category, page, totalArticles) {
+            const totalPages = Math.ceil(totalArticles / articlesPerPage);
+            const pageInfo = document.getElementById(`page-info-${category}`);
+            const prevButton = document.getElementById(`pagination-${category}`).querySelector('button:first-child');
+            const nextButton = document.getElementById(`pagination-${category}`).querySelector('button:last-child');
+            pageInfo.textContent = `Page ${page} of ${totalPages}`;
+            prevButton.disabled = page === 1;
+            nextButton.disabled = page === totalPages;
+        }
+        function showCategory(category) {
+            if (currentCategory === category) return;
+            currentCategory = category;
+            sessionStorage.setItem('currentCategory', category);
+            // Update sidebar active state
+            document.querySelectorAll('.sidebar li').forEach(li => {
+                li.classList.remove('active');
+                if (li.textContent === category) li.classList.add('active');
+            });
+            // Hide all category sections
+            document.querySelectorAll('.category-section').forEach(section => {
+                section.style.display = 'none';
+            });
+            // Show selected category section
+            const section = document.getElementById(`section-${category}`);
+            section.style.display = 'block';
+            const spinner = document.getElementById(`spinner-${category}`);
+            const tilesDiv = document.getElementById(`category-${category}`);
+            // Initialize page if not set
+            if (!currentPages[category]) {
+                currentPages[category] = 1;
+            }
+            // Fetch articles if not already cached
+            if (!allArticles[category]) {
+                spinner.style.display = 'inline-block';
+                fetch(`/get_all_articles/${category}`)
+                    .then(response => response.json())
+                    .then(data => {
+                        spinner.style.display = 'none';
+                        if (data.articles && data.articles.length > 0) {
+                            allArticles[category] = data.articles;
+                            renderArticles(tilesDiv, data.articles, category, currentPages[category]);
+                        } else {
+                            tilesDiv.innerHTML = `<div class="no-articles">No articles found for ${category}.</div>`;
+                        }
+                    })
+                    .catch(error => {
+                        spinner.style.display = 'none';
+                        console.error(`Error loading articles for ${category}:`, error);
+                        tilesDiv.innerHTML = `<div class="no-articles">Failed to load articles for ${category}.</div>`;
+                    });
+            } else {
+                renderArticles(tilesDiv, allArticles[category], category, currentPages[category]);
+            }
+        }
+        function changePage(category, delta) {
+            const totalPages = Math.ceil((allArticles[category] || []).length / articlesPerPage);
+            currentPages[category] = Math.max(1, Math.min(currentPages[category] + delta, totalPages));
+            renderArticles(document.getElementById(`category-${category}`), allArticles[category], category, currentPages[category]);
+        }
+        function handleSearch(event) {
+            event.preventDefault();
+            const form = event.target;
+            const backButton = document.getElementById('backButton');
+            const contentContainer = document.getElementById('contentContainer');
+            const loadingContainer = document.getElementById('loadingContainer');
+            if (loadingContainer) loadingContainer.style.display = 'block';
+            contentContainer.innerHTML = '';
+            fetch('/search', { method: 'POST', body: new FormData(form) })
+                .then(response => response.json())
+                .then(data => {
+                    if (loadingContainer) loadingContainer.style.display = 'none';
+                    if (data.has_articles) {
+                        backButton.style.display = 'block';
+                        let categoriesHtml = '';
+                        const sortedCategories = Object.keys(data.categorized_articles).sort();
+                        for (const category of sortedCategories) {
+                            const articles = data.categorized_articles[category];
+                            categoriesHtml += `
+                                <div class="category-section">
+                                    <div class="category-title">${category} (${articles.length})</div>
+                                    <div class="tiles">
+                                        ${articles.map(createArticleTileHTML).join('')}
+                                    </div>
+                                </div>`;
+                        }
+                        contentContainer.innerHTML = categoriesHtml;
+                    } else {
+                        contentContainer.innerHTML = `<div class="no-articles">No results found.</div>`;
+                    }
+                })
+                .catch(error => {
+                    if (loadingContainer) loadingContainer.style.display = 'none';
+                    console.error('Error performing search:', error);
+                    contentContainer.innerHTML = `<div class="no-articles">Failed to perform search. Please try again.</div>`;
+                });
+        }
+        function updateArticles() {
+            fetch('/get_updates')
+                .then(response => response.json())
+                .then(data => {
+                    if (data.has_updates) {
+                        if (!document.querySelector('.search-bar').value && currentCategory) {
+                            console.log("New content available. Refreshing current category.");
+                            allArticles[currentCategory] = null; // Clear cache
+                            showCategory(currentCategory); // Reload current category
+                        }
+                    }
+                })
+                .catch(error => console.error('Error checking for updates:', error))
+                .finally(() => setTimeout(updateArticles, 60000));
+        }
+        function checkLoadingStatus() {
+            fetch('/check_loading')
+                .then(response => response.json())
+                .then(data => {
+                    if (data.status === 'complete') {
+                        const loadingContainer = document.getElementById('loadingContainer');
+                        if (loadingContainer) loadingContainer.style.display = 'none';
+                        setTimeout(updateArticles, 5000);
+                    } else {
+                        setTimeout(checkLoadingStatus, 2000);
+                    }
+                })
+                .catch(error => {
+                    console.error('Error checking loading status:', error);
+                    setTimeout(checkLoadingStatus, 5000);
+                });
+        }
+    </script>
+</body>
+</html>