initial commit
This commit is contained in:
commit
846f7d2c25
GPG key ID:
739D3C8D00944004
11
README.md
Normal file
11
README.md
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
# Generic JS Password Generator
|
||||
|
||||
Really simple JS-only password generator with various options. Feedback is appreciated.
|
||||
|
||||
**[Live Version](https://ittavern.com/password-generator/)**
|
||||
|
||||
# TODO
|
||||
|
||||
- [ ] Add License
|
||||
- [ ] check random function (pseudo?)
|
||||
- [ ] some UI changes
|
||||
234
index.html
Normal file
234
index.html
Normal file
|
|
@ -0,0 +1,234 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Generic Password Generator</title>
|
||||
<style type="text/css" media="screen">
|
||||
/* Add style rules here */
|
||||
/* Container styles */
|
||||
.pg-container {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 3px rgba(27,31,35,0.12), 0 8px 24px rgba(27,31,35,0.12);
|
||||
width: 300px;
|
||||
margin: auto;
|
||||
}
|
||||
/* Header styles */
|
||||
.pg-header {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
color: #24292e;
|
||||
}
|
||||
/* Password display area styles */
|
||||
.password-display {
|
||||
font-family: monospace;
|
||||
padding: 10px;
|
||||
border: 1px solid #d1d5da;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
background-color: #f6f8fa;
|
||||
position: relative;
|
||||
}
|
||||
/* Password item styles */
|
||||
.password-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.password-item span {
|
||||
flex-grow: 1;
|
||||
}
|
||||
/* Copy button styles */
|
||||
.copy-button {
|
||||
margin-right: 10px;
|
||||
background-color: #007bff;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 3px 7px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
.copy-button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
/* Generate button styles */
|
||||
.generate-button {
|
||||
background-color: #28a745;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.generate-button:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
/* Options section styles */
|
||||
.options {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.options label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
/* Password length option styles */
|
||||
.length-option {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.length-option label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
/* Exclude characters section styles */
|
||||
.exclude-chars {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.exclude-chars label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
/* Highlight class for copied password */
|
||||
.highlight {
|
||||
background-color: orange;
|
||||
}
|
||||
/* Spoiler section styles */
|
||||
.spoiler {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.spoiler-content {
|
||||
display: none;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.spoiler-button {
|
||||
background-color: #6c757d;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.spoiler-button:hover {
|
||||
background-color: #5a6268;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
/* Function to generate passwords based on user inputs */
|
||||
function generatePasswords() {
|
||||
const length = parseInt(document.getElementById('passwordLength').value);
|
||||
const excludeChars = document.getElementById('excludeChars').value;
|
||||
let charset = "";
|
||||
if (document.getElementById('includeLowercase').checked) {
|
||||
charset += "abcdefghijklmnopqrstuvwxyz";
|
||||
}
|
||||
if (document.getElementById('includeUppercase').checked) {
|
||||
charset += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||
}
|
||||
if (document.getElementById('includeNumbers').checked) {
|
||||
charset += "0123456789";
|
||||
}
|
||||
if (document.getElementById('includeSpecialChars').checked) {
|
||||
charset += "!@#$%^&*()_+~`|}{[]:;?><,./-=";
|
||||
}
|
||||
|
||||
// Remove excluded characters from the charset
|
||||
const filteredCharset = charset.split('').filter(char => !excludeChars.includes(char)).join('');
|
||||
|
||||
let passwords = [];
|
||||
for (let j = 0; j < 15; j++) {
|
||||
let password = "";
|
||||
for (let i = 0; i < length; i++) {
|
||||
const randomIndex = Math.floor(Math.random() * filteredCharset.length);
|
||||
password += filteredCharset[randomIndex];
|
||||
}
|
||||
passwords.push(password);
|
||||
}
|
||||
|
||||
// Display the generated passwords
|
||||
const passwordDisplay = document.getElementById('passwordDisplay');
|
||||
passwordDisplay.innerHTML = "";
|
||||
passwords.forEach(password => {
|
||||
const passwordItem = document.createElement('div');
|
||||
passwordItem.className = 'password-item';
|
||||
const passwordText = document.createElement('span');
|
||||
passwordText.textContent = password;
|
||||
const copyButton = document.createElement('button');
|
||||
copyButton.className = 'copy-button';
|
||||
copyButton.textContent = 'Copy';
|
||||
copyButton.onclick = () => copyToClipboard(passwordText);
|
||||
|
||||
passwordItem.appendChild(copyButton);
|
||||
passwordItem.appendChild(passwordText);
|
||||
passwordDisplay.appendChild(passwordItem);
|
||||
});
|
||||
}
|
||||
|
||||
/* Function to copy password to clipboard */
|
||||
function copyToClipboard(element) {
|
||||
const text = element.textContent;
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
element.classList.add('highlight');
|
||||
setTimeout(() => {
|
||||
element.classList.remove('highlight');
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
|
||||
/* Function to toggle the visibility of the spoiler content */
|
||||
function toggleSpoiler() {
|
||||
const spoilerContent = document.getElementById('spoilerContent');
|
||||
if (spoilerContent.style.display === "none" || spoilerContent.style.display === "") {
|
||||
spoilerContent.style.display = "block";
|
||||
} else {
|
||||
spoilerContent.style.display = "none";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="pg-container">
|
||||
<!-- Password display area -->
|
||||
<div class="password-display" id="passwordDisplay">Your Passwords</div>
|
||||
<!-- Password length input -->
|
||||
<div class="length-option">
|
||||
<label for="passwordLength">Password Length (1-256):</label>
|
||||
<input type="number" id="passwordLength" min="1" max="256" value="24">
|
||||
</div>
|
||||
<!-- Options for character inclusion -->
|
||||
<div class="options">
|
||||
<label><input type="checkbox" id="includeLowercase" checked> Include Lowercase Letters</label>
|
||||
<label><input type="checkbox" id="includeUppercase" checked> Include Uppercase Letters</label>
|
||||
<label><input type="checkbox" id="includeNumbers" checked> Include Numbers</label>
|
||||
<label><input type="checkbox" id="includeSpecialChars" checked> Include Special Characters</label>
|
||||
</div>
|
||||
<!-- Exclude characters input -->
|
||||
<div class="exclude-chars">
|
||||
<label for="excludeChars">Exclude Characters:</label>
|
||||
<input type="text" id="excludeChars" placeholder="e.g., abc123!@#">
|
||||
</div>
|
||||
<!-- Generate passwords button -->
|
||||
<button class="generate-button" onclick="generatePasswords()">Generate Passwords</button>
|
||||
<!-- Spoiler section for character examples -->
|
||||
<div class="spoiler">
|
||||
<button class="spoiler-button" onclick="toggleSpoiler()">Show/Hide Examples of Characters</button>
|
||||
<div class="spoiler-content" id="spoilerContent">
|
||||
<div>Lowercase: abcdefghijklmnopqrstuvwxyz</div>
|
||||
<div>Uppercase: ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
|
||||
<div>Numbers: 0123456789</div>
|
||||
<div>Special Characters: !@#$%^&*()_+~`|}{[]:;?><,./-=\</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in a new issue