new css and functions
This commit is contained in:
@ -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 %}
|
||||
|
Reference in New Issue
Block a user