wenn du dir diesen code hier anschaust was würdest du verändern/verbessern?

<!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>
<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;
}
</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}; // Correctly set the ID
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 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 += &lt;li class="${teamColor}"&gt;Team ${i + 1}: ${name1} & ${name2}&lt;/li&gt;;
}
teams += “</ul>”;

document.getElementById(“result”).innerHTML = teams;
document.getElementById(“newEntryBtn”).classList.remove(“hidden”);

anime({
targets: ‘li’,
opacity: [0, 1],
translateY: [20, 0],
duration: 500,
delay: anime.stagger(100),
easing: ‘easeOutExpo’
});
}, 2000); // Loading time
}

function resetForm() {
// Clear all input fields
document.querySelectorAll(”.name-fields input").forEach(input => {
input.value = “”;
});

document.getElementById(“result”).innerHTML = “”;
document.getElementById(“newEntryBtn”).classList.add(“hidden”);
fieldCount = 4; // Reset the number of fields

// Reset input fields to original state
document.getElementById(“nameFields”).innerHTML = <br/> &lt;input type="text" id="name1" placeholder="Name 1" required&gt;<br/> &lt;input type="text" id="name2" placeholder="Name 2" required&gt;<br/> &lt;input type="text" id="name3" placeholder="Name 3" required&gt;<br/> &lt;input type="text" id="name4" placeholder="Name 4" required&gt;<br/> ;
}
</script>
</body>
</html>

gib mir den ganzen code