Project Gallery

Explore Secure Login & Signup in detail
2 /2
Use mouse wheel or pinch gesture to zoom on touch devices

Project Overview

Secure Login & Signup

Project Description

Nexum logix provides a secure and fast login and signup experience with advanced security, smooth authentication, and a modern user interface for web applications.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nexus Auth | Login & Signup</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


</head>

<body>
    <!-- Background animation shapes -->
    <div class="bg-shapes">
        <div class="shape"></div>
        <div class="shape"></div>
        <div class="shape"></div>
        <div class="shape"></div>
    </div>

    <!-- Theme toggle -->
    <div class="theme-toggle">
        <button class="theme-btn" id="themeToggle">
            <i class="fas fa-moon"></i>
        </button>
    </div>

    <!-- Auth Container -->
    <div class="auth-container">
        <!-- Left Side: Forms -->
        <div class="auth-left">
            <div class="logo">
                <div class="logo-icon">
                    <i class="fas fa-lock"></i>
                </div>
                <div class="logo-text">Nexus</div>
            </div>
            
            <!-- Form Tabs -->
            <div class="form-tabs">
                <button class="tab-btn active" id="loginTab">Login</button>
                <button class="tab-btn" id="signupTab">Sign Up</button>
            </div>
            
            <!-- Form Container -->
            <div class="form-container">
                <!-- Login Form -->
                <div class="form-page" id="loginPage">
                    <div class="auth-header">
                        <h1>Welcome Back</h1>
                        <p>Sign in to your account to continue</p>
                    </div>
                    
                    <form class="auth-form" id="loginForm">
                        <div class="form-group">
                            <label class="form-label" for="loginEmail">Email Address</label>
                            <div class="input-with-icon">
                                <i class="fas fa-envelope"></i>
                                <input type="email" id="loginEmail" class="form-input" placeholder="you@example.com" required>
                            </div>
                            <div class="error-message" id="loginEmailError">
                                <i class="fas fa-exclamation-circle"></i>
                                Please enter a valid email address
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label" for="loginPassword">Password</label>
                            <div class="input-with-icon">
                                <i class="fas fa-lock"></i>
                                <input type="password" id="loginPassword" class="form-input" placeholder="Enter your password" required>
                                <button type="button" class="password-toggle" id="toggleLoginPassword">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                            <div class="error-message" id="loginPasswordError">
                                <i class="fas fa-exclamation-circle"></i>
                                Password must be at least 6 characters
                            </div>
                        </div>
                        
                        <div class="form-options">
                            <div class="remember-me" id="loginRemember">
                                <div class="checkbox">
                                    <i class="fas fa-check"></i>
                                </div>
                                <span class="remember-text">Remember me</span>
                            </div>
                            
                            <a href="#" class="forgot-link" id="forgotPassword">Forgot password?</a>
                        </div>
                        
                        <button type="submit" class="submit-btn" id="loginSubmitBtn">
                            <span>Sign In</span>
                            <i class="fas fa-arrow-right"></i>
                        </button>
                        
                        <div class="divider">
                            <span>Or continue with</span>
                        </div>
                        
                        <div class="social-login">
                            <button type="button" class="social-btn google">
                                <i class="fab fa-google"></i>
                                <span>Google</span>
                            </button>
                            <button type="button" class="social-btn facebook">
                                <i class="fab fa-facebook-f"></i>
                                <span>Facebook</span>
                            </button>
                            <button type="button" class="social-btn apple">
                                <i class="fab fa-apple"></i>
                                <span>Apple</span>
                            </button>
                        </div>
                        
                        <div class="toggle-link">
                            Don't have an account? <a href="#" id="goToSignup">Sign up now</a>
                        </div>
                    </form>
                </div>
                
                <!-- Signup Form -->
                <div class="form-page hidden" id="signupPage">
                    <div class="auth-header">
                        <h1>Create Account</h1>
                        <p>Sign up for a new account to get started</p>
                    </div>
                    
                    <form class="auth-form" id="signupForm">
                        <div class="form-group">
                            <label class="form-label" for="signupName">Full Name</label>
                            <div class="input-with-icon">
                                <i class="fas fa-user"></i>
                                <input type="text" id="signupName" class="form-input" placeholder="Your full name" required>
                            </div>
                            <div class="error-message" id="signupNameError">
                                <i class="fas fa-exclamation-circle"></i>
                                Please enter your name
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label" for="signupEmail">Email Address</label>
                            <div class="input-with-icon">
                                <i class="fas fa-envelope"></i>
                                <input type="email" id="signupEmail" class="form-input" placeholder="you@example.com" required>
                            </div>
                            <div class="error-message" id="signupEmailError">
                                <i class="fas fa-exclamation-circle"></i>
                                Please enter a valid email address
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label" for="signupPassword">Password</label>
                            <div class="input-with-icon">
                                <i class="fas fa-lock"></i>
                                <input type="password" id="signupPassword" class="form-input" placeholder="Create a password" required>
                                <button type="button" class="password-toggle" id="toggleSignupPassword">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                            <div class="password-strength">
                                <div class="strength-meter">
                                    <div class="strength-fill" id="passwordStrengthFill"></div>
                                </div>
                                <div class="strength-text" id="passwordStrengthText">Password strength: None</div>
                            </div>
                            <div class="error-message" id="signupPasswordError">
                                <i class="fas fa-exclamation-circle"></i>
                                Password must be at least 8 characters with letters and numbers
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label" for="confirmPassword">Confirm Password</label>
                            <div class="input-with-icon">
                                <i class="fas fa-lock"></i>
                                <input type="password" id="confirmPassword" class="form-input" placeholder="Confirm your password" required>
                                <button type="button" class="password-toggle" id="toggleConfirmPassword">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                            <div class="error-message" id="confirmPasswordError">
                                <i class="fas fa-exclamation-circle"></i>
                                Passwords do not match
                            </div>
                        </div>
                        
                        <div class="terms">
                            <div class="remember-me" id="termsAgree">
                                <div class="checkbox terms-checkbox">
                                    <i class="fas fa-check"></i>
                                </div>
                            </div>
                            <div class="terms-text">
                                I agree to the <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>
                            </div>
                        </div>
                        
                        <button type="submit" class="submit-btn" id="signupSubmitBtn">
                            <span>Create Account</span>
                            <i class="fas fa-user-plus"></i>
                        </button>
                        
                        <div class="divider">
                            <span>Or continue with</span>
                        </div>
                        
                        <div class="social-login">
                            <button type="button" class="social-btn google">
                                <i class="fab fa-google"></i>
                                <span>Google</span>
                            </button>
                            <button type="button" class="social-btn facebook">
                                <i class="fab fa-facebook-f"></i>
                                <span>Facebook</span>
                            </button>
                            <button type="button" class="social-btn apple">
                                <i class="fab fa-apple"></i>
                                <span>Apple</span>
                            </button>
                        </div>
                        
                        <div class="toggle-link">
                            Already have an account? <a href="#" id="goToLogin">Sign in</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <!-- Right Side: Welcome & Features -->
        <div class="auth-right">
            <div class="right-shapes">
                <div class="right-shape"></div>
                <div class="right-shape"></div>
                <div class="right-shape"></div>
            </div>
            
            <div class="right-content">
                <h2 class="welcome-text" id="welcomeText">Join thousands of successful users</h2>
                <p id="welcomeDesc">Experience seamless authentication with advanced security features and personalized dashboard access.</p>
                
                <div class="features">
                    <div class="feature">
                        <div class="feature-icon">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <div class="feature-text">
                            <h4>Advanced Security</h4>
                            <p>Bank-level encryption and 2FA protection</p>
                        </div>
                    </div>
                    
                    <div class="feature">
                        <div class="feature-icon">
                            <i class="fas fa-bolt"></i>
                        </div>
                        <div class="feature-text">
                            <h4>Lightning Fast</h4>
                            <p>Quick authentication with minimal load times</p>
                        </div>
                    </div>
                    
                    <div class="feature">
                        <div class="feature-icon">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <div class="feature-text">
                            <h4>Smart Analytics</h4>
                            <p>Track your login history and account activity</p>
                        </div>
                    </div>
                </div>
                
                <div style="font-size: 0.9rem; opacity: 0.8;">
                    <i class="fas fa-star"></i> Rated 4.9/5 by 15,000+ users
                </div>
            </div>
        </div>
    </div>
    
    <!-- Success Message -->
    <div class="success-message" id="successMessage">
        <i class="fas fa-check-circle"></i>
        <div>
            <strong id="successTitle">Login successful!</strong>
            <div id="successDesc">Redirecting to dashboard...</div>
        </div>
    </div>  

