templates/base.twig

<!doctype html>
<html lang="{{ app.request.locale }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {# --- LOGIQUE DE NOËL (15 Déc au 05 Jan) --- #}
    {% set current_date = "now"|date("m-d") %}
    {% set is_christmas = (current_date >= "12-15" or current_date <= "01-05") %}

    <title>E-Cosplay | {% block title %}Accueil{% endblock %}</title>
    <meta name="description" content="{% block meta_description '' %}">

    {# OPEN GRAPH / TWITTER CARD / SEO META #}
    <meta property="og:type" content="website">
    <meta property="og:url"
          content="{{ url(app.request.attributes.get('_route','app_home'), app.request.attributes.get('_route_params',[])) }}">
    <meta property="og:title" content="E-Cosplay | {{ block('title') }}">
    <meta property="og:description" content="{{ block('meta_description') }}">
    <meta property="og:image" content="{{ asset('assets/images/logo.jpg') | imagine_filter('webp') }}">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url"
          content="{{ url(app.request.attributes.get('_route','app_home'), app.request.attributes.get('_route_params',[])) }}">
    <meta name="twitter:title" content="E-Cosplay | {{ block('title') }}">
    <meta name="twitter:description" content="{{ block('meta_description') }}">
    <meta name="twitter:image" content="{{ asset('assets/images/logo.jpg') | imagine_filter('webp') }}">
    <meta name="twitter:site" content="@E_Cosplay_asso">

    <meta name="author" content="Association E-Cosplay">
    <meta name="keywords" content="cosplay, concours cosplay, organisation, événement, geek">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    {% if no_index is defined %}
        <meta name="robots" content="noindex, nofollow">
    {% endif %}

    {# FAVICONS & Manifest #}
    <link rel="icon" type="image/png" href="{{ asset('favicon/favicon-96x96.png') }}" sizes="96x96"/>
    <link rel="icon" type="image/svg+xml" href="{{ asset('favicon/favicon.svg') }}"/>
    <link rel="shortcut icon" href="{{ asset('favicon/favicon.ico') }}"/>
    <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('favicon/apple-touch-icon.png') }}"/>
    <meta name="apple-mobile-web-app-title" content="E-Cosplay"/>
    <link rel="manifest" href="{{ asset('site.webmanifest') }}"/>

    <meta name="google-site-verification" content="D6YvgLKg4oj2Ksk_cYhO3fijbmxZWib7wqqHTJyfftQ"/>
    <meta name="env" content="{{ app.environment }}">
    {% block canonical_url %}{% endblock %}

    {# STYLES SPÉCIFIQUES NOËL #}
    {% if is_christmas %}
        <style>
            .christmas-border { border-bottom: 4px solid #c41e3a !important; }
            .christmas-footer { border-top: 4px dashed #c41e3a !important; }
            .christmas-active-link { color: #c41e3a !important; font-weight: bold; }
        </style>
    {% endif %}

    {# SCHÉMAS JSON-LD #}
    <script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "WebSite",
            "name": "E-Cosplay",
            "url": "{{ app.request.schemeAndHttpHost }}"
        }
    </script>
    <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "Organization",
          "name": "Association E-Cosplay",
          "url": "{{ app.request.schemeAndHttpHost }}",
          "logo": "{{ asset('assets/images/logo.jpg') | imagine_filter('webp') }}",
          "sameAs": [
            "https://www.facebook.com/assocationecosplay",
            "https://www.instagram.com/asso_ecosplay/"
          ],
          "address": {
              "@type": "PostalAddress",
              "streetAddress": "42 rue de Saint-Quentin",
              "addressLocality": "Beautor",
              "postalCode": "02800",
              "addressCountry": "FR"
          }
        }
    </script>
    <script type="application/ld+json">
        {
                 "@context": "https://schema.org/",
                 "@type": "Person",
                 "name": "ShokoCosplay",
                 "image": "{{ asset('assets/images/shoko.jpg') | imagine_filter('webp') }}",
                 "jobTitle": "Président",
                 "sameAs": [
                    "https://www.instagram.com/cosplay_shoko/",
                    "https://www.tiktok.com/@cosshoko?lang=fr",
                    "https://www.facebook.com/CosplayShoko"
                 ],
                 "worksFor": {
                    "@type": "Organization",
                    "name": "E-Cosplay"
                 }
        }
    </script>
    <script type="application/ld+json">
        {
                 "@context": "https://schema.org/",
                 "@type": "Person",
                 "name": "Marta Gator",
                 "image": "{{ asset('assets/images/marta.jpg') | imagine_filter('webp') }}",
                 "jobTitle": "Secrétaire",
                 "sameAs": [
                    "https://www.facebook.com/profile.php?id=100081002010111",
                    "https://www.tiktok.com/@marta_gator",
                    "https://www.instagram.com/marta_gator/"
                 ],
                 "worksFor": {
                    "@type": "Organization",
                    "name": "E-Cosplay"
                 }
        }
    </script>
    {% block breadcrumb_schema %}{% endblock %}
    {% block stylesheets %}{% endblock %}
    <script type="text/javascript" src="/ts.js" async></script>
    {{ vite_asset('app.js', []) }}
    {% if app.environment == "prod" %}
        <script defer src="https://datas.e-cosplay.fr/vs.js"
                data-website-id="b929d372-fbea-403e-9ae2-781433828787"></script>
    <script src="/sc.js" crossorigin="anonymous"></script>
    <script>
        Sentry.onLoad(function() {
            Sentry.init({
                tunnel:'/tunnel',
                tracesSampleRate: 1.0,
                replaysSessionSampleRate: 0.1,
                replaysOnErrorSampleRate: 1.0,
            });
        });
    </script>
    {% endif %}
</head>
<body class="flex flex-col min-h-screen bg-gray-100">

{% set menu_links = [
    { 'name': 'Accueil'|trans, 'route': 'app_home' },
    { 'name': 'Qui sommes-nous'|trans, 'route': 'app_about' },
    { 'name': 'Nos membres'|trans, 'route': 'app_members' },
    { 'name': 'epage_cosplay'|trans, 'route': 'app_pages' },
    { 'name': 'Nos événements'|trans, 'route': 'app_events' },
    { 'name': 'Boutiques'|trans, 'route': 'app_shop' },
    { 'name': 'Documents'|trans, 'route': 'app_doc' },
    { 'name': 'Dons'|trans, 'route': 'app_dons' },
    { 'name': 'Nous rejoindre'|trans, 'route': 'app_recruit' },
    { 'name': 'Contact'|trans, 'route': 'app_contact' }
] %}

<header class="bg-white shadow-md sticky top-0 z-40 {% if is_christmas %}christmas-border{% endif %}">
    <nav class="mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">

            {# LOGO AVEC BONNET DE NOËL #}
            <div class="flex-shrink-0 flex items-center">
                <a href="{{ path('app_home') }}" class="flex items-center space-x-2 text-xl font-bold text-gray-900 relative">
                    {% if is_christmas %}
                        <span class="absolute -top-3 -left-3 text-xl z-10 select-none transform -rotate-12">🎅</span>
                    {% endif %}
                    <img class="h-8 w-auto" width="57px" height="32px" src="{{ asset('assets/images/logo.jpg') | imagine_filter('logo') }}"
                         alt="E-Cosplay Logo">
                    <span class="text-gray-900">E-Cosplay</span>
                </a>
            </div>

            {# NAVIGATION DESKTOP #}
            <div class="hidden md:flex md:space-x-4 items-center">
                <div class="hidden md:flex md:space-x-1">
                    {% for link in menu_links %}
                        {% set is_active = (app.request.get('_route') == link.route) %}
                        <a href="{{ path(link.route) }}"
                           class="{% if is_active %}bg-gray-100 {% if is_christmas %}christmas-active-link{% else %}text-red-800{% endif %}{% else %}text-gray-700 hover:bg-gray-100 hover:text-red-800{% endif %} px-3 py-2 rounded-md text-sm font-medium transition duration-150">
                            {{ link.name }}
                        </a>
                    {% endfor %}
                </div>

                {# SÉLECTEUR DE LANGUE #}
                <div class="flex items-center space-x-2 border-l border-gray-200 pl-4">
                    {% set current_route = app.request.attributes.get('_route','app_home') %}
                    {% set current_params = app.request.attributes.get('_route_params',[]) %}
                    {% set current_query = app.request.query.all %}
                    {% for lang in ['fr', 'en','cn'] %}
                        {% set is_active_lang = (app.request.locale == lang) %}
                        {% set lang_url = path(current_route, current_params|merge(current_query)|merge({'lang': lang})) %}
                        <a href="{{ lang_url }}" class="text-xs font-bold uppercase transition duration-150 {% if is_active_lang %}text-red-600 border-b-2 border-red-600{% else %}text-gray-500 hover:text-red-600{% endif %}">
                            {{ lang }}
                        </a>
                    {% endfor %}
                </div>

                {# PANIER #}
                <button id="openCartDesktop" type="button" class="relative p-2 text-gray-700 hover:text-red-600 rounded-full">
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
                    </svg>
                    <span id="cartCountDesktop" class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full">0</span>
                </button>

                {# COMPTE #}
                <div class="relative">
                    <button id="userMenuButtonDesktop" type="button" class="p-2 text-gray-700 hover:text-red-600 rounded-full">
                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                        </svg>
                    </button>
                    <div id="userMenuDesktop" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 hidden z-50">
                        <div class="py-1">
                            {% if is_granted('ROLE_USER') %}
                                <div class="block px-4 py-2 text-sm text-gray-900 font-semibold border-b border-gray-100">{{ app.user.username|default('Compte') }}</div>
                                <a href="{{ path('admin_dashboard') }}" class="block px-4 py-2 text-sm text-cyan-600 hover:bg-gray-100">{{ 'logged_admin'|trans }}</a>
                                <a href="{{ path('app_logout') }}" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">{{ 'logout_link'|trans }}</a>
                            {% else %}
                                <a href="{{ path('app_login') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">{{ 'login_link'|trans }}</a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            {# MOBILE ICONS #}
            <div class="md:hidden flex items-center space-x-2">
                <button id="userMenuButtonMobile" type="button" class="p-2 text-gray-700 hover:text-red-600"><svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg></button>
                <div id="userMenuMobile" class="origin-top-right absolute right-0 mt-12 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 hidden z-50">
                    <div class="py-1">
                        {% if is_granted('ROLE_USER') %}<div class="block px-4 py-2 text-sm text-gray-900 font-semibold border-b border-gray-100">{{ app.user.username }}</div>{% else %}<a href="{{ path('app_login') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">{{ 'login_link'|trans }}</a>{% endif %}
                    </div>
                </div>
                <button id="openCartMobile" type="button" class="relative p-2 text-gray-700"><svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/></svg><span id="cartCountMobile" class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold text-white bg-red-600 rounded-full">0</span></button>
                <button id="mobileMenuButton" type="button" class="text-red-500 p-2"><svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg></button>
            </div>
        </div>
    </nav>

    {# MOBILE MENU #}
    <div class="md:hidden hidden" id="mobile-menu">
        <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            {% if is_christmas %}
                <div class="px-3 py-2 text-sm font-bold text-red-600 border-b border-red-100 flex items-center justify-between">
                    <span>🎄 Joyeuses Fêtes !</span>
                    <span class="text-xs font-normal opacity-70">15 déc. - 05 janv.</span>
                </div>
            {% endif %}
            {% for link in menu_links %}
                {% set is_active = (app.request.get('_route') == link.route) %}
                <a href="{{ path(link.route) }}"
                   class="block {% if is_active %}bg-gray-100 text-red-600{% else %}text-gray-700 hover:bg-gray-100 hover:text-red-600{% endif %} px-3 py-2 rounded-md text-base font-medium transition duration-150">
                    {{ link.name }}
                </a>
            {% endfor %}
        </div>
    </div>
</header>

<main role="main" class="flex-grow">
    {% block body %}{% endblock %}
</main>

{# OFF-CANVAS CART #}
<div id="cartSidebar" class="fixed top-0 right-0 w-full md:w-96 h-full bg-white shadow-xl transform translate-x-full transition-transform duration-300 ease-in-out z-50 flex flex-col">
    <div class="p-4 border-b border-gray-200 flex justify-between items-center">
        <h2 class="text-xl font-bold text-gray-900">{{ 'your_cart'|trans }}</h2>
        <button id="closeCartButton" type="button" class="text-gray-400 hover:text-gray-600 p-2 rounded-full transition duration-150">
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
        </button>
    </div>
    <div id="cartItemsContainer" class="flex-grow overflow-y-auto p-4 space-y-4">
        <div class="text-center text-gray-500 py-12">
            <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
            <p class="mt-1">{{ 'cart_empty'|trans }}</p>
        </div>
    </div>
    <div class="p-4 border-t border-gray-200">
        <div class="flex justify-between font-bold text-lg mb-4">
            <span>{{ 'subtotal_label'|trans }}:</span>
            <span id="cartSubtotal">0.00 €</span>
        </div>
        <a href="" class="w-full block text-center bg-red-600 text-white py-3 rounded-md hover:bg-red-700 transition duration-150 font-semibold">{{ 'checkout_button'|trans }}</a>
    </div>
</div>
<div id="cartBackdrop" class="fixed inset-0 bg-black opacity-50 z-40 hidden transition-opacity duration-300" aria-hidden="true"></div>

<footer class="bg-[#FABF04] text-gray-900 border-t {% if is_christmas %}christmas-footer{% else %}border-red-600{% endif %}">
    <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
        {% block footer %}
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 pb-6 mb-4 border-b border-gray-600">
                <div>
                    <h3 class="text-lg font-semibold mb-3 text-gray-900">{{ 'footer_contact_title'|trans }}</h3>
                    <p class="text-sm text-gray-700">42 rue de Saint-Quentin<br>02800 Beautor, FRANCE</p>
                    <p class="text-sm text-gray-700 mt-2"><a href="mailto:contact@e-cosplay.fr" class="hover:text-red-600">contact@e-cosplay.fr</a></p>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-3 text-gray-900">{{ 'footer_follow_us_title'|trans }}</h3>
                    <div class="flex space-x-4 mb-4">
                        <a href="https://www.facebook.com/assocationecosplay" target="_blank" class="text-gray-700 hover:text-red-600 transition"><img src="{{ asset('assets/social/facebook.svg') }}" width="30" height="30" alt="FB"></a>
                        <a href="https://www.instagram.com/asso_ecosplay/" target="_blank" class="text-gray-700 hover:text-red-600 transition"><img src="{{ asset('assets/social/instagram.svg') }}" width="30" height="30" alt="IG"></a>
                    </div>
                    {% set stripeWidth = isMobile() ? "100%" : "400" %}
                    <iframe width="{{ stripeWidth }}" height="40" style="border:0;" src="https://climate.stripe.com/badge/qrsnOf?theme=light&size=small&locale={{ app.request.locale }}-{{ app.request.locale|upper }}"></iframe>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-3 text-gray-900">E-Cosplay</h3>
                    {{ 'footer_mission_description'|trans|raw }}
                </div>
            </div>
        {% endblock %}

        <div class="md:flex md:justify-between md:items-center text-sm">
            <div class="text-center md:text-left mb-4 md:mb-0">
                <p>&copy; {{ "now"|date("Y") }} E-Cosplay. {{ 'all_rights_reserved'|trans }}.</p>
                <p class="text-xs text-gray-600 mt-1">RNA N°W022006988 - {{ 'footer_realise'|trans }} <a href="https://www.siteconsei.fr" target="_blank">SITECONSEIL</a></p>
            </div>
            <div class="flex flex-wrap justify-center md:justify-end gap-2">
                <a href="{{ path('app_legal') }}" class="px-2 hover:text-red-600">{{ 'legal_notice_link'|trans }}</a>
                <a href="{{ path('app_cookies') }}" class="px-2 hover:text-red-600">{{ 'cookie_policy_link'|trans }}</a>
                <a href="{{ path('app_cgu') }}" class="px-2 hover:text-red-600">{{ 'cgu_link'|trans }}</a>
            </div>
        </div>
    </div>
</footer>

</body>
</html>