Password Generator from TheDoc

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>TheDoc's Password Generator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="toggle-container">
                <label class="toggle-switch">
                    <input type="checkbox" id="toggle-darkmode" aria-label="Toggle dark mode">
                    <span class="slider">
                        
                        <span class="icon sun">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                                <circle cx="12" cy="12" r="5" fill="#f7c948"/>
                                <g stroke="#f7c948" stroke-width="2">
                                    <line x1="12" y1="2" x2="12" y2="5"/>
                                    <line x1="12" y1="19" x2="12" y2="22"/>
                                    <line x1="2" y1="12" x2="5" y2="12"/>
                                    <line x1="19" y1="12" x2="22" y2="12"/>
                                    <line x1="4.22" y1="4.22" x2="6.34" y2="6.34"/>
                                    <line x1="17.66" y1="17.66" x2="19.78" y2="19.78"/>
                                    <line x1="4.22" y1="19.78" x2="6.34" y2="17.66"/>
                                    <line x1="17.66" y1="6.34" x2="19.78" y2="4.22"/>
                                </g>
                            </svg>
                        </span>
                        
                        <span class="icon moon">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                                <path d="M21 12.79A9 9 0 0 1 12.79 3c-.55 0-.67.72-.19.96A7 7 0 1 0 20.04 13c.24.48-.41.74-.74.21z" fill="#a3bffa"/>
                            </svg>
                        </span>
                    </span>
                </label>
            </div>
            <h1 class="title">Password Generator</h1>
            <p class="subtitle">Create secure passwords instantly</p>
        </div>

<div class="form-group">
            <label for="length">Password Length</label>
            <div class="length-container">
                <input type="range" id="length" class="length-slider" min="4" max="50" value="12">
                <span class="length-value" id="lengthValue">12</span>
            </div>
        </div>