</body>
</html>
CSS
<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

:root {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --primary-light: #a5b4fc;
    --secondary: #8b5cf6;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --dark: #1f2937;
    --darker: #111827;
    --light: #f9fafb;
    --gray: #6b7280;
    --gray-light: #9ca3af;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.15);
    --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
    --gradient-dark: linear-gradient(135deg, var(--primary-dark), #7c3aed);
}

body {
    background-color: var(--light);
    color: var(--dark);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition: background 0.5s ease;
    overflow-x: hidden;
}

body.dark-mode {
    background-color: var(--darker);
    color: #fff;
}

/* Background animation elements */
.bg-shapes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    animation: float 15s infinite linear;
}

.shape:nth-child(1) {
    width: 300px;
    height: 300px;
    background: var(--primary);
    top: 10%;
    left: 5%;
    animation-delay: 0s;
}

.shape:nth-child(2) {
    width: 200px;
    height: 200px;
    background: var(--secondary);
    bottom: 15%;
    right: 10%;
    animation-delay: -5s;
    animation-duration: 20s;
}

.shape:nth-child(3) {
    width: 150px;
    height: 150px;
    background: var(--warning);
    top: 50%;
    left: 80%;
    animation-delay: -10s;
    animation-duration: 25s;
}

.shape:nth-child(4) {
    width: 100px;
    height: 100px;
    background: var(--success);
    bottom: 30%;
    left: 20%;
    animation-delay: -7s;
    animation-duration: 18s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-20px) rotate(90deg);
    }
    50% {
        transform: translateY(0) rotate(180deg);
    }
    75% {
        transform: translateY(20px) rotate(270deg);
    }
}

