From 96f5b9e3cd92c45982c9ed3e269c52f7b2f913df Mon Sep 17 00:00:00 2001
From: AIIrondev <iron.ai.dev@gmail.com>
Date: Tue, 28 Apr 2026 21:59:26 +0200
Subject: [PATCH] Enhance tutorial functionality: add tooltip toggle feature
 and improve tooltip display across the system

---
 Web/templates/base.html     | 114 +++++++++++++++++++++++++++++++++---
 Web/templates/tutorial.html |  63 ++++++++++++++++++++
 2 files changed, 169 insertions(+), 8 deletions(-)

diff --git a/Web/templates/base.html b/Web/templates/base.html
index 8a5450c..e07746d 100755
--- a/Web/templates/base.html
+++ b/Web/templates/base.html
@@ -206,6 +206,82 @@
             white-space: nowrap;
         }
 
+        body.tutorial-tooltips-active [data-tutorial-tip] {
+            position: relative;
+            border-radius: 10px;
+            outline: 1px dashed rgba(59, 130, 246, 0.35);
+            outline-offset: 2px;
+            cursor: help;
+        }
+
+        body.tutorial-tooltips-active [data-tutorial-tip]::before {
+            content: '💡';
+            position: absolute;
+            top: 50%;
+            right: -26px;
+            transform: translateY(-50%);
+            width: 20px;
+            height: 20px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 999px;
+            background: rgba(59, 130, 246, 0.15);
+            color: #0f172a;
+            font-size: 0.75rem;
+            pointer-events: none;
+        }
+
+        body.tutorial-tooltips-active [data-tutorial-tip]::after {
+            content: attr(data-tutorial-tip);
+            position: absolute;
+            top: calc(100% + 10px);
+            left: 50%;
+            transform: translateX(-50%) translateY(6px);
+            min-width: 220px;
+            max-width: 280px;
+            padding: 10px 12px;
+            border-radius: 14px;
+            background: rgba(15, 23, 42, 0.92);
+            color: #f8fafc;
+            font-size: 0.9rem;
+            line-height: 1.4;
+            text-align: left;
+            opacity: 0;
+            visibility: hidden;
+            pointer-events: none;
+            box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22);
+            z-index: 9999;
+            white-space: normal;
+        }
+
+        body.tutorial-tooltips-active [data-tutorial-tip]:hover::after {
+            opacity: 1;
+            visibility: visible;
+            transform: translateX(-50%) translateY(10px);
+        }
+
+        .tutorial-tooltip-indicator {
+            position: fixed;
+            top: 92px;
+            right: 16px;
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            gap: 10px;
+            padding: 10px 14px;
+            border-radius: 999px;
+            background: rgba(56, 189, 248, 0.12);
+            border: 1px solid rgba(56, 189, 248, 0.25);
+            color: #0f172a;
+            font-size: 0.95rem;
+            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
+        }
+
+        body.tutorial-tooltips-active .tutorial-tooltip-indicator {
+            display: inline-flex;
+        }
+
         /* iPad/Tablet responsive adjustments */
         @media (max-width: 1024px) {
             .navbar .container-fluid {
@@ -952,24 +1028,24 @@
                 <ul class="navbar-nav me-auto mb-2 mb-lg-0" id="inventoryNavList">
                     {% if current_permissions.pages.get('home', True) %}
                     <li class="nav-item" data-nav-fixed="true">
-                        <a class="nav-link {% if current_path == url_for('home') %}nav-active{% endif %}" href="{{ url_for('home') }}">Artikel</a>
+                        <a class="nav-link {% if current_path == url_for('home') %}nav-active{% endif %}" href="{{ url_for('home') }}" data-tutorial-tip="Starten Sie hier mit dem Materialbestand und suchen Sie nach Artikeln.">Artikel</a>
                     </li>
                     {% endif %}
                     {% if 'username' in session %}
                     {% if current_permissions.pages.get('my_borrowed_items', True) %}
                     <li class="nav-item">
-                        <a class="nav-link quick-link-pill {% if current_path == url_for('my_borrowed_items') %}nav-active{% endif %}" href="{{ url_for('my_borrowed_items') }}">Meine Ausleihen</a>
+                        <a class="nav-link quick-link-pill {% if current_path == url_for('my_borrowed_items') %}nav-active{% endif %}" href="{{ url_for('my_borrowed_items') }}" data-tutorial-tip="Ihre aktuellen Ausleihen und Rückgaben finden Sie hier.">Meine Ausleihen</a>
                     </li>
                     {% endif %}
                     {% if current_permissions.pages.get('tutorial_page', True) %}
                     <li class="nav-item">
-                        <a class="nav-link quick-link-pill {% if current_path == url_for('tutorial_page') %}nav-active{% endif %}" href="{{ url_for('tutorial_page') }}">Tutorial</a>
+                        <a class="nav-link quick-link-pill {% if current_path == url_for('tutorial_page') %}nav-active{% endif %}" href="{{ url_for('tutorial_page') }}" data-tutorial-tip="Öffnen Sie das Tutorial, um das System Schritt für Schritt kennenzulernen.">Tutorial</a>
                     </li>
                     {% endif %}
                     {% endif %}
                     {% if 'username' in session and current_permissions.pages.get('upload_admin', True) and current_permissions.actions.get('can_insert', True) %}
                     <li class="nav-item">
-                        <a class="nav-link nav-priority-link {% if current_path == url_for('upload_admin') %}nav-active{% endif %}" href="{{ url_for('upload_admin') }}">➕ Hochladen</a>
+                        <a class="nav-link nav-priority-link {% if current_path == url_for('upload_admin') %}nav-active{% endif %}" href="{{ url_for('upload_admin') }}" data-tutorial-tip="Hier können Sie neue Artikel ins Inventar einpflegen.">➕ Hochladen</a>
                     </li>
                     {% endif %}
                     <li class="nav-item" data-nav-fixed="true">
@@ -1071,24 +1147,24 @@
                 <ul class="navbar-nav me-auto mb-2 mb-lg-0" id="libraryNavList">
                     {% if current_permissions.pages.get('library_view', True) %}
                     <li class="nav-item" data-nav-fixed="true">
-                        <a class="nav-link {% if current_path == url_for('library_view') %}nav-active{% endif %}" href="{{ url_for('library_view') }}">Medien</a>
+                        <a class="nav-link {% if current_path == url_for('library_view') %}nav-active{% endif %}" href="{{ url_for('library_view') }}" data-tutorial-tip="Die Bibliothek zeigt Ihnen alle Medien und verfügbaren Bücher.">Medien</a>
                     </li>
                     {% endif %}
                     {% if 'username' in session %}
                     {% if current_permissions.pages.get('my_borrowed_items', True) %}
                     <li class="nav-item">
-                        <a class="nav-link quick-link-pill {% if current_path == url_for('my_borrowed_items') %}nav-active{% endif %}" href="{{ url_for('my_borrowed_items') }}">Meine Medien</a>
+                        <a class="nav-link quick-link-pill {% if current_path == url_for('my_borrowed_items') %}nav-active{% endif %}" href="{{ url_for('my_borrowed_items') }}" data-tutorial-tip="Hier sehen Sie Ihre bibliotheksbezogenen Ausleihen.">Meine Medien</a>
                     </li>
                     {% endif %}
                     {% if current_permissions.pages.get('tutorial_page', True) %}
                     <li class="nav-item">
-                        <a class="nav-link quick-link-pill {% if current_path == url_for('tutorial_page') %}nav-active{% endif %}" href="{{ url_for('tutorial_page') }}">Tutorial</a>
+                        <a class="nav-link quick-link-pill {% if current_path == url_for('tutorial_page') %}nav-active{% endif %}" href="{{ url_for('tutorial_page') }}" data-tutorial-tip="Nutzen Sie das Tutorial, um die Bibliotheksfunktionen kennenzulernen.">Tutorial</a>
                     </li>
                     {% endif %}
                     {% endif %}
                     {% if 'username' in session and current_permissions.actions.get('can_insert', True) and current_permissions.pages.get('library_admin', True) %}
                     <li class="nav-item">
-                        <a class="nav-link nav-priority-link {% if current_path == url_for('library_admin') %}nav-active{% endif %}" href="{{ url_for('library_admin') }}">📖 Hochladen</a>
+                        <a class="nav-link nav-priority-link {% if current_path == url_for('library_admin') %}nav-active{% endif %}" href="{{ url_for('library_admin') }}" data-tutorial-tip="Neue Bibliotheksmedien können hier aufgenommen werden.">📖 Hochladen</a>
                     </li>
                     {% endif %}
                     <li class="nav-item" data-nav-fixed="true">
@@ -1999,6 +2075,28 @@
             });
         });
     </script>
+    <script>
+        (function () {
+            const username = {{ (session['username'] if 'username' in session else '')|tojson }};
+            const tooltipModeKey = username ? ('inventarsystem_tutorial_tooltips_enabled_' + username) : 'inventarsystem_tutorial_tooltips_enabled';
+            const enabled = localStorage.getItem(tooltipModeKey) === '1';
+
+            function applyTooltipMode(active) {
+                document.body.classList.toggle('tutorial-tooltips-active', active);
+                let indicator = document.getElementById('tutorialTooltipIndicator');
+                if (!indicator) {
+                    indicator = document.createElement('div');
+                    indicator.id = 'tutorialTooltipIndicator';
+                    indicator.className = 'tutorial-tooltip-indicator';
+                    indicator.textContent = 'Tutorial-Modus aktiv: Tooltips sind eingeschaltet';
+                    document.body.appendChild(indicator);
+                }
+                indicator.style.display = active ? 'inline-flex' : 'none';
+            }
+
+            applyTooltipMode(enabled);
+        })();
+    </script>
 
 </body>
 </html>
diff --git a/Web/templates/tutorial.html b/Web/templates/tutorial.html
index 93bf7fe..8c876ec 100644
--- a/Web/templates/tutorial.html
+++ b/Web/templates/tutorial.html
@@ -189,6 +189,38 @@
     font-size: 1rem;
   }
 
