feat(frontend): add dynamic animations to login and admin panel

frontend/script.js

@@ -12,6 +12,24 @@
   const btnLoader = btnSubmit.querySelector('.btn-loader');
   const togglePassword = document.getElementById('toggle-password');
 
+  // Ripple effect
+  btnSubmit.addEventListener('click', function(e) {
+    const rect = this.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    
+    const ripple = document.createElement('span');
+    ripple.classList.add('ripple');
+    ripple.style.left = `${x}px`;
+    ripple.style.top = `${y}px`;
+    
+    this.appendChild(ripple);
+    
+    setTimeout(() => {
+      ripple.remove();
+    }, 600);
+  });
+
   togglePassword.addEventListener('click', () => {
     const isPassword = passwordInput.type === 'password';
     passwordInput.type = isPassword ? 'text' : 'password';
@@ -27,8 +45,14 @@
   }
 
   function setFieldError(input, errorEl, message) {
-    input.closest('.form-group').classList.add('has-error');
+    const group = input.closest('.form-group');
+    group.classList.add('has-error');
     errorEl.textContent = message;
+    
+    // Shake animation
+    group.classList.remove('shake');
+    void group.offsetWidth; // trigger reflow
+    group.classList.add('shake');
   }
 
   function showAlert(message, type) {