/* Auth Container */
.auth-container {
    display: flex;
    width: 100%;
    max-width: 1100px;
    min-height: 650px;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    position: relative;
    transition: all 0.4s ease;
}

.dark-mode .auth-container {
    background: var(--dark);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.auth-left {
    flex: 1;
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
    z-index: 1;
}

.dark-mode .auth-left {
    background: var(--dark);
}

.auth-right {
    flex: 1.2;
    background: var(--gradient);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.dark-mode .auth-right {
    background: var(--gradient-dark);
}

/* Logo and Header */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
}

.logo-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.logo-text {
    font-size: 1.8rem;
    font-weight: 700;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.dark-mode .logo-text {
    background: linear-gradient(135deg, #a5b4fc, #c4b5fd);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.auth-header {
    margin-bottom: 10px;
}

.auth-header h1 {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--dark);
}

.dark-mode .auth-header h1 {
    color: white;
}

.auth-header p {
    color: var(--gray);
    font-size: 1rem;
    margin-bottom: 40px;
}

.dark-mode .auth-header p {
    color: var(--gray-light);
}

/* Form Tabs */
.form-tabs {
    display: flex;
    background: rgba(99, 102, 241, 0.1);
    border-radius: var(--radius-sm);
    padding: 6px;
    margin-bottom: 30px;
    max-width: 300px;
}

.tab-btn {
    flex: 1;
    padding: 14px 20px;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--gray);
}

.tab-btn.active {
    background: var(--gradient);
    color: white;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* Form Styles */
.auth-form {
    width: 100%;
}

.form-group {
    margin-bottom: 24px;
    position: relative;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--dark);
    font-size: 0.95rem;
}

.dark-mode .form-label {
    color: #e5e7eb;
}

.input-with-icon {
    position: relative;
}

.input-with-icon i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-light);
    font-size: 1.1rem;
}

