86 lines
4.0 KiB
Twig
86 lines
4.0 KiB
Twig
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}Association Kaz{% endblock %}</title>
|
|
<link rel="icon" href="{{ asset("img/logo.svg") }}">
|
|
|
|
{% block stylesheets %}
|
|
<link rel="stylesheet" href="{{ asset('styles/app.css') }}">
|
|
{% endblock %}
|
|
|
|
{% block javascripts %}
|
|
{{ importmap('app') }}
|
|
{% endblock %}
|
|
</head>
|
|
|
|
<body class="min-h-screen flex flex-col font-sora antialiased text-text bg-bg-primaire">
|
|
|
|
{{ include('_navbar.html.twig') }}
|
|
|
|
{# Contenu principal #}
|
|
<main class="flex-grow">
|
|
{# Gestion du responsive et l'espacement pour toutes les pages #}
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
{# Affichage des messages flash (Succès ou Erreur) #}
|
|
{% for label, messages in app.flashes %}
|
|
{% for message in messages %}
|
|
{# Réglages des couleurs que prendront les messages en fonction de leur(s) paramètre(s) #}
|
|
{% set colorClasses = {
|
|
'success': 'bg-green-50 border-green-200 text-green-800',
|
|
'error': 'bg-red-50 border-red-200 text-red-800',
|
|
'warning': 'bg-yellow-50 border-yellow-200 text-yellow-800',
|
|
'info': 'bg-blue-50 border-blue-200 text-blue-800'
|
|
} %}
|
|
|
|
{# Affichage du message de la couleur définie par sa fonction #}
|
|
<div
|
|
class="flex items-center p-4 mb-4 rounded-lg border shadow-sm {{ colorClasses[label] ?? colorClasses['info'] }}"
|
|
role="alert">
|
|
<div class="text-sm font-semibold flex-grow">
|
|
{{ message }}
|
|
</div>
|
|
|
|
{# Affichage du boutton "x" pour fermer le message flash #}
|
|
<button type="button"
|
|
onclick="this.parentElement.remove()"
|
|
class="ml-4 hover:opacity-50 transition-opacity"
|
|
aria-label="Fermer">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
{% endfor %}
|
|
{% endfor %}
|
|
{# Affichage du body spécifique à chaque page #}
|
|
{% block body %}{% endblock %}
|
|
</div>
|
|
</main>
|
|
|
|
{# Gestion du pied-de-page #}
|
|
<footer class="w-full bg-white border-t border-gris-clair mt-auto">
|
|
<div
|
|
class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-6">
|
|
<div class="flex items-center gap-3 text-sm text-gris-fonce text-center md:text-left">
|
|
<img src="{{ asset('img/logo.svg') }}" alt="Logo" class="h-6 w-auto opacity-80">
|
|
<p>© {{ 'now'|date('Y') }} — Kaz. Le numérique sobre, libre, éthique et local.</p>
|
|
</div>
|
|
|
|
<nav>
|
|
<ul class="flex flex-wrap justify-center gap-6 text-sm text-gris-fonce">
|
|
<li><a href="https://kaz.bzh/mentions-legales/" target="_blank"
|
|
class="hover:text-bouton transition-colors">Mentions légales</a></li>
|
|
<li><a href="https://status.kaz.bzh/status/kaz" target="_blank"
|
|
class="hover:text-bouton transition-colors">État des services</a></li>
|
|
<li><a href="https://kaz.bzh/contact/" target="_blank"
|
|
class="hover:text-bouton transition-colors">Contact</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|