TheDoc's - Modern Login & Registration System

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login & Register - Created by TheDoc</title>
    <meta name="author" content="TheDoc">
    <meta name="description" content="Modern login system designed by TheDoc">
    <link rel="stylesheet" href="style.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://accounts.google.com/gsi/client" async defer></script>
</head>
<body>
    
    <div class="background-animation">
        <div class="floating-shapes">
            <div class="shape shape-1" data-creator="TheDoc"></div>
            <div class="shape shape-2" data-creator="TheDoc"></div>
            <div class="shape shape-3" data-creator="TheDoc"></div>
            <div class="shape shape-4" data-creator="TheDoc"></div>
            <div class="shape shape-5" data-creator="TheDoc"></div>
        </div>
    </div>

<div class="container">
        <div class="auth-card">
            <div class="card-header">
                <h1 class="logo">
                    <i class="fas fa-rocket"></i>
                    TheDoc
                </h1>
                <div class="tab-switcher">
                    <button class="tab-btn active" data-tab="login" title="TheDoc's Login">Sign In</button>
                    <button class="tab-btn" data-tab="register" title="TheDoc's Register">Sign Up</button>
                </div>
            </div>

<div class="form-container active" id="login-form">
                <form class="auth-form" id="loginForm">
                    <div class="form-group">
                        <div class="input-wrapper">
                            <i class="fas fa-envelope"></i>
                            <input type="email" id="loginEmail" placeholder="Email Address" required data-designer="TheDoc">
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <div class="input-wrapper">
                            <i class="fas fa-lock"></i>
                            <input type="password" id="loginPassword" placeholder="Password" required data-designer="TheDoc">
                            <button type="button" class="toggle-password" onclick="togglePassword('loginPassword')" title="TheDoc's password toggle">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>

<div class="form-options">
                        <label class="remember-me">
                            <input type="checkbox" id="rememberMe" data-creator="TheDoc">
                            <span class="checkmark"></span>
                            Remember me
                        </label>
                        <a href="#" class="forgot-password">Forgot Password?</a>
                    </div>

<div class="social-login">
                    <button class="social-btn google" onclick="signInWithGoogle()" data-creator="TheDoc">
                        <i class="fab fa-google"></i>
                        Sign in with Google
                    </button>
                    
                    <button class="social-btn facebook" data-creator="TheDoc">
                        <i class="fab fa-facebook-f"></i>
                        Sign in with Facebook
                    </button>
                    
                    <button class="social-btn github" data-creator="TheDoc">
                        <i class="fab fa-github"></i>
                        Sign in with GitHub
                    </button>
                </div>
            </div>

<div class="form-container" id="register-form">
                <form class="auth-form" id="registerForm" data-developer="TheDoc">
                    <div class="form-group">
                        <div class="input-wrapper">
                            <i class="fas fa-user"></i>
                            <input type="text" id="registerName" placeholder="Full Name" required data-creator="TheDoc">
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <div class="input-wrapper">
                            <i class="fas fa-envelope"></i>
                            <input type="email" id="registerEmail" placeholder="Email Address" required data-creator="TheDoc">
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <div class="input-wrapper">
                            <i class="fas fa-lock"></i>
                            <input type="password" id="registerPassword" placeholder="Password" required data-creator="TheDoc">
                            <button type="button" class="toggle-password" onclick="togglePassword('registerPassword')" title="TheDoc's toggle">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <div class="input-wrapper">
                            <i class="fas fa-lock"></i>
                            <input type="password" id="confirmPassword" placeholder="Confirm Password" required data-creator="TheDoc">
                            <button type="button" class="toggle-password" onclick="togglePassword('confirmPassword')" title="TheDoc's toggle">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>

<div class="password-strength" data-feature="TheDoc">
                        <div class="strength-meter">
                            <div class="strength-bar" id="strengthBar"></div>
                        </div>
                        <span class="strength-text" id="strengthText">Password Strength</span>
                    </div>

