183 lines
No EOL
9.6 KiB
HTML
183 lines
No EOL
9.6 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Tu Cuenta - {{ user.username }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div style="max-width: 900px; margin: 20px auto;">
|
|
<h2 style="margin-bottom: 30px;"><i class="fas fa-user-circle"></i> Tu Cuenta</h2>
|
|
|
|
<!-- User Info Card -->
|
|
<div style="background: #f9f9f9; padding: 25px; border-radius: 10px; margin-bottom: 25px;">
|
|
<h3 style="margin-top: 0; color: #6c63ff;">Información del Perfil</h3>
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
|
|
<div style="text-align: center; margin-bottom: 15px;">
|
|
{% if user.avatar_url %}
|
|
<img src="{{ user.avatar_url }}" alt="Avatar" style="width: 120px; height: 120px; object-fit: cover; border-radius: 50%; border: 3px solid #6c63ff; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
|
|
{% else %}
|
|
<div style="width: 120px; height: 120px; background: #e0e0e0; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; color: #888; font-size: 50px;">
|
|
<i class="fas fa-user"></i>
|
|
</div>
|
|
{% endif %}
|
|
<form action="{{ url_for('account.upload_avatar') }}" method="post" enctype="multipart/form-data" style="margin-top: 15px;">
|
|
<input type="file" name="avatar" id="avatar" accept="image/*" style="display: none;" onchange="this.form.submit()">
|
|
<label for="avatar" style="cursor: pointer; padding: 6px 12px; border: 1px solid #6c63ff; color: #6c63ff; background: transparent; border-radius: 4px; font-size: 14px; transition: all 0.2s;">
|
|
<i class="fas fa-camera"></i> Cambiar foto
|
|
</label>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<strong>Usuario:</strong> {{ user.username }}
|
|
</div>
|
|
<div>
|
|
<strong>Email:</strong> {{ user.email }}
|
|
</div>
|
|
<div>
|
|
<strong>Miembro desde:</strong> {{ user.created_at.strftime('%d/%m/%Y') }}
|
|
</div>
|
|
<div>
|
|
<strong>Último acceso:</strong> {{ user.last_login.strftime('%d/%m/%Y %H:%M') if user.last_login else
|
|
'N/A' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistics Card -->
|
|
<div style="background: #f9f9f9; padding: 25px; border-radius: 10px; margin-bottom: 25px;">
|
|
<h3 style="margin-top: 0; color: #6c63ff;">Estadísticas</h3>
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;">
|
|
<div style="text-align: center; padding: 15px; background: white; border-radius: 8px;">
|
|
<div style="font-size: 32px; font-weight: bold; color: #6c63ff;">{{ favorites_count }}</div>
|
|
<div style="color: #666; margin-top: 5px;">Favoritos guardados</div>
|
|
</div>
|
|
<div style="text-align: center; padding: 15px; background: white; border-radius: 8px;">
|
|
<div style="font-size: 32px; font-weight: bold; color: #6c63ff;">{{ searches_count }}</div>
|
|
<div style="color: #666; margin-top: 5px;">Búsquedas realizadas</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Searches -->
|
|
{% if recent_searches %}
|
|
<div style="background: #f9f9f9; padding: 25px; border-radius: 10px; margin-bottom: 25px;">
|
|
<h3 style="margin-top: 0; color: #6c63ff;">Búsquedas Recientes</h3>
|
|
<div style="overflow-x: auto;">
|
|
<table style="width: 100%; border-collapse: collapse;">
|
|
<thead>
|
|
<tr style="border-bottom: 2px solid #ddd;">
|
|
<th style="padding: 10px; text-align: left;">Búsqueda</th>
|
|
<th style="padding: 10px; text-align: center;">Resultados</th>
|
|
<th style="padding: 10px; text-align: right;">Fecha</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for search in recent_searches %}
|
|
<tr style="border-bottom: 1px solid #eee;">
|
|
<td style="padding: 10px;">
|
|
<a href="/api/search?q={{ search.query | urlencode }}"
|
|
style="color: #6c63ff; text-decoration: none;">
|
|
{{ search.query }}
|
|
</a>
|
|
</td>
|
|
<td style="padding: 10px; text-align: center;">{{ search.results_count }}</td>
|
|
<td style="padding: 10px; text-align: right; color: #666; font-size: 14px;">
|
|
{{ search.searched_at.strftime('%d/%m/%Y %H:%M') }}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% if searches_count > 10 %}
|
|
<div style="text-align: center; margin-top: 15px;">
|
|
<a href="{{ url_for('account.search_history') }}"
|
|
style="color: #6c63ff; text-decoration: none; font-weight: 500;">
|
|
Ver historial completo →
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Recent Favorites -->
|
|
{% if recent_favorites %}
|
|
<div style="background: #f9f9f9; padding: 25px; border-radius: 10px; margin-bottom: 25px;">
|
|
<h3 style="margin-top: 0; color: #6c63ff;">Favoritos Recientes</h3>
|
|
<div style="display: grid; gap: 15px;">
|
|
{% for noticia in recent_favorites %}
|
|
<div style="display: flex; gap: 15px; padding: 15px; background: white; border-radius: 8px;">
|
|
{% if noticia.imagen_url %}
|
|
<img src="{{ noticia.imagen_url }}" alt=""
|
|
style="width: 100px; height: 70px; object-fit: cover; border-radius: 5px;">
|
|
{% endif %}
|
|
<div style="flex: 1;">
|
|
{% if noticia.traduccion_id %}
|
|
<a href="/noticia?tr_id={{ noticia.traduccion_id }}"
|
|
style="color: #333; text-decoration: none; font-weight: 500;">
|
|
{{ noticia.titulo_trad or noticia.titulo }}
|
|
</a>
|
|
{% else %}
|
|
<a href="/noticia?id={{ noticia.id }}"
|
|
style="color: #333; text-decoration: none; font-weight: 500;">
|
|
{{ noticia.titulo }}
|
|
</a>
|
|
{% endif %}
|
|
<div style="color: #666; font-size: 12px; margin-top: 5px;">
|
|
Guardado: {{ noticia.created_at.strftime('%d/%m/%Y') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div style="text-align: center; margin-top: 15px;">
|
|
<a href="{{ url_for('favoritos.view_favorites') }}"
|
|
style="color: #6c63ff; text-decoration: none; font-weight: 500;">
|
|
Ver todos los favoritos →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Account Actions -->
|
|
<div style="background: #f9f9f9; padding: 25px; border-radius: 10px;">
|
|
<h3 style="margin-top: 0; color: #6c63ff;">Acciones</h3>
|
|
|
|
<!-- Change Password Form -->
|
|
<details style="margin-bottom: 20px;">
|
|
<summary style="cursor: pointer; font-weight: 500; padding: 10px; background: white; border-radius: 5px;">
|
|
<i class="fas fa-key"></i> Cambiar contraseña
|
|
</summary>
|
|
<form method="post" action="{{ url_for('account.change_password') }}"
|
|
style="margin-top: 15px; padding: 15px; background: white; border-radius: 5px;">
|
|
<div style="margin-bottom: 15px;">
|
|
<label for="current_password" style="display: block; margin-bottom: 5px;">Contraseña actual</label>
|
|
<input type="password" id="current_password" name="current_password" required
|
|
style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
|
|
</div>
|
|
<div style="margin-bottom: 15px;">
|
|
<label for="new_password" style="display: block; margin-bottom: 5px;">Nueva contraseña</label>
|
|
<input type="password" id="new_password" name="new_password" required minlength="6"
|
|
style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
|
|
</div>
|
|
<div style="margin-bottom: 15px;">
|
|
<label for="new_password_confirm" style="display: block; margin-bottom: 5px;">Confirmar nueva
|
|
contraseña</label>
|
|
<input type="password" id="new_password_confirm" name="new_password_confirm" required minlength="6"
|
|
style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
|
|
</div>
|
|
<button type="submit"
|
|
style="padding: 10px 20px; background: #6c63ff; color: white; border: none; border-radius: 5px; cursor: pointer;">
|
|
Actualizar contraseña
|
|
</button>
|
|
</form>
|
|
</details>
|
|
|
|
<form method="post" action="{{ url_for('auth.logout') }}">
|
|
<button type="submit"
|
|
style="padding: 12px 24px; background: #dc3545; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 14px;">
|
|
<i class="fas fa-sign-out-alt"></i> Cerrar sesión
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |