From 9babe72355fda95e757dda49516f9698b7fb620e Mon Sep 17 00:00:00 2001
From: Adityasinh <work.adityasodha@gmail.com>
Date: Fri, 31 Jan 2025 22:52:36 +0530
Subject: [PATCH] Added Transition Effect's Functionality

---
 static/script.js | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/static/script.js b/static/script.js
index 4f606b7..02292d0 100644
--- a/static/script.js
+++ b/static/script.js
@@ -301,3 +301,41 @@ document.addEventListener("DOMContentLoaded", function () {
     closeChangelog.addEventListener("click", closeChangelogSection);
     overlay.addEventListener("click", closeChangelogSection);
 });
+// changelog ends
+
+document.getElementById("aboutUsButton").addEventListener("click", function (event) {
+    let overlay = document.getElementById("aboutUsOverlay");
+    let button = event.target; // The clicked button
+    let content = document.getElementById("aboutUsContent"); // Content to show when animation occurs
+
+    // Toggle button color and state
+    if (button.classList.contains("active")) {
+        button.classList.remove("active");
+        button.style.color = "black"; // Normal color
+        button.style.borderColor = "black"; // Normal border color
+
+        // If overlay is active, hide it and hide content after animation ends
+        overlay.classList.remove("active");
+        setTimeout(() => {
+            content.classList.remove("show"); // Hide content after animation
+        }, 600); // Match the transition time for the overlay
+    } else {
+        button.classList.add("active");
+        button.style.color = "white"; // White text color when active
+        button.style.borderColor = "white"; // White border when active
+
+        // Set overlay position based on button center
+        let rect = button.getBoundingClientRect();
+        let centerX = rect.left + rect.width / 2;
+        let centerY = rect.top + rect.height / 2;
+
+        overlay.style.left = `${centerX}px`;
+        overlay.style.top = `${centerY}px`;
+        overlay.classList.add("active");
+
+        // Show the content after the animation starts
+        setTimeout(() => {
+            content.classList.add("show"); // Show content after overlay starts expanding
+        }, 600); // Match the transition time for the overlay
+    }
+});