<div class="form-group">
            <label>Character Types</label>
            <div class="checkbox-group">
                <div class="checkbox-item active" data-type="uppercase">
                    <input type="checkbox" id="uppercase" checked>
                    <label for="uppercase">Uppercase (A-Z)</label>
                </div>
                <div class="checkbox-item active" data-type="lowercase">
                    <input type="checkbox" id="lowercase" checked>
                    <label for="lowercase">Lowercase (a-z)</label>
                </div>
                <div class="checkbox-item active" data-type="numbers">
                    <input type="checkbox" id="numbers" checked>
                    <label for="numbers">Numbers (0-9)</label>
                </div>
                <div class="checkbox-item" data-type="symbols">
                    <input type="checkbox" id="symbols">
                    <label for="symbols">Symbols (!@#$)</label>
                </div>
            </div>
        </div>

<button class="generate-btn" id="generateBtn">Generate Password</button>

<div class="result-container">
            <div class="password-display" id="passwordDisplay">
                Click "Generate Password" to create a secure password
            </div>
            <button class="copy-btn" id="copyBtn">Copy to Clipboard</button>
            
            <div class="strength-meter" id="strengthMeter">
                <div class="strength-bar">
                    <div class="strength-fill" id="strengthFill"></div>
                </div>
                <div class="strength-text" id="strengthText">Password Strength</div>
            </div>
        </div>

<div class="footer">
            <p>© 2025 Secure Password Generator</p>
        </div>
    </div>

CSS

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

:root {
    --bg-light: #f5f7fa;
    --bg-dark: #0f0f23;
    --card-light: #ffffff;
    --card-dark: #1a1a2e;
    --text-light: #2c3e50;
    --text-dark: #e8e8e8;
    --accent: #6c63ff;
    --accent-hover: #5a52d5;
    --border-light: #e1e8ed;
    --border-dark: #2a3441;
    --success: #28a745;
    --warning: #ffc107;
    --danger: #dc3545;
    --toggle-bg-light: #e2e8f0;
    --toggle-bg-dark: #2d3748;
    --toggle-thumb-light: #ffffff;
    --toggle-thumb-dark: #1a202c;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg-light);
    color: var(--text-light);
    transition: all 0.3s ease;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

body.dark {
    background: var(--bg-dark);
    color: var(--text-dark);
}

.container {
    background: var(--card-light);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    padding: 40px;
    width: 100%;
    max-width: 500px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

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

.container::before {
    content: "TheDoc";
    position: absolute;
    top: -50px;
    right: -50px;
    font-size: 120px;
    font-weight: bold;
    opacity: 0.03;
    transform: rotate(45deg);
    pointer-events: none;
    z-index: 1;
}

.header {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}

.title {
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent), #ff6b6b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
}

.subtitle {
    font-size: 1rem;
    opacity: 0.7;
    letter-spacing: 0.5px;
}

/* Beautiful Dark Mode Toggle */
.toggle-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    z-index: 3;
}

.toggle-switch {
    position: relative;
    width: 60px;
    height: 32px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    background: #bfc9d1;
    border-radius: 32px;
    transition: background 0.4s cubic-bezier(.4,0,.2,1);
    box-shadow: 
        0 2px 8px rgba(0,0,0,0.08),
        0 4px 16px rgba(0,0,0,0.05);
    overflow: hidden;
}

.slider::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.toggle-switch:hover .slider::before {
    transform: translateX(100%);
}

.slider:after {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 4px;
    bottom: 4px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.4s cubic-bezier(.4,0,.2,1), background 0.4s;
    box-shadow: 
        0 2px 8px rgba(0,0,0,0.12),
        0 4px 16px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-switch input:checked + .slider {
    background: #222b45;
    box-shadow: 
        0 2px 8px rgba(0,0,0,0.2),
        0 4px 16px rgba(0,0,0,0.15),
        0 0 20px rgba(108, 99, 255, 0.1);
}

.toggle-switch input:checked + .slider:after {
    transform: translateX(28px);
    background: #222b45;
    box-shadow: 
        0 2px 12px rgba(0,0,0,0.2),
        0 4px 20px rgba(0,0,0,0.15),
        0 0 15px rgba(108, 99, 255, 0.2);
}

/* Sun & Moon icons inside the toggle */
.slider .icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 0.4s cubic-bezier(.4,0,.2,1), transform 0.4s cubic-bezier(.4,0,.2,1);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 24px;
    z-index: 2;
}

.slider .icon.sun {
    left: 4px;
    color: #f7c948;
}

.slider .icon.moon {
    right: 4px;
    color: #a3bffa;
}

.slider .icon svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.toggle-switch input:checked + .slider .icon.sun {
    opacity: 0.3;
    transform: translateY(-50%) rotate(180deg) scale(0.8);
}

.toggle-switch input:checked + .slider .icon.moon {
    opacity: 1;
    transform: translateY(-50%) rotate(0deg) scale(1);
}

.toggle-switch input:not(:checked) + .slider .icon.sun {
    opacity: 1;
    transform: translateY(-50%) rotate(0deg) scale(1);
}

.toggle-switch input:not(:checked) + .slider .icon.moon {
    opacity: 0.3;
    transform: translateY(-50%) rotate(-180deg) scale(0.8);
}

/* Hover effects */
.toggle-switch:hover .slider {
    transform: scale(1.02);
}

.toggle-switch:active .slider:after {
    transform: translateX(14px) scale(0.95);
}

.toggle-switch input:checked:active + .slider:after {
    transform: translateX(14px) scale(0.95);
}

/* Focus styles for accessibility */
.toggle-switch input:focus + .slider {
    box-shadow: 
        0 2px 8px rgba(0,0,0,0.08),
        0 4px 16px rgba(0,0,0,0.05),
        0 0 0 3px rgba(108, 99, 255, 0.3);
}

body.dark .toggle-switch input:focus + .slider {
    box-shadow: 
        0 2px 8px rgba(0,0,0,0.2),
        0 4px 16px rgba(0,0,0,0.15),
        0 0 0 3px rgba(108, 99, 255, 0.4);
}

.form-group {
    margin-bottom: 25px;
    position: relative;
    z-index: 2;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

.length-slider {
    flex: 1;
    height: 8px;
    border-radius: 5px;
    background: var(--border-light);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: all 0.3s ease;
}

body.dark .length-slider {
    background: var(--border-dark);
}

.length-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    transition: all 0.3s ease;
}

.length-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.length-value {
    background: var(--accent);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: bold;
    min-width: 40px;
    text-align: center;
}

.checkbox-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    border: 2px solid var(--border-light);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

body.dark .checkbox-item {
    border-color: var(--border-dark);
}

.checkbox-item:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.checkbox-item.active {
    border-color: var(--accent);
    background: rgba(108, 99, 255, 0.1);
}

.checkbox-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--accent);
}

