zmianu w css i poprawki w server-list

templates/base.html

@@ -6,66 +6,10 @@
   <title>{% block title %}/etc/hosts Manager{% endblock %}</title>
   <!-- Bootstrap CSS (Bootstrap 5.3.0) -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
   <!-- Dodatkowe style -->
   <style>
-    /* Style trybu ciemnego – stosujemy je tylko, gdy body ma klasę dark-mode */
-    body.dark-mode {
-      background-color: #121212;
-      color: #e0e0e0;
-    }
-    body.dark-mode footer {
-      background-color: #1e1e1e !important;
-    }
-    /* Tabele – style ciemnego motywu */
-    body.dark-mode .table {
-      color: #e0e0e0;
-      background-color: #1e1e1e;
-      border: 1px solid #444;
-    }
-    body.dark-mode .table th,
-    body.dark-mode .table td {
-      border: 1px solid #444;
-    }
-    body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
-      background-color: #2e2e2e;
-    }
-    body.dark-mode .table-striped tbody tr:nth-of-type(even) {
-      background-color: #1e1e1e;
-    }
-    body.dark-mode .table thead {
-      background-color: #333;
-      color: #e0e0e0;
-    }
-    /* Karty */
-    body.dark-mode .card {
-      background-color: #1e1e1e;
-      color: #e0e0e0;
-      border-color: #333;
-    }
-    /* Formularze */
-    body.dark-mode .form-control,
-    body.dark-mode .form-select {
-      background-color: #2e2e2e;
-      color: #e0e0e0;
-      border: 1px solid #444;
-    }
-    body.dark-mode .form-control:focus,
-    body.dark-mode .form-select:focus {
-      background-color: #2e2e2e;
-      color: #e0e0e0;
-      border-color: #777;
-      box-shadow: none;
-    }
-    /* Przycisk Wyloguj – solidny przycisk, by był czytelny */
-    .btn-logout {
-      color: #fff;
-    }
-
-    /* Zmniejszenie rozmiaru czcionki w navbarze */
-    .navbar {
-      font-size: 0.9rem; /* zmniejszony rozmiar czcionki */
-    }
-
+  /*  */
   </style>
   {% block extra_css %}{% endblock %}
 </head>

templates/server_list.html

@@ -8,6 +8,27 @@
     max-width: 300px;
     text-align: left;
   }
+
+  /* Zmniejsz tekst w nagłówku tabeli i wyśrodkuj go */
+  thead th {
+    font-size: 0.75rem;
+    text-align: center;
+  }
+  /* Klasa zmniejszająca przyciski akcji */
+  .btn-action {
+    font-size: 0.65rem;
+    padding: 0.25rem 0.4rem;
+    line-height: 1;
+  }
+
+  form.inline-button button.btn {
+  background-color: #dc3545; /* btn-danger */
+  border-color: #dc3545;
+  font-size: 0.65rem;
+  padding: 0.25rem 0.4rem;
+  line-height: 1;
+  /* ewentualnie dodatkowe właściwości, aby upodobnić go do linków */
+}
 </style>
 {% endblock %}
 
@@ -21,15 +42,15 @@
       <thead>
         <tr>
           <th>ID</th>
-          <th>Nazwa hosta</th>
+          <th>Serwer</th>
           <th>Użytkownik</th>
           <th>Port</th>
           <th>Typ</th>
           <th>Uwierzytelnianie</th>
-          <th>Wybrany plik /etc/hosts</th>
+          <th>Wybrany /etc/hosts</th>
           <th>Auto Deploy</th>
           <th>Auto Backup</th>
-          <th>Wyłącz CIDR/regex deploy</th>
+          <th>Wyłącz CIDR / regex</th>
           <th>Akcje</th>
         </tr>
       </thead>
@@ -44,7 +65,6 @@
               {{ h.resolved_hostname }}
             {% endif %}
           </td>
-          
            
           <td>
             {% if h.use_daemon and h.type == 'linux' %}
@@ -60,75 +80,96 @@
               {{ h.port }}
             {% endif %}
           </td>
-          <td>
+
+          <td class="text-center">
             {% if h.type == 'linux' %}
-              Linux{% if h.use_daemon %} (Demon){% endif %}
-            {% else %}
-              Mikrotik
-            {% endif %}
+            <img src="{{ url_for('static', filename='img/linux.svg') }}"
+                 alt="Linux"
+                 data-bs-toggle="tooltip"
+                 data-bs-placement="top"
+                 title="{% if h.use_daemon %}Linux - Używa Linux Demon{% else %}Linux{% endif %}"
+                 class="linux-logo"
+                 style="width: 40px; height: 40px;">
+          {% else %}
+            <img src="{{ url_for('static', filename='img/mikrotik.svg') }}"
+                 alt="Mikrotik"
+                 data-bs-toggle="tooltip"
+                 data-bs-placement="top"
+                 title="Mikrotik"
+                 class="mikrotik-logo"
+                 style="width: 40px; height: 40px;">
+          {% endif %}
           </td>
