72 lines
3.0 KiB
PHP
72 lines
3.0 KiB
PHP
<footer class="site-footer">
|
|
<div class="footer-meta">
|
|
<p>Cook or get cooked.</p>
|
|
<a class="contact-link" href="mailto:contact@flixcooks.at">Contact me</a>
|
|
<small>© <?php echo date('Y'); ?> FlixCooks</small>
|
|
</div>
|
|
</footer>
|
|
|
|
<button id="backToTop" aria-label="Back to top">↑ Back to top</button>
|
|
|
|
<!-- Fixed dark/light toggle — always visible, scrolls with page -->
|
|
<button class="theme-toggle" data-theme-toggle aria-label="Switch to dark mode">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
|
|
</button>
|
|
|
|
<script>
|
|
// ── Back to top ───────────────────────────────────────────────────────────────
|
|
(function(){
|
|
const btn = document.getElementById('backToTop');
|
|
if (!btn) return;
|
|
const check = () => btn.classList.toggle('show', window.scrollY > 240);
|
|
window.addEventListener('scroll', check, { passive: true });
|
|
btn.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
|
|
check();
|
|
})();
|
|
|
|
// ── Dark / light mode toggle ─────────────────────────────────────────────────
|
|
(function(){
|
|
const r = document.documentElement;
|
|
let d = r.getAttribute('data-theme') || 'light';
|
|
r.setAttribute('data-theme', d);
|
|
|
|
const SUN = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>';
|
|
const MOON = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>';
|
|
|
|
function setIcon() {
|
|
const icon = d === 'dark' ? SUN : MOON;
|
|
const label = 'Switch to ' + (d === 'dark' ? 'light' : 'dark') + ' mode';
|
|
document.querySelectorAll('[data-theme-toggle]').forEach(t => {
|
|
t.innerHTML = icon;
|
|
t.setAttribute('aria-label', label);
|
|
});
|
|
}
|
|
|
|
// Use event delegation so it works regardless of DOM order
|
|
document.addEventListener('click', function(e) {
|
|
if (e.target.closest('[data-theme-toggle]')) {
|
|
d = d === 'dark' ? 'light' : 'dark';
|
|
r.setAttribute('data-theme', d);
|
|
setIcon();
|
|
}
|
|
});
|
|
|
|
// Toggle adapts visually when scrolled off landing section
|
|
(function(){
|
|
const landing = document.getElementById('landing');
|
|
const toggle = document.querySelector('.theme-toggle');
|
|
if (!toggle) return;
|
|
function check() {
|
|
const past = !landing || window.scrollY > (landing.offsetHeight - 80);
|
|
toggle.classList.toggle('on-site', past);
|
|
}
|
|
window.addEventListener('scroll', check, { passive: true });
|
|
check();
|
|
})();
|
|
|
|
setIcon();
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|