.form-input {
    width: 100%;
    padding: 16px 16px 16px 48px;
    border: 2px solid #e5e7eb;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #fff;
    color: var(--dark);
}

.dark-mode .form-input {
    background: #374151;
    border-color: #4b5563;
    color: white;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.form-input.error {
    border-color: var(--danger);
}

.error-message {
    color: var(--danger);
    font-size: 0.85rem;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.3s ease;
}

.error-message.show {
    opacity: 1;
    transform: translateY(0);
}

/* Password toggle */
.password-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--gray-light);
    cursor: pointer;
    font-size: 1.1rem;
}

/* Remember me & Forgot password */
.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.checkbox {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid var(--gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.checkbox.checked {
    background: var(--primary);
    border-color: var(--primary);
}

.checkbox.checked i {
    color: white;
    font-size: 0.8rem;
}

.remember-text {
    font-size: 0.95rem;
    color: var(--gray);
}

.dark-mode .remember-text {
    color: var(--gray-light);
}

.forgot-link {
    color: var(--primary);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.2s;
}

.forgot-link:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* Terms and Conditions */
.terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 30px;
}

.terms-checkbox {
    margin-top: 3px;
}

.terms-text {
    font-size: 0.9rem;
    color: var(--gray);
    line-height: 1.5;
}

.dark-mode .terms-text {
    color: var(--gray-light);
}

.terms-text a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.terms-text a:hover {
    text-decoration: underline;
}

/* Submit button */
.submit-btn {
    width: 100%;
    padding: 16px;
    background: var(--gradient);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
}

.submit-btn:active {
    transform: translateY(0);
}

.submit-btn.loading i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Divider */
.divider {
    display: flex;
    align-items: center;
    margin: 30px 0;
    color: var(--gray);
    font-size: 0.9rem;
}

.dark-mode .divider {
    color: var(--gray-light);
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.dark-mode .divider::before,
.dark-mode .divider::after {
    background: #4b5563;
}

.divider span {
    padding: 0 15px;
}

/* Social login */
.social-login {
    display: flex;
    gap: 16px;
    margin-bottom: 30px;
}

.social-btn {
    flex: 1;
    padding: 14px;
    border-radius: var(--radius-sm);
    border: 2px solid #e5e7eb;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--dark);
}

.dark-mode .social-btn {
    background: #374151;
    border-color: #4b5563;
    color: white;
}

.social-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.social-btn.google {
    color: #db4437;
}

.social-btn.facebook {
    color: #4267B2;
}

.social-btn.apple {
    color: #000;
}

.dark-mode .social-btn.apple {
    color: white;
}

/* Toggle link */
.toggle-link {
    text-align: center;
    margin-top: 30px;
    color: var(--gray);
    font-size: 0.95rem;
}

.dark-mode .toggle-link {
    color: var(--gray-light);
}

.toggle-link a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    margin-left: 5px;
}

.toggle-link a:hover {
    text-decoration: underline;
}

/* Right side content */
.right-content {
    text-align: center;
    z-index: 1;
    max-width: 400px;
}

.welcome-text {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.right-content p {
    font-size: 1.05rem;
    margin-bottom: 40px;
    opacity: 0.9;
    line-height: 1.6;
}

.features {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
    text-align: left;
}

.feature {
    display: flex;
    align-items: center;
    gap: 15px;
}

.feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.feature-text h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.feature-text p {
    font-size: 0.9rem;
    opacity: 0.8;
    margin: 0;
}

/* Theme toggle */
.theme-toggle {
    position: absolute;
    top: 25px;
    right: 25px;
    z-index: 10;
}

.theme-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.theme-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(15deg);
}

/* Form Toggle Animation */
.form-container {
    position: relative;
    transition: all 0.5s ease;
}

.form-page {
    transition: all 0.5s ease;
}

.form-page.hidden {
    opacity: 0;
    transform: translateX(-20px);
    position: absolute;
    width: 100%;
    pointer-events: none;
}

/* Decorative elements on right side */
.right-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

.right-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: float-right 20s infinite linear;
}

