feat: Add initial humour webpage

2024-12-30 19:23:14 +11:00
parent 903881dd9e
commit 4c4814006a
3 changed files with 161 additions and 15 deletions
--- a/templates/index.html
+++ b/templates/index.html
@@ -4,16 +4,65 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Nathan.Woodburn/</title>
+    <title>Humour | Nathan.Woodburn/</title>
    <link rel="icon" href="/assets/img/favicon.png" type="image/png">
    <link rel="stylesheet" href="/assets/css/index.css">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
+
+    <script>
+        function toggleDarkMode() {
+            const body = document.body;
+            const icon = document.getElementById('darkModeIcon');
+            body.classList.toggle('light-mode');
+            const isLightMode = body.classList.contains('light-mode');
+
+            // Toggle icons
+            icon.classList.toggle('fa-moon', !isLightMode);
+            icon.classList.toggle('fa-sun', isLightMode);
+
+            // Save mode to localStorage
+            localStorage.setItem('theme', isLightMode ? 'light' : 'dark');
+        }
+
+        window.onload = () => {
+            const savedTheme = localStorage.getItem('theme');
+            const body = document.body;
+            const icon = document.getElementById('darkModeIcon');
+
+            // Apply saved theme or default to dark mode
+            if (savedTheme === 'light') {
+                body.classList.add('light-mode');
+                icon.classList.add('fa-sun');
+                icon.classList.remove('fa-moon');
+            } else {
+                body.classList.remove('light-mode');
+                icon.classList.add('fa-moon');
+                icon.classList.remove('fa-sun');
+            }
+        };
+
+        async function fetchJoke() {
+            const response = await fetch('/api/joke');
+            const data = await response.json();
+            document.getElementById('joke').innerText = data.joke;
+        }
+    </script>
 </head>

 <body>
+    <button id="darkModeToggle" onclick="toggleDarkMode()">
+        <i id="darkModeIcon" class="fas fa-moon"></i>
+    </button>
+    
    <div class="spacer"></div>
    <div class="centre">
-        <h1>Nathan.Woodburn/</h1>
+        <h1>.Humour</h1>
+        <p id="joke"></p>
+        <button onclick="fetchJoke()">Get a joke</button>
+        <script>
+            fetchJoke();
+        </script>
    </div>
 </body>

-</html>
+</html>