2024-12-30 18:57:07 +11:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2024-12-30 19:23:14 +11:00
|
|
|
<title>Humour | Nathan.Woodburn/</title>
|
2024-12-30 18:57:07 +11:00
|
|
|
<link rel="icon" href="/assets/img/favicon.png" type="image/png">
|
|
|
|
|
<link rel="stylesheet" href="/assets/css/index.css">
|
2024-12-30 19:23:14 +11:00
|
|
|
<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>
|
2024-12-30 18:57:07 +11:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
2024-12-30 19:23:14 +11:00
|
|
|
<button id="darkModeToggle" onclick="toggleDarkMode()">
|
|
|
|
|
<i id="darkModeIcon" class="fas fa-moon"></i>
|
|
|
|
|
</button>
|
|
|
|
|
|
2024-12-30 18:57:07 +11:00
|
|
|
<div class="spacer"></div>
|
|
|
|
|
<div class="centre">
|
2024-12-30 19:23:14 +11:00
|
|
|
<h1>.Humour</h1>
|
|
|
|
|
<p id="joke"></p>
|
|
|
|
|
<button onclick="fetchJoke()">Get a joke</button>
|
|
|
|
|
<script>
|
|
|
|
|
fetchJoke();
|
|
|
|
|
</script>
|
2024-12-30 18:57:07 +11:00
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
|
2024-12-30 19:23:14 +11:00
|
|
|
</html>
|
