Update docker-compose.yml

Dockerfile

@@ -1,11 +1,7 @@
 FROM python:3.13-slim
-
 WORKDIR /app
-
+COPY requirements.txt requirements.txt
-COPY requirements.txt .
-RUN pip install --upgrade pip
 RUN pip install --no-cache-dir -r requirements.txt
-
 COPY . .
-
+RUN chmod +x run_waitress.py
-CMD ["python", "run_waitress.py"]
+ENTRYPOINT ["python3", "run_waitress.py"]

app.py

@@ -26,6 +26,9 @@ try:
 except ImportError:
     date_parser = None
 
+from concurrent.futures import ThreadPoolExecutor, as_completed
+
+logging.basicConfig(level=logging.INFO)
 
 # Konfiguracja aplikacji
 app = Flask(__name__)
@@ -70,7 +73,6 @@ class Device(db.Model):
     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)
-
 class Settings(db.Model):
     id = db.Column(db.Integer, primary_key=True)
     pushover_user_key = db.Column(db.String(255))
@@ -99,7 +101,6 @@ class UpdateHistory(db.Model):
     update_type = db.Column(db.String(50))
     details = db.Column(db.Text)
     device = db.relationship('Device', backref='update_histories')
-
 class Anomaly(db.Model):
     id = db.Column(db.Integer, primary_key=True)
     device_id = db.Column(db.Integer, db.ForeignKey('device.id'), nullable=True)
@@ -107,7 +108,6 @@ class Anomaly(db.Model):
     description = db.Column(db.Text)
     resolved = db.Column(db.Boolean, default=False)
     device = db.relationship('Device', backref='anomalies')
-
 class ChangelogEntry(db.Model):
     id = db.Column(db.Integer, primary_key=True)
     version = db.Column(db.String(50), nullable=False)
@@ -125,19 +125,16 @@ def load_user(user_id):
     return User.query.get(int(user_id))
 
 # FUNKCJE POWIADOMIEŃ
-
 def send_pushover_notification(user, message):
-    # Sprawdzamy, czy użytkownik posiada ustawienia oraz wymagane pola
     if not user.settings or not user.settings.pushover_enabled or not user.settings.pushover_user_key or not user.settings.pushover_token:
         return
     data = {
-        "token": user.settings.pushover_token,  # Używamy pushover_token z ustawień
+        "token": user.settings.pushover_token,
         "user": user.settings.pushover_user_key,
         "message": message
     }
     try:
         r = requests.post("https://api.pushover.net/1/messages.json", data=data)
-        # Możesz dodać logowanie odpowiedzi, jeśli potrzebne
     except Exception as e:
         print("Błąd przy wysyłaniu powiadomienia Pushover:", e)
 
@@ -168,8 +165,7 @@ def check_device_update(device):
     update_available = False
     current_version = None
     current_firmware = None
-    upgrade_firmware = None  # Nowa zmienna
+    upgrade_firmware = None
-
     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(
@@ -293,7 +289,7 @@ def get_email_template(subject, message):
             <p>{message}</p>
           </div>
           <div class="footer">
-            <p>Wiadomość wygenerowana automatycznie przez system RouterOS Backup.</p>
+            <p>Wiadomość wygenerowana automatycznie przez system RouterOS Update</p>
           </div>
         </div>
       </body>
@@ -381,39 +377,110 @@ def get_release_type(version_text):
     else:
          return "stable"
 
+@app.template_filter('format_version')
+def format_version(value):
+    # Krok 1: Usuń wszystko w nawiasach (np. „(2025-Feb-12 11:20)”).
+    value = re.sub(r'\(.*?\)', '', value).strip()
+
+    # Krok 2: Spróbuj dopasować strukturę: major.minor(.patch)?(beta|rc)(num)?
+    #   1) major (np. 7)
+    #   2) minor (np. 18)
+    #   3) patch (np. 20)
+    #   4) suffix (beta|rc)
+    #   5) suffixnum (np. 2025)
+    pattern = r'^(\d+)'              # grupa 1: major
+    pattern += r'(?:\.(\d+))?'       # grupa 2: minor (opcjonalnie)
+    pattern += r'(?:\.(\d+))?'       # grupa 3: patch (opcjonalnie)
+    pattern += r'(?:(beta|rc)(\d+))?'# grupa 4 i 5: beta|rc + numer (opcjonalnie)
+
+    match = re.match(pattern, value)
+    if not match:
+        # Jeśli nie uda się dopasować, zwracamy oryginał
+        return value
+
+    major, minor, patch, suffix, suffixnum = match.groups()
+
+    # Funkcja pomocnicza do przycinania łańcucha cyfr do maksymalnie 2 znaków
+    def truncate_2_digits(num_str):
+        return num_str[:2] if len(num_str) > 2 else num_str
+
+    # Składamy główne części wersji
+    result = major
+    if minor:
+        # np. "182025" → "18"
+        result += '.' + truncate_2_digits(minor)
+    if patch:
+        # np. "182025" → "18"
+        result += '.' + truncate_2_digits(patch)
+
+    if suffix:
+        # Dodajemy samo "beta"/"rc"
+        result += suffix
+        if suffixnum:
+            # 1) Najpierw sprawdźmy, czy w numerze sufiksu jest (zlepiony) rok, np. "22025" → "2" i "2025"
+            #    Wzorzec: do 2 cyfr + "20xx", np. "14" + "2025", "2" + "2025" itd.
+            m_year = re.match(r'^(\d{1,2})(20\d{2})$', suffixnum)
+            if m_year:
+                # Jeśli tak, zostawiamy tylko pierwszą grupę (np. "14" z "14"+"2025")
+                suffixnum = m_year.group(1)
+
+            # 2) Ostatecznie przycinamy do 2 cyfr (jeśli ktoś wpisał np. "beta123")
+            suffixnum = truncate_2_digits(suffixnum)
+
+            result += suffixnum
+
+    return result
+
+@app.template_global()
+def bootstrap_alert_category(cat):
+    mapping = {
+        'error': 'danger',
+        'fail': 'danger',
+        'warning': 'warning',
+        'warn': 'warning',
+        'ok': 'success',
+        'success': 'success',
+        'info': 'info'
+    }
+    return mapping.get(cat.lower(), 'info')
+
 def fetch_changelogs(force=False):
     changelog_url = "https://mikrotik.com/download/changelogs"
     current_date = datetime.utcnow()
 
-    try:
+    def process_section(section):
-        logging.info(f"Pobieranie changelogów z {changelog_url}...")
-        response = requests.get(changelog_url, timeout=10)
-        response.raise_for_status()
-        soup = BeautifulSoup(response.text, "html.parser")
-        changelog_sections = soup.find_all("li", class_="accordion-navigation")
-        logging.info(f"Znaleziono {len(changelog_sections)} sekcji changelogów.")
-
-        new_entries = 0
-        for section in changelog_sections:
         a_tag = section.find("a")
         if not a_tag:
-                continue
+            return None
 
         raw_text = a_tag.get_text(strip=True)
-            match = re.match(r"([0-9.]+[a-zA-Z0-9]*)", raw_text)
+        logging.info(f"raw_text: {raw_text}")
-            version_text = match.group(1) if match else raw_text
+
+        # Najpierw próbujemy znaleźć wersję za pomocą wzorca z "in"
+        match = re.search(r"in\s+(\d+\.\d+(?:\.\d+)?(?:beta|rc)?\d*)", raw_text)
+        if match:
+            version_text = match.group(1)
+            logging.info(f"Parsed version (pattern 1): {version_text}")
+        else:
+            # Jeśli nie znaleziono, próbujemy wychwycić wersję na początku łańcucha z dołączoną datą
+            match = re.match(r"^(\d+\.\d+(?:\.\d+)?(?:beta|rc)?\d*)(\d{4}-\d{2}-\d{2})", raw_text)
+            if match:
+                version_text = match.group(1)
+                logging.info(f"Parsed version (pattern 2): {version_text}")
+            else:
+                version_text = raw_text
+                logging.info("Brak dopasowania regex, używam raw_text jako wersji")
 
         # Pomijamy wersje, które nie zaczynają się od "6." lub "7."
         if not (version_text.startswith("6.") or version_text.startswith("7.")):
             logging.info(f"Pomijam wersję {version_text} – nie jest 6.x ani 7.x")
-                continue
+            return None
 
         details_div = section.find("div", class_="content")
         changelog_file_url = details_div.get("data-url") if details_div else None
-
         if not changelog_file_url:
             logging.warning(f"Brak URL changeloga dla wersji {version_text}")
-                continue
+            return None
 
         try:
             changelog_response = requests.get(changelog_file_url, timeout=10)
@@ -422,36 +489,62 @@ def fetch_changelogs(force=False):
 
             if not changelog_lines:
                 logging.warning(f"Pusty changelog dla wersji {version_text}")
-                    continue
+                return None
 
             first_line = changelog_lines[0].strip()
             release_date_dt = parse_release_date(first_line)
             if release_date_dt is None:
                 logging.warning(f"Nie udało się wyłuskać daty dla wersji {version_text}, pomijam ten changelog")
-                    continue  # Pomijamy wpis bez daty
+                return None
 
             changelog_text = "\n".join(changelog_lines).strip()
         except Exception as e:
             logging.error(f"Błąd pobierania changeloga z {changelog_file_url}: {e}")
-                continue
+            return None
 
-            # Filtrowanie: dla 7.x pomijamy wersje starsze niż 1 rok, dla 6.x starsze niż 2 lata
+        # Filtrowanie według daty: dla 7.x pomijamy wersje starsze niż 1 rok, dla 6.x starsze niż 2 lata
         if version_text.startswith("7.") and release_date_dt < (current_date - timedelta(days=365)):
             logging.info(f"Pomijam wersję {version_text} - starsza niż 1 rok")
-                continue
+            return None
         if version_text.startswith("6.") and release_date_dt < (current_date - timedelta(days=730)):
             logging.info(f"Pomijam wersję {version_text} - starsza niż 2 lata")
-                continue
+            return None
 
-            # Określenie typu wydania (stable, rc, beta)
         release_type = get_release_type(version_text)
+        return {
+            "version": version_text,
+            "details": changelog_text,
+            "category": "6.x" if version_text.startswith("6.") else "7.x",
+            "timestamp": release_date_dt,
+            "release_type": release_type
+        }
 
+    try:
+        logging.info(f"Pobieranie changelogów z {changelog_url}...")
+        response = requests.get(changelog_url, timeout=30)
+        response.raise_for_status()
+        soup = BeautifulSoup(response.text, "html.parser")
+        changelog_sections = soup.find_all("li", class_="accordion-navigation")
+        logging.info(f"Znaleziono {len(changelog_sections)} sekcji changelogów.")
+
+        new_entries = 0
+        results = []
+        # Używamy równoległego przetwarzania sekcji
+        with ThreadPoolExecutor(max_workers=8) as executor:
+            futures = [executor.submit(process_section, section) for section in changelog_sections]
+            for future in as_completed(futures):
+                result = future.result()
+                if result is not None:
+                    results.append(result)
+
+        # Dodajemy wyniki do bazy danych
+        for entry in results:
             new_entry = ChangelogEntry(
-                version=version_text,
+                version=entry["version"],
-                details=changelog_text,
+                details=entry["details"],
-                category="6.x" if version_text.startswith("6.") else "7.x",
+                category=entry["category"],
-                timestamp=release_date_dt,
+                timestamp=entry["timestamp"],
-                release_type=release_type
+                release_type=entry["release_type"]
             )
             db.session.add(new_entry)
             new_entries += 1
@@ -461,6 +554,8 @@ def fetch_changelogs(force=False):
     except Exception as e:
         logging.error(f"Błąd podczas pobierania changelogów: {e}")
 
+
+
 def detect_anomalies():
     with app.app_context():
         # Ustal okres analizy, np. ostatnie 24 godziny
@@ -532,14 +627,6 @@ with app.app_context():
 scheduler.start()
 
 # ROUTY APLIKACJI
-
-@app.template_filter('format_version')
-def format_version(value):
-    import re
-    # Zamieniamy ciąg, który składa się z: liczba.część_1 + czterocyfrowy rok, na samą część_1.
-    # Przykładowo: "7.182025" => "7.18"
-    return re.sub(r"(\d+\.\d+)\d{4}", r"\1", value)
-
 @app.route('/')
 def index():
     if current_user.is_authenticated:
@@ -581,7 +668,7 @@ def register():
         password = request.form['password']
         # Prosta walidacja – warto rozszerzyć
         if User.query.filter_by(username=username).first():
-            flash("Użytkownik o tej nazwie już istnieje.")
+            flash("Użytkownik o tej nazwie już istnieje.", "error")
             return redirect(url_for('register'))
         new_user = User(username=username, email=email)
         new_user.set_password(password)
@@ -591,7 +678,7 @@ def register():
         default_settings = Settings(user_id=new_user.id, check_interval=60)
         db.session.add(default_settings)
         db.session.commit()
-        flash("Rejestracja zakończona. Możesz się zalogować.")
+        flash("Rejestracja zakończona. Możesz się zalogować.", "success")
         return redirect(url_for('login'))
     return render_template('register.html')
 
@@ -604,10 +691,10 @@ def login():
         user = User.query.filter_by(username=username).first()
         if user and user.check_password(password):
             login_user(user)
-            flash("Zalogowano pomyślnie.")
+            flash("Zalogowano pomyślnie.", "success")
             return redirect(url_for('dashboard'))
         else:
-            flash("Nieprawidłowa nazwa użytkownika lub hasło.")
+            flash("Nieprawidłowa nazwa użytkownika lub hasło.", "error")
     return render_template('login.html')
 
 # Wylogowanie
@@ -615,7 +702,7 @@ def login():
 @login_required
 def logout():
     logout_user()
-    flash("Wylogowano.")
+    flash("Wylogowano.", "success")
     return redirect(url_for('index'))
 
 # Lista urządzeń użytkownika
@@ -649,7 +736,7 @@ def add_device():
         )
         db.session.add(new_device)
         db.session.commit()
