From 5f08a1c3469323f2b00e7ffed2aa986f294147b2 Mon Sep 17 00:00:00 2001 From: enub Date: Thu, 17 Apr 2025 16:00:56 +0200 Subject: [PATCH] added existing files base html pw/page generator script basic style --- index.html | 17 +++++++++ script.js | 103 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 76 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 196 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css 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 -- 2.47.2