feat(tasks): generate implementation tasks for Halloween event page

Created comprehensive task breakdown with 32 tasks across 7 phases: Phase 3.1: Setup & Structure (T001-T004) - HTML5 skeleton and semantic structure - Metadata, favicon, and CSS framework - Foundation for all subsequent tasks Phase 3.2: Content Creation (T005-T011) - ASCII art for desktop and mobile versions - Bilingual event information (EN/CN) - Halloween decorations and activities - Footer content Phase 3.3: Styling & Visual Design (T012-T017) - Terminal color scheme (#000000, #00FF00, #FFBF00) - Monospace typography and layout - Blinking cursor animation (CSS @keyframes) - Responsive media queries (mobile/tablet/desktop) Phase 3.4: Countdown Functionality (T018-T022) - Countdown timer structure and JavaScript - GMT+8 timezone handling - State management (before/active/ended) - Edge case testing Phase 3.5: Accessibility & Compliance (T023-T025) - ARIA labels for screen readers - Language attributes for bilingual content - WCAG 2.1 AA verification (21:1 contrast) Phase 3.6: Testing & Validation (T026-T031) - HTML5 validation - Cross-browser testing (Chrome/Firefox/Safari/Edge) - Responsive design testing - Performance testing (< 50KB, < 1s load) - Accessibility testing (WAVE, contrast checker) - Full quickstart validation Phase 3.7: Polish & Documentation (T032) - Update README with deployment instructions - Version 1.0.0 release notes in CHANGELOG Task Organization: - 32 tasks total, dependency-ordered - Single-file constraint (all modify index.html) - Content preparation can be planned in parallel - Testing tasks can run concurrently - Clear dependencies and blocking relationships Key Constraints: - File size must be < 50KB - Load time must be < 1 second - WCAG 2.1 AA compliance required - Works on Chrome, Firefox, Safari, Edge - Responsive: 320px to 1920px+ Ready for: /implement command or manual execution 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-04 19:23:42 +08:00
parent 325eeaf063
commit 3b355148b7
1 changed files with 448 additions and 0 deletions
--- a/specs/001-mcdonald-s-it/tasks.md
+++ b/specs/001-mcdonald-s-it/tasks.md
@@ -0,0 +1,448 @@
+# Tasks: McDonald's IT Halloween Event Page
+
+**Input**: Design documents from `/specs/001-mcdonald-s-it/`
+**Prerequisites**: plan.md ✅, research.md ✅, data-model.md ✅, contracts/ ✅, quickstart.md ✅
+**File to Create**: `index.html` (single self-contained HTML file)
+
+## Execution Flow (main)
+```
+1. Load plan.md from feature directory ✅
+   → Tech stack: HTML5, CSS3, JavaScript ES6+
+   → Structure: Single self-contained HTML file
+2. Load optional design documents ✅
+   → data-model.md: 4 entities (Event, Countdown, VisualTheme, Content)
+   → contracts/: page-content.schema.json
+   → research.md: 10 technical decisions
+   → quickstart.md: 10 test categories
+3. Generate tasks by category ✅
+   → Setup: HTML skeleton, structure
+   → Content: ASCII art, bilingual text
+   → Styling: CSS, responsive design
+   → Functionality: Countdown timer
+   → Accessibility: ARIA, WCAG compliance
+   → Testing: Validation, performance
+   → Polish: Documentation
+4. Apply task rules ✅
+   → Same file (index.html) = sequential for core structure
+   → Different sections = can plan in parallel [P]
+   → Tests before implementation (TDD principle)
+5. Number tasks sequentially (T001-T032) ✅
+6. Generate dependency graph ✅
+7. Create parallel execution examples ✅
+8. Validate task completeness ✅
+   → Schema has validation? Yes
+   → All entities covered? Yes
+   → All test scenarios included? Yes
+9. Return: SUCCESS (tasks ready for execution) ✅
+```
+
+## Format: `[ID] [P?] Description`
+- **[P]**: Can run in parallel (independent planning/preparation tasks)
+- Include exact file paths in descriptions
+- All implementation tasks modify `index.html`
+
+## Path Conventions
+- **Single file project**: `index.html` at repository root
+- **Specs directory**: `/specs/001-mcdonald-s-it/`
+- **Tests**: Manual testing via `quickstart.md`
+
+---
+
+## Phase 3.1: Setup & Structure
+
+- [ ] **T001** Create `index.html` with HTML5 doctype and basic structure
+  - File: `index.html`
+  - Add: `<!DOCTYPE html>`, `<html lang="en">`, `<head>`, `<body>`
+  - Add viewport meta tag: `<meta name="viewport" content="width=device-width, initial-scale=1.0">`
+  - Dependencies: None
+  - Blocks: All other tasks
+
+- [ ] **T002** Add page metadata and favicon
+  - File: `index.html` → `<head>` section
+  - Add: `<title>2025 MITA Halloween</title>`
+  - Add: `<meta charset="UTF-8">`
+  - Add: Meta description (see spec.md FR-035)
+  - Add: Data URI favicon with 🎃 emoji
+  - Dependencies: T001
+  - Reference: `research.md` decision #10
+
+- [ ] **T003** Set up semantic HTML5 structure
+  - File: `index.html` → `<body>` section
+  - Add: `<header>`, `<main>`, `<section>` for countdown, event info, activities, decorations
+  - Add: `<footer>` for "McDonald's IT Academy"
+  - Add: Placeholder `<pre>` tags for ASCII art
+  - Dependencies: T001
+  - Reference: `research.md` decision #1
+
+- [ ] **T004** Create CSS structure in `<style>` tag
+  - File: `index.html` → `<head>` section
+  - Add: `<style>` tag with organized sections (base, typography, layout, responsive)
+  - Add: CSS reset/normalize basics
+  - Dependencies: T001
+  - Reference: `research.md` decision #5
+
+---
+
+## Phase 3.2: Content Creation
+
+**Note**: These tasks can be prepared in parallel as content, then added to index.html sequentially
+
+- [ ] **T005** [P] Design McDonald's ASCII art (desktop version)
+  - File: `index.html` → `<header>` → `<pre class="ascii-desktop">`
+  - Create: McDonald's logo with Golden Arches M using ASCII characters
+  - Constraints: Monospace font compatible, centered, ~15-20 lines height
+  - Add: ARIA label "McDonald's Logo"
+  - Dependencies: T003
+  - Reference: `spec.md` FR-001, `research.md` decision #2
+
+- [ ] **T006** [P] Design McDonald's ASCII art (mobile version)
+  - File: `index.html` → `<header>` → `<pre class="ascii-mobile">`
+  - Create: Simplified McDonald's logo for mobile (< 768px)
+  - Constraints: Legible on small screens, ~8-10 lines height
+  - Add: Same ARIA label
+  - Dependencies: T003
+  - Reference: `spec.md` FR-024, `research.md` decision #3
+
+- [ ] **T007** [P] Add "i'm lovin' IT" tagline with cursor
+  - File: `index.html` → `<header>` → after ASCII art
+  - Add: `<p class="tagline" lang="en">i'm lovin' IT<span class="cursor">_</span></p>`
+  - Dependencies: T003
+  - Reference: `spec.md` FR-002
+
+- [ ] **T008** [P] Create Halloween ASCII decorations
+  - File: `index.html` → `<section class="decorations">`
+  - Add: Halloween-themed ASCII art (pumpkins, ghosts, bats) or emojis 🎃👻🦇
+  - Add: Multiple decorations in `<pre>` tags
+  - Dependencies: T003
+  - Reference: `spec.md` FR-006
+
+- [ ] **T009** [P] Write bilingual event information content
+  - File: `index.html` → `<section class="event-info">`
+  - Add: Date, time, location, organizer (English + Chinese alternating)
+  - Add: `lang="en"` and `lang="zh-CN"` attributes on each `<p>`
+  - Content from: `data-model.md` Event entity
+  - Dependencies: T003
+  - Reference: `spec.md` FR-008 to FR-016, `research.md` decision #7
+
+- [ ] **T010** [P] Add activities and notes content
+  - File: `index.html` → `<section class="activities">`
+  - Add: Bilingual list of activities (Cosplay, Debugging Games, Lucky Draw)
+  - Add: Notes (costumes encouraged, food provided)
+  - Dependencies: T003
+  - Reference: `spec.md` FR-013, FR-014
+
+- [ ] **T011** Add footer content
+  - File: `index.html` → `<footer>`
+  - Add: "McDonald's IT Academy" text
+  - Dependencies: T003
+  - Reference: `spec.md` FR-015
+
+---
+
+## Phase 3.3: Styling & Visual Design
+
+- [ ] **T012** Implement base color scheme and typography
+  - File: `index.html` → `<style>` section
+  - Add: `body { background: #000000; color: #00FF00; }`
+  - Add: Font stack: `font-family: "Courier New", Monaco, Consolas, Menlo, monospace;`
+  - Add: Accent color class: `.accent { color: #FFBF00; }`
+  - Dependencies: T004
+  - Reference: `spec.md` FR-003 to FR-005, `data-model.md` VisualTheme
+
+- [ ] **T013** Style ASCII art and tagline
+  - File: `index.html` → `<style>` section
+  - Add: `pre { text-align: center; line-height: 1.2; }`
+  - Add: `.tagline { text-align: center; font-size: 20px; }`
+  - Add: Default `.ascii-mobile { display: none; }`
+  - Dependencies: T012
+  - Reference: `research.md` decision #2, #3
+
+- [ ] **T014** Create blinking cursor animation
+  - File: `index.html` → `<style>` section
+  - Add: `@keyframes blink` with 50% opacity toggle
+  - Add: `.cursor { animation: blink 1s step-end infinite; }`
+  - Add: `@media (prefers-reduced-motion: reduce)` to disable for accessibility
+  - Dependencies: T012
+  - Reference: `spec.md` FR-002, `research.md` decision #8
+
+- [ ] **T015** Implement responsive media queries
+  - File: `index.html` → `<style>` section
+  - Add: `@media (max-width: 767px)` for mobile
+  - Add: ASCII art switching (hide desktop, show mobile)
+  - Add: Font size adjustments for readability
+  - Add: `@media (min-width: 768px) and (max-width: 1023px)` for tablet
+  - Dependencies: T013
+  - Reference: `spec.md` FR-021 to FR-025, `research.md` decision #3
+
+- [ ] **T016** Style countdown timer display
+  - File: `index.html` → `<style>` section
+  - Add: `.countdown { text-align: center; font-size: 24px; color: #FFBF00; }`
+  - Add: Styling for days/hours/minutes/seconds layout
+  - Dependencies: T012
+  - Reference: `spec.md` FR-017
+
+- [ ] **T017** Style event info and bilingual content
+  - File: `index.html` → `<style>` section
+  - Add: `.event-info p { text-align: center; margin: 0.5rem 0; }`
+  - Add: Language-specific styling if needed
+  - Dependencies: T012
+  - Reference: `spec.md` FR-012
+
+---
+
+## Phase 3.4: Countdown Functionality
+
+**Critical**: These tasks must be done sequentially (same JavaScript block)
+
+- [ ] **T018** Create countdown HTML structure
+  - File: `index.html` → `<section class="countdown">`
+  - Add: Container div with id `countdown-display`
+  - Add: Spans for days, hours, minutes, seconds
+  - Add: Noscript fallback: `<noscript>Enable JavaScript for live countdown</noscript>`
+  - Dependencies: T003
+  - Reference: `spec.md` FR-017 to FR-020
+
+- [ ] **T019** Implement countdown JavaScript logic
+  - File: `index.html` → `<script>` tag before `</body>`
+  - Add: Target date calculation (Oct 31 2025 18:00 GMT+8 = 10:00 UTC)
+  - Add: Event end date (Oct 31 2025 21:00 GMT+8 = 13:00 UTC)
+  - Add: `updateCountdown()` function to calculate time difference
+  - Dependencies: T018
+  - Reference: `data-model.md` Countdown entity, `research.md` decision #4
+
+- [ ] **T020** Add countdown timezone handling
+  - File: `index.html` → `<script>` section
+  - Add: UTC to GMT+8 conversion logic
+  - Add: User timezone detection and calculation
+  - Ensure: Countdown shows correct time for users in any timezone
+  - Dependencies: T019
+  - Reference: `spec.md` FR-018, FR-020
+
+- [ ] **T021** Implement countdown state management
+  - File: `index.html` → `<script>` section
+  - Add: Status check (before/active/ended)
+  - Add: Display "🎃 EVENT STARTING NOW! 🎃" when countdown reaches zero
+  - Add: Display "👻 EVENT COMPLETED - Thanks for joining! 👻" after event ends
+  - Add: Update display every 1000ms (1 second)
+  - Dependencies: T020
+  - Reference: `data-model.md` Countdown states, `research.md` edge cases
+
+- [ ] **T022** Test countdown edge cases
+  - File: `index.html` → verify in browser dev tools
+  - Test: Set system time to just before event (should count down)
+  - Test: Set system time to event start (should show "EVENT STARTING NOW")
+  - Test: Set system time to after event (should show "EVENT COMPLETED")
+  - Test: Disable JavaScript (should show noscript message)
+  - Dependencies: T021
+  - Reference: `quickstart.md` Edge Case Testing
+
+---
+
+## Phase 3.5: Accessibility & Compliance
+
+- [ ] **T023** [P] Add ARIA labels for screen readers
+  - File: `index.html` → throughout document
+  - Add: `aria-label` on ASCII art elements
+  - Add: `role` attributes where appropriate
+  - Add: `aria-live="polite"` on countdown for screen reader updates
+  - Dependencies: T003, T018
+  - Reference: `spec.md` FR-032
+
+- [ ] **T024** [P] Add language attributes for bilingual content
+  - File: `index.html` → all bilingual elements
+  - Verify: `lang="en"` on English paragraphs
+  - Verify: `lang="zh-CN"` on Chinese paragraphs
+  - Verify: `<html lang="en">` as primary language
+  - Dependencies: T009, T010
+  - Reference: `spec.md` FR-033, `research.md` decision #7
+
+- [ ] **T025** [P] Verify WCAG 2.1 AA compliance
+  - File: `index.html`
+  - Test: Contrast ratios (Green #00FF00 on black = 21:1, Amber #FFBF00 on black = 12:1)
+  - Test: Keyboard navigation (all interactive elements accessible)
+  - Test: Screen reader compatibility (test with VoiceOver/NVDA)
+  - Dependencies: T012, T023, T024
+  - Reference: `spec.md` FR-031, FR-034, `research.md` decision #6
+
+---
+
+## Phase 3.6: Testing & Validation
+
+**Note**: Execute testing tasks after implementation is complete
+
+- [ ] **T026** Run HTML5 validation
+  - Tool: https://validator.w3.org/
+  - Upload: `index.html`
+  - Fix: Any errors or critical warnings
+  - Target: Zero errors, clean validation
+  - Dependencies: All implementation tasks (T001-T025)
+  - Reference: `quickstart.md` section 10
+
+- [ ] **T027** Manual browser testing (all target browsers)
+  - Test in: Chrome, Firefox, Safari, Edge (latest versions)
+  - Verify: All features work consistently
+  - Check: Visual appearance, countdown functionality, responsiveness
+  - Fix: Any browser-specific issues
+  - Dependencies: All implementation tasks
+  - Reference: `quickstart.md` section 8
+
+- [ ] **T028** Responsive design testing
+  - Test: Desktop (1024px+), tablet (768-1023px), mobile (320-767px)
+  - Verify: ASCII art switches correctly
+  - Verify: No horizontal scroll on any size
+  - Verify: All content readable without zooming
+  - Use: Browser DevTools responsive mode
+  - Dependencies: T015, all content tasks
+  - Reference: `quickstart.md` section 5, `spec.md` FR-021 to FR-025
+
+- [ ] **T029** Performance testing
+  - Check: File size (must be < 50KB)
+    ```bash
+    ls -lh index.html
+    ```
+  - Check: Load time (must be < 1 second)
+    - Use: Browser DevTools Network tab
+  - Check: Animation performance (60fps for cursor blink)
+    - Use: Browser DevTools Performance tab
+  - Optimize: If any metrics fail
+  - Dependencies: All implementation tasks
+  - Reference: `quickstart.md` section 7, `spec.md` FR-026 to FR-030
+
+- [ ] **T030** Accessibility testing
+  - Run: WAVE accessibility checker (https://wave.webaim.org/)
+  - Run: Contrast checker (verify 21:1 and 12:1 ratios)
+  - Test: Screen reader navigation
+  - Test: Keyboard-only navigation
+  - Fix: Any accessibility issues found
+  - Dependencies: T023, T024, T025
+  - Reference: `quickstart.md` section 6, `spec.md` FR-031 to FR-035
+
+- [ ] **T031** Execute full quickstart validation
+  - Run: All tests in `quickstart.md`
+  - Complete: Quick Test (2 min) checklist
+  - Complete: Full Test Suite (15 min) checklist
+  - Complete: Edge Case Testing
+  - Document: Any issues found and fixes applied
+  - Dependencies: All implementation and testing tasks
+  - Reference: `quickstart.md` (entire document)
+
+---
+
+## Phase 3.7: Polish & Documentation
+
+- [ ] **T032** Update project documentation
+  - File: `README.md`
+  - Add: Deployment instructions (how to host index.html)
+  - Add: Usage instructions (how to view the page)
+  - Add: Feature description and screenshots
+  - File: `CHANGELOG.md`
+  - Add: Version 1.0.0 release notes with all features
+  - Dependencies: T031 (validation complete)
+  - Reference: `plan.md` Phase 3+ Expected Deliverables
+
+---
+
+## Dependencies Graph
+
+```
+T001 (HTML5 structure)
+  ├─→ T002 (metadata) → All tasks
+  ├─→ T003 (semantic HTML) → T005-T011, T018
+  └─→ T004 (CSS structure) → T012-T017
+
+Content (T005-T011) [Can prepare in parallel, add sequentially]
+  └─→ Must follow T003
+
+Styling (T012-T017)
+  T012 (base colors) → T013, T014, T016, T017
+  T013 (ASCII styling) → T015
+  T014 (cursor animation) [parallel with T013]
+  T015 (responsive) → requires T013
+  T016, T017 [parallel, depend on T012]
+
+Countdown (T018-T022) [MUST be sequential - same JS block]
+  T018 → T019 → T020 → T021 → T022
+
+Accessibility (T023-T025) [Can run in parallel]
+  T023, T024 [parallel]
+  T025 → requires T012, T023, T024
+
+Testing (T026-T031) [After all implementation]
+  All require: T001-T025 complete
+  T026, T027, T028 [can run in parallel]
+  T029 → requires all implementation
+  T030 → requires T023, T024, T025
+  T031 → requires all testing tasks
+
+Documentation (T032)
+  → requires T031 (validation complete)
+```
+
+## Parallel Execution Examples
+
+**Setup Phase (Can't parallelize - same file)**
+```bash
+# Must run sequentially - all modify index.html
+# T001 → T002 → T003 → T004
+```
+
+**Content Preparation (Can plan in parallel, implement sequentially)**
+```bash
+# Prepare content separately, then add to index.html
+# T005: Draft desktop ASCII art
+# T006: Draft mobile ASCII art
+# T007: Draft tagline
+# T008: Draft decorations
+# T009: Draft bilingual content
+# T010: Draft activities
+# Then add all to index.html sequentially
+```
+
+**Testing Phase (Can parallelize different checks)**
+```bash
+# After implementation complete:
+# Run these in parallel (different validation tools)
+Task: "Run HTML5 validation at validator.w3.org"
+Task: "Manual browser testing in Chrome, Firefox, Safari, Edge"
+Task: "Responsive design testing with DevTools"
+```
+
+## Notes
+
+- **Single file constraint**: Most tasks modify `index.html`, so true parallelization is limited
+- **Content preparation**: Can draft content separately, then integrate sequentially
+- **Testing**: Multiple validation tasks can run in parallel using different tools
+- **TDD adaptation**: For static page, "tests" are validation criteria from quickstart.md
+- **Commit strategy**: Commit after each phase (Structure, Content, Styling, Countdown, Accessibility, Testing, Docs)
+
+## Validation Checklist
+*GATE: Verified during task generation*
+
+- [x] All contracts have corresponding tests (Schema → T026 validation)
+- [x] All entities have coverage (Event → T009, Countdown → T018-T022, VisualTheme → T012-T017, Content → T009-T010)
+- [x] Testing comes after implementation (T026-T031 require T001-T025)
+- [x] Parallel tasks are truly independent (T023-T025 for accessibility, T026-T028 for different validations)
+- [x] Each task specifies exact file path (`index.html` or specific tools)
+- [x] No conflicting parallel tasks (content prep vs implementation separated)
+
+## Success Criteria
+
+**✅ All tasks complete when**:
+- `index.html` exists and is functional
+- File size < 50KB ✅
+- Load time < 1 second ✅
+- HTML5 validation passes ✅
+- WCAG 2.1 AA compliance verified ✅
+- All browsers work (Chrome, Firefox, Safari, Edge) ✅
+- Responsive on all devices ✅
+- Countdown timer functions correctly ✅
+- Documentation updated ✅
+
+**Ready for**: Deployment and user testing
+
+---
+
+**Total Tasks**: 32
+**Estimated Time**: 8-12 hours (including testing)
+**Complexity**: Medium (single file, but detailed requirements)
+**Risk Areas**: ASCII art legibility on mobile, countdown timezone accuracy, file size constraint