Tools/ToolsWeb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add index and otp tools

Browse Source
This commit is contained in:
zhangyazhou 2024-08-22 17:56:09 +08:00
commit f64f800808
2 changed files with 164 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
index.html Normal file
View File

@ -0,0 +1,73 @@
<!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="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css">
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: flex-start; /* 对齐到顶部 */
height: 100vh;
padding-top: 50px; /* 距离上边距50像素 */
}
.tile-container {
display: grid;
grid-template-columns: repeat(8, 1fr); /* 8列均分 */
gap: 2%; /* 磁贴之间的间距，按比例 */
width: 80vw; /* 容器宽度为视口宽度的80% */
}
.tile {
width: 10vw; /* 宽度为视口宽度的10% */
height: 10vw; /* 高度为视口宽度的10% */
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
}
.tile:hover {
transform: scale(1.05);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
.tile i {
font-size: 3vw; /* 图标大小为磁贴的30% */
margin-top: 10%; /* 保证图标在磁贴中间 */
}
.tile span {
font-size: 0.8vw; /* 工具名称字体大小适应磁贴 */
margin-top: 10px;
}
</style>
</head>
<body>
<div class="tile-container">
<div class="tile" style="background-color: #0078D7;" onclick="window.open('tools/otp.html', '_blank')">
<i class="mdi mdi-qrcode"></i>
<span>OTP 认证<br>二维码生成器</span>
</div>
<div class="tile" style="background-color: #28a745; display: none;" onclick="window.open('tool2.html', '_blank')">
<i class="mdi mdi-cogs"></i>
<span>工具2</span>
</div>
<div class="tile" style="background-color: #dc3545; display: none;" onclick="window.open('tool3.html', '_blank')">
<i class="mdi mdi-bell"></i>
<span>工具3</span>
</div>
<div class="tile" style="background-color: #fd7e14; display: none;" onclick="window.open('tool4.html', '_blank')">
<i class="mdi mdi-calendar"></i>
<span>工具4</span>
</div>
<!-- 这里可以添加更多工具的磁贴，每个磁贴可以设置不同的背景颜色 -->
</div>
</body>
</html>

91
otp.html Normal file
View File

@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OTP 认证二维码生成器</title>
<script src="https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.min.js"></script>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.container {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#qrcode {
margin: 20px auto 0; /* 上下左右居中 */
display: inline-block; /* 保证生成的二维码容器大小适应内容 */
}
</style>
</head>
<body>
<div class="container">
<h1>OTP 认证二维码生成器</h1>
<form id="otpForm">
<label for="account">账号:</label>
<input type="text" id="account" name="account" value="account" required><br><br>
<label for="password">密钥:</label>
<input type="text" id="password" name="password" value="password" required><br><br>
<label for="authType">认证方式:</label>
<select id="authType" name="authType">
<option value="totp">基于时间(TOTP)</option>
<option value="hotp">基于计数器(HOTP)</option>
</select><br><br>
<label for="counter" id="counterLabel" style="display:none;">计数器 (仅HOTP):</label>
<input type="number" id="counter" name="counter" value="0" min="0" style="display:none;"><br><br>
<button type="submit">生成二维码</button>
</form>
<div id="qrcode"></div>
</div>
<script>
document.getElementById('authType').addEventListener('change', function() {
const counterLabel = document.getElementById('counterLabel');
const counterInput = document.getElementById('counter');
if (this.value === 'hotp') {
counterLabel.style.display = 'inline';
counterInput.style.display = 'inline';
} else {
counterLabel.style.display = 'none';
counterInput.style.display = 'none';
}
});
document.getElementById('otpForm').addEventListener('submit', function(event) {
event.preventDefault();
const account = document.getElementById('account').value;
const password = document.getElementById('password').value;
const authType = document.getElementById('authType').value;
let otpAuthUrl;
if (authType === 'totp') {
otpAuthUrl = `otpauth://totp/${account}?secret=${password}`;
} else if (authType === 'hotp') {
const counter = document.getElementById('counter').value;
otpAuthUrl = `otpauth://hotp/${account}?secret=${password}&counter=${counter}`;
}
const qrCodeContainer = document.getElementById('qrcode');
qrCodeContainer.innerHTML = ""; // 清空之前的二维码
new QRCode(qrCodeContainer, otpAuthUrl);
});
</script>
</body>
</html>