collapsable cards

static/app.css

@@ -346,4 +346,25 @@ footer {
 
 @keyframes spin {
   to { transform: rotate(360deg); }
+}
+
+.card-body.collapsable {
+  display: none;
+  transition: max-height 0.3s ease;
+  overflow: hidden;
+
+}
+
+.card-body.collapsable.show {
+  display: block;
+  max-height: 1000px; 
+}
+
+.toggle-icon {
+  font-size: 1.25rem;
+  user-select: none;
+}
+
+.toggle-icon:hover {
+  color: #007bff;
 }

static/app.js

@@ -498,4 +498,56 @@ function syncThemeColor() {
     .forEach(svg => svg.setAttribute('fill', cssVar));
 }
 
-document.addEventListener('DOMContentLoaded', syncThemeColor);
+document.addEventListener('DOMContentLoaded', syncThemeColor);
+
+
+// toggle card visibility
+document.addEventListener('DOMContentLoaded', function() {
+    // 1. Select all plus/minus icons
+    var icons = document.querySelectorAll('.card .toggle-icon');
+
+    icons.forEach(function(icon) {
+      // 2. For each icon, find its corresponding collapsable body
+      var card = icon.closest('.card');
+      if (!card) return;
+
+      var body = card.querySelector('.card-body.collapsable');
+      if (!body) return;
+
+      // 3. Initialize aria‐expanded & icon text based on whether .show is present
+      if (body.classList.contains('show')) {
+        icon.textContent = '–';
+        icon.setAttribute('aria-expanded', 'true');
+      } else {
+        icon.textContent = '+';
+        icon.setAttribute('aria-expanded', 'false');
+      }
+
+      function toggleSection() {
+        // Toggle the 'show' class
+        if (body.classList.contains('show')) {
+          body.classList.remove('show');
+          icon.textContent = '+';
+          icon.setAttribute('aria-expanded', 'false');
+        } else {
+          body.classList.add('show');
+          icon.textContent = '–';
+          icon.setAttribute('aria-expanded', 'true');
+        }
+      }
+
+      // 4. Click listener
+      icon.addEventListener('click', function(e) {
+        e.stopPropagation();
+        toggleSection();
+      });
+
+      // 5. Keydown listener (Enter/Space for accessibility)
+      icon.addEventListener('keydown', function(e) {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          toggleSection();
+        }
+      });
+    });
+  });

templates/connections.html

@@ -26,7 +26,7 @@
 
 {% block content %}
   <div class="container-fluid">
-    <h2>Übersicht deiner gültigen Links</h2>
+    <h2>Verbindungen der letzten 10 Minuten</h2>
     <span class="ms-3">
       Anzahl Verbindungen: <strong id="totalConnections">0</strong>
     </span>

templates/file_access.html

@@ -62,10 +62,11 @@
       <!-- Detailed Table of Top File Accesses -->
       {% for top20_item in top20 %}
       <div class="card mb-4">
-        <div class="card-header">
+        <div class="card-header d-flex justify-content-between align-items-center">
-          Top 20 Dateizugriffe ({{ top20_item['category'] }})
+          <span>Top 20 Dateizugriffe ({{ top20_item['category'] }})</span>
+          <span class="toggle-icon" aria-label="collapse" role="button" tabindex="0">+</span>
         </div>
-        <div class="card-body">
+        <div class="card-body collapsable">
           <div class="table-responsive">
             <table class="table table-striped">
               <thead>
@@ -95,5 +96,5 @@
     {% endblock %}
 
     {% block scripts %}
-
+    
 {% endblock %}