.checkbox-item::after {
    content: "doc";
    position: absolute;
    top: 2px;
    right: 5px;
    font-size: 8px;
    opacity: 0.1;
    font-weight: bold;
}

.generate-btn {
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: white;
    border: none;
    border-radius: 15px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
}

.generate-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.generate-btn:hover::before {
    left: 100%;
}

.generate-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(108, 99, 255, 0.4);
}

.result-container {
    position: relative;
    z-index: 2;
}

.password-display {
    background: var(--border-light);
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 20px;
    font-family: 'Courier New', monospace;
    font-size: 1.2rem;
    font-weight: bold;
    word-break: break-all;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
}

body.dark .password-display {
    background: var(--border-dark);
}

.password-display.has-password {
    border-color: var(--success);
    background: rgba(40, 167, 69, 0.1);
}

.password-display::before {
    content: "TheDoc's";
    position: absolute;
    top: 5px;
    left: 10px;
    font-size: 10px;
    opacity: 0.2;
    font-family: 'Segoe UI', sans-serif;
}

.copy-btn {
    margin-top: 15px;
    width: 100%;
    padding: 12px;
    background: var(--success);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(10px);
}

.copy-btn.show {
    opacity: 1;
    transform: translateY(0);
}

.copy-btn:hover {
    background: #218838;
    transform: translateY(-2px);
}

.strength-meter {
    margin-top: 15px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.strength-meter.show {
    opacity: 1;
    transform: translateY(0);
}

.strength-bar {
    height: 8px;
    background: var(--border-light);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

body.dark .strength-bar {
    background: var(--border-dark);
}

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

.strength-text {
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}

.footer {
    margin-top: 30px;
    text-align: center;
    font-size: 0.8rem;
    opacity: 0.5;
    position: relative;
    z-index: 2;
}

.footer::before {
    content: "Powered by TheDoc's algorithms";
    display: block;
    margin-bottom: 5px;
    font-size: 0.7rem;
}

@media (max-width: 600px) {
    .container {
        padding: 30px 20px;
        margin: 10px;
    }
    
    .title {
        font-size: 2rem;
    }
    
    .checkbox-group {
        grid-template-columns: 1fr;
    }
    
    .toggle-container {
        margin-bottom: 15px;
    }
    
    .toggle-switch {
        width: 55px;
        height: 28px;
    }
    
    .slider:after {
        height: 20px;
        width: 20px;
        left: 4px;
        bottom: 4px;
    }
    
    .toggle-switch input:checked + .slider:after {
        transform: translateX(23px);
    }
    
    .slider .icon {
        width: 20px;
    }
    
    .slider .icon svg {
        width: 16px;
        height: 16px;
    }
}

/* TheDoc Easter Eggs */
.container:hover::before {
    opacity: 0.05;
    transform: rotate(45deg) scale(1.1);
}

@keyframes docPulse {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.3; }
}

.generate-btn:active::after {
    content: "TheDoc";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.7rem;
    opacity: 0.3;
    animation: docPulse 0.5s ease;
}

JS

// Theme Toggle with enhanced animations
const toggleCheckbox = document.getElementById('toggle-darkmode');
const body = document.body;
const darkModeClass = 'dark';

// Check for saved theme preference
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
    body.classList.toggle('dark', savedTheme === 'dark');
    toggleCheckbox.checked = savedTheme === 'dark';
}

// Enhanced theme toggle with smooth animations
toggleCheckbox.addEventListener('change', () => {
    body.classList.toggle(darkModeClass);
    const isDark = body.classList.contains(darkModeClass);
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
    
    // Add subtle page transition effect
    document.body.style.transition = 'all 0.3s ease';
    setTimeout(() => {
        document.body.style.transition = '';
    }, 300);
});

// Add keyboard accessibility for theme toggle
toggleCheckbox.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        toggleCheckbox.click();
    }
});

