143 lines
No EOL
3.6 KiB
HTML
143 lines
No EOL
3.6 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Informe: {{ pais.nombre }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<header class="monitor-header">
|
|
<a href="{{ url_for('topics.monitor', days=days) }}" class="back-link">← Volver al Monitor</a>
|
|
<div class="header-content">
|
|
<h1>{{ pais.nombre }}</h1>
|
|
<p>Informe de Inteligencia (Últimos {{ days }} días)</p>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="dashboard-layout">
|
|
|
|
<!-- Left Column: Top News -->
|
|
<section class="top-news-section">
|
|
<h2><i class="fas fa-newspaper"></i> Noticias de Alto Impacto</h2>
|
|
{% for n in news %}
|
|
<article class="impact-news-card">
|
|
<div class="impact-score">{{ n.impact_score }}</div>
|
|
<div class="content">
|
|
<h3><a href="{{ url_for('noticia.noticia', id=n.id) }}">{{ n.titulo }}</a></h3>
|
|
<div class="meta">
|
|
<span>{{ n.fecha.strftime('%d/%m %H:%M') }}</span> |
|
|
<span>{{ n.fuente_nombre }}</span>
|
|
</div>
|
|
<p>{{ n.resumen[:200] }}...</p>
|
|
</div>
|
|
</article>
|
|
{% else %}
|
|
<p>No se han detectado noticias de alto impacto recientemente.</p>
|
|
{% endfor %}
|
|
</section>
|
|
|
|
<!-- Right Column: Active Topics -->
|
|
<aside class="topics-sidebar">
|
|
<h2><i class="fas fa-tags"></i> Temas Activos</h2>
|
|
<ul class="topic-ranking">
|
|
{% for t in active_topics %}
|
|
<li>
|
|
<span class="topic-name">{{ t.name }}</span>
|
|
<span class="topic-vol">{{ t.topic_volume }} pts</span>
|
|
<div class="topic-bar"
|
|
style="width: {% if active_topics|length > 0 %}{{ (t.topic_volume / active_topics[0].topic_volume) * 100 }}{% else %}0{% endif %}%">
|
|
</div>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</aside>
|
|
|
|
</div>
|
|
|
|
<style>
|
|
.dashboard-layout {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr;
|
|
gap: 40px;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.dashboard-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.monitor-header {
|
|
margin-bottom: 20px;
|
|
border-bottom: 2px solid #eee;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.impact-news-card {
|
|
display: flex;
|
|
gap: 20px;
|
|
background: white;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
|
|
border-left: 4px solid #e74c3c;
|
|
}
|
|
|
|
.impact-score {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
color: #e74c3c;
|
|
min-width: 60px;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #fdeaea;
|
|
border-radius: 50%;
|
|
height: 60px;
|
|
}
|
|
|
|
.impact-news-card h3 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.impact-news-card h3 a {
|
|
text-decoration: none;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.topic-ranking {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.topic-ranking li {
|
|
margin-bottom: 15px;
|
|
position: relative;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.topic-name {
|
|
display: block;
|
|
font-weight: bold;
|
|
z-index: 2;
|
|
position: relative;
|
|
}
|
|
|
|
.topic-vol {
|
|
float: right;
|
|
font-size: 0.9rem;
|
|
color: #666;
|
|
z-index: 2;
|
|
position: relative;
|
|
}
|
|
|
|
.topic-bar {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 4px;
|
|
background: #3498db;
|
|
border-radius: 2px;
|
|
}
|
|
</style>
|
|
{% endblock %} |