docs(requirements): add complete event details and specifications

Event Details:
- Date: October 31, 2025, 18:00-21:00 GMT+8
- Location: MITA Building 2F Pantry
- Organizer: Jessi Pan (jessi.pan@cn.mcd.com)
- Attendees: 300 China IT team members

Features Added:
- Countdown timer (JavaScript, GMT+8 timezone)
- Bilingual content (English/Chinese alternating lines)
- Halloween emojis and ASCII art decorations
- Golden Arches M in ASCII logo
- Programmer humor and tech references
- Browser title: "2025 MITA Halloween"
- Favicon: 🎃 emoji
- Footer: McDonald's IT Academy

Activities:
- Cosplay encouraged
- Bug debugging games
- Lucky draw prizes
- Food and drinks provided

Design:
- Terminal green (#00FF00) primary color
- Amber (#FFBF00) for key information
- Meta description added for SEO

Updated CLAUDE.md and project-spec.md with complete requirements.
This commit is contained in:
2025-10-04 19:03:04 +08:00
parent 9c57194a04
commit 17730359b8
2 changed files with 104 additions and 43 deletions

View File

@@ -71,7 +71,13 @@ Do NOT delegate routine tasks to specialists. Only invoke specialist agents when
**Purpose**: A minimalist, geek-style webpage to announce Halloween day activities for McDonald's IT department.
**Target Audience**: McDonald's IT staff and programmers
**Target Audience**: McDonald's China IT team (MITA) - 300 programmers and technical staff
**Event Details**:
- **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 (jessi.pan@cn.mcd.com)
## Design Requirements
@@ -79,20 +85,28 @@ Do NOT delegate routine tasks to specialists. Only invoke specialist agents when
- **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
- **Color Scheme**: Terminal green (#00FF00) primary, amber (#FFBF00) for key info
- **No Effects**: No shadows, gradients, borders, or decorative elements
- **Humor**: Programmer jokes and tech references encouraged
### Layout Structure
1. **Center**: ASCII art of "McDonald's" logo as main visual element
2. **Tagline**: Below logo, empty line, then centered "i'm lovin' IT" with blinking cursor
3. **Below**: Halloween event information and activity details
4. **Overall**: Terminal/command-line interface aesthetic
1. **Header**: Browser title "2025 MITA Halloween" with 🎃 favicon
2. **Center**: ASCII art of McDonald's logo (with Golden Arches M if possible)
3. **Tagline**: Below logo, empty line, then centered "i'm lovin' IT" with blinking cursor
4. **Countdown**: Real-time countdown to event (GMT+8 timezone)
5. **Event Info**: Bilingual content (English first, Chinese second, alternating lines)
6. **Activities**: Cosplay encouragement, bug debugging games, lucky draw
7. **Footer**: "McDonald's IT Academy"
8. **Decorations**: Halloween emojis and ASCII art (pumpkins, ghosts, bats)
9. **Overall**: Terminal/command-line interface aesthetic with programmer humor
### 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
- **Performance**: Single-file HTML with inline CSS, minimal JavaScript for countdown
- **Compatibility**: Modern browsers (Chrome, Firefox, Safari, Edge)
- **Countdown**: JavaScript countdown timer using GMT+8 timezone
- **Bilingual**: Chinese-English content display
## Technology Stack
@@ -244,8 +258,10 @@ See `.claude/time-recording-policy.md` for complete guidelines.
#### Phase 2: Design & Implementation ⏳ IN PROGRESS
**Step 2.1: Design ASCII Art Logo**
- Create McDonald's ASCII art (desktop version)
- Create McDonald's ASCII art with Golden Arches M (desktop)
- Create McDonald's ASCII art (mobile version)
- Add Halloween ASCII art (pumpkins, ghosts, bats)
- Add Halloween emojis (🎃👻🦇)
- Add "i'm lovin' IT" tagline below logo (centered)
- Implement blinking cursor after tagline (CSS animation)
- Test legibility on different screen sizes
@@ -255,9 +271,11 @@ See `.claude/time-recording-policy.md` for complete guidelines.
**Step 2.2: Implement HTML Structure**
- Create index.html with semantic HTML5
- Add meta tags for responsive design
- Structure content sections (logo, event info, activities)
- Add accessibility attributes (ARIA labels, alt text)
- Add meta tags (title: "2025 MITA Halloween", favicon: 🎃)
- Add meta description: "McDonald's China IT Halloween 2025 - Join 300 MITA developers for cosplay, debugging games, and lucky draw at MITA Building 2F Pantry"
- Structure sections (logo, countdown, event info, activities, footer)
- Add bilingual content (English/Chinese alternating lines)
- Add accessibility attributes (ARIA labels, lang attributes)
- **Owner**: Primary Agent
- **Status**: Not started
@@ -271,9 +289,13 @@ See `.claude/time-recording-policy.md` for complete guidelines.
- **Status**: Not started
**Step 2.4: Add Event Content**
- Insert Halloween event details (date TBD, time TBD, location)
- List activities and schedule
- Add RSVP or contact information
- Add countdown timer (JavaScript, GMT+8, target: Oct 31 2025 18:00)
- Insert event details (Oct 31 2025, 18:00-21:00, MITA 2F Pantry)
- List activities (Cosplay encouraged, bug debugging games, lucky draw)
- Add organizer (Jessi Pan, jessi.pan@cn.mcd.com)
- Add notes (costumes encouraged, food/drinks provided)
- Add footer (McDonald's IT Academy)
- Include programmer humor and tech references
- **Owner**: Primary Agent
- **Consultant**: product-manager (for content prioritization if needed)
- **Status**: Not started