AntoineVe/tableau-de-bord
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: refonte UI — journal de bord (Playfair + JetBrains Mono, palette encre/crème/ambre)

Browse Source
This commit is contained in:
Antoine Van Elstraete
2026-03-11 18:46:04 +01:00
parent 23dbc3f870
commit c3a7bdfef7
6 changed files with 453 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
app/templates/reports.html
View File

@@ -1,12 +1,12 @@
{% extends "base.html" %}
{% block title %}Rapports{% endblock %}
{% block title %}Rapports {{ year }}{% endblock %}
{% block content %}
<div class="flex items-center justify-between mb-4">
<h1 class="text-xl font-bold">Rapports {{ year }}</h1>
<!-- En-tête -->
<div class="flex items-baseline justify-between mb-5">
<p class="font-display text-2xl font-semibold" style="color:var(--ink);">Rapports</p>
<form method="GET">
<select name="year" onchange="this.form.submit()"
class="border rounded-lg px-2 py-1 text-sm">
<select name="year" onchange="this.form.submit()" class="field-input" style="width:auto; padding:0.3rem 0.6rem; font-size:0.8rem;">
{% for y in range(2024, year + 2) %}
<option value="{{ y }}" {% if y == year %}selected{% endif %}>{{ y }}</option>
{% endfor %}
@@ -14,31 +14,48 @@
</form>
</div>
<div class="bg-white rounded-xl shadow p-4 mb-4">
<h2 class="font-semibold text-gray-700 mb-3">Kilométrage annuel</h2>
{% for vehicle_id, km in total_km.items() %}
<div class="flex justify-between py-1 border-b border-gray-100 last:border-0">
<span class="text-sm text-gray-600">{{ vehicles.get(vehicle_id, {}).get('name', vehicle_id) }}</span>
<span class="font-medium text-sm">{{ km }} km</span>
</div>
{% endfor %}
<div class="flex justify-between pt-2 mt-1">
<span class="text-sm text-gray-500">CO₂ total</span>
<span class="font-medium text-sm">{{ total_co2_kg }} kg</span>
</div>
<!-- Kilométrage -->
<div class="card card-ink">
<p class="card-label">Kilométrage {{ year }}</p>
{% if total_km %}
<div class="space-y-3 mt-1">
{% for vehicle_id, km in total_km.items() %}
<div class="flex items-baseline justify-between">
<span class="text-xs" style="color:#8A8278;">{{ vehicles.get(vehicle_id, {}).get('name', vehicle_id) }}</span>
<span class="font-data font-semibold" style="font-size:1.35rem; color:var(--ink);">
{{ km }}<span class="font-normal text-xs ml-1" style="color:#9A9288;">km</span>
</span>
</div>
{% endfor %}
<div class="flex items-baseline justify-between pt-2" style="border-top:1px solid var(--parchment);">
<span class="text-xs font-semibold" style="color:#8A8278; letter-spacing:0.06em;">CO₂ TOTAL</span>
<span class="font-data font-semibold" style="font-size:1.35rem; color:var(--ink);">
{{ total_co2_kg }}<span class="font-normal text-xs ml-1" style="color:#9A9288;">kg</span>
</span>
</div>
</div>
{% else %}
<p class="mt-1 text-sm" style="color:#9A9288;">Aucun déplacement enregistré pour {{ year }}.</p>
{% endif %}
</div>
<div class="bg-white rounded-xl shadow p-4 mb-4">
<h2 class="font-semibold text-gray-700 mb-1">Frais réels (barème {{ year }})</h2>
<p class="text-xs text-gray-400 mb-3">Déduction fiscale estimée — véhicules motorisés uniquement</p>
{% for vehicle_id, montant in frais_reels.items() %}
<div class="flex justify-between py-1 border-b border-gray-100 last:border-0">
<span class="text-sm text-gray-600">{{ vehicles.get(vehicle_id, {}).get('name', vehicle_id) }}</span>
<span class="font-bold text-green-700">{{ montant }} €</span>
</div>
{% endfor %}
{% if not frais_reels %}
<p class="text-sm text-gray-400">Aucune donnée pour {{ year }}.</p>
<!-- Frais réels -->
<div class="card card-sage">
<p class="card-label">Frais réels — barème {{ year }}</p>
<p class="text-xs mb-3" style="color:#9A9288;">Déduction fiscale estimée · véhicules motorisés uniquement</p>
{% if frais_reels %}
<div class="space-y-3">
{% for vehicle_id, montant in frais_reels.items() %}
<div class="flex items-baseline justify-between">
<span class="text-xs" style="color:#8A8278;">{{ vehicles.get(vehicle_id, {}).get('name', vehicle_id) }}</span>
<span class="font-data font-bold" style="font-size:1.6rem; color:var(--sage);">
{{ montant }}<span class="font-normal text-sm ml-1" style="color:#9A9288;">€</span>
</span>
</div>
{% endfor %}
</div>
{% else %}
<p class="text-sm" style="color:#9A9288;">Aucune donnée pour {{ year }}.</p>
{% endif %}
</div>