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

Login from TheDOC

Password Generator By SENAPI

login password simple

HTML

CSS

JS

Recommended

Login from TheDOC

Password Generator By SENAPI

login password simple

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS