new css and functions

app.py

@@ -66,6 +66,7 @@ class Device(db.Model):
     last_log = db.Column(db.Text)
     current_version = db.Column(db.String(50))
     current_firmware = db.Column(db.String(50))
+    upgrade_firmware = db.Column(db.String(50))
     use_ssl = db.Column(db.Boolean, default=False)  # Czy używać SSL?
     ssl_insecure = db.Column(db.Boolean, default=False)  # Jeśli True – nie weryfikować certyfikatu SSL
     user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
@@ -167,6 +168,8 @@ def check_device_update(device):
     update_available = False
     current_version = None
     current_firmware = None
+    upgrade_firmware = None  # Nowa zmienna
+
     try:
         app.logger.debug(f"Connecting to device {device.ip}:{device.port} using SSL: {device.use_ssl}, ssl_verify: {not device.ssl_insecure}")
         api = librouteros.connect(
@@ -200,10 +203,15 @@ def check_device_update(device):
         app.logger.debug(f"Routerboard response: {board_resp}")
         if board_resp:
             board_info = board_resp[0]
-            # Próba odczytania firmware z kilku możliwych kluczy
+            # Pobieramy oddzielnie obie wersje:
-            firmware = board_info.get('firmware', board_info.get('firmware-version', board_info.get('upgrade-firmware', 'N/A')))
+            current_fw = board_info.get('firmware',
-            current_firmware = firmware
+                         board_info.get('firmware-version',
-            log_entries.append(f"Firmware: {firmware}")
+                         board_info.get('current-firmware', 'N/A')))
+            upgrade_fw = board_info.get('upgrade-firmware', 'N/A')
+            current_firmware = current_fw
+            upgrade_firmware = upgrade_fw
+            log_entries.append(f"Firmware: {current_fw}")
+            log_entries.append(f"Upgrade Firmware: {upgrade_fw}")
 
         # Sprawdzenie dostępnych aktualizacji
         log_entries.append("Checking for updates...")
@@ -229,10 +237,12 @@ def check_device_update(device):
                     update_available = True
                 else:
                     log_entries.append("No updates available.")
-        return "\n".join(log_entries), update_available, current_version, current_firmware
+        # Zwracamy 5-elementową krotkę
+        return "\n".join(log_entries), update_available, current_version, current_firmware, upgrade_firmware
     except Exception as e:
         app.logger.error(f"Error connecting to device {device.ip}: {e}", exc_info=True)
-        return f"Error: {str(e)}", False, None, None
+        return f"Error: {str(e)}", False, None, None, None
+
 
 def get_email_template(subject, message):
     return f"""
@@ -299,19 +309,17 @@ def check_all_devices():
     with app.app_context():
         devices = Device.query.all()
         for device in devices:
-            result, update_available, current_version, current_firmware = check_device_update(device)
+            result, update_available, current_version, current_firmware, upgrade_firmware = check_device_update(device)
             device.last_log = result
             device.last_check = datetime.utcnow()
             device.update_required = update_available
             device.current_version = current_version
             device.current_firmware = current_firmware
+            device.upgrade_firmware = upgrade_firmware 
             db.session.commit()
             log_entry = Log(message=result, device_id=device.id, user_id=device.user_id)
-            #log_message = f"Urządzenie {device.name or device.ip} - {result}"
-            #log_entry = Log(message=log_message, device_id=device.id, user_id=device.user_id)
             db.session.add(log_entry)
             db.session.commit()
-            # Powiadomienia, jeśli dostępna aktualizacja
             if update_available:
                 user = device.owner
                 message = f"Urządzenie {device.name or device.ip} ma dostępną aktualizację."
@@ -747,12 +755,13 @@ def force_check(device_id):
     if device.user_id != current_user.id:
         flash("Brak dostępu.")
         return redirect(url_for('devices'))
-    result, update_available, current_version, current_firmware = check_device_update(device)
+    result, update_available, current_version, current_firmware, upgrade_firmware = check_device_update(device)
     device.last_log = result
     device.last_check = datetime.utcnow()
     device.update_required = update_available
     device.current_version = current_version
     device.current_firmware = current_firmware
+    device.upgrade_firmware = upgrade_firmware
     db.session.commit()
     flash("Sprawdzenie urządzenia zakończone.")
     return redirect(url_for('devices'))
@@ -907,14 +916,14 @@ def update_selected_devices():
     for device_id in selected_ids:
         device = Device.query.get(device_id)
         if device and device.user_id == current_user.id:
-            result, update_available, current_version, current_firmware = check_device_update(device)
+            result, update_available, current_version, current_firmware, upgrade_firmware = check_device_update(device)
             device.last_log = result
             device.last_check = datetime.utcnow()
             device.update_required = update_available
             device.current_version = current_version
             device.current_firmware = current_firmware
+            device.upgrade_firmware = upgrade_firmware 
             db.session.commit()
-            # Dodaj log dla aktualizacji
             log_entry = Log(message=result, device_id=device.id, user_id=device.user_id)
             db.session.add(log_entry)
             db.session.commit()
@@ -958,6 +967,28 @@ def force_fetch_changelogs():
     flash("Changelog został całkowicie odświeżony.", "success")
     return redirect(url_for('routeros_changelog'))
 
+@app.route('/device/<int:device_id>/restart', methods=['POST'])
+@login_required
+def restart_device(device_id):
+    device = Device.query.get_or_404(device_id)
+    if device.user_id != current_user.id:
+        flash("Brak dostępu.")
+        return redirect(url_for('devices'))
+    try:
+        api = librouteros.connect(
+            host=device.ip,
+            username=device.device_username,
+            password=device.device_password,
+            port=device.port,
+            timeout=15
+        )
+        # Wysyłamy komendę reboot
+        list(api('/system/reboot'))
+        flash("Komenda reboot została wysłana.")
+    except Exception as e:
+        flash(f"Błąd podczas wysyłania komendy reboot: {e}")
+    return ('', 204)  # Zwracamy odpowiedź bez treści dla żądania AJAX
+
 # Zamknięcie harmonogramu przy zatrzymaniu aplikacji
 atexit.register(lambda: scheduler.shutdown())
 

templates/base.html

@@ -7,22 +7,21 @@
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
+      /* ========== Tryb ciemny (dark-mode) ========== */
       body.dark-mode {
-        background-color: #2b2b2b;
+        background-color: #121212;
         color: #cccccc;
       }
+      /* --- Nawigacja (Navbar) --- */
       body.dark-mode .navbar {
-        background-color: #201f1f !important;
+        background-color: #333 !important;
         color: #ffffff;
       }
-      /* Nazwa aplikacji */
+      body.dark-mode .navbar .navbar-brand,
-      body.dark-mode .navbar .navbar-brand {
-        color: #ffffff !important;
-      }
       body.dark-mode .navbar .nav-link {
-        color: #ffffff !important;
+        color: #fff !important;
       }
-      /* Dropdown */
+      /* --- Dropdown --- */
       body.dark-mode .dropdown-menu {
         background-color: #262626;
         color: #cccccc;
@@ -34,7 +33,7 @@
       body.dark-mode .dropdown-menu a:hover {
         background-color: #333333;
       }
-      /* Przycisk zmiany hasła */
+      /* --- Przyciski --- */
       body.dark-mode .btn-outline-light {
         color: #ffffff;
         border-color: #ffffff;
@@ -44,25 +43,19 @@
         background-color: #333333;
         border-color: #333333;
       }
-      /* Stopka - poprawa czytelności tekstu */
+      /* Stopka */
-      body.dark-mode .footer {
+      .dark-mode footer {
-        background-color: #262626;
+        background-color: #1e1e1e !important;
+        color: #fff !important;
       }
-      body.dark-mode .footer .text-muted {
+      footer {
-        color: #ffffff !important;
-      }
-      body.light-mode .navbar {
-        background-color: #f8f9fa !important;
-        color: #000;
-      }
-      body.light-mode .navbar .nav-link {
-        color: #000 !important;
-      }
-      body.light-mode .footer {
         background-color: #f8f9fa;
-        color: #000;
+        color: #212529;
       }
-      /* Tabele w trybie ciemnym */
+      
+    /* Alerty – pozostają bez zmian */
+    .diff-add { color: green; }
+    .diff-rem { color: red; }- Tabele --- */
       body.dark-mode table {
         background-color: #1a1a1a;
         color: #cccccc;
@@ -70,7 +63,11 @@
       body.dark-mode table thead {
         background-color: #333333;
       }
-      /* Pola formularzy (globalnie oraz w tabelach) */
+      body.dark-mode table td {
+        background-color: #1a1a1a !important;
+        color: #cccccc !important;
+      }
+      /* --- Elementy formularzy --- */
       body.dark-mode input,
       body.dark-mode textarea,
       body.dark-mode select,
@@ -91,7 +88,7 @@
         color: #cccccc;
         border-color: #777;
       }
-      /* Vanilla‑DataTables (logi) w trybie ciemnym */
+      /* --- DataTables --- */
       body.dark-mode .dataTable-wrapper input,
       body.dark-mode .dataTable-wrapper select,
       body.dark-mode .dataTable-wrapper .dataTable-info,
@@ -109,65 +106,77 @@
         background-color: #333333;
         border-color: #333333;
       }
-      /* Stylizacja komórek tabeli */
+      /* --- Inne elementy --- */
-      body.dark-mode table td {
-        background-color: #1a1a1a !important;
-        color: #cccccc !important;
-      }
-      /* Pola formularzy – upewniamy się, że tekst wpisywany ma jasny kolor */
-      body.dark-mode input,
-      body.dark-mode textarea,
-      body.dark-mode select,
-      body.dark-mode table input,
-      body.dark-mode table textarea,
-      body.dark-mode table select {
-        background-color: #1a1a1a !important;
-        color: #cccccc !important;
-        border: 1px solid #555 !important;
-      }
-      body.dark-mode input:focus,
-      body.dark-mode textarea:focus,
-      body.dark-mode select:focus,
-      body.dark-mode table input:focus,
-      body.dark-mode table textarea:focus,
-      body.dark-mode table select:focus {
-        background-color: #1a1a1a !important;
-        color: #cccccc !important;
-        border-color: #777 !important;
-      }
-      /* Placeholder w trybie ciemnym */
       body.dark-mode ::placeholder {
         color: #cccccc !important;
         opacity: 1;
       }
-      /* Breadcrumb active - elementy aktywne nawigacji */
+      body.dark-mode .breadcrumb-item.active,
-      body.dark-mode .breadcrumb-item.active {
-        color: #cccccc !important;
-      }
-      /* Klasa .text-muted w trybie ciemnym */
       body.dark-mode .text-muted {
         color: #cccccc !important;
       }
-      /* Dostosowanie nagłówka kart typu bg-light (np. "Ostatnie zdarzenia") */
       body.dark-mode .card-header.bg-light {
         background-color: #333333 !important;
         color: #cccccc !important;
       }
-
       body.dark-mode .list-group.list-group-flush .list-group-item {
         background-color: #141414 !important;
         color: #cccccc;
         border-bottom: 1px solid #333333;
       }
+
+      /* ========== Tryb jasny (light-mode) ========== */
+      /* --- Nawigacja (Navbar) --- */
+      body.light-mode .navbar {
+        background-color: #ffffff !important;
+        color: #333333;
+        border-bottom: 1px solid #e0e0e0;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        padding: 0.5rem 1rem;
+      }
+      body.light-mode .navbar .nav-link {
+        color: #333333 !important;
+        padding: 0.5rem 1rem;
+        transition: color 0.3s ease, background-color 0.3s ease;
+      }
+      body.light-mode .navbar .nav-link:hover {
+        background-color: #f0f0f0;
+        color: #007bff !important;
+        border-radius: 4px;
+      }
+      /* --- Przyciski (dla niezalogowanych) --- */
+      body.light-mode .navbar .btn {
+        margin-left: 0.5rem;
+        transition: background-color 0.3s ease, color 0.3s ease;
+      }
+      body.light-mode .navbar .btn-outline-primary:hover {
+        background-color: #007bff;
+        color: #ffffff;
+      }
+      /* --- Stopka --- */
+      body.light-mode .footer {
+        background-color: #ffffff;
+        color: #333333;
+        border-top: 1px solid #e0e0e0;
+        padding: 20px 0;
+        box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
+        text-align: center;
+      }
+      /* --- Responsywność --- */
+      @media (max-width: 768px) {
+        body.light-mode .navbar .nav-link {
+          padding: 0.5rem;
+        }
+      }
     </style>
-    
     {% block extra_head %}{% endblock %}
   </head>
   <body class="d-flex flex-column min-vh-100">
     <nav class="navbar navbar-expand-lg">
       <div class="container-fluid">
         <a href="{{ url_for('index') }}" class="navbar-brand">RouterOS Update</a>
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" 
+                aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarContent">
@@ -177,7 +186,8 @@
               <a class="nav-link" href="{{ url_for('dashboard') }}">Dashboard</a>
             </li>
             <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#" id="devicesDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              <a class="nav-link dropdown-toggle" href="#" id="devicesDropdown" role="button" 
+                 data-bs-toggle="dropdown" aria-expanded="false">
                 Urządzenia
               </a>
               <ul class="dropdown-menu" aria-labelledby="devicesDropdown">
@@ -201,6 +211,7 @@
               <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">
               <div class="form-check form-switch">
@@ -208,14 +219,22 @@
                 <label class="form-check-label" for="darkModeToggle">Tryb ciemny</label>
               </div>
             </li>
+            {% if current_user.is_authenticated %}
             <li class="nav-item">
               <a class="nav-link btn btn-outline-light ms-2" href="{{ url_for('change_password') }}">Zmień hasło</a>
             </li>
             <li class="nav-item">
               <a class="nav-link btn btn-danger ms-2" href="{{ url_for('logout') }}">Wyloguj</a>
             </li>
+            {% else %}
+            <li class="nav-item">
+              <a class="nav-link btn btn-outline-primary ms-2" href="{{ url_for('login') }}">Zaloguj</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link btn btn-primary ms-2" href="{{ url_for('register') }}">Zarejestruj</a>
+            </li>
+            {% endif %}
           </ul>
-          {% endif %}
         </div>
       </div>
     </nav>
@@ -232,32 +251,18 @@
     <script>
       document.addEventListener('DOMContentLoaded', function() {
         const darkModeToggle = document.getElementById('darkModeToggle');
-        function updateTheme() {
+
-          if (localStorage.getItem("darkMode") === "enabled") {
+        function updatePrismTheme() {
-            document.body.classList.add("dark-mode");
+          const prismLink = document.getElementById('prism-style');
-            document.body.classList.remove("light-mode");
+          if (prismLink) {
-            darkModeToggle.checked = true;
+            if (localStorage.getItem("darkMode") === "enabled") {
-          } else {
+              prismLink.setAttribute('href', 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css');
-            document.body.classList.add("light-mode");
+            } else {
-            document.body.classList.remove("dark-mode");
+              prismLink.setAttribute('href', 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-coy.min.css');
-            darkModeToggle.checked = false;
+            }
           }
         }
-        darkModeToggle.addEventListener('change', function() {
-          if (this.checked) {
-            localStorage.setItem("darkMode", "enabled");
-          } else {
-            localStorage.setItem("darkMode", "disabled");
-          }
-          updateTheme();
-        });
-        updateTheme();
-      });
-    </script>
 
-    <script>
-      document.addEventListener('DOMContentLoaded', function() {
-        const darkModeToggle = document.getElementById('darkModeToggle');
         function updateTheme() {
           if (localStorage.getItem("darkMode") === "enabled") {
             document.body.classList.add("dark-mode");
@@ -270,16 +275,7 @@
           }
           updatePrismTheme();
         }
-        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');
-            }
-          }
-        }
         darkModeToggle.addEventListener('change', function() {
           if (this.checked) {
             localStorage.setItem("darkMode", "enabled");
@@ -288,10 +284,10 @@
           }
           updateTheme();
         });
+
         updateTheme();
       });
     </script>
-
     {% block extra_scripts %}{% endblock %}
   </body>
 </html>

templates/device_detail.html

@@ -19,6 +19,35 @@
       overflow-y: auto;
       white-space: pre-wrap;
     }
+    /* Stylizacja overlay dla system update */
+    #system-update-overlay {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0,0,0,0.7);
+      z-index: 1000;
+      color: white;
+      text-align: center;
+      padding-top: 200px;
+    }
+    #system-update-overlay h3 {
+      margin-bottom: 20px;
+    }
+    #system-update-overlay .progress-container {
+      width: 50%;
+      margin: 20px auto;
+      background: #444;
+      border-radius: 5px;
+    }
+    #system-update-overlay .progress-bar {
+      width: 0%;
+      height: 30px;
+      background: #4caf50;
+      border-radius: 5px;
+    }
   </style>
 {% endblock %}
 {% block content %}
@@ -48,7 +77,8 @@
           </p>
           <p>
             <strong>System:</strong> {{ device.current_version or 'Brak' }}<br>
-            <strong>Firmware:</strong> {{ device.current_firmware or 'N/A' }}
+            <strong>Firmware:</strong> {{ device.current_firmware or 'N/A' }}<br>
+            <strong>Upgrade Firmware:</strong> <b>{{ device.upgrade_firmware or 'N/A' }}</b>
           </p>
           <p>
             <strong>Branch aktualizacji:</strong> {{ device.branch|capitalize }}
@@ -115,10 +145,10 @@
   <!-- Akcje urządzenia -->
   <div class="mb-4">
     <div class="d-flex flex-wrap gap-2">
-      <form method="POST" action="{{ url_for('update_device', device_id=device.id) }}">
+      <form id="system-update-form" method="POST" action="{{ url_for('update_device', device_id=device.id) }}">
         <button type="submit" class="btn btn-warning">Aktualizuj system</button>
       </form>
-      <form method="POST" action="{{ url_for('update_firmware', device_id=device.id) }}">
+      <form id="firmware-update-form" method="POST" action="{{ url_for('update_firmware', device_id=device.id) }}">
         <button type="submit" class="btn btn-danger">Aktualizuj firmware</button>
       </form>
       <a href="{{ url_for('force_check', device_id=device.id) }}" class="btn btn-secondary">Wymuś sprawdzenie</a>
@@ -127,5 +157,74 @@
       <a href="{{ url_for('devices') }}" class="btn btn-outline-secondary">Powrót do listy urządzeń</a>
     </div>
   </div>
+  
+  <!-- Overlay dla system update -->
+  <div id="system-update-overlay">
+    <h3>Aktualizacja systemu rozpoczęta...</h3>
+    <div class="progress-container">
+      <div id="system-update-progress" class="progress-bar"></div>
+    </div>
+    <p id="system-update-timer">300 sekund</p>
+  </div>
+  
+  <!-- Div dla firmware restart -->
+  <div id="firmware-restart-div" style="display:none; margin-top:20px;">
+    <div class="alert alert-warning">
+      Router wymaga ręcznego wykonania polecenia reboot.
+    </div>
+    <button id="restart-device-btn" class="btn btn-danger">Restart urządzenia</button>
+  </div>
+  
 </div>
+
+<script>
+  // System update: Po kliknięciu w formularz system update wyświetl overlay z licznikiem
+  document.getElementById('system-update-form').addEventListener('submit', function(e) {
+    e.preventDefault();  // Zatrzymaj standardowe wysłanie formularza
+    var overlay = document.getElementById('system-update-overlay');
+    overlay.style.display = 'block';
+    var timeLeft = 300; // 300 sekund = 5 minut
+    var progressBar = document.getElementById('system-update-progress');
+    var timerDisplay = document.getElementById('system-update-timer');
+    var interval = setInterval(function(){
+      timeLeft--;
+      var percent = ((300 - timeLeft) / 300) * 100;
+      progressBar.style.width = percent + '%';
+      timerDisplay.textContent = timeLeft + ' sekund';
+      if(timeLeft <= 0){
+        clearInterval(interval);
+        location.reload();
+      }
+    }, 1000);
+    // Opcjonalnie wyślij formularz AJAX
+    fetch(this.action, { method: 'POST' })
+      .then(function(response){ /* opcjonalna obsługa odpowiedzi */ })
+      .catch(function(error){ console.error('Błąd aktualizacji systemu:', error); });
+  });
+
+  // Firmware update: Po kliknięciu w formularz firmware update wyświetl dodatkowy div z przyciskiem restartu
+  document.getElementById('firmware-update-form').addEventListener('submit', function(e) {
+    e.preventDefault();  // Zatrzymaj standardowe wysłanie formularza
+    fetch(this.action, { method: 'POST' })
+      .then(function(response){ /* opcjonalna obsługa odpowiedzi */ })
+      .catch(function(error){ console.error('Błąd aktualizacji firmware:', error); });
+    document.getElementById('firmware-restart-div').style.display = 'block';
+  });
+
+  // Restart urządzenia: Po kliknięciu przycisku restart wysyłamy żądanie POST do endpointu restart_device
+  document.getElementById('restart-device-btn').addEventListener('click', function() {
+    fetch('{{ url_for("restart_device", device_id=device.id) }}', {
+      method: 'POST'
+    }).then(function(response){
+      if(response.ok){
+        alert('Komenda reboot wysłana.');
+        location.reload();
+      } else {
+        alert('Błąd podczas wysyłania komendy reboot.');
+      }
+    }).catch(function(error){
+      alert('Błąd: ' + error);
+    });
+  });
+</script>
 {% endblock %}

templates/devices.html

@@ -38,16 +38,23 @@
         </td>
         <td>{{ device.last_check.strftime('%Y-%m-%d %H:%M:%S') if device.last_check else 'Brak' }}</td>
         <td>
-          {% if device.update_required %}
+          {% if device.update_required or (device.current_firmware and device.upgrade_firmware and device.current_firmware != device.upgrade_firmware) %}
-            <span class="badge bg-danger">Wymaga aktualizacji</span>
+          {% if device.update_required and (device.current_firmware and device.upgrade_firmware and device.current_firmware != device.upgrade_firmware) %}
+            <span class="badge bg-danger">Wymaga aktualizacji <small>(system i firmware)</small></span>
+          {% elif device.update_required %}
+            <span class="badge bg-danger">Wymaga aktualizacji <small>(system)</small></span>
           {% else %}
-            <span class="badge bg-success">Aktualny</span>
+            <span class="badge bg-danger">Wymaga aktualizacji <small>(firmware)</small></span>
           {% endif %}
+        {% else %}
+          <span class="badge bg-success">Aktualny</span>
+        {% endif %}
         </td>
         <td>
           <small>
             <strong>System:</strong> {{ device.current_version or 'Brak' }}<br>
-            <strong>Firmware:</strong> {{ device.current_firmware or 'Brak' }}
+            <strong>Firmware:</strong> {{ device.current_firmware or 'Brak' }}<br>
+            <strong>Upgrade Firmware:</strong> {{ device.upgrade_firmware or 'N/A' }}
           </small>
         </td>
         <td>

templates/index.html

@@ -3,7 +3,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 RouterOS Update</h1>
       <p class="lead">Zarządzaj aktualizacjami swoich urządzeń RouterOS w prosty sposób.</p>
       <div class="mt-4">

templates/routeros_changelog.html

@@ -0,0 +1,69 @@
+{% extends "base.html" %}
+{% block title %}Changelog RouterOS – Kanały publikacji{% endblock %}
+{% block content %}
+<div class="container py-4">
+  <h2 class="mb-4">Changelog RouterOS według kanałów publikacji</h2>
+  <div class="row">
+    <!-- Sekcja Stable -->
+    <div class="col-md-4">
+      <h3 class="text-success">Stable</h3>
+      {% for entry in entries_stable %}
+        <div class="card mb-3">
+          <div class="card-header bg-success text-white">
+            <h5 class="mb-0">
+              {{ entry.version }} 
+              <small>({{ entry.timestamp.strftime('%Y-%b-%d') }})</small>
+            </h5>
+          </div>
+          <div class="card-body">
+            <pre style="white-space: pre-wrap;">{{ entry.details }}</pre>
+          </div>
+        </div>
+      {% else %}
+        <p>Brak wpisów.</p>
+      {% endfor %}
+    </div>
+    <!-- Sekcja RC -->
+    <div class="col-md-4">
+      <h3 class="text-warning">RC</h3>
+      {% for entry in entries_rc %}
+        <div class="card mb-3">
+          <div class="card-header bg-warning text-white">
+            <h5 class="mb-0">
+              {{ entry.version }} 
+              <small>({{ entry.timestamp.strftime('%Y-%b-%d') }})</small>
+            </h5>
+          </div>
+          <div class="card-body">
+            <pre style="white-space: pre-wrap;">{{ entry.details }}</pre>
+          </div>
+        </div>
+      {% else %}
+        <p>Brak wpisów.</p>
+      {% endfor %}
+    </div>
+    <!-- Sekcja Beta -->
+    <div class="col-md-4">
+      <h3 class="text-info">Beta</h3>
+      {% for entry in entries_beta %}
+        <div class="card mb-3">
+          <div class="card-header bg-info text-white">
+            <h5 class="mb-0">
+              {{ entry.version }} 
+              <small>({{ entry.timestamp.strftime('%Y-%b-%d') }})</small>
+            </h5>
+          </div>
+          <div class="card-body">
+            <pre style="white-space: pre-wrap;">{{ entry.details }}</pre>
+          </div>
+        </div>
+      {% else %}
+        <p>Brak wpisów.</p>
+      {% endfor %}
+    </div>
+  </div>
+  <div class="mt-4">
+    <a href="{{ url_for('dashboard') }}" class="btn btn-secondary">Powrót do dashboardu</a>
+  </div>
+</div>
+{% endblock %}