Simple Passwort Generator Website

<!DOCTYPE html>
<html lang="de">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Passwort-Generator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            color: #333;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            margin: 0;
            padding-top: 200px;
        }

        #length-slider {
            width: 300px;
        }

        .container {
            text-align: center;
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: 350px;
        }

        label, #length-display {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
            display: block;
        }

        label {
            font-weight: normal;
        }

        #generate-button {
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.1s ease;
        }

        #generate-button:hover {
            background-color: #0056b3;
        }

        #generate-button:active {
            transform: scale(0.98);
        }

        #password-field {
            text-align: center;
            width: 80%;
            margin: 15px auto;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            box-sizing: border-box;
            background-color: #f9f9f9;
            font-family: monospace;
            font-size: 14px;
        }

        label:has(#simple-specials)  {
            font-size: 16px;
        }

        #copied-text {
            font-size: 16px;
            color: #28a745;
            display: none;
        }

        #copied-text.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <label>Passwortlänge:</label>
        <input type="range" min="8" max="30" value="12" class="slider" id="length-slider">
        <span id="length-display">12</span><br>
        <label><input type="checkbox" id="simple-specials" checked> Nur einfache Sonderzeichen</label><br><br>
        <button id="generate-button">Passwort generieren</button>
        <input type="text" id="password-field" value="" readonly>
        <div id="copied-text">Passwort kopiert!</div>
    </div>

    <script>
    function generatePassword() {
        const useSimpleSpecials = document.querySelector('#simple-specials').checked;
        const simpleSpecials = ['!', '-'];
        const fullSpecials = ['!', '$', '&', '-', ';', '*'];
        const specialCharacters = useSimpleSpecials ? simpleSpecials : fullSpecials;
        const numberCharacters = [...'234678'];
        const upperLetterCharacters = [...'ACDEFHJKMNPQRTUWX'];
        const lowerLetterCharacters = [...'abcdefhjkmnpqrtuwx'];
        const letterCharacters = [...upperLetterCharacters, ...lowerLetterCharacters];
        const possibleCharacters = [
            ...numberCharacters,
            ...letterCharacters,
            ...specialCharacters
        ];

        const passwordLength = document.querySelector('#length-slider').value;
        const password = new Array(passwordLength);
        const randomFrom = (arr, filterFn = null) => {
            let filtered = filterFn ? arr.filter(filterFn) : arr;
            return filtered[Math.floor(Math.random() * filtered.length)];
        };

        // Anfang und Ende sind keine Sonderzeichen
        const isAlphanumeric = c => /[a-zA-Z0-9]/.test(c);
        password[0] = randomFrom(possibleCharacters, isAlphanumeric);
        password[passwordLength - 1] = randomFrom(possibleCharacters, isAlphanumeric);
        for (let i = 1; i < passwordLength - 1; i++) {
            const prevCharIsSpecial = specialCharacters.includes(password[i - 1]);
            password[i] = prevCharIsSpecial
                ? randomFrom(possibleCharacters, isAlphanumeric)
                : randomFrom(possibleCharacters);
        }

        // Mindestanzahl Sonderzeichen: 1 bei einfachen, sonst 2 ab 10 Zeichen, 3 ab 15, usw.
        const minSpecials = useSimpleSpecials ? 1 : Math.max(1, Math.floor(passwordLength / 5));
        const isSpecial = c => specialCharacters.includes(c);
        let specialsCount = password.filter(isSpecial).length;
        let attempts = 0;

        while (specialsCount < minSpecials && attempts < passwordLength * 10) {
            const index = Math.floor(Math.random() * (passwordLength - 2)) + 1;
            const neighborIsSpecial = isSpecial(password[index - 1]) || isSpecial(password[index + 1]);
            if (!isSpecial(password[index]) && !neighborIsSpecial) {
                password[index] = randomFrom(specialCharacters);
                specialsCount++;
            }
            attempts++;
        }

        // Sicherstellen, dass mindestens ein Buchstabe und eine Zahl vorhanden sind
        const nonSpecialIndexes = () => password.map((c, i) => i).filter(i => !isSpecial(password[i]));
        if (!password.some(c => letterCharacters.includes(c))) {
            password[randomFrom(nonSpecialIndexes())] = randomFrom(letterCharacters);
        }

        if (!password.some(c => numberCharacters.includes(c))) {
            password[randomFrom(nonSpecialIndexes())] = randomFrom(numberCharacters);
        }

        return password.join('');
    }

    document.querySelector('#generate-button').addEventListener('click', () => {
        document.querySelector('#password-field').value = generatePassword();
    });

    document.addEventListener('DOMContentLoaded', () => {
        document.querySelector('#password-field').value = generatePassword();
    });

    document.querySelector('#length-slider').addEventListener('input', () => {
        document.querySelector('#length-display').textContent = document.querySelector('#length-slider').value;
        document.querySelector('#password-field').value = generatePassword();
    });

    document.querySelector('#simple-specials').addEventListener('change', () => {
        document.querySelector('#password-field').value = generatePassword();
    });

    document.querySelector('#password-field').addEventListener('click', () => {
        document.querySelector('#password-field').select();
        document.execCommand('copy');
        $('#copied-text').slideDown(250).delay(1000).slideUp(250);
    });
    </script>
    <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</body>
</html>