chore: Update header styles for sticky navigation

views/commands.ejs

@@ -245,6 +245,26 @@
         .command-card:hover::after {
             opacity: 0.8;
         }
+
+        .header-scrolled {
+            background-color: #1f2937; /* bg-gray-900 */
+            padding: 1rem; /* p-4 */
+            position: sticky;
+            top: 0; /* Collé en haut de la page */
+            z-index: 50; /* z-50 */
+            max-width: 40rem; /* max-w-xl */
+            border-radius: 9999px; /* rounded-full */
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-xl */
+            transition: transform 0.3s ease, padding 0.3s ease; /* Transition douce pour la transformation et le padding */
+            transform: scale(0.8); /* Réduction de la taille */
+            left: 50%; /* Alignement horizontal au milieu */
+            transform: translateX(-50%);
+        }
+
+        .header-scrolled:hover {
+            transform: translateX(-50%) scale(1); /* Agrandissement au survol */
+            padding: 2rem; /* Agrandissement du padding au survol */
+        }
     </style>
 </head>
 
@@ -486,6 +506,15 @@
                 alert(`Vous avez cliqué sur la commande : ${command}. Ici, vous pouvez ajouter plus d'informations sur cette commande.`);
             });
         });
+
+        window.addEventListener('scroll', function() {
+            const header = document.querySelector('header');
+            if (window.scrollY > 100) { // Commence à changer après 100px de défilement
+                header.classList.add('header-scrolled');
+            } else {
+                header.classList.remove('header-scrolled');
+            }
+        });
     </script>
 </body>
 

views/feathures.ejs

@@ -111,6 +111,26 @@
             text-decoration: none;
             font-size: 1.2rem;
         }
+
+        .header-scrolled {
+            background-color: #1f2937; /* bg-gray-900 */
+            padding: 1rem; /* p-4 */
+            position: sticky;
+            top: 0; /* Collé en haut de la page */
+            z-index: 50; /* z-50 */
+            max-width: 40rem; /* max-w-xl */
+            border-radius: 9999px; /* rounded-full */
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-xl */
+            transition: transform 0.3s ease, padding 0.3s ease; /* Transition douce pour la transformation et le padding */
+            transform: scale(0.8); /* Réduction de la taille */
+            left: 50%; /* Alignement horizontal au milieu */
+            transform: translateX(-50%);
+        }
+
+        .header-scrolled:hover {
+            transform: translateX(-50%) scale(1); /* Agrandissement au survol */
+            padding: 2rem; /* Agrandissement du padding au survol */
+        }
     </style>
 </head>
 
@@ -159,9 +179,6 @@
             <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
                 <span class="font-bold">🛠️</span>: Bannir un membre
             </div>
-            <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
-                <span class="font-bold">🗡️</span>: Gérer les rapports de blocage
-            </div>
             <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
                 <span class="font-bold">📊</span>: Afficher les informations du bot
             </div>
@@ -171,9 +188,6 @@
             <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
                 <span class="font-bold">🤖</span>: Obtenir l'image d'un emoji personnalisé
             </div>
-            <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
-                <span class="font-bold">🦾</span>: Générer une chaîne aléatoire
-            </div>
             <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
                 <span class="font-bold">⌨️</span>: Afficher les commandes disponibles
             </div>
@@ -183,27 +197,12 @@
             <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
                 <span class="font-bold">🗡️</span>: Expulser un membre
             </div>
-            <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
-                <span class="font-bold">⌨️</span>: Envoyer un message privé à un utilisateur spécifique
-            </div>
             <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
                 <span class="font-bold">🛡️</span>: Mettre un membre en sourdine
             </div>
-            <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
-                <span class="font-bold">🗡️</span>: Gérer les 'nr'
-            </div>
             <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
                 <span class="font-bold">🗡️</span>: Gérer les notes de mise à jour
             </div>
-            <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
-                <span class="font-bold">🪛</span>: Afficher les notes de mise à jour du bot
-            </div>
-            <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
-                <span class="font-bold">🪄</span>: Supprimer toutes les invitations du serveur
-            </div>
-            <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
-                <span class="font-bold">📝</span>: Créer un rapport
-            </div>
             <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
                 <span class="font-bold">⌨️</span>: Rechercher un utilisateur
             </div>
@@ -239,6 +238,15 @@
     drawerButton.addEventListener('click', toggleDrawer);
     drawerClose.addEventListener('click', toggleDrawer);
     drawerOverlay.addEventListener('click', toggleDrawer);
+
+    window.addEventListener('scroll', function() {
+            const header = document.querySelector('header');
+            if (window.scrollY > 100) { // Commence à changer après 100px de défilement
+                header.classList.add('header-scrolled');
+            } else {
+                header.classList.remove('header-scrolled');
+            }
+        });
 </script>
 </body>
 

views/index.ejs

@@ -189,6 +189,27 @@
                 background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8) 50%, transparent);
             }
         }
+
+        .header-scrolled {
+            background-color: #1f2937; /* bg-gray-900 */
+            padding: 1rem; /* p-4 */
+            position: sticky;
+            top: 0; /* Collé en haut de la page */
+            z-index: 50; /* z-50 */
+            max-width: 40rem; /* max-w-xl */
+            border-radius: 9999px; /* rounded-full */
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-xl */
+            transition: transform 0.3s ease, padding 0.3s ease; /* Transition douce pour la transformation et le padding */
+            transform: scale(0.8); /* Réduction de la taille */
+            left: 50%; /* Alignement horizontal au milieu */
+            transform: translateX(-50%);
+        }
+
+        .header-scrolled:hover {
+            transform: translateX(-50%) scale(1); /* Agrandissement au survol */
+            padding: 2rem; /* Agrandissement du padding au survol */
+        }
+
     </style>
 </head>
 
@@ -425,6 +446,16 @@
         localStorage.setItem('language', selectedLanguage); // Store language preference
         applyTranslations(selectedLanguage);
     });
+    
+        window.addEventListener('scroll', function() {
+            const header = document.querySelector('header');
+            if (window.scrollY > 100) { // Commence à changer après 100px de défilement
+                header.classList.add('header-scrolled');
+            } else {
+                header.classList.remove('header-scrolled');
+            }
+        });
+
 </script>
 </body>