| <!DOCTYPE html> |
| <html lang="en" dir="ltr" data-theme="light"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <meta http-equiv="Permissions-Policy" content="accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=()"> |
| <meta name="description" content="Crypto Monitor ULTIMATE - Cryptocurrency News"> |
| <title>News | Crypto Monitor ULTIMATE</title> |
| |
| <link rel="icon" type="image/svg+xml" href="/static/assets/icons/favicon.svg"> |
| |
| <link rel="stylesheet" href="/static/shared/css/design-system.css"> |
| <link rel="stylesheet" href="/static/shared/css/global.css"> |
| <link rel="stylesheet" href="/static/shared/css/components.css"> |
| <link rel="stylesheet" href="/static/shared/css/layout.css"> |
| <link rel="stylesheet" href="/static/shared/css/utilities.css"> |
| <link rel="stylesheet" href="/static/pages/news/news.css"> |
| |
| <script src="/static/js/api-config.js"></script> |
| <script> |
| |
| window.apiReady = new Promise((resolve) => { |
| if (window.apiClient) { |
| console.log('✅ API Client ready'); |
| resolve(window.apiClient); |
| } else { |
| console.error('❌ API Client not loaded'); |
| } |
| }); |
| </script> |
|
|
| </head> |
| <body> |
| <div class="app-container"> |
| <aside id="sidebar-container"></aside> |
| |
| <main class="main-content"> |
| <header id="header-container"></header> |
| |
| <div class="page-content"> |
| <div class="page-header"> |
| <div class="page-title"> |
| <h1> |
| <span class="page-icon"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2"></path><path d="M18 14h-8"></path><path d="M15 18h-5"></path><path d="M10 6h8v4h-8V6Z"></path></svg> |
| </span> |
| News |
| </h1> |
| <p class="page-subtitle">Curated Cryptocurrency News</p> |
| </div> |
| <div class="page-actions"> |
| <button id="refresh-btn" class="btn-icon" title="Refresh data" aria-label="Refresh data"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg> |
| </button> |
| <span id="last-update" class="last-update">Loading...</span> |
| </div> |
| </div> |
|
|
| |
| <div class="filters-bar"> |
| <div class="search-box"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg> |
| <input type="text" id="search-input" class="form-input" placeholder="Search news..." /> |
| </div> |
| <select id="source-select" class="form-select"> |
| <option value="">All Sources</option> |
| </select> |
| <select id="sentiment-select" class="form-select"> |
| <option value="">All Sentiment</option> |
| <option value="positive">Positive</option> |
| <option value="neutral">Neutral</option> |
| <option value="negative">Negative</option> |
| </select> |
| </div> |
|
|
| |
| <div class="news-stats" id="news-stats"> |
| <div class="stat-item"> |
| <span class="stat-value" id="total-articles">--</span> |
| <span class="stat-label">Total Articles</span> |
| </div> |
| <div class="stat-item positive"> |
| <span class="stat-value" id="positive-count">--</span> |
| <span class="stat-label">Positive</span> |
| </div> |
| <div class="stat-item neutral"> |
| <span class="stat-value" id="neutral-count">--</span> |
| <span class="stat-label">Neutral</span> |
| </div> |
| <div class="stat-item negative"> |
| <span class="stat-value" id="negative-count">--</span> |
| <span class="stat-label">Negative</span> |
| </div> |
| </div> |
|
|
| |
| <div class="news-list" id="news-list"> |
| <div class="loading-container"> |
| <div class="spinner"></div> |
| <p>Loading news...</p> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
|
|
| |
| <div id="summarize-modal" class="modal" aria-hidden="true"> |
| <div class="modal-backdrop"></div> |
| <div class="modal-content"> |
| <div class="modal-header"> |
| <h3 class="modal-title">AI Summary</h3> |
| <button class="btn-icon modal-close" aria-label="Close"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> |
| </button> |
| </div> |
| <div class="modal-body" id="modal-body"> |
| <div class="loading-container"> |
| <div class="spinner"></div> |
| <p>Generating summary...</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div id="toast-container" aria-live="polite" aria-atomic="true"></div> |
| |
| |
| <script type="module"> |
| import { LayoutManager } from '/static/shared/js/core/layout-manager.js'; |
| |
| |
| await LayoutManager.init('news'); |
| |
| |
| const { default: NewsPage } = await import('./news.js'); |
| |
| |
| window.addEventListener('beforeunload', () => { |
| if (window.newsPage) { |
| window.newsPage.destroy(); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
|
|
|
|
