001-mcdonald-s-it #1
50
CLAUDE.md
50
CLAUDE.md
@@ -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
|
||||
|
||||
@@ -54,8 +54,8 @@ Single-page website for McDonald's IT department Halloween event announcement, f
|
||||
|
||||
### Color Palette
|
||||
- Background: `#000000` (pure black)
|
||||
- Primary Text: `#00FF00` (terminal green) or `#FFFFFF` (white)
|
||||
- Accent: `#FFBF00` (amber) for highlights
|
||||
- Primary Text: `#00FF00` (terminal green)
|
||||
- Accent: `#FFBF00` (amber) for key information (dates, times, contact)
|
||||
- No gradients, shadows, or transparency
|
||||
|
||||
### Typography
|
||||
@@ -63,31 +63,42 @@ Single-page website for McDonald's IT department Halloween event announcement, f
|
||||
- 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_ |
|
||||
| |
|
||||
| 🎃 Halloween Event |
|
||||
| [COUNTDOWN TIMER] |
|
||||
| XX Days XX:XX:XX |
|
||||
| |
|
||||
| Date: [TBD] |
|
||||
| Time: [TBD] |
|
||||
| Location: IT Department |
|
||||
| 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: |
|
||||
| • Costume Contest |
|
||||
| • Code & Candy |
|
||||
| • Spooky Debugging Challenge |
|
||||
| Activities / 活动: |
|
||||
| • Cosplay / Cosplay装扮 |
|
||||
| • Bug Debugging / 调试游戏 |
|
||||
| • Lucky Draw / 现场抽奖 |
|
||||
| |
|
||||
| Organizer: Jessi Pan |
|
||||
| jessi.pan@cn.mcd.com |
|
||||
| |
|
||||
| McDonald's IT Academy |
|
||||
+----------------------------------+
|
||||
|
||||
Note: The underscore (_) after "IT" represents
|
||||
a blinking cursor animation (CSS keyframes)
|
||||
Note: _ = blinking cursor (CSS animation)
|
||||
Countdown updates in real-time (JS)
|
||||
```
|
||||
|
||||
### ASCII Art Requirements
|
||||
@@ -95,7 +106,10 @@ a blinking cursor animation (CSS keyframes)
|
||||
- Approximately 40-60 characters wide (desktop)
|
||||
- Scaled version for mobile (20-30 characters)
|
||||
- Uses only standard ASCII characters
|
||||
- Maintains McDonald's brand recognition
|
||||
- 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)
|
||||
@@ -104,33 +118,55 @@ a blinking cursor animation (CSS keyframes)
|
||||
- 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: "McDonald's IT Halloween Event"
|
||||
- Date: TBD (To be confirmed by McDonald's IT)
|
||||
- Time: TBD (To be confirmed by McDonald's IT)
|
||||
- Location: McDonald's IT Department (specific location TBD)
|
||||
- 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 (Example - to be confirmed)
|
||||
1. Costume Contest - Best tech-themed costume wins
|
||||
2. Code & Candy - Solve coding challenges for treats
|
||||
3. Spooky Debugging Challenge - Find the bugs, win prizes
|
||||
4. Halloween Trivia - Tech and pop culture questions
|
||||
### 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
|
||||
|
||||
### Call to Action
|
||||
- RSVP instructions
|
||||
- Contact information
|
||||
- Dress code (optional costumes)
|
||||
### 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 only)
|
||||
- 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
|
||||
|
||||
@@ -138,9 +174,12 @@ a blinking cursor animation (CSS keyframes)
|
||||
2. ASCII art is legible on iPhone SE (375px width)
|
||||
3. Passes HTML5 validation
|
||||
4. Achieves WCAG 2.1 AA contrast ratios
|
||||
5. Works without JavaScript enabled
|
||||
5. Countdown timer works correctly in GMT+8 timezone
|
||||
6. Blinking cursor animation works smoothly
|
||||
7. Receives positive feedback from IT staff
|
||||
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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user