nathan/project-friction-design
1
0
Fork 0
Code Pull Requests Packages Projects Activity
Files
main
project-friction-design/copilot_instructions.md
Nathan a472255a94 first version
2026-04-30 19:44:31 -04:00

7.1 KiB
Raw Permalink Blame History

Project Friction - Digital Gulf War Exhibit

Copilot Development Instructions

PROJECT SCOPE & CONTEXT

Project Name: Project Friction - Canada's Role in the Gulf War Digital Exhibit Client: Canadian Research and Mapping Association (CRMA) / Veterans Affairs Canada Purpose: Interactive digital museum exhibit for online and touchscreen kiosk deployment Timeline: Phase 2 development (Feb-Jun 2026) - Content Creation & Frontend Development

Core Mission: Create a comprehensive, educational digital exhibit showcasing Canada's military contribution to the 1991 Gulf War through interactive maps, historical narratives, and multimedia content. The exhibit must serve both online users and museum visitors using touchscreen kiosks.

TECHNICAL REQUIREMENTS

Primary Technologies:

  • HTML5 for structure
  • CSS3 for styling (museum-quality visual design)
  • Vanilla JavaScript for interactivity
  • Leaflet.js for interactive mapping
  • No frameworks required - keep dependencies minimal for kiosk compatibility

Target Platforms:

  • Desktop browsers (museum kiosks)
  • Modern tablets and mobile devices
  • Must work offline after initial load

Performance Standards:

  • Load time under 3 seconds
  • Touch-friendly interface (minimum 44px touch targets)
  • WCAG 2.1 AA accessibility compliance
  • Responsive design for multiple screen sizes

FILE STRUCTURE TO CREATE

project-friction/
├── index.html                 # Main navigation hub
├── css/
│   ├── main.css              # Global styles and layout
│   ├── components.css        # Reusable UI components
│   ├── sections.css          # Section-specific styles
│   └── responsive.css        # Media queries and responsive design
├── js/
│   ├── app.js                # Main application logic
│   ├── navigation.js         # Section switching and breadcrumbs
│   ├── map-controller.js     # Map initialization and controls
│   ├── timeline.js           # Timeline animation and controls
│   ├── data-layers.js        # Map data and layer management
│   └── interactions.js       # UI interactions and animations
├── data/
│   ├── map-data.json         # Geographic data for all sections
│   ├── timeline-events.json  # Timeline event data
│   ├── articles.json         # Article content and metadata
│   └── media-gallery.json    # Image and media references
├── sections/
│   ├── context.html          # Historical Context section
│   ├── rcaf.html            # RCAF Desert Cats section
│   ├── rcn.html             # RCN Task Group section
│   ├── army.html            # Canadian Army section
│   └── legacy.html          # Post-War Legacy section
└── assets/
    ├── images/              # Historical photos and media
    ├── icons/               # UI icons and map markers
    └── fonts/               # Custom typography files

DEVELOPMENT APPROACH

Phase 1: Core Structure

  1. Create main HTML layout with sidebar navigation
  2. Implement CSS grid/flexbox layout system
  3. Build basic JavaScript navigation between sections
  4. Initialize Leaflet map with basic controls

Phase 2: Interactive Features

  1. Timeline control implementation
  2. Map layer switching system
  3. Interactive buttons for map filters
  4. Content loading and display system

Phase 3: Content Integration

  1. Load historical narrative content
  2. Implement map data layers
  3. Add media galleries and fact boxes
  4. Polish animations and transitions

SPECIFIC IMPLEMENTATION GUIDELINES

CSS Architecture:

  • Use CSS Custom Properties for theming
  • BEM methodology for class naming
  • Mobile-first responsive design
  • Print stylesheet for offline reading

JavaScript Patterns:

  • Module pattern for code organization
  • Event delegation for touch interactions
  • Async/await for data loading
  • Error handling for offline scenarios

Map Integration:

  • Leaflet.js with custom marker styles
  • GeoJSON data format for geographic features
  • Layer groups for different data types
  • Custom popup templates

Accessibility Requirements:

  • Semantic HTML structure
  • ARIA labels for interactive elements
  • Keyboard navigation support
  • Screen reader compatible content
  • High contrast mode support

CONTENT SPECIFICATIONS

Historical Context Section (already developed):

  • 2,500+ word narrative in 6 chapters
  • Interactive map buttons for key events
  • Timeline integration
  • Fact boxes and quote blocks
  • Document reference sections

Remaining Sections (to be developed):

  • RCAF: CF-18 operations, pilot stories, mission details
  • RCN: Naval operations, ship modifications, MIF operations
  • Army: Field hospital operations, security details, humanitarian missions
  • Legacy: Veteran health, commemorations, lessons learned

Map Data Requirements:

  • Force positions and movements
  • Event locations with timestamps
  • Base locations and infrastructure
  • Supply routes and operational areas
  • Political boundaries and geographic context

QUALITY STANDARDS

Content Quality:

  • Museum-grade historical accuracy
  • Canadian perspective throughout
  • Primary source citations
  • Appropriate reading level (Grade 8-10)

Visual Design:

  • Professional museum aesthetic
  • Consistent color coding by section
  • Clear typography hierarchy
  • Intuitive navigation patterns

User Experience:

  • Maximum 3-click depth to any content
  • Clear breadcrumb navigation
  • Immediate visual feedback on interactions
  • Graceful degradation for older devices

TESTING REQUIREMENTS

Device Testing:

  • Desktop browsers (Chrome, Firefox, Safari, Edge)
  • Tablet devices (iPad, Android tablets)
  • Touch screen kiosks (Windows-based museum hardware)

Content Validation:

  • Historical accuracy review by subject matter experts
  • Canadian military veteran feedback
  • Museum educator usability testing

DEPLOYMENT CONSIDERATIONS

Online Deployment:

  • Static site hosting (Netlify/Vercel compatible)
  • CDN integration for media assets
  • Progressive web app features

Kiosk Deployment:

  • Offline functionality
  • Reset mechanism for public use
  • Screensaver integration
  • Maintenance mode capabilities

IMPORTANT CONSTRAINTS

  1. Stick to defined scope: 5 thematic sections covering Canada's Gulf War role
  2. No feature creep: Request approval for any additions beyond specified content
  3. Museum standards: All content must meet professional exhibition quality
  4. Accessibility first: Design for all users, including those with disabilities
  5. Historical accuracy: No fictional elements or speculative content
  6. Canadian focus: Maintain Canadian perspective while showing international context

APPROVAL REQUIRED FOR:

  • Additional sections beyond the 5 defined areas
  • New interactive features not specified in requirements
  • Integration of external APIs or services
  • Significant changes to visual design approach
  • Addition of audio/video content beyond static images

This project represents a significant digital heritage initiative. Maintain focus on educational value, historical accuracy, and professional presentation standards throughout development.