ske087
1115 lines
36 KiB
HTML
1115 lines
36 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 %}Server Monitoring Dashboard{% endblock %}</title>
|
|
<!-- Apply dark mode before render to avoid flash -->
|
|
<script>if(localStorage.getItem('darkMode')==='enabled'){document.documentElement.style.backgroundColor='#121212';}</script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
<style>
|
|
body {
|
|
background-color: #f8f9fa;
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Sidebar Styles */
|
|
.sidebar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 250px;
|
|
height: 100vh;
|
|
background: linear-gradient(135deg, #2c3e50, #3498db);
|
|
color: white;
|
|
padding: 20px 0;
|
|
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
|
|
overflow-y: auto;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.sidebar .logo {
|
|
text-align: center;
|
|
padding: 20px 15px 30px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.sidebar .logo h3 {
|
|
margin: 0;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
}
|
|
|
|
.sidebar .logo small {
|
|
color: #bdc3c7;
|
|
}
|
|
|
|
.sidebar .nav-menu {
|
|
list-style: none;
|
|
padding: 0 10px;
|
|
margin: 0;
|
|
}
|
|
|
|
/* ── Accordion group header ── */
|
|
.nav-group {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.nav-group-header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 11px 15px;
|
|
color: #ecf0f1;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
user-select: none;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.nav-group-header:hover {
|
|
background-color: rgba(255,255,255,0.1);
|
|
}
|
|
|
|
.nav-group-header.open {
|
|
background-color: rgba(255,255,255,0.12);
|
|
}
|
|
|
|
.nav-group-header i.group-icon {
|
|
width: 20px;
|
|
margin-right: 10px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.nav-group-header .group-label {
|
|
flex: 1;
|
|
}
|
|
|
|
.nav-group-header .chevron {
|
|
font-size: 11px;
|
|
transition: transform 0.25s ease;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.nav-group-header.open .chevron {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
/* Badge on group header (e.g. pending count) */
|
|
.nav-group-header .group-badge {
|
|
font-size: 11px;
|
|
padding: 2px 6px;
|
|
border-radius: 10px;
|
|
background: #e74c3c;
|
|
color: #fff;
|
|
margin-right: 6px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* ── Collapsible children ── */
|
|
.nav-group-children {
|
|
overflow: hidden;
|
|
max-height: 0;
|
|
transition: max-height 0.3s ease;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.nav-group-children.open {
|
|
max-height: 600px;
|
|
}
|
|
|
|
/* ── Child nav links ── */
|
|
.sidebar .nav-item {
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.sidebar .nav-link {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 9px 15px;
|
|
color: #dce6f0;
|
|
text-decoration: none;
|
|
border-radius: 7px;
|
|
transition: all 0.2s ease;
|
|
font-size: 13.5px;
|
|
}
|
|
|
|
.sidebar .nav-link:hover {
|
|
background-color: rgba(255,255,255,0.1);
|
|
color: #fff;
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
.sidebar .nav-link.active {
|
|
background-color: rgba(255,255,255,0.22);
|
|
color: #fff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sidebar .nav-link i {
|
|
width: 20px;
|
|
margin-right: 10px;
|
|
font-size: 14px;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
/* ── Admin standalone link ── */
|
|
.sidebar .nav-link.admin-link {
|
|
color: #ff8a80;
|
|
margin-top: 6px;
|
|
border-top: 1px solid rgba(255,255,255,0.1);
|
|
padding-top: 13px;
|
|
font-size: 13.5px;
|
|
}
|
|
.sidebar .nav-link.admin-link:hover {
|
|
background-color: rgba(220,53,69,0.25);
|
|
color: #ff6b6b;
|
|
transform: translateX(4px);
|
|
}
|
|
.sidebar .nav-link.admin-link.active {
|
|
background-color: rgba(220,53,69,0.35);
|
|
color: #ff6b6b;
|
|
}
|
|
|
|
/* Main Content Styles */
|
|
.main-content {
|
|
margin-left: 250px;
|
|
padding: 20px;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.content-header {
|
|
background-color: #fff;
|
|
padding: 20px 25px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.content-header h1 {
|
|
margin: 0;
|
|
color: #2c3e50;
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.content-header .breadcrumb {
|
|
background: none;
|
|
padding: 0;
|
|
margin: 8px 0 0 0;
|
|
}
|
|
|
|
.content-header .breadcrumb-item a {
|
|
color: #3498db;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.content-body {
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
padding: 25px;
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.sidebar {
|
|
transform: translateX(-100%);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.sidebar.mobile-open {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.main-content {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.mobile-menu-toggle {
|
|
display: block !important;
|
|
position: fixed;
|
|
top: 15px;
|
|
left: 15px;
|
|
z-index: 1001;
|
|
background: #3498db;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.mobile-menu-toggle {
|
|
display: none;
|
|
}
|
|
|
|
/* Additional Styles */
|
|
.table-container {
|
|
background-color: #ffffff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.card {
|
|
border: none;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #3498db;
|
|
border-color: #3498db;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #2980b9;
|
|
border-color: #2980b9;
|
|
}
|
|
|
|
/* Flash Messages */
|
|
.alert {
|
|
border-radius: 8px;
|
|
border: none;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* ── Dark Mode ── */
|
|
body.dark-mode {
|
|
background-color: #121212;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
/* Override Bootstrap 5 CSS variables globally in dark mode */
|
|
body.dark-mode {
|
|
--bs-body-bg: #121212;
|
|
--bs-body-color: #e0e0e0;
|
|
--bs-card-bg: #2a2a2a;
|
|
--bs-card-color: #e0e0e0;
|
|
--bs-card-border-color: #444444;
|
|
--bs-table-bg: transparent;
|
|
--bs-table-color: #e0e0e0;
|
|
--bs-table-border-color: #444444;
|
|
--bs-table-striped-bg: #232323;
|
|
--bs-table-striped-color: #e0e0e0;
|
|
--bs-table-hover-bg: #303030;
|
|
--bs-table-hover-color: #e0e0e0;
|
|
--bs-table-active-bg: #353535;
|
|
--bs-border-color: #444444;
|
|
--bs-border-color-translucent: rgba(255,255,255,0.1);
|
|
--bs-link-color: #64b5f6;
|
|
--bs-link-hover-color: #90caf9;
|
|
--bs-nav-tabs-link-active-bg: #2a2a2a;
|
|
--bs-nav-tabs-link-active-color: #e0e0e0;
|
|
--bs-nav-tabs-link-active-border-color: #444444 #444444 #2a2a2a;
|
|
--bs-nav-link-color: #aaaaaa;
|
|
--bs-nav-link-hover-color: #e0e0e0;
|
|
--bs-list-group-bg: #2a2a2a;
|
|
--bs-list-group-color: #e0e0e0;
|
|
--bs-list-group-border-color: #444444;
|
|
--bs-list-group-action-color: #e0e0e0;
|
|
--bs-list-group-action-hover-bg: #333333;
|
|
--bs-list-group-action-active-bg: #333333;
|
|
--bs-input-bg: #2a2a2a;
|
|
--bs-input-color: #e0e0e0;
|
|
--bs-input-border-color: #555555;
|
|
--bs-form-select-bg: #2a2a2a;
|
|
}
|
|
|
|
body.dark-mode .content-header {
|
|
background-color: #1e1e1e;
|
|
color: #e0e0e0;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.4);
|
|
}
|
|
|
|
body.dark-mode .content-header h1 {
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
body.dark-mode .content-header .breadcrumb-item a {
|
|
color: #64b5f6;
|
|
}
|
|
|
|
body.dark-mode .content-header .breadcrumb-item.active {
|
|
color: #aaaaaa;
|
|
}
|
|
|
|
body.dark-mode .content-body {
|
|
background-color: #1e1e1e;
|
|
color: #e0e0e0;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.4);
|
|
}
|
|
|
|
/* Cards */
|
|
body.dark-mode .card {
|
|
background-color: #2a2a2a !important;
|
|
color: #e0e0e0 !important;
|
|
border-color: #444444 !important;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.4);
|
|
}
|
|
|
|
body.dark-mode .card-body {
|
|
background-color: #2a2a2a;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
body.dark-mode .card-header {
|
|
background-color: #333333 !important;
|
|
border-bottom-color: #444444 !important;
|
|
color: #e0e0e0 !important;
|
|
}
|
|
|
|
body.dark-mode .card-footer {
|
|
background-color: #2e2e2e !important;
|
|
border-top-color: #444444 !important;
|
|
color: #cccccc;
|
|
}
|
|
|
|
/* Tables — override Bootstrap table-light/table-dark utility */
|
|
body.dark-mode .table {
|
|
--bs-table-bg: transparent;
|
|
--bs-table-color: #e0e0e0;
|
|
--bs-table-border-color: #444444;
|
|
--bs-table-hover-bg: #303030;
|
|
--bs-table-hover-color: #e0e0e0;
|
|
--bs-table-striped-bg: #232323;
|
|
--bs-table-striped-color: #e0e0e0;
|
|
color: #e0e0e0;
|
|
border-color: #444444;
|
|
}
|
|
|
|
body.dark-mode .table > :not(caption) > * > * {
|
|
background-color: transparent;
|
|
color: #e0e0e0;
|
|
border-bottom-color: #444444;
|
|
}
|
|
|
|
body.dark-mode .table thead,
|
|
body.dark-mode .table-light,
|
|
body.dark-mode .table thead.table-light,
|
|
body.dark-mode .table thead > tr > th {
|
|
--bs-table-bg: #1a1a1a;
|
|
--bs-table-color: #b0b0b0;
|
|
--bs-table-border-color: #444444;
|
|
background-color: #1a1a1a !important;
|
|
color: #b0b0b0 !important;
|
|
border-color: #444444 !important;
|
|
}
|
|
|
|
body.dark-mode .table-hover > tbody > tr:hover > * {
|
|
background-color: #303030 !important;
|
|
color: #e0e0e0 !important;
|
|
}
|
|
|
|
body.dark-mode .table-container {
|
|
background-color: #1e1e1e;
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.4);
|
|
}
|
|
|
|
/* List groups */
|
|
body.dark-mode .list-group-item {
|
|
background-color: #2a2a2a !important;
|
|
color: #e0e0e0 !important;
|
|
border-color: #444444 !important;
|
|
}
|
|
|
|
body.dark-mode .list-group-item:hover {
|
|
background-color: #333333 !important;
|
|
}
|
|
|
|
/* Nav tabs */
|
|
body.dark-mode .nav-tabs {
|
|
border-bottom-color: #444444;
|
|
}
|
|
|
|
body.dark-mode .nav-tabs .nav-link {
|
|
color: #aaaaaa;
|
|
border-color: transparent;
|
|
}
|
|
|
|
body.dark-mode .nav-tabs .nav-link:hover {
|
|
color: #e0e0e0;
|
|
border-color: #555555 #555555 transparent;
|
|
}
|
|
|
|
body.dark-mode .nav-tabs .nav-link.active {
|
|
background-color: #2a2a2a !important;
|
|
color: #e0e0e0 !important;
|
|
border-color: #444444 #444444 #2a2a2a !important;
|
|
}
|
|
|
|
/* Nav pills */
|
|
body.dark-mode .nav-pills .nav-link {
|
|
color: #aaaaaa;
|
|
}
|
|
|
|
body.dark-mode .nav-pills .nav-link.active {
|
|
background-color: #3498db;
|
|
color: #fff;
|
|
}
|
|
|
|
/* Forms */
|
|
body.dark-mode .form-control,
|
|
body.dark-mode .form-select {
|
|
background-color: #2a2a2a !important;
|
|
border-color: #555555 !important;
|
|
color: #e0e0e0 !important;
|
|
}
|
|
|
|
body.dark-mode .form-control:focus,
|
|
body.dark-mode .form-select:focus {
|
|
background-color: #333333 !important;
|
|
border-color: #64b5f6 !important;
|
|
color: #e0e0e0 !important;
|
|
box-shadow: 0 0 0 0.2rem rgba(100,181,246,0.25);
|
|
}
|
|
|
|
body.dark-mode .form-control::placeholder {
|
|
color: #777777;
|
|
}
|
|
|
|
/* File input — native "Choose file" button */
|
|
body.dark-mode input[type="file"].form-control::file-selector-button {
|
|
background-color: #444444;
|
|
color: #e0e0e0;
|
|
border: 0;
|
|
border-right: 1px solid #555555;
|
|
padding: 0.375rem 0.75rem;
|
|
margin-right: 0.75rem;
|
|
}
|
|
|
|
body.dark-mode input[type="file"].form-control::file-selector-button:hover {
|
|
background-color: #555555;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* "No file chosen" text area colour */
|
|
body.dark-mode input[type="file"].form-control {
|
|
color: #aaaaaa;
|
|
}
|
|
|
|
/* Helper text below inputs */
|
|
body.dark-mode .form-text {
|
|
color: #888888 !important;
|
|
}
|
|
|
|
body.dark-mode .form-label,
|
|
body.dark-mode label {
|
|
color: #cccccc;
|
|
}
|
|
|
|
body.dark-mode .form-check-label {
|
|
color: #cccccc;
|
|
}
|
|
|
|
body.dark-mode .input-group-text {
|
|
background-color: #333333 !important;
|
|
border-color: #555555 !important;
|
|
color: #cccccc !important;
|
|
}
|
|
|
|
/* Modals */
|
|
body.dark-mode .modal-content {
|
|
background-color: #1e1e1e;
|
|
color: #e0e0e0;
|
|
border-color: #444444;
|
|
}
|
|
|
|
body.dark-mode .modal-header {
|
|
border-bottom-color: #444444;
|
|
background-color: #252525;
|
|
}
|
|
|
|
body.dark-mode .modal-footer {
|
|
border-top-color: #444444;
|
|
background-color: #252525;
|
|
}
|
|
|
|
/* Dropdowns */
|
|
body.dark-mode .dropdown-menu {
|
|
background-color: #2a2a2a;
|
|
border-color: #444444;
|
|
}
|
|
|
|
body.dark-mode .dropdown-item {
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
body.dark-mode .dropdown-item:hover,
|
|
body.dark-mode .dropdown-item:focus {
|
|
background-color: #333333;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
body.dark-mode .dropdown-divider {
|
|
border-top-color: #444444;
|
|
}
|
|
|
|
/* Badges */
|
|
body.dark-mode .badge.bg-secondary {
|
|
background-color: #555555 !important;
|
|
}
|
|
|
|
body.dark-mode .badge.bg-light {
|
|
background-color: #444444 !important;
|
|
color: #e0e0e0 !important;
|
|
}
|
|
|
|
/* Alerts */
|
|
body.dark-mode .alert-info {
|
|
background-color: #0d3250;
|
|
border-color: #1565c0;
|
|
color: #90caf9;
|
|
}
|
|
|
|
body.dark-mode .alert-success {
|
|
background-color: #0d3b2a;
|
|
border-color: #1b5e20;
|
|
color: #a5d6a7;
|
|
}
|
|
|
|
body.dark-mode .alert-warning {
|
|
background-color: #3e2d00;
|
|
border-color: #f57f17;
|
|
color: #ffe082;
|
|
}
|
|
|
|
body.dark-mode .alert-danger {
|
|
background-color: #3b0d0d;
|
|
border-color: #b71c1c;
|
|
color: #ef9a9a;
|
|
}
|
|
|
|
/* Buttons */
|
|
body.dark-mode .btn-outline-secondary {
|
|
color: #aaaaaa;
|
|
border-color: #666666;
|
|
}
|
|
|
|
body.dark-mode .btn-outline-secondary:hover {
|
|
background-color: #444444;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
body.dark-mode .btn-outline-primary {
|
|
color: #64b5f6;
|
|
border-color: #64b5f6;
|
|
}
|
|
|
|
body.dark-mode .btn-outline-primary:hover {
|
|
background-color: #1565c0;
|
|
border-color: #1565c0;
|
|
color: #fff;
|
|
}
|
|
|
|
body.dark-mode .btn-outline-danger {
|
|
color: #ef9a9a;
|
|
border-color: #ef9a9a;
|
|
}
|
|
|
|
body.dark-mode .btn-outline-danger:hover {
|
|
background-color: #b71c1c;
|
|
border-color: #b71c1c;
|
|
color: #fff;
|
|
}
|
|
|
|
body.dark-mode .btn-outline-warning {
|
|
color: #ffe082;
|
|
border-color: #f57f17;
|
|
}
|
|
|
|
body.dark-mode .btn-outline-warning:hover {
|
|
background-color: #e65100;
|
|
border-color: #e65100;
|
|
color: #fff;
|
|
}
|
|
|
|
body.dark-mode .btn-close {
|
|
filter: invert(1);
|
|
}
|
|
|
|
/* Misc */
|
|
body.dark-mode hr {
|
|
border-color: #444444;
|
|
}
|
|
|
|
body.dark-mode .text-muted {
|
|
color: #888888 !important;
|
|
}
|
|
|
|
body.dark-mode .text-dark {
|
|
color: #e0e0e0 !important;
|
|
}
|
|
|
|
body.dark-mode .bg-light {
|
|
background-color: #2a2a2a !important;
|
|
}
|
|
|
|
body.dark-mode .bg-white {
|
|
background-color: #1e1e1e !important;
|
|
}
|
|
|
|
body.dark-mode .border {
|
|
border-color: #444444 !important;
|
|
}
|
|
|
|
body.dark-mode pre,
|
|
body.dark-mode code {
|
|
background-color: #1a1a1a;
|
|
color: #80cbc4;
|
|
border-color: #444444;
|
|
}
|
|
|
|
body.dark-mode a {
|
|
color: #64b5f6;
|
|
}
|
|
|
|
body.dark-mode a:hover {
|
|
color: #90caf9;
|
|
}
|
|
|
|
/* Pagination */
|
|
body.dark-mode .page-link {
|
|
background-color: #2a2a2a;
|
|
border-color: #444444;
|
|
color: #64b5f6;
|
|
}
|
|
|
|
body.dark-mode .page-link:hover {
|
|
background-color: #333333;
|
|
border-color: #555555;
|
|
color: #90caf9;
|
|
}
|
|
|
|
body.dark-mode .page-item.active .page-link {
|
|
background-color: #3498db;
|
|
border-color: #3498db;
|
|
}
|
|
|
|
body.dark-mode .page-item.disabled .page-link {
|
|
background-color: #1e1e1e;
|
|
border-color: #444444;
|
|
color: #666666;
|
|
}
|
|
|
|
/* Progress bars */
|
|
body.dark-mode .progress {
|
|
background-color: #333333;
|
|
}
|
|
|
|
/* Tabs content / tab-pane */
|
|
body.dark-mode .tab-content {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* Dark mode toggle button */
|
|
.dark-mode-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
width: calc(100% - 20px);
|
|
margin: 4px 10px 0;
|
|
padding: 10px 15px;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border: 1px solid rgba(255,255,255,0.15);
|
|
border-radius: 8px;
|
|
color: #ecf0f1;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
text-align: left;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.dark-mode-btn:hover {
|
|
background: rgba(255, 255, 255, 0.18);
|
|
color: #fff;
|
|
}
|
|
|
|
.dark-mode-btn i {
|
|
width: 20px;
|
|
margin-right: 10px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.dark-mode-btn .toggle-track {
|
|
margin-left: auto;
|
|
width: 36px;
|
|
height: 20px;
|
|
background: rgba(255,255,255,0.2);
|
|
border-radius: 10px;
|
|
position: relative;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.dark-mode-btn .toggle-track::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 3px;
|
|
width: 14px;
|
|
height: 14px;
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
body.dark-mode .dark-mode-btn .toggle-track {
|
|
background: #3498db;
|
|
}
|
|
|
|
body.dark-mode .dark-mode-btn .toggle-track::after {
|
|
transform: translateX(16px);
|
|
}
|
|
|
|
/* Dark mode — accordion sidebar */
|
|
body.dark-mode .nav-group-header {
|
|
color: #dce6f0;
|
|
}
|
|
|
|
body.dark-mode .nav-group-header:hover {
|
|
background-color: rgba(255,255,255,0.07);
|
|
}
|
|
|
|
body.dark-mode .nav-group-header.open {
|
|
background-color: rgba(255,255,255,0.09);
|
|
}
|
|
|
|
/* ── Dark mode sidebar ── */
|
|
body.dark-mode .sidebar {
|
|
background: linear-gradient(160deg, #0d0d0d 0%, #1a1a2e 50%, #16213e 100%);
|
|
box-shadow: 2px 0 16px rgba(0,0,0,0.6);
|
|
}
|
|
|
|
body.dark-mode .sidebar .logo {
|
|
border-bottom-color: rgba(255,255,255,0.08);
|
|
}
|
|
|
|
body.dark-mode .sidebar .logo small {
|
|
color: #7f8c9a;
|
|
}
|
|
|
|
body.dark-mode .sidebar .nav-link {
|
|
color: #b0bec5;
|
|
}
|
|
|
|
body.dark-mode .sidebar .nav-link:hover {
|
|
background-color: rgba(100,181,246,0.12);
|
|
color: #e0f0ff;
|
|
}
|
|
|
|
body.dark-mode .sidebar .nav-link.active {
|
|
background-color: rgba(100,181,246,0.2);
|
|
color: #e0f0ff;
|
|
border-left: 3px solid #64b5f6;
|
|
padding-left: 12px;
|
|
}
|
|
|
|
body.dark-mode .sidebar .nav-link i {
|
|
color: #64b5f6;
|
|
}
|
|
|
|
body.dark-mode .sidebar .nav-link.active i {
|
|
color: #90caf9;
|
|
}
|
|
|
|
body.dark-mode .sidebar .nav-link.admin-link {
|
|
color: #ef9a9a;
|
|
border-top-color: rgba(255,255,255,0.07);
|
|
}
|
|
|
|
body.dark-mode .sidebar .nav-link.admin-link:hover {
|
|
background-color: rgba(239,154,154,0.15);
|
|
color: #ffcdd2;
|
|
}
|
|
|
|
body.dark-mode .sidebar .nav-link.admin-link.active {
|
|
background-color: rgba(239,154,154,0.22);
|
|
color: #ffcdd2;
|
|
}
|
|
|
|
body.dark-mode .sidebar .nav-link.admin-link i {
|
|
color: #ef9a9a;
|
|
}
|
|
|
|
body.dark-mode .dark-mode-btn {
|
|
border-top-color: rgba(255,255,255,0.07);
|
|
color: #b0bec5;
|
|
}
|
|
</style>
|
|
{% block extra_css %}{% endblock %}
|
|
</head>
|
|
<body>
|
|
<!-- Mobile Menu Toggle -->
|
|
<button class="mobile-menu-toggle" onclick="toggleSidebar()">
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
|
|
<!-- Sidebar Navigation -->
|
|
<nav class="sidebar" id="sidebar">
|
|
<div class="logo">
|
|
<h3><i class="fas fa-server"></i> Monitor</h3>
|
|
<small>Server Monitoring v2.0</small>
|
|
</div>
|
|
|
|
<ul class="nav-menu">
|
|
|
|
<!-- ── WMT group ── -->
|
|
<li class="nav-group" id="group-wmt">
|
|
<div class="nav-group-header {% if request.endpoint and request.endpoint.startswith('wmt_web') %}open{% endif %}"
|
|
onclick="toggleGroup('group-wmt')">
|
|
<i class="fas fa-tablet-alt group-icon"></i>
|
|
<span class="group-label">WMT</span>
|
|
{% if pending_wmt_count > 0 %}<span class="group-badge">{{ pending_wmt_count }}</span>{% endif %}
|
|
<i class="fas fa-chevron-right chevron"></i>
|
|
</div>
|
|
<ul class="nav-group-children {% if request.endpoint and request.endpoint.startswith('wmt_web') %}open{% endif %}" style="list-style:none;padding-left:10px;margin:0;">
|
|
<li class="nav-item">
|
|
<a href="{{ url_for('wmt_web.index') }}" class="nav-link {% if request.endpoint == 'wmt_web.index' %}active{% endif %}">
|
|
<i class="fas fa-tachometer-alt"></i>Dashboard
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="{{ url_for('wmt_web.devices') }}" class="nav-link {% if request.endpoint in ['wmt_web.devices','wmt_web.device_new','wmt_web.device_edit'] %}active{% endif %}">
|
|
<i class="fas fa-desktop"></i>Devices
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="{{ url_for('wmt_web.update_requests') }}" class="nav-link {% if request.endpoint == 'wmt_web.update_requests' %}active{% endif %}">
|
|
<i class="fas fa-inbox"></i>Update Requests
|
|
{% if pending_wmt_count > 0 %}<span class="badge bg-danger ms-auto">{{ pending_wmt_count }}</span>{% endif %}
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="{{ url_for('wmt_web.releases') }}" class="nav-link {% if request.endpoint == 'wmt_web.releases' %}active{% endif %}">
|
|
<i class="fas fa-box-open"></i>Client Releases
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="{{ url_for('wmt_web.settings') }}" class="nav-link {% if request.endpoint == 'wmt_web.settings' %}active{% endif %}">
|
|
<i class="fas fa-cog"></i>Settings
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<!-- ── Live View group ── -->
|
|
{% set lv_active = request.endpoint in ['main.devices','main.device_edit','main.device_detail','main.logs','main.templates','main.stats'] %}
|
|
<li class="nav-group" id="group-liveview">
|
|
<div class="nav-group-header {% if lv_active %}open{% endif %}"
|
|
onclick="toggleGroup('group-liveview')">
|
|
<i class="fas fa-heartbeat group-icon"></i>
|
|
<span class="group-label">Live View</span>
|
|
<i class="fas fa-chevron-right chevron"></i>
|
|
</div>
|
|
<ul class="nav-group-children {% if lv_active %}open{% endif %}" style="list-style:none;padding-left:10px;margin:0;">
|
|
<li class="nav-item">
|
|
<a href="{{ url_for('main.devices') }}" class="nav-link {% if request.endpoint in ['main.devices','main.device_edit','main.device_detail'] %}active{% endif %}">
|
|
<i class="fas fa-satellite-dish"></i>Device Health
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="{{ url_for('main.logs') }}" class="nav-link {% if request.endpoint == 'main.logs' %}active{% endif %}">
|
|
<i class="fas fa-list-alt"></i>Logs
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="{{ url_for('main.stats') }}" class="nav-link {% if request.endpoint == 'main.stats' %}active{% endif %}">
|
|
<i class="fas fa-chart-bar"></i>Statistics
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="{{ url_for('main.templates') }}" class="nav-link {% if request.endpoint == 'main.templates' %}active{% endif %}">
|
|
<i class="fas fa-file-alt"></i>Templates
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<!-- ── Automation group ── -->
|
|
{% set auto_active = request.endpoint and request.endpoint.startswith('ansible_web') %}
|
|
<li class="nav-group" id="group-automation">
|
|
<div class="nav-group-header {% if auto_active %}open{% endif %}"
|
|
onclick="toggleGroup('group-automation')">
|
|
<i class="fas fa-robot group-icon"></i>
|
|
<span class="group-label">Automation</span>
|
|
<i class="fas fa-chevron-right chevron"></i>
|
|
</div>
|
|
<ul class="nav-group-children {% if auto_active %}open{% endif %}" style="list-style:none;padding-left:10px;margin:0;">
|
|
<li class="nav-item">
|
|
<a href="{{ url_for('ansible_web.devices') }}" class="nav-link {% if request.endpoint == 'ansible_web.devices' %}active{% endif %}">
|
|
<i class="fas fa-network-wired"></i>Remote Devices
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="{{ url_for('ansible_web.playbooks') }}" class="nav-link {% if request.endpoint == 'ansible_web.playbooks' %}active{% endif %}">
|
|
<i class="fas fa-book-open"></i>Playbooks
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="{{ url_for('ansible_web.execute') }}" class="nav-link {% if request.endpoint == 'ansible_web.execute' %}active{% endif %}">
|
|
<i class="fas fa-terminal"></i>Execute
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="{{ url_for('ansible_web.ssh_setup') }}" class="nav-link {% if request.endpoint == 'ansible_web.ssh_setup' %}active{% endif %}">
|
|
<i class="fas fa-key"></i>SSH Setup
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="{{ url_for('ansible_web.failure_reports') }}" class="nav-link {% if request.endpoint == 'ansible_web.failure_reports' %}active{% endif %}">
|
|
<i class="fas fa-exclamation-triangle"></i>Failure Reports
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<!-- ── Admin standalone ── -->
|
|
<li class="nav-item" style="padding: 0 0px;">
|
|
<a href="{{ url_for('main.admin') }}" class="nav-link admin-link {% if request.endpoint == 'main.admin' %}active{% endif %}">
|
|
<i class="fas fa-shield-alt"></i>Admin
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
<button class="dark-mode-btn" id="darkModeToggle" onclick="toggleDarkMode()" title="Toggle dark / light mode">
|
|
<i class="fas fa-moon" id="darkModeIcon"></i>
|
|
<span id="darkModeLabel">Dark Mode</span>
|
|
<span class="toggle-track"></span>
|
|
</button>
|
|
</nav>
|
|
|
|
<!-- Main Content Area -->
|
|
<div class="main-content">
|
|
<!-- Content Header -->
|
|
<div class="content-header">
|
|
<h1>{% block page_title %}Dashboard{% endblock %}</h1>
|
|
{% if breadcrumbs %}
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
{% for crumb in breadcrumbs %}
|
|
<li class="breadcrumb-item {% if loop.last %}active{% endif %}">
|
|
{% if not loop.last %}
|
|
<a href="{{ crumb.url }}">{{ crumb.title }}</a>
|
|
{% else %}
|
|
{{ crumb.title }}
|
|
{% endif %}
|
|
</li>
|
|
{% endfor %}
|
|
</ol>
|
|
</nav>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Flash Messages -->
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
<div class="flash-messages">
|
|
{% for category, message in messages %}
|
|
<div class="alert alert-{% if category == 'error' %}danger{% else %}{{ category }}{% endif %} alert-dismissible fade show" role="alert">
|
|
{{ message }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<!-- Main Content Body -->
|
|
<div class="content-body">
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
// ── Accordion sidebar ──────────────────────────────────────────
|
|
function toggleGroup(groupId) {
|
|
const group = document.getElementById(groupId);
|
|
const header = group.querySelector('.nav-group-header');
|
|
const children = group.querySelector('.nav-group-children');
|
|
const isOpen = header.classList.contains('open');
|
|
|
|
header.classList.toggle('open', !isOpen);
|
|
children.classList.toggle('open', !isOpen);
|
|
|
|
// Persist state
|
|
const state = JSON.parse(localStorage.getItem('sidebarState') || '{}');
|
|
state[groupId] = !isOpen;
|
|
localStorage.setItem('sidebarState', JSON.stringify(state));
|
|
}
|
|
|
|
function restoreSidebarState() {
|
|
const state = JSON.parse(localStorage.getItem('sidebarState') || '{}');
|
|
document.querySelectorAll('.nav-group').forEach(function(group) {
|
|
const id = group.id;
|
|
// If server already rendered it open (active page), leave it
|
|
const header = group.querySelector('.nav-group-header');
|
|
const children = group.querySelector('.nav-group-children');
|
|
if (header.classList.contains('open')) return; // already active
|
|
if (state[id] === true) {
|
|
header.classList.add('open');
|
|
children.classList.add('open');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Mobile sidebar toggle
|
|
function toggleSidebar() {
|
|
document.getElementById('sidebar').classList.toggle('mobile-open');
|
|
}
|
|
|
|
// Close sidebar when clicking outside on mobile
|
|
document.addEventListener('click', function(event) {
|
|
const sidebar = document.getElementById('sidebar');
|
|
const toggle = document.querySelector('.mobile-menu-toggle');
|
|
if (window.innerWidth <= 768 &&
|
|
!sidebar.contains(event.target) &&
|
|
!toggle.contains(event.target)) {
|
|
sidebar.classList.remove('mobile-open');
|
|
}
|
|
});
|
|
|
|
// ── Dark mode ─────────────────────────────────────────────────
|
|
function toggleDarkMode() {
|
|
const isDark = document.body.classList.toggle('dark-mode');
|
|
localStorage.setItem('darkMode', isDark ? 'enabled' : 'disabled');
|
|
updateDarkModeButton(isDark);
|
|
}
|
|
|
|
function updateDarkModeButton(isDark) {
|
|
const icon = document.getElementById('darkModeIcon');
|
|
const label = document.getElementById('darkModeLabel');
|
|
if (!icon || !label) return;
|
|
icon.className = isDark ? 'fas fa-sun' : 'fas fa-moon';
|
|
label.textContent = isDark ? 'Light Mode' : 'Dark Mode';
|
|
}
|
|
|
|
// ── Init ──────────────────────────────────────────────────────
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Restore dark mode
|
|
if (localStorage.getItem('darkMode') === 'enabled') {
|
|
document.body.classList.add('dark-mode');
|
|
updateDarkModeButton(true);
|
|
}
|
|
// Restore sidebar accordion state
|
|
restoreSidebarState();
|
|
});
|
|
</script>
|
|
{% block extra_js %}{% endblock %}
|
|
</body>
|
|
</html> |