109 lines
3.2 KiB
HTML
109 lines
3.2 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Últimas Traducciones{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="card">
|
|
<h2><i class="fas fa-language" style="color: var(--accent-color); margin-right: 10px;"></i>Últimas Traducciones</h2>
|
|
<p style="color: #666; margin-bottom: 20px;">
|
|
Mostrando las {{ traducciones|length }} traducciones más recientes de un total de {{ total }}.
|
|
</p>
|
|
</div>
|
|
|
|
<div id="traducciones-grid" style="margin-top: 20px;">
|
|
{% for t in traducciones %}
|
|
<article class="noticia-card">
|
|
{% if t.imagen %}
|
|
<img src="{{ t.imagen }}" alt="{{ t.titulo_trad }}" onerror="this.src='/static/placeholder.svg'; this.onerror=null;">
|
|
{% else %}
|
|
<img src="/static/placeholder.svg" alt="Sin imagen">
|
|
{% endif %}
|
|
|
|
<div class="noticia-meta">
|
|
<span class="lang-badge">{{ t.lang_from|upper }} → {{ t.lang_to|upper }}</span>
|
|
{% if t.categoria_nombre %}
|
|
<span class="category-badge">{{ t.categoria_nombre }}</span>
|
|
{% endif %}
|
|
{% if t.pais_nombre %}
|
|
• {{ t.pais_nombre }}
|
|
{% endif %}
|
|
</div>
|
|
|
|
<h3>
|
|
<a href="{{ t.link }}" target="_blank" rel="noopener">{{ t.titulo_trad or 'Sin título' }}</a>
|
|
</h3>
|
|
|
|
<p class="noticia-summary">
|
|
{{ t.resumen_trad[:300] }}{% if t.resumen_trad|length > 300 %}...{% endif %}
|
|
</p>
|
|
|
|
<div class="noticia-footer">
|
|
<small>
|
|
<i class="fas fa-rss"></i> {{ t.feed_nombre or 'Desconocido' }}
|
|
• <i class="fas fa-clock"></i> {{ t.updated_at|format_date if t.updated_at else 'Fecha desconocida' }}
|
|
</small>
|
|
</div>
|
|
</article>
|
|
{% else %}
|
|
<div class="card" style="text-align: center; padding: 40px;">
|
|
<i class="fas fa-inbox fa-3x" style="color: #ccc; margin-bottom: 20px;"></i>
|
|
<p>No hay traducciones disponibles aún.</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{% if total_pages > 1 %}
|
|
<div class="pagination" style="margin-top: 30px; text-align: center;">
|
|
{% if page > 1 %}
|
|
<a href="?page={{ page - 1 }}&per_page={{ per_page }}" class="btn btn-secondary">
|
|
<i class="fas fa-chevron-left"></i> Anterior
|
|
</a>
|
|
{% endif %}
|
|
|
|
<span style="margin: 0 20px;">Página {{ page }} de {{ total_pages }}</span>
|
|
|
|
{% if page < total_pages %}
|
|
<a href="?page={{ page + 1 }}&per_page={{ per_page }}" class="btn">
|
|
Siguiente <i class="fas fa-chevron-right"></i>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<style>
|
|
#traducciones-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: 25px;
|
|
}
|
|
|
|
.lang-badge {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 3px 8px;
|
|
border-radius: 4px;
|
|
font-size: 0.75rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.category-badge {
|
|
background: var(--accent-color);
|
|
color: white;
|
|
padding: 3px 8px;
|
|
border-radius: 4px;
|
|
font-size: 0.75rem;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.noticia-footer {
|
|
margin-top: 15px;
|
|
padding-top: 10px;
|
|
border-top: 1px solid var(--border-color);
|
|
color: #888;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.pagination .btn {
|
|
margin: 0 5px;
|
|
}
|
|
</style>
|
|
{% endblock %}
|