【25/01/12】離線密碼產生器 (離線+完全開源+免費) - Android 台灣中文網

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>密碼產生器</title>
<style>
body {
font-family: sans-serif;
margin: 20px;
}
.container {
border: 1px solid #ccc;
padding: 20px;
border-radius: 5px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.section {
margin-bottom: 15px;
}
.section:last-child {
grid-column: 1 / span 2;
}
.section h2 {
font-size: 1.2em;
margin-bottom: 10px;
}
.section label {
margin-right: 10px;
}
.section input[type="checkbox"]{
margin-right: 5px;
}
.section input[type="text"] {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
width: 95%;
}
.section input[type="number"]{
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
width: 50px;
}
.section button {
padding: 10px 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.section button:hover{
background-color: #45a049;
}
#password-result {
width: 100%;
height: 100px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px;
}
#password-strength{
display: inline-block;
margin-left: 10px;
}
.strength-indicator {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin-left: 5px;
}
.strength-indicator.weak{
background-color: red;
}
.strength-indicator.medium{
background-color: orange;
}
.strength-indicator.strong {
background-color: green;
}
.copy-button {
padding: 5px 10px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-left: 10px;
transition: background-color 0.3s ease;
}
.copy-button:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<div class="container">
<div class="section">
<h2>備選字元:</h2>
<label><input type="checkbox" id="include-numbers" checked>0-9:</label>
<label><input type="checkbox" id="include-lowercase" checked>az:</label>
<label><input type="checkbox" id="include-uppercase" checked>AZ:</label>
</div>
<div class="section">
<h2>其它設定:</h2>
<label><input type="checkbox" id="unique-characters" checked>字元不重複:</label>
</div>
<div class="section">
<h2>其它備選字元:</h2>
<input type="text" id="other-characters" value="!@#$%^&*_-">
</div>
<div class="section">
<h2>排除字元:</h2>
<input type="text" id="exclude-characters" placeholder="不參與生成的字符">
</div>
<div class="section">
<h2>密碼長度</h2>
<input type="number" id="password-length" value="16" min="1" max="100">
</div>
<div class="section">
<h2>產生組數</h2>
<input type="number" id="group-count" value="1" min="1" max="10">
</div>
<div class="section">
<button onclick="generatePassword()">重新生成</button>
<span id="password-strength">密碼強度評估: 比較安全</span>
<span class="strength-indicator strong"></span>
<button class="copy-button" onclick="copyPassword()">複製密碼</button>
</div>
<div class="section">
<h2>隨機密碼已產生:</h2>
<textarea id="password-result" readonly></textarea>
</div>
</div>
<script>
function generatePassword() {
const includeNumbers = document.getElementById('include-numbers').checked;
const includeLowercase = document.getElementById('include-lowercase').checked;
const includeUppercase = document.getElementById('include-uppercase').checked;
const uniqueCharacters = document.getElementById('unique-characters').checked;
const otherCharacters = document.getElementById('other-characters').value;
const excludeCharacters = document.getElementById('exclude-characters').value;
const passwordLength = parseInt(document.getElementById('password-length').value);
const groupCount = parseInt(document.getElementById('group-count').value);
const passwordResult = document.getElementById('password-result');
const passwordStrength = document.getElementById('password-strength');
const strengthIndicator = document.querySelector('.strength-indicator');
let charPool = "";
if (includeNumbers) charPool += "0123456789";
if (includeLowercase) charPool += "abcdefghijklmnopqrstuvwxyz";
if (includeUppercase) charPool += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
charPool += otherCharacters;
let result = "";
if (charPool.length === 0) {
passwordResult.value = "請至少選擇一種類型的字元";
passwordStrength.textContent = "密碼強度評估: 無法評估";
strengthIndicator.className = "strength-indicator";
return;
}
let filteredCharPool = "";
for (let char of charPool) {
if (!excludeCharacters.includes(char)) {
filteredCharPool += char;
}
}
if(filteredCharPool.length === 0){
passwordResult.value = "排除字元已包含所有字元";
passwordStrength.textContent = "密碼強度評估: 無法評估";
strengthIndicator.className = "strength-indicator";
return;
}
for (let j = 0; j < groupCount; j++) {
let password = "";
let tempCharPool = filteredCharPool;
for (let i = 0; i < passwordLength; i++) {
const randomIndex = Math.floor(Math.random() * tempCharPool.length);
password += tempCharPool[randomIndex];
if(uniqueCharacters){
tempCharPool = tempCharPool.substring(0, randomIndex) + tempCharPool.substring(randomIndex+1);
}
}
result += password + (j < groupCount - 1 ? "\n" : "");
}
passwordResult.value = result;
let strength = "強";
let indicatorClass = 'strong';
if (passwordLength < 8) {
strength = "弱";
indicatorClass = 'weak';
} else if (passwordLength < 12) {
strength = "普通";
indicatorClass = 'medium';
}else if(filteredCharPool.length === 1){
strength = "弱";
indicatorClass = 'weak';
}
passwordStrength.textContent = "密碼強度評估: " + strength;
strengthIndicator.className = `strength-indicator ${indicatorClass}`;
}
function copyPassword() {
const passwordResult = document.getElementById('password-result');
navigator.clipboard.writeText(passwordResult.value)
.then(() => alert("密碼已複製到剪貼簿!"))
.catch(err => console.error('無法複製密碼: ', err));
}
</script>
</body>
</html>

複製代碼