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

@@ -84,8 +84,9 @@ Do NOT delegate routine tasks to specialists. Only invoke specialist agents when
### Layout Structure ### Layout Structure
1. **Center**: ASCII art of "McDonald's" logo as main visual element 1. **Center**: ASCII art of "McDonald's" logo as main visual element
2. **Below**: Halloween event information and activity details 2. **Tagline**: Below logo, empty line, then centered "i'm lovin' IT" with blinking cursor
3. **Overall**: Terminal/command-line interface aesthetic 3. **Below**: Halloween event information and activity details
4. **Overall**: Terminal/command-line interface aesthetic
### Technical Requirements ### Technical Requirements
- **Responsive**: Must work seamlessly on both web (desktop) and mobile devices - **Responsive**: Must work seamlessly on both web (desktop) and mobile devices
@@ -245,6 +246,8 @@ See `.claude/time-recording-policy.md` for complete guidelines.
**Step 2.1: Design ASCII Art Logo** **Step 2.1: Design ASCII Art Logo**
- Create McDonald's ASCII art (desktop version) - Create McDonald's ASCII art (desktop version)
- Create McDonald's ASCII art (mobile version) - Create McDonald's ASCII art (mobile version)
- Add "i'm lovin' IT" tagline below logo (centered)
- Implement blinking cursor after tagline (CSS animation)
- Test legibility on different screen sizes - Test legibility on different screen sizes
- **Owner**: Primary Agent - **Owner**: Primary Agent
- **Consultant**: minimalist-geek-webpage-builder (if needed) - **Consultant**: minimalist-geek-webpage-builder (if needed)

View File

@@ -14,6 +14,7 @@ Single-page website for McDonald's IT department Halloween event announcement, f
### FR-2: Visual Branding ### FR-2: Visual Branding
- ASCII art McDonald's logo as primary visual element - 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 - Terminal/command-line aesthetic throughout
- Maintain brand recognition while adhering to geek style - 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] | | [ASCII LOGO] |
| McDonald's | | McDonald's |
| | | |
| i'm lovin' IT_ |
| |
| 🎃 Halloween Event | | 🎃 Halloween Event |
| | | |
| Date: [TBD] | | Date: [TBD] |
@@ -82,6 +85,9 @@ Single-page website for McDonald's IT department Halloween event announcement, f
| • Spooky Debugging Challenge | | • Spooky Debugging Challenge |
| | | |
+----------------------------------+ +----------------------------------+
Note: The underscore (_) after "IT" represents
a blinking cursor animation (CSS keyframes)
``` ```
### ASCII Art Requirements ### ASCII Art Requirements
@@ -91,6 +97,13 @@ Single-page website for McDonald's IT department Halloween event announcement, f
- Uses only standard ASCII characters - Uses only standard ASCII characters
- Maintains McDonald's brand recognition - 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 ## Content Requirements
### Event Details ### 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 image files (ASCII art only)
- No web fonts (system fonts only) - No web fonts (system fonts only)
- No backend/server-side code required - No backend/server-side code required
- CSS animations allowed (for blinking cursor effect)
## Success Criteria ## Success Criteria
@@ -125,7 +139,8 @@ Single-page website for McDonald's IT department Halloween event announcement, f
3. Passes HTML5 validation 3. Passes HTML5 validation
4. Achieves WCAG 2.1 AA contrast ratios 4. Achieves WCAG 2.1 AA contrast ratios
5. Works without JavaScript enabled 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 ## Out of Scope