Added a night vision and modified the theme of the application

This commit is contained in:
JKuijperM 2026-07-30 08:26:48 +02:00
parent 176f9d075c
commit 07b9b7c878
24 changed files with 663 additions and 429 deletions

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,20 @@
document.addEventListener('DOMContentLoaded', function () {
var toggle = document.getElementById('themeToggle');
if (!toggle) {
return;
}
function applyIcon(theme) {
toggle.textContent = theme === 'dark' ? '☀️' : '🌙';
}
applyIcon(document.documentElement.getAttribute('data-theme'));
toggle.addEventListener('click', function () {
var next = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', next);
localStorage.setItem('theme', next);
applyIcon(next);
});
});

View File

@ -32,7 +32,7 @@
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button class="btn danger">Eliminar</button>
<a class="btn" href="{% url 'category_list' %}">Cancelar</a>
<button class="btn btn-danger">Eliminar</button>
<a class="btn btn-secondary" href="{% url 'category_list' %}">Cancelar</a>
</form>
{% endblock %}

View File

@ -10,7 +10,7 @@
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Guardar</button>
<a class="btn" href="{% url 'category_list' %}">Cancelar</a>
<button type="submit" class="btn btn-primary">Guardar</button>
<a class="btn btn-secondary" href="{% url 'category_list' %}">Cancelar</a>
</form>
{% endblock %}

View File

@ -12,7 +12,7 @@
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Crear</button>
<button type="submit" class="btn btn-primary">Crear</button>
</form>
<hr>

View File

@ -11,8 +11,8 @@
<form method="post">
{% csrf_token %}
<button class="btn">Sí, eliminar</button>
<a class="btn secondary" href="{% url 'account_list' %}">Cancelar</a>
<button class="btn btn-danger">Sí, eliminar</button>
<a class="btn btn-secondary" href="{% url 'account_list' %}">Cancelar</a>
</form>
{% endblock %}

View File

@ -14,8 +14,8 @@
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Guardar</button>
<a class="btn secondary" href="{% url 'account_list' %}">Cancelar</a>
<button type="submit" class="btn btn-primary">Guardar</button>
<a class="btn btn-secondary" href="{% url 'account_list' %}">Cancelar</a>
</form>
{% endblock %}

View File

