Merge pull request #339 from aditya-bhaumik/social

Implementation of Pop-up on our social media links to Improve User Experience

css/style.css

@@ -2393,11 +2393,75 @@ button:active {
   justify-content: center;
   gap: 20px;
 }
-
+/* used for removing the google translate bar */
 .VIpgJd-ZVi9od-ORHb-OEVmcd{
   display: none; 
 }
-
+/* used for removing the google translate reloading */
 .VIpgJd-ZVi9od-aZ2wEe-wOHMyf{
   display: none;
 }
+
+/* Account Not Available Modal Styles */
+.account-not-available-modal {
+  display: none; 
+  position: fixed; 
+  z-index: 100; 
+  padding-top: 100px; 
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%; 
+  overflow: auto; 
+  background-color: rgba(0, 0, 0, 0.8); 
+}
+
+.account-not-available-modal-content {
+  background: linear-gradient(to right, #d4fcff, #c8f7dc);
+
+  color: #ffffff;
+  margin: auto;
+  padding: 30px;
+  border-radius: 15px;
+  width: 80%;
+  max-width: 600px;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
+  text-align: center;
+  animation: fadeIn 0.5s;
+}
+
+.account-not-available-modal .close {
+  color: #ffffff;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.account-not-available-modal .close:hover,
+.account-not-available-modal .close:focus {
+  color: #bdc3c7;
+  text-decoration: none;
+}
+
+.account-not-available-modal h2 {
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+
+.account-not-available-modal p {
+  font-size: 18px;
+  line-height: 1.6;
+  margin: 20px 0;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

index.html

@@ -441,6 +441,16 @@ <h2><strong class="nameAbout">Features</strong></h2>
       <img src="assets/images/learn/Linear_02.jpg" alt="Linear Mode Example 2" style="width:180px; height: 180px;">
     </div>
   </div> -->
+  <!-- Account Not Available Modal -->
+<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>
   <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>
@@ -453,4 +463,4 @@ <h2><strong class="nameAbout">Features</strong></h2>
     src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
 </body>
 
-</html>
+</html>

js/script.js

@@ -918,3 +918,32 @@ function changeToGif6() {
 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";
+  }
+});