From 325eeaf0636340235922b2c01a24bd6fe17f5122 Mon Sep 17 00:00:00 2001 From: snowprint Date: Sat, 4 Oct 2025 19:20:25 +0800 Subject: [PATCH] feat(spec): complete implementation plan for Halloween event page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Created comprehensive planning documentation following Spec-Kit standards: Phase 0 - Research: - Analyzed 10 technical decisions (HTML5, ASCII art, countdown, responsive design) - Resolved edge cases (post-countdown, post-event, JS disabled, small screens) - Documented rationale and alternatives for each decision Phase 1 - Design: - Defined 4 data entities (Event, Countdown, VisualTheme, Content) - Created JSON schema contract for page content validation - Mapped 35 functional requirements to implementation approach - Generated quickstart testing checklist with 10 test categories Technical decisions: - Single-file HTML architecture (no external dependencies) - Pure CSS animations (blinking cursor) - JavaScript countdown with GMT+8 timezone handling - Responsive ASCII art (desktop/mobile versions) - WCAG 2.1 AA compliance (21:1 contrast ratio) Constitution compliance: PASS - No violations detected - Follows user-centric, professional excellence principles - Minimal technical stack aligns with simplicity requirement Artifacts created: - spec.md: 35 functional requirements - plan.md: Implementation strategy and phases - research.md: 10 technical research decisions - data-model.md: 4 entity definitions with validation - contracts/page-content.schema.json: JSON Schema - quickstart.md: Comprehensive testing checklist Ready for: /tasks command to generate tasks.md πŸ€– Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../contracts/page-content.schema.json | 364 ++++++++++++ specs/001-mcdonald-s-it/data-model.md | 364 ++++++++++++ specs/001-mcdonald-s-it/plan.md | 528 ++++++++++++++++++ specs/001-mcdonald-s-it/quickstart.md | 442 +++++++++++++++ specs/001-mcdonald-s-it/research.md | 345 ++++++++++++ specs/001-mcdonald-s-it/spec.md | 171 ++++++ 6 files changed, 2214 insertions(+) create mode 100644 specs/001-mcdonald-s-it/contracts/page-content.schema.json create mode 100644 specs/001-mcdonald-s-it/data-model.md create mode 100644 specs/001-mcdonald-s-it/plan.md create mode 100644 specs/001-mcdonald-s-it/quickstart.md create mode 100644 specs/001-mcdonald-s-it/research.md create mode 100644 specs/001-mcdonald-s-it/spec.md diff --git a/specs/001-mcdonald-s-it/contracts/page-content.schema.json b/specs/001-mcdonald-s-it/contracts/page-content.schema.json new file mode 100644 index 0000000..bddcb29 --- /dev/null +++ b/specs/001-mcdonald-s-it/contracts/page-content.schema.json @@ -0,0 +1,364 @@ +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "$id": "https://mcdonald-s-it-halloween.schema.json", + "title": "McDonald's IT Halloween Event Page Content Schema", + "description": "Schema defining the structure and validation rules for the Halloween 2025 event page content", + "type": "object", + "required": ["meta", "theme", "event", "countdown", "ascii"], + "properties": { + "meta": { + "type": "object", + "description": "Page metadata for browser and SEO", + "required": ["title", "description", "favicon"], + "properties": { + "title": { + "type": "string", + "const": "2025 MITA Halloween", + "description": "Browser tab title" + }, + "description": { + "type": "string", + "minLength": 50, + "maxLength": 160, + "description": "Meta description for SEO", + "default": "McDonald's China IT Halloween 2025 - Join 300 MITA developers for cosplay, debugging games, and lucky draw at MITA Building 2F Pantry" + }, + "favicon": { + "type": "string", + "pattern": "^data:image", + "description": "Data URI for favicon (pumpkin emoji)" + }, + "lang": { + "type": "string", + "enum": ["en", "zh-CN"], + "default": "en", + "description": "Primary page language" + } + } + }, + "theme": { + "type": "object", + "description": "Visual design theme configuration", + "required": ["backgroundColor", "primaryColor", "accentColor", "fontFamily"], + "properties": { + "backgroundColor": { + "type": "string", + "pattern": "^#[0-9A-Fa-f]{6}$", + "const": "#000000", + "description": "Pure black background" + }, + "primaryColor": { + "type": "string", + "pattern": "^#[0-9A-Fa-f]{6}$", + "const": "#00FF00", + "description": "Terminal green for main text" + }, + "accentColor": { + "type": "string", + "pattern": "^#[0-9A-Fa-f]{6}$", + "const": "#FFBF00", + "description": "Amber for key information" + }, + "fontFamily": { + "type": "string", + "pattern": "monospace", + "description": "Monospace font stack" + }, + "fontSize": { + "type": "object", + "properties": { + "base": { + "type": "string", + "pattern": "^[0-9]+(px|rem|em)$", + "default": "16px" + }, + "heading": { + "type": "string", + "pattern": "^[0-9]+(px|rem|em)$", + "default": "20px" + }, + "small": { + "type": "string", + "pattern": "^[0-9]+(px|rem|em)$", + "default": "14px" + } + } + } + } + }, + "event": { + "type": "object", + "description": "Halloween event details", + "required": ["title", "date", "startTime", "endTime", "timezone", "location", "organizer", "activities"], + "properties": { + "title": { + "type": "string", + "const": "2025 MITA Halloween" + }, + "date": { + "type": "string", + "format": "date", + "const": "2025-10-31", + "description": "Event date in ISO format" + }, + "startTime": { + "type": "string", + "pattern": "^([01]?[0-9]|2[0-3]):[0-5][0-9]$", + "const": "18:00", + "description": "Event start time in 24h format" + }, + "endTime": { + "type": "string", + "pattern": "^([01]?[0-9]|2[0-3]):[0-5][0-9]$", + "const": "21:00", + "description": "Event end time in 24h format" + }, + "timezone": { + "type": "string", + "const": "GMT+8", + "description": "Event timezone" + }, + "location": { + "type": "string", + "const": "MITA Building 2F Pantry", + "description": "Physical event location" + }, + "organizer": { + "type": "object", + "required": ["name", "email"], + "properties": { + "name": { + "type": "string", + "const": "Jessi Pan" + }, + "email": { + "type": "string", + "format": "email", + "const": "jessi.pan@cn.mcd.com" + } + } + }, + "activities": { + "type": "array", + "minItems": 3, + "maxItems": 5, + "items": { + "type": "string", + "minLength": 3 + }, + "description": "List of event activities" + }, + "notes": { + "type": "array", + "items": { + "type": "string", + "minLength": 5 + }, + "description": "Additional event information" + }, + "audience": { + "type": "object", + "properties": { + "department": { + "type": "string", + "const": "MITA" + }, + "count": { + "type": "integer", + "const": 300 + }, + "description": { + "type": "string", + "const": "McDonald's China IT team members" + } + } + } + } + }, + "countdown": { + "type": "object", + "description": "Countdown timer configuration", + "required": ["targetDateTime", "timezone"], + "properties": { + "targetDateTime": { + "type": "string", + "format": "date-time", + "const": "2025-10-31T10:00:00Z", + "description": "Target datetime in UTC (18:00 GMT+8)" + }, + "eventEndDateTime": { + "type": "string", + "format": "date-time", + "const": "2025-10-31T13:00:00Z", + "description": "Event end datetime in UTC (21:00 GMT+8)" + }, + "timezone": { + "type": "string", + "const": "GMT+8", + "description": "Display timezone" + }, + "updateInterval": { + "type": "integer", + "minimum": 1000, + "maximum": 1000, + "default": 1000, + "description": "Update interval in milliseconds" + }, + "messages": { + "type": "object", + "properties": { + "before": { + "type": "string", + "description": "Message to show before event" + }, + "active": { + "type": "string", + "const": "πŸŽƒ EVENT STARTING NOW! πŸŽƒ", + "description": "Message when event starts" + }, + "ended": { + "type": "string", + "const": "πŸ‘» EVENT COMPLETED - Thanks for joining! πŸ‘»", + "description": "Message after event ends" + }, + "noJs": { + "type": "string", + "const": "Enable JavaScript for live countdown", + "description": "Fallback message when JS disabled" + } + } + } + } + }, + "ascii": { + "type": "object", + "description": "ASCII art content", + "required": ["logo", "decorations"], + "properties": { + "logo": { + "type": "object", + "required": ["desktop", "mobile"], + "properties": { + "desktop": { + "type": "string", + "minLength": 50, + "description": "McDonald's ASCII logo for desktop (with Golden Arches)" + }, + "mobile": { + "type": "string", + "minLength": 20, + "description": "McDonald's ASCII logo for mobile (simplified)" + } + } + }, + "tagline": { + "type": "object", + "properties": { + "text": { + "type": "string", + "const": "i'm lovin' IT" + }, + "cursor": { + "type": "string", + "enum": ["_", "|", "β–ˆ"], + "default": "_" + } + } + }, + "decorations": { + "type": "array", + "minItems": 1, + "items": { + "type": "string", + "description": "Halloween-themed ASCII art or emoji" + }, + "description": "Halloween decorations (pumpkins, ghosts, bats)" + } + } + }, + "content": { + "type": "object", + "description": "Bilingual content pairs", + "properties": { + "pairs": { + "type": "array", + "items": { + "type": "object", + "required": ["section", "english", "chinese"], + "properties": { + "section": { + "type": "string", + "enum": ["date", "time", "location", "organizer", "activities", "notes"] + }, + "english": { + "type": "string", + "minLength": 5 + }, + "chinese": { + "type": "string", + "minLength": 3 + }, + "order": { + "type": "integer", + "minimum": 1 + } + } + } + } + } + }, + "accessibility": { + "type": "object", + "description": "Accessibility configuration", + "properties": { + "wcagLevel": { + "type": "string", + "enum": ["AA", "AAA"], + "const": "AA", + "description": "WCAG compliance level" + }, + "contrastRatios": { + "type": "object", + "properties": { + "primaryOnBackground": { + "type": "number", + "minimum": 21, + "description": "Green (#00FF00) on black (#000000)" + }, + "accentOnBackground": { + "type": "number", + "minimum": 12, + "description": "Amber (#FFBF00) on black (#000000)" + } + } + }, + "ariaLabels": { + "type": "object", + "description": "ARIA labels for screen readers" + } + } + }, + "performance": { + "type": "object", + "description": "Performance requirements", + "properties": { + "maxFileSize": { + "type": "integer", + "maximum": 51200, + "description": "Maximum file size in bytes (50KB)" + }, + "maxLoadTime": { + "type": "integer", + "maximum": 1000, + "description": "Maximum load time in milliseconds" + }, + "targetFrameRate": { + "type": "integer", + "const": 60, + "description": "Target frame rate for animations" + } + } + } + }, + "additionalProperties": false +} diff --git a/specs/001-mcdonald-s-it/data-model.md b/specs/001-mcdonald-s-it/data-model.md new file mode 100644 index 0000000..2b1a3ca --- /dev/null +++ b/specs/001-mcdonald-s-it/data-model.md @@ -0,0 +1,364 @@ +# Data Model: McDonald's IT Halloween Event Page + +**Feature**: Halloween event announcement webpage +**Date**: 2025-10-04 +**Status**: Complete + +## Overview + +This document defines the data entities and their relationships for the Halloween event page. While this is a static page with no backend storage, defining the data model helps structure the HTML content and JavaScript logic. + +## Entities + +### 1. Event + +Represents the Halloween event information. + +**Purpose**: Store and display all event details + +**Fields**: +| Field | Type | Required | Default | Description | +|-------|------|----------|---------|-------------| +| `title` | String | Yes | - | Event title: "2025 MITA Halloween" | +| `date` | Date | Yes | - | Event date: October 31, 2025 | +| `startTime` | Time | Yes | - | Event start: 18:00 GMT+8 | +| `endTime` | Time | Yes | - | Event end: 21:00 GMT+8 | +| `timezone` | String | Yes | "GMT+8" | Timezone for event | +| `location` | String | Yes | - | "MITA Building 2F Pantry" | +| `organizer` | Object | Yes | - | Organizer details | +| `organizer.name` | String | Yes | - | "Jessi Pan" | +| `organizer.email` | String | Yes | - | "jessi.pan@cn.mcd.com" | +| `activities` | Array | Yes | - | List of activities | +| `notes` | Array | Yes | - | Additional information | + +**Validation Rules**: +- `date` must be valid ISO date format +- `startTime` must be before `endTime` +- Times must be in 24-hour format (HH:MM) +- `organizer.email` must be valid email format +- `activities` must contain at least 1 item + +**Example**: +```json +{ + "title": "2025 MITA Halloween", + "date": "2025-10-31", + "startTime": "18:00", + "endTime": "21:00", + "timezone": "GMT+8", + "location": "MITA Building 2F Pantry", + "organizer": { + "name": "Jessi Pan", + "email": "jessi.pan@cn.mcd.com" + }, + "activities": [ + "Cosplay (encouraged)", + "Bug Debugging Games", + "Lucky Draw" + ], + "notes": [ + "Costumes encouraged", + "Food and drinks provided" + ] +} +``` + +**State Transitions**: None (static data) + +--- + +### 2. Countdown + +Represents the countdown timer state and logic. + +**Purpose**: Calculate and display time remaining until event + +**Fields**: +| Field | Type | Required | Default | Description | +|-------|------|----------|---------|-------------| +| `targetDateTime` | DateTime | Yes | - | Oct 31 2025 18:00:00 GMT+8 (in UTC: 10:00:00 UTC) | +| `currentDateTime` | DateTime | Yes | - | User's current time (updated every second) | +| `timeRemaining` | Object | No | null | Calculated time remaining | +| `timeRemaining.days` | Integer | No | 0 | Days remaining | +| `timeRemaining.hours` | Integer | No | 0 | Hours remaining (0-23) | +| `timeRemaining.minutes` | Integer | No | 0 | Minutes remaining (0-59) | +| `timeRemaining.seconds` | Integer | No | 0 | Seconds remaining (0-59) | +| `status` | Enum | Yes | "before" | Current event status | + +**Status Values**: +- `before`: Current time is before event start (show countdown) +- `active`: Event has started, current time is between start and end (show "EVENT STARTING NOW!") +- `ended`: Event has ended, current time is after event end (show "EVENT COMPLETED") + +**Validation Rules**: +- `targetDateTime` must be a valid Date object +- All time values must be >= 0 +- `status` must be one of: "before", "active", "ended" +- `timeRemaining` is null when status is not "before" + +**Calculation Logic**: +```javascript +// Convert GMT+8 to UTC for calculation +// Oct 31 2025 18:00 GMT+8 = Oct 31 2025 10:00 UTC +const targetDate = new Date('2025-10-31T10:00:00Z'); +const eventEnd = new Date('2025-10-31T13:00:00Z'); // 21:00 GMT+8 + +function updateCountdown() { + const now = new Date(); + + if (now >= eventEnd) { + return { status: 'ended', timeRemaining: null }; + } + + if (now >= targetDate) { + return { status: 'active', timeRemaining: null }; + } + + const diff = targetDate - now; + const days = Math.floor(diff / (1000 * 60 * 60 * 24)); + const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); + const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); + const seconds = Math.floor((diff % (1000 * 60)) / 1000); + + return { + status: 'before', + timeRemaining: { days, hours, minutes, seconds } + }; +} +``` + +**State Transitions**: +``` +before β†’ active (when current time >= targetDateTime) +active β†’ ended (when current time >= eventEnd) +``` + +--- + +### 3. VisualTheme + +Represents the visual design configuration. + +**Purpose**: Define and apply consistent styling across the page + +**Fields**: +| Field | Type | Required | Default | Description | +|-------|------|----------|---------|-------------| +| `backgroundColor` | Color | Yes | "#000000" | Pure black background | +| `primaryColor` | Color | Yes | "#00FF00" | Terminal green for main text | +| `accentColor` | Color | Yes | "#FFBF00" | Amber for key information | +| `fontFamily` | String | Yes | See below | Monospace font stack | +| `fontSize` | Object | Yes | - | Font sizes for different elements | +| `fontSize.base` | String | Yes | "16px" | Base font size | +| `fontSize.heading` | String | Yes | "20px" | Heading size | +| `fontSize.small` | String | Yes | "14px" | Small text size | +| `asciiArt` | Object | Yes | - | ASCII art content | +| `asciiArt.logoDesktop` | String | Yes | - | McDonald's logo for desktop | +| `asciiArt.logoMobile` | String | Yes | - | McDonald's logo for mobile | +| `asciiArt.decorations` | Array | Yes | - | Halloween ASCII decorations | + +**Font Stack**: +```css +"Courier New", Monaco, Consolas, "Liberation Mono", Menlo, monospace +``` + +**Validation Rules**: +- All color values must be valid hex format (#RRGGBB) +- `backgroundColor` must be #000000 (black) +- `primaryColor` and `accentColor` must meet WCAG AA contrast ratio with background +- `fontFamily` must include at least one monospace fallback +- ASCII art strings must contain only ASCII characters (0-127) + +**Example**: +```json +{ + "backgroundColor": "#000000", + "primaryColor": "#00FF00", + "accentColor": "#FFBF00", + "fontFamily": "\"Courier New\", Monaco, Consolas, Menlo, monospace", + "fontSize": { + "base": "16px", + "heading": "20px", + "small": "14px" + }, + "asciiArt": { + "logoDesktop": "[Multi-line ASCII art]", + "logoMobile": "[Simplified ASCII art]", + "decorations": ["πŸŽƒ", "πŸ‘»", "πŸ¦‡"] + } +} +``` + +**State Transitions**: None (static configuration) + +--- + +### 4. Content (Bilingual) + +Represents bilingual text content structure. + +**Purpose**: Store and display English/Chinese content pairs + +**Fields**: +| Field | Type | Required | Default | Description | +|-------|------|----------|---------|-------------| +| `section` | String | Yes | - | Content section identifier | +| `english` | String | Yes | - | English text | +| `chinese` | String | Yes | - | Chinese text (Simplified) | +| `order` | Integer | Yes | - | Display order | + +**Example Content Pairs**: +```json +[ + { + "section": "date", + "english": "Date: October 31, 2025", + "chinese": "ζ—₯期：2025εΉ΄10月31ζ—₯", + "order": 1 + }, + { + "section": "time", + "english": "Time: 18:00 - 21:00 (6:00 PM - 9:00 PM)", + "chinese": "ζ—Άι—΄οΌš18:00 - 21:00", + "order": 2 + }, + { + "section": "location", + "english": "Location: MITA Building 2F Pantry", + "chinese": "εœ°η‚ΉοΌšMITA倧厦2ζ₯ΌθŒΆζ°΄ι—΄", + "order": 3 + }, + { + "section": "organizer", + "english": "Organizer: Jessi Pan (jessi.pan@cn.mcd.com)", + "chinese": "η»„η»‡θ€…οΌšJessi Pan (jessi.pan@cn.mcd.com)", + "order": 4 + } +] +``` + +**Display Pattern**: +```html +

