Initial clean commit

templates/monitor_list.html

@@ -0,0 +1,111 @@
+{% extends "base.html" %}
+
+{% block title %}Monitor de Impacto Global{% endblock %}
+
+{% block content %}
+<header>
+    <h1><i class="fas fa-globe"></i> Monitor de Impacto Global</h1>
+    <p class="subtitle">Análisis de relevancia por país en los últimos {{ days }} días.</p>
+</header>
+
+<div class="filters">
+    <a href="{{ url_for('topics.monitor', days=1) }}" class="btn {% if days==1 %}btn-active{% endif %}">24h</a>
+    <a href="{{ url_for('topics.monitor', days=3) }}" class="btn {% if days==3 %}btn-active{% endif %}">3 Días</a>
+    <a href="{{ url_for('topics.monitor', days=7) }}" class="btn {% if days==7 %}btn-active{% endif %}">Semana</a>
+</div>
+
+<div class="monitor-grid">
+    {% for c in countries %}
+    <div class="card country-card">
+        <div class="country-header">
+            <span class="flag-icon">{{ c.nombre[:2] }}</span> <!-- Placeholder for flag -->
+            <h2><a href="{{ url_for('topics.country_detail', pais_id=c.id, days=days) }}">{{ c.nombre }}</a></h2>
+        </div>
+        <div class="country-stats">
+            <div class="stat">
+                <span class="value">{{ c.total_impact }}</span>
+                <span class="label">Puntos de Impacto</span>
+            </div>
+            <div class="stat">
+                <span class="value">{{ c.news_count }}</span>
+                <span class="label">Noticias Relevantes</span>
+            </div>
+        </div>
+        <div class="heat-bar">
+            <!-- Simple visual bar based on impact (max approx 1000 for scaling) -->
+            <div class="bar-fill" style="width: {{ (c.total_impact / 1000) * 100 }}%; max-width: 100%;"></div>
+        </div>
+    </div>
+    {% else %}
+    <p>No hay datos de impacto suficientes aún. El sistema está analizando noticias...</p>
+    {% endfor %}
+</div>
+
+<style>
+    .monitor-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        gap: 20px;
+        margin-top: 20px;
+    }
+
+    .country-card {
+        padding: 20px;
+        border-left: 5px solid #3498db;
+        transition: transform 0.2s;
+    }
+
+    .country-card:hover {
+        transform: translateY(-5px);
+    }
+
+    .country-header h2 {
+        margin: 0;
+        font-size: 1.5rem;
+    }
+
+    .country-header a {
+        text-decoration: none;
+        color: inherit;
+    }
+
+    .country-stats {
+        display: flex;
+        justify-content: space-between;
+        margin: 15px 0;
+    }
+
+    .stat {
+        text-align: center;
+    }
+
+    .stat .value {
+        display: block;
+        font-size: 1.2rem;
+        font-weight: bold;
+        color: #2c3e50;
+    }
+
+    .stat .label {
+        font-size: 0.8rem;
+        color: #7f8c8d;
+    }
+
+    .heat-bar {
+        height: 6px;
+        background: #ecf0f1;
+        border-radius: 3px;
+        overflow: hidden;
+    }
+
+    .bar-fill {
+        height: 100%;
+        background: linear-gradient(90deg, #3498db, #e74c3c);
+    }
+
+    .btn-active {
+        background-color: #2c3e50;
+        color: white;
+    }
+</style>
+{% endblock %}