<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>{% block title %}RouterOS Update{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* ========== Tryb ciemny (dark-mode) ========== */
body.dark-mode {
background-color: #121212;
color: #cccccc;
}
/* --- Nawigacja (Navbar) --- */
body.dark-mode .navbar {
background-color: #333 !important;
color: #ffffff;
}
body.dark-mode .navbar .navbar-brand,
body.dark-mode .navbar .nav-link {
color: #fff !important;
}
/* --- Dropdown --- */
body.dark-mode .dropdown-menu {
background-color: #262626;
color: #cccccc;
border: 1px solid #555;
}
body.dark-mode .dropdown-menu a {
color: #cccccc !important;
}
body.dark-mode .dropdown-menu a:hover {
background-color: #333333;
}
/* --- Przyciski --- */
body.dark-mode .btn-outline-light {
color: #ffffff;
border-color: #ffffff;
}
body.dark-mode .btn-outline-light:hover {
color: #ffffff;
background-color: #333333;
border-color: #333333;
}
/* Stopka */
.dark-mode footer {
background-color: #1e1e1e !important;
color: #fff !important;
}
footer {
background-color: #f8f9fa;
color: #212529;
}
/* Alerty – pozostają bez zmian */
.diff-add { color: green; }
.diff-rem { color: red; }
body.dark-mode table {
background-color: #1a1a1a;
color: #cccccc;
}
body.dark-mode table thead {
background-color: #333333;
}
body.dark-mode table td {
background-color: #1a1a1a !important;
color: #cccccc !important;
}
/* --- Elementy formularzy --- */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode table input,
body.dark-mode table textarea,
body.dark-mode table select {
background-color: #1a1a1a;
color: #cccccc;
border: 1px solid #555;
}
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus,
body.dark-mode table input:focus,
body.dark-mode table textarea:focus,
body.dark-mode table select:focus {
background-color: #1a1a1a;
color: #cccccc;
border-color: #777;
}
/* --- DataTables --- */
body.dark-mode .dataTable-wrapper input,
body.dark-mode .dataTable-wrapper select,
body.dark-mode .dataTable-wrapper .dataTable-info,
body.dark-mode .dataTable-wrapper .dataTable-pagination {
background-color: #1a1a1a;
color: #cccccc;
border-color: #555;
}
body.dark-mode .dataTable-wrapper .dataTable-pagination a {
color: #cccccc !important;
background-color: #1a1a1a;
border-color: #555;
}
body.dark-mode .dataTable-wrapper .dataTable-pagination a.active {
background-color: #333333;
border-color: #333333;
}
/* --- Inne elementy --- */
body.dark-mode ::placeholder {
color: #cccccc !important;
opacity: 1;
}
body.dark-mode .breadcrumb-item.active,
body.dark-mode .text-muted {
color: #cccccc !important;
}
body.dark-mode .card-header.bg-light {
background-color: #333333 !important;
color: #cccccc !important;
}
body.dark-mode .list-group.list-group-flush .list-group-item {
background-color: #141414 !important;
color: #cccccc;
border-bottom: 1px solid #333333;
}
/* ========== Tryb jasny (light-mode) ========== */
body.light-mode .navbar {
background-color: #dcdcdc !important;
color: #333333;
}
body.light-mode .navbar .btn-outline-primary:hover {
background-color: #007bff;
color: #ffffff;
}
footer {
background-color: #f8f9fa;
color: #212529;
}
@media (max-width: 768px) {
body.light-mode .navbar .nav-link {
padding: 0.5rem;
}
}
/* ========== Modal w trybie ciemny, ========== */
.dark-mode .modal-content {
background-color: #333;
color: #ddd;
border: none;
}
.dark-mode .modal-header,
.dark-mode .modal-footer {
border-color: #444;
}
.dark-mode .modal-title {
color: #fff;
}
.dark-mode .btn-close {
filter: invert(1);
}
</style>
{% block extra_head %}{% endblock %}
</head>
<body class="d-flex flex-column min-vh-100">
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a href="{{ url_for('index') }}" class="navbar-brand">RouterOS Update</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent"
aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
{% if current_user.is_authenticated %}
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="{{ url_for('dashboard') }}">Dashboard</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="devicesDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Urządzenia
</a>
<ul class="dropdown-menu" aria-labelledby="devicesDropdown">
<li><a class="dropdown-item" href="{{ url_for('devices') }}">Lista</a></li>
<li><a class="dropdown-item" href="{{ url_for('add_device') }}">Dodaj nowe</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('logs') }}">Logi</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('routeros_changelog') }}">RouterOS Changelog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('update_history') }}">Historia aktualizacji</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('anomalies') }}">Anomalie</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('settings') }}">Ustawienia</a>
</li>
</ul>
{% endif %}
<ul class="navbar-nav ms-auto align-items-center">
<li class="nav-item me-2">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="darkModeToggle">
<label class="form-check-label" for="darkModeToggle">Tryb ciemny</label>
</div>
</li>
{% if current_user.is_authenticated %}
<li class="nav-item">
<a class="nav-link btn btn-outline-light ms-2" href="{{ url_for('change_password') }}">Zmień hasło</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-danger ms-2" href="{{ url_for('logout') }}">Wyloguj</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link btn btn-outline-primary ms-2" href="{{ url_for('login') }}">Zaloguj</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-primary ms-2" href="{{ url_for('register') }}">Zarejestruj</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<!-- Kontener do wyświetlania komunikatów flash -->
<div class="container mt-3">
{% with messages = get_flashed_messages(with_categories=True) %}
{% if messages %}
{% for category, message in messages %}
<!-- Zmapuj do stylu Bootstrapa -->
{% set bs_cat = bootstrap_alert_category(category) %}
<div class="alert alert-{{ bs_cat }} alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
{% endif %}
{% endwith %}
</div>
<main class="container my-4 flex-fill">
{% block content %}{% endblock %}
</main>
<footer class="footer py-3 mt-auto">
<div class="container text-center">
<span class="text-muted">© 2025 Mateusz Gruszczyński, linuxiarz.pl</span>
</div>
</footer>
<!-- Bootstrap JS (bundle z Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const darkModeToggle = document.getElementById('darkModeToggle');
function updatePrismTheme() {
const prismLink = document.getElementById('prism-style');
if (prismLink) {
if (localStorage.getItem("darkMode") === "enabled") {
prismLink.setAttribute('href', 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css');
} else {
prismLink.setAttribute('href', 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-coy.min.css');
}
}
}
function updateTheme() {
if (localStorage.getItem("darkMode") === "enabled") {
document.body.classList.add("dark-mode");
document.body.classList.remove("light-mode");
darkModeToggle.checked = true;
} else {
document.body.classList.add("light-mode");
document.body.classList.remove("dark-mode");
darkModeToggle.checked = false;
}
updatePrismTheme();
}
darkModeToggle.addEventListener('change', function() {
if (this.checked) {
localStorage.setItem("darkMode", "enabled");
} else {
localStorage.setItem("darkMode", "disabled");
}
updateTheme();
});
updateTheme();
});
</script>
{% block extra_scripts %}{% endblock %}
</body>
</html>