Initial clean commit

templates/monitor_detail.html

@@ -0,0 +1,143 @@
+{% 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 %}