112 lines
4.2 KiB
HTML
112 lines
4.2 KiB
HTML
<!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>
|
||
• <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> |