update index

CLAUDE.md

@@ -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