LoginPagev1

2026-01-28 20:11:07 +11:00
commit c46119db25
3 changed files with 529 additions and 0 deletions
--- a/script.js
+++ b/script.js
@@ -0,0 +1,121 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const loginForm = document.querySelector('.login-form');
+    const emailInput = document.getElementById('email');
+    const passwordInput = document.getElementById('password');
+    const submitBtn = document.querySelector('.btn-primary');
+    const btnText = submitBtn.querySelector('span');
+    const helperText = document.querySelector('.signup-link');
+    const toggleLink = document.querySelector('.signup-link a');
+    const title = document.querySelector('.brand-section h1');
+    const subtitle = document.querySelector('.brand-section p');
+
+    let isLoginMode = true;
+
+    // Toggle between Login and Signup
+    if (toggleLink) {
+        toggleLink.addEventListener('click', (e) => {
+            e.preventDefault();
+            isLoginMode = !isLoginMode;
+            updateUI();
+        });
+    }
+
+    function updateUI() {
+        if (isLoginMode) {
+            title.innerText = 'Welcome Back';
+            subtitle.innerText = 'Enter your details below';
+            btnText.innerText = 'Sign In';
+            helperText.innerHTML = 'Don\'t have an account? <a href="#">Create One</a>';
+        } else {
+            title.innerText = 'Create Account';
+            subtitle.innerText = 'Start your journey with us';
+            btnText.innerText = 'Sign Up';
+            helperText.innerHTML = 'Already have an account? <a href="#">Sign In</a>';
+        }
+
+        // Re-attach listener to the new link element
+        const newLink = document.querySelector('.signup-link a');
+        newLink.addEventListener('click', (e) => {
+            e.preventDefault();
+            isLoginMode = !isLoginMode;
+            updateUI();
+        });
+
+        // Reset form and styles
+        loginForm.reset();
+        resetButton();
+    }
+
+    function resetButton() {
+        submitBtn.style.background = '';
+        submitBtn.style.transform = '';
+        btnText.innerText = isLoginMode ? 'Sign In' : 'Sign Up';
+    }
+
+    function showFeedback(isSuccess, message) {
+        btnText.innerText = message;
+        if (isSuccess) {
+            submitBtn.style.background = 'linear-gradient(135deg, #10B981 0%, #059669 100%)'; // Success Green
+        } else {
+            submitBtn.style.background = 'linear-gradient(135deg, #EF4444 0%, #B91C1C 100%)'; // Error Red
+            submitBtn.animate([
+                { transform: 'translateX(0)' },
+                { transform: 'translateX(-5px)' },
+                { transform: 'translateX(5px)' },
+                { transform: 'translateX(0)' }
+            ], { duration: 300 });
+        }
+
+        setTimeout(() => {
+            resetButton();
+        }, 2000);
+    }
+
+    if (loginForm) {
+        loginForm.addEventListener('submit', (e) => {
+            e.preventDefault();
+
+            const email = emailInput.value.trim();
+            const password = passwordInput.value.trim();
+            const timestamp = new Date().toISOString();
+
+            // Get existing users
+            const existingUsers = JSON.parse(localStorage.getItem('socialAppUsers') || '[]');
+
+            if (isLoginMode) {
+                // --- LOGIN LOGIC ---
+                const user = existingUsers.find(u => u.email === email && u.password === password);
+
+                if (user) {
+                    console.log('Login Successful:', user);
+                    showFeedback(true, 'Success!');
+                    // Here you would redirect to the app
+                } else {
+                    console.warn('Login Failed: Invalid credentials');
+                    showFeedback(false, 'Incorrect details');
+                }
+
+            } else {
+                // --- SIGNUP LOGIC ---
+                // Check if user already exists
+                if (existingUsers.some(u => u.email === email)) {
+                    showFeedback(false, 'User exists');
+                    return;
+                }
+
+                const newUser = { email, password, joinedAt: timestamp };
+                existingUsers.push(newUser);
+                localStorage.setItem('socialAppUsers', JSON.stringify(existingUsers));
+
+                console.log('New User Registered:', newUser);
+                showFeedback(true, 'Account Created!');
+
+                // Switch to login mode after success
+                setTimeout(() => {
+                    isLoginMode = true;
+                    updateUI();
+                }, 1500);
+            }
+        });
+    }
+});