ab36454574
- Complete Flask web application for digital signage management - Streaming channels for organized content delivery - User authentication with admin/user roles - Bootstrap UI with light/dark theme support - File upload and management system - Activity logging and monitoring - API endpoints for Info-Beamer device integration - Database models for channels, content, users, and activity logs
76 lines
2.7 KiB
HTML
76 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-bs-theme="light">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Info-Beamer Management</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
|
|
<style>
|
|
.theme-toggle {
|
|
border: none;
|
|
background: none;
|
|
color: var(--bs-navbar-color);
|
|
}
|
|
.card {
|
|
border: none;
|
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
|
}
|
|
.media-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
|
<div class="container">
|
|
<a class="navbar-brand fw-bold" href="/">
|
|
<i class="bi bi-display"></i> Info-Beamer
|
|
</a>
|
|
|
|
<div class="navbar-nav ms-auto">
|
|
<button class="theme-toggle me-3" onclick="toggleTheme()" title="Toggle theme">
|
|
<i class="bi bi-sun-fill" id="theme-icon"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="container mt-4">
|
|
<div id="content"></div>
|
|
</main>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
function toggleTheme() {
|
|
const html = document.documentElement;
|
|
const icon = document.getElementById('theme-icon');
|
|
const currentTheme = html.getAttribute('data-bs-theme');
|
|
|
|
if (currentTheme === 'light') {
|
|
html.setAttribute('data-bs-theme', 'dark');
|
|
icon.className = 'bi bi-moon-fill';
|
|
localStorage.setItem('theme', 'dark');
|
|
} else {
|
|
html.setAttribute('data-bs-theme', 'light');
|
|
icon.className = 'bi bi-sun-fill';
|
|
localStorage.setItem('theme', 'light');
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const savedTheme = localStorage.getItem('theme') || 'light';
|
|
const html = document.documentElement;
|
|
const icon = document.getElementById('theme-icon');
|
|
|
|
html.setAttribute('data-bs-theme', savedTheme);
|
|
if (savedTheme === 'dark') {
|
|
icon.className = 'bi bi-moon-fill';
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|