+          
           <td>
             {% if h.use_daemon and h.type == 'linux' %}
-              <em>- używa Demona -</em>
+              <span class="badge bg-secondary" style="font-size: 0.75rem;">- linux daemon -</span>
             {% else %}
               {% if h.auth_method == 'password' %}
-                Hasło
+                <span class="badge bg-primary" style="font-size: 0.75rem;">Hasło</span>
               {% elif h.auth_method == 'ssh_key' %}
-                Klucz SSH
+                <span class="badge bg-success" style="font-size: 0.75rem;">Klucz SSH</span>
               {% elif h.auth_method == 'global_key' %}
-                Globalny klucz
+                <span class="badge bg-info" style="font-size: 0.75rem;">Globalny klucz</span>
               {% else %}
-                {{ h.auth_method }}
+                <span class="badge bg-light text-dark" style="font-size: 0.75rem;">{{ h.auth_method }}</span>
               {% endif %}
             {% endif %}
           </td>
-          <td>
-            {% if h.preferred_hostfile %}
-              {{ h.preferred_hostfile.title }}
-            {% else %}
-              (Default)
-            {% endif %}
-          </td>
-          <td>
-            <form method="POST" action="{{ url_for('update_host_automation', id=h.id) }}" style="display:inline;">
-              <input type="hidden" name="setting" value="auto_deploy">
-              <input type="checkbox" name="enabled" value="1"
-                     onchange="this.form.submit()" {% if h.auto_deploy_enabled %}checked{% endif %}>
-            </form>
-          </td>
-          <td>
-            <form method="POST" action="{{ url_for('update_host_automation', id=h.id) }}" style="display:inline;">
-              <input type="hidden" name="setting" value="auto_backup">
-              <input type="checkbox" name="enabled" value="1"
-                     onchange="this.form.submit()" {% if h.auto_backup_enabled %}checked{% endif %}>
-            </form>
-          </td>
-          <td>
-            <form method="POST" action="{{ url_for('update_host_automation', id=h.id) }}" style="display:inline;">
-              <input type="hidden" name="setting" value="disable_regex">
-              <input type="checkbox" name="enabled" value="1"
-                     onchange="this.form.submit()" {% if h.disable_regex_deploy %}checked{% endif %}>
-            </form>
+          
+            <td>
+              {% if h.preferred_hostfile %}
+                {{ h.preferred_hostfile.title }}
+              {% else %}
+                (Default)
+              {% endif %}
+            </td>
+            
+            <td>
+              <form method="POST" action="{{ url_for('update_host_automation', id=h.id) }}" class="d-flex justify-content-center">
+                <input type="hidden" name="setting" value="auto_deploy">
+                <div class="form-check form-switch">
+                  <input class="form-check-input" type="checkbox" id="autoDeployCheckbox{{ h.id }}" name="enabled" value="1" onchange="this.form.submit()" {% if h.auto_deploy_enabled %}checked{% endif %}>
+                  <label class="form-check-label" for="autoDeployCheckbox{{ h.id }}"></label>
+                </div>
+              </form>
+            </td>
+            <td>
+              <form method="POST" action="{{ url_for('update_host_automation', id=h.id) }}" class="d-flex justify-content-center">
+                <input type="hidden" name="setting" value="auto_backup">
+                <div class="form-check form-switch">
+                  <input class="form-check-input" type="checkbox" id="autoBackupCheckbox{{ h.id }}" name="enabled" value="1" onchange="this.form.submit()" {% if h.auto_backup_enabled %}checked{% endif %}>
+                  <label class="form-check-label" for="autoBackupCheckbox{{ h.id }}"></label>
+                </div>
+              </form>
+            </td>
+            <td>
+              <form method="POST" action="{{ url_for('update_host_automation', id=h.id) }}" class="d-flex justify-content-center">
+                <input type="hidden" name="setting" value="disable_regex">
+                <div class="form-check form-switch">
+                  <input class="form-check-input" type="checkbox" id="disableRegexCheckbox{{ h.id }}" name="enabled" value="1" onchange="this.form.submit()" {% if h.disable_regex_deploy %}checked{% endif %}>
+                  <label class="form-check-label" for="disableRegexCheckbox{{ h.id }}"></label>
+                </div>
+              </form>
+            </td>
+          
             <td>
               <div class="d-flex flex-wrap gap-1">
-                <a href="{{ url_for('edit_server', id=h.id) }}" class="btn btn-primary btn-sm">Edytuj</a>
-                
+                <a href="{{ url_for('edit_server', id=h.id) }}" class="btn btn-primary btn-sm btn-action">Edytuj</a>
                 {% if h.use_daemon and h.type == 'linux' %}
