tools/CLAUDE.md

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

# 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