Merge pull request #378 from aditya-bhaumik/pop

i have added the social media pop up in all the pages
sk66641 · Jul 4, 2024 · 89c8266 · 89c8266
2 parents 9cb02ad + ff2df79
commit 89c8266
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 35 deletions.
diff --git a/index.html b/index.html
@@ -467,6 +467,7 @@ <h2>Account Not Available</h2>
 </div>
   <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
   <script src="js/background.js"></script>
+  <script src="js/social.js"></script>
   <script src="js/script.js"></script>
   <script type="text/javascript">
     function googleTranslateElementInit() {

diff --git a/js/script.js b/js/script.js
@@ -956,36 +956,6 @@ function changeToStatic6() {
     document.getElementById('image6').src = '../assets/images/features/Linear_02.jpg';
 }
 
-// Get the modal
-var accountNotAvailableModal = document.getElementById("accountNotAvailableModal");
-
-// Get the <span> element that closes the modal
-var closeAccountNotAvailableModal = document.getElementById("closeAccountNotAvailableModal");
-
-// Get all social media links
-var socialLinks = document.querySelectorAll(".socialIcons a");
-
-// When the user clicks on <span> (x), close the modal
-closeAccountNotAvailableModal.onclick = function() {
-  accountNotAvailableModal.style.display = "none";
-}
-
-// When the user clicks anywhere outside of the modal, close it
-window.onclick = function(event) {
-  if (event.target == accountNotAvailableModal) {
-    accountNotAvailableModal.style.display = "none";
-  }
-}
-
-// When the user clicks on a social media link, show the modal
-socialLinks.forEach(function(link) {
-  link.onclick = function(event) {
-    event.preventDefault();
-    accountNotAvailableModal.style.display = "block";
-  }
-});
-
-
 let isPlaying = false;
 let CurrentAudio = null;
 
@@ -1023,4 +993,4 @@ document.getElementById('PreviewButton').addEventListener('click', function () {
             previewButton.textContent = 'Preview';
         });
     }
-});
+});
diff --git a/js/social.js b/js/social.js
@@ -0,0 +1,36 @@
+document.addEventListener("DOMContentLoaded", function() {
+    // Get the modal
+    var accountNotAvailableModal = document.getElementById("accountNotAvailableModal");
+
+    // Get the <span> element that closes the modal
+    var closeAccountNotAvailableModal = document.getElementById("closeAccountNotAvailableModal");
+
+    // Get all social media links
+    var socialLinks = document.querySelectorAll(".socialIcons a");
+
+    if (!accountNotAvailableModal || !closeAccountNotAvailableModal || socialLinks.length === 0) {
+      console.error("Required elements are missing");
+      return;
+    }
+
+    // When the user clicks on <span> (x), close the modal
+    closeAccountNotAvailableModal.onclick = function() {
+      accountNotAvailableModal.style.display = "none";
+    }
+
+    // When the user clicks anywhere outside of the modal, close it
+    window.onclick = function(event) {
+      if (event.target == accountNotAvailableModal) {
+        accountNotAvailableModal.style.display = "none";
+      }
+    }
+
+    // When the user clicks on a social media link, show the modal
+    socialLinks.forEach(function(link) {
+      link.onclick = function(event) {
+        event.preventDefault();
+        accountNotAvailableModal.style.display = "block";
+      }
+    });
+  });
+
diff --git a/pages/about.html b/pages/about.html
@@ -1,11 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>About - Random Disco Light Simulator</title>
-
     <link rel="icon" href="../assets/images/favicon/favicon.ico" type="image/x-icon" />
     <link rel="stylesheet" href="../css/style.css">
     <link rel="stylesheet" href="../css/about.css">
@@ -14,7 +12,6 @@
         crossorigin="anonymous" referrerpolicy="no-referrer" />
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 </head>
-
 <body>
     <div>
         <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top"><i class="fas fa-arrow-up"></i></button>
@@ -139,6 +136,15 @@ <h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 30px;
     <script src="../js/background.js"></script>
     <script src="../js/script.js"></script>
     <script src="../js/backToTopBtn.js"></script> 
+    <script src="../js/social.js"></script> 
+    <div id="accountNotAvailableModal" class="account-not-available-modal">
+        <div class="account-not-available-modal-content">
+            <span class="close" id="closeAccountNotAvailableModal">&times;</span>
+            <h2>Account Not Available</h2>
+            <p>We apologize for the inconvenience, but our social media accounts are currently unavailable. We are working diligently to bring them online as soon as possible.</p>
+            <p>In the meantime, if you have any questions or need assistance, please feel free to reach out to us through our website's feedback form. We appreciate your understanding and patience during this time.</p>
+            <p>Thank you for your continued support! </p>
+        </div>
+    </div>
 </body>
-
 </html>
diff --git a/pages/features.html b/pages/features.html
@@ -169,6 +169,16 @@ <h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 30px;
     <script src="../js/background.js"></script>
     <script src="../js/script.js"></script>
     <script src="../js/backToTopBtn.js"></script>
+    <script src="../js/social.js"></script>
+    <div id="accountNotAvailableModal" class="account-not-available-modal">
+        <div class="account-not-available-modal-content">
+          <span class="close" id="closeAccountNotAvailableModal">&times;</span>
+          <h2>Account Not Available</h2>
+          <p>We apologize for the inconvenience, but our social media accounts are currently unavailable. We are working diligently to bring them online as soon as possible.</p>
+          <p>In the meantime, if you have any questions or need assistance, please feel free to reach out to us through our website's feedback form. We appreciate your understanding and patience during this time.</p>
+          <p>Thank you for your continued support! </p>      
+        </div>
+      </div>
 </body>
 
 </html>
diff --git a/pages/feedback.html b/pages/feedback.html
@@ -128,11 +128,22 @@ <h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 30px;
                 reserved.
             </p>
         </div>
+
     </footer>
     <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
     <script src="../js/background.js"></script>
     <script src="../js/script.js"></script>
     <script src="../js/backToTopBtn.js"></script>
+    <script src="../js/social.js"></script>
+    <div id="accountNotAvailableModal" class="account-not-available-modal">
+        <div class="account-not-available-modal-content">
+          <span class="close" id="closeAccountNotAvailableModal">&times;</span>
+          <h2>Account Not Available</h2>
+          <p>We apologize for the inconvenience, but our social media accounts are currently unavailable. We are working diligently to bring them online as soon as possible.</p>
+          <p>In the meantime, if you have any questions or need assistance, please feel free to reach out to us through our website's feedback form. We appreciate your understanding and patience during this time.</p>
+          <p>Thank you for your continued support! </p>      
+        </div>
+      </div>
 </body>
 
 </html>