update all
This commit is contained in:
159
index.html
159
index.html
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user