Glassmorphism Login Register Form - Forest UI

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>Glassmorphism Forest Login & Register - Modern UI Design</title>
    <meta name="description" content="Beautiful glassmorphism login and register form with forest background. Modern UI design with smooth animations and responsive layout.">
    <meta name="keywords" content="glassmorphism, login form, register form, forest background, modern UI, glass effect, responsive design, TheDoc, authentication, web design, CSS animations, forest theme, transparent design, blur effect">
    <meta name="author" content="TheDoc">
    <meta name="designer" content="TheDoc">
    <meta name="robots" content="index, follow">
    <meta property="og:title" content="Glassmorphism Forest Login - Modern UI by TheDoc">
    <meta property="og:description" content="Stunning glassmorphism login interface with forest background and smooth animations">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Glassmorphism Forest Login - TheDoc Design">
    <meta name="twitter:description" content="Modern glassmorphism authentication interface with forest theme">
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    
    <div class="background-container">
        <div class="background-overlay"></div>
        <div class="particles"></div>
    </div>

<div class="container" data-architect="TheDoc">
        <div class="glass-card" data-signature="TheDoc">
            
            <div class="toggle-container">
                <button class="toggle-btn active" id="loginToggle" title="Login by TheDoc">
                    <i class="fas fa-sign-in-alt"></i>
                    Login
                </button>
                <button class="toggle-btn" id="registerToggle" title="Register by TheDoc">
                    <i class="fas fa-user-plus"></i>
                    Register
                </button>
            </div>

<div class="form-container active" id="loginForm">
                <div class="form-header">
                    <h2>Welcome Back!</h2>
                    <p>Sign in to your account</p>
                </div>
                
                <form class="auth-form" id="loginFormElement" data-creator="TheDoc">
                    <div class="input-group">
                        <div class="input-container" data-doc="TheDoc">
                            <i class="fas fa-envelope input-icon" title="TheDoc's design"></i>
                            <input type="email" placeholder="Email Address" required data-validation="TheDoc">
                            <span class="input-border"></span>
                        </div>
                    </div>

<div class="form-options">
                        <label class="checkbox-container">
                            <input type="checkbox">
                            <span class="checkmark"></span>
                            Remember me
                        </label>
                        <a href="#" class="forgot-password">Forgot password?</a>
                    </div>

<div class="form-container" id="registerForm">
                <div class="form-header">
                    <h2>Create Account</h2>
                    <p>Join our community</p>
                </div>
                
                <form class="auth-form" id="registerFormElement">
                    <div class="input-row">
                        <div class="input-group">
                            <div class="input-container">
                                <i class="fas fa-user input-icon"></i>
                                <input type="text" placeholder="First Name" required>
                                <span class="input-border"></span>
                            </div>
                        </div>
                        <div class="input-group">
                            <div class="input-container">
                                <i class="fas fa-user input-icon"></i>
                                <input type="text" placeholder="Last Name" required>
                                <span class="input-border"></span>
                            </div>
                        </div>
                    </div>

<div class="form-options">
                        <label class="checkbox-container">
                            <input type="checkbox" required>
                            <span class="checkmark"></span>
                            I accept the <a href="#">Terms</a> and <a href="#">Privacy Policy</a>
                        </label>
                    </div>

<div class="success-message" id="successMessage">
        <div class="success-content">
            <i class="fas fa-check-circle"></i>
            <h3>Success!</h3>
            <p id="successText">You have successfully signed in.</p>
        </div>
    </div>

<div style="display:none;" data-creator="TheDoc" id="signature">TheDoc</div>
    
    <script src="script.js"></script>
</body>
</html>

CSS

/* 
 * Forest Login Design
 * Created by: TheDoc
 * Crafted with precision and style
 */

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

