82 lines
4.5 KiB
Twig
82 lines
4.5 KiB
Twig
{% extends 'base.twig' %}
|
|
|
|
{# --- METADATA --- #}
|
|
{% block title %}{{ 'error.forbidden'|trans }}{% endblock %}
|
|
|
|
{# --- BODY --- #}
|
|
{% block body %}
|
|
<div class="min-h-screen bg-[#f0f0f0] flex items-center justify-center p-4 italic overflow-hidden relative">
|
|
|
|
{# Éléments de décorations en arrière-plan (Style Interface de jeu) #}
|
|
<div class="absolute top-10 left-10 text-gray-200 text-9xl font-black select-none pointer-events-none opacity-50">403</div>
|
|
<div class="absolute bottom-10 right-10 text-gray-200 text-9xl font-black select-none pointer-events-none opacity-50">ERROR</div>
|
|
|
|
<div class="max-w-2xl w-full relative z-10">
|
|
<div class="bg-white border-8 border-gray-900 p-8 md:p-12 shadow-[16px_16px_0px_#ef4444] relative">
|
|
|
|
{# Badge d'alerte #}
|
|
<div class="absolute -top-6 left-6 bg-red-600 text-white px-6 py-2 font-black uppercase tracking-tighter border-4 border-gray-900 skew-x-[-15deg] shadow-[4px_4px_0px_#000]">
|
|
{{ 'error.forbidden.alert'|trans|default('CRITICAL_ACCESS_ERROR') }}
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<h1 class="text-6xl md:text-8xl font-black text-gray-900 uppercase leading-none tracking-tighter mb-6">
|
|
{{ 'error.forbidden.title'|trans|default('403') }}<span class="text-red-600">.</span>
|
|
</h1>
|
|
|
|
<p class="text-xl md:text-2xl font-bold text-gray-800 uppercase italic mb-8 border-l-8 border-red-600 pl-6 leading-tight">
|
|
{{ 'error.forbidden.description'|trans|default('Accès refusé. Vous tentez d\'entrer dans une zone sécurisée.') }}
|
|
</p>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-6">
|
|
{# Bouton Retour Accueil #}
|
|
<a href="{{ path('app_home') }}" class="group relative inline-block">
|
|
<div class="absolute inset-0 bg-gray-900 translate-x-2 translate-y-2 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform"></div>
|
|
<div class="relative bg-indigo-600 text-white px-8 py-4 font-black uppercase italic tracking-widest border-4 border-gray-900 flex items-center justify-center gap-3">
|
|
<i class="fas fa-home"></i>
|
|
{{ 'error.go_home'|trans|default('RETOUR_HOME') }}
|
|
</div>
|
|
</a>
|
|
|
|
{# Bouton Login (si déconnecté) #}
|
|
{% if not app.user %}
|
|
<a href="{{ path('app_login') }}" class="group relative inline-block">
|
|
<div class="absolute inset-0 bg-gray-900 translate-x-2 translate-y-2 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform"></div>
|
|
<div class="relative bg-yellow-400 text-black px-8 py-4 font-black uppercase italic tracking-widest border-4 border-gray-900 flex items-center justify-center gap-3">
|
|
<i class="fas fa-sign-in-alt"></i>
|
|
{{ 'login.title'|trans|default('CONNEXION') }}
|
|
</div>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
{# Footer technique #}
|
|
<div class="mt-12 pt-6 border-t-4 border-gray-100 flex justify-between items-center">
|
|
<span class="text-[10px] font-black uppercase text-gray-400 tracking-[0.2em] italic">// SYSTEM_LOG: FORBIDDEN_ENTRY</span>
|
|
<div class="flex gap-2">
|
|
<div class="w-3 h-3 bg-red-500 border-2 border-black"></div>
|
|
<div class="w-3 h-3 bg-gray-900 border-2 border-black"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Petit effet de glitch sur le titre au survol */
|
|
h1:hover {
|
|
animation: glitch 0.3s cubic-bezier(.25,.46,.45,.94) both infinite;
|
|
}
|
|
|
|
@keyframes glitch {
|
|
0% { transform: translate(0) }
|
|
20% { transform: translate(-3px, 3px) }
|
|
40% { transform: translate(-3px, -3px) }
|
|
60% { transform: translate(3px, 3px) }
|
|
80% { transform: translate(3px, -3px) }
|
|
100% { transform: translate(0) }
|
|
}
|
|
</style>
|
|
{% endblock %}
|