-        flash("Urządzenie dodane.")
+        flash("Urządzenie dodane.", "success")
         return redirect(url_for('devices'))
     return render_template('add_device.html')
 
@@ -659,7 +746,7 @@ def add_device():
 def device_detail(device_id):
     device = Device.query.get_or_404(device_id)
     if device.user_id != current_user.id:
-        flash("Brak dostępu.")
+        flash("Brak dostępu.", "error")
         return redirect(url_for('devices'))
     resource_data = {}
     try:
@@ -723,7 +810,7 @@ def settings():
         except Exception as e:
             app.logger.error(f"Error rescheduling job: {e}")
 
-        flash("Ustawienia zapisane.")
+        flash("Ustawienia zapisane.", "success")
         return redirect(url_for('settings'))
     return render_template('settings.html', settings=user_settings)
 
@@ -732,7 +819,7 @@ def settings():
 def edit_device(device_id):
     device = Device.query.get_or_404(device_id)
     if device.user_id != current_user.id:
-        flash("Brak dostępu.")
+        flash("Brak dostępu.", "error")
         return redirect(url_for('devices'))
     if request.method == 'POST':
         device.name = request.form.get('name', device.name)
@@ -744,7 +831,7 @@ def edit_device(device_id):
         device.use_ssl = bool(request.form.get('use_ssl'))
         device.ssl_insecure = bool(request.form.get('ssl_insecure'))
         db.session.commit()
-        flash("Urządzenie zaktualizowane.")
+        flash("Urządzenie zaktualizowane.", "success")
         return redirect(url_for('devices'))
     return render_template('edit_device.html', device=device)
 
@@ -753,7 +840,7 @@ def edit_device(device_id):
 def force_check(device_id):
     device = Device.query.get_or_404(device_id)
     if device.user_id != current_user.id:
-        flash("Brak dostępu.")
+        flash("Brak dostępu.", "error")
         return redirect(url_for('devices'))
     result, update_available, current_version, current_firmware, upgrade_firmware = check_device_update(device)
     device.last_log = result
@@ -763,7 +850,7 @@ def force_check(device_id):
     device.current_firmware = current_firmware
     device.upgrade_firmware = upgrade_firmware
     db.session.commit()
-    flash("Sprawdzenie urządzenia zakończone.")
+    flash("Sprawdzenie urządzenia zakończone.", "success")
     return redirect(url_for('devices'))
 
 @app.route('/device/<int:device_id>/update', methods=['POST'])
@@ -771,7 +858,7 @@ def force_check(device_id):
 def update_device(device_id):
     device = Device.query.get_or_404(device_id)
     if device.user_id != current_user.id:
-        flash("Brak dostępu.")
+        flash("Brak dostępu.", "error")
         return redirect(url_for('devices'))
     try:
         app.logger.debug(f"Initiating system update for device {device.ip}")
@@ -802,11 +889,11 @@ def update_device(device_id):
         db.session.add(history)
         db.session.commit()
 
-        flash("Aktualizacja systemu została rozpoczęta.")
+        flash("Aktualizacja systemu została rozpoczęta.", "success")
         app.logger.debug("System update command executed successfully")
     except Exception as e:
         app.logger.error(f"Błąd podczas aktualizacji urządzenia {device.ip}: {e}", exc_info=True)
-        flash(f"Błąd podczas aktualizacji: {e}")
+        flash(f"Błąd podczas aktualizacji: {e}", "error")
     return redirect(url_for('device_detail', device_id=device.id))
 
 @app.route('/device/<int:device_id>/update_firmware', methods=['POST'])
@@ -814,7 +901,7 @@ def update_device(device_id):
 def update_firmware(device_id):
     device = Device.query.get_or_404(device_id)
     if device.user_id != current_user.id:
-        flash("Brak dostępu.")
+        flash("Brak dostępu.", "error")
         return redirect(url_for('devices'))
     try:
         api = librouteros.connect(
@@ -835,9 +922,9 @@ def update_firmware(device_id):
         db.session.add(history)
         db.session.commit()
 
-        flash("Aktualizacja firmware została rozpoczęta.")
+        flash("Aktualizacja firmware została rozpoczęta.", "success")
     except Exception as e:
-        flash(f"Błąd podczas aktualizacji firmware: {e}")
+        flash(f"Błąd podczas aktualizacji firmware: {e}", "error")
     return redirect(url_for('device_detail', device_id=device.id))
 
 @app.route('/test_pushover', methods=['POST'])
@@ -845,7 +932,7 @@ def update_firmware(device_id):
 def test_pushover():
     message = "To jest testowe powiadomienie Pushover z RouterOS Update."
     send_pushover_notification(current_user, message)
-    flash("Test powiadomienia Pushover wysłany.")
+    flash("Test powiadomienia Pushover wysłany.", "success")
     return redirect(url_for('settings'))
 
 @app.route('/test_email', methods=['POST'])
@@ -854,7 +941,7 @@ def test_email():
     subject = "Testowy E-mail z RouterOS Update"
     message = "To jest testowa wiadomość e-mail wysłana z RouterOS Update."
     send_email_notification(current_user, subject, message)
-    flash("Testowy e-mail wysłany.")
+    flash("Testowy e-mail wysłany.", "success")
     return redirect(url_for('settings'))
 
 @app.route('/change_password', methods=['GET', 'POST'])
@@ -865,14 +952,14 @@ def change_password():
         new_password = request.form.get('new_password')
         confirm_password = request.form.get('confirm_password')
         if not current_user.check_password(old_password):
-            flash("Stare hasło jest nieprawidłowe.")
+            flash("Stare hasło jest nieprawidłowe.", "error")
             return redirect(url_for('reset_password'))
         if new_password != confirm_password:
-            flash("Nowe hasło i potwierdzenie nie są zgodne.")
+            flash("Nowe hasło i potwierdzenie nie są zgodne.", "warning")
             return redirect(url_for('reset_password'))
         current_user.set_password(new_password)
         db.session.commit()
-        flash("Hasło zostało zresetowane.")
+        flash("Hasło zostało zresetowane.", "success")
         return redirect(url_for('reset_password'))
     return render_template('change_password.html')
 
@@ -881,17 +968,17 @@ def change_password():
 def clean_logs():
     days = request.form.get('days')
     if not days:
-        flash("Podaj liczbę dni.")
+        flash("Podaj liczbę dni.", "warning")
         return redirect(url_for('logs'))
     try:
         days = int(days)
     except ValueError:
-        flash("Niepoprawna wartość dni.")
+        flash("Niepoprawna wartość dni.", "warning")
         return redirect(url_for('logs'))
     cutoff = datetime.utcnow() - timedelta(days=days)
     num_deleted = Log.query.filter(Log.user_id == current_user.id, Log.timestamp < cutoff).delete()
     db.session.commit()
-    flash(f"Usunięto {num_deleted} logów starszych niż {days} dni.")
+    flash(f"Usunięto {num_deleted} logów starszych niż {days} dni.", "success")
     return redirect(url_for('logs'))
 
 @app.route('/update_history')
@@ -911,7 +998,7 @@ def anomalies():
 def update_selected_devices():
     selected_ids = request.form.getlist('selected_devices')
     if not selected_ids:
-        flash("Nie wybrano żadnych urządzeń.")
+        flash("Nie wybrano żadnych urządzeń.", "error")
         return redirect(url_for('devices'))
     for device_id in selected_ids:
         device = Device.query.get(device_id)
@@ -927,7 +1014,7 @@ def update_selected_devices():
             log_entry = Log(message=result, device_id=device.id, user_id=device.user_id)
             db.session.add(log_entry)
             db.session.commit()
-    flash("Wybrane urządzenia zostały zaktualizowane.")
+    flash("Wybrane urządzenia zostały zaktualizowane.", "success")
     return redirect(url_for('devices'))
 
 @app.route('/routeros_changelog')
@@ -972,7 +1059,7 @@ def force_fetch_changelogs():
 def restart_device(device_id):
     device = Device.query.get_or_404(device_id)
     if device.user_id != current_user.id:
-        flash("Brak dostępu.")
+        flash("Brak dostępu.", "error")
         return redirect(url_for('devices'))
     try:
         api = librouteros.connect(
@@ -983,10 +1070,11 @@ def restart_device(device_id):
             timeout=15
         )
         # Wysyłamy komendę reboot
-        list(api('/system/reboot', {'confirm': ''}))
+        list(api('/system/reboot'))
-        flash("Komenda reboot została wysłana.")
+
+        flash("Komenda reboot została wysłana.", "success")
     except Exception as e:
-        flash(f"Błąd podczas wysyłania komendy reboot: {e}")
+        flash(f"Błąd podczas wysyłania komendy reboot: {e}", "error")
     return ('', 204)  # Zwracamy odpowiedź bez treści dla żądania AJAX
 
 # Zamknięcie harmonogramu przy zatrzymaniu aplikacji

docker-compose.yml

@@ -1,13 +1,27 @@
-version: '3.8'
-
 services:
-  app:
+  routeros_update:
-    build: 
+    build: .
-      context: .
-      dockerfile: Dockerfile
     container_name: routeros_update
     ports:
       - "5582:5582"
-    environment:
+    healthcheck:
-      - FLASK_ENV=production
+      test:
+        [
+          "CMD",
+          "python",
+          "-c",
+          "import urllib.request; import sys; sys.exit(0) if urllib.request.urlopen('http://localhost:5582/login').getcode() == 200 else sys.exit(1)"
+        ]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 10s
+    volumes:
+      - .:/app
+      - ./instance:/app/instance
     restart: unless-stopped
+    networks: [intranet]
+
+networks:
+  intranet:
+    external: true

templates/add_device.html

@@ -1,43 +1,90 @@
 {% extends "base.html" %}
 {% block title %}Dodaj urządzenie - RouterOS Update{% endblock %}
+
+{% block extra_head %}
+<style>
+/* Styl karty w trybie ciemnym */
+body.dark-mode .card {
+  background-color: #1e1e1e;
+  color: #ccc;
+  border-color: #444;
+}
+body.dark-mode .card .card-header.bg-light {
+  background-color: #333 !important;
+  border-bottom: 1px solid #444;
+}
+</style>
+{% endblock %}
+
 {% block content %}
+<div class="container">
   <div class="row justify-content-center">
     <div class="col-md-6">
-    <h2>Dodaj nowe urządzenie</h2>
+      
+      <!-- Karta z nagłówkiem i formularzem -->
+      <div class="card border-0 shadow">
+        <div class="card-header bg-light">
+          <h4 class="mb-0">Dodaj nowe urządzenie</h4>
+        </div>
+        <div class="card-body">
           <form method="POST">
             <!-- Pole nazwy urządzenia -->
             <div class="mb-3">
               <label for="name" class="form-label">Nazwa urządzenia</label>
-        <input type="text" class="form-control" name="name" id="name" required>
+              <input type="text" class="form-control" name="name" id="name" required
+                     placeholder="np. Mikrotik w biurze">
+              <small class="text-muted">Wpisz przyjazną nazwę, np. „Mikrotik #1” lub „Router na u Kocura.</small>
             </div>
+            
+            <!-- Adres IP -->
             <div class="mb-3">
               <label for="ip" class="form-label">Adres IP</label>
-        <input type="text" class="form-control" name="ip" id="ip" required>
+              <input type="text" class="form-control" name="ip" id="ip" required 
+                     placeholder="np. 192.168.88.1">
+              <small class="text-muted">Adres IP lub domena urządzenia (np. mikrotik.moja-domena.pl).</small>
             </div>
+            
+            <!-- Port -->
             <div class="mb-3">
               <label for="port" class="form-label">Port</label>
               <input type="number" class="form-control" name="port" id="port" value="8728" required>
+              <small class="text-muted">Domyślnie 8728 (lub 8729 w przypadku SSL).</small>
             </div>
+            
+            <!-- Nazwa użytkownika -->
             <div class="mb-3">
               <label for="device_username" class="form-label">Nazwa użytkownika urządzenia</label>
-        <input type="text" class="form-control" name="device_username" id="device_username" required>
+              <input type="text" class="form-control" name="device_username" id="device_username" required
+                     placeholder="np. admin">
             </div>
+            
+            <!-- Hasło -->
             <div class="mb-3">
               <label for="device_password" class="form-label">Hasło urządzenia</label>
               <input type="password" class="form-control" name="device_password" id="device_password" required>
             </div>
+            
             <!-- Opcja SSL -->
             <div class="mb-3 form-check">
               <input type="checkbox" class="form-check-input" name="use_ssl" id="use_ssl">
               <label class="form-check-label" for="use_ssl">Używaj SSL</label>
             </div>
-      <!-- Opcja nie weryfikowania certyfikatu SSL -->
+            
+            <!-- Opcja braku weryfikacji certyfikatu SSL -->
             <div class="mb-3 form-check">
               <input type="checkbox" class="form-check-input" name="ssl_insecure" id="ssl_insecure">
-        <label class="form-check-label" for="ssl_insecure">Nie weryfikuj certyfikatu SSL</label>
+              <label class="form-check-label" for="ssl_insecure">
+                Nie weryfikuj certyfikatu SSL
+              </label>
             </div>
+            
+            <!-- Przycisk dodania urządzenia -->
             <button type="submit" class="btn btn-primary">Dodaj urządzenie</button>
           </form>
         </div>
       </div>
+      
+    </div>
+  </div>
+</div>
 {% endblock %}

templates/anomalies.html

@@ -1,13 +1,44 @@
 {% extends "base.html" %}
 {% block title %}Wykryte anomalie{% endblock %}
+
+{% block extra_head %}
+<style>
+/* Karta w trybie ciemnym */
+body.dark-mode .card {
+  background-color: #1e1e1e;
+  color: #ccc;
+  border-color: #444;
+}
+body.dark-mode .card .card-header.bg-light {
+  background-color: #333 !important;
+  border-bottom: 1px solid #444;
+}
+
+/* Tabela w trybie ciemnym */
+body.dark-mode .table thead {
+  background-color: #2a2a2a;
+  color: #ccc;
+}
+body.dark-mode .table-bordered > :not(caption) > * > * {
+  border-color: #444 !important;
+}
+</style>
+{% endblock %}
+
 {% block content %}
 <div class="container">
-  <h2 class="mb-4">Wykryte anomalie</h2>
+  <div class="card border-0 shadow">
-  <table class="table table-bordered">
+    <div class="card-header bg-light">
+      <h4 class="mb-0">Wykryte anomalie</h4>
+    </div>
+    <div class="card-body p-0">
+      {% if anomalies and anomalies|length > 0 %}
+        <div class="table-responsive">
+          <table class="table table-bordered table-hover table-sm align-middle mb-0">
             <thead>
               <tr>
-        <th>Data</th>
+                <th style="white-space: nowrap;">Data</th>
-        <th>Urządzenie</th>
+                <th style="white-space: nowrap;">Urządzenie</th>
                 <th>Opis</th>
                 <th>Status</th>
               </tr>
@@ -15,13 +46,35 @@
             <tbody>
             {% for anomaly in anomalies %}
               <tr>
-        <td>{{ anomaly.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</td>
+                <td style="white-space: nowrap;">
-        <td>{{ anomaly.device.name or anomaly.device.ip if anomaly.device }}</td>
+                  {{ anomaly.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}
+                </td>
+                <td>
+                  {% if anomaly.device %}
+                    {{ anomaly.device.name or anomaly.device.ip }}
+                  {% else %}
+                    <span class="text-muted">Brak</span>
+                  {% endif %}
+                </td>
                 <td>{{ anomaly.description }}</td>
-        <td>{{ 'Rozwiązana' if anomaly.resolved else 'Otwarta' }}</td>
+                <td>
+                  {% if anomaly.resolved %}
+                    <span class="badge bg-success">Rozwiązana</span>
+                  {% else %}
+                    <span class="badge bg-danger">Otwarta</span>
+                  {% endif %}
+                </td>
               </tr>
             {% endfor %}
             </tbody>
           </table>
         </div>
+      {% else %}
+        <div class="p-3">
+          <p class="mb-0">Brak aktualnych anomalii.</p>
+        </div>
+      {% endif %}
+    </div>
+  </div>
+</div>
 {% endblock %}

templates/base.html

@@ -55,7 +55,8 @@
 
       /* Alerty – pozostają bez zmian */
       .diff-add { color: green; }
-    .diff-rem { color: red; }- Tabele --- */
+      .diff-rem { color: red; }
+
       body.dark-mode table {
         background-color: #1a1a1a;
         color: #cccccc;
@@ -126,48 +127,41 @@
       }
 
       /* ========== Tryb jasny (light-mode) ========== */
-      /* --- Nawigacja (Navbar) --- */
       body.light-mode .navbar {
-        background-color: #ffffff !important;
+        background-color: #dcdcdc !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 --- */
+      footer {
-      body.light-mode .footer {
+        background-color: #f8f9fa;
-        background-color: #ffffff;
+        color: #212529;
-        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;
         }
       }
+
+      /* ========== Modal w trybie ciemny, ========== */
+      .dark-mode .modal-content {
+        background-color: #333;
+        color: #ddd;
+        border: none;
+      }
+      .dark-mode .modal-header,
+      .dark-mode .modal-footer {
+        border-color: #444;
+      }
+      .dark-mode .modal-title {
+        color: #fff;
+      }
+      .dark-mode .btn-close {
+        filter: invert(1);
+      }
     </style>
     {% block extra_head %}{% endblock %}
   </head>
@@ -238,6 +232,23 @@
         </div>
       </div>
     </nav>
+
+    <!-- Kontener do wyświetlania komunikatów flash -->
+    <div class="container mt-3">
+      {% with messages = get_flashed_messages(with_categories=True) %}
+      {% if messages %}
+        {% for category, message in messages %}
+          <!-- Zmapuj do stylu Bootstrapa -->
+          {% set bs_cat = bootstrap_alert_category(category) %}
+          <div class="alert alert-{{ bs_cat }} alert-dismissible fade show" role="alert">
+            {{ message }}
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+          </div>
+        {% endfor %}
+      {% endif %}
+    {% endwith %}    
+    </div>
+
     <main class="container my-4 flex-fill">
       {% block content %}{% endblock %}
     </main>

templates/change_password.html

@@ -1,24 +1,71 @@
 {% extends "base.html" %}
-{% block title %}Reset hasła - RouterOS Update{% endblock %}
+{% block title %}Zmiana hasła - RouterOS Update{% endblock %}
+
+{% block extra_head %}
+<style>
+/* Karta w trybie ciemnym */
+body.dark-mode .card {
+  background-color: #1e1e1e;
+  color: #ccc;
+  border-color: #444;
+}
+body.dark-mode .card .card-header.bg-light {
+  background-color: #333 !important;
+  border-bottom: 1px solid #444;
+}
+</style>
+{% endblock %}
+
 {% block content %}
+<div class="container">
   <div class="row justify-content-center">
     <div class="col-md-6">
-    <h2 class="mb-4">Zmiana hasła</h2>
+      
+      <div class="card border-0 shadow">
+        <div class="card-header bg-light">
+          <h4 class="mb-0">Zmiana hasła</h4>
+        </div>
+        <div class="card-body">
           <form method="POST">
             <div class="mb-3">
               <label for="old_password" class="form-label">Stare hasło</label>
-        <input type="password" class="form-control" name="old_password" id="old_password" required>
+              <input 
+                type="password" 
+                class="form-control" 
+                name="old_password" 
+                id="old_password" 
+                required
+                placeholder="••••••••"
+              >
             </div>
             <div class="mb-3">
               <label for="new_password" class="form-label">Nowe hasło</label>
-        <input type="password" class="form-control" name="new_password" id="new_password" required>
+              <input 
+                type="password" 
+                class="form-control" 
+                name="new_password" 
+                id="new_password" 
+                required
+                placeholder="••••••••"
+              >
             </div>
             <div class="mb-3">
               <label for="confirm_password" class="form-label">Potwierdź nowe hasło</label>
-        <input type="password" class="form-control" name="confirm_password" id="confirm_password" required>
+              <input 
+                type="password" 
+                class="form-control" 
+                name="confirm_password" 
+                id="confirm_password" 
+                required
+                placeholder="••••••••"
+              >
             </div>
             <button type="submit" class="btn btn-primary">Zresetuj hasło</button>
           </form>
         </div>
       </div>
+      
+    </div>
+  </div>
+</div>
 {% endblock %}

templates/dashboard.html

@@ -81,19 +81,27 @@
   <div class="card-header bg-light py-2">
     <h6 class="mb-0">Ostatnie zdarzenia</h6>
   </div>
-
+  <div class="card-body p-0">
     {% if recent_logs %}
       <ul class="list-group list-group-flush">
         {% for log in recent_logs %}
-        <li class="list-group-item p-1 border-top-0 border-bottom">
+          <li class="list-group-item">
-          <small class="text-muted">{{ log.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</small>
+            <!-- Data w nieco mniejszej czcionce, np. "small text-muted" -->
-          – {{ log.message|truncate(100) }}
+            <div class="small text-muted">{{ log.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</div>
+            <!-- Treść zdarzenia; "truncate(100)" żeby skrócić tekst -->
+            <div class="mt-1">
+              {{ log.message|truncate(100) }}
+            </div>
           </li>
         {% endfor %}
       </ul>
     {% else %}
-      <p class="mb-0">Brak ostatnich zdarzeń.</p>
+      <div class="p-3">
+        Brak ostatnich zdarzeń.
+      </div>
     {% endif %}
+  </div>
+</div>
 
   </div>
 </div>

templates/device_detail.html

@@ -1,14 +1,24 @@
 {% extends "base.html" %}
 {% block title %}Szczegóły urządzenia - RouterOS Update{% endblock %}
+
 {% block extra_head %}
 <style>
-    /* Stylizacja kart w trybie ciemnym */
+/* ========================
+   Tryb ciemny i styl kart
+======================== */
 body.dark-mode .card {
   background-color: #1e1e1e;
   color: #e0e0e0;
   border-color: #444;
 }
-    /* Stylizacja bloku logów – przewijalny, z odpowiednim tłem i kolorem tekstu */
+body.dark-mode .card .card-header.bg-primary,
+body.dark-mode .card .card-header.bg-secondary {
+  background-color: #333 !important;
+  border-bottom: 1px solid #444;
+}
+  
+/* Blok logów – przewijalny, zachowanie białych znaków, 
+   jasne/dark tło zgodnie z kartą */
 .log-block {
   background-color: inherit; 
   color: inherit;
@@ -19,40 +29,53 @@
   overflow-y: auto;
   white-space: pre-wrap;
 }
-    /* Stylizacja overlay dla system update */
+
-    #system-update-overlay, #reboot-progress-overlay {
+/* Overlays (system-update / reboot) */
+#system-update-overlay, 
+#reboot-progress-overlay {
   display: none;
   position: fixed;
-      top: 0;
+  top: 0; left: 0;
-      left: 0;
+  width: 100%; height: 100%;
-      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, #reboot-progress-overlay h3 {
+
+#system-update-overlay h3, 
+#reboot-progress-overlay h3 {
   margin-bottom: 20px;
 }
+
 .progress-container {
   width: 50%;
   margin: 20px auto;
   background: #444;
   border-radius: 5px;
+  overflow: hidden;
 }
 .progress-bar {
   width: 0%;
   height: 30px;
   background: #4caf50;
   border-radius: 5px;
+  transition: width 0.5s linear;
+}
+
+/* Div do firmware restart (informacja i przycisk) */
+#firmware-restart-div {
+  display: none; 
+  margin-top: 20px;
 }
 </style>
 {% endblock %}
+
 {% block content %}
-<div class="container">
+<div class="container my-4">
-  <div class="my-4">
+  
+  <!-- Nagłówek strony z nawigacją breadcrumb -->
   <h2 class="mb-3">Szczegóły urządzenia</h2>
   <nav aria-label="breadcrumb">
     <ol class="breadcrumb">
@@ -60,30 +83,35 @@
       <li class="breadcrumb-item active" aria-current="page">{{ device.ip }}</li>
     </ol>
   </nav>
-  </div>
   
-  <!-- Dwukolumnowy układ: dane urządzenia i informacje o systemie -->
+  <!-- Dwukolumnowy układ: kolumna z danymi urządzenia, kolumna z info systemu -->
   <div class="row">
     <div class="col-md-6">
-      <div class="card mb-3">
+      <div class="card border-0 shadow mb-3">
         <div class="card-header bg-primary text-white">
           Dane urządzenia
         </div>
         <div class="card-body">
           <p><strong>Adres IP:</strong> {{ device.ip }}</p>
           <p><strong>Port:</strong> {{ device.port }}</p>
-          <p><strong>Ostatnie sprawdzenie:</strong>
+          <p>
-            {% if device.last_check %}{{ device.last_check.strftime('%Y-%m-%d %H:%M:%S') }}{% else %}Brak{% endif %}
+            <strong>Ostatnie sprawdzenie:</strong>
+            {% if device.last_check %}
+              {{ device.last_check.strftime('%Y-%m-%d %H:%M:%S') }}
+            {% else %}
+              Brak
+            {% endif %}
           </p>
           <p>
             <strong>System:</strong> {{ device.current_version or 'Brak' }}<br>
             <strong>Firmware:</strong> {{ device.current_firmware or 'N/A' }}<br>
-            <strong>Upgrade Firmware:</strong> <b>{{ device.upgrade_firmware or 'N/A' }}</b>
+            <strong>Upgrade Firmware:</strong> {{ device.upgrade_firmware or 'N/A' }}
           </p>
           <p>
             <strong>Branch aktualizacji:</strong> {{ device.branch|capitalize }}
           </p>
-          <!-- Formularz zmiany branch -->
+          
+          <!-- Formularz szybkiej zmiany branch -->
           <form method="POST" action="{{ url_for('edit_device', device_id=device.id) }}" class="mt-3">
             <div class="input-group">
               <select class="form-select" name="branch">
@@ -91,14 +119,15 @@
                 <option value="dev" {% if device.branch == 'dev' %}selected{% endif %}>Dev</option>
                 <option value="beta" {% if device.branch == 'beta' %}selected{% endif %}>Beta</option>
               </select>
-              <button type="submit" class="btn btn-primary ms-2">Zmień branch</button>
+              <button type="submit" class="btn btn-primary">Zmień branch</button>
             </div>
           </form>
         </div>
       </div>
     </div>
+    
     <div class="col-md-6">
-      <div class="card mb-3">
+      <div class="card border-0 shadow mb-3">
         <div class="card-header bg-primary text-white">
           Informacje o systemie
         </div>
@@ -109,8 +138,14 @@
             </div>
           {% else %}
             <p><strong>Wersja systemu:</strong> {{ resource.version or 'Brak danych' }}</p>
-            <p><strong>Czas pracy:</strong> {{ resource.uptime or 'Brak danych' }}</p>
+            <p><strong>Czas pracy (uptime):</strong> {{ resource.uptime or 'Brak danych' }}</p>
-            <p><strong>Obciążenie CPU:</strong> {{ resource['cpu-load'] or 'Brak' }}%</p>
+            <p><strong>Obciążenie CPU:</strong> 
+              {% if resource['cpu-load'] is defined %}
+                {{ resource['cpu-load'] }}%
+              {% else %}
+                Brak danych
+              {% endif %}
+            </p>
             <p>
               <strong>Pamięć:</strong>
               {% if resource['free-memory'] and resource['total-memory'] %}
@@ -119,18 +154,23 @@
                 Brak danych
               {% endif %}
             </p>
-            <p><strong>Wolne miejsce na dysku:</strong> {{ resource['free-hdd-space'] or 'Brak danych' }}</p>
+            <p>
+              <strong>Wolne miejsce na dysku:</strong>
+              {% if resource['free-hdd-space'] %}
+                {{ resource['free-hdd-space'] }}
+              {% else %}
+                Brak danych
+              {% endif %}
+            </p>
           {% endif %}
         </div>
       </div>
     </div>
   </div>
   
-  <!-- Logi urządzenia jako pojedynczy blok tekstu -->
+  <!-- Logi urządzenia -->
-  <div class="card mb-3">
+  <div class="card border-0 shadow mb-3">
-    <div class="card-header bg-secondary text-white">
+    <div class="card-header bg-secondary text-white">Logi urządzenia</div>
-      Logi urządzenia
-    </div>
     <div class="card-body">
       {% if device.last_log %}
         <div class="log-block">
@@ -142,32 +182,40 @@
     </div>
   </div>
   
-  <!-- Akcje urządzenia -->
+  <!-- Akcje urządzenia: aktualizacje, wymuszenie sprawdzenia -->
-  <div class="mb-4">
+  <div class="mb-4 d-flex flex-wrap gap-2">
-    <div class="d-flex flex-wrap gap-2">
+    <!-- Aktualizacja systemu -->
     <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>
+    <!-- Aktualizacja firmware -->
     <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>
+    <!-- Wymuszenie sprawdzenia -->
     <a href="{{ url_for('force_check', device_id=device.id) }}" class="btn btn-secondary">Wymuś sprawdzenie</a>
-    </div>
+    <!-- Link powrotny do listy -->
-    <div class="mt-3">
+    <a href="{{ url_for('devices') }}" class="btn btn-outline-secondary ms-auto">Powrót</a>
-      <a href="{{ url_for('devices') }}" class="btn btn-outline-secondary">Powrót do listy urządzeń</a>
-    </div>
   </div>
   
-  <!-- Overlay dla system update (5 minut) -->
+  <!-- Miejsce na komunikat o konieczności rebootu po firmware update -->
+  <div id="firmware-restart-div">
+    <div class="alert alert-warning mb-3">
+      Urządzenie wymaga restartu po aktualizacji firmware.
+    </div>
+    <button id="restart-device-btn" class="btn btn-danger">Restart urządzenia</button>
+  </div>
+  
+  <!-- Overlay: system update (4 min. można dać 5 min) -->
   <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>
+    <p id="system-update-timer">240 sekund</p>
   </div>
 
-  <!-- Overlay dla reboot progress (2 minuty) -->
+  <!-- Overlay: reboot po restarcie (2 min) -->
   <div id="reboot-progress-overlay">
     <h3>Restart urządzenia...</h3>
     <div class="progress-container">
@@ -175,26 +223,22 @@
     </div>
     <p id="reboot-timer">120 sekund</p>
   </div>
-  
-  <!-- Div dla firmware restart (komunikat z przyciskiem restartu) -->
-  <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
+// ========================
+// Obsługa aktualizacji systemu
+// ========================
 document.getElementById('system-update-form').addEventListener('submit', function(e) {
-    e.preventDefault();  // Zatrzymaj standardowe wysłanie formularza
+  e.preventDefault(); // powstrzymujemy normalne przeładowanie
+  // Pokaż overlay postępu
   var overlay = document.getElementById('system-update-overlay');
   overlay.style.display = 'block';
-    var timeLeft = 240;
+  
+  var timeLeft = 240; // 4 min
   var progressBar = document.getElementById('system-update-progress');
   var timerDisplay = document.getElementById('system-update-timer');
+  
   var interval = setInterval(function(){
     timeLeft--;
     var percent = ((240 - timeLeft) / 240) * 100;
@@ -202,65 +246,62 @@
     timerDisplay.textContent = timeLeft + ' sekund';
     if(timeLeft <= 0){
       clearInterval(interval);
-        // Po zakończeniu 5 minut wykonaj polecenie "Wymuś sprawdzenie"
+      // Po zakończeniu: fetch do force_check, potem reload
       fetch('{{ url_for("force_check", device_id=device.id) }}', { method: 'GET' })
-          .then(function(response){
+        .then(()=> location.reload())
-            location.reload();
+        .catch((err)=> console.error('Błąd force check:', err));
-          })
-          .catch(function(error){ console.error('Błąd force check:', error); });
     }
   }, 1000);
-    // Opcjonalnie wysyłamy formularz AJAX, aby rozpocząć aktualizację systemu
+  
+  // Wyślij POST do update
   fetch(this.action, { method: 'POST' })
-      .then(function(response){ /* opcjonalna obsługa odpowiedzi */ })
+    .catch(err => console.error('Błąd aktualizacji systemu:', err));
-      .catch(function(error){ console.error('Błąd aktualizacji systemu:', error); });
 });
 
-  // Firmware update: Po kliknięciu w formularz firmware update
+// ========================
+// Obsługa aktualizacji firmware
+// ========================
 document.getElementById('firmware-update-form').addEventListener('submit', function(e) {
-    e.preventDefault();  // Zatrzymaj standardowe wysłanie formularza
+  e.preventDefault();
   fetch(this.action, { method: 'POST' })
-      .then(function(response){ /* opcjonalna obsługa odpowiedzi */ })
+    .catch(err => console.error('Błąd aktualizacji firmware:', err));
-      .catch(function(error){ console.error('Błąd aktualizacji firmware:', error); });
+  // Pokazujemy div z przyciskiem do restartu
-    // Pokaż div z komunikatem o reboot i przyciskiem restartu
   document.getElementById('firmware-restart-div').style.display = 'block';
 });
 
-  // Restart urządzenia: Po kliknięciu przycisku restart wysyłamy komendę reboot,
+// ========================
-  // a następnie pokazujemy overlay z 2-minutowym paskiem postępu
+// Obsługa reboot
+// ========================
 document.getElementById('restart-device-btn').addEventListener('click', function(){
-    fetch('{{ url_for("restart_device", device_id=device.id) }}', {
+  fetch('{{ url_for("restart_device", device_id=device.id) }}', { method: 'POST' })
-      method: 'POST'
+    .then(response => {
-    }).then(function(response){
       if (response.ok) {
         alert('Komenda reboot wysłana.');
-        // Pokaż overlay dla reboot progress
+        // Pokaż overlay z 2 min postępu
-        var rebootOverlay = document.getElementById('reboot-progress-overlay');
+        var overlay = document.getElementById('reboot-progress-overlay');
-        rebootOverlay.style.display = 'block';
+        overlay.style.display = 'block';
-        var timeLeft = 90; 
+        
+        var timeLeft = 120; // 2 min
         var progressBar = document.getElementById('reboot-progress-bar');
         var timerDisplay = document.getElementById('reboot-timer');
         var interval = setInterval(function(){
           timeLeft--;
-          var percent = ((90 - timeLeft) / 90) * 100;
+          var percent = ((120 - timeLeft) / 120) * 100;
           progressBar.style.width = percent + '%';
           timerDisplay.textContent = timeLeft + ' sekund';
           if(timeLeft <= 0){
             clearInterval(interval);
-            // Po 2 minutach wykonaj polecenie "Wymuś sprawdzenie"
+            // Po zakończeniu: fetch do force_check
             fetch('{{ url_for("force_check", device_id=device.id) }}', { method: 'GET' })
-              .then(function(response){
+              .then(()=> location.reload())
-                location.reload();
+              .catch(err => console.error('Błąd force check:', err));
-              })
-              .catch(function(error){ console.error('Błąd force check:', error); });
           }
         }, 1000);
       } else {
         alert('Błąd podczas wysyłania komendy reboot.');
       }
-    }).catch(function(error){
+    })
-      alert('Błąd: ' + error);
+    .catch(err => alert('Błąd: ' + err));
-    });
 });
 </script>
 {% endblock %}

templates/devices.html

@@ -1,22 +1,100 @@
 {% extends "base.html" %}
 {% block title %}Moje urządzenia - RouterOS Update{% endblock %}
+
+{% block extra_head %}
+<style>
+/* Karta w trybie ciemnym */
+body.dark-mode .card {
+  background-color: #1e1e1e;
+  color: #ccc;
+  border-color: #444;
+}
+
+/* Nagłówek karty w trybie ciemnym */
+body.dark-mode .card .card-header.bg-light {
+  background-color: #333 !important;
+  border-bottom: 1px solid #444;
+}
+
+/* Tabela w trybie ciemnym */
+body.dark-mode .table thead.table-dark {
+  background-color: #2a2a2a !important;
+  color: #ccc !important;
+  border-color: #444 !important;
+}
+body.dark-mode .table-hover tbody tr:hover {
+  background-color: #2f2f2f;
+}
+body.dark-mode .table-bordered > :not(caption) > * > * {
+  border-color: #444 !important;
+}
+
+/* Styl paska postępu w overlay */
+.progress-container {
+  width: 50%;
+  margin: 20px auto;
+  background: #444;
+  border-radius: 5px;
+  overflow: hidden;
+}
+.progress-bar {
+  width: 0%;
+  height: 30px;
+  background: #4caf50;
+  border-radius: 5px;
+  transition: width 0.5s linear;
+}
+#mass-system-update-overlay,
+#mass-firmware-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;
+}
+
+/* Prompt do firmware w overlay */
+#mass-firmware-reboot-prompt {
+  display:none; 
+  position:fixed; 
+  top:0; left:0; 
+  width:100%; height:100%; 
+  background:rgba(0,0,0,0.7); 
+  z-index:1100; 
+  color:white; 
+  text-align:center; 
+  padding-top:200px;
+}
+</style>
+{% endblock %}
+
 {% block content %}
-<h2>Moje urządzenia</h2>
+<div class="container">
-<div class="row mb-3">
+  <h2 class="mb-4">Moje urządzenia</h2>
-  <div class="col text-end">
+
+  <!-- Karta z tabelą urządzeń i przyciskami masowych akcji -->
+  <div class="card border-0 shadow">
+    <div class="card-header bg-light d-flex align-items-center justify-content-between">
+      <h5 class="mb-0">Lista urządzeń</h5>
       <button type="button" class="btn btn-success" onclick="window.location.href='{{ url_for('add_device') }}'">
         Dodaj nowe urządzenie
       </button>
     </div>
-</div>
+    <div class="card-body">
       <!-- Formularz z przyciskami masowych operacji -->
       <form id="mass-update-form">
         <div class="mb-3">
-    <button type="button" id="mass-system-update-btn" class="btn btn-warning">Aktualizuj system (masowo)</button>
+          <button type="button" id="mass-system-update-btn" class="btn btn-warning me-2">Aktualizuj system (masowo)</button>
-    <button type="button" id="mass-firmware-update-btn" class="btn btn-danger">Aktualizuj firmware (masowo)</button>
+          <button type="button" id="mass-firmware-update-btn" class="btn btn-danger me-2">Aktualizuj firmware (masowo)</button>
           <button type="submit" class="btn btn-primary">Odśwież wybrane</button>
         </div>
-  <table class="table table-bordered table-hover">
+        
+        <div class="table-responsive">
+          <table class="table table-striped table-hover table-sm align-middle table-bordered">
             <thead class="table-dark">
               <tr>
                 <th><input type="checkbox" id="select-all"></th>
@@ -35,13 +113,15 @@
                 </td>
                 <td>
                   {% if device.name %}
-            {{ device.name }} | 
+                    {{ device.name }} 
-            <code><small class="text-muted">{{ device.ip }}</small></code>
+                    <br><code class="text-muted">{{ device.ip }}</code>
                   {% else %}
                     {{ device.ip }}
                   {% endif %}
                 </td>
-        <td>{{ device.last_check.strftime('%Y-%m-%d %H:%M:%S') if device.last_check else 'Brak' }}</td>
+                <td>
+                  {{ device.last_check.strftime('%Y-%m-%d %H:%M:%S') if device.last_check else 'Brak' }}
+                </td>
                 <td>
                   {% if device.update_required or (device.current_firmware and device.upgrade_firmware and device.current_firmware != device.upgrade_firmware) %}
                     {% if device.update_required and (device.current_firmware and device.upgrade_firmware and device.current_firmware != device.upgrade_firmware) %}
@@ -55,17 +135,31 @@
                     <span class="badge bg-success">Aktualny</span>
                   {% endif %}
                 </td>
-        <td>
+                <td style="white-space: nowrap;">
                   <small>
                     <strong>System:</strong> {{ device.current_version or 'Brak' }}<br>
                     <strong>Firmware:</strong> {{ device.current_firmware or 'Brak' }}<br>
-            <strong>Upgrade Firmware:</strong> {{ device.upgrade_firmware or 'N/A' }}
+                    <strong>Upgrade FW:</strong> {{ device.upgrade_firmware or 'N/A' }}
                   </small>
                 </td>
                 <td>
-          <button type="button" class="btn btn-info btn-sm" onclick="window.location.href='{{ url_for('device_detail', device_id=device.id) }}'">Szczegóły</button>
+                  <button type="button" class="btn btn-info btn-sm" 
-          <button type="button" class="btn btn-secondary btn-sm" onclick="window.location.href='{{ url_for('force_check', device_id=device.id) }}'">Wymuś sprawdzenie</button>
+                          onclick="window.location.href='{{ url_for('device_detail', device_id=device.id) }}'">
-          <button type="button" class="btn btn-warning btn-sm" onclick="window.location.href='{{ url_for('edit_device', device_id=device.id) }}'">Edytuj</button>
+                    Szczegóły
+                  </button>
+                  <button type="button" class="btn btn-secondary btn-sm"
+                          onclick="window.location.href='{{ url_for('force_check', device_id=device.id) }}'">
+                    Sprawdź
+                  </button>
+                  <button type="button" class="btn btn-warning btn-sm"
+                          onclick="window.location.href='{{ url_for('edit_device', device_id=device.id) }}'">
+                    Edytuj
+                  </button>
+                  <!-- Dodane przykładowe przyciski (potrzebna obsługa w backendzie) -->
+                  <button type="button" class="btn btn-outline-danger btn-sm"
+                          onclick="fetch('/device/{{ device.id }}/restart', {method: 'POST'}) .then(()=>location.reload());">
+                    Restart
+                  </button>
                 </td>
               </tr>
               {% else %}
@@ -75,36 +169,46 @@
               {% endfor %}
             </tbody>
           </table>
+        </div>
       </form>
+    </div>
+  </div>
+</div>
 
-<!-- Overlay dla masowej aktualizacji systemu (5 minut) -->
+<!-- Overlay dla masowej aktualizacji systemu -->
-<div id="mass-system-update-overlay" style="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;">
+<div id="mass-system-update-overlay">
-  <h3>Masowa aktualizacja systemu rozpoczęta...</h3>
+  <h3>Aktualizacja systemu rozpoczęta...</h3>
-  <div style="width:50%; margin: 20px auto; background:#444; border-radius:5px;">
+  <div class="progress-container">
-    <div id="mass-system-progress" style="width:0%; height:30px; background:#4caf50; border-radius:5px;"></div>
+    <div id="mass-system-progress" class="progress-bar"></div>
   </div>
   <p id="mass-system-timer">300 sekund</p>
 </div>
 
-<!-- Overlay dla masowej aktualizacji firmware (2 minuty) -->
+<!-- Overlay dla restartu po aktualizacji firmware -->
-<div id="mass-firmware-update-overlay" style="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;">
+<div id="mass-firmware-update-overlay">
-  <h3>Masowa aktualizacja firmware (reboot) rozpoczęta...</h3>
+  <h3>Restart urządzeń po aktualizacji firmware...</h3>
-  <div style="width:50%; margin: 20px auto; background:#444; border-radius:5px;">
+  <div class="progress-container">
-    <div id="mass-firmware-progress" style="width:0%; height:30px; background:#4caf50; border-radius:5px;"></div>
+    <div id="mass-firmware-progress" class="progress-bar"></div>
   </div>
   <p id="mass-firmware-timer">120 sekund</p>
 </div>
 
 <!-- Dynamiczny prompt dla masowego restartu firmware -->
-<div id="mass-firmware-reboot-prompt" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:1100; color:white; text-align:center; padding-top:200px;">
+<div id="mass-firmware-reboot-prompt">
   <h3>Firmware update zakończony.</h3>
   <p>Czy chcesz zrestartować wszystkie wybrane urządzenia?</p>
   <button id="mass-firmware-reboot-btn" class="btn btn-danger">Restart urządzeń</button>
   <button id="mass-firmware-cancel-btn" class="btn btn-secondary ms-2">Anuluj</button>
 </div>
 
+<!-- Overlay informujący o zakończonym odświeżaniu -->
+<div id="mass-update-overlay" style="display:none; position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.7); z-index:1100; color:white; text-align:center; padding-top:200px;">
+  <h3>Polecnie odświeżenia urządzeń wykonane!</h3>
+</div>
+
 <script>
-  // Funkcja "Select all" – zaznacza lub odznacza wszystkie checkboxy
+  // Ten sam skrypt masowych akcji, przeniesiony bez zmian w logice
+  document.addEventListener('DOMContentLoaded', function() {
     document.getElementById('select-all').addEventListener('change', function() {
       var checkboxes = document.querySelectorAll('input[name="selected_devices"]');
       for (var checkbox of checkboxes) {
@@ -112,7 +216,13 @@
       }
     });
     
-  // Pobierz zaznaczone urządzenia
+    document.getElementById('mass-firmware-reboot-btn').addEventListener('click', onMassFirmwareReboot);
+    document.getElementById('mass-firmware-cancel-btn').addEventListener('click', function() {
+      alert("Restart został anulowany. Pamiętaj, że firmware update wymaga rebootu.");
+      document.getElementById('mass-firmware-reboot-prompt').style.display = 'none';
+    });
+  });
+
   function getSelectedDeviceIds() {
     var selected = [];
     var checkboxes = document.querySelectorAll('input[name="selected_devices"]:checked');
@@ -129,27 +239,26 @@
       alert("Wybierz przynajmniej jedno urządzenie.");
       return;
     }
-    // Wysyłamy update systemu dla każdego urządzenia asynchronicznie
     selectedDevices.forEach(function(id) {
-      fetch("{{ url_for('update_device', device_id=0) }}".replace("0", id), { method: 'POST' })
+      fetch(`/device/${id}/update`, { method: 'POST' })
         .catch(function(error){ console.error('Błąd aktualizacji systemu dla urządzenia ' + id, error); });
     });
     // Pokaż overlay z paskiem postępu (5 minut)
     var overlay = document.getElementById('mass-system-update-overlay');
     overlay.style.display = 'block';
-    var timeLeft = 300; // 300 sekund
+    var timeLeft = 200; // 200 sekund
     var progressBar = document.getElementById('mass-system-progress');
     var timerDisplay = document.getElementById('mass-system-timer');
     var interval = setInterval(function(){
       timeLeft--;
-      var percent = ((300 - timeLeft) / 300) * 100;
+      var percent = ((200 - timeLeft) / 200) * 100;
       progressBar.style.width = percent + '%';
       timerDisplay.textContent = timeLeft + ' sekund';
       if(timeLeft <= 0){
         clearInterval(interval);
-        // Po zakończeniu odliczania, dla każdego urządzenia wykonaj force_check
+        // Po zakończeniu odliczania, force_check
         selectedDevices.forEach(function(id) {
-          fetch("{{ url_for('force_check', device_id=0) }}".replace("0", id), { method: 'GET' })
+          fetch(`/device/${id}/force_check`, { method: 'GET' })
             .catch(function(error){ console.error('Błąd force check dla urządzenia ' + id, error); });
         });
         location.reload();
@@ -164,49 +273,58 @@
       alert("Wybierz przynajmniej jedno urządzenie.");
       return;
     }
-    // Wysyłamy update firmware dla każdego urządzenia asynchronicznie
     selectedDevices.forEach(function(id) {
-      fetch("{{ url_for('update_firmware', device_id=0) }}".replace("0", id), { method: 'POST' })
+      fetch(`/device/${id}/update_firmware`, { method: 'POST' })
         .catch(function(error){ console.error('Błąd aktualizacji firmware dla urządzenia ' + id, error); });
     });
-    // Zamiast confirm() wyświetlamy dynamiczny prompt
+    // Wyświetlamy dynamiczny prompt restartu
-    var promptDiv = document.getElementById('mass-firmware-reboot-prompt');
+    document.getElementById('mass-firmware-reboot-prompt').style.display = 'block';
-    promptDiv.style.display = 'block';
+  });
 
-    // Obsługa przycisku restartu w prompt
+  // Sekwencyjny reboot
-    document.getElementById('mass-firmware-reboot-btn').addEventListener('click', function() {
+  function sendRebootSequentially(devices, index = 0) {
-      promptDiv.style.display = 'none';
+    if (index >= devices.length) return Promise.resolve();
-      // Pokaż overlay z paskiem postępu dla reboot (2 minuty)
+    return fetch(`/device/${devices[index]}/restart`, { method: 'POST' })
+      .catch(function(error) {
+        console.error('Błąd wysyłania reboot dla urządzenia ' + devices[index], error);
+      })
+      .then(function() {
+        return new Promise(resolve => setTimeout(resolve, 500));
+      })
+      .then(function() {
+        return sendRebootSequentially(devices, index + 1);
+      });
+  }
+
+  function onMassFirmwareReboot() {
+    document.getElementById('mass-firmware-reboot-prompt').style.display = 'none';
+    var selectedDevices = getSelectedDeviceIds();
+    sendRebootSequentially(selectedDevices)
+      .then(function() {
         var overlay = document.getElementById('mass-firmware-update-overlay');
         overlay.style.display = 'block';
-      var timeLeft = 120; // 120 sekund
+        var timeLeft = 90; // 90 sekund
         var progressBar = document.getElementById('mass-firmware-progress');
         var timerDisplay = document.getElementById('mass-firmware-timer');
         var interval = setInterval(function(){
           timeLeft--;
-        var percent = ((120 - timeLeft) / 120) * 100;
+          var percent = ((90 - timeLeft) / 90) * 100;
           progressBar.style.width = percent + '%';
           timerDisplay.textContent = timeLeft + ' sekund';
           if(timeLeft <= 0){
             clearInterval(interval);
-          // Po zakończeniu odliczania, dla każdego urządzenia wykonaj force_check
+            // Po zakończeniu odliczania, force_check
             selectedDevices.forEach(function(id) {
-            fetch("{{ url_for('force_check', device_id=0) }}".replace("0", id), { method: 'GET' })
+              fetch(`/device/${id}/force_check`, { method: 'GET' })
                 .catch(function(error){ console.error('Błąd force check dla urządzenia ' + id, error); });
             });
             location.reload();
           }
         }, 1000);
       });
+  }
 
-    // Obsługa przycisku anulowania restartu w prompt
+// Obsługa "Odśwież wybrane"
-    document.getElementById('mass-firmware-cancel-btn').addEventListener('click', function() {
-      alert("Restart został anulowany. Pamiętaj, że firmware update wymaga rebootu.");
-      promptDiv.style.display = 'none';
-    });
-  });
-  
-  // Obsługa standardowego przycisku "Odśwież wybrane"
   document.getElementById('mass-update-form').addEventListener('submit', function(e) {
     e.preventDefault();
     var selectedDevices = getSelectedDeviceIds();
@@ -214,11 +332,19 @@
       alert("Wybierz przynajmniej jedno urządzenie.");
       return;
     }
+    // Dla każdego wybranego urządzenia wykonaj force_check
     selectedDevices.forEach(function(id) {
-      fetch("{{ url_for('force_check', device_id=0) }}".replace("0", id), { method: 'GET' })
+      fetch(`/device/${id}/force_check`, { method: 'GET' })
-        .catch(function(error){ console.error('Błąd force check dla urządzenia ' + id, error); });
+        .catch(function(error) {
+          console.error('Błąd force check dla urządzenia ' + id, error);
         });
-    setTimeout(function(){ location.reload(); }, 2000);
+    });
+    // Pokaż overlay informujący o zakończonym odświeżaniu
+    document.getElementById('mass-update-overlay').style.display = 'block';
+    // Po 4 sekundach odśwież stronę
+    setTimeout(function() {
+      location.reload();
+    }, 4000);
   });
 </script>
 {% endblock %}

templates/edit_device.html

@@ -1,42 +1,86 @@
 {% extends "base.html" %}
 {% block title %}Edytuj urządzenie - RouterOS Update{% endblock %}
+
+{% block extra_head %}
+<style>
+/* Karta w trybie ciemnym */
+body.dark-mode .card {
+  background-color: #1e1e1e;
+  color: #ccc;
+  border-color: #444;
+}
+body.dark-mode .card .card-header.bg-light {
+  background-color: #333 !important;
+  border-bottom: 1px solid #444;
+}
+</style>
+{% endblock %}
+
 {% block content %}
+<div class="container">
   <div class="row justify-content-center">
     <div class="col-md-6">
-    <h2>Edytuj urządzenie</h2>
+      
+      <!-- Karta: Edycja urządzenia -->
+      <div class="card border-0 shadow">
+        <div class="card-header bg-light">
+          <h4 class="mb-0">Edytuj urządzenie</h4>
+        </div>
+        <div class="card-body">
           <form method="POST">
             <!-- Pole nazwy urządzenia -->
             <div class="mb-3">
               <label for="name" class="form-label">Nazwa urządzenia</label>
-        <input type="text" class="form-control" name="name" id="name" value="{{ device.name }}" required>
+              <input type="text" class="form-control" name="name" id="name" required
+                     value="{{ device.name }}"
+                     placeholder="np. Mikrotik w biurze">
+              <small class="text-muted">Przyjazna nazwa, np. „Router w piwnicy” lub „Mikrotik #2”.</small>
             </div>
-      <!-- Pozostałe pola edycji: ip, port, username, password, branch -->
+            
+            <!-- Adres IP -->
             <div class="mb-3">
               <label for="ip" class="form-label">Adres IP</label>
-        <input type="text" class="form-control" name="ip" id="ip" value="{{ device.ip }}" required>
+              <input type="text" class="form-control" name="ip" id="ip" required
+                     value="{{ device.ip }}"
+                     placeholder="np. 192.168.88.1">
             </div>
+            
+            <!-- Port -->
             <div class="mb-3">
               <label for="port" class="form-label">Port</label>
-        <input type="number" class="form-control" name="port" id="port" value="{{ device.port }}" required>
+              <input type="number" class="form-control" name="port" id="port" required
+                     value="{{ device.port }}">
+              <small class="text-muted">Domyślnie 8728 (lub 8729 w przypadku SSL).</small>
             </div>
+            
+            <!-- Nazwa użytkownika -->
             <div class="mb-3">
               <label for="device_username" class="form-label">Nazwa użytkownika urządzenia</label>
-        <input type="text" class="form-control" name="device_username" id="device_username" value="{{ device.device_username }}" required>
+              <input type="text" class="form-control" name="device_username" id="device_username" required
+                     value="{{ device.device_username }}"
+                     placeholder="np. admin">
             </div>
+            
+            <!-- Hasło urządzenia -->
             <div class="mb-3">
               <label for="device_password" class="form-label">Hasło urządzenia</label>
-        <input type="password" class="form-control" name="device_password" id="device_password" value="{{ device.device_password }}" required>
+              <input type="password" class="form-control" name="device_password" id="device_password" required
+                     value="{{ device.device_password }}">
             </div>
-      <!-- Opcja SSL -->
+            
+            <!-- SSL i weryfikacja certyfikatów -->
             <div class="mb-3 form-check">
-        <input type="checkbox" class="form-check-input" name="use_ssl" id="use_ssl" {% if device.use_ssl %}checked{% endif %}>
+              <input type="checkbox" class="form-check-input" name="use_ssl" id="use_ssl"
+                     {% if device.use_ssl %}checked{% endif %}>
               <label class="form-check-label" for="use_ssl">Używaj SSL</label>
             </div>
-      <!-- Opcja nie weryfikowania certyfikatu SSL -->
             <div class="mb-3 form-check">
-        <input type="checkbox" class="form-check-input" name="ssl_insecure" id="ssl_insecure" {% if device.ssl_insecure %}checked{% endif %}>
+              <input type="checkbox" class="form-check-input" name="ssl_insecure" id="ssl_insecure"
+                     {% if device.ssl_insecure %}checked{% endif %}>
               <label class="form-check-label" for="ssl_insecure">Nie weryfikuj certyfikatu SSL</label>
             </div>
+            
+            <!-- Branch aktualizacji (stable/dev/beta) -->
             <div class="mb-3">
               <label for="branch" class="form-label">Wybierz branch aktualizacji</label>
               <select class="form-select" name="branch" id="branch">
@@ -45,8 +89,14 @@
                 <option value="beta" {% if device.branch == 'beta' %}selected{% endif %}>Beta</option>
               </select>
             </div>
+            
+            <!-- Przycisk zapisujący zmiany -->
             <button type="submit" class="btn btn-primary">Zapisz zmiany</button>
           </form>
         </div>
       </div>
+      
+    </div>
+  </div>
+</div>
 {% endblock %}

templates/login.html

@@ -1,20 +1,50 @@
 {% extends "base.html" %}
 {% block title %}Logowanie - RouterOS Update{% endblock %}
+
+{% block extra_head %}
+<style>
+/* Karta w trybie ciemnym */
+body.dark-mode .card {
+  background-color: #1e1e1e;
+  color: #ccc;
+  border-color: #444;
+}
+body.dark-mode .card .card-header.bg-light {
+  background-color: #333 !important;
+  border-bottom: 1px solid #444;
+}
+</style>
+{% endblock %}
+
 {% block content %}
+<div class="container">
   <div class="row justify-content-center">
     <div class="col-md-6">
-    <h2>Logowanie</h2>
+      <div class="card border-0 shadow">
+        <div class="card-header bg-light">
+          <h4 class="mb-0">Logowanie</h4>
+        </div>
+        <div class="card-body">
           <form method="POST">
             <div class="mb-3">
               <label for="username" class="form-label">Nazwa użytkownika</label>
-        <input type="text" class="form-control" name="username" id="username" required>
+              <input type="text" class="form-control" name="username" id="username" required
+                     placeholder="np. admin">
             </div>
             <div class="mb-3">
               <label for="password" class="form-label">Hasło</label>
-        <input type="password" class="form-control" name="password" id="password" required>
+              <input type="password" class="form-control" name="password" id="password" required
+                     placeholder="••••••••">
             </div>
             <button type="submit" class="btn btn-primary">Zaloguj</button>
           </form>
+          <hr>
+          <p class="mb-0">Nie masz konta? 
+            <a href="{{ url_for('register') }}">Zarejestruj się</a>
+          </p>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 {% endblock %}

templates/logs.html

@@ -1,14 +1,69 @@
 {% extends "base.html" %}
 {% block title %}Logi - Aplikacja Updatera{% endblock %}
+
 {% block extra_head %}
-  <!-- Dołącz styl CSS biblioteki Vanilla‑DataTables -->
+<!-- Styl Vanilla‑DataTables -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanilla-datatables@latest/dist/vanilla-dataTables.min.css">
+
+<style>
+/* =======================================
+   Dostosowanie do trybu ciemnego
+   (jeśli w base.html używasz body.dark-mode)
+======================================= */
+
+/* Karta w trybie ciemnym */
+body.dark-mode .card {
+  background-color: #1e1e1e;
+  color: #cccccc;
+  border-color: #444;
+}
+
+/* Nagłówek karty w trybie ciemnym */
+body.dark-mode .card .card-header.bg-light {
+  background-color: #333 !important;
+  border-bottom: 1px solid #444;
+}
+
+/* Tabela w trybie ciemnym
+   - wyjaśnienie: thead.table-dark w trybie jasnym ma swoje domyślne kolory,
+     więc w ciemnym je nadpisujemy, żeby był czytelny. */
+body.dark-mode .table thead.table-dark {
+  background-color: #2a2a2a !important;
+  color: #ccc !important;
+  border-color: #444 !important;
+}
+body.dark-mode .table-hover tbody tr:hover {
+  background-color: #2f2f2f;
+}
+
+/* Obramowania w trybie ciemnym */
+body.dark-mode .table.table-bordered > :not(caption) > * > * {
+  border-color: #444 !important;
+}
+
+/* Tabela DataTables – drobne poprawki w trybie ciemnym */
+body.dark-mode .dataTable-wrapper .dataTable-info,
+body.dark-mode .dataTable-wrapper .dataTable-pagination,
+body.dark-mode .dataTable-wrapper .dataTable-dropdown label,
+body.dark-mode .dataTable-wrapper .dataTable-input {
+  color: #ccc;
+}
+
+</style>
 {% endblock %}
+
 {% block content %}
-<h2>Logi</h2>
+<div class="container">
-<!-- Formularz kasowania logów starszych niż podana liczba dni -->
+  
-<div class="mt-4">
+  <!-- Nagłówek strony -->
-  <h4>Usuń logi starsze niż podana liczba dni</h4>
+  <h2 class="mb-4">Logi</h2>
+
+  <!-- Karta: Formularz kasowania logów -->
+  <div class="card border-0 shadow mb-4">
+    <div class="card-header bg-light">
+      <h5 class="mb-0">Usuń logi starsze niż podana liczba dni</h5>
+    </div>
+    <div class="card-body">
       <form method="POST" action="{{ url_for('clean_logs') }}">
         <div class="mb-3">
           <label for="days" class="form-label">Liczba dni</label>
@@ -17,11 +72,19 @@
         <button type="submit" class="btn btn-danger">Usuń logi</button>
       </form>
     </div>
-<hr>
+  </div>
-<table class="table table-striped" id="logsTable">
+
+  <!-- Karta: Tabela logów -->
+  <div class="card border-0 shadow">
+    <div class="card-header bg-light">
+      <h5 class="mb-0">Wszystkie logi systemu</h5>
+    </div>
+    <div class="card-body p-0">
+      <div class="table-responsive">
+        <table class="table table-striped table-hover table-sm align-middle mb-0" id="logsTable">
           <thead class="table-dark">
             <tr>
-      <th>Data i czas</th>
+              <th style="white-space: nowrap;">Data i czas</th>
               <th>Urządzenie</th>
               <th>Wiadomość</th>
             </tr>
@@ -29,24 +92,30 @@
           <tbody>
             {% for log in logs %}
             <tr>
-      <td>{{ log.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</td>
+              <td style="white-space: nowrap;">{{ log.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</td>
               <td>
                 {% if log.device_id %}
                   <a href="{{ url_for('device_detail', device_id=log.device.id) }}">
                     {{ log.device.name if log.device.name else "Urządzenie #" ~ log.device.id }}
                   </a>
                 {% else %}
-          Ogólne
+                  <span class="text-muted">Ogólne</span>
                 {% endif %}
               </td>
-      <td><pre style="white-space: pre-wrap;">{{ log.message }}</pre></td>
+              <!-- Treść logu w <pre> z white-space: pre-wrap, żeby łamać długie linie -->
+              <td><pre style="white-space: pre-wrap; margin:0;">{{ log.message }}</pre></td>
             </tr>
             {% endfor %}
           </tbody>
         </table>
+      </div>
+    </div>
+  </div>
+</div>
 {% endblock %}
+
 {% block extra_scripts %}
-  <!-- Dołącz skrypt biblioteki Vanilla‑DataTables -->
+<!-- Vanilla‑DataTables -->
 <script src="https://cdn.jsdelivr.net/npm/vanilla-datatables@latest/dist/vanilla-dataTables.min.js"></script>
 <script>
   // Inicjalizacja Vanilla‑DataTables dla tabeli logów
@@ -56,9 +125,9 @@
     perPage: 10,
     labels: {
       placeholder: "Szukaj...",     // placeholder dla pola wyszukiwania
-        perPage: "{select} wpisów na stronę", // etykieta przy wyborze liczby wierszy
+      perPage: "{select} wpisów na stronę", // tekst przy select
-        noRows: "Brak logów.", // komunikat, gdy tabela jest pusta
+      noRows: "Brak logów.",        // gdy tabela jest pusta
-        info: "Wyświetlono {start} - {end} z {rows} logów" // tekst z informacją o paginacji
+      info: "Wyświetlono {start} - {end} z {rows} logów" // info paginacja
     }
   });
 </script>

templates/register.html

@@ -1,24 +1,55 @@
 {% extends "base.html" %}
 {% block title %}Rejestracja - RouterOS Update{% endblock %}
+
+{% block extra_head %}
+<style>
+/* Karta w trybie ciemnym */
+body.dark-mode .card {
+  background-color: #1e1e1e;
+  color: #ccc;
+  border-color: #444;
+}
+body.dark-mode .card .card-header.bg-light {
+  background-color: #333 !important;
+  border-bottom: 1px solid #444;
+}
+</style>
+{% endblock %}
+
 {% block content %}
+<div class="container">
   <div class="row justify-content-center">
     <div class="col-md-6">
-    <h2>Rejestracja</h2>
+      <div class="card border-0 shadow">
+        <div class="card-header bg-light">
+          <h4 class="mb-0">Rejestracja</h4>
+        </div>
+        <div class="card-body">
           <form method="POST">
             <div class="mb-3">
               <label for="username" class="form-label">Nazwa użytkownika</label>
-        <input type="text" class="form-control" name="username" id="username" required>
+              <input type="text" class="form-control" name="username" id="username" required
+                     placeholder="np. admin2">
             </div>
             <div class="mb-3">
-        <label for="email" class="form-label">Email</label>
+              <label for="email" class="form-label">Adres e-mail</label>
-        <input type="email" class="form-control" name="email" id="email" required>
+              <input type="email" class="form-control" name="email" id="email" required
+                     placeholder="np. user@example.com">
             </div>
             <div class="mb-3">
               <label for="password" class="form-label">Hasło</label>
-        <input type="password" class="form-control" name="password" id="password" required>
+              <input type="password" class="form-control" name="password" id="password" required
+                     placeholder="••••••••">
             </div>
             <button type="submit" class="btn btn-primary">Zarejestruj się</button>
           </form>
+          <hr>
+          <p class="mb-0">Masz już konto?
+            <a href="{{ url_for('login') }}">Zaloguj się</a>
+          </p>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 {% endblock %}

templates/routeros_changelog.html

@@ -1,69 +0,0 @@
-{% 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 %}

templates/routeros_changelog_tabs.html

@@ -1,85 +1,144 @@
 {% extends "base.html" %}
 {% block title %}Changelog RouterOS{% endblock %}
-{% block extra_head %}
-  <!-- Dodajemy Prism.js – globalny arkusz stylów będzie zmieniany przez base.html -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css" id="prism-style">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
-  <style>
 
+{% block extra_head %}
+<!-- PRISM.JS (temat okaidia lub dowolny inny) -->
+<link rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css"
+      id="prism-style">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
+
+<style>
+    /* 
+      1) Mniejszy rozmiar fontu w bloczku <code>
+      2) Łamanie linii, max-width, itp.
+      3) Tło w jasnym/ciemnym trybie
+    */
+
+    /* Mniejszy rozmiar i ograniczenie linii */
+    pre code[class*="language-"] {
+      font-size: 0.85rem !important;   /* dopasuj do gustu, np. 0.9rem lub 0.8rem */
+      line-height: 1.3 !important;
+    }
+
+    /* Łamanie linii i scroll w razie potrzeby */
     pre {
-      background-color: #282c34;
+      white-space: pre-wrap;       
-      color: #abb2bf;
+      word-break: break-word;      
-      font-size: 1.1rem;
+      overflow-wrap: break-word;   
-      line-height: 1.5;
+      max-width: 100%;
-      padding: 1rem;
-      border-radius: 0 0 5px 5px;
       overflow-x: auto;
       margin: 0;        
+      padding: 1rem;
+    }
+
+    /* Tło w trybie jasnym */
+    body.light-mode pre {
+      background-color: #ffffff !important;
+      color: #212529 !important;
+    }
+    /* Tło w trybie ciemnym */
+    body.dark-mode pre {
+      background-color: #2b2b2b !important;
+      color: #e0e0e0 !important;
+    }
+
+    body.dark-mode .card {
+      background-color: #1e1e1e !important;
+      color: #ccc !important;
+      border-color: #444 !important;
+    }
+
+    body.dark-mode .card-header {
+      background-color: #333 !important;
+      color: #fff !important;
     }
 </style>
 {% endblock %}
+
 {% block content %}
 <div class="container py-4">
-  <!-- Nagłówek z tytułem i przyciskami akcji (przyciski aktualizacji są tutaj, globalny dark mode toggle już w navbarze) -->
+
-  <div class="d-flex justify-content-between align-items-center mb-4">
+  <!-- Karta z cieniowaniem, nagłówek i ciało -->
-    <h2>Changelog RouterOS</h2>
+  <div class="card border-0 shadow">
-    <a href="{{ url_for('force_fetch_changelogs') }}" 
+    <div class="card-header d-flex justify-content-between align-items-center">
-       class="btn btn-danger" 
+      <h4 class="mb-0">Changelog RouterOS</h4>
-       onclick="return confirm('Czy na pewno chcesz ręcznie pobrać wszystkie changelogi? Operacja usunie wszystkie stare wpisy.');">
+        <!-- Przycisk do wywołania aktualizacji changelogów -->
+        <a href="#" id="updateChangelog" class="btn btn-danger btn-sm">
           Aktualizuj changelogi
         </a>
     </div>
+    <div class="card-body">
 
-  <!-- Nawigacja po kanałach -->
+      <!-- Nawigacja kanałów (stable / rc / beta) -->
       <ul class="nav nav-tabs mb-3">
         <li class="nav-item">
-      <a class="nav-link {% if channel=='stable' %}active{% endif %}" href="{{ url_for('routeros_changelog', channel='stable', series=series) }}">Stable</a>
+          <a class="nav-link {% if channel=='stable' %}active{% endif %}"
+             href="{{ url_for('routeros_changelog', channel='stable', series=series) }}">
+            Stable
+          </a>
         </li>
         <li class="nav-item">
-      <a class="nav-link {% if channel=='rc' %}active{% endif %}" href="{{ url_for('routeros_changelog', channel='rc', series=series) }}">RC</a>
+          <a class="nav-link {% if channel=='rc' %}active{% endif %}"
+             href="{{ url_for('routeros_changelog', channel='rc', series=series) }}">
+            RC
+          </a>
         </li>
         <li class="nav-item">
-      <a class="nav-link {% if channel=='beta' %}active{% endif %}" href="{{ url_for('routeros_changelog', channel='beta', series=series) }}">Beta</a>
+          <a class="nav-link {% if channel=='beta' %}active{% endif %}"
+             href="{{ url_for('routeros_changelog', channel='beta', series=series) }}">
+            Beta
+          </a>
         </li>
       </ul>
       
-  <!-- Nawigacja po seriach wersji -->
+      <!-- Nawigacja serii (7.x / 6.x) -->
       <ul class="nav nav-pills mb-3">
         <li class="nav-item">
-      <a class="nav-link {% if series=='7.x' %}active{% endif %}" href="{{ url_for('routeros_changelog', channel=channel, series='7.x') }}">7.x</a>
+          <a class="nav-link {% if series=='7.x' %}active{% endif %}"
+             href="{{ url_for('routeros_changelog', channel=channel, series='7.x') }}">
+            7.x
+          </a>
         </li>
         <li class="nav-item">
-      <a class="nav-link {% if series=='6.x' %}active{% endif %}" href="{{ url_for('routeros_changelog', channel=channel, series='6.x') }}">6.x</a>
+          <a class="nav-link {% if series=='6.x' %}active{% endif %}"
+             href="{{ url_for('routeros_changelog', channel=channel, series='6.x') }}">
+            6.x
+          </a>
         </li>
       </ul>
 
-  <!-- Prezentacja wybranego wpisu changeloga -->
+      <!-- Prezentacja wybranego changeloga -->
       {% if selected_entry %}
         <div class="mb-3">
-      <h4 class="changelog-header">
+          <h5 class="fw-bold">
             {{ selected_entry.version | format_version }} 
-        <small>({{ selected_entry.timestamp.strftime('%Y-%b-%d') }})</small>
+            <small class="text-muted">({{ selected_entry.timestamp.strftime('%Y-%b-%d') }})</small>
-      </h4>
+          </h5>
           <pre><code class="language-plaintext">{{ selected_entry.details }}</code></pre>
         </div>
       {% else %}
-    <p>Brak wpisów dla wybranych ustawień.</p>
+        <div class="alert alert-warning mb-3">
+          Brak wpisów dla wybranych ustawień (kanał: {{ channel }}, seria: {{ series }}).
+        </div>
       {% endif %}
       
-  <!-- Formularz wyboru innego wpisu -->
+      <!-- Wybór innej wersji, jeśli mamy >1 wpis -->
       {% if entries|length > 1 %}
       <form method="GET" action="{{ url_for('routeros_changelog') }}">
         <input type="hidden" name="channel" value="{{ channel }}">
         <input type="hidden" name="series" value="{{ series }}">
+        
         <div class="input-group mb-3">
           <select name="version" class="form-select">
             {% for entry in entries %}
-            <option value="{{ entry.version }}" {% if selected_entry and entry.version == selected_entry.version %}selected{% endif %}>
+              <option value="{{ entry.version }}"
+                      {% if selected_entry and entry.version == selected_entry.version %}selected{% endif %}>
                 {{ entry.version | format_version }} ({{ entry.timestamp.strftime('%Y-%b-%d') }})
               </option>
             {% endfor %}
           </select>
-        <button class="btn btn-primary" type="submit">Pokaż changelog</button>
+          <button class="btn btn-primary" type="submit">Pokaż</button>
         </div>
       </form>
       {% endif %}
@@ -87,5 +146,60 @@
       <div class="mt-4">
         <a href="{{ url_for('dashboard') }}" class="btn btn-secondary">Powrót do dashboardu</a>
       </div>
+      
+    </div> <!-- /card-body -->
+  </div> <!-- /card -->
 </div>
+
+<!-- Modal z progressem -->
+<div class="modal fade" id="progressModal" tabindex="-1" role="dialog" aria-labelledby="progressModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="progressModalLabel">Pobieranie changelogów</h5>
+      </div>
+      <div class="modal-body">
+        <div class="spinner-border" role="status">
+          <span class="visually-hidden">Ładowanie...</span>
+        </div>
+        <p>Proszę czekać, trwa pobieranie changelogów...</p>
+        <!-- Możesz dodać miejsce na logi, jeśli chcesz wyświetlać szczegóły postępu -->
+        <div id="progressLog" style="max-height:200px; overflow-y:auto;"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  // Upewnij się, że Bootstrap JS jest załadowany (np. przez CDN)
+  document.getElementById("updateChangelog").addEventListener("click", function(e) {
+      e.preventDefault();
+      // Pokaż modal
+      var progressModalEl = document.getElementById("progressModal");
+      var progressModal = new bootstrap.Modal(progressModalEl);
+      progressModal.show();
+      
+      // Opcjonalnie wyczyść poprzednie logi
+      document.getElementById("progressLog").innerHTML = "";
+  
+      // Wywołanie endpointu force_fetch_changelogs
+      fetch("{{ url_for('force_fetch_changelogs') }}")
+      .then(response => response.text())
+      .then(data => {
+          // Aktualizacja logu – możesz dodać otrzymane dane, jeśli są potrzebne
+          document.getElementById("progressLog").innerHTML += "<p>Pobieranie zakończone.</p>";
+          // Po krótkiej chwili zamknij modal i odśwież całą stronę
+          setTimeout(() => {
+              progressModal.hide();
+              location.reload();
+          }, 1000);
+      })
+      .catch(error => {
+          document.getElementById("progressLog").innerHTML += "<p>Błąd: " + error + "</p>";
+          setTimeout(() => {
+              progressModal.hide();
+          }, 2000);
+      });
+  });
+  </script>
 {% endblock %}

templates/settings.html

@@ -1,89 +1,159 @@
 {% extends "base.html" %}
 {% block title %}Ustawienia - RouterOS Update{% endblock %}
-{% block content %}
-<div class="row justify-content-center">
-  <div class="col-md-8">
-    <h2 class="mb-4">Ustawienia powiadomień i systemu</h2>
 
-    <!-- Główny formularz ustawień -->
+{% block extra_head %}
+<style>
+/* Karta w trybie ciemnym */
+body.dark-mode .card {
+  background-color: #1e1e1e;
+  color: #ccc;
+  border-color: #444;
+}
+
+/* Nagłówek karty w trybie ciemnym */
+body.dark-mode .card .card-header.bg-light {
+  background-color: #333 !important;
+  border-bottom: 1px solid #444;
+}
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="container">
+  
+  <!-- Karta z głównym formularzem ustawień -->
+  <div class="card border-0 shadow mb-4">
+    <div class="card-header bg-light">
+      <h4 class="mb-0">Ustawienia powiadomień i systemu</h4>
+    </div>
+    <div class="card-body">
       <form method="POST">
+        
+        <!-- Sekcja Pushover -->
         <fieldset class="border p-3 mb-3">
           <legend class="w-auto">Pushover</legend>
           <div class="form-check mb-2">
-          <input type="checkbox" class="form-check-input" name="pushover_enabled" id="pushover_enabled" {% if settings.pushover_enabled %}checked{% endif %}>
+            <input type="checkbox" class="form-check-input" name="pushover_enabled" id="pushover_enabled"
-          <label class="form-check-label" for="pushover_enabled">Włącz powiadomienia Pushover</label>
+                   {% if settings.pushover_enabled %}checked{% endif %}>
+            <label class="form-check-label" for="pushover_enabled">
+              Włącz powiadomienia Pushover
+            </label>
           </div>
           <div class="mb-3">
             <label for="pushover_user_key" class="form-label">Pushover User Key</label>
-          <input type="text" class="form-control" name="pushover_user_key" id="pushover_user_key" value="{{ settings.pushover_user_key or '' }}">
+            <input type="text" class="form-control" name="pushover_user_key" id="pushover_user_key"
+                   value="{{ settings.pushover_user_key or '' }}"
+                   placeholder="np. ujHGkDYop837...">
           </div>
           <div class="mb-3">
             <label for="pushover_token" class="form-label">Pushover Token</label>
-          <input type="text" class="form-control" name="pushover_token" id="pushover_token" value="{{ settings.pushover_token or '' }}">
+            <input type="text" class="form-control" name="pushover_token" id="pushover_token"
+                   value="{{ settings.pushover_token or '' }}"
+                   placeholder="np. a9WsK09mnj3R8aGj...">
           </div>
         </fieldset>
         
+        <!-- Sekcja SMTP (E-mail) -->
         <fieldset class="border p-3 mb-3">
           <legend class="w-auto">SMTP (E-mail)</legend>
           <div class="form-check mb-2">
-          <input type="checkbox" class="form-check-input" name="email_notifications_enabled" id="email_notifications_enabled" {% if settings.email_notifications_enabled %}checked{% endif %}>
+            <input type="checkbox" class="form-check-input" name="email_notifications_enabled"
-          <label class="form-check-label" for="email_notifications_enabled">Włącz powiadomienia e-mail</label>
+                   id="email_notifications_enabled"
+                   {% if settings.email_notifications_enabled %}checked{% endif %}>
+            <label class="form-check-label" for="email_notifications_enabled">
+              Włącz powiadomienia e-mail
+            </label>
           </div>
           <div class="mb-3">
             <label for="smtp_server" class="form-label">SMTP Server</label>
-          <input type="text" class="form-control" name="smtp_server" id="smtp_server" value="{{ settings.smtp_server or '' }}">
+            <input type="text" class="form-control" name="smtp_server" id="smtp_server"
+                   value="{{ settings.smtp_server or '' }}"
+                   placeholder="np. smtp.gmail.com">
           </div>
           <div class="mb-3">
             <label for="smtp_port" class="form-label">SMTP Port</label>
-          <input type="number" class="form-control" name="smtp_port" id="smtp_port" value="{{ settings.smtp_port or '' }}">
+            <input type="number" class="form-control" name="smtp_port" id="smtp_port"
+                   value="{{ settings.smtp_port or '' }}"
+                   placeholder="np. 587">
           </div>
           <div class="mb-3">
             <label for="smtp_username" class="form-label">SMTP Username</label>
-          <input type="text" class="form-control" name="smtp_username" id="smtp_username" value="{{ settings.smtp_username or '' }}">
+            <input type="text" class="form-control" name="smtp_username" id="smtp_username"
+                   value="{{ settings.smtp_username or '' }}">
           </div>
           <div class="mb-3">
             <label for="smtp_password" class="form-label">SMTP Password</label>
-          <input type="password" class="form-control" name="smtp_password" id="smtp_password" value="{{ settings.smtp_password or '' }}">
+            <input type="password" class="form-control" name="smtp_password" id="smtp_password"
+                   value="{{ settings.smtp_password or '' }}">
           </div>
         </fieldset>
+
+        <!-- Sekcja E-mail odbiorcy -->
         <fieldset class="border p-3 mb-3">
-        <legend class="w-auto">E-mail odbiorcy powiadomień</legend>
+          <legend class="w-auto">Odbiorca powiadomień</legend>
           <div class="mb-3">
             <label for="recipient_email" class="form-label">Adres e-mail do otrzymywania powiadomień</label>
-          <input type="email" class="form-control" name="recipient_email" id="recipient_email" value="{{ settings.recipient_email or '' }}">
+            <input type="email" class="form-control" name="recipient_email" id="recipient_email"
+                   value="{{ settings.recipient_email or '' }}"
+                   placeholder="np. admin@example.com">
           </div>
         </fieldset>
+
+        <!-- Sekcja interwału -->
         <fieldset class="border p-3 mb-3">
           <legend class="w-auto">Interwał sprawdzania</legend>
           <div class="mb-3">
-          <label for="check_interval" class="form-label">Interwał (sekundy) <code>21600 = 6 godzin</code></label>
+            <label for="check_interval" class="form-label">
-          <input type="number" class="form-control" name="check_interval" id="check_interval" value="{{ settings.check_interval or 21600 }}">
+              Interwał (sekundy) 
+              <code>21600 = 6 godzin</code>
+            </label>
+            <input type="number" class="form-control" name="check_interval" id="check_interval"
+                   value="{{ settings.check_interval or 21600 }}">
+            <small class="text-muted">Co ile sekund system będzie sprawdzał aktualizacje.</small>
           </div>
           <div class="mb-3">
             <label for="time_input" class="form-label">Czas (HH:MM:SS)</label>
             <input type="text" class="form-control" id="time_input" placeholder="np. 01:30:00">
-          <button type="button" class="btn btn-secondary mt-2" onclick="convertTime()">Konwertuj na sekundy</button>
+            <button type="button" class="btn btn-secondary mt-2" onclick="convertTime()">
+              Konwertuj na sekundy
+            </button>
+            <small class="text-muted d-block mt-1">
+              Wpisz czas w formacie Godziny:Minuty:Sekundy, a następnie kliknij „Konwertuj”.
+            </small>
           </div>
         </fieldset>
 
+        <!-- Sekcja retencji logów -->
         <fieldset class="border p-3 mb-3">
           <legend class="w-auto">Retencja logów</legend>
           <div class="mb-3">
-          <label for="log_retention_days" class="form-label">Przechowywać logi przez (dni)</label>
+            <label for="log_retention_days" class="form-label">
-          <input type="number" class="form-control" name="log_retention_days" id="log_retention_days" value="{{ settings.log_retention_days or 30 }}">
+              Przechowywać logi przez (dni)
+            </label>
+            <input type="number" class="form-control" name="log_retention_days" id="log_retention_days"
+                   value="{{ settings.log_retention_days or 30 }}">
+            <small class="text-muted">Starsze logi będą automatycznie usuwane po tym czasie.</small>
           </div>
         </fieldset>
 
+        <!-- Przycisk zapisywania -->
         <button type="submit" class="btn btn-primary">Zapisz ustawienia</button>
       </form>
+    </div>
+  </div>
 
-    <!-- Przyciski testowe w osobnym bloku, ułożone w jednej linii po prawej stronie -->
+  <!-- Karta z przyciskami testowymi -->
-    <div class="mt-4">
+  <div class="card border-0 shadow">
+    <div class="card-header bg-light">
+      <h5 class="mb-0">Test powiadomień</h5>
+    </div>
+    <div class="card-body">
+      <p class="text-muted">Skorzystaj z przycisków, aby wysłać testowe powiadomienie Pushover / E-mail.</p>
       <div class="d-flex justify-content-end">
-        <form method="POST" action="{{ url_for('test_pushover') }}" class="d-inline me-2">
+        <form method="POST" action="{{ url_for('test_pushover') }}" class="me-2">
           <button type="submit" class="btn btn-secondary">Test Pushover</button>
         </form>
-        <form method="POST" action="{{ url_for('test_email') }}" class="d-inline">
+        <form method="POST" action="{{ url_for('test_email') }}">
           <button type="submit" class="btn btn-secondary">Test E-mail</button>
         </form>
       </div>

templates/update_history.html

@@ -1,27 +1,92 @@
 {% extends "base.html" %}
 {% block title %}Historia aktualizacji{% endblock %}
+
+{% block extra_head %}
+<style>
+/* === Styl dopasowany do trybu ciemnego i jasnego === */
+
+/* Tło karty w trybie ciemnym */
+body.dark-mode .card {
+  background-color: #1e1e1e;
+  color: #ccc;
+}
+
+/* Nagłówek karty w trybie ciemnym */
+body.dark-mode .card .card-header.bg-light {
+  background-color: #333 !important;
+  border-bottom: 1px solid #444;
+}
+
+/* Tabela w trybie ciemnym: jaśniejsze wyróżnienie nagłówka */
+body.dark-mode .card table thead {
+  background-color: #2a2a2a;
+  color: #ccc;
+}
+
+/* Tło wierszy tabeli w trybie ciemnym */
+body.dark-mode .card table tbody tr {
+  background-color: #1e1e1e;
+  color: #ccc;
+}
+
+/* Obramowanie w trybie ciemnym */
+body.dark-mode .table-bordered > :not(caption) > * > * {
+  border-color: #444 !important;
+}
+</style>
+{% endblock %}
+
 {% block content %}
 <div class="container">
-  <h2 class="mb-4">Historia aktualizacji</h2>
+  <div class="card border-0 shadow mb-4">
-  <table class="table table-bordered">
+    <!-- Nagłówek karty -->
-    <thead>
+    <div class="card-header bg-light">
+      <h4 class="mb-0">Historia aktualizacji</h4>
+    </div>
+
+    <!-- Zawartość karty -->
+    <div class="card-body p-0">
+      <!-- Jeśli mamy cokolwiek w histories -->
+      {% if histories %}
+        <div class="table-responsive">
+          <table class="table table-bordered table-hover table-sm align-middle mb-0">
+            <thead class="table-light">
               <tr>
-        <th>Data</th>
+                <th class="text-nowrap">Data</th>
-        <th>Urządzenie</th>
+                <th class="text-nowrap">Urządzenie</th>
-        <th>Typ aktualizacji</th>
+                <th class="text-nowrap">Typ aktualizacji</th>
-        <th>Szczegóły</th>
+                <th class="text-nowrap">Szczegóły</th>
               </tr>
             </thead>
             <tbody>
             {% for history in histories %}
               <tr>
                 <td>{{ history.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</td>
-        <td>{{ history.device.name or history.device.ip }}</td>
+                <td>
-        <td>{{ history.update_type }}</td>
+                  {{ history.device.name or history.device.ip }}
+                </td>
+                <td>
+                  {# Prosty przykład wyróżnienia typów aktualizacji #}
+                  {% if history.update_type == "system" %}
+                    <span class="badge bg-primary">System</span>
+                  {% elif history.update_type == "firmware" %}
+                    <span class="badge bg-success">Firmware</span>
+                  {% else %}
+                    <span class="badge bg-secondary">{{ history.update_type }}</span>
+                  {% endif %}
+                </td>
                 <td>{{ history.details }}</td>
               </tr>
             {% endfor %}
             </tbody>
           </table>
         </div>
+      {% else %}
+        <div class="p-3">
+          <p class="mb-0">Brak historii aktualizacji.</p>
+        </div>
+      {% endif %}
+    </div>
+  </div>
+</div>
 {% endblock %}