96 lines
3.6 KiB
Markdown
96 lines
3.6 KiB
Markdown
# 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 |