Files
fish_monitor/Zero2YoloYard-main/templates/layout.html
T
2025-12-25 17:41:18 +08:00

75 lines
3.5 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>FTC-ML Local</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/modern.css') }}">
{% block head %}{% endblock %}
</head>
<body class="d-flex flex-column min-vh-100">
<nav class="navbar navbar-expand-lg navbar-light bg-transparent pt-3 pb-3 px-4">
<a class="navbar-brand d-flex align-items-center" href="/">
<div class="d-flex align-items-center justify-content-center bg-primary text-white rounded-circle mr-2 shadow-sm" style="width: 32px; height: 32px;">
<i class="bi bi-box-seam" style="font-size: 0.9rem;"></i>
</div>
<span class="font-weight-bold" style="font-size: 1.1rem; letter-spacing: -0.01em;">Zero 2 YOLO Yard</span>
</a>
<button class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav mr-auto"></ul>
<div class="d-flex align-items-center">
<span class="small mr-3 font-weight-500 text-muted d-none d-md-block" style="opacity: 0.7;">
Produced By BlueDarkUP -- Based On FIRST ML Toolchain --
</span>
<button class="theme-toggle-btn" id="theme-toggle-btn" title="Toggle Theme">
<i class="bi bi-moon-fill" id="theme-toggle-icon"></i>
</button>
</div>
</div>
</nav>
<main role="main" class="flex-grow-1">
{% block content %}{% endblock %}
</main>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
(function() {
const themeToggleBtn = document.getElementById('theme-toggle-btn');
const themeToggleIcon = document.getElementById('theme-toggle-icon');
const body = document.body;
const applyTheme = (isDark) => {
if (isDark) {
body.classList.add('dark-mode');
themeToggleIcon.className = 'bi bi-sun-fill';
} else {
body.classList.remove('dark-mode');
themeToggleIcon.className = 'bi bi-moon-fill';
}
};
const savedTheme = localStorage.getItem('theme');
const systemPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) applyTheme(true);
else applyTheme(false);
themeToggleBtn.addEventListener('click', () => {
const isDark = body.classList.contains('dark-mode');
applyTheme(!isDark);
localStorage.setItem('theme', !isDark ? 'dark' : 'light');
});
})();
</script>
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
{% block scripts %}{% endblock %}
</body>
</html>