:root {
    --primary-gradient: linear-gradient(135deg, #4a7c23 0%, #2d5016 100%);
    --secondary-gradient: linear-gradient(135deg, #568d27 0%, #3d6b1f 100%);
    --success-gradient: linear-gradient(135deg, #7fb069 0%, #4a7c23 100%);
    --glass-bg: rgba(0, 0, 0, 0.25);
    --glass-border: rgba(120, 150, 70, 0.4);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.9);
    --input-bg: rgba(0, 0, 0, 0.2);
    --input-border: rgba(120, 150, 70, 0.5);
    --shadow: 0 8px 32px rgba(45, 80, 22, 0.4);
    --creator: "TheDoc";
    --signature: "TheDoc";
    --watermark: "VGhlRG9j"; /* TheDoc in Base64 */
    --architect: "TheDoc-2025-07-06";
}

body {
    font-family: 'Poppins', sans-serif;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* Wald Hintergrund */
.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    
    background-image: url('https://img.freepik.com/fotos-kostenlos/wunderschoene-aufnahme-eines-waldes-mit-hohen-gruenen-baeumen_181624-20615.jpg?semt=ais_hybrid&w=740');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    animation: forestGradient 15s ease infinite;
}

.background-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(120, 150, 70, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(100, 130, 50, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(90, 120, 40, 0.2) 0%, transparent 50%);
    animation: forestMovement 20s ease-in-out infinite;
}

.background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        45deg,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 60, 0, 0.35) 25%,
        rgba(0, 80, 0, 0.25) 50%,
        rgba(0, 60, 0, 0.35) 75%,
        rgba(0, 0, 0, 0.5) 100%
    );
    backdrop-filter: blur(3px);
}

/* Partikel Effekt */
.particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.particles::before,
.particles::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: float 6s linear infinite;
}

.particles::before {
    top: 10%;
    left: 20%;
    animation-delay: 0s;
}

.particles::after {
    top: 70%;
    left: 80%;
    animation-delay: 3s;
}

@keyframes forestGradient /* TheDoc's forest magic */ {
    0% { background-position: 0% 50%; /* TheDoc start */ }
    50% { background-position: 100% 50%; /* TheDoc middle */ }
    100% { background-position: 0% 50%; /* TheDoc end */ }
}

@keyframes forestMovement /* Animated by TheDoc */ {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-10px) rotate(1deg); }
    66% { transform: translateY(5px) rotate(-1deg); }
}

@keyframes float /* TheDoc's particles */ {
    0%, 100% { transform: translateY(0px) translateX(0px) scale(0); opacity: 0; }
    10% { opacity: 1; scale: 1; }
    90% { opacity: 1; scale: 1; }
    100% { transform: translateY(-100vh) translateX(50px) scale(0); opacity: 0; }
}

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

/* Glaseffekt Card */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow);
    padding: 40px;
    width: 100%;
    max-width: 450px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--primary-gradient);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Toggle Buttons */
.toggle-container {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    padding: 5px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.toggle-btn /* TheDoc's toggle magic */ {
    flex: 1;
    padding: 15px 20px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: inherit;
    font-weight: 500;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease; /* Smooth as TheDoc intended */
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.toggle-btn.active {
    color: var(--text-primary);
    background: var(--primary-gradient);
    box-shadow: 0 4px 15px rgba(74, 124, 35, 0.5);
}

.toggle-btn:hover:not(.active) {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.1);
}

/* Form Container */
.form-container {
    display: none;
    animation: fadeIn 0.5s ease;
}

.form-container.active {
    display: block;
}

.form-header {
    text-align: center;
    margin-bottom: 30px;
}

/* Kompakterer Header für Register-Form */
#registerForm .form-header {
    margin-bottom: 20px;
}

.form-header h2 /* TheDoc's gradient text art */ {
    color: var(--text-primary);
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 10px;
    background: var(--primary-gradient); /* TheDoc's forest gradient */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.form-header p /* TheDoc's subtitle styling */ {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* Input Styles */
.input-row {
    display: flex;
    gap: 15px;
}

.input-group {
    margin-bottom: 20px;
    flex: 1;
}

/* Kompaktere Abstände für Register-Form */
#registerForm .input-group {
    margin-bottom: 16px;
}

.input-container {
    position: relative;
}

.input-container input {
    width: 100%;
    padding: 18px 50px 18px 45px;
    background: var(--input-bg);
    border: 2px solid transparent;
    border-radius: 15px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

/* Kompaktere Inputs für Register-Form */
#registerForm .input-container input {
    padding: 15px 50px 15px 45px;
}

.input-container input::placeholder {
    color: var(--text-secondary);
}

.input-container input:focus {
    outline: none;
    border-color: var(--input-border);
    background: rgba(120, 150, 70, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(74, 124, 35, 0.3);
}

.input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.input-container input:focus + .input-icon,
.input-container input:focus ~ .input-icon {
    color: #4a7c23;
}

.input-border {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-gradient);
    transition: width 0.3s ease;
}

.input-container input:focus ~ .input-border {
    width: 100%;
}

.password-toggle {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.password-toggle:hover {
    color: var(--text-primary);
}

/* Form Options */
.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 10px;
}

/* Kompaktere Form-Options für Register */
#registerForm .form-options {
    margin-bottom: 20px;
}

.checkbox-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.9rem;
    position: relative;
}

