nathan/project-friction-design
1
0
Fork 0
Code Pull Requests Packages Projects Activity

first version

Browse Source
This commit is contained in:
Nathan
2026-04-30 19:44:31 -04:00
parent 676746c180
commit a472255a94
11 changed files with 3586 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
index.html Normal file
View File

@@ -0,0 +1,112 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project Friction - Canada's Gulf War Digital Exhibit</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="components.css">
<link rel="stylesheet" href="blocks.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
</head>
<body>
<div class="app-container">
<!-- Left Sidebar -->
<div class="sidebar" id="sidebar">
<!-- Toggle Button -->
<div class="sidebar-toggle" id="sidebarToggle">
<span id="toggle-icon">◀</span>
</div>
<!-- Header -->
<div class="sidebar-header">
<div class="logo-section">
<div class="logo">PF</div>
<div class="title">
<h1>Project Friction</h1>
<p>Canada's Role in the Gulf War 1990-1991</p>
</div>
</div>
</div>
<!-- Back Navigation -->
<div class="back-button hidden" id="backButton">
<span class="back-arrow">←</span>
<span class="back-text">Back to Main Navigation</span>
</div>
<!-- Main Navigation View -->
<div class="main-navigation" id="mainNavigation">
<div class="nav-welcome">
<h2>Welcome to Project Friction</h2>
<p>Explore Canada's military contribution to the Gulf War through interactive maps, detailed articles, and veteran stories. Select a thematic area below to begin.</p>
</div>
<div class="quick-stats" id="quickStats">
<!-- Stats loaded via JavaScript -->
</div>
<div class="nav-areas">
<div class="nav-areas-title">Explore Thematic Areas</div>
<div id="navigationCards">
<!-- Navigation cards loaded via JavaScript -->
</div>
</div>
</div>
<!-- Section Content Container -->
<div class="section-content-container hidden" id="sectionContainer">
<!-- Section content loaded dynamically -->
</div>
<!-- Footer -->
<div class="sidebar-footer">
© 2026 Canadian Research and Mapping Association<br>
<a href="#about">About</a> • <a href="#credits">Credits</a> • <a href="#contact">Contact</a>
&nbsp;•&nbsp; <a href="builder.html" style="color:#27ae60">⚙ Builder</a>
</div>
</div>
<!-- Map Container -->
<div class="map-container">
<div id="map"></div>
<!-- Map Controls -->
<div class="map-controls" id="mapControls">
<!-- Map control buttons -->
</div>
<!-- Map Info Panel -->
<div class="map-info-panel hidden" id="infoPanel">
<div class="map-info-title" id="infoTitle"></div>
<div class="map-info-content" id="infoContent"></div>
<button class="close-info" id="closeInfo">×</button>
</div>
<!-- Map Legend -->
<div class="map-legend" id="mapLegend">
<!-- Legend loaded via JavaScript -->
</div>
<!-- Timeline Control -->
<div class="timeline-container" id="timelineContainer">
<!-- Timeline loaded via JavaScript -->
</div>
</div>
</div>
<!-- Loading Screen -->
<div class="loading-screen" id="loadingScreen">
<div class="loading-content">
<div class="loading-spinner"></div>
<h3>Loading Project Friction</h3>
<p>Preparing the interactive exhibit...</p>
</div>
</div>
<!-- Scripts -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="js/block-renderer.js"></script>
<script src="app.js"></script>
</body>
</html>