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

refactor web interface

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2025-02-25 09:28:14 +01:00
parent 5c7a404c3b
commit cffc8b3124
22 changed files with 798 additions and 369 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
templates/base.html
View File

@ -6,29 +6,17 @@
<title>{% block title %}/etc/hosts Manager{% endblock %}</title>
<!-- Bootstrap CSS (Bootstrap 5.3.0) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Dodatkowe style do trybu ciemnego -->
<!-- Dodatkowe style -->
<style>
/* Ogólne style trybu ciemnego */
/* Style trybu ciemnego – stosujemy je tylko, gdy body ma klasę dark-mode */
body.dark-mode {
background-color: #121212;
color: #e0e0e0;
}
/* Navbar i stopka */
body.dark-mode .navbar,
body.dark-mode footer {
background-color: #1e1e1e !important;
}
body.dark-mode .navbar-brand,
body.dark-mode .nav-link,
body.dark-mode .dropdown-item {
color: #e0e0e0 !important;
}
/* Dropdown menu */
body.dark-mode .dropdown-menu {
background-color: #1e1e1e !important;
border-color: #333;
}
/* Tabele – rozszerzone style dla trybu ciemnego */
/* Tabele – style ciemnego motywu */
body.dark-mode .table {
color: #e0e0e0;
background-color: #1e1e1e;
@ -54,7 +42,7 @@
color: #e0e0e0;
border-color: #333;
}
/* Formularze i pola wejściowe */
/* Formularze */
body.dark-mode .form-control,
body.dark-mode .form-select {
background-color: #2e2e2e;
@ -68,26 +56,16 @@
border-color: #777;
box-shadow: none;
}
/* Uwaga: Styl alertów nie jest modyfikowany, dzięki czemu pozostają kolorowe. */
/* Styl przycisku wyloguj w trybie ciemnym */
body.dark-mode .btn-logout {
background-color: transparent;
border: 2px solid #dc3545;
color: #dc3545;
}
body.dark-mode .btn-logout:hover {
background-color: #dc3545;
color: #ffffff;
/* Przycisk Wyloguj – solidny przycisk, by był czytelny */
.btn-logout {
color: #fff;
}
</style>
{% block extra_css %}
<!-- Dodatkowe style CSS można dodać tutaj -->
{% endblock %}
{% block extra_css %}{% endblock %}
</head>
<body class="dark-mode">
<!-- Pasek nawigacyjny -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="{{ url_for('dashboard') }}">/etc/hosts Manager</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
@ -97,32 +75,82 @@
<div class="collapse navbar-collapse" id="navbarNavDropdown">
{% if session.get('user_id') %}
<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"><a class="nav-link" href="{{ url_for('manage_hosts') }}">Hosts</a></li>
<li class="nav-item"><a class="nav-link" href="{{ url_for('list_hosts_files') }}">Hosts Files</a></li>
<li class="nav-item"><a class="nav-link" href="{{ url_for('clear_all_hosts') }}">Clear Hosts</a></li>
<li class="nav-item"><a class="nav-link" href="{{ url_for('edit_local_hosts') }}">Edit Local Hosts</a></li>
<li class="nav-item"><a class="nav-link" href="{{ url_for('list_regex_hosts') }}">Regex Hosts</a></li>
<li class="nav-item"><a class="nav-link" href="{{ url_for('backups') }}">Backups</a></li>
<li class="nav-item"><a class="nav-link" href="{{ url_for('settings') }}">Settings</a></li>
<!-- Dashboard -->
<li class="nav-item">
<a class="nav-link" href="{{ url_for('dashboard') }}">Dashboard</a>
</li>
<!-- Serwery -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="serversDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Serwery
</a>
<ul class="dropdown-menu" aria-labelledby="serversDropdown">
<li><a class="dropdown-item" href="{{ url_for('add_server') }}">Dodaj serwer</a></li>
<li><a class="dropdown-item" href="{{ url_for('server_list') }}">Lista serwerów</a></li>
<li><a class="dropdown-item" href="{{ url_for('import_servers') }}">Importuj serwery z CSV</a></li>
</ul>
</li>
<!-- WYczysc /etc/hosts -->
<li class="nav-item">
<a class="nav-link" href="{{ url_for('clear_server') }}">Wyczyść /etc/hosts</a>
</li>
<!-- Edytuj /etc/hosts -->
<li class="nav-item">
<a class="nav-link" href="{{ url_for('edit_local_hosts') }}">Edytuj /etc/hosts</a>
</li>
<!-- Sieci CIDR / Regex -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="regexDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Sieci CIDR / Regex
</a>
<ul class="dropdown-menu" aria-labelledby="regexDropdown">
<li><a class="dropdown-item" href="{{ url_for('list_regex_hosts') }}">Lista wpisów</a></li>
<li><a class="dropdown-item" href="{{ url_for('new_regex_host') }}">Nowy CIDR</a></li>
</ul>
</li>
<!-- Pliki /etc/hosts -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="filesDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Pliki /etc/hosts (beta)
</a>
<ul class="dropdown-menu" aria-labelledby="filesDropdown">
<li><a class="dropdown-item" href="{{ url_for('list_hosts_files') }}">Lista plików</a></li>
<li><a class="dropdown-item" href="{{ url_for('new_hosts_file') }}">Utwórz nowy /etc/hosts</a></li>
</ul>
</li>
<!-- Kopie zapasowe -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="backupsDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Kopie zapasowe
</a>
<ul class="dropdown-menu" aria-labelledby="backupsDropdown">
<li><a class="dropdown-item" href="{{ url_for('backups') }}">Lista kopii</a></li>
</ul>
</li>
<!-- Ustawienia -->
<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">
<!-- Przełącznik trybu ciemnego -->
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="darkModeToggle" checked>
<input class="form-check-input" type="checkbox" id="darkModeToggle">
<label class="form-check-label" for="darkModeToggle">Dark Mode</label>
</div>
</li>
{% if session.get('user_id') %}
<li class="nav-item"><a class="nav-link" href="{{ url_for('change_password') }}">Zmień hasło</a></li>
<li class="nav-item">
<a class="nav-link btn btn-alert ms-2 btn-logout" href="{{ url_for('change_password') }}">Zmień hasło</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-outline-danger text-white ms-2 btn-logout" href="{{ url_for('logout') }}">Wyloguj</a>
<a class="nav-link btn btn-danger ms-2 btn-logout" href="{{ url_for('logout') }}">Wyloguj</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link btn btn-success text-white ms-2" href="{{ url_for('login') }}">Zaloguj</a>
<a class="nav-link btn btn-success ms-2" href="{{ url_for('login') }}">Zaloguj</a>
</li>
{% endif %}
</ul>
@ -142,8 +170,7 @@
{% endfor %}
{% endif %}
{% endwith %}
{% block content %}
{% endblock %}
{% block content %}{% endblock %}
</div>
<!-- Stopka -->
@ -189,30 +216,45 @@
});
}
// Ustawienie trybu ciemnego na podstawie ciasteczka lub domyślnie (dark mode)
// Funkcja do aktualizacji navbaru w zależności od motywu
function updateNavbarTheme() {
const navbar = document.querySelector('.navbar');
if (document.body.classList.contains('dark-mode')) {
navbar.classList.remove('navbar-light', 'bg-light');
navbar.classList.add('navbar-dark', 'bg-dark');
} else {
navbar.classList.remove('navbar-dark', 'bg-dark');
navbar.classList.add('navbar-light', 'bg-light');
}
}
// Ustawienie trybu ciemnego na podstawie ciasteczka lub domyślnie (domyślnie ciemny)
const darkModeToggle = document.getElementById('darkModeToggle');
if (getCookie('darkMode') === 'disabled') {
document.body.classList.remove('dark-mode');
darkModeToggle.checked = false;
document.documentElement.setAttribute('data-bs-theme', 'light');
} else {
// Domyślnie ustawiamy dark mode
document.body.classList.add('dark-mode');
darkModeToggle.checked = true;
document.documentElement.setAttribute('data-bs-theme', 'dark');
setCookie('darkMode', 'enabled', 30);
}
// Na starcie dopasuj tabele
applyDarkModeTables();
updateNavbarTheme();
// Obsługa przełącznika dark mode
darkModeToggle.addEventListener('change', function() {
if (this.checked) {
document.body.classList.add('dark-mode');
document.documentElement.setAttribute('data-bs-theme', 'dark');
setCookie('darkMode', 'enabled', 30);
} else {
document.body.classList.remove('dark-mode');
document.documentElement.setAttribute('data-bs-theme', 'light');
setCookie('darkMode', 'disabled', 30);
}
applyDarkModeTables();
updateNavbarTheme();
});
</script>
{% endblock %}