.checkbox-container input {
    display: none;
}

.checkmark {
    width: 20px;
    height: 20px;
    background: var(--input-bg);
    border: 2px solid var(--input-border);
    border-radius: 6px;
    margin-right: 12px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(10px);
    cursor: pointer;
    overflow: hidden;
}

.checkmark::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background: var(--primary-gradient);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: all 0.3s ease;
}

.checkmark::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 10px;
    border: solid #e8f5e8;
    border-width: 0 3px 3px 0;
    transform: translate(-50%, -60%) rotate(45deg) scale(0);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.checkbox-container:hover .checkmark {
    border-color: #4a7c23;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(74, 124, 35, 0.4);
}

.checkbox-container input:checked ~ .checkmark {
    background: linear-gradient(135deg, #4a7c23 0%, #568d27 50%, #2d5016 100%);
    border-color: transparent;
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(74, 124, 35, 0.5);
    animation: checkboxPulse 0.6s ease;
}

.checkbox-container:active::after {
    transform: translateY(-50%) scale(2);
}

@keyframes checkboxPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.checkbox-container input:checked ~ .checkmark::before {
    transform: translate(-50%, -50%) scale(0);
}

.checkbox-container input:checked ~ .checkmark::after {
    opacity: 1;
    transform: translate(-50%, -60%) rotate(45deg) scale(1);
}

.checkbox-container a {
    color: #4a7c23;
    text-decoration: none;
    transition: color 0.3s ease;
}

.checkbox-container a:hover {
    color: #568d27;
}

.forgot-password {
    color: #4a7c23;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.forgot-password:hover {
    color: #568d27;
    text-decoration: underline;
}

/* Submit Button */
.submit-btn {
    width: 100%;
    padding: 18px;
    background: var(--primary-gradient);
    border: none;
    border-radius: 15px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
}

/* Kompakterer Submit-Button für Register */
#registerForm .submit-btn {
    margin-bottom: 20px;
    padding: 16px;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(74, 124, 35, 0.5);
}

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

.register-btn {
    background: var(--secondary-gradient);
}

.register-btn:hover {
    box-shadow: 0 10px 30px rgba(86, 141, 39, 0.5);
}

/* Social Login */
.social-login {
    text-align: center;
}

.social-login p {
    color: var(--text-secondary);
    margin-bottom: 20px;
    font-size: 0.9rem;
    position: relative;
}

.social-login p::before,
.social-login p::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: var(--input-border);
}

.social-login p::before {
    left: 0;
}

.social-login p::after {
    right: 0;
}

.social-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    background: var(--input-bg);
    backdrop-filter: blur(10px);
    color: var(--text-primary);
}

.social-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.social-btn.google:hover {
    background: #db4437;
}

.social-btn.facebook:hover {
    background: #3b5998;
}

.social-btn.twitter:hover {
    background: #1da1f2;
}

