# 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