-                <!-- Serwery z demonem – nowy sposób -->
-                <button class="btn btn-info btn-sm test-daemon-btn" data-host-id="{{ h.id }}">
-                  Testuj
-                </button>
+                  <button class="btn btn-info btn-sm btn-action test-daemon-btn" data-host-id="{{ h.id }}">
+                    Test
+                  </button>
                 {% else %}
-                <!-- Dotychczasowy sposób dla SSH/Mikrotik -->
-                <a href="{{ url_for('test_server_connection', id=h.id) }}" class="btn btn-info btn-sm">Testuj</a>
+                  <a href="{{ url_for('test_server_connection', id=h.id) }}" class="btn btn-info btn-sm btn-action">Test</a>
                 {% endif %}
-            
-                <a href="{{ url_for('server_backup', host_id=h.id) }}" class="btn btn-success btn-sm">Backup</a>
-                <form method="GET" action="{{ url_for('delete_server', id=h.id) }}" style="display:inline;">
-                  <button type="submit" class="btn btn-danger btn-sm">Usuń</button>
-                </form>
+                <a href="{{ url_for('server_backup', host_id=h.id) }}" class="btn btn-success btn-sm btn-action">Backup</a>
+                <form method="GET" action="{{ url_for('delete_server', id=h.id) }}" class="inline-button d-flex justify-content-center">
+                  <button type="submit" class="btn btn-danger btn-sm btn-action" onclick="return confirm('Czy na pewno chcesz usunąć serwer?')">Usuń</button>
+                </form>                
               </div>
             </td>
+
         </tr>
         {% endfor %}
       </tbody>
@@ -180,48 +221,49 @@
 </div>
 {% endblock %}
 {% block extra_js %}
-<script>
-  function secondsToDhms(seconds) {
+  {{ super() }}
+  <script>
+    function secondsToDhms(seconds) {
       seconds = Number(seconds);
-      const d = Math.floor(seconds / (3600*24));
-      const h = Math.floor(seconds % (3600*24) / 3600);
+      const d = Math.floor(seconds / (3600 * 24));
+      const h = Math.floor(seconds % (3600 * 24) / 3600);
       const m = Math.floor(seconds % 3600 / 60);
       const s = Math.floor(seconds % 60);
       return `${d} dni, ${h} godz, ${m} min, ${s} sek`;
-  }
-  
-  document.querySelectorAll('.test-daemon-btn').forEach(btn => {
-    btn.addEventListener('click', function() {
-      const hostId = this.dataset.hostId;
-      fetch(`/server-info/${hostId}`)
-        .then(res => res.json())
-        .then(data => {
-          if (data.error) {
-            alert(`Błąd: ${data.error}`);
-            return;
-          }
-          document.querySelector('#modal-hostname').textContent = data.hostname;
-          document.querySelector('#modal-ip').textContent = data.ip;
-          
-          const cpu = document.querySelector('#modal-cpu');
-          cpu.style.width = `${data.cpu}%`;
-          cpu.textContent = `${data.cpu}%`;
-  
-          const mem = document.querySelector('#modal-mem');
-          mem.style.width = `${data.mem}%`;
-          mem.textContent = `${data.mem}%`;
-  
-          const disk = document.querySelector('#modal-disk');
-          disk.style.width = `${data.disk}%`;
-          disk.textContent = `${data.disk}%`;
-  
-          document.querySelector('#modal-uptime').textContent = secondsToDhms(data.uptime_seconds);
-  
-          new bootstrap.Modal(document.getElementById('serverInfoModal')).show();
-        })
-        .catch(() => alert('Błąd podczas pobierania danych.'));
+    }
+    
+    document.querySelectorAll('.test-daemon-btn').forEach(btn => {
+      btn.addEventListener('click', function() {
+        const hostId = this.dataset.hostId;
+        fetch(`/server-info/${hostId}`)
+          .then(res => res.json())
+          .then(data => {
+            if (data.error) {
+              alert(`Błąd: ${data.error}`);
+              return;
+            }
+            document.querySelector('#modal-hostname').textContent = data.hostname;
+            document.querySelector('#modal-ip').textContent = data.ip;
+            
+            const cpu = document.querySelector('#modal-cpu');
+            cpu.style.width = `${data.cpu}%`;
+            cpu.textContent = `${data.cpu}%`;
+    
+            const mem = document.querySelector('#modal-mem');
+            mem.style.width = `${data.mem}%`;
+            mem.textContent = `${data.mem}%`;
+    
+            const disk = document.querySelector('#modal-disk');
+            disk.style.width = `${data.disk}%`;
+            disk.textContent = `${data.disk}%`;
+    
+            document.querySelector('#modal-uptime').textContent = secondsToDhms(data.uptime_seconds);
+    
+            new bootstrap.Modal(document.getElementById('serverInfoModal')).show();
+          })
+          .catch(() => alert('Błąd podczas pobierania danych.'));
+      });
     });
-  });
   </script>
   
-{% endblock %}
+{% endblock %}