// Add ripple effect on click
function createRipple(event) {
    const button = event.currentTarget.closest('.toggle-switch');
    const rect = button.getBoundingClientRect();
    const size = Math.max(rect.width, rect.height);
    const x = event.clientX - rect.left - size / 2;
    const y = event.clientY - rect.top - size / 2;
    
    const ripple = document.createElement('div');
    ripple.style.cssText = `
        position: absolute;
        border-radius: 50%;
        background: rgba(108, 99, 255, 0.3);
        transform: scale(0);
        animation: ripple 0.6s linear;
        left: ${x}px;
        top: ${y}px;
        width: ${size}px;
        height: ${size}px;
        pointer-events: none;
        z-index: 10;
    `;
    
    button.style.position = 'relative';
    button.style.overflow = 'hidden';
    button.appendChild(ripple);
    
    setTimeout(() => {
        ripple.remove();
    }, 600);
}

toggleCheckbox.addEventListener('click', createRipple);

// Add CSS for ripple animation
const rippleStyle = document.createElement('style');
rippleStyle.textContent = `
    @keyframes ripple {
        to {
            transform: scale(2);
            opacity: 0;
        }
    }
`;
document.head.appendChild(rippleStyle);

// Password Length Slider
const lengthSlider = document.getElementById('length');
const lengthValue = document.getElementById('lengthValue');

lengthSlider.addEventListener('input', (e) => {
    lengthValue.textContent = e.target.value;
});

// Checkbox Items
const checkboxItems = document.querySelectorAll('.checkbox-item');

checkboxItems.forEach(item => {
    const checkbox = item.querySelector('input[type="checkbox"]');
    
    item.addEventListener('click', (e) => {
        if (e.target.type !== 'checkbox') {
            checkbox.checked = !checkbox.checked;
        }
        item.classList.toggle('active', checkbox.checked);
    });

checkbox.addEventListener('change', () => {
        item.classList.toggle('active', checkbox.checked);
    });
});

// Password Generation
const generateBtn = document.getElementById('generateBtn');
const passwordDisplay = document.getElementById('passwordDisplay');
const copyBtn = document.getElementById('copyBtn');
const strengthMeter = document.getElementById('strengthMeter');
const strengthFill = document.getElementById('strengthFill');
const strengthText = document.getElementById('strengthText');

const characters = {
    uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
    lowercase: 'abcdefghijklmnopqrstuvwxyz',
    numbers: '0123456789',
    symbols: '!@#$%^&*()_+-=[]{}|;:,.<>?'
};

function generatePassword() {
    const length = parseInt(lengthSlider.value);
    let charset = '';
    let guaranteedChars = '';

// Build character set based on selected options
    checkboxItems.forEach(item => {
        const checkbox = item.querySelector('input[type="checkbox"]');
        const type = item.dataset.type;
        
        if (checkbox.checked) {
            charset += characters[type];
            // Ensure at least one character from each selected type
            guaranteedChars += characters[type][Math.floor(Math.random() * characters[type].length)];
        }
    });

if (charset === '') {
        alert('Please select at least one character type!');
        return;
    }

let password = guaranteedChars;
    
    // Fill the rest of the password length
    for (let i = guaranteedChars.length; i < length; i++) {
        password += charset[Math.floor(Math.random() * charset.length)];
    }

// Shuffle the password to mix guaranteed characters
    password = password.split('').sort(() => Math.random() - 0.5).join('');

// TheDoc's special touch - occasionally add a hidden reference
    if (Math.random() < 0.1 && length > 10) {
        const docChars = 'TheDoc'.split('');
        for (let i = 0; i < Math.min(3, docChars.length); i++) {
            const randomPos = Math.floor(Math.random() * password.length);
            if (charset.includes(docChars[i])) {
                password = password.substring(0, randomPos) + docChars[i] + password.substring(randomPos + 1);
            }
        }
    }

displayPassword(password);
    calculateStrength(password);
}

function displayPassword(password) {
    passwordDisplay.textContent = password;
    passwordDisplay.classList.add('has-password');
    copyBtn.classList.add('show');
    strengthMeter.classList.add('show');
}

