update index
This commit is contained in:
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
.specstory
|
||||||
96
CLAUDE.md
Normal file
96
CLAUDE.md
Normal file
@@ -0,0 +1,96 @@
|
|||||||
|
# CLAUDE.md
|
||||||
|
|
||||||
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||||
|
|
||||||
|
## Project Overview
|
||||||
|
|
||||||
|
This is a Chinese-language web-based utility toolbox (功能工具箱) that provides multiple practical tools through a single interface. It's a pure frontend application built with vanilla HTML, CSS, and JavaScript that requires no backend server or external dependencies.
|
||||||
|
|
||||||
|
## Architecture
|
||||||
|
|
||||||
|
### Core Structure
|
||||||
|
|
||||||
|
- **Single-page application (SPA)** with modular tool architecture
|
||||||
|
- **Main entry point**: `index.html` - Central hub with collapsible sidebar navigation
|
||||||
|
- **Individual tools**: Separate HTML files loaded via iframe when selected
|
||||||
|
- **Pure client-side**: All processing happens in the browser, ensuring data privacy
|
||||||
|
|
||||||
|
### Tool Modules
|
||||||
|
|
||||||
|
- **Electricity Calculator** (`electricity_calculator.html`): Calculate appliance electricity costs
|
||||||
|
- **Programmer Calculator** (`number.html`): Base conversion utility (binary, octal, decimal, hex)
|
||||||
|
- **Color Picker** (`color_pick.html`): Professional color selection and format conversion
|
||||||
|
- **Other Functions** (`other_function.html`): Placeholder for future tools (under construction)
|
||||||
|
|
||||||
|
## Development
|
||||||
|
|
||||||
|
### No Build Process
|
||||||
|
|
||||||
|
- **Static files**: Direct HTML/CSS/JS - no compilation needed
|
||||||
|
- **No dependencies**: Pure frontend with no npm packages or build tools
|
||||||
|
- **Simple deployment**: Can be served by any web server or opened directly in browser
|
||||||
|
|
||||||
|
### Testing
|
||||||
|
|
||||||
|
- Open `index.html` directly in browser to test
|
||||||
|
- Test individual tools by opening their respective HTML files
|
||||||
|
- Check responsive design at different viewport sizes
|
||||||
|
- Verify keyboard shortcuts (Ctrl/Cmd + 1-5 for tool navigation)
|
||||||
|
|
||||||
|
### Adding New Tools
|
||||||
|
|
||||||
|
1. Create new HTML file in root directory (following naming convention: `tool_name.html`)
|
||||||
|
2. Update `index.html` sidebar navigation to include new tool
|
||||||
|
3. Ensure new tool follows existing design patterns and styling
|
||||||
|
4. Test iframe loading and responsive behavior
|
||||||
|
|
||||||
|
### Code Style
|
||||||
|
|
||||||
|
- **HTML5**: Semantic markup with Chinese UI text
|
||||||
|
- **CSS3**: Modern features (Flexbox, Grid, animations, gradients)
|
||||||
|
- **Vanilla JavaScript**: No external libraries, cross-browser compatible
|
||||||
|
- **Responsive design**: Mobile-first approach with media queries
|
||||||
|
- **Consistent styling**: Shared CSS patterns across all tools
|
||||||
|
|
||||||
|
### Key Features to Maintain
|
||||||
|
|
||||||
|
- **Privacy-focused**: All processing happens locally, no external data transmission
|
||||||
|
- **User experience**: Smooth animations, collapsible sidebar, tooltips
|
||||||
|
- **Accessibility**: Semantic HTML and keyboard navigation support
|
||||||
|
- **Professional UI**: Gradient backgrounds, modern styling, clean layouts
|
||||||
|
|
||||||
|
## File Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
/
|
||||||
|
├── index.html # Main application hub with navigation
|
||||||
|
├── electricity_calculator.html # Electricity cost calculator
|
||||||
|
├── number.html # Programmer calculator (base conversion)
|
||||||
|
├── color_pick.html # Color picker and format converter
|
||||||
|
├── other_function.html # Future tools placeholder
|
||||||
|
└── CLAUDE.md # This file
|
||||||
|
```
|
||||||
|
|
||||||
|
## Common Tasks
|
||||||
|
|
||||||
|
### Running the Application
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Serve with any web server (optional)
|
||||||
|
python3 -m http.server 8000
|
||||||
|
# or open directly in browser
|
||||||
|
open index.html
|
||||||
|
```
|
||||||
|
|
||||||
|
### Adding New Tools
|
||||||
|
|
||||||
|
- Follow existing HTML structure and CSS patterns
|
||||||
|
- Include Chinese interface text consistent with current tools
|
||||||
|
- Ensure responsive design for mobile devices
|
||||||
|
- Test iframe integration with main navigation
|
||||||
|
|
||||||
|
### Modifying Styles
|
||||||
|
|
||||||
|
- Main styles are embedded in individual HTML files
|
||||||
|
- Consistent color scheme and design patterns across tools
|
||||||
|
- Use CSS variables for easy theme maintenance if needed
|
||||||
560
index.html
560
index.html
@@ -1,47 +1,559 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="zh">
|
<html lang="zh-CN">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>功能插件</title>
|
<title>功能工具箱</title>
|
||||||
<style>
|
<style>
|
||||||
body {
|
* {
|
||||||
font-family: Arial, sans-serif;
|
margin: 0;
|
||||||
margin: 20px;
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
body {
|
||||||
padding: 10px 15px;
|
font-family:
|
||||||
margin: 5px;
|
-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;
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>功能插件</h1>
|
<div class="container">
|
||||||
|
<!-- 左侧工具栏 -->
|
||||||
|
<div class="sidebar expanded" id="sidebar">
|
||||||
|
<!-- 收起/展开按钮 -->
|
||||||
|
<button class="sidebar-toggle" id="sidebarToggle">
|
||||||
|
<span id="toggleIcon">‹</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
<button onclick="openCalculator()">电费计算器</button>
|
<h1 id="homeTitle" style="cursor: pointer">🛠️ 功能工具箱</h1>
|
||||||
<button onclick="openNumber()">程序员计算器</button>
|
|
||||||
<button onclick="openColorPick()">颜色选择器</button>
|
<div class="tool-item" data-tool="calculator">
|
||||||
<button onclick="openOtherFunction()">其他功能</button>
|
<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>
|
<script>
|
||||||
function openCalculator() {
|
// 获取DOM元素
|
||||||
window.open("electricity_calculator.html", "_blank");
|
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>
|
||||||
|
`;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function openNumber() {
|
// 键盘快捷键支持
|
||||||
window.open("number.html", "_blank");
|
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();
|
||||||
}
|
}
|
||||||
|
|
||||||
function openColorPick() {
|
|
||||||
window.open("color_pick.html", "_blank");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function openOtherFunction() {
|
|
||||||
window.open("other_function.html", "_blank");
|
|
||||||
}
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
358
other_function.html
Normal file
358
other_function.html
Normal file
@@ -0,0 +1,358 @@
|
|||||||
|
<!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;
|
||||||
|
background: radial-gradient(
|
||||||
|
circle at center,
|
||||||
|
#ff9a9e 0%,
|
||||||
|
#fad0c4 25%,
|
||||||
|
#fad0c4 50%,
|
||||||
|
#ff9a9e 75%,
|
||||||
|
#fad0c4 100%
|
||||||
|
);
|
||||||
|
background-size: 400% 400%;
|
||||||
|
animation: pinkGlow 10s ease-in-out infinite;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pinkGlow {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
background-position: 0% 50%;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-position: 100% 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
background: white;
|
||||||
|
border-radius: 20px;
|
||||||
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||||
|
padding: 60px 40px;
|
||||||
|
text-align: center;
|
||||||
|
max-width: 600px;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -50%;
|
||||||
|
left: -50%;
|
||||||
|
width: 200%;
|
||||||
|
height: 200%;
|
||||||
|
background: linear-gradient(45deg, #ff9a9e, #fad0c4, #fecfef, #fecfef);
|
||||||
|
opacity: 0.15;
|
||||||
|
animation: rotate 10s linear infinite;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.construction-icon {
|
||||||
|
font-size: 80px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
animation: bounce 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
0%,
|
||||||
|
20%,
|
||||||
|
50%,
|
||||||
|
80%,
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
transform: translateY(-30px);
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
transform: translateY(-15px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: #2c3e50;
|
||||||
|
font-size: 32px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 8px 20px;
|
||||||
|
border-radius: 25px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
animation: pulse 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0% {
|
||||||
|
box-shadow: 0 0 0 0 rgba(238, 90, 36, 0.7);
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
box-shadow: 0 0 0 15px rgba(238, 90, 36, 0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
box-shadow: 0 0 0 0 rgba(238, 90, 36, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
color: #5a6c7d;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.features-coming {
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 30px;
|
||||||
|
margin: 30px 0;
|
||||||
|
border-left: 5px solid #3498db;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.features-coming h3 {
|
||||||
|
color: #2c3e50;
|
||||||
|
font-size: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-list {
|
||||||
|
list-style: none;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-list li {
|
||||||
|
padding: 10px 0;
|
||||||
|
color: #5a6c7d;
|
||||||
|
font-size: 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-list li::before {
|
||||||
|
content: "🚧";
|
||||||
|
margin-right: 10px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
width: 100%;
|
||||||
|
height: 8px;
|
||||||
|
background: #ecf0f1;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 20px 0;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, #3498db, #2ecc71);
|
||||||
|
border-radius: 4px;
|
||||||
|
width: 30%;
|
||||||
|
animation: progressAnimation 3s ease-in-out infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes progressAnimation {
|
||||||
|
from {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
width: 65%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-text {
|
||||||
|
color: #7f8c8d;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-top: 10px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.particles {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.particle {
|
||||||
|
position: absolute;
|
||||||
|
background: #ff9a9e;
|
||||||
|
border-radius: 50%;
|
||||||
|
opacity: 0.15;
|
||||||
|
animation: float 6s infinite ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.particle:nth-child(1) {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
left: 10%;
|
||||||
|
animation-delay: 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.particle:nth-child(2) {
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
left: 30%;
|
||||||
|
animation-delay: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.particle:nth-child(3) {
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
left: 60%;
|
||||||
|
animation-delay: 2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.particle:nth-child(4) {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
left: 80%;
|
||||||
|
animation-delay: 3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: translateY(0) rotate(0deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-20px) rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="particles">
|
||||||
|
<div class="particle"></div>
|
||||||
|
<div class="particle"></div>
|
||||||
|
<div class="particle"></div>
|
||||||
|
<div class="particle"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="construction-icon">🚧</div>
|
||||||
|
<h1>其他功能</h1>
|
||||||
|
<div class="status-badge">正在开发中</div>
|
||||||
|
|
||||||
|
<p class="description">
|
||||||
|
更多实用功能正在紧张开发中，敬请期待！我们正在为您打造更加完善的工具集合。
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="features-coming">
|
||||||
|
<h3>🔮 即将推出的功能</h3>
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li>文本处理工具</li>
|
||||||
|
<li>图片压缩工具</li>
|
||||||
|
<li>二维码生成器</li>
|
||||||
|
<li>密码生成器</li>
|
||||||
|
<li>单位转换工具</li>
|
||||||
|
<li>时间戳转换器</li>
|
||||||
|
<li>JSON格式化工具</li>
|
||||||
|
<li>Base64编码工具</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="progress-bar">
|
||||||
|
<div class="progress-fill"></div>
|
||||||
|
</div>
|
||||||
|
<div class="progress-text">开发进度：约 40% 完成</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 添加一些动态交互效果
|
||||||
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
// 随机改变粒子的动画时间
|
||||||
|
const particles = document.querySelectorAll(".particle");
|
||||||
|
particles.forEach((particle, index) => {
|
||||||
|
const randomDelay = Math.random() * 3;
|
||||||
|
const randomDuration = 4 + Math.random() * 4;
|
||||||
|
particle.style.animationDelay = `${randomDelay}s`;
|
||||||
|
particle.style.animationDuration = `${randomDuration}s`;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 添加点击效果
|
||||||
|
const container = document.querySelector(".container");
|
||||||
|
container.addEventListener("click", function (e) {
|
||||||
|
const ripple = document.createElement("div");
|
||||||
|
ripple.style.position = "absolute";
|
||||||
|
ripple.style.width = "20px";
|
||||||
|
ripple.style.height = "20px";
|
||||||
|
ripple.style.background = "rgba(255, 154, 158, 0.5)";
|
||||||
|
ripple.style.borderRadius = "50%";
|
||||||
|
ripple.style.transform = "translate(-50%, -50%)";
|
||||||
|
ripple.style.pointerEvents = "none";
|
||||||
|
ripple.style.left = e.clientX - container.offsetLeft + "px";
|
||||||
|
ripple.style.top = e.clientY - container.offsetTop + "px";
|
||||||
|
ripple.style.animation = "rippleEffect 0.6s ease-out";
|
||||||
|
|
||||||
|
container.appendChild(ripple);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
ripple.remove();
|
||||||
|
}, 600);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 添加涟漪动画
|
||||||
|
const style = document.createElement("style");
|
||||||
|
style.textContent = `
|
||||||
|
@keyframes rippleEffect {
|
||||||
|
to {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
document.head.appendChild(style);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user