114 lines
No EOL
3.4 KiB
HTML
114 lines
No EOL
3.4 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Mis Favoritos{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="favoritos-page">
|
|
<h2><i class="fas fa-star"></i> Mis Favoritos</h2>
|
|
|
|
{% if noticias %}
|
|
<p class="favoritos-count">{{ noticias|length }} noticia{{ 's' if noticias|length > 1 else '' }} guardada{{ 's' if
|
|
noticias|length > 1 else '' }}</p>
|
|
|
|
<ul class="noticias-list">
|
|
{% for n in noticias %}
|
|
<li class="noticia-item">
|
|
{% if n.imagen_url %}
|
|
<div class="noticia-imagen">
|
|
<img src="{{ n.imagen_url }}" loading="lazy" onerror="this.parentElement.style.display='none'">
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="noticia-texto">
|
|
<h3 class="m0">
|
|
<a href="{{ url_for('noticia.noticia', id=n.id) }}">
|
|
{{ n.titulo_trad or n.titulo }}
|
|
</a>
|
|
</h3>
|
|
|
|
<div class="noticia-meta">
|
|
{% if n.fecha %}
|
|
<i class="far fa-calendar-alt"></i>
|
|
{{ n.fecha.strftime('%d-%m-%Y %H:%M') if n.fecha else '' }}
|
|
{% endif %}
|
|
{% if n.fuente_nombre %} | {{ n.fuente_nombre }}{% endif %}
|
|
{% if n.pais %} | {{ n.pais|country_flag }} {{ n.pais }}{% endif %}
|
|
</div>
|
|
|
|
<p class="noticia-resumen">{{ (n.resumen_trad or n.resumen or '')[:200] }}...</p>
|
|
|
|
<button class="btn-remove-fav" onclick="removeFavorite('{{ n.id }}', this)" title="Quitar de favoritos">
|
|
<i class="fas fa-trash"></i> Quitar
|
|
</button>
|
|
</div>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% else %}
|
|
<div class="empty-state">
|
|
<i class="far fa-star"></i>
|
|
<p>No tienes noticias guardadas.</p>
|
|
<a href="{{ url_for('home.home') }}" class="btn btn-dark">Ver noticias</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<style>
|
|
.favoritos-page h2 {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.favoritos-count {
|
|
color: var(--text-muted, #666);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 3rem;
|
|
color: var(--text-muted, #666);
|
|
}
|
|
|
|
.empty-state i {
|
|
font-size: 3rem;
|
|
margin-bottom: 1rem;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.btn-remove-fav {
|
|
margin-top: 0.5rem;
|
|
padding: 0.4rem 0.8rem;
|
|
background: transparent;
|
|
border: 1px solid #dc3545;
|
|
color: #dc3545;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 0.8rem;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-remove-fav:hover {
|
|
background: #dc3545;
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
async function removeFavorite(noticiaId, btn) {
|
|
const response = await fetch(`/favoritos/toggle/${noticiaId}`, { method: 'POST' });
|
|
if (response.ok) {
|
|
btn.closest('.noticia-item').remove();
|
|
// Update count
|
|
const remaining = document.querySelectorAll('.noticia-item').length;
|
|
if (remaining === 0) {
|
|
location.reload();
|
|
} else {
|
|
document.querySelector('.favoritos-count').textContent =
|
|
`${remaining} noticia${remaining > 1 ? 's' : ''} guardada${remaining > 1 ? 's' : ''}`;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %} |