update all

This commit is contained in:
2025-11-28 16:31:49 +08:00
parent 45268544ea
commit 1c9f59bac7
5 changed files with 523 additions and 328 deletions

View File

@@ -286,6 +286,7 @@
flex-wrap: wrap;
gap: 8px;
margin-top: 15px;
justify-content: center;
}
.feature-tag {
@@ -326,20 +327,112 @@
background: #95a5a6;
}
/* 响应式设计 */
/* 响应式设计 - 保持左右布局 */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.sidebar {
width: 100%;
height: auto;
width: 50px;
padding: 10px 5px;
}
.sidebar.expanded {
width: 220px;
padding: 15px;
}
.main-content {
padding: 15px;
.sidebar h1 {
font-size: 14px;
margin-bottom: 20px;
}
.sidebar.expanded h1 {
font-size: 16px;
}
.tool-item {
padding: 8px 6px;
margin-bottom: 5px;
}
.sidebar.expanded .tool-item {
padding: 12px 10px;
}
.tool-icon {
font-size: 16px;
}
.sidebar.expanded .tool-icon {
font-size: 20px;
margin-right: 10px;
width: 20px;
}
.tool-info h3 {
font-size: 12px;
}
.sidebar.expanded .tool-info h3 {
font-size: 14px;
}
.tool-info p {
font-size: 9px;
}
.sidebar.expanded .tool-info p {
font-size: 10px;
}
.sidebar-toggle {
width: 24px;
height: 24px;
font-size: 12px;
}
#toggleIcon {
font-size: 22px;
}
.welcome-section {
padding: 20px;
}
.welcome-section h2 {
font-size: 28px;
}
.welcome-section p {
font-size: 16px;
}
}
@media (max-width: 480px) {
.sidebar {
width: 40px;
padding: 8px 4px;
}
.sidebar.expanded {
width: 200px;
padding: 10px;
}
.tool-icon {
font-size: 14px;
}
.sidebar.expanded .tool-icon {
font-size: 18px;
}
.sidebar-toggle {
width: 20px;
height: 20px;
font-size: 10px;
}
#toggleIcon {
font-size: 18px;
}
}
</style>
@@ -415,7 +508,6 @@
所有工具都经过精心设计,界面简洁美观,功能强大实用。支持在线使用,无需下载安装。
</p>
<div class="feature-tags">
<span class="feature-tag">💻 纯前端</span>
<span class="feature-tag">🎨 界面美观</span>
<span class="feature-tag">⚡ 快速响应</span>
<span class="feature-tag">📱 响应式设计</span>
@@ -432,6 +524,22 @@
点击左侧的工具名称即可在右侧区域打开对应工具。所有数据都在本地处理,不会上传到服务器,保护您的隐私安全。
</p>
</div>
<div
class="tool-preview"
style="margin-top: 30px; border-left-color: #27ae60"
>
<h3>💬 定制服务</h3>
<p>
如果您有想要加入的工具箱功能,欢迎联系
<a
href="mailto:gogongxt@163.com"
style="color: #27ae60; text-decoration: none"
>gogongxt@163.com</a
>
为您定制专属工具。
</p>
</div>
</div>
</div>
</div>
@@ -522,7 +630,6 @@
<h3>📋 工具特色</h3>
<p>所有工具都经过精心设计,界面简洁美观,功能强大实用。支持在线使用,无需下载安装。</p>
<div class="feature-tags">
<span class="feature-tag">💻 纯前端</span>
<span class="feature-tag">🎨 界面美观</span>
<span class="feature-tag">⚡ 快速响应</span>
<span class="feature-tag">📱 响应式设计</span>
@@ -534,6 +641,11 @@
<h3>🚀 使用说明</h3>
<p>点击左侧的工具名称即可在右侧区域打开对应工具。所有数据都在本地处理,不会上传到服务器,保护您的隐私安全。</p>
</div>
<div class="tool-preview" style="margin-top: 30px; border-left-color: #27ae60;">
<h3>💬 定制服务</h3>
<p>如果您有想要加入的工具箱功能,欢迎联系 <a href="mailto:gogongxt@163.com" style="color: #27ae60; text-decoration: none;">gogongxt@163.com</a> 为您定制专属工具。</p>
</div>
</div>
`;
} else if (tool.url) {
@@ -543,31 +655,6 @@
`;
}
}
// 键盘快捷键支持
document.addEventListener("keydown", function (e) {
// Ctrl/Cmd + 数字键快速切换工具
if (e.ctrlKey || e.metaKey) {
const key = parseInt(e.key);
if (key >= 1 && key <= 6) {
const toolNames = [
"welcome",
"calculator",
"number",
"color",
"json",
"other",
];
const toolName = toolNames[key - 1];
const toolItem = document.querySelector(
`[data-tool="${toolName}"]`,
);
if (toolItem) {
toolItem.click();
}
}
}
});
</script>
</body>
</html>