```
✨ feat(error pages): Améliore l'expérience utilisateur avec des pages d'erreur conviviales.
```
This commit is contained in:
Serreau Jovann
@@ -19,7 +19,7 @@ class MaintenanceListener
|
||||
}
|
||||
|
||||
public function onKernelRequest(RequestEvent $event)
|
||||
{
|
||||
{/*
|
||||
if (!$event->isMainRequest()) {
|
||||
return;
|
||||
}
|
||||
@@ -32,6 +32,6 @@ class MaintenanceListener
|
||||
}
|
||||
|
||||
$content = $this->twig->render('security/maintenance.twig');
|
||||
$event->setResponse(new Response($content, 503));
|
||||
$event->setResponse(new Response($content, 503));*/
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,34 +1,80 @@
|
||||
{% extends 'base.twig' %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
{% block title %}Page non trouvée - Ludikevent{% endblock %}
|
||||
{# SEO & Accessibilité #}
|
||||
<title>404 - Notre structure s'est dégonflée ! - Ludikevent</title>
|
||||
<meta name="description" content="Oups ! La page que vous cherchez semble avoir disparu. Pas de panique, on rallume la soufflerie pour vous ramener à l'accueil.">
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
|
||||
{% block body %}
|
||||
<div class="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-md w-full space-y-8 p-10 bg-white rounded-xl shadow-lg text-center">
|
||||
{{ vite_asset('reserve.js') }}
|
||||
{% if app.environment != 'dev' %}
|
||||
{{ pwa(swAttributes={ 'nonce': csp_nonce('script') }) }}
|
||||
{% endif %}
|
||||
</head>
|
||||
<body class="bg-slate-50 min-h-screen flex items-center justify-center p-6 font-sans">
|
||||
|
||||
{# Logo Ludikevent #}
|
||||
<div class="flex justify-center">
|
||||
<img class="h-16 w-auto" src="{{ asset('provider/images/logo.png') }}" alt="Ludikevent">
|
||||
</div>
|
||||
{# Repère principal (Main Landmark) #}
|
||||
<main class="max-w-3xl w-full text-center" role="main">
|
||||
|
||||
<div class="space-y-4">
|
||||
<h1 class="text-6xl font-extrabold text-blue-600">404</h1>
|
||||
<h2 class="text-2xl font-bold text-gray-900">Oups ! Page non trouvée</h2>
|
||||
<p class="text-gray-500">
|
||||
La page que vous recherchez semble avoir disparu ou l'adresse est incorrecte.
|
||||
</p>
|
||||
</div>
|
||||
<header>
|
||||
{# Badge à haut contraste (amber-950 sur amber-100) #}
|
||||
<div class="inline-block bg-amber-100 text-amber-950 px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest mb-8">
|
||||
Erreur 404 💨
|
||||
</div>
|
||||
|
||||
<div class="pt-6">
|
||||
<a href="{{ path('app_home') }}"
|
||||
class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
|
||||
Retour à l'accueil
|
||||
{# Titre impactant #}
|
||||
<h1 class="text-6xl md:text-8xl font-black text-slate-900 uppercase italic tracking-tighter leading-[0.85] mb-8">
|
||||
NOTRE STRUCTURE <br><span class="text-blue-600">S'EST DÉGONFLÉE !</span>
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
{# Section message sémantique #}
|
||||
<section class="bg-white p-8 md:p-12 rounded-[3rem] shadow-xl border border-slate-100 relative overflow-hidden" aria-label="Message d'erreur">
|
||||
<p class="text-xl text-slate-600 font-medium italic leading-relaxed relative z-10">
|
||||
La page que vous cherchez n'existe pas ou a été déplacée.
|
||||
<br><strong>Pas de panique, on rallume la soufflerie !</strong>
|
||||
</p>
|
||||
|
||||
{# Décoration sans impact sur les lecteurs d'écran #}
|
||||
<div class="absolute -right-10 -bottom-10 w-40 h-40 bg-blue-50 rounded-full blur-3xl opacity-50" aria-hidden="true"></div>
|
||||
</section>
|
||||
|
||||
{# Actions de navigation #}
|
||||
<nav class="mt-12 flex flex-col items-center gap-8" aria-label="Liens de secours">
|
||||
<a href="{{ path('reservation') }}" class="inline-flex items-center px-10 py-5 bg-blue-600 text-white rounded-2xl font-black uppercase italic tracking-tighter shadow-xl shadow-blue-200 hover:bg-blue-700 hover:-translate-y-1 transition-all">
|
||||
Retour à l'accueil
|
||||
</a>
|
||||
|
||||
<div class="flex flex-col md:flex-row items-center justify-center gap-6">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[10px] font-black text-slate-700 uppercase tracking-widest mb-1">Un doute ?</span>
|
||||
<a href="{{ path('reservation_catalogue') }}" class="text-xl font-black text-slate-900 italic hover:text-blue-600 transition-colors">
|
||||
Voir le catalogue
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="text-sm text-gray-400 pt-4">
|
||||
Ludikevent - Lilian SEGARD
|
||||
<div class="hidden md:block w-[1px] h-8 bg-slate-200" aria-hidden="true"></div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[10px] font-black text-slate-700 uppercase tracking-widest mb-1">Besoin d'aide</span>
|
||||
<a href="tel:0614172447" class="text-xl font-black text-slate-900 italic hover:text-blue-600 transition-colors">
|
||||
06 14 17 24 47
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
</nav>
|
||||
|
||||
{# Footer sémantique avec contraste corrigé (slate-600) #}
|
||||
<footer class="mt-16">
|
||||
<p class="text-[10px] font-black text-slate-600 uppercase tracking-[0.4em]">
|
||||
Ludikevent © {{ "now"|date("Y") }} - Hauts-de-France
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,7 +5,8 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>500 - Petite fuite technique - Ludikevent</title>
|
||||
|
||||
{# Empêche le référencement de cette page d'erreur technique #}
|
||||
{# SEO & Accessibilité #}
|
||||
<meta name="description" content="Une erreur technique est survenue sur notre structure. Nos techniciens sortent le kit de réparation pour un retour en ligne rapide.">
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
|
||||
{{ vite_asset('reserve.js') }}
|
||||
@@ -15,57 +16,66 @@
|
||||
</head>
|
||||
<body class="bg-slate-50 min-h-screen flex items-center justify-center p-6 font-sans">
|
||||
|
||||
<div class="max-w-3xl w-full text-center">
|
||||
{# Repère principal (Main Landmark) #}
|
||||
<main class="max-w-3xl w-full text-center" role="main">
|
||||
|
||||
{# --- BADGE --- #}
|
||||
<div class="inline-block bg-amber-100 text-amber-600 px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest mb-8">
|
||||
Erreur Interne 🛠️
|
||||
</div>
|
||||
<header>
|
||||
{# Badge à haut contraste corrigé (amber-950) #}
|
||||
<div class="inline-block bg-amber-100 text-amber-950 px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest mb-8">
|
||||
Erreur Interne 🛠️
|
||||
</div>
|
||||
|
||||
{# --- TITRE IMPACTANT --- #}
|
||||
<h1 class="text-6xl md:text-8xl font-black text-slate-900 uppercase italic tracking-tighter leading-[0.85] mb-8">
|
||||
NOTRE STRUCTURE A <br><span class="text-amber-500">UNE PETITE FUITE !</span>
|
||||
</h1>
|
||||
{# Titre impactant #}
|
||||
<h1 class="text-6xl md:text-8xl font-black text-slate-900 uppercase italic tracking-tighter leading-[0.85] mb-8">
|
||||
NOTRE STRUCTURE A <br><span class="text-amber-500">UNE PETITE FUITE !</span>
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
{# --- MESSAGE --- #}
|
||||
<div class="bg-white p-8 md:p-12 rounded-[3rem] shadow-xl border border-slate-100 relative overflow-hidden">
|
||||
{# Section message sémantique #}
|
||||
<section class="bg-white p-8 md:p-12 rounded-[3rem] shadow-xl border border-slate-100 relative overflow-hidden" aria-label="Message d'erreur technique">
|
||||
<p class="text-xl text-slate-600 font-medium italic leading-relaxed relative z-10">
|
||||
Une erreur inattendue est survenue sur notre serveur.
|
||||
<br><strong>On sort le kit de réparation, on revient vite !</strong>
|
||||
</p>
|
||||
|
||||
{# Décoration de fond (Cercle orange doux) #}
|
||||
<div class="absolute -right-10 -bottom-10 w-40 h-40 bg-amber-50 rounded-full blur-3xl opacity-50"></div>
|
||||
</div>
|
||||
{# Décoration de fond (Cercle orange doux) - Masqué pour les lecteurs d'écran #}
|
||||
<div class="absolute -right-10 -bottom-10 w-40 h-40 bg-amber-50 rounded-full blur-3xl opacity-50" aria-hidden="true"></div>
|
||||
</section>
|
||||
|
||||
{# --- ACTIONS --- #}
|
||||
<div class="mt-12 flex flex-col items-center gap-8">
|
||||
{# Actions de secours corrigées pour le contraste (slate-700) #}
|
||||
<nav class="mt-12 flex flex-col items-center gap-8" aria-label="Liens de secours">
|
||||
|
||||
<a href="{{ path('reservation') }}" class="inline-flex items-center px-10 py-5 bg-blue-600 text-white rounded-2xl font-black uppercase italic tracking-tighter shadow-xl shadow-blue-200 hover:bg-blue-700 hover:-translate-y-1 transition-all">
|
||||
Retour à l'accueil
|
||||
</a>
|
||||
|
||||
<div class="flex flex-col md:flex-row items-center justify-center gap-6">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">Besoin d'aide ?</span>
|
||||
<span class="text-[10px] font-black text-slate-700 uppercase tracking-widest mb-1 text-center">Besoin d'aide ?</span>
|
||||
<a href="tel:0614172447" class="text-xl font-black text-slate-900 italic hover:text-blue-600 transition-colors">
|
||||
06 14 17 24 47
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="hidden md:block w-[1px] h-8 bg-slate-200"></div>
|
||||
<div class="hidden md:block w-[1px] h-8 bg-slate-200" aria-hidden="true"></div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">Urgence</span>
|
||||
<span class="text-[10px] font-black text-slate-700 uppercase tracking-widest mb-1 text-center">Urgence</span>
|
||||
<a href="mailto:contact@ludikevent.fr" class="text-xl font-black text-slate-900 italic hover:text-blue-600 transition-colors">
|
||||
contact@ludikevent.fr
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{# --- FOOTER --- #}
|
||||
<p class="mt-16 text-[10px] font-black text-slate-300 uppercase tracking-[0.4em]">
|
||||
Ludikevent © {{ "now"|date("Y") }} - Service Technique
|
||||
</p>
|
||||
{# Footer sémantique avec contraste corrigé (slate-600) #}
|
||||
<footer class="mt-16">
|
||||
<p class="text-[10px] font-black text-slate-600 uppercase tracking-[0.4em]">
|
||||
Ludikevent © {{ "now"|date("Y") }} - Service Technique
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Maintenance en cours - Ludik Event</title>
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
|
||||
<meta name="description" content="Ludikevent prépare de nouvelles surprises ! Notre site de réservation est momentanément en maintenance pour amélioration.">
|
||||
{{ vite_asset('reserve.js') }}
|
||||
{% if app.environment != 'dev' %}
|
||||
{{ pwa(swAttributes={ 'nonce': csp_nonce('script') }) }}
|
||||
@@ -15,7 +15,7 @@
|
||||
<main class="max-w-3xl w-full text-center" role="main">
|
||||
<header>
|
||||
{# Badge Corrigé (amber-800) #}
|
||||
<div class="inline-block bg-amber-100 text-amber-800 px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest mb-8 animate-pulse">
|
||||
<div class="inline-block bg-amber-100 text-amber-950 px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest mb-8 animate-pulse">
|
||||
Mise à jour en cours ⚙️
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user