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

修改index 设置自动变化

Browse Source
This commit is contained in:
zhangyazhou 2024-08-22 20:33:21 +08:00
parent f64f800808
commit 1330008c05
3 changed files with 114 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
/.idea

57
index.html
View File

@ -6,6 +6,9 @@
<title>工具类网站</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css">
<style>
:root {
--tile-size: 120px; /* 固定宽度为120px */
}
body {
margin: 0;
font-family: Arial, sans-serif;
@ -16,14 +19,17 @@
padding-top: 50px; /* 距离上边距50像素 */
}
.tile-container {
display: grid;
grid-template-columns: repeat(8, 1fr); /* 8列均分 */
gap: 2%; /* 磁贴之间的间距，按比例 */
width: 80vw; /* 容器宽度为视口宽度的80% */
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--tile-size), 1fr)); /* 自动填充列 */
max-width: 90%;
padding: 10px;
grid-row-gap: 10px;
grid-column-gap: 10px;
justify-content: center;
}
.tile {
width: 10vw; /* 宽度为视口宽度的10% */
height: 10vw; /* 高度为视口宽度的10% */
width: var(--tile-size);
height: var(--tile-size);
color: #fff;
display: flex;
flex-direction: column;
@ -34,40 +40,55 @@
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
background-color: #0078D7; /* 默认背景颜色 */
}
.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%; /* 保证图标在磁贴中间 */
font-size: calc(0.35 * var(--tile-size)); /* 图标大小为30px */
margin-bottom: 10px; /* 保证图标和文字之间的间距 */
}
.tile span {
font-size: 0.8vw; /* 工具名称字体大小适应磁贴 */
margin-top: 10px;
font-size: calc(0.11 * var(--tile-size)); /* 工具名称字体大小适应磁贴 */
}
</style>
</head>
<body>
<div class="tile-container">
<div class="tile" style="background-color: #0078D7;" onclick="window.open('tools/otp.html', '_blank')">
<div class="tile-container" id="tileContainer">
<div class="tile" style="background-color: #0078D7;" onclick="handleTileClick('otp.html')">
<i class="mdi mdi-qrcode"></i>
<span>OTP 认证<br>二维码生成器</span>
<span>OTP二维码生成器</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 class="tile" style="background-color: #28a745;" onclick="handleTileClick('text_to_qrcode.html')">
<i class="mdi mdi-qrcode-edit"></i>
<span>文字转二维码</span>
</div>
<div class="tile" style="background-color: #dc3545; display: none;" onclick="window.open('tool3.html', '_blank')">
<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')">
<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>
<script>
function handleTileClick(page) {
const currentPath = window.location.pathname;
let targetUrl;
if (currentPath.includes('index.html')) {
targetUrl = page;
} else {
targetUrl = `tools/${page}`;
}
window.open(targetUrl, '_blank');
}
</script>
</body>
</html>

73
text_to_qrcode.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>
<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; /* 保证生成的二维码容器大小适应内容 */
}
#error {
color: red;
margin-top: 10px;
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>文字转二维码</h1>
<form id="textForm">
<textarea id="inputText" name="inputText" rows="4" cols="50" placeholder="请输入要生成二维码的文字..." required></textarea><br><br>
<button type="submit">生成二维码</button>
</form>
<div id="qrcode"></div>
<div id="error">输入的文字太长，无法生成二维码，请减少文字长度。</div>
</div>
<script>
const maxLength = 512; // QR码的最大字符长度限制
document.getElementById('textForm').addEventListener('submit', function(event) {
event.preventDefault();
const inputText = document.getElementById('inputText').value;
const qrCodeContainer = document.getElementById('qrcode');
const errorContainer = document.getElementById('error');
// 清空之前的二维码和错误信息
qrCodeContainer.innerHTML = "";
errorContainer.style.display = 'none';
// 检查输入文字长度是否超过最大限制
if (inputText.length > maxLength) {
errorContainer.style.display = 'block'; // 显示错误信息
} else {
new QRCode(qrCodeContainer, inputText);
}
});
</script>
</body>
</html>