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", {