Initial clean commit

templates/conflict_timeline.html

@@ -0,0 +1,163 @@
+{% extends "base.html" %}
+
+{% block title %}Timeline: {{ conflict.name }}{% endblock %}
+
+{% block content %}
+<div style="margin-bottom: 2rem;">
+    <div style="display: flex; justify-content: space-between; align-items: center;">
+        <h2>
+            <a href="{{ url_for('conflicts.index') }}" style="text-decoration: none; color: inherit;">
+                <i class="fas fa-arrow-left" style="font-size: 1rem; vertical-align: middle;"></i>
+            </a>
+            Timeline: {{ conflict.name }}
+        </h2>
+        <span class="badge" style="font-size: 1rem;">{{ noticias|length }} eventos</span>
+    </div>
+    <p style="color: #666;">
+        Keywords: {{ conflict.keywords }}
+    </p>
+</div>
+
+{% if not noticias %}
+<div class="card" style="text-align: center; padding: 3rem;">
+    <p>No se encontraron noticias recientes con las palabras clave especificadas.</p>
+</div>
+{% else %}
+
+<div class="timeline">
+    {% for n in noticias %}
+    <div class="timeline-item">
+        <div class="timeline-date">
+            {% if n.fecha %}
+            <span class="date-day">{{ n.fecha.strftime('%d') }}</span>
+            <span class="date-month">{{ n.fecha.strftime('%b') }}</span>
+            <span class="date-year">{{ n.fecha.strftime('%Y') }}</span>
+            {% endif %}
+        </div>
+        <div class="timeline-marker"></div>
+        <div class="timeline-content card">
+            {% if n.imagen_url %}
+            <div class="timeline-img">
+                <img src="{{ n.imagen_url }}" loading="lazy" onerror="this.style.display='none'">
+            </div>
+            {% endif %}
+
+            <h3>
+                <a
+                    href="{{ url_for('noticia.noticia', tr_id=n.tr_id if n.tr_id else None, id=n.id if not n.tr_id else None) }}">
+                    {{ n.titulo }}
+                </a>
+            </h3>
+
+            <div class="noticia-meta">
+                {{ n.fuente_nombre }}
+                {% if n.pais %}| {{ n.pais }}{% endif %}
+            </div>
+
+            <p>{{ (n.resumen or '') | safe_html | truncate(150) }}</p>
+        </div>
+    </div>
+    {% endfor %}
+</div>
+
+{% endif %}
+
+<style>
+    /* Timeline Styles */
+    .timeline {
+        position: relative;
+        max-width: 900px;
+        margin: 0 auto;
+        padding: 20px 0;
+    }
+
+    /* Vertical Line */
+    .timeline::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 80px;
+        /* Position of line */
+        width: 2px;
+        background: var(--border-color);
+    }
+
+    .timeline-item {
+        position: relative;
+        margin-bottom: 40px;
+        padding-left: 120px;
+        /* Space for date and line */
+    }
+
+    .timeline-date {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 60px;
+        text-align: center;
+        line-height: 1.2;
+    }
+
+    .date-day {
+        display: block;
+        font-size: 1.5rem;
+        font-weight: bold;
+        color: var(--accent-color);
+    }
+
+    .date-month {
+        display: block;
+        font-size: 0.9rem;
+        text-transform: uppercase;
+        font-weight: bold;
+    }
+
+    .date-year {
+        display: block;
+        font-size: 0.8rem;
+        color: #888;
+    }
+
+    .timeline-marker {
+        position: absolute;
+        left: 74px;
+        /* On the line (80px - 6px radius) */
+        top: 10px;
+        width: 14px;
+        height: 14px;
+        background: var(--paper-color);
+        border: 3px solid var(--accent-color);
+        border-radius: 50%;
+        z-index: 1;
+    }
+
+    .timeline-content {
+        position: relative;
+        padding: 1.5rem;
+        border-left: 4px solid var(--accent-color);
+    }
+
+    .timeline-content h3 {
+        font-size: 1.3rem;
+        margin-top: 0;
+    }
+
+    .timeline-img img {
+        width: 100%;
+        height: 150px;
+        object-fit: cover;
+        border-radius: 4px;
+        margin-bottom: 10px;
+    }
+
+    /* Dark Mode Overrides */
+    .dark-mode .timeline::before {
+        background: #444;
+    }
+
+    .dark-mode .timeline-marker {
+        background: #1a1a2e;
+    }
+</style>
+{% endblock %}