.right-shape:nth-child(1) {
    width: 150px;
    height: 150px;
    top: -50px;
    right: -50px;
    animation-delay: 0s;
}

.right-shape:nth-child(2) {
    width: 100px;
    height: 100px;
    bottom: 20%;
    left: -30px;
    animation-delay: -10s;
    animation-duration: 15s;
}

.right-shape:nth-child(3) {
    width: 70px;
    height: 70px;
    top: 30%;
    right: 10%;
    animation-delay: -5s;
    animation-duration: 12s;
}

@keyframes float-right {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(30px, -30px) rotate(120deg);
    }
    66% {
        transform: translate(-20px, 20px) rotate(240deg);
    }
}

/* Success message */
.success-message {
    position: fixed;
    top: 30px;
    right: 30px;
    background: var(--success);
    color: white;
    padding: 16px 24px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translateX(400px);
    transition: transform 0.5s ease;
    z-index: 1000;
}

.success-message.show {
    transform: translateX(0);
}

/* Password strength indicator */
.password-strength {
    margin-top: 8px;
}

.strength-meter {
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.strength-fill {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.strength-fill.weak {
    background: var(--danger);
    width: 33%;
}

.strength-fill.medium {
    background: var(--warning);
    width: 66%;
}

.strength-fill.strong {
    background: var(--success);
    width: 100%;
}

.strength-text {
    font-size: 0.8rem;
    color: var(--gray);
}

.dark-mode .strength-text {
    color: var(--gray-light);
}

/* Responsive Design */
@media (max-width: 900px) {
    .auth-container {
        flex-direction: column;
        max-width: 500px;
    }
    
    .auth-right {
        display: none;
    }
    
    .auth-left {
        padding: 40px 30px;
    }
}

@media (max-width: 480px) {
    .auth-left {
        padding: 30px 20px;
    }
    
    .social-login {
        flex-direction: column;
    }
    
    .logo {
        margin-bottom: 30px;
    }
    
    .auth-header h1 {
        font-size: 1.8rem;
    }
    
    .form-tabs {
        max-width: 100%;
    }
}
</style>
JavaScript
<script>
// Theme Toggle
const themeToggle = document.getElementById('themeToggle');
themeToggle.onclick = () => {
    document.body.classList.toggle('dark-mode');
    const icon = themeToggle.querySelector('i');
    if (document.body.classList.contains('dark-mode')) {
        icon.className = 'fas fa-sun';
    } else {
        icon.className = 'fas fa-moon';
    }
};

// Tab Switching
const loginTab = document.getElementById('loginTab');
const signupTab = document.getElementById('signupTab');
const loginPage = document.getElementById('loginPage');
const signupPage = document.getElementById('signupPage');
const welcomeText = document.getElementById('welcomeText');
const welcomeDesc = document.getElementById('welcomeDesc');
const goToSignup = document.getElementById('goToSignup');
const goToLogin = document.getElementById('goToLogin');

loginTab.onclick = () => {
    loginTab.classList.add('active');
    signupTab.classList.remove('active');
    loginPage.classList.remove('hidden');
    signupPage.classList.add('hidden');
    welcomeText.textContent = 'Join thousands of successful users';
    welcomeDesc.textContent = 'Experience seamless authentication with advanced security features and personalized dashboard access.';
};

signupTab.onclick = () => {
    signupTab.classList.add('active');
    loginTab.classList.remove('active');
    signupPage.classList.remove('hidden');
    loginPage.classList.add('hidden');
    welcomeText.textContent = 'Start Your Journey Today';
    welcomeDesc.textContent = 'Create an account to unlock all features and join our growing community of users.';
};

goToSignup.onclick = (e) => {
    e.preventDefault();
    signupTab.click();
};

goToLogin.onclick = (e) => {
    e.preventDefault();
    loginTab.click();
};

// Password Visibility Toggle
function setupPasswordToggle(passwordId, toggleId) {
    const toggleBtn = document.getElementById(toggleId);
    const passwordInput = document.getElementById(passwordId);
    
    if (toggleBtn && passwordInput) {
        toggleBtn.onclick = () => {
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);
            const icon = toggleBtn.querySelector('i');
            icon.className = type === 'password' ? 'fas fa-eye' : 'fas fa-eye-slash';
        };
    }
}

setupPasswordToggle('loginPassword', 'toggleLoginPassword');
setupPasswordToggle('signupPassword', 'toggleSignupPassword');
setupPasswordToggle('confirmPassword', 'toggleConfirmPassword');

// Remember Me Checkbox
function setupCheckbox(checkboxId) {
    const checkboxElement = document.getElementById(checkboxId);
    if (checkboxElement) {
        const checkbox = checkboxElement.querySelector('.checkbox');
        checkboxElement.onclick = () => {
            checkbox.classList.toggle('checked');
            checkbox.style.transform = 'scale(0.9)';
            setTimeout(() => {
                checkbox.style.transform = 'scale(1)';
            }, 150);
        };
    }
}

setupCheckbox('loginRemember');
setupCheckbox('termsAgree');

// Form Validation Functions
function validateEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(String(email).toLowerCase());
}