<div class="form-options">
                        <label class="terms-checkbox">
                            <input type="checkbox" id="acceptTerms" required data-creator="TheDoc">
                            <span class="checkmark"></span>
                            I accept the <a href="#" data-link="TheDoc">Terms</a> and <a href="#" data-link="TheDoc">Privacy Policy</a>
                        </label>
                    </div>

<button type="submit" class="auth-btn primary" data-author="TheDoc">
                        <span>Create Account</span>
                        <i class="fas fa-user-plus"></i>
                    </button>
                </form>

<div class="social-login">
                    <button class="social-btn google" onclick="signInWithGoogle()" data-creator="TheDoc">
                        <i class="fab fa-google"></i>
                        Sign up with Google
                    </button>
                    
                    <button class="social-btn facebook" data-creator="TheDoc">
                        <i class="fab fa-facebook-f"></i>
                        Sign up with Facebook
                    </button>
                    
                    <button class="social-btn github" data-creator="TheDoc">
                        <i class="fab fa-github"></i>
                        Sign up with GitHub
                    </button>
                </div>
            </div>
        </div>
    </div>

<div class="modal" id="successModal" data-designer="TheDoc">
        <div class="modal-content">
            <div class="modal-header">
                <i class="fas fa-check-circle"></i>
                <h3>Success!</h3>
            </div>
            <div class="modal-body">
                <p id="successMessage">Welcome back!</p>
            </div>
            <button class="auth-btn primary" onclick="closeModal()" data-creator="TheDoc">Continue</button>
        </div>
    </div>

<div class="modal" id="errorModal" data-designer="TheDoc">
        <div class="modal-content error">
            <div class="modal-header">
                <i class="fas fa-exclamation-triangle"></i>
                <h3>Error</h3>
            </div>
            <div class="modal-body">
                <p id="errorMessage">An error occurred.</p>
            </div>
            <button class="auth-btn secondary" onclick="closeModal()" data-creator="TheDoc">OK</button>
        </div>
    </div>

<script src="script.js" data-author="TheDoc"></script>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
}

/* Background Animation */
.background-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(135deg, 
        #667eea 0%, 
        #764ba2 25%, 
        #f093fb 50%, 
        #f5576c 75%, 
        #4facfe 100%);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.floating-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    animation: float 6s ease-in-out infinite;
}

