Update public/index.html

public/index.html

@@ -428,6 +428,9 @@ body {
                 </div>
 
 
+               
+
+                
           </div>
           <div>
           </div>
@@ -470,7 +473,7 @@ body {
          
 
           <!-- AP1  -->
-          <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200" class="tab" data-tag="AP1">
+          <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200" data-topic="kompetenz">
             <div class="service-item item-cyan position-relative">
               <div class="icon"><i class="bi bi-cpu"></i></div>
               <h3>AP1: Entwicklung einer Kompetenzmatrix für KI</h3>
@@ -481,7 +484,7 @@ body {
           </div><!-- End Service Item -->
 
           <!-- AP2  -->
-           <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200" class="tab" data-tag="AP2">
+           <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200" data-topic="ethik">
             <div class="service-item item-red position-relative">
               <div class="icon"><i class="bi bi-balance-scale"></i></div>
               <!--<i class="bi bi-bounding-box-circles icon"></i> -->
@@ -494,7 +497,7 @@ body {
 
 
           <!-- AP3  -->
-          <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200" class="tab" data-tag="AP3">
+          <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200"  data-topic="technik">
             <div class="service-item item-orange position-relative">
               <div class="icon"><i class="bi bi-graph-up"></i></div>
               <!--<i class="bi bi-broadcast icon"></i>-->
@@ -507,7 +510,7 @@ body {
 
 
           <!-- AP4  -->
-          <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200" class="tab" data-tag="AP4">
+          <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200"  data-topic="technik">
             <div class="service-item item-teal position-relative">
               <div class="icon"><i class="bi bi-layers"></i></div>
               <!--<i class="bi bi-chat-square-text icon"></i>-->
@@ -521,7 +524,7 @@ body {
 
 
           <!-- AP5  -->
-          <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200" class="tab" data-tag="AP5">
+          <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200"  data-topic="technik">
             <div class="service-item item-indigo position-relative">
               <div class="icon"><i class="bi bi-terminal"></i></div>
               <!--<i class="bi bi-easel icon"></i>-->
@@ -535,7 +538,7 @@ body {
          
 
            <!-- AP6  -->
-          <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200" class="tab" data-tag="AP6">
+          <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200" class="tab" data-topic="kompetenz">
             <div class="service-item item-pink position-relative">
               <div class="icon"><i class="bi bi-award"></i></div>
              <!-- <i class="bi bi-calendar4-week icon"></i>  -->
@@ -548,7 +551,7 @@ body {
 
          <!--  Ap7: Einsatz textgenerierender KI in der Lehre -->
 
-        <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200" class="tab" data-tag="AP7">
+        <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200" data-topic="transfer">
           <div class="service-item item-cyan position-relative">
                    <!--<i class="bi bi-type icon"></i>-->
                 <div class="icon"><i class="bi bi-chat-left-text"></i></div>
@@ -559,7 +562,7 @@ body {
         </div>
            
         <!--  AP 8 -->
-          <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200" class="tab" data-tag="AP8">
+          <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200" data-topic="transfer"">
             <div class="service-item item-red position-relative">
               <div class="icon"><i class="bi bi-bar-chart"></i></div>
               <!--<i class="bi bi-chat-square-text icon"></i>-->
@@ -573,7 +576,8 @@ body {
 
       </div>
 
-    </section><!-- /Services Section -->
+    </section>
+    <!-- /Services Section -->
 
    <!-- Neue section in Juni 2025 -->
 
@@ -1520,26 +1524,33 @@ Implementations, and Perspectives
      <!-- Script für themen -->
           <script>
                   function toggleTopic(topicId, btn) {
-              // Alle anderen Texte ausblenden
+                    // Obere Beschreibungstexte ausblenden
                     document.querySelectorAll('.topic-details').forEach(el => el.style.display = 'none');
-              // Aktuellen Text anzeigen
+
+                    // Aktuellen Text anzeigen (wenn vorhanden)
                     const topicEl = document.getElementById('topic-' + topicId);
-              topicEl.style.display = 'block';
+                    if (topicEl) topicEl.style.display = 'block';
 
-              // Button-Status aktualisieren
+                    // Button-Aktivstatus aktualisieren
                     document.querySelectorAll('.topic-buttons button').forEach(b => b.classList.remove('active'));
                     btn.classList.add('active');
+
+                    // Filter für die AP-Karten
+                    document.querySelectorAll('.tab').forEach(card => {
+                      const cardTopic = card.getAttribute('data-topic');
+                      card.style.display = (cardTopic === topicId) ? 'block' : 'none';
+                    });
                   }
 
                   function resetTopic() {
+                    // Obere Beschreibungen ausblenden
                     document.querySelectorAll('.topic-details').forEach(el => el.style.display = 'none');
+
+                    // Alle Buttons deaktivieren
                     document.querySelectorAll('.topic-buttons button').forEach(b => b.classList.remove('active'));
-            }
 
-            function toggleDetails(id) {
-              document.querySelectorAll('.details').forEach(el => {
-                el.style.display = (el.id === id && el.style.display !== 'block') ? 'block' : 'none';
-              });
+                    // Alle AP-Karten einblenden
+                    document.querySelectorAll('.tab').forEach(card => card.style.display = 'block');
                   }
           </script>