Update index.html

Author: MaxYT5184

index.html

@@ -15,14 +15,19 @@
     /* Cookie banner styling */
     #cookie-banner {
       position: fixed;
-      bottom: 0;
+      bottom: -100px; /* Initially hide the banner off-screen */
+      left: 0;
       width: 100%;
       background-color: #333;
       color: white;
       text-align: center;
-      padding: 10px;
+      padding: 15px;
       display: none;
       z-index: 1000;
+      border-top-right-radius: 10px;
+      border-top-left-radius: 10px;
+      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+      transition: bottom 0.5s ease-in-out; /* Slide-in effect */
     }
     #cookie-banner button {
       background-color: #4CAF50;
@@ -79,13 +84,19 @@ <h1>Welcome to Our School SMP!</h1>
     function checkCookieConsent() {
       if (!localStorage.getItem('cookiesAccepted')) {
         document.getElementById('cookie-banner').style.display = 'block';
+        setTimeout(function() {
+          document.getElementById('cookie-banner').style.bottom = '0'; // Animate the banner from below
+        }, 100); // Short delay before sliding in
       }
     }
 
     // Function to handle the acceptance of cookies
     document.getElementById('accept-cookies').addEventListener('click', function() {
       localStorage.setItem('cookiesAccepted', 'true'); // Store cookie consent in localStorage
-      document.getElementById('cookie-banner').style.display = 'none'; // Hide the banner
+      document.getElementById('cookie-banner').style.bottom = '-100px'; // Hide the banner by sliding it out
+      setTimeout(function() {
+        document.getElementById('cookie-banner').style.display = 'none'; // Completely hide it after animation
+      }, 500); // Wait for the slide-out animation to finish
     });
 
     // Check cookie consent status on page load