From f64f800808fe34a8e4e0d96713e86a8bdda99949 Mon Sep 17 00:00:00 2001
From: zhangyazhou <zhangyazhou@xylink.com>
Date: Thu, 22 Aug 2024 17:56:09 +0800
Subject: [PATCH] add index and otp tools

---
 index.html | 73 +++++++++++++++++++++++++++++++++++++++++++
 otp.html   | 91 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 164 insertions(+)
 create mode 100644 index.html
 create mode 100644 otp.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..736180a
--- /dev/null
+++ b/index.html
@@ -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>
\ No newline at end of file
diff --git a/otp.html b/otp.html
new file mode 100644
index 0000000..f710733
--- /dev/null
+++ b/otp.html
@@ -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>
