146 lines
7.0 KiB
HTML
Executable File
146 lines
7.0 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>随机密码生成器</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<link rel="stylesheet" href="css/background.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header class="header">
|
|
<h1>🔐 随机密码生成器</h1>
|
|
<p class="subtitle">生成安全可靠的随机密码</p>
|
|
</header>
|
|
|
|
<main class="main-content">
|
|
<div class="form-container">
|
|
<form id="passwordForm" class="password-form">
|
|
<div class="form-group">
|
|
<label for="length">密码长度</label>
|
|
<div class="length-control">
|
|
<input type="range" id="length" name="length" min="4" max="128" value="16" class="length-slider">
|
|
<span id="lengthDisplay" class="length-display">16</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="section-title">字符类型</label>
|
|
<div class="checkbox-group">
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="numbers" name="numbers" checked>
|
|
<label for="numbers">包含数字 (0-9)</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="uppercase" name="uppercase" checked>
|
|
<label for="uppercase">包含大写字母 (A-Z)</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="lowercase" name="lowercase" checked>
|
|
<label for="lowercase">包含小写字母 (a-z)</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="symbols" name="symbols">
|
|
<label for="symbols">包含特殊字符 (!@#$%^&*)</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="section-title">高级选项</label>
|
|
<div class="checkbox-group">
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="excludeSimilar" name="excludeSimilar" checked>
|
|
<label for="excludeSimilar">排除相似字符 (0,O,l,1,I)</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="excludeAmbiguous" name="excludeAmbiguous" checked>
|
|
<label for="excludeAmbiguous">排除模糊字符</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="generate-btn" id="generateBtn">
|
|
<span class="btn-text">生成密码</span>
|
|
<span class="btn-loading" style="display: none;">生成中...</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="result-container" id="resultContainer" style="display: none;">
|
|
<div class="result-header">
|
|
<h3>生成的密码</h3>
|
|
<button class="copy-btn" id="copyBtn" title="复制密码">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
|
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="password-display">
|
|
<input type="text" id="passwordResult" class="password-input" readonly>
|
|
</div>
|
|
|
|
<div class="password-info">
|
|
<div class="info-item">
|
|
<span class="info-label">长度:</span>
|
|
<span id="infoLength" class="info-value">-</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">强度:</span>
|
|
<span id="infoStrength" class="info-value strength">-</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">熵值:</span>
|
|
<span id="infoEntropy" class="info-value">-</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">数字:</span>
|
|
<span id="infoNumbers" class="info-value">-</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">大写:</span>
|
|
<span id="infoUppercase" class="info-value">-</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">小写:</span>
|
|
<span id="infoLowercase" class="info-value">-</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">符号:</span>
|
|
<span id="infoSymbols" class="info-value">-</span>
|
|
</div>
|
|
<div class="info-item full-width">
|
|
<span class="info-label">破解时间:</span>
|
|
<span id="infoCrackTime" class="info-value">-</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="character-sets" id="characterSets">
|
|
<h4>使用的字符集</h4>
|
|
<div class="sets-list" id="setsList"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="error-container" id="errorContainer" style="display: none;">
|
|
<div class="error-icon">⚠️</div>
|
|
<h3>生成失败</h3>
|
|
<p id="errorMessage">请检查网络连接后重试</p>
|
|
<button class="retry-btn" id="retryBtn">重新生成</button>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<p>安全密码生成工具</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<div class="toast" id="toast" style="display: none;">
|
|
<span id="toastMessage">密码已复制到剪贴板</span>
|
|
</div>
|
|
|
|
<script src="js/script.js"></script>
|
|
</body>
|
|
</html> |