function calculateStrength(password) {
    let score = 0;
    
    // Length score
    if (password.length >= 8) score += 20;
    if (password.length >= 12) score += 20;
    if (password.length >= 16) score += 10;
    
    // Character variety score
    if (/[a-z]/.test(password)) score += 10;
    if (/[A-Z]/.test(password)) score += 10;
    if (/[0-9]/.test(password)) score += 10;
    if (/[^A-Za-z0-9]/.test(password)) score += 20;
    
    // Bonus for length
    if (password.length >= 20) score += 10;

// TheDoc bonus - easter egg
    if (password.toLowerCase().includes('doc') || password.toLowerCase().includes('thedoc')) {
        score = Math.min(100, score + 5);
    }

// Determine strength level and color
    let color, strength;
    if (score < 30) {
        color = '#dc3545';
        strength = 'Weak';
    } else if (score < 60) {
        color = '#ffc107';
        strength = 'Fair';
    } else if (score < 80) {
        color = '#28a745';
        strength = 'Good';
    } else {
        color = '#6c63ff';
        strength = 'Excellent';
    }

strengthFill.style.width = score + '%';
    strengthFill.style.backgroundColor = color;
    strengthText.textContent = `Strength: ${strength} (${score}%)`;
    strengthText.style.color = color;
}

// Copy to Clipboard
copyBtn.addEventListener('click', async () => {
    try {
        await navigator.clipboard.writeText(passwordDisplay.textContent);
        const originalText = copyBtn.textContent;
        copyBtn.textContent = 'Copied!';
        copyBtn.style.backgroundColor = '#28a745';
        
        setTimeout(() => {
            copyBtn.textContent = originalText;
            copyBtn.style.backgroundColor = '';
        }, 2000);
    } catch (err) {
        // Fallback for older browsers
        const textArea = document.createElement('textarea');
        textArea.value = passwordDisplay.textContent;
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();
        try {
            document.execCommand('copy');
            copyBtn.textContent = 'Copied!';
        } catch (err) {
            copyBtn.textContent = 'Copy failed';
        }
        document.body.removeChild(textArea);
    }
});

// Generate Password Event
generateBtn.addEventListener('click', generatePassword);

// Generate initial password
generatePassword();

// TheDoc's secret konami code easter egg
let konamiCode = [];
const konamiSequence = [
    'ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown',
    'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight',
    'KeyB', 'KeyA'
];

// Enhanced theme toggle with system preference detection
function detectSystemTheme() {
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        if (!localStorage.getItem('theme')) {
            body.classList.add('dark');
            localStorage.setItem('theme', 'dark');
        }
    }
}

// Listen for system theme changes
if (window.matchMedia) {
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
        if (!localStorage.getItem('theme-manual')) {
            body.classList.toggle('dark', e.matches);
            localStorage.setItem('theme', e.matches ? 'dark' : 'light');
        }
    });
}

// Mark manual theme changes
themeToggle.addEventListener('click', () => {
    localStorage.setItem('theme-manual', 'true');
});

// Initialize system theme detection
detectSystemTheme();

// Console easter egg
console.log(`
████████╗██╗  ██╗███████╗██████╗  ██████╗  ██████╗
╚══██╔══╝██║  ██║██╔════╝██╔══██╗██╔═══██╗██╔════╝
   ██║   ███████║█████╗  ██║  ██║██║   ██║██║     
   ██║   ██╔══██║██╔══╝  ██║  ██║██║   ██║██║     
   ██║   ██║  ██║███████╗██████╔╝╚██████╔╝╚██████╗
   ╚═╝   ╚═╝  ╚═╝╚══════╝╚═════╝  ╚═════╝  ╚═════╝

Thanks for using TheDoc's Password Generator!
Try the Konami Code for a surprise!

Beautiful dark mode toggle created with love
System theme detection enabled
`);

Password Generator from TheDoc

Recommended

Glassy Login & Register Panel V2 from TheDoc

HTML Login Form with Password Toggle

Glassmorphism Forest Login & Register from TheDoc

HTML

CSS

JS

Recommended

Glassy Login & Register Panel V2 from TheDoc

HTML Login Form with Password Toggle

Glassmorphism Forest Login & Register from TheDoc

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS