// PSI JavaScript-Funktionen
document.addEventListener('DOMContentLoaded', function() {
// Sidebar toggle for mobile
const sidebarToggleBtn = document.querySelector('[data-sidebar-toggle]');
const sidebar = document.getElementById('sidebar');
const sidebarOverlay = document.getElementById('sidebarOverlay');
if (sidebarToggleBtn && sidebar) {
sidebarToggleBtn.addEventListener('click', function() {
sidebar.classList.toggle('max-h-0');
sidebar.classList.toggle('max-h-[80vh]');
if (sidebarOverlay) {
sidebarOverlay.classList.toggle('hidden');
}
});
}
if (sidebarOverlay) {
sidebarOverlay.addEventListener('click', function() {
if (sidebar) {
sidebar.classList.add('max-h-0');
sidebar.classList.remove('max-h-[80vh]');
}
sidebarOverlay.classList.add('hidden');
});
}
// Performance Details Toggle
const detailsHeader = document.getElementById('performanceDetailsHeader');
const detailsContent = document.getElementById('performanceDetailsContent');
if (detailsHeader && detailsContent) {
detailsHeader.addEventListener('click', function() {
detailsContent.classList.toggle('hidden');
const icon = detailsHeader.querySelector('i');
if (icon) {
icon.classList.toggle('rotate-180');
}
});
}
// DSGVO Cookie-Details Toggle
const toggleLinks = document.querySelectorAll('[data-gdpr-toggle]');
toggleLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const contentId = this.getAttribute('data-gdpr-toggle');
const content = document.getElementById(contentId);
const icon = this.querySelector('i');
if (content) {
content.classList.toggle('hidden');
if (icon) {
icon.classList.toggle('rotate-180');
}
}
});
});
// Animiere die Score-Kreise mit Tailwind-Klassen
function animateScoreCircles() {
const scoreCircles = document.querySelectorAll('[data-score]');
scoreCircles.forEach(circle => {
const score = parseInt(circle.getAttribute('data-score'));
let borderColor;
if (score >= 90) {
borderColor = 'border-green-500';
} else if (score >= 50) {
borderColor = 'border-yellow-500';
} else {
borderColor = 'border-red-500';
}
// Entferne alte Farb-Klassen und füge neue hinzu
circle.classList.remove('border-green-500', 'border-yellow-500', 'border-red-500');
circle.classList.add(borderColor, 'border-6');
// Animation mit IntersectionObserver
if (window.IntersectionObserver) {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
setTimeout(() => {
entry.target.classList.add('transition-transform', 'duration-300', 'scale-105');
setTimeout(() => {
entry.target.classList.remove('scale-105');
}, 300);
}, 200);
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
observer.observe(circle);
}
});
}
// Rufe die Animation auf
animateScoreCircles();
});