diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a4096b6
--- /dev/null
+++ b/index.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+ Passwort Generator
+
+
+ Passwort Generator
+
+
+
+
+
+
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..f83ecf8
--- /dev/null
+++ b/script.js
@@ -0,0 +1,103 @@
+function generatePassword(len, specialChar) {
+ // Define character sets for each type of character
+ const lowercase = 'abcdefghijklmnopqrstuvwxyz';
+ const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+ const numbers = '0123456789';
+
+ let pool = lowercase + uppercase + numbers;
+ let password = '';
+
+ if (specialChar) {
+ // Adding special Characters to the pool;
+ const specialCharInput = specialChar;
+ pool += specialCharInput;
+ // Initialize the password with one character of each type
+ password = lowercase.charAt(Math.floor(Math.random() * lowercase.length)) +
+ uppercase.charAt(Math.floor(Math.random() * uppercase.length)) +
+ numbers.charAt(Math.floor(Math.random() * numbers.length)) +
+ specialCharInput.charAt(Math.floor(Math.random() * specialCharInput.length));
+ } else {
+ // Initialize the password with one character of each type
+ password = lowercase.charAt(Math.floor(Math.random() * lowercase.length)) +
+ uppercase.charAt(Math.floor(Math.random() * uppercase.length)) +
+ numbers.charAt(Math.floor(Math.random() * numbers.length));
+ }
+
+ // Fill the rest of the password with random characters
+ for (let i = password.length; i < len; i++) {
+ password += pool.charAt(Math.floor(Math.random() * pool.length));
+ }
+
+ // Shuffle the password to randomize the order of characters
+ return password.split('').sort(() => Math.random() - 0.5).join('');
+}
+
+function generatePasswords(n, len, specialChar) {
+ const passwords = [];
+ for (let i = 0; i < n; i++) {
+ passwords.push(generatePassword(len, specialChar));
+ }
+ return passwords;
+}
+
+const queryParams = new URLSearchParams(window.location.search);
+const n = queryParams.get('n') || 4;
+const len = queryParams.get('len') || 14;
+const specialChar = queryParams.get('specialChar');
+
+const passwords = generatePasswords(n, len, specialChar);
+
+if (!queryParams.get('n')) {
+ document.querySelector('.password-container').innerHTML = `
+
+ `;
+} else {
+ const passwordContainer = document.querySelector('.password-container');
+ passwords.forEach(password => {
+ const passwordElement = document.createElement('div');
+ passwordElement.classList.add('password');
+ passwordElement.innerHTML = `
+ ${password}
+
+ `;
+ passwordElement.querySelector('.copy-button').addEventListener('click', () => {
+ copyToClipboard(passwordElement.querySelector('.password-text'));
+ });
+ passwordContainer.appendChild(passwordElement);
+ });
+}
+
+function copyToClipboard(element) {
+ const textArea = document.createElement('textarea');
+ textArea.value = element.innerText;
+ document.body.appendChild(textArea);
+ textArea.select();
+ document.execCommand('copy');
+ document.body.removeChild(textArea);
+
+ const button = element.parentElement.querySelector('.copy-button');
+ button.textContent = 'Kopiert!';
+ button.style.backgroundColor = 'grey';
+}
+
+document.getElementById('specialBool').onchange = function() {
+ document.getElementById('specialChar').disabled = !this.checked;
+}
+
+function fillIfEmpty() {
+ var inputElement = document.getElementById('specialChar');
+ if (inputElement.value === '') {
+ inputElement.value = '@%+!#$?:.(){}[]\/\\';
+ }
+}
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..4a1d93e
--- /dev/null
+++ b/style.css
@@ -0,0 +1,76 @@
+body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+ margin: 0;
+ padding: 0;
+}
+
+h1 {
+ text-align: center;
+ background-color: #6ea68f;
+ color: #fff;
+ padding: 20px;
+ margin: 0;
+}
+
+.password-container {
+ max-width: 400px;
+ margin: 0 auto;
+ padding: 20px;
+ background-color: #fff;
+ border-radius: 5px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+.password {
+ margin-bottom: 10px;
+ font-weight: bold;
+ padding: 10px;
+ border: 1px solid #ccc;
+ border-radius: 3px;
+ display: flex;
+ justify-content: space-between;
+}
+
+.password-text {
+ font-family: 'Courier New', monospace;
+}
+
+.copy-button {
+ background-color: #6ea68f;
+ color: #fff;
+ border: none;
+ border-radius: 3px;
+ cursor: pointer;
+ padding: 5px 10px;
+ font-size: 12px;
+}
+
+label, input {
+ display: block;
+ margin-bottom: 10px;
+}
+
+label {
+ font-weight: bold;
+}
+
+input[type="number"] {
+ width: calc(100% - 20px);
+ padding: 10px;
+ border: 1px solid #ccc;
+ border-radius: 3px;
+}
+
+input[type="submit"] {
+ background-color: #6ea68f;
+ color: #fff;
+ padding: 10px 20px;
+ border: none;
+ border-radius: 3px;
+ cursor: pointer;
+}
+
+input[type="submit"]:hover {
+ background-color: #258cd1;
+}
\ No newline at end of file