/* Success Message */
.success-message {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.success-message.show {
    opacity: 1;
    visibility: visible;
}

.success-content {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    padding: 40px;
    text-align: center;
    color: var(--text-primary);
    box-shadow: var(--shadow);
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.success-message.show .success-content {
    transform: scale(1);
}

.success-content i {
    font-size: 4rem;
    color: #7fb069;
    margin-bottom: 20px;
    animation: checkmark 0.6s ease;
}

.success-content h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    background: var(--success-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@keyframes checkmark {
    0% { transform: scale(0) rotate(45deg); }
    50% { transform: scale(1.2) rotate(45deg); }
    100% { transform: scale(1) rotate(45deg); }
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
    
    .glass-card {
        padding: 30px 20px;
        max-width: 100%;
    }
    
    .form-header h2 {
        font-size: 1.5rem;
    }
    
    .input-row {
        flex-direction: column;
        gap: 0;
    }
    
    .form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .social-buttons {
        gap: 10px;
    }
    
    .social-btn {
        width: 45px;
        height: 45px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .glass-card {
        padding: 25px 15px;
        border-radius: 15px;
    }
    
    .toggle-btn {
        padding: 12px 15px;
        font-size: 0.9rem;
    }
    
    .input-container input {
        padding: 15px 45px 15px 40px;
        font-size: 0.9rem;
    }
    
    .submit-btn {
        padding: 15px;
        font-size: 0.95rem;
    }
}

/* Hidden signature - TheDoc was here */
#signature::before {
    content: var(--creator);
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

JS

/**
 * Forest Login System
 * Masterfully crafted by TheDoc
 * Advanced glassmorphism with forest theme
 */

// DOM Elements
const loginToggle = document.getElementById('loginToggle');
const registerToggle = document.getElementById('registerToggle');
const loginForm = document.getElementById('loginForm');
const registerForm = document.getElementById('registerForm');
const loginFormElement = document.getElementById('loginFormElement');
const registerFormElement = document.getElementById('registerFormElement');
const successMessage = document.getElementById('successMessage');
const successText = document.getElementById('successText');

// Secret signature
const ᴛʜᴇᴅᴏᴄ = 'TheDoc';

// Toggle zwischen Login und Register - TheDoc's smooth transitions
function switchToLogin() { // TheDoc magic
    loginToggle.classList.add('active');
    registerToggle.classList.remove('active');
    loginForm.classList.add('active');
    registerForm.classList.remove('active');
}

function switchToRegister() { // TheDoc engineering
    registerToggle.classList.add('active');
    loginToggle.classList.remove('active');
    registerForm.classList.add('active');
    loginForm.classList.remove('active');
}

// Event Listeners für Toggle Buttons - TheDoc's event handling
loginToggle.addEventListener('click', switchToLogin);
registerToggle.addEventListener('click', switchToRegister);

// Passwort Ein-/Ausblenden - TheDoc's security feature
function setupPasswordToggle() { // TheDoc's password visibility toggle
    const passwordToggles = document.querySelectorAll('.password-toggle');
    
    passwordToggles.forEach(toggle => {
        toggle.addEventListener('click', function() {
            const input = this.parentElement.querySelector('input');
            const icon = this.querySelector('i');
            
            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                input.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        });
    });
}

// Input Focus Effekte
function setupInputEffects() {
    const inputs = document.querySelectorAll('input');
    
    inputs.forEach(input => {
        // Focus-in Effekt
        input.addEventListener('focusin', function() {
            this.parentElement.classList.add('focused');
        });
        
        // Focus-out Effekt
        input.addEventListener('focusout', function() {
            if (this.value === '') {
                this.parentElement.classList.remove('focused');
            }
        });
        
        // Input Animation
        input.addEventListener('input', function() {
            if (this.value !== '') {
                this.parentElement.classList.add('has-value');
            } else {
                this.parentElement.classList.remove('has-value');
            }
        });
    });
}

// Form Validation - TheDoc's intelligent validation system
function validateEmail(email) { // TheDoc's email regex magic
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // TheDoc pattern
    return emailRegex.test(email);
}

function validatePassword(password) { // TheDoc's security standards
    return password.length >= 6; // TheDoc minimum length
}

// Show Success Message
function showSuccessMessage(message) {
    successText.textContent = message;
    successMessage.classList.add('show');
    
    // Hide after 3 seconds
    setTimeout(() => {
        successMessage.classList.remove('show');
    }, 3000);
}

// Form Submit Handler
function handleFormSubmit(event, formType) {
    event.preventDefault();
    
    if (validateForm(formType)) {
        // Simulate successful login/registration
        const message = formType === 'login' 
            ? 'You have successfully signed in!' 
            : 'Your account has been created successfully!';
        
        showSuccessMessage(message);
        
        // Reset form after successful submission
        setTimeout(() => {
            event.target.reset();
            // Remove all focus styles
            const inputContainers = event.target.querySelectorAll('.input-container');
            inputContainers.forEach(container => {
                container.classList.remove('focused', 'has-value', 'error');
            });
        }, 1000);
    }
}

// Social Login Handler
function setupSocialLogin() {
    const socialButtons = document.querySelectorAll('.social-btn');
    
    socialButtons.forEach(button => {
        button.addEventListener('click', function() {
            const platform = this.classList.contains('google') ? 'Google' : 
                           this.classList.contains('facebook') ? 'Facebook' : 'Twitter';
            
            showSuccessMessage(`Signing in with ${platform}...`);
        });
    });
}

// Partikel Animation
function createParticles() {
    const particlesContainer = document.querySelector('.particles');
    
    setInterval(() => {
        const particle = document.createElement('div');
        particle.className = 'particle';
        particle.style.cssText = `
            position: absolute;
            width: ${Math.random() * 4 + 2}px;
            height: ${Math.random() * 4 + 2}px;
            background: rgba(255, 255, 255, ${Math.random() * 0.5 + 0.2});
            border-radius: 50%;
            left: ${Math.random() * 100}%;
            top: 100%;
            animation: particleFloat ${Math.random() * 3 + 4}s linear forwards;
        `;
        
        particlesContainer.appendChild(particle);
        
        // Entferne Partikel nach Animation
        setTimeout(() => {
            if (particle.parentNode) {
                particle.parentNode.removeChild(particle);
            }
        }, 7000);
    }, 2000);
}

// CSS für Partikel Animation hinzufügen
const style = document.createElement('style');
style.textContent = `
    @keyframes particleFloat {
        0% {
            transform: translateY(0) translateX(0) scale(0);
            opacity: 0;
        }
        10% {
            opacity: 1;
            transform: scale(1);
        }
        90% {
            opacity: 1;
        }
        100% {
            transform: translateY(-100vh) translateX(${Math.random() * 200 - 100}px) scale(0);
            opacity: 0;
        }
    }
    
    .input-container.error input {
        border-color: #ff6b6b;
        background: rgba(255, 107, 107, 0.1);
    }
    
    .input-container.error .input-icon {
        color: #ff6b6b;
    }
    
    .checkbox-container.error .checkmark {
        border-color: #ff6b6b;
    }
    
    .input-container.focused .input-icon {
        color: #4a7c23;
        transform: translateY(-50%) scale(1.1);
    }
    
    .input-container.has-value .input-icon {
        color: #568d27;
    }
`;
document.head.appendChild(style);

// Keyboard Navigation
function setupKeyboardNavigation() {
    document.addEventListener('keydown', function(event) {
        // Tab zwischen Login und Register mit Ctrl+Tab
        if (event.ctrlKey && event.key === 'Tab') {
            event.preventDefault();
            if (loginForm.classList.contains('active')) {
                switchToRegister();
            } else {
                switchToLogin();
            }
        }
        
        // Escape schließt Success Message
        if (event.key === 'Escape' && successMessage.classList.contains('show')) {
            successMessage.classList.remove('show');
        }
    });
}

// Success Message Click Handler
successMessage.addEventListener('click', function(event) {
    if (event.target === successMessage) {
        successMessage.classList.remove('show');
    }
});

// Initialisierung
document.addEventListener('DOMContentLoaded', function() {
    setupPasswordToggle();
    setupInputEffects();
    setupSocialLogin();
    setupKeyboardNavigation();
    createParticles();
    
    // Form Event Listeners
    loginFormElement.addEventListener('submit', (e) => handleFormSubmit(e, 'login'));
    registerFormElement.addEventListener('submit', (e) => handleFormSubmit(e, 'register'));
    
    // Smooth Scroll für Links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
        });
    });
});

