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>