Update public/index.html

public/index.html

@@ -419,54 +419,57 @@ body {
       <!-- Section Title -->
       <div class="container section-title" data-aos="fade-up">
          <h2>Arbeitspakete</h2>
-         <p> Sieben Arbeitspakete bilden das Fundament unseres Forschungsvorhabens. Sie sind interdisziplinär angelegt und eng miteinander verzahnt.</p>
+         <p> Die Arbeitspakete bilden das Fundament unseres Forschungsvorhabens.</p>
         <!--<p>Check Our Wok Packages<br></p>-->
       </div><!-- End Section Title -->
 
-      <!-- themen zu addieren juni 25-->
-        <!-- Themenbuttons -->
-          <div class="topic-buttons">
-            <button onclick="toggleTopic('ethik', this)">Ethik</button>
-            <button onclick="toggleTopic('technik', this)">Technik</button>
-            <button onclick="toggleTopic('kompetenz', this)">Kompetenz</button>
-            <button onclick="toggleTopic('transfer', this)">Evaluation & Transfer</button>
-            <button onclick="resetTopic()">Alle anzeigen</button>
-          </div>
+      
 
-          <!-- Obere Infofelder -->
-          <div id="topic-ethik" class="topic-details">
-            <strong>Ethikbezogene Arbeitspakete:</strong>
-            <ul>
-              <li><strong>AP 2.1 – 2.2:</strong> Konzeption ethischer Leitlinien für verantwortungsvollen KI-Einsatz.</li>
-            </ul>
-          </div>
+      <div class="container">
 
-          <div id="topic-technik" class="topic-details">
-            <strong>Technische Arbeitspakete:</strong>
-            <ul>
-              <li><strong>AP 3.1 – 3.7:</strong> Infrastruktur, Visualisierung (Grafana), Datenmigration, Study Dean Cockpit.</li>
-              <li><strong>AP 4.1 – 4.4:</strong> Adaptive Testsysteme, KI-Integration in Moodle.</li>
-            </ul>
-          </div>
 
-          <div id="topic-kompetenz" class="topic-details">
-            <strong>Kompetenzbezogene Arbeitspakete:</strong>
-            <ul>
-              <li><strong>AP 1.1 – 1.3:</strong> Kompetenzanalyse und Matrix.</li>
-              <li><strong>AP 6:</strong> KI-Zertifikate und Schulungsformate.</li>
-            </ul>
-          </div>
+        <!-- themen zu addieren juni 25-->
+              <!-- Themenbuttons -->
+                <div class="topic-buttons">
+                  <button onclick="toggleTopic('ethik', this)">Ethik</button>
+                  <button onclick="toggleTopic('technik', this)">Technik</button>
+                  <button onclick="toggleTopic('kompetenz', this)">Kompetenz</button>
+                  <button onclick="toggleTopic('transfer', this)">Evaluation & Transfer</button>
+                  <button onclick="resetTopic()">Alle anzeigen</button>
+                </div>
 
-          <div id="topic-transfer" class="topic-details">
-            <strong>Evaluation & Transfer:</strong>
-            <ul>
-              <li><strong>AP 7:</strong> Begleitforschung, Evaluation, Verankerung.</li>
-              <li><strong>AP 8:</strong> Textgenerierende KI in der Lehre.</li>
-            </ul>
-          </div>
-      <!-- end themen -->
+                <!-- Obere Infofelder -->
+                <div id="topic-ethik" class="topic-details">
+                  <strong>Ethikbezogene Arbeitspakete:</strong>
+                  <ul>
+                    <li><strong>AP 2.1 – 2.2:</strong> Konzeption ethischer Leitlinien für verantwortungsvollen KI-Einsatz.</li>
+                  </ul>
+                </div>
 
-      <div class="container">
+                <div id="topic-technik" class="topic-details">
+                  <strong>Technische Arbeitspakete:</strong>
+                  <ul>
+                    <li><strong>AP 3.1 – 3.7:</strong> Infrastruktur, Visualisierung (Grafana), Datenmigration, Study Dean Cockpit.</li>
+                    <li><strong>AP 4.1 – 4.4:</strong> Adaptive Testsysteme, KI-Integration in Moodle.</li>
+                  </ul>
+                </div>
+
+                <div id="topic-kompetenz" class="topic-details">
+                  <strong>Kompetenzbezogene Arbeitspakete:</strong>
+                  <ul>
+                    <li><strong>AP 1.1 – 1.3:</strong> Kompetenzanalyse und Matrix.</li>
+                    <li><strong>AP 6:</strong> KI-Zertifikate und Schulungsformate.</li>
+                  </ul>
+                </div>
+
+                <div id="topic-transfer" class="topic-details">
+                  <strong>Evaluation & Transfer:</strong>
+                  <ul>
+                    <li><strong>AP 7:</strong> Begleitforschung, Evaluation, Verankerung.</li>
+                    <li><strong>AP 8:</strong> Textgenerierende KI in der Lehre.</li>
+                  </ul>
+                </div>
+      <!-- end themen -->
 
         <div class="row gy-4">
           
@@ -1505,6 +1508,34 @@ Implementations, and Perspectives
       });
     </script>
 
+
+     <!-- 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';
+              });
+            }
+          </script>
+
+
 </body>