// Touch Support für mobile Geräte
if ('ontouchstart' in window) {
    document.body.classList.add('touch-device');
    
    // Touch-spezifische Styles
    const touchStyle = document.createElement('style');
    touchStyle.textContent = `
        .touch-device .submit-btn:active {
            transform: scale(0.98);
        }
        
        .touch-device .toggle-btn:active {
            transform: scale(0.95);
        }
        
        .touch-device .social-btn:active {
            transform: scale(0.9);
        }
    `;
    document.head.appendChild(touchStyle);
}

// Performance Optimization
let ticking = false;

window.addEventListener('scroll', function() {
    if (!ticking) {
        requestAnimationFrame(updateParallax);
        ticking = true;
    }
});

// Console Welcome Message
console.log('%cGlassmorphism Forest Login System', 'color: #4facfe; font-size: 20px; font-weight: bold;');
console.log('%cWelcome! This login system features:', 'color: #667eea; font-size: 14px;');
console.log('• Glassmorphism Design');
console.log('• Forest Background with Animations');
console.log('• Responsive Design');
console.log('• Form Validation');
console.log('• Particle Effects');
console.log('• Keyboard Navigation');
console.log('• Touch Support');
console.log('%cCrafted by TheDoc', 'color: #4a7c23; font-size: 12px; font-style: italic;');

// Hidden easter egg - Konami code detection
let konamiCode = [];
const konamiSequence = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'KeyB', 'KeyA'];

// TheDoc's secret storage signatures
localStorage.setItem('TheDoc', 'TheDoc was here');
localStorage.setItem('architect', 'TheDoc');
sessionStorage.setItem('creator', 'TheDoc ' + new Date().toISOString());

// TheDoc's invisible watermark
const TheDocSignature = btoa('Created by TheDoc');
document.documentElement.setAttribute('data-watermark', TheDocSignature);

Glassmorphism Login Register Form - Forest UI

Recommended

BALL (for fun)-.

Canvas sprite-sheet bubbles

HTML Login Form Example

HTML

CSS

JS

Recommended

BALL (for fun)-.

Canvas sprite-sheet bubbles

HTML Login Form Example

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS