snowprint
3b355148b7
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>
449 lines
17 KiB
Markdown
449 lines
17 KiB
Markdown
# 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
|