1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta name="description" content="Single Page Application Example">
7 <title>SPA Example - Router Demo</title>
8 <link rel="stylesheet" href="style.css">
9</head>
10<body>
11 <!-- Header Navigation -->
12 <header class="header">
13 <nav class="navbar">
14 <div class="container">
15 <div class="brand">
16 <a href="#/" class="logo">SPA Demo</a>
17 </div>
18 <ul class="nav-menu" id="nav-menu">
19 <li class="nav-item">
20 <a href="#/" class="nav-link" data-link>Home</a>
21 </li>
22 <li class="nav-item">
23 <a href="#/about" class="nav-link" data-link>About</a>
24 </li>
25 <li class="nav-item">
26 <a href="#/contact" class="nav-link" data-link>Contact</a>
27 </li>
28 <li class="nav-item">
29 <a href="#/user/123" class="nav-link" data-link>User Profile</a>
30 </li>
31 </ul>
32 <div class="hamburger" id="hamburger">
33 <span class="bar"></span>
34 <span class="bar"></span>
35 <span class="bar"></span>
36 </div>
37 </div>
38 </nav>
39 </header>
40
41 <!-- Main Content Area -->
42 <main class="main">
43 <div class="container">
44 <!-- Router renders content here -->
45 <div id="app" class="app-content">
46 <!-- Dynamic content will be injected here -->
47 </div>
48 </div>
49 </main>
50
51 <!-- Footer -->
52 <footer class="footer">
53 <div class="container">
54 <p>© 2026 SPA Example. Educational project demonstrating hash-based routing.</p>
55 </div>
56 </footer>
57
58 <!-- Loading Indicator -->
59 <div class="loading-overlay" id="loading">
60 <div class="spinner"></div>
61 </div>
62
63 <!-- Scripts -->
64 <script type="module" src="router.js"></script>
65 <script type="module" src="app.js"></script>
66
67 <script>
68 // Mobile menu toggle
69 document.addEventListener('DOMContentLoaded', () => {
70 const hamburger = document.getElementById('hamburger');
71 const navMenu = document.getElementById('nav-menu');
72
73 hamburger.addEventListener('click', () => {
74 hamburger.classList.toggle('active');
75 navMenu.classList.toggle('active');
76 });
77
78 // Close mobile menu when a link is clicked
79 document.querySelectorAll('.nav-link').forEach(link => {
80 link.addEventListener('click', () => {
81 hamburger.classList.remove('active');
82 navMenu.classList.remove('active');
83 });
84 });
85 });
86 </script>
87</body>
88</html>