From 9c57194a0462f3ab5c14dc99a4b4dea277cb08e6 Mon Sep 17 00:00:00 2001 From: snowprint Date: Sat, 4 Oct 2025 18:24:11 +0800 Subject: [PATCH] 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. --- CLAUDE.md | 7 +++++-- project-spec.md | 17 ++++++++++++++++- 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 2818198..1e77517 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -84,8 +84,9 @@ Do NOT delegate routine tasks to specialists. Only invoke specialist agents when ### Layout Structure 1. **Center**: ASCII art of "McDonald's" logo as main visual element -2. **Below**: Halloween event information and activity details -3. **Overall**: Terminal/command-line interface aesthetic +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 ### Technical Requirements - **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** - ⏳ Create McDonald's ASCII art (desktop 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 - **Owner**: Primary Agent - **Consultant**: minimalist-geek-webpage-builder (if needed) diff --git a/project-spec.md b/project-spec.md index c3e1d69..841ee7e 100644 --- a/project-spec.md +++ b/project-spec.md @@ -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