new css and functions

This commit is contained in:
Mateusz Gruszczyński
2025-02-27 00:29:52 +01:00
parent f9215590ea
commit a17423aaa1
3 changed files with 242 additions and 30 deletions

View File

@ -3,11 +3,7 @@
{% 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 %}
<img id="logo-img" src="https://mikrotik.com/logo/assets/logo-colors-dark-ToiqSI6u.svg" alt="Mikrotik Logo" class="img-fluid" style="max-width: 200px;">
<h1 class="mt-3">Witamy w RouterOS Update</h1>
<p class="lead">Zarządzaj aktualizacjami swoich urządzeń RouterOS w prosty sposób.</p>
<div class="mt-4">
@ -15,5 +11,58 @@
<a href="{{ url_for('register') }}" class="btn btn-success btn-lg">Rejestracja</a>
</div>
</div>
</div>
</div>
<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();
updateLogoImage();
}
// Nowa funkcja: dynamicznie aktualizuje logo, jeśli element istnieje
function updateLogoImage() {
const logo = document.getElementById("logo-img");
if (logo) {
if (localStorage.getItem("darkMode") === "enabled") {
logo.src = "https://mikrotik.com/logo/assets/logo-colors-white-E8duxH7y.svg";
} else {
logo.src = "https://mikrotik.com/logo/assets/logo-colors-dark-ToiqSI6u.svg";
}
}
}
darkModeToggle.addEventListener('change', function() {
if (this.checked) {
localStorage.setItem("darkMode", "enabled");
} else {
localStorage.setItem("darkMode", "disabled");
}
updateTheme();
});
updateTheme();
});
</script>
{% endblock %}