126 lines
6.2 KiB
HTML
126 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}Recipe Database{% endblock %}</title>
|
|
<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=DynaPuff:wght@400..700&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
|
|
<script>
|
|
// Immediately set the theme before the page renders
|
|
(function() {
|
|
const savedTheme = localStorage.getItem('theme');
|
|
if (savedTheme) {
|
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
|
} else {
|
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
const theme = prefersDark ? 'dark' : 'light';
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
localStorage.setItem('theme', theme);
|
|
}
|
|
})();
|
|
</script>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
|
|
<script src="{{ url_for('static', filename='js/htmx.min.js') }}"></script>
|
|
</head>
|
|
<body>
|
|
<div class="layout">
|
|
<nav class="sidebar">
|
|
<div class="sidebar-content">
|
|
<div class="brand">
|
|
<a href="{{ url_for('index') }}">🧈 Butter Garden</a>
|
|
</div>
|
|
<div class="nav-links">
|
|
<a class="nav-link" href="{{ url_for('index') }}">Home</a>
|
|
{% if current_user.is_authenticated %}
|
|
{% if current_user.is_admin or current_user.can_add_recipes %}
|
|
<a class="nav-link" href="{{ url_for('admin') }}">{% if current_user.is_admin %}Recipe Management{% else %}My Recipes{% endif %}</a>
|
|
{% endif %}
|
|
<a class="nav-link" href="{{ url_for('logout') }}">Logout</a>
|
|
{% else %}
|
|
<a class="nav-link" href="{{ url_for('login') }}">Login</a>
|
|
{% endif %}
|
|
<a class="nav-link" href="https://github.com/HardwarePunk/ButterGarden" target="_blank">GitHub 🔗</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="main-content">
|
|
{% with messages = get_flashed_messages() %}
|
|
{% if messages %}
|
|
{% for message in messages %}
|
|
<div class="alert alert-info">
|
|
{{ message }}
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
</div>
|
|
|
|
<button class="theme-toggle" aria-label="Toggle dark mode">
|
|
<svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"/>
|
|
</svg>
|
|
<svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="display: none;">
|
|
<path d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<script>
|
|
// Theme toggle functionality
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const themeToggle = document.querySelector('.theme-toggle');
|
|
const sunIcon = document.querySelector('.sun-icon');
|
|
const moonIcon = document.querySelector('.moon-icon');
|
|
const html = document.documentElement;
|
|
|
|
// Check for saved theme preference
|
|
const savedTheme = localStorage.getItem('theme') || 'light';
|
|
html.setAttribute('data-theme', savedTheme);
|
|
updateIcons(savedTheme);
|
|
|
|
themeToggle.addEventListener('click', function() {
|
|
const currentTheme = html.getAttribute('data-theme');
|
|
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
|
|
|
|
html.setAttribute('data-theme', newTheme);
|
|
localStorage.setItem('theme', newTheme);
|
|
updateIcons(newTheme);
|
|
});
|
|
|
|
function updateIcons(theme) {
|
|
if (theme === 'dark') {
|
|
sunIcon.style.display = 'none';
|
|
moonIcon.style.display = 'block';
|
|
} else {
|
|
sunIcon.style.display = 'block';
|
|
moonIcon.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
// Check system preference on load
|
|
if (!localStorage.getItem('theme')) {
|
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
const theme = prefersDark ? 'dark' : 'light';
|
|
html.setAttribute('data-theme', theme);
|
|
localStorage.setItem('theme', theme);
|
|
updateIcons(theme);
|
|
}
|
|
|
|
// Listen for system theme changes
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
|
if (!localStorage.getItem('theme')) {
|
|
const newTheme = e.matches ? 'dark' : 'light';
|
|
html.setAttribute('data-theme', newTheme);
|
|
updateIcons(newTheme);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|