halloween-test/project-spec.md

# Project Specification: McDonald's IT Halloween Event Page

## Executive Summary

Single-page website for McDonald's IT department Halloween event announcement, featuring extreme minimalist geek aesthetic inspired by Homebrew.

## Functional Requirements

### FR-1: Event Information Display
- Display Halloween event date, time, and location
- List activities and schedule
- Show participation instructions
- Include contact information

### FR-2: Visual Branding
- ASCII art McDonald's logo as primary visual element
- Tagline "i'm lovin' IT" centered below logo with blinking cursor
- Terminal/command-line aesthetic throughout
- Maintain brand recognition while adhering to geek style

### FR-3: Responsive Design
- Seamless experience on desktop (1024px+)
- Optimized layout for tablets (768-1023px)
- Mobile-friendly design (320-767px)
- ASCII art must remain legible on all devices

### FR-4: Performance
- Page load time < 1 second
- No external dependencies
- Single self-contained HTML file
- Minimal file size (< 50KB)

## Non-Functional Requirements

### NFR-1: Accessibility
- WCAG 2.1 AA compliance
- Keyboard navigation support
- Screen reader compatible
- High contrast ratios (minimum 7:1)

### NFR-2: Browser Compatibility
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+

### NFR-3: Maintainability
- Clean, well-commented code
- Semantic HTML5 markup
- Inline CSS for portability
- Easy content updates

## Design Specifications

### Color Palette
- Background: `#000000` (pure black)
- Primary Text: `#00FF00` (terminal green)
- Accent: `#FFBF00` (amber) for key information (dates, times, contact)
- No gradients, shadows, or transparency

### Typography
- Font Family: `'Courier New', 'Monaco', 'Consolas', 'Menlo', monospace`
- Base Font Size: 16px (desktop), 14px (mobile)
- Line Height: 1.6
- Letter Spacing: Normal (monospace default)
- Chinese Font Support: System default monospace with Chinese fallback

### Layout
```
+----------------------------------+
|    🎃👻🦇 2025 MITA Halloween 🦇👻🎃    |
|                                  |
|         [ASCII LOGO]             |
|         McDonald's               |
|      [Halloween ASCII Art]       |
|                                  |
|      i'm lovin' IT_              |
|                                  |
|    [COUNTDOWN TIMER]             |
|    XX Days XX:XX:XX              |
|                                  |
|    Date: October 31, 2025        |
|    日期：2025年10月31日            |
|    Time: 18:00 - 21:00 GMT+8     |
|    时间：18:00 - 21:00            |
|    Location: MITA 2F Pantry      |
|    地点：MITA大椂2F Pantry        |
|                                  |
|    Activities / 活动:             |
|    • Cosplay / Cosplay装扮       |
|    • Bug Debugging / 调试游戏    |
|    • Lucky Draw / 现场抽奖        |
|                                  |
|    Organizer: Jessi Pan          |
|    jessi.pan@cn.mcd.com          |
|                                  |
|    McDonald's IT Academy         |
+----------------------------------+

Note: _ = blinking cursor (CSS animation)
      Countdown updates in real-time (JS)
```

### ASCII Art Requirements
- Centered horizontally
- Approximately 40-60 characters wide (desktop)
- Scaled version for mobile (20-30 characters)
- Uses only standard ASCII characters
- Include Golden Arches M shape if possible
- Maintains McDonald's brand recognition (note the apostrophe)
- Add Halloween ASCII decorations (pumpkins, ghosts, bats)
- Include Halloween emojis: 🎃👻🦇

### Tagline Requirements
- Text: "i'm lovin' IT" (lowercase, with apostrophe)
- Position: Centered, one line below ASCII logo
- Blinking cursor: Underscore character after "IT"
- Animation: CSS @keyframes for cursor blink (1s interval)
- Style: Same monospace font, terminal green color

### Countdown Timer Requirements
- Target: October 31, 2025 18:00:00 GMT+8
- Display: Days, Hours, Minutes, Seconds
- Update: Real-time (JavaScript)
- Timezone: GMT+8 (Asia/Shanghai)
- Style: Terminal green, monospace font

### Bilingual Content Requirements
- Language: English and Chinese (Simplified)
- Format: Alternating lines (English first, Chinese second)
- Example:
  ```
  Date: October 31, 2025
  日期：2025年10月31日
  ```

## Content Requirements

### Event Details
- Event name: "2025 MITA Halloween"
- Date: October 31, 2025 (Halloween)
- Time: 18:00 - 21:00 (6:00 PM - 9:00 PM) GMT+8
- Location: MITA Building 2F Pantry
- Organizer: Jessi Pan
- Contact: jessi.pan@cn.mcd.com
- Expected Attendees: 300 (China IT team)

### Activities
1. Cosplay - Encouraged, dress up in Halloween costumes
2. Bug Debugging Games - Interactive debugging challenges
3. Lucky Draw - On-site raffle with prizes
4. Food & Drinks - Provided by event organizers

### Special Notes
- Costumes encouraged (Halloween theme)
- Food and beverages will be provided
- Lucky draw prizes available
- Contact Jessi Pan for questions

## Technical Constraints

- No external CSS files
- No external JavaScript libraries
- No image files (ASCII art and emojis only)
- No web fonts (system fonts only)
- No backend/server-side code required
- CSS animations allowed (for blinking cursor effect)
- Vanilla JavaScript allowed (for countdown timer)
- Emoji favicon allowed (🎃)

## Success Criteria

1. Page loads in < 1 second on 3G connection
2. ASCII art is legible on iPhone SE (375px width)
3. Passes HTML5 validation
4. Achieves WCAG 2.1 AA contrast ratios
5. Countdown timer works correctly in GMT+8 timezone
6. Blinking cursor animation works smoothly
7. Bilingual content displays correctly
8. Halloween decorations enhance geek aesthetic
9. Programmer humor resonates with IT audience
10. Receives positive feedback from MITA team

## Out of Scope

- User registration system
- Database integration
- Content management system
- Multi-language support
- Animation or video content
- Social media integration

## Deliverables

1. `index.html` - Complete, production-ready webpage
2. Documentation in README.md
3. Testing notes and browser compatibility report

## Timeline

**Project Initiated**: 2025-10-04 08:50:35 UTC / 2025-10-04 16:50:35 GMT+8

- Project setup: Complete (2025-10-04)
- Design & development: 1-2 hours (estimated)
- Testing & refinement: 30 minutes (estimated)
- Deployment: 15 minutes (estimated)

**Total estimated time**: 2-3 hours
**Target completion**: TBD