+  .tutorial-tooltip-toggle {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-top: 20px;
+    padding: 16px;
+    border-radius: 18px;
+    background: rgba(224, 242, 254, 0.9);
+    border: 1px solid #bae6fd;
+  }
+
+  .tutorial-tooltip-toggle label {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-weight: 700;
+    color: #0f172a;
+  }
+
+  .tutorial-tooltip-toggle input[type="checkbox"] {
+    width: 20px;
+    height: 20px;
+    accent-color: #2563eb;
+  }
+
+  .tooltip-description {
+    margin: 0;
+    color: #475569;
+    font-size: 0.95rem;
+    line-height: 1.5;
+  }
+
   .workflow-controls {
     display: flex;
     gap: 8px;
@@ -230,6 +262,13 @@
       <span class="tutorial-pill">Format: Ruhig und geführt</span>
       <span class="tutorial-pill">Benutzer: {{ username }}</span>
     </div>
+    <div class="tutorial-tooltip-toggle">
+      <label for="toggleTutorialTooltips">
+        <input type="checkbox" id="toggleTutorialTooltips" />
+        Tutorial-Tooltips für das gesamte System aktivieren
+      </label>
+      <p class="tooltip-description">Wenn aktiviert, erscheinen auf allen Seiten erklärende Hinweise und Icons für die wichtigsten Navigationselemente.</p>
+    </div>
   </section>
 
   <div class="tutorial-grid">
@@ -438,8 +477,32 @@
       renderStep();
     });
 
+    const tooltipToggle = document.getElementById('toggleTutorialTooltips');
+    const tooltipModeKey = 'inventarsystem_tutorial_tooltips_enabled_{{ username }}';
+
+    function setTooltipMode(enabled) {
+      localStorage.setItem(tooltipModeKey, enabled ? '1' : '0');
+      document.body.classList.toggle('tutorial-tooltips-active', enabled);
+    }
+
+    function loadTooltipMode() {
+      const saved = localStorage.getItem(tooltipModeKey);
+      const enabled = saved === '1';
+      if (tooltipToggle) {
+        tooltipToggle.checked = enabled;
+      }
+      setTooltipMode(enabled);
+    }
+
+    if (tooltipToggle) {
+      tooltipToggle.addEventListener('change', function () {
+        setTooltipMode(this.checked);
+      });
+    }
+
     loadState();
     renderStep();
+    loadTooltipMode();
   })();
 </script>
 {% endblock %}