Spaces:
Running
Running
| // Theme toggle functionality | |
| function initTheme() { | |
| const themeToggle = document.getElementById('themeToggle'); | |
| const moonIcon = themeToggle.querySelector('i'); | |
| // Check for saved theme or prefer-color-scheme | |
| const savedTheme = localStorage.getItem('theme') || | |
| (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); | |
| if (savedTheme === 'dark') { | |
| document.documentElement.classList.add('dark'); | |
| moonIcon.setAttribute('data-feather', 'sun'); | |
| } else { | |
| document.documentElement.classList.remove('dark'); | |
| moonIcon.setAttribute('data-feather', 'moon'); | |
| } | |
| // Toggle theme on button click | |
| themeToggle.addEventListener('click', () => { | |
| if (document.documentElement.classList.contains('dark')) { | |
| document.documentElement.classList.remove('dark'); | |
| localStorage.setItem('theme', 'light'); | |
| moonIcon.setAttribute('data-feather', 'moon'); | |
| } else { | |
| document.documentElement.classList.add('dark'); | |
| localStorage.setItem('theme', 'dark'); | |
| moonIcon.setAttribute('data-feather', 'sun'); | |
| } | |
| feather.replace(); | |
| }); | |
| } | |
| document.addEventListener('DOMContentLoaded', function() { | |
| initTheme(); | |
| // Form submission handler | |
| // Update the form container class for dark mode | |
| const authContainer = document.querySelector('.bg-white'); | |
| if (authContainer) { | |
| authContainer.classList.add('auth-container', 'transition-colors', 'duration-300'); | |
| } | |
| const loginForm = document.querySelector('form'); | |
| if (loginForm) { | |
| loginForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Get form values | |
| const email = this.querySelector('input[type="email"]').value; | |
| const password = this.querySelector('input[type="password"]').value; | |
| // Simple validation | |
| if (!email || !password) { | |
| alert('Please fill in all fields'); | |
| return; | |
| } | |
| // In a real app, you would send this to your backend | |
| console.log('Login attempt with:', { email, password }); | |
| // Show loading state | |
| const submitBtn = this.querySelector('button[type="submit"]'); | |
| const originalBtnText = submitBtn.innerHTML; | |
| submitBtn.innerHTML = ` | |
| <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white inline-block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> | |
| <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> | |
| <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> | |
| </svg> | |
| Signing in... | |
| `; | |
| submitBtn.disabled = true; | |
| // Simulate API call | |
| setTimeout(() => { | |
| submitBtn.innerHTML = originalBtnText; | |
| submitBtn.disabled = false; | |
| // For demo purposes, just show a success message | |
| alert('Login successful! (This is a demo)'); | |
| }, 2000); | |
| }); | |
| } | |
| // Social login button handlers | |
| document.querySelectorAll('.social-login button').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const platform = this.querySelector('i').getAttribute('data-feather'); | |
| alert(`Sign in with ${platform.charAt(0).toUpperCase() + platform.slice(1)} clicked`); | |
| }); | |
| }); | |
| }); |