121 lines
5.2 KiB
HTML
121 lines
5.2 KiB
HTML
{{define "page"}}<!doctype html>
|
|
<html lang="fo">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>zeitkort — FLÓ</title>
|
|
|
|
<script>
|
|
(function () {
|
|
var stored = localStorage.getItem('poc-theme');
|
|
var theme = stored || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'tokyo' : 'light');
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
})();
|
|
</script>
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/static/app.css">
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<a href="https://fló.fo" class="back-link">← FLÓ.FO</a>
|
|
<span class="brand">FLÓ <span class="brand-sep">/</span> <span class="brand-sub">ZEITKORT</span></span>
|
|
<nav class="nav-desktop">
|
|
<a href="/">[TIMER]</a>
|
|
<a hx-get="/settings" hx-target="#main" href="javascript:void(0)">[SETTINGS]</a>
|
|
<a hx-get="/about" hx-target="#main" href="javascript:void(0)">[ABOUT]</a>
|
|
</nav>
|
|
<button id="nav-hamburger" class="nav-hamburger" aria-label="Open menu">
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
</header>
|
|
|
|
<!-- Off-canvas mobile menu -->
|
|
<div id="nav-overlay" class="nav-overlay"></div>
|
|
<div id="nav-offcanvas" class="nav-offcanvas">
|
|
<div class="offcanvas-header">I
|
|
<span class="brand">FLÓ <span class="brand-sep">/</span> <span class="brand-sub">ZEITKORT</span></span>
|
|
<button id="nav-close" class="nav-close" aria-label="Close menu">✕</button>
|
|
</div>
|
|
<div class="offcanvas-links">
|
|
<a href="/">[TIMER]</a>
|
|
<a hx-get="/settings" hx-target="#main" href="javascript:void(0)">[SETTINGS]</a>
|
|
<a hx-get="/about" hx-target="#main" href="javascript:void(0)">[ABOUT]</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="reset-banner" role="status" aria-live="polite">
|
|
<span class="reset-label">POC reset in</span>
|
|
<span id="reset-countdown" class="reset-countdown" data-reset-at="{{rfc3339 .ResetAt}}">--:--</span>
|
|
<span class="reset-note">All in-memory data clears every {{.ResetIntervalMinutes}} minutes.</span>
|
|
</div>
|
|
|
|
<main id="main">
|
|
{{template "main" .}}
|
|
</main>
|
|
|
|
<footer>
|
|
<span>© <script>document.write(new Date().getFullYear())</script> FLÓ.FO | ØLL RÆTTINDI TILSKILAÐ</span>
|
|
<a href="https://www.linkedin.com/in/bartal-l%C3%A6arsson-63793895/" target="_blank" rel="noopener" class="footer-icon" aria-label="LinkedIn">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
|
|
</a>
|
|
</footer>
|
|
|
|
<button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme"></button>
|
|
|
|
<script src="/static/htmx.min.js"></script>
|
|
<script src="/static/timer.js"></script>
|
|
<script>
|
|
(function () {
|
|
function currentSystemTheme() {
|
|
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'tokyo' : 'light';
|
|
}
|
|
var btn = document.getElementById('theme-toggle');
|
|
if (btn) {
|
|
btn.addEventListener('click', function () {
|
|
var current = document.documentElement.getAttribute('data-theme') || 'light';
|
|
var next = current === 'light' ? 'tokyo' : 'light';
|
|
document.documentElement.setAttribute('data-theme', next);
|
|
localStorage.setItem('poc-theme', next);
|
|
});
|
|
}
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
|
|
if (!localStorage.getItem('poc-theme')) {
|
|
document.documentElement.setAttribute('data-theme', currentSystemTheme());
|
|
}
|
|
});
|
|
})();
|
|
|
|
(function () {
|
|
var overlay = document.getElementById('nav-overlay');
|
|
var panel = document.getElementById('nav-offcanvas');
|
|
var openBtn = document.getElementById('nav-hamburger');
|
|
var closeBtn = document.getElementById('nav-close');
|
|
function open() { panel.classList.add('open'); overlay.classList.add('open'); }
|
|
function close() { panel.classList.remove('open'); overlay.classList.remove('open'); }
|
|
if (openBtn) openBtn.addEventListener('click', open);
|
|
if (closeBtn) closeBtn.addEventListener('click', close);
|
|
if (overlay) overlay.addEventListener('click', close);
|
|
panel.querySelectorAll('a').forEach(function(a) { a.addEventListener('click', close); });
|
|
|
|
// Mark active link on click
|
|
document.querySelectorAll('nav a, .offcanvas-links a').forEach(function(a) {
|
|
a.addEventListener('click', function() {
|
|
document.querySelectorAll('nav a, .offcanvas-links a').forEach(function(el) {
|
|
el.classList.remove('active');
|
|
});
|
|
var href = a.getAttribute('hx-get') || a.getAttribute('href');
|
|
document.querySelectorAll('nav a, .offcanvas-links a').forEach(function(el) {
|
|
var elHref = el.getAttribute('hx-get') || el.getAttribute('href');
|
|
if (elHref === href) el.classList.add('active');
|
|
});
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>{{end}}
|