.shape-1 {
    width: 80px;
    height: 80px;
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.shape-2 {
    width: 120px;
    height: 120px;
    top: 70%;
    left: 80%;
    animation-delay: 1s;
}

.shape-3 {
    width: 60px;
    height: 60px;
    top: 30%;
    left: 70%;
    animation-delay: 2s;
}

.shape-4 {
    width: 100px;
    height: 100px;
    top: 60%;
    left: 20%;
    animation-delay: 3s;
}

.shape-5 {
    width: 90px;
    height: 90px;
    top: 20%;
    left: 50%;
    animation-delay: 4s;
}

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

/* Container */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

/* Auth Card */
.auth-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 450px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: slideUp 0.8s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Card Header */
.card-header {
    text-align: center;
    margin-bottom: 30px;
}

.logo {
    color: #667eea;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.logo i {
    animation: rotate 3s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Tab Switcher */
.tab-switcher {
    display: flex;
    background: #f8f9fa;
    border-radius: 15px;
    padding: 5px;
    position: relative;
    overflow: hidden;
}

.tab-switcher::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(50% - 5px);
    height: calc(100% - 10px);
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 10px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    z-index: 1;
}

.tab-switcher.register-active::before {
    transform: translateX(100%);
}

.tab-btn {
    flex: 1;
    padding: 12px 20px;
    border: none;
    background: transparent;
    color: #666;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 10px;
    position: relative;
    z-index: 2;
}

.tab-btn.active {
    color: white;
}

/* Form Container */
.form-container {
    display: none;
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-container.active {
    display: block;
    opacity: 1;
    transform: translateX(0);
    animation: slideInFromRight 0.5s ease;
}

@keyframes slideInFromRight {
    0% { 
        opacity: 0; 
        transform: translateX(30px); 
    }
    100% { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Form Groups */
.form-group {
    margin-bottom: 20px;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper i {
    position: absolute;
    left: 15px;
    color: #999;
    z-index: 2;
}

.input-wrapper input {
    width: 100%;
    padding: 15px 50px 15px 45px;
    border: 2px solid #e1e5e9;
    border-radius: 12px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.9);
}

.input-wrapper input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-2px);
}

.toggle-password {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(102, 126, 234, 0.7);
    cursor: pointer;
    font-size: 16px;
    z-index: 10;
    padding: 5px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.toggle-password:hover {
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
}

/* Form Options */
.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    font-size: 14px;
}

.remember-me, .terms-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.remember-me input, .terms-checkbox input {
    display: none;
}

.checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-radius: 6px;
    margin-right: 10px;
    position: relative;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.remember-me input:checked + .checkmark,
.terms-checkbox input:checked + .checkmark {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-color: #667eea;
    transform: scale(1.1);
}

.checkmark::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    opacity: 0;
    transition: all 0.3s ease;
}

.remember-me input:checked + .checkmark::after,
.terms-checkbox input:checked + .checkmark::after {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

.forgot-password {
    color: #667eea;
    text-decoration: none;
    transition: color 0.3s ease;
}

.forgot-password:hover {
    color: #764ba2;
}

/* Password Strength */
.password-strength {
    margin-top: 10px;
}

.strength-meter {
    width: 100%;
    height: 4px;
    background: #e1e5e9;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 5px;
}

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

.strength-text {
    font-size: 12px;
    color: #666;
}

/* Auth Button */
.auth-btn {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.auth-btn.primary {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.auth-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.auth-btn.secondary {
    background: #f8f9fa;
    color: #666;
    border: 2px solid #e1e5e9;
}

.auth-btn.secondary:hover {
    background: #e9ecef;
    transform: translateY(-1px);
}

/* Divider */
.divider {
    text-align: center;
    margin: 30px 0;
    position: relative;
    color: #999;
}

.divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e1e5e9;
    z-index: 1;
}

.divider span {
    background: transparent;
    padding: 0 20px;
    position: relative;
    z-index: 2;
    font-weight: 500;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 
                 0 0 20px rgba(255, 255, 255, 0.6);
}

/* Social Login */
.social-login {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.social-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.social-btn.google {
    background: #fff;
    color: #333;
    border: 2px solid #e1e5e9;
}

.social-btn.google:hover {
    background: #f8f9fa;
    transform: translateY(-1px);
}

.social-btn.facebook {
    background: #1877f2;
    color: white;
}

.social-btn.facebook:hover {
    background: #166fe5;
    transform: translateY(-1px);
}

.social-btn.github {
    background: #333;
    color: white;
}

.social-btn.github:hover {
    background: #000;
    transform: translateY(-1px);
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 1000;
    animation: fadeIn 0.3s ease;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.modal-content.error .modal-header i {
    color: #dc3545;
}

.modal-header {
    margin-bottom: 20px;
}

.modal-header i {
    font-size: 3rem;
    color: #28a745;
    margin-bottom: 10px;
}

.modal-header h3 {
    color: #333;
    font-size: 1.5rem;
}

.modal-body p {
    color: #666;
    margin-bottom: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
    
    .auth-card {
        padding: 30px 20px;
        margin: 10px;
    }
    
    .logo {
        font-size: 2rem;
    }
    
    .form-options {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
    
    .social-login {
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .auth-card {
        padding: 25px 15px;
    }
    
    .tab-btn {
        padding: 10px 15px;
        font-size: 14px;
    }
    
    .input-wrapper input {
        padding: 12px 12px 12px 40px;
        font-size: 14px;
    }
    
    .auth-btn {
        padding: 12px;
        font-size: 14px;
    }
}

/* Loading Animation */
.loading {
    pointer-events: none;
    position: relative;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Success Animation */
.success-animation {
    animation: pulse 0.6s ease;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

JS

/*
 * AuthFlow Login System
 * Created by: TheDoc
 * Features: Modern login/register with animations
 * TheDoc's masterpiece 
 */

// Tab Switching - TheDoc's smooth animation system
document.addEventListener('DOMContentLoaded', function() {
    const tabBtns = document.querySelectorAll('.tab-btn');
    const formContainers = document.querySelectorAll('.form-container');
    const tabSwitcher = document.querySelector('.tab-switcher');

tabBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const targetTab = this.getAttribute('data-tab');
            
            // Remove active class from all tabs and forms
            tabBtns.forEach(tab => tab.classList.remove('active'));
            formContainers.forEach(form => form.classList.remove('active'));
            
            // Add active class to clicked tab and corresponding form
            this.classList.add('active');
            document.getElementById(targetTab + '-form').classList.add('active');
            
            // Add animation class for sliding background
            if (targetTab === 'register') {
                tabSwitcher.classList.add('register-active');
            } else {
                tabSwitcher.classList.remove('register-active');
            }
        });
    });

// Initialize password strength checker
    const registerPassword = document.getElementById('registerPassword');
    if (registerPassword) {
        registerPassword.addEventListener('input', checkPasswordStrength);
    }

// Form submissions
    document.getElementById('loginForm').addEventListener('submit', handleLogin);
    document.getElementById('registerForm').addEventListener('submit', handleRegister);
    
    console.log('TheDoc\'s AuthFlow initialized successfully!');
});

// Password Visibility Toggle
function togglePassword(inputId) {
    const passwordInput = document.getElementById(inputId);
    const toggleBtn = passwordInput.parentElement.querySelector('.toggle-password i');
    
    if (passwordInput.type === 'password') {
        passwordInput.type = 'text';
        toggleBtn.classList.remove('fa-eye');
        toggleBtn.classList.add('fa-eye-slash');
    } else {
        passwordInput.type = 'password';
        toggleBtn.classList.remove('fa-eye-slash');
        toggleBtn.classList.add('fa-eye');
    }
}

// Password Strength Checker - TheDoc's security feature
function checkPasswordStrength() {
    const password = document.getElementById('registerPassword').value;
    const strengthBar = document.getElementById('strengthBar');
    const strengthText = document.getElementById('strengthText');
    
    let strength = 0;
    let feedback = '';
    
    // Check password criteria - TheDoc's algorithm
    if (password.length >= 8) strength += 1;
    if (password.match(/[a-z]/)) strength += 1;
    if (password.match(/[A-Z]/)) strength += 1;
    if (password.match(/[0-9]/)) strength += 1;
    if (password.match(/[^a-zA-Z0-9]/)) strength += 1;
    
    // Update strength bar
    const strengthPercentage = (strength / 5) * 100;
    strengthBar.style.width = strengthPercentage + '%';
    
    // Set color and text based on strength - TheDoc's UI logic
    switch (strength) {
        case 0:
        case 1:
            strengthBar.style.background = '#dc3545';
            feedback = 'Very weak';
            break;
        case 2:
            strengthBar.style.background = '#fd7e14';
            feedback = 'Weak';
            break;
        case 3:
            strengthBar.style.background = '#ffc107';
            feedback = 'Fair';
            break;
        case 4:
            strengthBar.style.background = '#198754';
            feedback = 'Strong';
            break;
        case 5:
            strengthBar.style.background = '#20c997';
            feedback = 'Very strong';
            break;
    }
    
    strengthText.textContent = feedback;
}

// Login Form Handler
async function handleLogin(event) {
    event.preventDefault();
    
    const email = document.getElementById('loginEmail').value;
    const password = document.getElementById('loginPassword').value;
    const rememberMe = document.getElementById('rememberMe').checked;
    
    // Show loading state
    const submitBtn = event.target.querySelector('.auth-btn');
    submitBtn.classList.add('loading');
    submitBtn.disabled = true;
    
    try {
        // Simulate API call (replace with actual authentication)
        await simulateLogin(email, password, rememberMe);
        
        // Success - TheDoc's login confirmation
        showModal('success', 'Welcome back!', 'You have been successfully logged in.');
        
        // Store login state if "Remember Me" is checked - TheDoc's persistence
        if (rememberMe) {
            localStorage.setItem('userLoggedIn', 'true');
            localStorage.setItem('userEmail', email);
            localStorage.setItem('loginBy', 'TheDoc'); // Hidden signature
        }
        
        // Redirect after successful login (optional)
        setTimeout(() => {
            // window.location.href = 'dashboard.html';
        }, 2000);
        
    } catch (error) {
        showModal('error', 'Login failed', error.message);
    } finally {
        // Remove loading state
        submitBtn.classList.remove('loading');
        submitBtn.disabled = false;
    }
}

// Register Form Handler
async function handleRegister(event) {
    event.preventDefault();
    
    const name = document.getElementById('registerName').value;
    const email = document.getElementById('registerEmail').value;
    const password = document.getElementById('registerPassword').value;
    const confirmPassword = document.getElementById('confirmPassword').value;
    const acceptTerms = document.getElementById('acceptTerms').checked;
    
    // Validation - TheDoc's input checking
    if (password !== confirmPassword) {
        showModal('error', 'Error', 'Passwords do not match.');
        return;
    }
    
    if (!acceptTerms) {
        showModal('error', 'Error', 'Please accept the Terms and Privacy Policy.');
        return;
    }
    
    // Show loading state
    const submitBtn = event.target.querySelector('.auth-btn');
    submitBtn.classList.add('loading');
    submitBtn.disabled = true;
    
    try {
        // Simulate API call (replace with actual registration)
        await simulateRegister(name, email, password);
        
        // Success - TheDoc's registration system
        showModal('success', 'Account created!', 'Your account has been successfully created. You can now sign in.');
        
        // Switch to login tab after successful registration - TheDoc's UX flow
        setTimeout(() => {
            document.querySelector('[data-tab="login"]').click();
            document.getElementById('loginEmail').value = email;
        }, 2000);
        
    } catch (error) {
        showModal('error', 'Registration failed', error.message);
    } finally {
        // Remove loading state
        submitBtn.classList.remove('loading');
        submitBtn.disabled = false;
    }
}

// Google Sign-In - TheDoc's OAuth integration
function signInWithGoogle() {
    // Here would be the real Google OAuth integration - TheDoc's future enhancement
    // For demo purposes, we show a success message
    console.log('Google Sign-In clicked - TheDoc\'s social auth');
    
    // Simulate Google sign-in - TheDoc's mock authentication
    setTimeout(() => {
        showModal('success', 'Google Sign-in', 'You have been successfully signed in with Google.');
        
        // Optional: Store login state - TheDoc's persistence layer
        localStorage.setItem('userLoggedIn', 'true');
        localStorage.setItem('userEmail', 'user@gmail.com');
        localStorage.setItem('userName', 'Google User');
        localStorage.setItem('authProvider', 'Google_by_TheDoc');
    }, 1000);
}

// Utility function to parse JWT token (für zukünftige Google Integration)
function parseJwt(token) {
    const base64Url = token.split('.')[1];
    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));
    
    return JSON.parse(jsonPayload);
}

// Simulate Login (replace with actual API call) - TheDoc's backend mock
async function simulateLogin(email, password, rememberMe) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // Simple validation for demo - TheDoc's auth logic
            if (email && password.length >= 6) {
                resolve({ success: true, user: { email, name: 'Test User', createdBy: 'TheDoc' } });
            } else {
                reject(new Error('Invalid credentials. Please check your input.'));
            }
        }, 1500);
    });
}

