Spaces:
Running
Running
File size: 3,768 Bytes
bb1908b 97fec32 bb1908b 3b09cf2 bb1908b 3b09cf2 bb1908b 97fec32 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
// 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`);
});
});
}); |