Spaces:
Sleeping
Sleeping
| <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> |