forked from jason/cpolis
72 lines
2.7 KiB
HTML
72 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Orient Editor</title>
|
|
|
|
<link href="/web/static/css/style.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
|
|
</head>
|
|
|
|
<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">
|
|
<header class="my-8">
|
|
<h1 class="font-bold text-4xl text-center">Orient Editor</h1>
|
|
|
|
<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>
|
|
</header>
|
|
|
|
<main class="mx-4">
|
|
<div id="page-content">
|
|
{{template "page-content" .}}
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="text-center text-gray-500 my-8">
|
|
<p>© 2024 Jason Streifling. Alle Rechte vorbehalten.</p>
|
|
<p>v0.11.0 - <strong>Alpha: Änderungen und Fehler möglich.</strong></p>
|
|
</footer>
|
|
|
|
<script src="https://unpkg.com/htmx.org@2.0.2"></script>
|
|
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
|
|
<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>
|
|
</body>
|
|
|
|
</html>
|