# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

**Project Name**: McDonald's IT Halloween Event Page

**Purpose**: A minimalist, geek-style webpage to announce Halloween day activities for McDonald's IT department.

**Target Audience**: McDonald's IT staff and programmers

## Design Requirements

### Visual Style
- **Aesthetic**: Extreme minimalist geek style, inspired by Homebrew (macOS package manager)
- **Background**: Pure black (#000000)
- **Typography**: Monospace fonts only (Courier New, Monaco, Consolas, Menlo)
- **Color Scheme**: High contrast - green/white/amber text on black background
- **No Effects**: No shadows, gradients, borders, or decorative elements

### Layout Structure
1. **Center**: ASCII art of "McDonald's" logo as main visual element
2. **Below**: Halloween event information and activity details
3. **Overall**: Terminal/command-line interface aesthetic

### Technical Requirements
- **Responsive**: Must work seamlessly on both web (desktop) and mobile devices
- **Cross-device**: ASCII art must remain legible on all screen sizes
- **Performance**: Single-file HTML with inline CSS, minimal dependencies
- **Compatibility**: Modern browsers (Chrome, Firefox, Safari, Edge)

## Technology Stack

- Pure HTML5 (semantic markup)
- Inline CSS (no external stylesheets)
- Vanilla JavaScript (only if necessary)
- No frameworks or libraries

## File Structure

```
test-project/
├── .claude/
│   ├── agents/              # AI agent configurations
│   └── constitution.md      # Agent system principles
├── CLAUDE.md               # This file
├── index.html              # Main Halloween event page
└── README.md               # Project documentation
```

## Development Guidelines

### Code Style
- Clean, semantic HTML5
- Well-commented code for maintainability
- Consistent indentation (2 spaces)
- UTF-8 character encoding

### Design Principles
- Mobile-first responsive design
- Accessibility considerations (WCAG 2.1 AA)
- Fast load time (< 1 second)
- Self-contained single file for easy deployment

### ASCII Art Guidelines
- Use standard ASCII characters for maximum compatibility
- Center alignment
- Provide mobile-optimized version if needed
- Test on multiple screen sizes

## Project Metadata

**Created**: 2025-10-04 08:50:35 UTC / 2025-10-04 16:50:35 GMT+8  
**Last Updated**: 2025-10-04 08:50:35 UTC / 2025-10-04 16:50:35 GMT+8  
**Status**: In Development

## Version Control

**Repository**: `ssh://gitea@git.shihong.me:2222/snowprint/halloween-test.git`

### Git Workflow Requirements

All team members must maintain good version control practices:

1. **Commit Conventions**: Use conventional commit format
   - `feat(scope): description` for new features
   - `fix(scope): description` for bug fixes
   - `docs(scope): description` for documentation

2. **Branch Strategy**:
   - `main` - production-ready code (protected)
   - `feature/*` - new features
   - `fix/*` - bug fixes
   - `hotfix/*` - urgent fixes

3. **Code Review**: All changes require review before merging to main

4. **Security**: Never commit credentials, API keys, or sensitive data

### DevOps Engineer Special Responsibilities

The DevOps engineer must:
- Monitor repository health and commit quality
- Enforce branch protection and workflow compliance
- Scan for accidentally committed secrets
- Maintain clean commit history
- Tag releases appropriately
- Document deployment procedures

See `.claude/git-workflow.md` for agent-specific guidelines.

## Time Recording Standards

**Critical Policy**: All timestamps must be recorded accurately.

- **Never fabricate dates or times**
- **Always use dual timezone format**: UTC and GMT+8
- **Format**: `YYYY-MM-DD HH:MM:SS UTC` / `YYYY-MM-DD HH:MM:SS GMT+8`
- **Unknown dates**: Use "TBD" (To Be Determined)

See `.claude/time-recording-policy.md` for complete guidelines.

## Next Steps

1. ✅ Create project README with setup instructions
2. ✅ Set up Git repository and workflow documentation
3. Implement main Halloween event page (index.html)
4. Test responsive behavior on various devices
5. Validate HTML5 compliance
6. Deploy to hosting platform