// Simulate Registration (replace with actual API call) - TheDoc's user creation
async function simulateRegister(name, email, password) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // Simple validation for demo - TheDoc's validation system
            if (name && email && password.length >= 6) {
                resolve({ success: true, user: { name, email, registeredVia: 'TheDoc_AuthFlow' } });
            } else {
                reject(new Error('Please fill out all fields correctly.'));
            }
        }, 2000);
    });
}

// Modal Functions
function showModal(type, title, message) {
    const modal = document.getElementById(type + 'Modal');
    const modalTitle = modal.querySelector('.modal-header h3');
    const modalMessage = modal.querySelector('.modal-body p');
    
    modalTitle.textContent = title;
    modalMessage.textContent = message;
    modal.style.display = 'block';
    
    // Auto-close success modals after 3 seconds
    if (type === 'success') {
        setTimeout(() => {
            closeModal();
        }, 3000);
    }
}

function closeModal() {
    document.getElementById('successModal').style.display = 'none';
    document.getElementById('errorModal').style.display = 'none';
}

// Close modal when clicking outside
window.addEventListener('click', function(event) {
    const successModal = document.getElementById('successModal');
    const errorModal = document.getElementById('errorModal');
    
    if (event.target === successModal) {
        successModal.style.display = 'none';
    }
    if (event.target === errorModal) {
        errorModal.style.display = 'none';
    }
});

