Update public/index.html

public/index.html

@@ -427,6 +427,9 @@ body {
                   <button onclick="resetTopic()">Alle anzeigen</button>
                 </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,10 +551,10 @@ 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>
+                <div class="icon"><i class="bi bi-chat-left-text"></i></div>
                 <h3>AP7: Textgenerierende KI</h3>
                 <p>Integration von KI-Schreibhilfen in die Lehre.</p>
                 <a href="generative-ki-schreibseminar.html" class="read-more stretched-link"><span>Mehr erfahren</span> <i class="bi bi-arrow-right"></i></a>
@@ -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 -->
 
@@ -1519,28 +1523,35 @@ Implementations, and Perspectives
 
      <!-- Script für themen -->
           <script>
-            function toggleTopic(topicId, btn) {
-              // Alle anderen Texte ausblenden
-              document.querySelectorAll('.topic-details').forEach(el => el.style.display = 'none');
-              // Aktuellen Text anzeigen
-              const topicEl = document.getElementById('topic-' + topicId);
-              topicEl.style.display = 'block';
-
-              // Button-Status aktualisieren
-              document.querySelectorAll('.topic-buttons button').forEach(b => b.classList.remove('active'));
-              btn.classList.add('active');
-            }
-
-            function resetTopic() {
-              document.querySelectorAll('.topic-details').forEach(el => el.style.display = 'none');
-              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';
-              });
-            }
+                  function toggleTopic(topicId, btn) {
+                    // Obere Beschreibungstexte ausblenden
+                    document.querySelectorAll('.topic-details').forEach(el => el.style.display = 'none');
+
+                    // Aktuellen Text anzeigen (wenn vorhanden)
+                    const topicEl = document.getElementById('topic-' + topicId);
+                    if (topicEl) topicEl.style.display = 'block';
+
+                    // 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'));
+
+                    // Alle AP-Karten einblenden
+                    document.querySelectorAll('.tab').forEach(card => card.style.display = 'block');
+                  }
           </script>