560 lines
15 KiB
HTML
560 lines
15 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>功能工具箱</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family:
|
||
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||
"Helvetica Neue", Arial, sans-serif;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
}
|
||
|
||
.container {
|
||
display: flex;
|
||
height: 100vh;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
margin: 0;
|
||
}
|
||
|
||
/* 左侧工具栏 */
|
||
.sidebar {
|
||
width: 60px;
|
||
background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
|
||
color: white;
|
||
padding: 20px 8px;
|
||
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
|
||
overflow: hidden;
|
||
transition: width 0.3s ease;
|
||
position: relative;
|
||
}
|
||
|
||
.sidebar.expanded {
|
||
width: 280px;
|
||
padding: 20px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* 收起/展开按钮 */
|
||
.sidebar-toggle {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 20px;
|
||
transform: translateX(-50%);
|
||
width: 30px;
|
||
height: 30px;
|
||
background: #3498db;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
z-index: 1001;
|
||
box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
|
||
transition: all 0.3s ease;
|
||
padding: 0;
|
||
margin: 0;
|
||
line-height: 1;
|
||
}
|
||
|
||
.sidebar.expanded .sidebar-toggle {
|
||
left: auto;
|
||
right: 10px;
|
||
transform: translateX(0);
|
||
}
|
||
|
||
/* 隐藏滚动条但保持滚动功能 */
|
||
.sidebar::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.sidebar {
|
||
-ms-overflow-style: none;
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
.sidebar-toggle:hover {
|
||
background: #2980b9;
|
||
}
|
||
|
||
#toggleIcon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-family:
|
||
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||
font-weight: 300;
|
||
font-size: 27px;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
text-indent: 0;
|
||
transition: transform 0.3s ease;
|
||
line-height: 1;
|
||
position: relative;
|
||
top: -2px;
|
||
}
|
||
|
||
.sidebar h1 {
|
||
font-size: 18px;
|
||
margin-bottom: 30px;
|
||
text-align: center;
|
||
border-bottom: 2px solid rgba(255, 255, 255, 0.3);
|
||
padding-bottom: 15px;
|
||
font-weight: 600;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.sidebar.expanded h1 {
|
||
opacity: 1;
|
||
}
|
||
|
||
.tool-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 12px;
|
||
margin-bottom: 8px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
border: 1px solid transparent;
|
||
position: relative;
|
||
}
|
||
|
||
.sidebar.expanded .tool-item {
|
||
padding: 15px;
|
||
}
|
||
|
||
.tool-item:hover {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
transform: translateX(0px);
|
||
}
|
||
|
||
.sidebar.expanded .tool-item:hover {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
transform: translateX(3px);
|
||
}
|
||
|
||
.tool-item.active {
|
||
background: rgba(52, 152, 219, 0.8);
|
||
border-color: rgba(52, 152, 219, 1);
|
||
box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
|
||
}
|
||
|
||
.tool-icon {
|
||
font-size: 20px;
|
||
margin-right: 0;
|
||
width: 20px;
|
||
text-align: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.sidebar.expanded .tool-icon {
|
||
font-size: 24px;
|
||
margin-right: 15px;
|
||
width: 30px;
|
||
}
|
||
|
||
.tool-info {
|
||
opacity: 0;
|
||
width: 0;
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.sidebar.expanded .tool-info {
|
||
opacity: 1;
|
||
width: auto;
|
||
}
|
||
|
||
.tool-info h3 {
|
||
font-size: 14px;
|
||
margin-bottom: 3px;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.sidebar.expanded .tool-info h3 {
|
||
font-size: 16px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.tool-info p {
|
||
font-size: 10px;
|
||
opacity: 0.8;
|
||
line-height: 1.2;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.sidebar.expanded .tool-info p {
|
||
font-size: 12px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* 工具提示 */
|
||
.tooltip {
|
||
position: absolute;
|
||
left: 100%;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
margin-left: 10px;
|
||
background: rgba(0, 0, 0, 0.9);
|
||
color: white;
|
||
padding: 8px 12px;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
white-space: nowrap;
|
||
z-index: 1000;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.sidebar:not(.expanded) .tool-item:hover .tooltip {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 右侧内容区域 */
|
||
.main-content {
|
||
flex: 1;
|
||
background: white;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.welcome-section {
|
||
text-align: center;
|
||
margin: 0;
|
||
padding: 40px;
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.welcome-section h2 {
|
||
font-size: 36px;
|
||
color: #2c3e50;
|
||
margin-bottom: 20px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.welcome-section p {
|
||
font-size: 18px;
|
||
color: #7f8c8d;
|
||
line-height: 1.6;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.tool-preview {
|
||
background: #f8f9fa;
|
||
border-radius: 12px;
|
||
padding: 30px;
|
||
margin-top: 40px;
|
||
border-left: 4px solid #3498db;
|
||
}
|
||
|
||
.tool-preview h3 {
|
||
color: #2c3e50;
|
||
margin-bottom: 15px;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.tool-preview p {
|
||
color: #5a6c7d;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.feature-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.feature-tag {
|
||
background: #e3f2fd;
|
||
color: #1976d2;
|
||
padding: 4px 12px;
|
||
border-radius: 20px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.iframe-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
border: none;
|
||
border-radius: 0;
|
||
box-shadow: none;
|
||
background: white;
|
||
display: block;
|
||
}
|
||
|
||
/* 滚动条样式 */
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: #f1f1f1;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: #bdc3c7;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: #95a5a6;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.container {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.sidebar {
|
||
width: 100%;
|
||
height: auto;
|
||
padding: 15px;
|
||
}
|
||
|
||
.main-content {
|
||
padding: 15px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- 左侧工具栏 -->
|
||
<div class="sidebar expanded" id="sidebar">
|
||
<!-- 收起/展开按钮 -->
|
||
<button class="sidebar-toggle" id="sidebarToggle">
|
||
<span id="toggleIcon">‹</span>
|
||
</button>
|
||
|
||
<h1 id="homeTitle" style="cursor: pointer">🛠️ 功能工具箱</h1>
|
||
|
||
<div class="tool-item" data-tool="calculator">
|
||
<div class="tool-icon">⚡</div>
|
||
<div class="tool-info">
|
||
<h3>电费计算器</h3>
|
||
<p>计算电器设备的电力消耗成本</p>
|
||
</div>
|
||
<div class="tooltip">电费计算器</div>
|
||
</div>
|
||
|
||
<div class="tool-item" data-tool="number">
|
||
<div class="tool-icon">🔢</div>
|
||
<div class="tool-info">
|
||
<h3>程序员计算器</h3>
|
||
<p>进制转换工具，支持二进制、八进制、十进制、十六进制</p>
|
||
</div>
|
||
<div class="tooltip">程序员计算器</div>
|
||
</div>
|
||
|
||
<div class="tool-item" data-tool="color">
|
||
<div class="tool-icon">🎨</div>
|
||
<div class="tool-info">
|
||
<h3>颜色选择器</h3>
|
||
<p>专业的颜色选择工具，支持多种颜色格式</p>
|
||
</div>
|
||
<div class="tooltip">颜色选择器</div>
|
||
</div>
|
||
|
||
<div class="tool-item" data-tool="other">
|
||
<div class="tool-icon">⚙️</div>
|
||
<div class="tool-info">
|
||
<h3>其他功能</h3>
|
||
<p>更多实用工具正在开发中...</p>
|
||
</div>
|
||
<div class="tooltip">其他功能</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧内容区域 -->
|
||
<div class="main-content" id="main-content">
|
||
<div class="welcome-section">
|
||
<h2>欢迎使用功能工具箱</h2>
|
||
<p>
|
||
这是一个集成了多种实用工具的在线工具箱，帮助您提高工作效率。请在左侧选择您需要的工具。
|
||
</p>
|
||
|
||
<div class="tool-preview">
|
||
<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>
|
||
<span class="feature-tag">🔒 数据安全</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class="tool-preview"
|
||
style="margin-top: 30px; border-left-color: #e74c3c"
|
||
>
|
||
<h3>🚀 使用说明</h3>
|
||
<p>
|
||
点击左侧的工具名称即可在右侧区域打开对应工具。所有数据都在本地处理，不会上传到服务器，保护您的隐私安全。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 获取DOM元素
|
||
const sidebar = document.getElementById("sidebar");
|
||
const sidebarToggle = document.getElementById("sidebarToggle");
|
||
const toggleIcon = document.getElementById("toggleIcon");
|
||
const allToolItems = document.querySelectorAll(".tool-item");
|
||
const homeTitle = document.getElementById("homeTitle");
|
||
|
||
// 侧边栏收起/展开功能
|
||
sidebarToggle.addEventListener("click", function () {
|
||
sidebar.classList.toggle("expanded");
|
||
|
||
if (sidebar.classList.contains("expanded")) {
|
||
toggleIcon.textContent = "‹";
|
||
} else {
|
||
toggleIcon.textContent = "›";
|
||
}
|
||
});
|
||
|
||
// 工具配置
|
||
const tools = {
|
||
welcome: {
|
||
title: "欢迎页面",
|
||
content: "welcome",
|
||
},
|
||
calculator: {
|
||
title: "电费计算器",
|
||
url: "electricity_calculator.html",
|
||
},
|
||
number: {
|
||
title: "程序员计算器",
|
||
url: "number.html",
|
||
},
|
||
color: {
|
||
title: "颜色选择器",
|
||
url: "color_pick.html",
|
||
},
|
||
other: {
|
||
title: "其他功能",
|
||
url: "other_function.html",
|
||
},
|
||
};
|
||
|
||
const mainContent = document.getElementById("main-content");
|
||
|
||
// 工具切换功能
|
||
allToolItems.forEach((item) => {
|
||
item.addEventListener("click", function () {
|
||
const toolName = this.dataset.tool;
|
||
|
||
// 更新活动状态
|
||
allToolItems.forEach((i) => i.classList.remove("active"));
|
||
this.classList.add("active");
|
||
|
||
// 加载对应工具
|
||
loadTool(toolName);
|
||
});
|
||
});
|
||
|
||
// 首页标题点击事件
|
||
homeTitle.addEventListener("click", function () {
|
||
// 更新活动状态
|
||
allToolItems.forEach((i) => i.classList.remove("active"));
|
||
|
||
// 加载首页内容
|
||
loadTool("welcome");
|
||
});
|
||
|
||
function loadTool(toolName) {
|
||
const tool = tools[toolName];
|
||
|
||
if (toolName === "welcome") {
|
||
// 显示欢迎页面
|
||
mainContent.innerHTML = `
|
||
<div class="welcome-section">
|
||
<h2>欢迎使用功能工具箱</h2>
|
||
<p>这是一个集成了多种实用工具的在线工具箱，帮助您提高工作效率。请在左侧选择您需要的工具。</p>
|
||
|
||
<div class="tool-preview">
|
||
<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>
|
||
<span class="feature-tag">🔒 数据安全</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tool-preview" style="margin-top: 30px; border-left-color: #e74c3c;">
|
||
<h3>🚀 使用说明</h3>
|
||
<p>点击左侧的工具名称即可在右侧区域打开对应工具。所有数据都在本地处理，不会上传到服务器，保护您的隐私安全。</p>
|
||
</div>
|
||
</div>
|
||
`;
|
||
} else if (tool.url) {
|
||
// 在右侧iframe中显示工具
|
||
mainContent.innerHTML = `
|
||
<iframe src="${tool.url}" class="iframe-container"></iframe>
|
||
`;
|
||
}
|
||
}
|
||
|
||
// 键盘快捷键支持
|
||
document.addEventListener("keydown", function (e) {
|
||
// Ctrl/Cmd + 数字键快速切换工具
|
||
if (e.ctrlKey || e.metaKey) {
|
||
const key = parseInt(e.key);
|
||
if (key >= 1 && key <= 5) {
|
||
const toolNames = [
|
||
"welcome",
|
||
"calculator",
|
||
"number",
|
||
"color",
|
||
"other",
|
||
];
|
||
const toolName = toolNames[key - 1];
|
||
const toolItem = document.querySelector(
|
||
`[data-tool="${toolName}"]`,
|
||
);
|
||
if (toolItem) {
|
||
toolItem.click();
|
||
}
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|