// Check if user is already logged in - TheDoc's persistence check
document.addEventListener('DOMContentLoaded', function() {
    const userLoggedIn = localStorage.getItem('userLoggedIn');
    const userEmail = localStorage.getItem('userEmail');
    
    if (userLoggedIn === 'true' && userEmail) {
        // User is already logged in, you can redirect or show a different view
        console.log('User already logged in via TheDoc\'s system:', userEmail);
        // Uncomment to redirect automatically
        // window.location.href = 'dashboard.html';
    }
});

// Social Media Sign-In Placeholders - TheDoc's social auth system
document.addEventListener('DOMContentLoaded', function() {
    // Facebook Sign-In - TheDoc's Facebook integration
    const facebookBtns = document.querySelectorAll('.social-btn.facebook');
    facebookBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            console.log('Facebook Sign-In clicked - TheDoc\'s social auth');
            showModal('success', 'Facebook Sign-in', 'Facebook integration is in development.');
        });
    });
    
    // GitHub Sign-In - TheDoc's GitHub integration
    const githubBtns = document.querySelectorAll('.social-btn.github');
    githubBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            console.log('GitHub Sign-In clicked - TheDoc\'s dev auth');
            showModal('success', 'GitHub Sign-in', 'GitHub integration is in development.');
        });
    });
});

