235 lines
8 KiB
HTML
235 lines
8 KiB
HTML
<!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>
|
|
|