Glassmorphism Forest Login & Register from TheDoc

Open In Editor Video 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 Forest Login & Register from TheDoc

Recommended

bomb login

Login Form with Social Login

Coding The Facebook Login Page By Hand

HTML

CSS

JS

Recommended

bomb login

Login Form with Social Login

Coding The Facebook Login Page By Hand

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS