200 lines
7.1 KiB
Markdown
200 lines
7.1 KiB
Markdown
# 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. |