feat: redesign dark futuriste (Luca) — thème cyan/volt, sidebar dark, JetBrains Mono + README
This commit is contained in:
@@ -1,49 +1,74 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ client.nom }} {{ client.prenom }} - GarageManager{% endblock %}
|
||||
{% block title %}{{ client.nom }} {{ client.prenom }} — GarageManager{% endblock %}
|
||||
{% block content %}
|
||||
<div class="mb-6">
|
||||
<a href="/clients" class="text-slate-500 hover:text-slate-700 text-sm flex items-center gap-1 mb-4"><i class="fas fa-arrow-left"></i> Retour aux clients</a>
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold text-slate-800">{{ client.nom }} {{ client.prenom }}</h2>
|
||||
<div class="flex flex-wrap gap-4 mt-2 text-sm text-slate-500">
|
||||
{% if client.telephone %}<span><i class="fas fa-phone mr-1"></i>{{ client.telephone }}</span>{% endif %}
|
||||
{% if client.email %}<span><i class="fas fa-envelope mr-1"></i>{{ client.email }}</span>{% endif %}
|
||||
{% if client.adresse %}<span><i class="fas fa-map-marker-alt mr-1"></i>{{ client.adresse }}</span>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<a href="/clients/{{ client.id }}/edit" class="border border-orange-300 text-orange-500 px-4 py-2 rounded-lg text-sm hover:bg-orange-50">Modifier</a>
|
||||
<form method="post" action="/clients/{{ client.id }}/delete" onsubmit="return confirm('Supprimer ce client et tous ses véhicules ?')">
|
||||
<button class="border border-red-300 text-red-500 px-4 py-2 rounded-lg text-sm hover:bg-red-50">Supprimer</button>
|
||||
</form>
|
||||
|
||||
<a href="/clients" class="back-link"><i class="fas fa-arrow-left"></i> Retour aux clients</a>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex justify-between items-start mb-8">
|
||||
<div>
|
||||
<h1 class="page-title">{{ client.nom }} {{ client.prenom }}</h1>
|
||||
<div class="flex gap-4 mt-2" style="flex-wrap:wrap">
|
||||
{% if client.telephone %}
|
||||
<span class="text-sm text-secondary"><i class="fas fa-phone mr-1 text-electric"></i>{{ client.telephone }}</span>
|
||||
{% endif %}
|
||||
{% if client.email %}
|
||||
<span class="text-sm text-secondary"><i class="fas fa-envelope mr-1 text-electric"></i>{{ client.email }}</span>
|
||||
{% endif %}
|
||||
{% if client.adresse %}
|
||||
<span class="text-sm text-secondary"><i class="fas fa-map-marker-alt mr-1 text-electric"></i>{{ client.adresse }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<a href="/clients/{{ client.id }}/edit" class="btn-secondary btn-sm">
|
||||
<i class="fas fa-edit"></i> Modifier
|
||||
</a>
|
||||
<form method="post" action="/clients/{{ client.id }}/delete" onsubmit="return confirm('Supprimer ce client et tous ses véhicules ?')">
|
||||
<button class="btn-danger btn-sm">
|
||||
<i class="fas fa-trash"></i> Supprimer
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow">
|
||||
<div class="p-6 border-b border-gray-100 flex justify-between items-center">
|
||||
<h3 class="font-semibold text-slate-800">Véhicules ({{ vehicules|length }})</h3>
|
||||
<a href="/vehicules/new" class="bg-orange-500 text-white px-4 py-2 rounded-lg text-sm hover:bg-orange-600">+ Ajouter un véhicule</a>
|
||||
|
||||
<!-- Véhicules du client -->
|
||||
<div class="card" style="padding:0">
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<i class="fas fa-car text-electric" style="margin-right:0.4rem"></i>
|
||||
Véhicules
|
||||
<span class="badge badge-info ml-2">{{ vehicules|length }}</span>
|
||||
</span>
|
||||
<a href="/vehicules/new" class="btn-primary btn-sm">
|
||||
<i class="fas fa-plus"></i> Ajouter
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% if vehicules %}
|
||||
<div class="divide-y divide-gray-100">
|
||||
<div>
|
||||
{% for v in vehicules %}
|
||||
<div class="px-6 py-4 flex justify-between items-center hover:bg-gray-50">
|
||||
<div style="padding:1rem 1.5rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;transition:background 0.15s" onmouseover="this.style.background='rgba(0,212,255,0.03)'" onmouseout="this.style.background=''">
|
||||
<div>
|
||||
<span class="font-medium text-slate-800">{{ v.immatriculation }}</span>
|
||||
<span class="text-slate-500 ml-2">{{ v.marque }} {{ v.modele }}</span>
|
||||
{% if v.annee %}<span class="text-slate-400 text-sm ml-2">({{ v.annee }})</span>{% endif %}
|
||||
{% if v.kilometrage %}<span class="text-slate-400 text-sm ml-2">— {{ v.kilometrage }} km</span>{% endif %}
|
||||
<span class="font-semibold mono" style="color:var(--accent-electric)">{{ v.immatriculation }}</span>
|
||||
<span class="text-secondary ml-2">{{ v.marque }} {{ v.modele }}</span>
|
||||
{% if v.annee %}<span class="text-muted text-xs ml-2">({{ v.annee }})</span>{% endif %}
|
||||
{% if v.kilometrage %}<span class="text-muted text-xs ml-2 mono">— {{ v.kilometrage }} km</span>{% endif %}
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="bg-gray-100 text-gray-600 px-2 py-1 rounded-full text-xs">{{ v.nb_interventions }} intervention(s)</span>
|
||||
<a href="/vehicules/{{ v.id }}" class="text-blue-500 hover:underline text-sm">Voir →</a>
|
||||
<span class="badge badge-info">{{ v.nb_interventions }} intervention(s)</span>
|
||||
<a href="/vehicules/{{ v.id }}" class="link-action text-sm">Voir →</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="p-8 text-center text-slate-400 text-sm">Aucun véhicule enregistré pour ce client.</div>
|
||||
<div class="empty-state">
|
||||
<i class="fas fa-car"></i>
|
||||
<p>Aucun véhicule enregistré pour ce client</p>
|
||||
<a href="/vehicules/new" class="link-action">Ajouter un véhicule →</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user