@ -5,6 +5,15 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Expenses manager{% endblock %}</title>
<script>
(function() {
var theme = localStorage.getItem('theme');
if (!theme) {
theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
document.documentElement.setAttribute('data-theme', theme);
})();
</script>
<link rel="stylesheet" href="{% static 'expenses/css/base.css' %}">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{% block extra_css %}{% endblock %}
@ -39,6 +48,8 @@
<span class="spacer"></span>
<button type="button" class="theme-toggle" id="themeToggle" aria-label="Cambiar tema" title="Cambiar tema"></button>
<a href="{% url 'password_change' %}">{{ request.user.username }}</a>
<form method="post" action="{% url 'logout' %}" class="logout-form">
@ -65,5 +76,6 @@
{% block extra_js %}{% endblock %}
<script src="{% static 'expenses/js/nav.js' %}" defer></script>
<script src="{% static 'expenses/js/theme.js' %}" defer></script>
</body>
</html>

View File

@ -5,6 +5,15 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Login{% endblock %}</title>
<script>
(function() {
var theme = localStorage.getItem('theme');
if (!theme) {
theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
document.documentElement.setAttribute('data-theme', theme);
})();
</script>
<link rel="stylesheet" href="{% static 'expenses/css/base.css' %}">
</head>
<body>

View File

@ -89,7 +89,7 @@
Comparar periodo anterior
</label>
<button type="submit">Aplicar Filtros</button>
<button type="submit" class="btn btn-primary">Aplicar Filtros</button>
</form>
</section>
<script>
@ -152,10 +152,10 @@
</div>
{% if selected_month == today.month and selected_year == today.year %}
<div class="kpi-card" style="border-left: 4px solid #ff9f43;">
<div class="kpi-card" style="border-left: 4px solid var(--color-warning-accent);">
<span class="kpi-label">Proyección fin de mes</span>
<span class="kpi-value">{{ projected_end_of_month|floatformat:2 }}€</span>
<small style="color: gray; display:block;">Basado en tu ritmo de gasto actual</small>
<small style="color: var(--color-text-muted); display:block;">Basado en tu ritmo de gasto actual</small>
</div>
{% endif %}
</section>
@ -167,10 +167,10 @@
Gastos periodo actual: <strong>{{ kpi_total|floatformat:2 }} €</strong><br>
Gastos periodo anterior: <strong>{{ kpi_previous_total|floatformat:2 }} €</strong><br>
Diferencia:
<strong style="color: {% if kpi_trend == 'up' %}#d9534f{% else %}#5cb85c{% endif %};">
<strong style="color: {% if kpi_trend == 'up' %}var(--color-danger-accent){% else %}var(--color-success-accent){% endif %};">
{% if kpi_trend == "up" %}+{% endif %}{{ kpi_difference|floatformat:2 }}€ ({{ kpi_percentage|floatformat:1 }}%)
</strong>
<small style="display:block; color:gray;">
<small style="display:block; color: var(--color-text-muted);">
{% if kpi_trend == "up" %}⚠️ Has gastado más que el periodo pasado. {% else %} ¡Bien! Has reducido tus gastos. {% endif %}
</small>
</p>
@ -192,7 +192,7 @@
<td>{{ cat.category }}</td>
<td>{{ cat.previous|floatformat:2 }}€</td>
<td>{{ cat.current|floatformat:2 }}€</td>
<td style="font-weight: bold; color: {% if cat.difference > 0 %}#d9534f{% else %}#5cb85c{% endif %};">
<td style="font-weight: bold; color: {% if cat.difference > 0 %}var(--color-danger-accent){% else %}var(--color-success-accent){% endif %};">
{% if cat.difference > 0 %}+{% endif %}{{ cat.difference|floatformat:2 }}€
</td>
</tr>
@ -242,7 +242,7 @@
<td>{{ exp.account.name }}</td>
<td>{{ exp.category.name }}</td>
<td>{{ exp.description|default:"-" }}</td>
<td style="color: #d9534f; font-weight: bold;">{{ exp.amount|floatformat:2 }}</td>
<td style="color: var(--color-danger-accent); font-weight: bold;">{{ exp.amount|floatformat:2 }}</td>
</tr>
{% empty %}
<tr><td colspan="7">No hay gastos recientes registrados</td></tr>

View File

@ -14,8 +14,8 @@
<form method="post">
{% csrf_token %}
<button class="btn">Sí, eliminar</button>
<a class="btn secondary" href="{% url 'expense_list' %}">Cancelar</a>
<button class="btn btn-danger">Sí, eliminar</button>
<a class="btn btn-secondary" href="{% url 'expense_list' %}">Cancelar</a>
</form>
{% endblock %}

View File

@ -46,14 +46,14 @@
{% endif %}
{% endfor %}
<button type="submit">
<button type="submit" class="btn btn-primary">
{% if form.instance.pk %}
Guardar gasto
{% else %}
Crear gasto
{% endif %}
</button>
</button>
</form>
<a href="{% url 'expense_list' %}">Volver</a>
<a class="btn btn-secondary" href="{% url 'expense_list' %}">Volver</a>
{% endblock %}

View File

@ -44,8 +44,8 @@
{% endfor %}
</select>
<button type="submit">Filtrar</button>
<a href="{% url 'expense_list' %}" class="btn-secondary">Limpiar</a>
<button type="submit" class="btn btn-primary">Filtrar</button>
<a href="{% url 'expense_list' %}" class="btn btn-secondary">Limpiar</a>
</div>
<br>

View File

@ -13,8 +13,8 @@
<form method="post">
{% csrf_token %}
<button class="btn">Sí, eliminar</button>
<a class="btn secondary" href="{% url 'income_list' %}">Cancelar</a>
<button class="btn btn-danger">Sí, eliminar</button>
<a class="btn btn-secondary" href="{% url 'income_list' %}">Cancelar</a>
</form>
{% endblock %}

View File

@ -19,7 +19,7 @@
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">
<button type="submit" class="btn btn-primary">
{% if form.instance.pk %}
Guardar ingreso
{% else %}
@ -28,5 +28,5 @@
</button>
</form>
<a class="btn secondary" href="{% url 'income_list' %}">Volver</a>
<a class="btn btn-secondary" href="{% url 'income_list' %}">Volver</a>
{% endblock %}

View File

@ -10,8 +10,8 @@
<form method="post">
{% csrf_token %}
<button class="btn">Eliminar</button>
<a class="btn secondary" href="{% url 'tag_list' %}">Cancelar</a>
<button class="btn btn-danger">Eliminar</button>
<a class="btn btn-secondary" href="{% url 'tag_list' %}">Cancelar</a>
</form>
{% endblock %}

View File

@ -6,8 +6,8 @@
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Guardar</button>
<button type="submit" class="btn btn-primary">Guardar</button>
</form>
<a class="btn secondary" href="{% url 'tag_list' %}">Volver</a>
<a class="btn btn-secondary" href="{% url 'tag_list' %}">Volver</a>
{% endblock %}

View File

@ -20,7 +20,7 @@
<form method="post">
{% csrf_token %}
{% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}
<button class="btn danger">Eliminar</button>
<a class="btn" href="{% url 'fuel_list' %}">Cancelar</a>
<button class="btn btn-danger">Eliminar</button>
<a class="btn btn-secondary" href="{% url 'fuel_list' %}">Cancelar</a>
</form>
{% endblock %}

View File

@ -21,7 +21,7 @@
{% csrf_token %}
{% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}
{{ form.as_p }}
<button type="submit">
<button type="submit" class="btn btn-primary">
{% if editing %}
Guardar repostaje
{% else %}
@ -31,10 +31,10 @@
</form>
{% if next %}
<a class="btn" href="{{ next }}">Volver</a>
<a class="btn btn-secondary" href="{{ next }}">Volver</a>
{% elif editing %}
<a class="btn" href="{% url 'expense_list' %}">Volver</a>
<a class="btn btn-secondary" href="{% url 'expense_list' %}">Volver</a>
{% else %}
<a class="btn" href="{% url 'fuel_list' %}">Volver</a>
<a class="btn btn-secondary" href="{% url 'fuel_list' %}">Volver</a>
{% endif %}
{% endblock %}

View File

@ -11,8 +11,8 @@
<form method="post">
{% csrf_token %}
<button class="btn">Eliminar</button>
<a class="btn secondary" href="{% url 'goal_list' %}">Cancelar</a>
<button class="btn btn-danger">Eliminar</button>
<a class="btn btn-secondary" href="{% url 'goal_list' %}">Cancelar</a>
</form>
{% endblock %}

View File

@ -11,10 +11,10 @@
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">
<button type="submit" class="btn btn-primary">
Guardar
</button>
</button>
</form>
<a class="btn secondary" href="{% url 'goal_list' %}">Volver</a>
<a class="btn btn-secondary" href="{% url 'goal_list' %}">Volver</a>
{% endblock %}

View File

@ -9,7 +9,7 @@
{% block content %}
<h2>Objetivos</h2>
<a class=btn href="{% url 'goal_create' %}"> Nuevo objetivo</a>
<a class="btn btn-primary" href="{% url 'goal_create' %}"> Nuevo objetivo</a>
<div class="table-wrap">
<table>

View File

@ -7,7 +7,7 @@
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Entrar</button>
<button type="submit" class="btn btn-primary">Entrar</button>
</form>
<p class="auth-help">

View File

@ -5,6 +5,6 @@
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Cambiar</button>
<button type="submit" class="btn btn-primary">Cambiar</button>
</form>
{% endblock %}