templates/base.html.twig line 30

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <title>{% block title %}MatchMeuble{% endblock %}</title>
  7.         {% block meta %}{% endblock %}
  8.         <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>🛠️</text></svg>">
  9.         <!-- Tailwind CSS avec configuration dark mode -->
  10.         <script src="https://cdn.tailwindcss.com"></script>
  11.         <script>
  12.             tailwind.config = {
  13.                 darkMode: 'class',
  14.                 theme: {
  15.                     extend: {
  16.                         colors: {
  17.                             primary: {"50":"#eff6ff","100":"#dbeafe","200":"#bfdbfe","300":"#93c5fd","400":"#60a5fa","500":"#3b82f6","600":"#2563eb","700":"#1d4ed8","800":"#1e40af","900":"#1e3a8a","950":"#172554"}
  18.                         }
  19.                     }
  20.                 }
  21.             }
  22.         </script>
  24.         <!-- Flowbite CSS & JS -->
  25.         <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.css" rel="stylesheet" />
  26.         <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.js"></script>
  28.         <script>document.documentElement.classList.add('js')</script>
  30.         {% block stylesheets %}
  31.             {{ encore_entry_link_tags('app') }}
  32.         {% endblock %}
  34.         <!-- Styles personnalisés pour préserver le gradient -->
  35.         <style>
  36.             .text-gradient {
  37.                 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  38.                 -webkit-background-clip: text;
  39.                 -webkit-text-fill-color: transparent;
  40.                 background-clip: text;
  41.             }
  42.         </style>
  44.         <!-- Script pour le dark theme (doit être en premier pour éviter le flash) -->
  45.         <script>
  46.             // Vérifier le thème sauvegardé ou utiliser la préférence système
  47.             if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  48.                 document.documentElement.classList.add('dark');
  49.             } else {
  50.                 document.documentElement.classList.remove('dark');
  51.             }
  52.         </script>
  53.     </head>
  54.     <body class="bg-gray-50 dark:bg-gray-900 min-h-screen">
  55.         <!-- Bouton Dark Theme (toujours visible) -->
  56.         <div class="fixed bottom-4 right-4 z-50">
  57.             <button id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 bg-white dark:bg-gray-800 shadow-lg">
  58.                 <!-- Icône lune (mode dark) -->
  59.                 <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  60.                     <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
  61.                 </svg>
  62.                 <!-- Icône soleil (mode light) -->
  63.                 <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  64.                     <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
  65.                 </svg>
  66.             </button>
  67.         </div>
  68.         <!-- Header -->
  69.         {% include 'header.html.twig' %}
  70.     {# Flashes (Flowbite unified) #}
  71.     {% include '_flashes.html.twig' %}
  72.         {% if app.user and app.user.isVerified == false %}
  73.         <div id="alert-4" class="flex items-center ring-1 ring-yellow-500 p-4 mb-4 text-yellow-800 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300 fixed top-20 right-2 z-50" role="alert">
  74.             <svg class="shrink-0 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
  75.                 <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
  76.             </svg>
  77.             <span class="sr-only">Info</span>
  78.             <div class="ms-3 text-sm font-medium">
  79.                  <strong>Bonjour, {{app.user.prenom}}</strong>, <br> votre compte n'est pas encore activé. <br> Un lien d'activation vous a été envoyé par mail.<br>
  80.                 <a href="{{path('resend_verif')}}" target="_blank">Pas de lien ? <span class="font-semibold underline hover:no-underline">Renvoyez le lien d'activation.</span></a>
  81.             </div>
  82.             <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-yellow-50 text-yellow-500 rounded-lg focus:ring-2 focus:ring-yellow-400 p-1.5 hover:bg-yellow-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-yellow-300 dark:hover:bg-gray-700" data-dismiss-target="#alert-4" aria-label="Close">
  83.                 <span class="sr-only">Close</span>
  84.                 <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
  85.                 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
  86.                 </svg>
  87.             </button>
  88.         </div>
  89.         {% endif %}
  91.         {% block body %}{% endblock %}
  93.         <!-- Footer -->
  94.         {% include 'footer.html.twig' %}
  95.         {% block javascripts %}
  96.             {{ encore_entry_script_tags('app') }}
  97.         {% endblock %}
  98.         <!-- Flowbite JS -->
  99.         <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
  101.     {# Removed taos: causes runtime errors on some DOM mutations (className not always a string) #}
  103.         <!-- Script pour le fonctionnement du dark theme -->
  104.         <script>
  105.             var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
  106.             var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
  108.             // Changer les icônes selon le thème actuel
  109.             if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  110.                 themeToggleLightIcon.classList.remove('hidden');
  111.             } else {
  112.                 themeToggleDarkIcon.classList.remove('hidden');
  113.             }
  115.             var themeToggleBtn = document.getElementById('theme-toggle');
  117.             themeToggleBtn.addEventListener('click', function() {
  118.                 // Basculer les icônes
  119.                 themeToggleDarkIcon.classList.toggle('hidden');
  120.                 themeToggleLightIcon.classList.toggle('hidden');
  122.                 // Si défini dans localStorage
  123.                 if (localStorage.getItem('color-theme')) {
  124.                     if (localStorage.getItem('color-theme') === 'light') {
  125.                         document.documentElement.classList.add('dark');
  126.                         localStorage.setItem('color-theme', 'dark');
  127.                     } else {
  128.                         document.documentElement.classList.remove('dark');
  129.                         localStorage.setItem('color-theme', 'light');
  130.                     }
  131.                 } else {
  132.                     if (document.documentElement.classList.contains('dark')) {
  133.                         document.documentElement.classList.remove('dark');
  134.                         localStorage.setItem('color-theme', 'light');
  135.                     } else {
  136.                         document.documentElement.classList.add('dark');
  137.                         localStorage.setItem('color-theme', 'dark');
  138.                     }
  139.                 }
  140.             });
  141.         </script>
  142.     </body>
  143. </html>