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
+1. **Header**: Browser title "2025 MITA Halloween" with 🎃 favicon
-2. **Tagline**: Below logo, empty line, then centered "i'm lovin' IT" with blinking cursor
+2. **Center**: ASCII art of McDonald's logo (with Golden Arches M if possible)
-3. **Below**: Halloween event information and activity details
+3. **Tagline**: Below logo, empty line, then centered "i'm lovin' IT" with blinking cursor
-4. **Overall**: Terminal/command-line interface aesthetic
+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
+- ⏳ Add meta tags (title: "2025 MITA Halloween", favicon: 🎃)
-- ⏳ Structure content sections (logo, event info, activities)
+- ⏳ 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"
-- ⏳ Add accessibility attributes (ARIA labels, alt text)
+- ⏳ 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)
+- ⏳ Add countdown timer (JavaScript, GMT+8, target: Oct 31 2025 18:00)
-- ⏳ List activities and schedule
+- ⏳ Insert event details (Oct 31 2025, 18:00-21:00, MITA 2F Pantry)
-- ⏳ Add RSVP or contact information
+- ⏳ 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

project-spec.md

@@ -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)
+- Primary Text: `#00FF00` (terminal green)
-- Accent: `#FFBF00` (amber) for highlights
+- 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]                   |
+|    Date: October 31, 2025        |
-|    Time: [TBD]                   |
+|    日期：2025年10月31日            |
-|    Location: IT Department       |
+|    Time: 18:00 - 21:00 GMT+8     |
+|    时间：18:00 - 21:00            |
+|    Location: MITA 2F Pantry      |
+|    地点：MITA大椂2F Pantry        |
 |                                  |
-|    Activities:                   |
+|    Activities / 活动:             |
-|    • Costume Contest             |
+|    • Cosplay / Cosplay装扮       |
-|    • Code & Candy                |
+|    • Bug Debugging / 调试游戏    |
-|    • Spooky Debugging Challenge  |
+|    • Lucky Draw / 现场抽奖        |
 |                                  |
+|    Organizer: Jessi Pan          |
+|    jessi.pan@cn.mcd.com          |
+|                                  |
+|    McDonald's IT Academy         |
 +----------------------------------+
 
-Note: The underscore (_) after "IT" represents 
+Note: _ = blinking cursor (CSS animation)
-a blinking cursor animation (CSS keyframes)
+      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"
+- Event name: "2025 MITA Halloween"
-- Date: TBD (To be confirmed by McDonald's IT)
+- Date: October 31, 2025 (Halloween)
-- Time: TBD (To be confirmed by McDonald's IT)
+- Time: 18:00 - 21:00 (6:00 PM - 9:00 PM) GMT+8
-- Location: McDonald's IT Department (specific location TBD)
+- 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)
+### Activities
-1. Costume Contest - Best tech-themed costume wins
+1. Cosplay - Encouraged, dress up in Halloween costumes
-2. Code & Candy - Solve coding challenges for treats
+2. Bug Debugging Games - Interactive debugging challenges
-3. Spooky Debugging Challenge - Find the bugs, win prizes
+3. Lucky Draw - On-site raffle with prizes
-4. Halloween Trivia - Tech and pop culture questions
+4. Food & Drinks - Provided by event organizers
 
-### Call to Action
+### Special Notes
-- RSVP instructions
+- Costumes encouraged (Halloween theme)
-- Contact information
+- Food and beverages will be provided
-- Dress code (optional costumes)
+- 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