User Login

Login or Create Account

Login

Email address

        <label for="login-password">Password</label>
        <input type="password" id="login-password" name="password" required placeholder="Enter your password" />

        <button type="submit">Log In</button>
    </form>
    <div class="toggle-link" id="show-register">Don't have an account? Create one</div>
</div>

<div class="container" id="register-container" style="display:none;">
    <h2>Create Account</h2>
    <form id="register-form" action="#" method="post">
        <label for="register-name">Full Name</label>
        <input type="text" id="register-name" name="name" required placeholder="Your full name" />

        <label for="register-email">Email address</label>
        <input type="email" id="register-email" name="email" required placeholder="you@example.com" />

        <label for="register-password">Password</label>
        <input type="password" id="register-password" name="password" required placeholder="Create a password" />

        <button type="submit">Create Account</button>
    </form>
    <div class="toggle-link" id="show-login">Already have an account? Log in</div>
</div>

<script>
    const loginContainer = document.getElementById('login-container');
    const registerContainer = document.getElementById('register-container');
    const showRegister = document.getElementById('show-register');
    const showLogin = document.getElementById('show-login');

    showRegister.addEventListener('click', () => {
        loginContainer.style.display = 'none';
        registerContainer.style.display = 'block';
    });

    showLogin.addEventListener('click', () => {
        registerContainer.style.display = 'none';
        loginContainer.style.display = 'block';
    });

    // Optional: Add simple form submission handlers here
    document.getElementById('login-form').addEventListener('submit', e => {
        e.preventDefault();
        alert('Login form submitted');
        // Implement login logic here
    });

    document.getElementById('register-form').addEventListener('submit', e => {
        e.preventDefault();
        alert('Registration form submitted');
        // Implement registration logic here
    });
</script>