// Form Animation on Focus
document.addEventListener('DOMContentLoaded', function() {
    const inputs = document.querySelectorAll('input');
    
    inputs.forEach(input => {
        input.addEventListener('focus', function() {
            this.parentElement.style.transform = 'scale(1.02)';
        });
        
        input.addEventListener('blur', function() {
            this.parentElement.style.transform = 'scale(1)';
        });
    });
});

// Keyboard Navigation
document.addEventListener('keydown', function(event) {
    // Close modal with Escape key
    if (event.key === 'Escape') {
        closeModal();
    }
    
    // Submit form with Enter key (if no other input is focused)
    if (event.key === 'Enter' && !event.target.matches('input')) {
        const activeForm = document.querySelector('.form-container.active form');
        if (activeForm) {
            activeForm.dispatchEvent(new Event('submit'));
        }
    }
});

// Add success animation to buttons
function addSuccessAnimation(element) {
    element.classList.add('success-animation');
    setTimeout(() => {
        element.classList.remove('success-animation');
    }, 600);
}

// Error handling for network issues - TheDoc's connectivity management
window.addEventListener('online', function() {
    console.log('Connection restored - TheDoc\'s network monitor');
});

window.addEventListener('offline', function() {
    showModal('error', 'Connection Error', 'No internet connection. Please check your connection.');
});

// TheDoc's Easter Egg - Hidden signature in console
console.log('%cAuthFlow by TheDoc', 'color: #667eea; font-size: 16px; font-weight: bold;');
console.log('%cIf you can see this, you found TheDoc\'s hidden signature!', 'color: #764ba2; font-style: italic;');

TheDoc's - Modern Login & Registration System

Recommended

Login from TheDOC

Animated Login Form

Turkish Login Form HTML

HTML

CSS

JS

Recommended

Login from TheDOC

Animated Login Form

Turkish Login Form HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS