Update events.html

events.html

@@ -368,6 +368,45 @@
             filter: brightness(1.5);
             animation: glow 0.8s infinite alternate;
             text-decoration: none;
+        }
+
+                /* Style for the TV turn-off overlay */
+                #tvOverlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background: linear-gradient(
+            180deg, /* Horizontal gradient */
+            white,
+            black,
+            cyan,
+            white,
+            purple,
+            black,
+            pink
+        );
+        display: none;
+        pointer-events: none;
+        z-index: 9999;
+        opacity: 0.5;
+        transform-origin: center center;
+        }
+
+        /* Turn-off animation */
+        @keyframes tvTurnOff {
+        0% {
+            opacity: 0.5;
+            filter: brightness(100%);
+        }
+        50% {
+            opacity: 0.2;
+            filter: brightness(200%);
+        }
+        100% {
+            opacity: 0;
+        }
         }
 
     </style>
@@ -389,7 +428,7 @@
     <div class="main-content">
         <div id="navbar" class="navbar">
             <div class="dropdown">
-                <a class="primary-button" href="index.html">
+                <a class="primary-button" id="home-button" href="index.html">
                     Home
                 </a>
             </div>
@@ -412,7 +451,7 @@
             <div class="d-flex flex-wrap justify-content-center" id="events"></div>
         </div>
     </div>
-
+    <div id="tvOverlay"></div>
     <footer>
         <a class="social-icon" href="https://www.youtube.com/watch?v=mBXv6Kj1UDI&list=PLw2HSJl4mHlk1gQijIKTdcAAMECp8pNae" target="_blank"><i class="fab fa-youtube"></i></a>
         <a class="social-icon" href="https://www.tiktok.com/@jonesrx" target="_blank"><i class="fab fa-tiktok"></i></a>
@@ -558,6 +597,21 @@ <h5 class="card-title">${event.venue.name}</h5>
 
         // Call fetchEvents on page load
         fetchEvents();
+
+
+        document.getElementById("home-button").addEventListener("click", function(event) {
+            event.preventDefault();
+
+            // Show overlay and start TV turn-off animation
+            const overlay = document.getElementById("tvOverlay");
+            overlay.style.display = "block";
+            overlay.style.animation = "tvTurnOff 1s ease-in-out forwards";
+
+            // Delay navigation until animation completes
+            setTimeout(() => {
+                window.location.href = "index.html";  // Update this with your desired URL
+            }, 1000); // Match this duration with the animation length
+        });
     </script>
 
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>