<!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 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> <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.13.0 - <strong>Alpha: Drastische Ă„nderungen und Fehler vorbehalten.</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> <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>