function validatePassword(password) {
    // At least 8 characters, 1 letter and 1 number
    const re = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/;
    return re.test(String(password));
}

function checkPasswordStrength(password) {
    let strength = 0;
    let text = "None";
    let className = "";
    
    if (password.length >= 8) strength++;
    if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++;
    if (/\d/.test(password)) strength++;
    if (/[@$!%*#?&]/.test(password)) strength++;
    
    if (strength === 0) {
        text = "None";
        className = "";
    } else if (strength <= 2) {
        text = "Weak";
        className = "weak";
    } else if (strength === 3) {
        text = "Medium";
        className = "medium";
    } else {
        text = "Strong";
        className = "strong";
    }
    
    return { text, className };
}

// Password strength indicator
const signupPassword = document.getElementById('signupPassword');
const strengthFill = document.getElementById('passwordStrengthFill');
const strengthText = document.getElementById('passwordStrengthText');

if (signupPassword) {
    signupPassword.addEventListener('input', () => {
        const password = signupPassword.value;
        if (password.length === 0) {
            strengthFill.className = 'strength-fill';
            strengthFill.style.width = '0%';
            strengthText.textContent = 'Password strength: None';
        } else {
            const { text, className } = checkPasswordStrength(password);
            strengthFill.className = `strength-fill ${className}`;
            strengthText.textContent = `Password strength: ${text}`;
        }
    });
}

// Show/Hide Error Messages
function showError(inputId, errorId, show) {
    const input = document.getElementById(inputId);
    const error = document.getElementById(errorId);
    
    if (show) {
        input.classList.add('error');
        error.classList.add('show');
    } else {
        input.classList.remove('error');
        error.classList.remove('show');
    }
}

// Login Form Submission
const loginForm = document.getElementById('loginForm');
const loginSubmitBtn = document.getElementById('loginSubmitBtn');

if (loginForm) {
    loginForm.addEventListener('submit', (e) => {
        e.preventDefault();
        
        const email = document.getElementById('loginEmail').value;
        const password = document.getElementById('loginPassword').value;
        
        let isValid = true;
        
        // Validate email
        if (!validateEmail(email)) {
            showError('loginEmail', 'loginEmailError', true);
            isValid = false;
        } else {
            showError('loginEmail', 'loginEmailError', false);
        }
        
        // Validate password
        if (password.length < 6) {
            showError('loginPassword', 'loginPasswordError', true);
            isValid = false;
        } else {
            showError('loginPassword', 'loginPasswordError', false);
        }
        
        if (isValid) {
            // Show loading state
            loginSubmitBtn.classList.add('loading');
            loginSubmitBtn.innerHTML = '<i class="fas fa-spinner"></i><span>Signing In...</span>';
            loginSubmitBtn.disabled = true;
            
            // Simulate API call
            setTimeout(() => {
                // Show success message
                const successMessage = document.getElementById('successMessage');
                const successTitle = document.getElementById('successTitle');
                const successDesc = document.getElementById('successDesc');
                
                successTitle.textContent = 'Login successful!';
                successDesc.textContent = 'Redirecting to dashboard...';
                successMessage.classList.add('show');
                
                // Reset form
                loginSubmitBtn.classList.remove('loading');
                loginSubmitBtn.innerHTML = '<span>Sign In</span><i class="fas fa-arrow-right"></i>';
                loginSubmitBtn.disabled = false;
                
                // Hide success message after 3 seconds
                setTimeout(() => {
                    successMessage.classList.remove('show');
                    // In a real app, you would redirect here
                    // window.location.href = '/dashboard';
                }, 3000);
            }, 1500);
        }
    });
}

// Signup Form Submission
const signupForm = document.getElementById('signupForm');
const signupSubmitBtn = document.getElementById('signupSubmitBtn');

if (signupForm) {
    signupForm.addEventListener('submit', (e) => {
        e.preventDefault();
        
        const name = document.getElementById('signupName').value;
        const email = document.getElementById('signupEmail').value;
        const password = document.getElementById('signupPassword').value;
        const confirmPassword = document.getElementById('confirmPassword').value;
        const termsChecked = document.getElementById('termsAgree').querySelector('.checkbox').classList.contains('checked');
        
        let isValid = true;
        
        // Validate name
        if (name.trim().length < 2) {
            showError('signupName', 'signupNameError', true);
            isValid = false;
        } else {
            showError('signupName', 'signupNameError', false);
        }
        
        // Validate email
        if (!validateEmail(email)) {
            showError('signupEmail', 'signupEmailError', true);
            isValid = false;
        } else {
            showError('signupEmail', 'signupEmailError', false);
        }
        
        // Validate password
        if (!validatePassword(password)) {
            showError('signupPassword', 'signupPasswordError', true);
            isValid = false;
        } else {
            showError('signupPassword', 'signupPasswordError', false);
        }
        
        // Validate confirm password
        if (password !== confirmPassword) {
            showError('confirmPassword', 'confirmPasswordError', true);
            isValid = false;
        } else {
            showError('confirmPassword', 'confirmPasswordError', false);
        }
        
        // Validate terms
        if (!termsChecked) {
            const termsCheckbox = document.getElementById('termsAgree').querySelector('.checkbox');
            termsCheckbox.style.borderColor = 'var(--danger)';
            setTimeout(() => {
                termsCheckbox.style.borderColor = '';
            }, 1000);
            isValid = false;
        }
        
        if (isValid) {
            // Show loading state
            signupSubmitBtn.classList.add('loading');
            signupSubmitBtn.innerHTML = '<i class="fas fa-spinner"></i><span>Creating Account...</span>';
            signupSubmitBtn.disabled = true;
            
            // Simulate API call
            setTimeout(() => {
                // Show success message
                const successMessage = document.getElementById('successMessage');
                const successTitle = document.getElementById('successTitle');
                const successDesc = document.getElementById('successDesc');
                
                successTitle.textContent = 'Account created successfully!';
                successDesc.textContent = 'Welcome to Nexus! Redirecting to dashboard...';
                successMessage.classList.add('show');
                
                // Reset form
                signupSubmitBtn.classList.remove('loading');
                signupSubmitBtn.innerHTML = '<span>Create Account</span><i class="fas fa-user-plus"></i>';
                signupSubmitBtn.disabled = false;
                
                // Clear form
                signupForm.reset();
                strengthFill.className = 'strength-fill';
                strengthFill.style.width = '0%';
                strengthText.textContent = 'Password strength: None';
                
                // Hide success message after 3 seconds
                setTimeout(() => {
                    successMessage.classList.remove('show');
                    // Switch to login form
                    loginTab.click();
                    // In a real app, you would auto-login or redirect
                }, 3000);
            }, 1500);
        }
    });
}

// Social login buttons
const socialButtons = document.querySelectorAll('.social-btn');
socialButtons.forEach(button => {
    button.addEventListener('click', () => {
        const platform = button.querySelector('span').textContent;
        
        // Add click animation
        button.style.transform = 'scale(0.95)';
        setTimeout(() => {
            button.style.transform = '';
        }, 150);
        
        // Show loading on button
        const originalHTML = button.innerHTML;
        button.innerHTML = `<i class="fas fa-spinner fa-spin"></i><span>Connecting to ${platform}...</span>`;
        button.disabled = true;
        
        // Simulate social login process
        setTimeout(() => {
            button.innerHTML = originalHTML;
            button.disabled = false;
            
            // Show success message
            const successMessage = document.getElementById('successMessage');
            const successTitle = document.getElementById('successTitle');
            const successDesc = document.getElementById('successDesc');
            
            successTitle.textContent = `${platform} login successful!`;
            successDesc.textContent = 'Redirecting to dashboard...';
            successMessage.classList.add('show');
            
            setTimeout(() => {
                successMessage.classList.remove('show');
            }, 3000);
        }, 2000);
    });
});

// Forgot password link
const forgotPassword = document.getElementById('forgotPassword');
if (forgotPassword) {
    forgotPassword.addEventListener('click', (e) => {
        e.preventDefault();
        
        // Show a password reset modal (simulated)
        const email = prompt('Please enter your email address to reset your password:');
        if (email && validateEmail(email)) {
            const successMessage = document.getElementById('successMessage');
            const successTitle = document.getElementById('successTitle');
            const successDesc = document.getElementById('successDesc');
            
            successTitle.textContent = 'Reset link sent!';
            successDesc.textContent = `Check ${email} for password reset instructions.`;
            successMessage.classList.add('show');
            
            setTimeout(() => {
                successMessage.classList.remove('show');
            }, 4000);
        } else if (email) {
            alert('Please enter a valid email address.');
        }
    });
}

// Real-time validation
function setupRealTimeValidation(inputId, errorId, validationFn) {
    const input = document.getElementById(inputId);
    if (input) {
        input.addEventListener('blur', () => {
            const isValid = validationFn(input.value);
            showError(inputId, errorId, !isValid);
        });
        
        // For password, validate on input
        if (inputId.includes('Password') && !inputId.includes('confirm')) {
            input.addEventListener('input', () => {
                const isValid = validationFn(input.value);
                showError(inputId, errorId, !isValid);
            });
        }
    }
}

// Setup real-time validation for all fields
setupRealTimeValidation('loginEmail', 'loginEmailError', validateEmail);
setupRealTimeValidation('loginPassword', 'loginPasswordError', (val) => val.length >= 6);
setupRealTimeValidation('signupName', 'signupNameError', (val) => val.trim().length >= 2);
setupRealTimeValidation('signupEmail', 'signupEmailError', validateEmail);
setupRealTimeValidation('signupPassword', 'signupPasswordError', validatePassword);

// Confirm password validation
const confirmPasswordInput = document.getElementById('confirmPassword');
if (confirmPasswordInput) {
    confirmPasswordInput.addEventListener('input', () => {
        const password = document.getElementById('signupPassword').value;
        const confirm = confirmPasswordInput.value;
        
        if (confirm.length > 0 && password !== confirm) {
            showError('confirmPassword', 'confirmPasswordError', true);
        } else {
            showError('confirmPassword', 'confirmPasswordError', false);
        }
    });
}
</script>
Back to Portfolio