From 15a3594bd8e35cd4e922c8992e7a12f9a549594f Mon Sep 17 00:00:00 2001
From: Noah Pombas <admin@noahpombas.ch>
Date: Sun, 1 Dec 2024 22:29:08 +0100
Subject: [PATCH] Create index.js

---
 assets/js/index.js | 48 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 assets/js/index.js

diff --git a/assets/js/index.js b/assets/js/index.js
new file mode 100644
index 0000000..0d37ca0
--- /dev/null
+++ b/assets/js/index.js
@@ -0,0 +1,48 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const loginContainer = document.getElementById('login-container');
+    const signupContainer = document.getElementById('signup-container');
+    const toSignup = document.getElementById('to-signup');
+    const toLogin = document.getElementById('to-login');
+
+    function switchForm(hideContainer, showContainer) {
+        // Start transition for hiding the current form
+        hideContainer.style.maxHeight = hideContainer.scrollHeight + 'px'; // Set to full height
+        hideContainer.style.transition = 'max-height 0.75s ease'; // Set transition properties
+        hideContainer.style.maxHeight = '100px'; // Collapse height
+
+        // Hide the container after the transition
+        setTimeout(function() {
+            hideContainer.style.display = 'none'; // Completely remove from layout
+            hideContainer.style.maxHeight = '100px'; // Ensure it's collapsed
+            hideContainer.classList.remove('active');
+
+            // Prepare the new container
+            showContainer.style.display = 'block'; // Make it visible
+            showContainer.style.maxHeight = '100px'; // Start with collapsed height
+            showContainer.classList.add('active');
+
+            // Trigger reflow to apply the new height
+            showContainer.offsetHeight; // Trigger reflow
+
+            // Animate showing the new container
+            showContainer.style.transition = 'max-height 0.75s ease'; // Set transition properties
+            showContainer.style.maxHeight = showContainer.scrollHeight + 'px'; // Expand to full height
+
+        }, 1000); // Duration matches the max-height transition
+    }
+
+    toSignup.addEventListener('click', function(event) {
+        event.preventDefault();
+        switchForm(loginContainer, signupContainer);
+    });
+
+    toLogin.addEventListener('click', function(event) {
+        event.preventDefault();
+        switchForm(signupContainer, loginContainer);
+    });
+
+    // Optional: Show login form by default when the page loads
+    loginContainer.classList.add('active');
+    loginContainer.style.display = 'block'; // Ensure it's visible initially
+    loginContainer.style.maxHeight = loginContainer.scrollHeight + 'px'; // Expand to full height
+});