diff --git a/CLAUDE.md b/CLAUDE.md index 1e77517..b972b24 100644 --- a/CLAUDE.md +++ b/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 diff --git a/project-spec.md b/project-spec.md index 841ee7e..614a2f7 100644 --- a/project-spec.md +++ b/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) -- 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