464 lines
No EOL
12 KiB
HTML
464 lines
No EOL
12 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}
|
|
{{ dato.titulo_trad or dato.titulo_orig or 'Detalle de Noticia' }} - El Observador
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
{% set d = dato %}
|
|
|
|
{% if not d %}
|
|
<div class="container">
|
|
<div class="card">
|
|
<h2>Artículo No Encontrado</h2>
|
|
<p>No se encontró la noticia solicitada.</p>
|
|
<a href="{{ url_for('home.home') }}" class="btn">← Volver al inicio</a>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
|
|
<div class="container">
|
|
<!-- Encabezado del artículo -->
|
|
<header class="article-header">
|
|
<div class="article-breadcrumb">
|
|
<a href="{{ url_for('home.home') }}">Inicio</a> →
|
|
{% if d.categoria %}
|
|
<a href="{{ url_for('home.home', categoria_id=d.categoria_id) }}">{{ d.categoria }}</a> →
|
|
{% endif %}
|
|
Artículo
|
|
</div>
|
|
|
|
<h1 class="article-title">{{ d.titulo_trad or d.titulo_orig }}</h1>
|
|
|
|
<div class="article-meta">
|
|
{% if d.categoria %}
|
|
<span class="badge">{{ d.categoria }}</span>
|
|
{% endif %}
|
|
|
|
{% if d.pais %}
|
|
<span class="meta-item"><i class="fas fa-globe"></i> {{ d.pais }}</span>
|
|
{% endif %}
|
|
|
|
<span class="meta-item"><i class="fas fa-newspaper"></i> {{ d.fuente_nombre }}</span>
|
|
|
|
<span class="meta-item"><i class="fas fa-clock"></i>
|
|
{% if d.fecha %}
|
|
{{ d.fecha.strftime('%d de %B de %Y - %H:%M') }}
|
|
{% endif %}
|
|
</span>
|
|
|
|
{% if d.lang_to %}
|
|
<span class="meta-item"><i class="fas fa-language"></i> Traducido al {{ d.lang_to|upper }}</span>
|
|
{% endif %}
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Contenido principal -->
|
|
<div class="row">
|
|
<div class="col-md-8 main-section">
|
|
<article class="article-content">
|
|
|
|
{% if d.imagen_url %}
|
|
<div class="article-image">
|
|
<img src="{{ d.imagen_url }}" alt="{{ d.titulo_trad or d.titulo_orig }}"
|
|
style="width: 100%; max-height: 400px; object-fit: cover; border: 1px solid var(--border-color);">
|
|
{% if d.imagen_credit %}
|
|
<p class="image-credit">Foto: {{ d.imagen_credit }}</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="article-body">
|
|
{% if d.resumen_trad or d.resumen_orig %}
|
|
<div class="article-summary">
|
|
<strong>Resumen:</strong>
|
|
<p>{{ (d.resumen_trad or d.resumen_orig) | safe_html }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if d.contenido_trad or d.contenido_orig %}
|
|
<div class="article-full-content">
|
|
{{ (d.contenido_trad or d.contenido_orig) | safe_html }}
|
|
</div>
|
|
{% else %}
|
|
<div class="article-excerpt">
|
|
<p>{{ (d.resumen_trad or d.resumen_orig) | safe_html }}</p>
|
|
{% if d.url %}
|
|
<div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-color);">
|
|
<a href="{{ d.url }}" target="_blank" class="btn">
|
|
<i class="fas fa-external-link-alt"></i> Leer artículo completo en {{ d.fuente_nombre }}
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Acciones del artículo -->
|
|
<div class="article-actions">
|
|
<div class="action-buttons">
|
|
<button class="btn" onclick="toggleReadingMode()" title="Modo lectura">
|
|
<i class="fas fa-book-reader"></i> Modo Lectura
|
|
</button>
|
|
|
|
<a href="{{ url_for('pdf.export_noticia', noticia_id=d.noticia_id) }}" class="btn" title="Exportar PDF"
|
|
target="_blank">
|
|
<i class="fas fa-file-pdf"></i> PDF
|
|
</a>
|
|
|
|
<button class="btn" onclick="shareArticle()" title="Compartir">
|
|
<i class="fas fa-share-alt"></i> Compartir
|
|
</button>
|
|
|
|
{% if session.get('user_id') %}
|
|
<button class="btn" onclick="toggleFavorite()" title="Añadir a favoritos">
|
|
<i class="fas fa-star"></i> Favorito
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="article-tags">
|
|
{% if d.etiquetas %}
|
|
<h4>Etiquetas:</h4>
|
|
{% for tag in d.etiquetas.split(',') %}
|
|
<span class="tag">{{ tag.strip() }}</span>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sección de Artículos Relacionados debajo del contenido -->
|
|
{% if related_news %}
|
|
<section class="related-section">
|
|
<h3 class="section-title">Artículos Relacionados</h3>
|
|
<div class="related-grid">
|
|
{% for related in related_news %}
|
|
<div class="related-card">
|
|
{% if related.imagen_url %}
|
|
<div class="related-card-image">
|
|
<img src="{{ related.imagen_url }}" alt="{{ related.titulo_trad or related.titulo_original }}">
|
|
</div>
|
|
{% endif %}
|
|
<div class="related-card-body">
|
|
<span class="related-badge">{{ related.categoria or 'General' }}</span>
|
|
<h4>
|
|
{% if related.traduccion_id %}
|
|
<a href="{{ url_for('noticia.noticia', tr_id=related.traduccion_id) }}">
|
|
{% else %}
|
|
<a href="{{ url_for('noticia.noticia', id=related.id) }}">
|
|
{% endif %}
|
|
{{ related.titulo_trad or related.titulo_original }}
|
|
</a>
|
|
</h4>
|
|
<div class="related-footer">
|
|
<span><i class="fas fa-newspaper"></i> {{ related.fuente_nombre }}</span>
|
|
<span><i class="far fa-clock"></i> {{ related.fecha.strftime('%d/%m %H:%M') if related.fecha else ''
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Sidebar del artículo -->
|
|
<div class="col-md-4 sidebar">
|
|
|
|
<!-- Información de la fuente -->
|
|
<div class="card">
|
|
<h3>Información de la Fuente</h3>
|
|
<div class="source-info">
|
|
<p><strong>Medio:</strong> {{ d.fuente_nombre }}</p>
|
|
{% if d.idioma_orig %}
|
|
<p><strong>Idioma original:</strong> {{ d.idioma_orig|upper }}</p>
|
|
{% endif %}
|
|
{% if d.url %}
|
|
<p><strong>URL original:</strong></p>
|
|
<a href="{{ d.url }}" target="_blank" class="url-original"
|
|
style="word-break: break-all; color: var(--accent-color);">
|
|
{{ d.url }}
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Categorías populares -->
|
|
{% if categorias %}
|
|
<div class="card">
|
|
<h3>Más Noticias</h3>
|
|
<ul>
|
|
{% for cat in categorias[:8] %}
|
|
<li>
|
|
<a href="{{ url_for('home.home', categoria_id=cat.id) }}">{{ cat.nombre }}</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endif %}
|
|
|
|
<script>
|
|
function toggleReadingMode() {
|
|
document.body.classList.toggle('reading-mode');
|
|
}
|
|
|
|
function shareArticle() {
|
|
if (navigator.share) {
|
|
navigator.share({
|
|
title: '{{ d.titulo_trad or d.titulo_orig }}',
|
|
text: '{{ d.resumen_trad or d.resumen_orig }}',
|
|
url: window.location.href
|
|
});
|
|
} else {
|
|
// Fallback para navegadores que no soportan Web Share API
|
|
navigator.clipboard.writeText(window.location.href);
|
|
alert('Enlace copiado al portapapeles');
|
|
}
|
|
}
|
|
|
|
function toggleFavorite() {
|
|
// Implementar funcionalidad de favoritos
|
|
fetch('/api/favorites/toggle', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
noticia_id: '{{ d.noticia_id }}'
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
const btn = event.target.closest('button');
|
|
const icon = btn.querySelector('i');
|
|
if (data.is_favorite) {
|
|
icon.classList.remove('far');
|
|
icon.classList.add('fas');
|
|
btn.innerHTML = '<i class="fas fa-star"></i> Eliminar de Favoritos';
|
|
} else {
|
|
icon.classList.remove('fas');
|
|
icon.classList.add('far');
|
|
btn.innerHTML = '<i class="far fa-star"></i> Añadir a Favoritos';
|
|
}
|
|
}
|
|
})
|
|
.catch(error => console.error('Error:', error));
|
|
}
|
|
|
|
// Estilo adicional para modo lectura
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
.reading-mode .container {
|
|
max-width: 800px;
|
|
margin: 20px auto;
|
|
padding: 40px;
|
|
background: var(--paper-color);
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.reading-mode .article-content {
|
|
column-count: 1;
|
|
font-size: 1.2rem;
|
|
line-height: 1.9;
|
|
}
|
|
|
|
.reading-mode .sidebar {
|
|
display: none;
|
|
}
|
|
|
|
.reading-mode .article-actions {
|
|
margin-top: 40px;
|
|
padding-top: 30px;
|
|
border-top: 2px solid var(--border-color);
|
|
}
|
|
|
|
.reading-mode .article-title {
|
|
font-size: 2.5rem;
|
|
line-height: 1.2;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.reading-mode .article-meta {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.article-image {
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.image-credit {
|
|
font-size: 0.85rem;
|
|
color: var(--muted-color);
|
|
margin-top: 8px;
|
|
font-style: italic;
|
|
}
|
|
|
|
.article-summary {
|
|
background: var(--bg-color);
|
|
padding: 20px;
|
|
border-left: 4px solid var(--accent-color);
|
|
margin: 20px 0;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.article-breadcrumb {
|
|
font-size: 0.9rem;
|
|
color: var(--muted-color);
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.article-breadcrumb a {
|
|
color: var(--muted-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.article-breadcrumb a:hover {
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.article-tags {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.article-tags h4 {
|
|
margin-bottom: 10px;
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
.source-info p {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.url-original {
|
|
display: block;
|
|
margin-top: 5px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.related-section {
|
|
margin-top: 50px;
|
|
padding-top: 30px;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.5rem;
|
|
color: var(--text-color);
|
|
margin-bottom: 25px;
|
|
position: relative;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.section-title::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 60px;
|
|
height: 3px;
|
|
background: var(--accent-color);
|
|
}
|
|
|
|
.related-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.related-card {
|
|
background: var(--paper-color);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.related-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.related-card-image {
|
|
height: 160px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.related-card-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.related-card:hover .related-card-image img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.related-card-body {
|
|
padding: 15px;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.related-badge {
|
|
font-size: 0.7rem;
|
|
text-transform: uppercase;
|
|
color: var(--accent-color);
|
|
font-weight: bold;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.related-card h4 {
|
|
font-size: 1rem;
|
|
line-height: 1.4;
|
|
margin-bottom: 15px;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.related-card h4 a {
|
|
color: var(--text-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.related-card h4 a:hover {
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
.related-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 0.75rem;
|
|
color: var(--muted-color);
|
|
margin-top: auto;
|
|
padding-top: 10px;
|
|
border-top: 1px solid var(--bg-color);
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
</script>
|
|
{% endblock %} |