{english}

+

{chinese}

+``` + +--- + +## Relationships + +``` +Event (1) + β”œβ”€β”€ has timezone (1) β†’ Countdown + └── has theme (1) β†’ VisualTheme + +Countdown (1) + └── uses targetDateTime from Event + +VisualTheme (1) + └── styles all Content + +Content (many) + └── derived from Event +``` + +## HTML Representation + +The data model maps to HTML structure as follows: + +```html +
+ +
+ 
[McDonald's ASCII Logo]
+ 
[McDonald's ASCII Logo Simplified]
+

i'm lovin' IT_

+
+ + +
+
+ 0d + 0h + 0m + 0s +
+
+ + +
+

Date: {Event.date}

+

ζ—₯期：{Event.date}

+ +
+ + +
+

Activities:

+

活动：

+
    +
  • {activity}
    • +
  • {activity_zh}
    • +
+
+ + +
+ 
{decoration}
+
+
+``` + +## JavaScript Data Structure + +```javascript +const eventData = { + event: { + title: "2025 MITA Halloween", + date: "2025-10-31", + startTime: "18:00", + endTime: "21:00", + timezone: "GMT+8", + location: "MITA Building 2F Pantry", + organizer: { + name: "Jessi Pan", + email: "jessi.pan@cn.mcd.com" + }, + activities: ["Cosplay", "Bug Debugging Games", "Lucky Draw"], + notes: ["Costumes encouraged", "Food and drinks provided"] + }, + + countdown: { + targetDateTime: new Date('2025-10-31T10:00:00Z'), // GMT+8 = UTC+8 + eventEnd: new Date('2025-10-31T13:00:00Z'), + status: 'before', + timeRemaining: null + }, + + theme: { + backgroundColor: "#000000", + primaryColor: "#00FF00", + accentColor: "#FFBF00", + fontFamily: '"Courier New", Monaco, Consolas, Menlo, monospace' + } +}; +``` + +## Validation Contract + +All data must conform to the schema defined in `/contracts/page-content.schema.json`. + +See: [page-content.schema.json](./contracts/page-content.schema.json) + +## Notes + +- This is a static page, so data is hardcoded in HTML/JS +- No database or API calls required +- Data updates only via code changes +- Countdown is the only dynamic data (calculated client-side) + +## Next Steps + +- Create contracts/page-content.schema.json (JSON Schema validation) +- Create quickstart.md (testing checklist) +- Update CLAUDE.md (agent context) diff --git a/specs/001-mcdonald-s-it/plan.md b/specs/001-mcdonald-s-it/plan.md new file mode 100644 index 0000000..e68c97b --- /dev/null +++ b/specs/001-mcdonald-s-it/plan.md @@ -0,0 +1,528 @@ +# Implementation Plan: McDonald's IT Halloween Event Page + +**Branch**: `001-mcdonald-s-it` | **Date**: 2025-10-04 | **Spec**: [spec.md](./spec.md) +**Input**: Feature specification from `/specs/001-mcdonald-s-it/spec.md` + +## Execution Flow (/plan command scope) +``` +1. Load feature spec from Input path βœ… + β†’ Feature spec loaded successfully +2. Fill Technical Context βœ… + β†’ Project Type: Single-file web page (static HTML) + β†’ Structure Decision: Single HTML file with inline CSS/JS +3. Fill Constitution Check section βœ… + β†’ Based on .claude/constitution.md +4. Evaluate Constitution Check section βœ… + β†’ No violations - simple, focused implementation + β†’ Update Progress Tracking: Initial Constitution Check βœ… +5. Execute Phase 0 β†’ research.md βœ… + β†’ No NEEDS CLARIFICATION in tech context +6. Execute Phase 1 β†’ data-model.md, contracts/, quickstart.md, CLAUDE.md βœ… +7. Re-evaluate Constitution Check section βœ… + β†’ No new violations after design + β†’ Update Progress Tracking: Post-Design Constitution Check βœ… +8. Plan Phase 2 β†’ Describe task generation approach βœ… +9. STOP - Ready for /tasks command βœ… +``` + +**IMPORTANT**: The /plan command STOPS at step 9. Phases 2-4 are executed by other commands: +- Phase 2: /tasks command creates tasks.md +- Phase 3-4: Implementation execution (manual or via tools) + +## Summary + +Create a minimalist, geek-style Halloween event announcement webpage for McDonald's China IT team (MITA). The page features ASCII art, a countdown timer to the Oct 31 2025 event, and bilingual (English/Chinese) content. Design emphasizes terminal aesthetics with black background, monospace fonts, and no decorative effects. Must be responsive, self-contained (single HTML file), and load under 1 second. + +**Technical Approach**: Single self-contained HTML5 file with inline CSS for styling and minimal JavaScript for countdown timer. Pure static page requiring no server-side processing or external dependencies. Responsive design using CSS media queries for cross-device compatibility. + +## Technical Context + +**Language/Version**: HTML5, CSS3, JavaScript ES6+ +**Primary Dependencies**: None (self-contained single file) +**Storage**: N/A (static page, no data persistence) +**Testing**: Manual browser testing (Chrome, Firefox, Safari, Edge), HTML5 validation, WCAG 2.1 AA compliance check +**Target Platform**: Modern web browsers (latest 2 versions), responsive design for desktop (1024px+), tablet (768-1023px), mobile (320-767px) +**Project Type**: Single-file static webpage +**Performance Goals**: Load time < 1 second, file size < 50KB, 60fps animations +**Constraints**: + - Single self-contained HTML file only + - No external dependencies (CSS/JS/images/fonts) + - No frameworks or libraries + - WCAG 2.1 AA compliance required + - Countdown must use GMT+8 timezone + - ASCII art must be legible on all screen sizes +**Scale/Scope**: Single page, ~300 target users, static content only + +**User Provided Context**: $ARGUMENTS + +## Constitution Check +*GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.* + +Based on `.claude/constitution.md`: + +### User-Centric Service βœ… +- Requirements clearly defined in spec.md +- User stories and acceptance criteria documented +- Focus on MITA IT team needs (programmer aesthetic, bilingual content) + +### Professional Excellence βœ… +- Following web standards (HTML5, CSS3, WCAG 2.1 AA) +- Single-file architecture aligns with deployment simplicity requirement +- No over-engineering - minimal technical stack appropriate for static page + +### Clear Communication βœ… +- Spec provides comprehensive requirements (35 functional requirements) +- Technical decisions documented with rationale +- Edge cases identified and defaults specified + +### Collaborative Mindset βœ… +- Respects existing CLAUDE.md workflow +- Builds on established project structure (specs/ directory) +- Follows Spec-Kit documentation standards + +### Continuous Improvement βœ… +- Identified 2 edge cases for future consideration +- Design allows for easy updates (single file) +- Performance metrics defined for validation + +### Spec-Kit Compliance βœ… +- Following Spec-Kit framework +- Specification in `specs/001-mcdonald-s-it/spec.md` +- Product requirements clearly documented +- Implementation plan follows structured format + +**Constitution Status**: βœ… PASS - No violations detected + +## Project Structure + +### Documentation (this feature) +``` +specs/001-mcdonald-s-it/ +β”œβ”€β”€ spec.md # Feature specification +β”œβ”€β”€ plan.md # This file (/plan command output) +β”œβ”€β”€ research.md # Phase 0 output (/plan command) +β”œβ”€β”€ data-model.md # Phase 1 output (/plan command) +β”œβ”€β”€ quickstart.md # Phase 1 output (/plan command) +β”œβ”€β”€ contracts/ # Phase 1 output (/plan command) +β”‚ └── page-content.schema.json +└── tasks.md # Phase 2 output (/tasks command - NOT created by /plan) +``` + +### Source Code (repository root) +``` +test-project/ +β”œβ”€β”€ index.html # Main Halloween event page (self-contained) +β”œβ”€β”€ README.md # Project documentation +β”œβ”€β”€ CLAUDE.md # Agent workflow and project guidance +└── specs/ # Specification documents + └── 001-mcdonald-s-it/ # This feature +``` + +**Structure Decision**: Single-file static webpage architecture selected because: +1. No backend/API required (static content only) +2. No data persistence needed +3. Simplifies deployment (single file to host) +4. Meets performance requirement (< 1 second load, < 50KB) +5. Aligns with minimalist design philosophy +6. Easy to maintain and update + +## Phase 0: Outline & Research + +### Research Tasks Completed + +**1. HTML5 Semantic Markup Best Practices** +- **Decision**: Use semantic HTML5 elements (`
`, `
`, `
`, `