gru/routeros_backup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dark mode

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2025-02-25 16:25:14 +01:00
parent a9f954b7b3
commit 5705884e5c
4 changed files with 107 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
templates/base.html
View File

@ -4,12 +4,12 @@
<meta charset="UTF-8" />
<title>Backup RouterOS App</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Ogólne style trybu ciemnego */
.dark-mode body {
background-color: #111111;
background-color: #121212;
color: #ffffff;
}
.dark-mode a,
@ -45,7 +45,17 @@
color: #ddd;
border: 1px solid #555;
}
html.dark-mode table.table thead th {
background-color: #444 !important;
color: #fff !important;
border: 1px solid #555 !important;
}
html.dark-mode table.table tbody td {
background-color: #333 !important;
color: #ddd !important;
border: 1px solid #555 !important;
}
/* Pola formularzy */
.dark-mode input,
.dark-mode textarea,
@ -78,7 +88,7 @@
/* Stopka */
.dark-mode footer {
background-color: #333 !important;
background-color: #1e1e1e !important;
color: #fff !important;
}
@ -116,40 +126,90 @@
.dark-mode .btn-close {
filter: invert(1);
}
/* Niestandardowy styl dla trybu jasnego – ciemniejsze, szare menu */
.navbar-light.bg-custom-light {
background-color: #dcdcdc !important; /* Gainsboro – nieco ciemniejszy szary odcień */
}
.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
background-color: #333 !important;
color: #fff !important;
border: 1px solid #555 !important;
}
.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background-color: #444 !important;
color: #fff !important;
}
/* paginacja */
html.dark-mode .dataTables_wrapper .pagination .page-link {
background-color: #333 !important;
color: #fff !important;
border: 1px solid #555 !important;
}
html.dark-mode .dataTables_wrapper .pagination .page-item.active .page-link,
html.dark-mode .dataTables_wrapper .pagination .page-link:hover {
background-color: #444 !important;
color: #fff !important;
}
html.dark-mode .dataTables_wrapper .dataTables_info,
html.dark-mode .dataTables_wrapper .dataTables_length,
html.dark-mode .dataTables_wrapper .dataTables_filter {
color: #fff !important;
}
/* pola w formularzach */
.dark-mode input:focus,
.dark-mode textarea:focus,
dark-mode select:focus {
background-color: #333 !important;
color: #fff !important;
border-color: #555 !important;
box-shadow: none !important;
}
</style>
<!-- Blok head umożliwiający dołączenie dodatkowych stylów -->
{% block head %}{% endblock %}
</head>
<body>
<nav class="navbar navbar-expand navbar-dark bg-dark mb-4">
<nav class="navbar navbar-expand {% if session.get('dark_mode', True) %}navbar-dark bg-dark{% else %}navbar-light bg-custom-light{% endif %} mb-4">
<div class="container-fluid">
<a href="{{ url_for('index') }}" class="navbar-brand">RouterOS Backup</a>
<!-- Przełącznik trybu ciemnego umieszczony przed menu -->
<form action="{{ url_for('toggle_dark_mode') }}" method="GET" class="d-flex align-items-center me-2">
<div class="form-check form-switch mb-0">
<input class="form-check-input" type="checkbox" id="darkModeSwitch" onchange="this.form.submit()" {% if session.get('dark_mode', True) %}checked{% endif %}>
<label class="form-check-label" for="darkModeSwitch">Tryb ciemny</label>
</div>
</form>
{% set btn_class = "btn-secondary" if session.get('dark_mode', True) else "btn-outline-dark" %}
<div class="d-flex align-items-center">
{% if session.user_id %}
<a href="{{ url_for('dashboard') }}" class="btn btn-secondary me-2">Dashboard</a>
<a href="{{ url_for('routers_list') }}" class="btn btn-secondary me-2">Urządzenia</a>
<a href="{{ url_for('diff_selector') }}" class="btn btn-secondary me-2">Diff selector</a>
<a href="{{ url_for('all_files') }}" class="btn btn-secondary me-2">Wszystkie pliki</a>
<a href="{{ url_for('logs_page') }}" class="btn btn-secondary me-2">Logi</a>
<a href="{{ url_for('settings_view') }}" class="btn btn-secondary me-2">Ustawienia</a>
<a href="{{ url_for('advanced_schedule') }}" class="btn btn-secondary me-2">Harmonogram</a>
<a href="{{ url_for('change_password') }}" class="btn btn-secondary me-2">Zmiana hasła</a>
<a href="{{ url_for('toggle_dark_mode') }}" class="btn btn-warning me-2">
{% if session.get('dark_mode', True) %}Jasny tryb{% else %}Ciemny tryb{% endif %}
</a>
<a href="{{ url_for('logout') }}" class="btn btn-secondary me-2">Wyloguj</a>
<a href="{{ url_for('dashboard') }}" class="btn {{ btn_class }} me-2">Dashboard</a>
<a href="{{ url_for('routers_list') }}" class="btn {{ btn_class }} me-2">Urządzenia</a>
<a href="{{ url_for('diff_selector') }}" class="btn {{ btn_class }} me-2">Diff selector</a>
<a href="{{ url_for('all_files') }}" class="btn {{ btn_class }} me-2">Wszystkie pliki</a>
<a href="{{ url_for('logs_page') }}" class="btn {{ btn_class }} me-2">Logi</a>
<a href="{{ url_for('settings_view') }}" class="btn {{ btn_class }} me-2">Ustawienia</a>
<a href="{{ url_for('advanced_schedule') }}" class="btn {{ btn_class }} me-2">Harmonogram</a>
<a href="{{ url_for('change_password') }}" class="btn {{ btn_class }} me-2">Zmiana hasła</a>
<a href="{{ url_for('logout') }}" class="btn {{ btn_class }} me-2">Wyloguj</a>
{% else %}
<a href="{{ url_for('login') }}" class="btn btn-secondary me-2">Zaloguj</a>
<a href="{{ url_for('register') }}" class="btn btn-secondary me-2">Utwórz konto</a>
<a href="{{ url_for('toggle_dark_mode') }}" class="btn btn-warning me-2">
{% if session.get('dark_mode', True) %}Jasny tryb{% else %}Ciemny tryb{% endif %}
</a>
<a href="{{ url_for('login') }}" class="btn {{ btn_class }} me-2">Zaloguj</a>
<a href="{{ url_for('register') }}" class="btn {{ btn_class }} me-2">Utwórz konto</a>
{% endif %}
</div>
</div>
</nav>
<div class="container">
{% with messages = get_flashed_messages() %}
{% if messages %}
@ -185,7 +245,7 @@
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
function ajaxExport(router_id) {
fetch("/router/" + router_id + "/export", {

2
templates/dashboard.html
View File

@ -1,7 +1,7 @@
{% extends "base.html" %}
{% block content %}
<div class="container my-4">
<h2 class="text-center mb-4">Panel administracyjny</h2>
<h2 class="text-center mb-4">Dashboard</h2>
<!-- Wiersz akcji ogólnych -->
<div class="row mb-4">

22
templates/diff.html
View File

@ -7,13 +7,13 @@
<a href="{{ url_for('router_details', router_id=backup1.router_id) }}" class="btn btn-secondary mt-3">Powrót</a>
</div>
<!-- Dodajemy diff2html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
<script src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html.min.js"></script>
<!-- Ładujemy nowszą wersję diff2html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/diff2html@3.4.4/bundles/css/diff2html.min.css" />
<script src="https://cdn.jsdelivr.net/npm/diff2html@3.4.4/bundles/js/diff2html.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Upewnij się, że diff_text jest poprawnie escapowany
// Escapowany diff_text z serwera
var diffText = `{{ diff_text|e }}`;
var targetElement = document.getElementById("diffContainer");
var configuration = {
@ -23,7 +23,19 @@
};
var diffHtml = Diff2Html.html(diffText, configuration);
targetElement.innerHTML = diffHtml;
// Jeśli tryb ciemny jest aktywny, dołącz dodatkowe style dla diff2html
if(document.documentElement.classList.contains('dark-mode')) {
var darkStyle = document.createElement('style');
darkStyle.textContent = `
.d2h-wrapper { background-color: #1e1e1e; color: #fff; }
.d2h-file-header { background-color: #2e2e2e; color: #fff; }
.d2h-diff-table { background-color: #1e1e1e; color: #fff; }
.d2h-code-line { background-color: #1e1e1e; color: #fff; }
.d2h-code-line-ctn { color: #fff; }
`;
document.head.appendChild(darkStyle);
}
});
</script>
{% endblock %}
GET | 200 | 45 ms

5
templates/index.html
View File

@ -2,7 +2,11 @@
{% block content %}
<div class="d-flex flex-column align-items-center justify-content-center" style="min-height: 80vh;">
<div class="text-center">
{% if session.get('dark_mode', True) %}
<img src="https://mikrotik.com/logo/assets/logo-colors-white-E8duxH7y.svg" alt="Mikrotik Logo" class="img-fluid" style="max-width: 200px;">
{% else %}
<img src="https://mikrotik.com/logo/assets/logo-colors-dark-ToiqSI6u.svg" alt="Mikrotik Logo" class="img-fluid" style="max-width: 200px;">
{% endif %}
<h1 class="mt-3">Witamy w aplikacji Backup RouterOS</h1>
<p class="lead">Zarządzaj backupami swoich urządzeń RouterOS w prosty sposób.</p>
<div class="mt-4">
@ -12,3 +16,4 @@
</div>
</div>
{% endblock %}