snowprint/halloween-test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9c57194a0462f3ab5c14dc99a4b4dea277cb08e6
halloween-test/project-spec.md
snowprint 9c57194a04 feat(requirements): add tagline with blinking cursor 
- Add "i'm lovin' IT" tagline below McDonald's ASCII logo
- Implement blinking cursor animation after tagline
- Update layout structure in CLAUDE.md
- Add detailed tagline requirements in project-spec.md
- Specify CSS animation for cursor blink (1s interval)
- Update Step 2.1 to include tagline implementation

New visual element: centered tagline with terminal-style cursor.
2025-10-04 18:24:11 +08:00

4.9 KiB
Raw Blame History

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) or #FFFFFF (white)
  • Accent: #FFBF00 (amber) for highlights
  • 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)

Layout

+----------------------------------+
|                                  |
|         [ASCII LOGO]             |
|         McDonald's               |
|                                  |
|      i'm lovin' IT_              |
|                                  |
|    🎃 Halloween Event            |
|                                  |
|    Date: [TBD]                   |
|    Time: [TBD]                   |
|    Location: IT Department       |
|                                  |
|    Activities:                   |
|    • Costume Contest             |
|    • Code & Candy                |
|    • Spooky Debugging Challenge  |
|                                  |
+----------------------------------+

Note: The underscore (_) after "IT" represents 
a blinking cursor animation (CSS keyframes)

ASCII Art Requirements

  • Centered horizontally
  • Approximately 40-60 characters wide (desktop)
  • Scaled version for mobile (20-30 characters)
  • Uses only standard ASCII characters
  • Maintains McDonald's brand recognition

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

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)

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

Call to Action

  • RSVP instructions
  • Contact information
  • Dress code (optional costumes)

Technical Constraints

  • No external CSS files
  • No external JavaScript libraries
  • No image files (ASCII art only)
  • No web fonts (system fonts only)
  • No backend/server-side code required
  • CSS animations allowed (for blinking cursor effect)

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. Works without JavaScript enabled
  6. Blinking cursor animation works smoothly
  7. Receives positive feedback from IT staff

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