diff --git a/expenses_manager/expenses/static/expenses/css/base.css b/expenses_manager/expenses/static/expenses/css/base.css index fb214c5..e827586 100644 --- a/expenses_manager/expenses/static/expenses/css/base.css +++ b/expenses_manager/expenses/static/expenses/css/base.css @@ -1108,3 +1108,36 @@ tr:hover { height: 260px; } } + +.info-panel { + margin-bottom: 1.5rem; + border: 1px solid var(--color-border); + border-radius: 6px; + background: var(--color-surface-alt); +} + +.info-panel summary { + padding: 0.75rem 1rem; + cursor: pointer; + font-weight: 500; +} + +.info-panel-content { + padding: 0 1rem 1rem; +} + +.info-panel-content h2 { + margin: 1rem 0 0.25rem; + font-size: 1rem; +} + +.info-panel-content p, +.info-panel-content ul { + margin: 0.25rem 0; + font-size: 0.9rem; + color: var(--color-text-muted); +} + +.info-panel-content ul { + padding-left: 1.2rem; +} diff --git a/expenses_manager/expenses/templates/goals/form.html b/expenses_manager/expenses/templates/goals/form.html index 2c2b2e4..531e076 100644 --- a/expenses_manager/expenses/templates/goals/form.html +++ b/expenses_manager/expenses/templates/goals/form.html @@ -8,6 +8,64 @@ {{ title }} +
+ ¿Qué tipo de objetivo necesito? + +
+

Pago / deuda

+

+ Para algo que quieres terminar de pagar: devolver un préstamo, + costear un viaje a plazos, reunir el importe de una compra grande. + El progreso es la suma de los gastos de la categoría elegida desde + la fecha de inicio, y llegar al 100% es haberlo conseguido. +

+ +

Presupuesto

+

+ Para ponerte un límite de gasto que no quieres superar. El progreso + se reinicia cada mes o cada año, según el periodo que elijas. + Aquí acercarse al 100% es un aviso, no un logro: la barra pasa a + naranja al llegar al 80% y a rojo si te pasas del límite. +

+ +

Ahorro

+

+ Para acumular dinero hasta una cantidad. Se mide con el saldo de la + cuenta que asocies, así que necesita una cuenta en vez de una + categoría. +

+ +

Los demás campos

+ +
+
+
{% csrf_token %} {% include "expenses/_form_fields.html" %}