<!DOCTYPE html>
<html class="full" 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;
}
#generate-button:hover {
background-color: #0056b3;
}
#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;
}
#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"> 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 possibleCharacters = [
...'234678',
...'ACDEFHJKMNPQRTUWXYZ',
...'abcdefhjkmnpqrtuwxyz',
...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);
}
// Sicherstellen, dass mindestens ein Sonderzeichen vorhanden ist
if (!password.some(c => specialCharacters.includes(c))) {
const index = Math.floor(Math.random() * (passwordLength - 2)) + 1;
password[index] = randomFrom(specialCharacters);
}
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-3.7.1.min.js"></script>
</body>
</html>
Comments