Add 'Bedienung' collapsible section with usage instructions and keyboard shortcuts

sorting_visualization.html

@@ -204,7 +204,7 @@
       <div class="flex-1"></div>
       <div class="text-center">
         <h1 class="title-text font-bold tracking-tight" style="color: var(--c-text); text-shadow: 0 0 40px rgba(74,124,255,0.3);">
-          Sortier-Algorithmen <span style="font-size: 0.45em; font-weight: 400; opacity: 0.5; vertical-align: middle;">v0.2.13</span>
+          Sortier-Algorithmen <span style="font-size: 0.45em; font-weight: 400; opacity: 0.5; vertical-align: middle;">v0.2.14</span>
         </h1>
         <p class="text-muted text-sm mt-0.5">Interaktive Visualisierung mit schrittweiser Animation</p>
       </div>
@@ -755,6 +755,97 @@
       </div>
     </details>
 
+    <!-- Bedienung (collapsible) -->
+    <details class="bg-surface border border-border rounded-xl group">
+      <summary class="p-4 sm:p-5 cursor-pointer select-none flex items-center gap-2 text-sm font-semibold text-gray-200 hover:text-white transition-colors">
+        <i data-lucide="gamepad-2" class="w-4 h-4 text-accent"></i>
+        Bedienung
+        <i data-lucide="chevron-down" class="w-4 h-4 text-muted ml-auto chevron-icon"></i>
+      </summary>
+      <div class="px-4 sm:px-5 pb-4 sm:pb-5 pt-0 space-y-5">
+
+        <p class="text-xs text-muted leading-relaxed"><strong class="text-gray-300">Was ist das?</strong> Dieses Programm visualisiert die Funktionsweise von 20 Sortieralgorithmen — von Bubble Sort bis Fisher-Yates Shuffle. Es zeigt Schritt für Schritt, wie ein Algorithmus ein Array sortiert, macht die Datenstrukturen und Speichernutzung sichtbar und vermittelt ein intuitives Verständnis dafür, warum der eine Algorithmus schneller ist als der andere.</p>
+
+        <!-- Quick-Start -->
+        <div class="bg-surface2/50 rounded-lg p-3 border border-border/50">
+          <p class="text-[11px] uppercase tracking-wider text-muted font-medium mb-2">Quick-Start</p>
+          <ol class="text-xs text-muted leading-relaxed space-y-1.5">
+            <li class="flex gap-2"><span class="text-accent font-bold shrink-0">1.</span> <span>Wähle einen Algorithmus aus dem Dropdown-Menü.</span></li>
+            <li class="flex gap-2"><span class="text-accent font-bold shrink-0">2.</span> <span>Stelle die Array-Größe und Geschwindigkeit ein.</span></li>
+            <li class="flex gap-2"><span class="text-accent font-bold shrink-0">3.</span> <span>Drücke <span class="inline-block px-1.5 py-0.5 rounded bg-accent/10 text-accent border border-accent/20 text-[10px] font-mono">Space</span> zum Starten — oder nutze die Schritt-für-Schritt-Navigation.</span></li>
+          </ol>
+        </div>
+
+        <!-- Steuerung -->
+        <div class="bg-surface2/50 rounded-lg p-3 border border-border/50">
+          <p class="text-[11px] uppercase tracking-wider text-muted font-medium mb-2">Steuerung</p>
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-2 text-xs text-muted leading-relaxed">
+            <div class="flex items-center gap-2">
+              <span class="inline-block px-1.5 py-0.5 rounded bg-accent/10 text-accent border border-accent/20 text-[10px] font-mono shrink-0">▶</span>
+              <span>Play / Pause — Animation starten oder anhalten</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <span class="inline-block px-1.5 py-0.5 rounded bg-accent/10 text-accent border border-accent/20 text-[10px] font-mono shrink-0">⏭</span>
+              <span>Ein Schritt vor — nächste Operation</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <span class="inline-block px-1.5 py-0.5 rounded bg-accent/10 text-accent border border-accent/20 text-[10px] font-mono shrink-0">⏮</span>
+              <span>Ein Schritt zurück — vorherige Operation</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <span class="inline-block px-1.5 py-0.5 rounded bg-accent/10 text-accent border border-accent/20 text-[10px] font-mono shrink-0">↺</span>
+              <span>Reset — Array in Ausgangszustand zurücksetzen</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <span class="inline-block px-1.5 py-0.5 rounded bg-accent/10 text-accent border border-accent/20 text-[10px] font-mono shrink-0">🔀</span>
+              <span>Mischen — Fisher-Yates Shuffle auf aktuelles Array</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <span class="inline-block px-1.5 py-0.5 rounded bg-accent/10 text-accent border border-accent/20 text-[10px] font-mono shrink-0">🌙/☀</span>
+              <span>Theme — zwischen hellem und dunklem Modus wechseln</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Tastaturkürzel -->
+        <div class="bg-surface2/50 rounded-lg p-3 border border-border/50">
+          <p class="text-[11px] uppercase tracking-wider text-muted font-medium mb-2">Tastaturkürzel</p>
+          <div class="grid grid-cols-2 sm:grid-cols-3 gap-x-4 gap-y-1.5 text-xs text-muted leading-relaxed">
+            <div class="flex items-center gap-1.5"><kbd class="px-1.5 py-0.5 rounded bg-surface border border-border text-[10px] font-mono text-gray-300">Space</kbd> <span>Play/Pause</span></div>
+            <div class="flex items-center gap-1.5"><kbd class="px-1.5 py-0.5 rounded bg-surface border border-border text-[10px] font-mono text-gray-300">K</kbd> <span>Play/Pause</span></div>
+            <div class="flex items-center gap-1.5"><kbd class="px-1.5 py-0.5 rounded bg-surface border border-border text-[10px] font-mono text-gray-300">←</kbd> <span>Schritt zurück</span></div>
+            <div class="flex items-center gap-1.5"><kbd class="px-1.5 py-0.5 rounded bg-surface border border-border text-[10px] font-mono text-gray-300">J</kbd> <span>Schritt zurück</span></div>
+            <div class="flex items-center gap-1.5"><kbd class="px-1.5 py-0.5 rounded bg-surface border border-border text-[10px] font-mono text-gray-300">→</kbd> <span>Schritt vor</span></div>
+            <div class="flex items-center gap-1.5"><kbd class="px-1.5 py-0.5 rounded bg-surface border border-border text-[10px] font-mono text-gray-300">L</kbd> <span>Schritt vor</span></div>
+            <div class="flex items-center gap-1.5"><kbd class="px-1.5 py-0.5 rounded bg-surface border border-border text-[10px] font-mono text-gray-300">R</kbd> <span>Reset</span></div>
+            <div class="flex items-center gap-1.5"><kbd class="px-1.5 py-0.5 rounded bg-surface border border-border text-[10px] font-mono text-gray-300">T</kbd> <span>Theme</span></div>
+            <div class="flex items-center gap-1.5"><kbd class="px-1.5 py-0.5 rounded bg-surface border border-border text-[10px] font-mono text-gray-300">S</kbd> <span>Shuffle</span></div>
+          </div>
+        </div>
+
+        <!-- Presets -->
+        <div class="bg-surface2/50 rounded-lg p-3 border border-border/50">
+          <p class="text-[11px] uppercase tracking-wider text-muted font-medium mb-2">Datensätze</p>
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-1.5 text-xs text-muted leading-relaxed">
+            <div><span class="text-gray-300 font-medium">Zufällig</span> — zufällig verteilte Werte, der Standard-Testfall.</div>
+            <div><span class="text-gray-300 font-medium">Sortiert</span> — bereits in aufsteigender Reihenfolge. Manche Algorithmen (z.B. Quick Sort mit erstem Element als Pivot) werden dadurch extrem langsam.</div>
+            <div><span class="text-gray-300 font-medium">Umgekehrt</span> — absteigend sortiert. Das Gegenstück zu „Sortiert" und ein公平er Test für die meisten Algorithmen.</div>
+            <div><span class="text-gray-300 font-medium">Fast sortiert</span> — nur wenige Elemente sind an der falschen Stelle. Adaptiven Algorithmen (Insertion Sort, Timsort) spielen hier ihre Stärke aus.</div>
+            <div><span class="text-gray-300 font-medium">Duplikate</span> — viele gleiche Werte. Das ist der Härtetest für Algorithmen wie Quick Sort (degeneriert zu O(n²)), während 3-Way Quick Sort hier brilliert.</div>
+          </div>
+        </div>
+
+        <!-- Warum Sortieralgorithmen? -->
+        <div class="bg-surface2/50 rounded-lg p-3 border border-border/50">
+          <p class="text-[11px] uppercase tracking-wider text-muted font-medium mb-2">Warum sind Sortieralgorithmen wichtig?</p>
+          <p class="text-xs text-muted leading-relaxed mb-2">Sortieren ist eines der am intensivsten erforschten Probleme der Informatik — nicht aus akademischer Überheblichkeit, sondern weil es in der Praxis überall vorkommt: Datenbankabfragen müssen Ergebnisse sortieren, Betriebssysteme verwalten Prioritätswarteschlangen, Compiler nutzen Sortieralgorithmen für die Optimierung. Die Wahl des richtigen Algorithmus kann den Unterschied ausmachen zwischen einer Antwort in Millisekunden und in Minuten.</p>
+          <p class="text-xs text-muted leading-relaxed mb-2">Jeder Algorithmus repräsentiert einen grundlegenden Kompromiss: Manche sind einfach zu verstehen (Bubble Sort), andere extrem schnell im Durchschnitt (Quick Sort), wieder andere garantieren auch im schlimmsten Fall gute Leistung (Heap Sort). Wer diese Kompromisse versteht, kann für jede Situation die richtige Wahl treffen — sei es beim Sortieren von 100 Datensätzen oder 100 Millionen.</p>
+          <p class="text-xs text-muted leading-relaxed">Dieses Programm hilft dabei, ein intuitives Gespür für diese Kompromisse zu entwickeln. Beobachten Sie, wie Bubble Sort bei sortierten Daten plötzlich in O(n) abschließt, während er bei umgekehrt sortierten Daten genauso langsam ist wie immer. Oder wie Timsort die Ordnung in fast-sortierten Daten sofort erkennt und ausnutzt. Visuelles Lernen macht sichtbar, was Paper und Pseudocode nur schwer vermitteln.</p>
+        </div>
+
+      </div>
+    </details>
+
   </div>
 
   <script>