schau dir diesen ganzen code an und verbessere ihn wenn du kannst. 

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Team Generator</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lilita+One&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js"></script>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background: url('https://pixabay.com/get/gbd237795b7d84b54b686f7c3080f0d4803c5c2e857e1903a5f3a955a9e1df5b6b72c6248a17c5cbf295da30498fb7e87cb3074a265df0abdd864fcf0c011c5dd_1920.png');
            background-size: cover;
            background-position: center;
            backdrop-filter: blur(5px);
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }

        .container {
            background-color: rgba(50, 50, 50, 0.8);
            border-radius: 20px;
            padding: 30px;
            width: 90%;
            max-width: 400px;
            text-align: center;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
        }

        h1 {
            font-family: 'Lilita One', cursive;
            margin-bottom: 20px;
            font-size: 2.5rem;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
            transition: color 0.3s ease;
        }

        h1:hover {
            color: #4CAF50;
        }

        input[type="text"] {
            width: 45%;
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        button {
            background-color: #555;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            margin-top: 10px;
            font-size: 0.9rem;
        }

        button:hover {
            background-color: #4CAF50;
        }

        #result {
            margin-top: 20px;
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        li {
            padding: 10px;
            border-radius: 5px;
            margin: 5px 0;
            color: white;
            transition: transform 0.3s;
        }

        .team-red { background-color: #ff4d4d; }
        .team-green { background-color: #28a745; }
        .team-blue { background-color: #007bff; }
        .team-yellow { background-color: #ffc107; }
        .team-purple { background-color: #6f42c1; }

        li:hover {
            transform: scale(1.05);
        }

        .hidden {
            display: none;
        }

        footer {
            margin-top: 20px;
        }

        .footer-button {
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 10px 15px;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            transition: background-color 0.3s ease;
        }

        .footer-button:hover {
            background-color: #0056b3;
        }
            /* Button Hover Effekt */
            button:hover {
    background-color: #4CAF50;
    transform: scale(1.05); /* Leichte Vergrößerung */
}

/* Input Hover Effekt */
input[type="text"]:hover {
    border-color: #4CAF50; /* Ändert die Rahmenfarbe beim Hover */
    background-color: rgba(255, 255, 255, 0.2); /* Leicht transparenter Hintergrund */
}

/* Listenelemente Hover Effekt */
li:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Schattierung hinzufügen */
}

/* Footer Button Hover Effekt */
.footer-button:hover {
    background-color: #0056b3;
    transform: scale(1.05); /* Leichte Vergrößerung */
}

    </style>
</head>
<body>
    <div class="container">
        <h1>Team Generator</h1>
        <form id="teamForm">
            <div class="name-fields" id="nameFields">
                <input type="text" id="name1" placeholder="Name 1" required>
                <input type="text" id="name2" placeholder="Name 2" required>
                <input type="text" id="name3" placeholder="Name 3" required>
                <input type="text" id="name4" placeholder="Name 4" required>
            </div>
            <button type="button" id="addBtn" onclick="addFields()">+2</button>
            <button type="button" onclick="generateTeams()">Teams erstellen</button>
            <button type="button" class="hidden" id="newEntryBtn" onclick="resetForm()">Neue Eingabe</button>
        </form>
        <div id="result"></div>
    </div>

    <footer>
        <a href="https://steamcommunity.com/id/217erss/" class="footer-button" target="_blank">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_bjGqfYSqqfwCPVNXJJOHE06KIUjyfWhmmQ&s" alt="Steam Logo" style="width: 20px; vertical-align: middle;"> Mein Steam
        </a>
    </footer>

    <script>
        let fieldCount = 4;
    
        function addFields() {
            if (fieldCount < 10) {
                fieldCount += 2;
                for (let i = fieldCount - 2; i < fieldCount; i++) {
                    const input = document.createElement("input");
                    input.type = "text";
                    input.id = `name${i + 1}`;
                    input.placeholder = `Name ${i + 1}`;
                    document.getElementById("nameFields").appendChild(input);
                }
            }
        }
    
        function shuffleArray(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
        }
    
        function showConfetti() {
            confetti({
                particleCount: 100,
                spread: 99,
                origin: { y: 0.6 }
            });
        }
    
        function glowResult() {
    anime({
        targets: '#result',
        opacity: [0.5, 1], // Beginnt bei 50% Opazität
        scale: [1, 1.05], // Leichtes Pulsieren
        duration: 1500, // Dauer des Pulsierens
        easing: 'easeInOutSine', // Sanfter Übergang
        loop: true, // Dauerhaft
        direction: 'alternate' // Alternierende Animation
    });
}


    
        function generateTeams() {
            const names = Array.from({ length: fieldCount }, (_, i) => document.getElementById(`name${i + 1}`).value.trim());
    
            if (names.some(name => name === "")) {
                document.getElementById("result").innerHTML = "<p>Bitte alle Namen eingeben!</p>";
                return;
            }
    
            document.getElementById("result").innerHTML = "<p>Teams werden generiert…</p>";
    
            setTimeout(() => {
                shuffleArray(names);
    
                let teams = "<h2>Teams:</h2><ul>";
                const teamColors = ['team-red', 'team-green', 'team-blue', 'team-yellow', 'team-purple'];
                let teamCount = Math.ceil(names.length / 2);
    
                for (let i = 0; i < teamCount; i++) {
                    const name1 = names[i * 2] || "N/A";
                    const name2 = names[i * 2 + 1] || "N/A";
                    const teamColor = teamColors[i % teamColors.length];
                    teams += `<li class="${teamColor}">Team ${i + 1}: ${name1} & ${name2}</li>`;
                }
                teams += "</ul>";
    
                document.getElementById("result").innerHTML = teams;
                document.getElementById("newEntryBtn").classList.remove("hidden");
    
                // Füge die Effekte hinzu
                showConfetti(); // Konfetti-Effekt
                glowResult();   // Glüheffekt
    
                anime({
                    targets: 'li',
                    opacity: [0, 1],
                    translateY: [20, 0],
                    duration: 500,
                    delay: anime.stagger(100),
                    easing: 'easeOutExpo'
                });
            }, 2000); // Loading time
        }
    
        function resetForm() {
            document.querySelectorAll(".name-fields input").forEach(input => {
                input.value = "";
            });
    
            document.getElementById("result").innerHTML = "";
            document.getElementById("newEntryBtn").classList.add("hidden");
            fieldCount = 4;
    
            document.getElementById("nameFields").innerHTML = `
                <input type="text" id="name1" placeholder="Name 1" required>
                <input type="text" id="name2" placeholder="Name 2" required>
                <input type="text" id="name3" placeholder="Name 3" required>
                <input type="text" id="name4" placeholder="Name 4" required>
            `;
        }
    </script>
    
    
</body>
</html>