added gradients to backgroudn added functional button animation

chnaged color design (grey style)

app/static/js/login.js

@@ -1,14 +1,32 @@
-const button = document.querySelector(".magnetic")
+const button = document.querySelector(".magnetic");
 
 button.addEventListener("mousemove", (e) => {
-    const rect = button.getBoundingClientRect()
+    const rect = button.getBoundingClientRect();
+    const x = e.clientX - rect.left - rect.width / 2;
+    const y = e.clientY - rect.top - rect.height / 2;
 
-    const x = e.clientX - rect.left - rect.width / 2
-    const y = e.clientY - rect.top - rect.height / 2
-
-    button.style.transform = `translate(${x * 0.3}px, ${y * 0.3}px)`
-})
+    button.style.transform = `translate(${x * 0.2}px, ${y * 0.2}px)`;
+});
 
 button.addEventListener("mouseleave", () => {
-    button.style.transform = "translate(0,0)"
-})
+    button.style.transform = "translate(0,0)";
+});
+
+const inputs = document.querySelectorAll("input");
+
+inputs.forEach(input => {
+    input.addEventListener("input", () => {
+        input.style.boxShadow = "0 0 8px rgba(79,172,254,0.6)";
+
+        setTimeout(() => {
+            input.style.boxShadow = "";
+        }, 300);
+    });
+});
+
+const form = document.querySelector("form");
+
+form.addEventListener("submit", () => {
+    button.innerText = "Logging in...";
+    button.style.opacity = "0.7";
+});