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

126
app/templates/dashboard.html
View File

@@ -1,71 +1,97 @@
{% extends "base.html" %}
{% block title %}Tableau de bord{% endblock %}
{% block title %}Journal de bord{% endblock %}
{% block content %}
<div class="bg-white rounded-xl shadow p-4 mb-4">
<h2 class="font-semibold text-gray-700 mb-2">
Aujourd'hui — {{ today | date_fr }}
</h2>
<!-- En-tête date -->
<div class="mb-5">
<p class="font-display text-2xl font-semibold" style="color:var(--ink); letter-spacing:-0.01em;">
{{ today | date_fr }}
</p>
</div>
<!-- Carte aujourd'hui -->
<div class="card card-amber">
<p class="card-label">Aujourd'hui</p>
{% if today_entry %}
<p class="text-green-700 font-medium">{{ today_entry.day_type }} — {{ today_entry.total_hours_str() }}</p>
<a href="/entries/{{ today_entry.id }}/edit"
class="mt-2 inline-block text-sm text-blue-600 hover:underline">Modifier</a>
<div class="flex items-baseline gap-3">
<span class="stat-number">{{ today_entry.total_hours_str() }}</span>
<span class="stat-sub">travaillées</span>
</div>
<div class="flex items-center justify-between mt-3">
<span class="text-xs font-semibold px-2 py-0.5 rounded" style="background:var(--parchment); color:#6A6258; letter-spacing:0.06em;">
{{ today_entry.day_type }}{% if today_entry.motor_vehicle_id %} · {{ today_entry.motor_vehicle_id }}{% endif %}
</span>
<a href="/entries/{{ today_entry.id }}/edit"
class="text-xs font-semibold" style="color:var(--amber);">Modifier →</a>
</div>
{% if today_entry.comment %}
<p class="mt-2 text-xs italic" style="color:#9A9288;">{{ today_entry.comment }}</p>
{% endif %}
{% else %}
<a href="/entries/new"
class="block w-full text-center bg-blue-600 text-white py-3 rounded-lg font-semibold text-lg hover:bg-blue-700 active:bg-blue-800 transition">
<a href="/entries/new" class="btn-primary btn-amber mt-1" style="letter-spacing:0.06em;">
+ Saisir ma journée
</a>
{% endif %}
</div>
<div class="bg-white rounded-xl shadow p-4 mb-4">
<h2 class="font-semibold text-gray-700 mb-3">Semaine courante</h2>
<div class="flex justify-between items-center">
<span class="text-gray-600">Total</span>
<span class="font-bold text-xl">{{ week_actual_str }}</span>
</div>
<div class="flex justify-between items-center mt-1">
<span class="text-gray-600">Écart vs 38h45</span>
<span class="font-medium {% if week_balance >= 0 %}text-green-600{% else %}text-red-600{% endif %}">
{{ '+' if week_balance >= 0 else '-' }}{{ week_balance_str }}
<!-- Carte semaine -->
<div class="card card-ink">
<p class="card-label">Semaine en cours</p>
<div class="flex items-end justify-between">
<div>
<span class="stat-number">{{ week_actual_str }}</span>
<p class="stat-sub mt-1">objectif 38h45</p>
</div>
<span class="balance-badge {% if week_balance >= 0 %}balance-pos{% else %}balance-neg{% endif %}">
{{ '+' if week_balance >= 0 else '−' }}{{ week_balance_str }}
</span>
</div>
</div>
<div class="bg-white rounded-xl shadow p-4 mb-4">
<h2 class="font-semibold text-gray-700 mb-3">Ce mois</h2>
{% for vehicle_id, km in month_km.items() %}
<div class="flex justify-between text-sm text-gray-600 mb-1">
<span>{{ vehicle_id | capitalize }}</span>
<span>{{ km }} km</span>
</div>
{% endfor %}
<div class="flex justify-between text-sm text-gray-600 mt-2">
<span>CO₂</span>
<span>{{ month_co2_kg }} kg</span>
<!-- Carte mois -->
{% if month_km %}
<div class="card card-mist">
<p class="card-label">Ce mois — déplacements</p>
<div class="space-y-2 mt-1">
{% for vehicle_id, km in month_km.items() %}
<div class="flex items-baseline justify-between">
<span class="text-xs" style="color:#8A8278;">{{ vehicle_id | capitalize }}</span>
<span class="font-data font-semibold text-sm" style="color:var(--ink);">{{ km }} <span class="font-normal text-xs" style="color:#9A9288;">km</span></span>
</div>
{% endfor %}
<div class="flex items-baseline justify-between pt-1" style="border-top:1px solid var(--parchment);">
<span class="text-xs" style="color:#8A8278;">CO₂</span>
<span class="font-data font-semibold text-sm" style="color:var(--ink);">{{ month_co2_kg }} <span class="font-normal text-xs" style="color:#9A9288;">kg</span></span>
</div>
</div>
</div>
{% endif %}
<div class="bg-white rounded-xl shadow p-4">
<h2 class="font-semibold text-gray-700 mb-3">Congés / RTT</h2>
<div class="mb-3">
<div class="flex justify-between text-sm mb-1">
<span>Congés</span>
<span>{{ used.conges }} / {{ balance.conges_total }} j</span>
<!-- Carte congés / RTT -->
<div class="card card-sage">
<p class="card-label">Solde congés &amp; RTT</p>
<div class="space-y-3 mt-1">
<div>
<div class="flex justify-between items-baseline">
<span class="text-xs font-semibold" style="color:#8A8278; letter-spacing:0.06em;">CONGÉS</span>
<span class="font-data text-sm font-semibold" style="color:var(--ink);">
{{ used.conges }}<span class="font-normal text-xs" style="color:#9A9288;"> / {{ balance.conges_total }} j</span>
</span>
</div>
<div class="progress-track">
<div class="progress-fill" style="width:{{ [[used.conges / balance.conges_total * 100, 100] | min, 0] | max }}%; background:var(--sage);"></div>
</div>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-blue-500 h-2 rounded-full"
style="width: {{ [[used.conges / balance.conges_total * 100, 100] | min, 0] | max }}%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span>RTT</span>
<span>{{ used.rtt }} / {{ balance.rtt_total }} j</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-purple-500 h-2 rounded-full"
style="width: {{ [[used.rtt / balance.rtt_total * 100, 100] | min, 0] | max }}%"></div>
<div>
<div class="flex justify-between items-baseline">
<span class="text-xs font-semibold" style="color:#8A8278; letter-spacing:0.06em;">RTT</span>
<span class="font-data text-sm font-semibold" style="color:var(--ink);">
{{ used.rtt }}<span class="font-normal text-xs" style="color:#9A9288;"> / {{ balance.rtt_total }} j</span>
</span>
</div>
<div class="progress-track">
<div class="progress-fill" style="width:{{ [[used.rtt / balance.rtt_total * 100, 100] | min, 0] | max }}%; background:var(--amber);"></div>
</div>
</div>
</div>
</div>