@@ -613,28 +59,30 @@ $topics = $subjectData->topics; foreach ($topics as $topicData) { ?> -
+
- +

displayName); ?>

description); ?>

-
+

Verwandte Themen:

-
topics; window.addEventListener('load', updateMenuVisibility); window.addEventListener('resize', updateMenuVisibility); - // Animate progress bars on load - document.addEventListener('DOMContentLoaded', () => { - const progressBars = document.querySelectorAll('.progress-bar'); - progressBars.forEach(bar => { - const progressContainer = bar.closest('.progress-container'); - const progressLabel = progressContainer.querySelector('.progress-label'); - const percentage = progressLabel.lastElementChild.textContent.replace('%', ''); - - setTimeout(() => { - bar.style.width = percentage + '%'; - }, 300); - }); - }); - - // Theme toggle functionality - function toggleTheme() { - const root = document.documentElement; - const themeToggle = document.querySelector('.theme-toggle i'); - - if (root.getAttribute('data-theme') === 'dark') { - root.removeAttribute('data-theme'); - themeToggle.classList.remove('fa-sun'); - themeToggle.classList.add('fa-moon'); - localStorage.setItem('theme', 'light'); - } else { - root.setAttribute('data-theme', 'dark'); - themeToggle.classList.remove('fa-moon'); - themeToggle.classList.add('fa-sun'); - localStorage.setItem('theme', 'dark'); - } - } - - // Check for saved theme preference - document.addEventListener('DOMContentLoaded', () => { - const savedTheme = localStorage.getItem('theme'); - const root = document.documentElement; - const themeToggle = document.querySelector('.theme-toggle i'); - - if (savedTheme === 'dark') { - root.setAttribute('data-theme', 'dark'); - themeToggle.classList.remove('fa-moon'); - themeToggle.classList.add('fa-sun'); - } - - // Add stagger effect to cards - const cards = document.querySelectorAll('.topic-card'); - cards.forEach((card, index) => { - card.style.animationDelay = `${index * 0.1}s`; - }); - - // Initialize progress bars - const progressBars = document.querySelectorAll('.progress-bar'); - progressBars.forEach(bar => { - const progress = bar.getAttribute('data-progress'); - const progressElement = bar.querySelector('.progress'); - setTimeout(() => { - progressElement.style.width = `${progress}%`; - }, 300); - }); - }); - - // Update progress bars to 100% - document.addEventListener('DOMContentLoaded', () => { - const progressBars = document.querySelectorAll('.progress-bar'); - progressBars.forEach(bar => { - const progressElement = bar.querySelector('.progress'); - if (progressElement) { // Add null check - setTimeout(() => { - progressElement.style.width = '100%'; - }, 300); - } - }); - }); - - // Add preview functionality - function togglePreview(element) { - const previewContent = element.nextElementSibling; - const isHidden = previewContent.style.display === 'none'; - - if (isHidden) { - // Load preview content - previewContent.innerHTML = ` -
-

Schnelle Übung:

-
- -
-
- `; - - gsap.to(previewContent, { - height: 'auto', - opacity: 1, - duration: 0.3, - display: 'block' - }); - } else { - gsap.to(previewContent, { - height: 0, - opacity: 0, - duration: 0.3, - onComplete: () => { - previewContent.style.display = 'none'; - } - }); - } - } - - // Add card hover effects - document.querySelectorAll('.topic-card').forEach(card => { - card.addEventListener('mouseenter', () => { - const icon = card.querySelector('.topic-icon'); - if (window.gsap) { - gsap.to(icon, { - rotate: -10, - scale: 1.2, - duration: 0.3 - }); - } else { - // Fallback animation using CSS - icon.style.transform = 'rotate(-10deg) scale(1.2)'; - } - }); - - card.addEventListener('mouseleave', () => { - const icon = card.querySelector('.topic-icon'); - if (window.gsap) { - gsap.to(icon, { - rotate: 0, - scale: 1, - duration: 0.3 - }); - } else { - // Fallback animation using CSS - icon.style.transform = 'none'; - } - }); - }); - // Update search function with fallback animation function handleSearch() { const searchTerm = document.getElementById('searchInput').value.toLowerCase(); @@ -943,46 +249,8 @@ $topics = $subjectData->topics; } }); } - - // Update the menu visibility JavaScript - document.addEventListener('DOMContentLoaded', () => { - const menuToggle = document.querySelector('.menu-toggle'); - const sidebar = document.querySelector('.sidebar'); - - // Force correct initial state based on viewport - function updateMenuState() { - if (window.innerWidth <= 1024) { - menuToggle.style.display = 'flex'; - sidebar.style.transform = 'translateX(-100%)'; - } else { - menuToggle.style.display = 'none'; - sidebar.style.transform = 'translateX(0)'; - } - } - - // Initial state - updateMenuState(); - - // Update on resize with debounce - let resizeTimer; - window.addEventListener('resize', () => { - clearTimeout(resizeTimer); - resizeTimer = setTimeout(updateMenuState, 250); - }); - - // Toggle sidebar - menuToggle.addEventListener('click', () => { - const isHidden = sidebar.style.transform === 'translateX(-100%)'; - sidebar.style.transform = isHidden ? 'translateX(0)' : 'translateX(-100%)'; - - if (isHidden) { - addOverlay(); - } else { - removeOverlay(); - } - }); - }); - + + diff --git a/webseite/topic.php b/webseite/topic.php index f88a527..922dda5 100644 --- a/webseite/topic.php +++ b/webseite/topic.php @@ -318,7 +318,7 @@ if(!isset($topicData)) {

displayName); ?>

- Homepage + Startseite displayName); ?> Übersicht @@ -388,35 +388,5 @@ if(!isset($topicData)) {
- -