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:
@@ -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)
|
||||||
|
|||||||
@@ -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
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user