|
3 | 3 | <head> |
4 | 4 | <meta charset="UTF-8" /> |
5 | 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
6 | | - <title>Dynamic Sidebar Page</title> |
7 | | - <link rel="stylesheet" href="/assets/style.css" /> |
| 6 | + <title>{{ page.title }}</title> |
| 7 | + <link rel="stylesheet" href="{{ "/assets/style.css" | relative_url }}" /> |
8 | 8 | <script> |
9 | | - // Sidebar Toggle Function |
10 | 9 | function toggleSidebar() { |
11 | 10 | const sidebar = document.getElementById("sidebar"); |
12 | 11 | sidebar.classList.toggle("hidden"); |
13 | 12 | } |
14 | 13 |
|
15 | | - // Dark Mode Toggle Function |
16 | 14 | const toggleDarkMode = () => { |
17 | 15 | document.body.classList.toggle("dark-mode"); |
18 | 16 | localStorage.setItem("dark-mode", document.body.classList.contains("dark-mode")); |
19 | 17 | }; |
20 | 18 |
|
21 | | - // Handle Sidebar Visibility Based on Screen Size |
22 | 19 | function handleSidebarVisibility() { |
23 | 20 | const sidebar = document.getElementById("sidebar"); |
24 | 21 | if (window.matchMedia("(max-width: 768px)").matches) { |
|
28 | 25 | } |
29 | 26 | } |
30 | 27 |
|
31 | | - // Update Time Display |
32 | 28 | function updateTime() { |
33 | 29 | const now = new Date(); |
34 | 30 | let hours = now.getHours(); |
35 | 31 | const minutes = now.getMinutes().toString().padStart(2, "0"); |
36 | 32 | const seconds = now.getSeconds().toString().padStart(2, "0"); |
37 | 33 | const ampm = hours >= 12 ? "PM" : "AM"; |
38 | | - hours = hours % 12 || 12; // Convert to 12-hour format |
| 34 | + hours = hours % 12 || 12; |
39 | 35 | const timeString = `${hours}:${minutes}:${seconds} ${ampm}`; |
40 | 36 |
|
41 | 37 | const offset = now.getTimezoneOffset(); |
|
48 | 44 | document.getElementById("time-display").textContent = fullTimeString; |
49 | 45 | } |
50 | 46 |
|
51 | | - // Initialize on Load |
52 | 47 | window.onload = () => { |
53 | 48 | handleSidebarVisibility(); |
54 | 49 | if (localStorage.getItem("dark-mode") === "true") { |
|
61 | 56 | if (!sidebar.classList.contains("hidden")) { |
62 | 57 | sidebar.classList.add("hidden"); |
63 | 58 | } |
64 | | - }, 10000); // 10 seconds |
| 59 | + }, 10000); |
65 | 60 | }; |
66 | 61 |
|
67 | | - // Update on Resize |
68 | 62 | window.addEventListener("resize", handleSidebarVisibility); |
69 | 63 | </script> |
70 | 64 | </head> |
71 | 65 | <body> |
72 | 66 | <div class="wrapper"> |
73 | 67 | <div id="sidebar" class="sidebar"> |
74 | | - <a href="#">Home</a> |
75 | | - <a href="#">About</a> |
76 | | - <a href="#">Services</a> |
77 | | - <a href="#">Contact</a> |
| 68 | + {% include nav.html %} |
78 | 69 | </div> |
79 | 70 | <div class="content"> |
80 | 71 | <div id="time-display"></div> |
81 | 72 | <button class="toggle-btn" onclick="toggleSidebar()">☰</button> |
82 | | - <button class="toggle-btn" id="dark-mode-toggle" onclick="toggleDarkMode()">Toggle Dark Mode</button> |
83 | | - <h1>Welcome</h1> |
84 | | - <p>This is a sample page with a dynamic sidebar and time display.</p> |
| 73 | + <button class="toggle-btn" id="dark-mode-toggle" onclick="toggleDarkMode()">🌓</button> |
| 74 | + <div class="fade-in"> |
| 75 | + {{ content }} |
| 76 | + </div> |
85 | 77 | </div> |
86 | 78 | </div> |
87 | 79 | </body> |
|
0 commit comments