xsl-validator/html/script.js

// Smooth Scrolling für Navigation
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            const navHeight = document.querySelector('.navbar').offsetHeight;
            const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - navHeight;
            window.scrollTo({
                top: targetPosition,
                behavior: 'smooth'
            });
        }
    });
});

// Intersection Observer für Fade-In Animationen
const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('visible');
        }
    });
}, observerOptions);

// Füge Fade-In Klassen zu Elementen hinzu
document.addEventListener('DOMContentLoaded', () => {
    const animatedElements = document.querySelectorAll(
        '.feature-card, .workflow-step, .tech-item, .benefit-item, .download-card'
    );

    animatedElements.forEach((el, index) => {
        el.classList.add('fade-in');
        el.style.transitionDelay = `${index * 0.1}s`;
        observer.observe(el);
    });
});

// Navbar Scroll-Effekt
let lastScroll = 0;
const navbar = document.querySelector('.navbar');

window.addEventListener('scroll', () => {
    const currentScroll = window.pageYOffset;

    if (currentScroll <= 0) {
        navbar.style.boxShadow = 'none';
    } else {
        navbar.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.3)';
    }

    lastScroll = currentScroll;
});

// Feature-Card Parallax-Effekt
document.querySelectorAll('.feature-card').forEach(card => {
    card.addEventListener('mousemove', (e) => {
        const rect = card.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;

        const centerX = rect.width / 2;
        const centerY = rect.height / 2;

        const deltaX = (x - centerX) / centerX;
        const deltaY = (y - centerY) / centerY;

        card.style.transform = `perspective(1000px) rotateY(${deltaX * 5}deg) rotateX(${-deltaY * 5}deg) translateY(-5px)`;
    });

    card.addEventListener('mouseleave', () => {
        card.style.transform = 'perspective(1000px) rotateY(0deg) rotateX(0deg) translateY(0)';
    });
});

// Download-Button Analytics (Placeholder)
document.querySelectorAll('.btn-download').forEach(button => {
    button.addEventListener('click', (e) => {
        e.preventDefault();
        const platform = e.target.closest('.download-card').querySelector('h3').textContent;
        console.log(`Download initiated for: ${platform}`);

        // Hier könnte eine echte Download-Logik oder Analytics-Tracking erfolgen
        alert(`Download für ${platform} würde hier starten.\nBitte konfigurieren Sie die Download-Links in der index.html.`);
    });
});

// Mobile Navigation Toggle (für zukünftige Erweiterung)
const createMobileMenu = () => {
    const navMenu = document.querySelector('.nav-menu');
    const navbar = document.querySelector('.navbar .container');

    // Erstelle Hamburger-Button nur auf mobilen Geräten
    if (window.innerWidth <= 768) {
        const existingToggle = document.querySelector('.nav-toggle');
        if (existingToggle) return;

        const toggle = document.createElement('button');
        toggle.className = 'nav-toggle';
        toggle.innerHTML = '☰';
        toggle.style.cssText = `
            background: none;
            border: none;
            color: var(--text-primary);
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0.5rem;
        `;

        toggle.addEventListener('click', () => {
            navMenu.style.display = navMenu.style.display === 'flex' ? 'none' : 'flex';
            if (navMenu.style.display === 'flex') {
                navMenu.style.cssText = `
                    display: flex;
                    flex-direction: column;
                    position: absolute;
                    top: 100%;
                    left: 0;
                    right: 0;
                    background: var(--surface);
                    padding: 1rem;
                    border-top: 1px solid var(--surface-light);
                `;
            }
        });

        navbar.appendChild(toggle);
    }
};

// Responsive Handling
window.addEventListener('resize', createMobileMenu);
createMobileMenu();

// Particle Background Animation (optional, dezent)
const createParticles = () => {
    const hero = document.querySelector('.hero');
    const particlesContainer = document.createElement('div');
    particlesContainer.className = 'particles';
    particlesContainer.style.cssText = `
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        pointer-events: none;
        opacity: 0.3;
    `;

    for (let i = 0; i < 20; i++) {
        const particle = document.createElement('div');
        particle.style.cssText = `
            position: absolute;
            width: 4px;
            height: 4px;
            background: var(--primary-color);
            border-radius: 50%;
            left: ${Math.random() * 100}%;
            top: ${Math.random() * 100}%;
            animation: float-particle ${5 + Math.random() * 10}s infinite ease-in-out;
            animation-delay: ${Math.random() * 5}s;
        `;
        particlesContainer.appendChild(particle);
    }

    // Füge Animation hinzu
    if (!document.querySelector('#particle-animation')) {
        const style = document.createElement('style');
        style.id = 'particle-animation';
        style.textContent = `
            @keyframes float-particle {
                0%, 100% {
                    transform: translate(0, 0);
                }
                25% {
                    transform: translate(20px, -20px);
                }
                50% {
                    transform: translate(-20px, -40px);
                }
                75% {
                    transform: translate(20px, -60px);
                }
            }
        `;
        document.head.appendChild(style);
    }

    hero.style.position = 'relative';
    hero.insertBefore(particlesContainer, hero.firstChild);
};

// Initialisiere Partikel nur auf Desktop
if (window.innerWidth > 768) {
    createParticles();
}

// Counter Animation für Benefits
const animateCounters = () => {
    const counters = document.querySelectorAll('.benefit-number');

    counters.forEach(counter => {
        const target = counter.textContent;

        // Prüfe ob es eine Zahl ist
        if (!isNaN(parseInt(target))) {
            const targetNum = parseInt(target);
            const duration = 2000;
            const increment = targetNum / (duration / 16);
            let current = 0;

            const updateCounter = () => {
                current += increment;
                if (current < targetNum) {
                    counter.textContent = Math.floor(current) + 'x';
                    requestAnimationFrame(updateCounter);
                } else {
                    counter.textContent = target;
                }
            };

            // Starte Animation wenn Element sichtbar wird
            const counterObserver = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        updateCounter();
                        counterObserver.unobserve(entry.target);
                    }
                });
            });

            counterObserver.observe(counter);
        }
    });
};

animateCounters();

// Easter Egg: Konami Code
let konamiCode = [];
const konamiSequence = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];

document.addEventListener('keydown', (e) => {
    konamiCode.push(e.key);
    konamiCode = konamiCode.slice(-10);

    if (konamiCode.join(',') === konamiSequence.join(',')) {
        document.body.style.animation = 'rainbow 2s infinite';

        if (!document.querySelector('#rainbow-animation')) {
            const style = document.createElement('style');
            style.id = 'rainbow-animation';
            style.textContent = `
                @keyframes rainbow {
                    0% { filter: hue-rotate(0deg); }
                    100% { filter: hue-rotate(360deg); }
                }
            `;
            document.head.appendChild(style);
        }

        setTimeout(() => {
            document.body.style.animation = '';
        }, 5000);
    }
});

console.log('%c🚀 DocuMentor', 'font-size: 24px; font-weight: bold; background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); -webkit-background-clip: text; color: transparent;');
console.log('%cProfessionelle XSL-Transformations-Verwaltung', 'font-size: 14px; color: #94a3b8;');