Initial clean commit
This commit is contained in:
jlimolina
commit
6784d81c2c
141 changed files with 25219 additions and 0 deletions
448
templates/base.html
Normal file
448
templates/base.html
Normal file
|
|
@ -0,0 +1,448 @@
|
|||
<!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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue