stef_buwalda/ProjectIOT
1
0
Fork 0
mirror of https://github.com/StefBuwalda/ProjectIOT.git synced 2026-02-04 09:04:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

AT opmaak dashboard

Browse Source
This commit is contained in:
Anh-Thy04
2025-05-23 12:54:42 +02:00
parent 2f7a499c91
commit f77c3c523b
4 changed files with 202 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
application/dashboard/templates/base.html
View File

@@ -6,6 +6,57 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Admin Dashboard</title>
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js"></script>
<style>
body.dark-mode {
background-color: #181a1b !important;
color: #e0e0e0 !important;
}
.dark-mode .card,
.dark-mode .table {
background-color: #23272b !important;
color: #e0e0e0 !important;
}
.dark-mode .table thead,
.dark-mode .table tbody,
.dark-mode .table th,
.dark-mode .table td,
.dark-mode .table tr {
background-color: #23272b !important;
color: #e0e0e0 !important;
border-color: #444 !important;
}
.dark-mode .card-title,
.dark-mode .display-4,
.dark-mode h5 {
color: #e0e0e0 !important;
}
.dark-mode input {
background-color: #23272b !important;
color: #e0e0e0 !important;
border: 1px solid #444 !important;
}
.dark-mode .btn {
background-color: #444 !important;
color: #e0e0e0 !important;
border-color: #666 !important;
}
.dark-mode .btn:hover {
background-color: #222 !important;
color: #fff !important;
}
.dark-mode .logout-btn {
background-color: #212529 !important;
color: #fff !important;
border-color: #212529 !important;
}
.dark-mode .logout-btn:hover {
background-color: #353738 !important;
color: #fff !important;
}
</style>
</head>
<body>
<div class="container-fluid">
@@ -21,30 +72,40 @@
<a class="nav-link active text-white" href="/dash/dashboard">
Dashboard
</a>
<a class="nav-link active text-white" href="/dash/logs">
Logs
</a>
<a class="nav-link active text-white" href="/dash/add">
Add numberplate
</a>
</li>
</ul>
<div class="d-flex justify-content-center mt-3">
<a href="/login" class="btn btn-sm btn-dark" style="width: 200px;">Logout</a>
<a href="/auth/demo" class="btn btn-sm btn-dark logout-btn" style="width: 200px;">Logout</a>
<button id="darkModeToggle" class="btn btn-secondary btn-sm" style="position: fixed; top: 10px; right: 10px; z-index: 9999;">
Toggle Theme
</button>
</div>
</div>
</div>
<div class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="display-4 fw-bold" style="color: #313A4D;">Dashboard</h1>
</div>
{%block content%}
{% endblock %}
</div>
</div>
</div>
<script>
document.getElementById('darkModeToggle').onclick = function() {
document.body.classList.toggle('dark-mode');
if(document.body.classList.contains('dark-mode')) {
localStorage.setItem('darkMode', 'enabled');
} else {
localStorage.setItem('darkMode', 'disabled');
}
};
if(localStorage.getItem('darkMode') === 'enabled') {
document.body.classList.add('dark-mode');
}
</script>
</body>
</html>