Update about.html

InjectionSoftwareandSecurityLLC · Nov 8, 2024 · c123bb3 · c123bb3
1 parent 2ab7321
commit c123bb3
Showing 1 changed file with 88 additions and 3 deletions.
diff --git a/about.html b/about.html
@@ -237,6 +237,45 @@
             background-color: rgba(0, 0, 0, 0.5); /* Slightly transparent background */
             width: 100%; /* Increase width */
             max-width: 800px; /* Set a max width */
+        }
+
+                /* 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>
@@ -258,13 +297,13 @@
     <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>
             <a class="primary-button" href="https://sweltersounds.com/collections/jones">Merch</a>
             <a class="primary-button" href="https://www.youtube.com/watch?v=mBXv6Kj1UDI&list=PLw2HSJl4mHlk1gQijIKTdcAAMECp8pNae">Videos</a>
-            <a class="primary-button" href="events.html">Events</a>
+            <a class="primary-button" id="events-button" href="events.html">Events</a>
             <div class="dropdown">
                 <a class="primary-button" href="#" data-toggle="collapse" data-target="#collapseSocial" aria-expanded="false" aria-controls="collapseSocial">
                     Social
@@ -277,7 +316,7 @@
                 </div>
 
             </div>
-            <a class="primary-button" href="about.html">About</a>
+            <a class="primary-button" id="about-button" href="about.html">About</a>
         </div>
     </div>
 
@@ -296,6 +335,8 @@
                     A fan of whiskey, huskies, and all things cyberpunk — Jones channels a unique blend of futuristic and nostalgic elements into their artistry. Jones RX is a fresh force in the music world, and this is only the beginning.
                 </p>
         </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>
@@ -396,6 +437,50 @@
         setInterval(() => {
             changeSignColor();
         }, 2000);
+
+
+        document.getElementById("about-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 = "about.html";  // Update this with your desired URL
+            }, 1000); // Match this duration with the animation length
+        });
+
+        document.getElementById("events-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 = "events.html";  // Update this with your desired URL
+            }, 1000); // Match this duration with the animation length
+        });
+
+        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>