"feat: Implement mindmap control enhancements and controls updates"

templates/mindmap.html

@@ -90,7 +90,7 @@
   /* Kontrollpanel */
   .control-panel {
     position: absolute;
-    right: 2rem;
+    right: 9rem;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(15, 23, 42, 0.9);
@@ -123,6 +123,60 @@
     margin-right: 0.75rem;
   }
 
+  /* Rechte Seitenleiste */
+  .right-sidebar {
+    position: absolute;
+    right: 1.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    z-index: 100;
+  }
+
+  .tool-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    background: rgba(15, 23, 42, 0.9);
+    border-radius: 1rem;
+    padding: 1rem;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  }
+
+  .sidebar-button {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0.75rem;
+    padding: 0.75rem;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 0.5rem;
+    color: white;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-size: 0.9rem;
+    width: 100%;
+  }
+
+  .sidebar-button:hover {
+    background: rgba(255, 255, 255, 0.2);
+    transform: translateX(-5px);
+  }
+
+  .sidebar-button i {
+    font-size: 1.1rem;
+    color: #8b5cf6;
+  }
+
+  .sidebar-button:active {
+    transform: scale(0.98);
+  }
+
   /* CRUD Panel */
   .crud-panel {
     position: absolute;
@@ -425,6 +479,24 @@
     </button>
   </div>
 
+  <!-- Rechte Seitenleiste -->
+  <div class="right-sidebar">
+    <div class="tool-buttons">
+      <button id="vergrößernBtn" class="sidebar-button">
+        <i class="fas fa-search-plus"></i>
+        <span>Vergrößern</span>
+      </button>
+      <button id="verkleinernBtn" class="sidebar-button">
+        <i class="fas fa-search-minus"></i>
+        <span>Verkleinern</span>
+      </button>
+      <button id="zurücksetzenBtn" class="sidebar-button">
+        <i class="fas fa-sync"></i>
+        <span>Zurücksetzen</span>
+      </button>
+    </div>
+  </div>
+
   <!-- CRUD Buttons (anfänglich ausgeblendet) -->
   <div id="crudPanel" class="crud-panel" style="display: none;">
     <button id="createNode" class="crud-button create">
@@ -488,6 +560,7 @@
 
 <!-- Unsere JavaScript-Dateien -->
 <script src="{{ url_for('static', filename='js/update_mindmap.js') }}"></script>
+<script src="{{ url_for('static', filename='js/mindmap_controls.js') }}"></script>
 
 <!-- Initialisierung -->
 <script>