cpolis/web/templates/index.html

86 lines
3.3 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Orient Editor</title>
2024-09-08 11:00:12 +02:00
2024-04-01 14:22:59 +02:00
<link href="/web/static/css/style.css" rel="stylesheet">
2024-08-08 21:09:38 +02:00
<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
</head>
2024-09-09 22:03:31 +02:00
<body
class="bg-slate-50 dark:bg-slate-950 container flex flex-col justify-between max-w-screen-lg min-h-screen mx-auto text-slate-900 dark:text-slate-100">
2024-04-01 14:22:59 +02:00
<header class="my-8">
<h1 class="font-bold text-4xl text-center">Orient Editor</h1>
2024-09-08 11:00:12 +02:00
<div class="ml-4">
<label class="cursor-pointer flex items-center relative" for="theme-toggle">
<div class="bg-slate-200 dark:bg-slate-800 block h-6 w-12 rounded-full"></div>
<div
class="absolute bg-slate-800 dark:bg-slate-50 dot left-1 top-1 h-4 w-4 rounded-full transform transition">
</div>
<span class="ml-2">Dunkel</span>
</label>
<input type="checkbox" id="theme-toggle" class="sr-only">
</div>
2024-03-17 15:29:12 +01:00
</header>
<main class="mx-4">
<div class="hidden bg-slate-950 dark:bg-slate-50 fixed font-bold p-4 right-8 rounded-lg shadow-lg text-slate-100 dark:text-slate-900 top-8 z-50"
id="notification">
</div>
2024-03-17 15:29:12 +01:00
<div id="page-content">
{{template "page-content" .}}
</div>
</main>
2024-09-08 11:00:12 +02:00
<footer class="text-center text-gray-500 my-8">
2024-09-28 12:19:18 +02:00
<p>&copy; 2024 Jason Streifling. Alle Rechte vorbehalten.</p>
2024-10-27 13:58:19 +01:00
<p>{{.Version}} - <strong>Alpha: Drastische Änderungen und Fehler vorbehalten.</strong></p>
2024-03-17 15:29:12 +01:00
</footer>
2024-10-28 18:27:24 +01:00
<script src="https://unpkg.com/htmx.org@2.0.3"></script>
2024-08-08 21:09:38 +02:00
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
2024-09-08 11:00:12 +02:00
<script>
document.addEventListener('DOMContentLoaded', () => {
const toggleSwitch = document.getElementById('theme-toggle');
const dot = document.querySelector('.dot');
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark')
toggleSwitch.checked = true;
dot.classList.add('translate-x-6');
} else {
document.documentElement.classList.remove('dark')
}
toggleSwitch.addEventListener('change', () => {
if (toggleSwitch.checked) {
document.documentElement.classList.add('dark');
localStorage.theme = 'dark';
dot.classList.add('translate-x-6');
} else {
document.documentElement.classList.remove('dark');
localStorage.theme = 'light';
dot.classList.remove('translate-x-6');
}
});
});
</script>
<script>
htmx.on('htmx:responseError', function (event) {
var notification = document.getElementById('notification');
notification.innerText = event.detail.xhr.responseText;
notification.classList.remove('hidden');
setTimeout(function () {
notification.classList.add('hidden');
}, 5000);
});
</script>
</body>
</html>