448 lines
No EOL
15 KiB
HTML
448 lines
No EOL
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}Agregador de Noticias RSS{% endblock %}</title>
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap"
|
|
rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}?v=10">
|
|
<!-- TomSelect CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
|
|
|
|
<style>
|
|
.badge {
|
|
display: inline-block;
|
|
font-size: .75rem;
|
|
line-height: 1;
|
|
padding: .35rem .5rem;
|
|
border-radius: .5rem;
|
|
background: var(--secondary-color, #6c63ff);
|
|
color: #fff;
|
|
margin-left: .4rem;
|
|
}
|
|
|
|
.switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 42px;
|
|
height: 22px;
|
|
}
|
|
|
|
.switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: #ccc;
|
|
transition: .2s;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 16px;
|
|
width: 16px;
|
|
left: 3px;
|
|
bottom: 3px;
|
|
background: #fff;
|
|
transition: .2s;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.switch input:checked+.slider {
|
|
background: var(--secondary-color, #6c63ff);
|
|
}
|
|
|
|
.switch input:checked+.slider:before {
|
|
transform: translateX(20px);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="theme-rss2">
|
|
<div class="container">
|
|
<!-- Mobile/Global Nav Elements -->
|
|
<div class="mobile-header">
|
|
<div class="logo-mobile">
|
|
<a href="/">THE DAILY FEED</a>
|
|
</div>
|
|
<button class="mobile-menu-toggle" id="mobile-menu-toggle" aria-label="Abrir menú">
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="nav-overlay" id="nav-overlay"></div>
|
|
|
|
<!-- Desktop Header -->
|
|
<header class="desktop-header">
|
|
<div class="header-top-row">
|
|
<div class="header-title-wrapper">
|
|
<h1><a href="/" style="text-decoration: none; color: inherit;">THE DAILY FEED</a></h1>
|
|
</div>
|
|
|
|
<div class="header-user-menu">
|
|
<div class="dropdown">
|
|
{% if session.get('user_id') %}
|
|
<button class="nav-link dropbtn user-menu-large">
|
|
{% if session.get('avatar_url') %}
|
|
<img src="{{ session.get('avatar_url') }}" alt="Avatar"
|
|
style="width: 24px; height: 24px; border-radius: 50%; vertical-align: middle; object-fit: cover; margin-right: 5px;">
|
|
{% else %}
|
|
<i class="fas fa-user-circle"></i>
|
|
{% endif %}
|
|
{{ session.get('username') }} <i class="fas fa-chevron-down"></i>
|
|
</button>
|
|
<div class="dropdown-content dropdown-right">
|
|
<a href="{{ url_for('account.index') }}"><i class="fas fa-user"></i> Tu Cuenta</a>
|
|
<a href="{{ url_for('favoritos.view_favorites') }}"><i class="fas fa-star"></i> Mis Favoritos</a>
|
|
<a href="{{ url_for('account.index', _anchor='search-history') }}"><i class="fas fa-history"></i>
|
|
Historial</a>
|
|
<div class="dropdown-divider"></div>
|
|
<form action="{{ url_for('auth.logout') }}" method="post" style="margin: 0;">
|
|
<button type="submit" class="dropdown-logout">
|
|
<i class="fas fa-sign-out-alt"></i> Cerrar Sesión
|
|
</button>
|
|
</form>
|
|
</div>
|
|
{% else %}
|
|
<button class="nav-link dropbtn user-menu-large">
|
|
<i class="fas fa-user"></i> Cuenta <i class="fas fa-chevron-down"></i>
|
|
</button>
|
|
<div class="dropdown-content dropdown-right">
|
|
<a href="{{ url_for('auth.login') }}"><i class="fas fa-sign-in-alt"></i> Iniciar Sesión</a>
|
|
<a href="{{ url_for('auth.register') }}"><i class="fas fa-user-plus"></i> Registrarse</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-date">
|
|
<span id="current-date-header"></span> |
|
|
MADRID: <span id="madrid-time">--:--:--</span>
|
|
</div>
|
|
</header>
|
|
|
|
<nav class="main-nav" id="main-nav">
|
|
<div class="nav-content-wrapper">
|
|
<div class="nav-left">
|
|
<a href="{{ url_for('home.home') }}" class="nav-link">Inicio</a>
|
|
|
|
<div class="dropdown">
|
|
<button class="nav-link dropbtn">Noticias <i class="fas fa-chevron-down"></i></button>
|
|
<div class="dropdown-content">
|
|
<a href="{{ url_for('home.home') }}">Todas las Noticias</a>
|
|
<a href="{{ url_for('topics.monitor') }}">Temas</a>
|
|
<a href="{{ url_for('favoritos.view_favorites') }}">Favoritos</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dropdown">
|
|
<button class="nav-link dropbtn">Análisis <i class="fas fa-chevron-down"></i></button>
|
|
<div class="dropdown-content">
|
|
<a href="{{ url_for('stats.index') }}">Estadísticas</a>
|
|
<a href="{{ url_for('stats.entities_dashboard') }}">Monitor de Entidades</a>
|
|
<a href="{{ url_for('conflicts.index') }}">Conflictos</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dropdown">
|
|
<button class="nav-link dropbtn">Admin <i class="fas fa-chevron-down"></i></button>
|
|
<div class="dropdown-content">
|
|
<a href="{{ url_for('feeds.list_feeds') }}">Gestión de Feeds</a>
|
|
<a href="{{ url_for('feeds.discover_feed') }}"><i class="fas fa-search-plus"></i> Descubrir Feeds</a>
|
|
<a href="{{ url_for('urls.manage_urls') }}">Gestión de URLs</a>
|
|
<a href="{{ url_for('backup.restore_feeds') }}">Importar Feeds</a>
|
|
<a href="{{ url_for('backup.backup_feeds') }}">Exportar Feeds</a>
|
|
<a href="{{ url_for('config.config_home') }}">Configuración</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-right">
|
|
<button id="dark-mode-toggle" class="icon-btn" title="Cambiar tema">
|
|
<i class="fas fa-moon"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<script>
|
|
(function () {
|
|
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
|
|
const dateStr = new Date().toLocaleDateString('es-ES', options);
|
|
const dateHeader = document.getElementById('current-date-header');
|
|
if (dateHeader) dateHeader.textContent = dateStr;
|
|
|
|
function updateMadridTime() {
|
|
const now = new Date();
|
|
const timeString = now.toLocaleTimeString('es-ES', { timeZone: 'Europe/Madrid' });
|
|
const el = document.getElementById('madrid-time');
|
|
if (el) el.textContent = timeString;
|
|
}
|
|
setInterval(updateMadridTime, 1000);
|
|
updateMadridTime();
|
|
})();
|
|
</script>
|
|
|
|
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
<ul class="flash-messages">
|
|
{% for category, message in messages %}
|
|
<li class="{{ category }}">{{ message }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
|
|
<!-- TomSelect JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
|
|
<script>
|
|
// Global Tool to Init Selects
|
|
function initSearchableSelects(selector = 'select.searchable') {
|
|
document.querySelectorAll(selector).forEach((el) => {
|
|
if (!el.tomselect) {
|
|
new TomSelect(el, {
|
|
create: false,
|
|
sortField: { field: "text", direction: "asc" },
|
|
plugins: ['dropdown_input'],
|
|
maxItems: 1
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// Dark Mode Toggle
|
|
const darkModeToggle = document.getElementById('dark-mode-toggle');
|
|
const icon = darkModeToggle.querySelector('i');
|
|
|
|
// Check saved preference
|
|
if (localStorage.getItem('darkMode') === 'true') {
|
|
document.body.classList.add('dark-mode');
|
|
icon.classList.replace('fa-moon', 'fa-sun');
|
|
}
|
|
|
|
darkModeToggle.addEventListener('click', () => {
|
|
document.body.classList.toggle('dark-mode');
|
|
const isDark = document.body.classList.contains('dark-mode');
|
|
localStorage.setItem('darkMode', isDark);
|
|
icon.classList.replace(isDark ? 'fa-moon' : 'fa-sun', isDark ? 'fa-sun' : 'fa-moon');
|
|
});
|
|
|
|
// ========== FAVORITES ==========
|
|
async function toggleFav(btn) {
|
|
const id = btn.dataset.id;
|
|
try {
|
|
const response = await fetch(`/favoritos/toggle/${id}`, { method: 'POST' });
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
btn.classList.toggle('active', data.is_favorite);
|
|
const i = btn.querySelector('i');
|
|
i.className = data.is_favorite ? 'fas fa-star' : 'far fa-star';
|
|
}
|
|
} catch (e) { console.error("Error favoritos", e); }
|
|
}
|
|
|
|
// Load saved favorites on page load
|
|
async function loadFavorites() {
|
|
try {
|
|
const response = await fetch('/favoritos/ids');
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
const favIds = new Set(data.ids);
|
|
document.querySelectorAll('.btn-fav').forEach(btn => {
|
|
if (favIds.has(btn.dataset.id)) {
|
|
btn.classList.add('active');
|
|
btn.querySelector('i').className = 'fas fa-star';
|
|
}
|
|
});
|
|
}
|
|
} catch (e) { /* ignore */ }
|
|
}
|
|
|
|
// Run on page load
|
|
if (document.querySelector('.btn-fav')) {
|
|
loadFavorites();
|
|
}
|
|
|
|
// ========== READ HISTORY ==========
|
|
const READ_STORAGE_KEY = 'readHistory';
|
|
const MAX_READ_ITEMS = 500;
|
|
|
|
function getReadHistory() {
|
|
try {
|
|
return JSON.parse(localStorage.getItem(READ_STORAGE_KEY)) || [];
|
|
} catch { return []; }
|
|
}
|
|
|
|
function markAsRead(id) {
|
|
const history = getReadHistory();
|
|
if (!history.includes(id)) {
|
|
history.unshift(id);
|
|
if (history.length > MAX_READ_ITEMS) history.pop();
|
|
localStorage.setItem(READ_STORAGE_KEY, JSON.stringify(history));
|
|
}
|
|
}
|
|
|
|
function applyReadStyles() {
|
|
const history = new Set(getReadHistory());
|
|
document.querySelectorAll('.noticia-card').forEach(card => {
|
|
const link = card.querySelector('a[href*="/noticia"]');
|
|
if (link) {
|
|
const href = link.getAttribute('href');
|
|
// Extract ID from URL
|
|
const match = href.match(/[?&](?:id|tr_id)=([^&]+)/);
|
|
if (match && history.has(match[1])) {
|
|
card.classList.add('is-read');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Track clicks on news links
|
|
document.addEventListener('click', (e) => {
|
|
const link = e.target.closest('a[href*="/noticia"]');
|
|
if (link) {
|
|
const href = link.getAttribute('href');
|
|
const match = href.match(/[?&](?:id|tr_id)=([^&]+)/);
|
|
if (match) {
|
|
markAsRead(match[1]);
|
|
}
|
|
}
|
|
});
|
|
|
|
// ========== NOTIFICATIONS ==========
|
|
let lastCheck = new Date().toISOString();
|
|
|
|
async function checkNotifications() {
|
|
if (Notification.permission !== "granted") return;
|
|
|
|
try {
|
|
const response = await fetch(`/api/notifications/check?last_check=${lastCheck}`);
|
|
const data = await response.json();
|
|
|
|
if (data.has_news) {
|
|
lastCheck = data.timestamp;
|
|
new Notification("The Daily Feed", {
|
|
body: data.message,
|
|
icon: "/static/favicon.ico" // Assuming generic icon
|
|
});
|
|
} else {
|
|
// Update timestamp to now to avoid checking old news if server time drifts
|
|
lastCheck = new Date().toISOString();
|
|
}
|
|
} catch (e) {
|
|
console.error("Notification check failed", e);
|
|
}
|
|
}
|
|
|
|
// Request permission on load
|
|
if ("Notification" in window) {
|
|
if (Notification.permission === "default") {
|
|
// Add a small button or toast to ask for permission instead of auto-prompting which is annoying
|
|
// For this demo, we'll auto-check on first interaction if possible, or just log
|
|
console.log("Notifications available, waiting for permission.");
|
|
}
|
|
|
|
// Check every 60 seconds
|
|
setInterval(checkNotifications, 60000);
|
|
}
|
|
|
|
// Add bell icon to enable notifications if not granted
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
if (Notification.permission !== 'granted' && Notification.permission !== 'denied') {
|
|
const nav = document.querySelector('.main-nav');
|
|
const btn = document.createElement('button');
|
|
btn.className = 'nav-link';
|
|
btn.innerHTML = '<i class="fas fa-bell"></i>';
|
|
btn.style.background = 'none';
|
|
btn.style.border = 'none';
|
|
btn.style.cursor = 'pointer';
|
|
btn.title = 'Activar notificaciones';
|
|
btn.onclick = () => {
|
|
Notification.requestPermission().then(permission => {
|
|
if (permission === "granted") {
|
|
btn.style.display = 'none';
|
|
new Notification("The Daily Feed", { body: "¡Notificaciones activadas!" });
|
|
}
|
|
});
|
|
};
|
|
nav.appendChild(btn);
|
|
}
|
|
|
|
// Init Selects
|
|
initSearchableSelects();
|
|
});
|
|
|
|
// Apply read styles on load
|
|
applyReadStyles();
|
|
|
|
// ========== MOBILE NAVIGATION (BULLETPROOF) ==========
|
|
const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
|
|
const mainNav = document.getElementById('main-nav');
|
|
const navOverlay = document.getElementById('nav-overlay');
|
|
|
|
function toggleMenu() {
|
|
const isOpen = mainNav.classList.toggle('active');
|
|
navOverlay.classList.toggle('active');
|
|
document.body.classList.toggle('no-scroll', isOpen);
|
|
const icon = mobileMenuToggle.querySelector('i');
|
|
icon.className = isOpen ? 'fas fa-times' : 'fas fa-bars';
|
|
}
|
|
|
|
if (mobileMenuToggle) {
|
|
mobileMenuToggle.onclick = (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
toggleMenu();
|
|
};
|
|
}
|
|
|
|
if (navOverlay) {
|
|
navOverlay.onclick = toggleMenu;
|
|
}
|
|
|
|
// Interactive Dropdowns for Touch/Click
|
|
document.querySelectorAll('.dropbtn').forEach(btn => {
|
|
btn.onclick = (e) => {
|
|
if (window.innerWidth <= 768) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const dropdown = btn.parentNode;
|
|
const wasOpen = dropdown.classList.contains('is-open');
|
|
|
|
// Close other open ones
|
|
document.querySelectorAll('.dropdown.is-open').forEach(d => d.classList.remove('is-open'));
|
|
|
|
// Toggle current
|
|
if (!wasOpen) dropdown.classList.add('is-open');
|
|
}
|
|
};
|
|
});
|
|
|
|
// Close on escape
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && mainNav.classList.contains('active')) toggleMenu();
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |