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.
This commit is contained in:
2025-10-04 18:24:11 +08:00
parent b6a192e7eb
commit 9c57194a04
2 changed files with 21 additions and 3 deletions

View File

@@ -14,6 +14,7 @@ Single-page website for McDonald's IT department Halloween event announcement, f
### 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
@@ -70,6 +71,8 @@ Single-page website for McDonald's IT department Halloween event announcement, f
| [ASCII LOGO] |
| McDonald's |
| |
| i'm lovin' IT_ |
| |
| 🎃 Halloween Event |
| |
| Date: [TBD] |
@@ -82,6 +85,9 @@ Single-page website for McDonald's IT department Halloween event announcement, f
| • Spooky Debugging Challenge |
| |
+----------------------------------+
Note: The underscore (_) after "IT" represents
a blinking cursor animation (CSS keyframes)
```
### ASCII Art Requirements
@@ -91,6 +97,13 @@ Single-page website for McDonald's IT department Halloween event announcement, f
- 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
@@ -117,6 +130,7 @@ Single-page website for McDonald's IT department Halloween event announcement, f
- 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
@@ -125,7 +139,8 @@ Single-page website for McDonald's IT department Halloween event announcement, f
3. Passes HTML5 validation
4. Achieves WCAG 2.1 AA contrast ratios
5. Works without JavaScript enabled
6. Receives positive feedback from IT staff
6. Blinking cursor animation works smoothly
7. Receives positive feedback from IT staff
## Out of Scope