Add CSS, JS and asset files (without videos)

js/main.js

@@ -0,0 +1,277 @@
+/**
+ * Main application entry point for IntelSight website
+ * Initializes all modules and coordinates application startup
+ */
+
+/**
+ * Toggle tools grid visibility
+ */
+function toggleTools(button) {
+    // Find the tools grid within the same product card
+    const productCard = button.closest('.product-card');
+    const toolsGrid = productCard.querySelector('.tools-grid');
+    
+    if (toolsGrid) {
+        const isExpanded = toolsGrid.classList.contains('expanded');
+        const currentLang = getCurrentLanguage ? getCurrentLanguage() : 'de';
+        
+        if (isExpanded) {
+            toolsGrid.classList.remove('expanded');
+            toolsGrid.classList.add('collapsed');
+            button.setAttribute('data-expanded', 'false');
+            button.querySelector('span').textContent = currentLang === 'de' ? 'Details anzeigen' : 'Show Details';
+        } else {
+            // Force browser reflow before adding expanded class
+            toolsGrid.style.display = 'grid';
+            void toolsGrid.offsetHeight; // Trigger reflow
+            
+            toolsGrid.classList.remove('collapsed');
+            toolsGrid.classList.add('expanded');
+            button.setAttribute('data-expanded', 'true');
+            button.querySelector('span').textContent = currentLang === 'de' ? 'Details verbergen' : 'Hide Details';
+            
+            // Ensure all tool cards are visible
+            setTimeout(() => {
+                const toolCards = toolsGrid.querySelectorAll('.tool-card');
+                toolCards.forEach((card, index) => {
+                    card.style.opacity = '1';
+                    card.style.transform = 'translateY(0)';
+                });
+            }, 100);
+        }
+    }
+}
+
+/**
+ * Application initialization
+ */
+const App = {
+    /**
+     * Initialize the entire application
+     */
+    init() {
+        // Check DOM ready state
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => this.start());
+        } else {
+            // DOM is already ready
+            this.start();
+        }
+    },
+    
+    /**
+     * Start the application after DOM is ready
+     */
+    start() {
+        console.log('IntelSight Website Initializing...');
+        
+        // Initialize modules in correct order
+        try {
+            // 1. Initialize translations first (needed by components)
+            initTranslations();
+            console.log('✓ Translations initialized');
+            
+            // 2. Initialize UI components
+            Components.init();
+            console.log('✓ Components initialized');
+            
+            // 3. Initialize animations
+            Animations.init();
+            console.log('✓ Animations initialized');
+            
+            // 4. Setup error handling
+            this.setupErrorHandling();
+            
+            // 5. Setup performance monitoring
+            this.setupPerformanceMonitoring();
+            
+            console.log('IntelSight Website Ready!');
+            
+        } catch (error) {
+            console.error('Failed to initialize application:', error);
+            this.handleInitError(error);
+        }
+    },
+    
+    /**
+     * Setup global error handling
+     */
+    setupErrorHandling() {
+        window.addEventListener('error', (event) => {
+            console.error('Global error:', event.error);
+            // In production, this would send errors to monitoring service
+        });
+        
+        window.addEventListener('unhandledrejection', (event) => {
+            console.error('Unhandled promise rejection:', event.reason);
+            // In production, this would send errors to monitoring service
+        });
+    },
+    
+    /**
+     * Setup performance monitoring
+     */
+    setupPerformanceMonitoring() {
+        // Monitor page load performance
+        window.addEventListener('load', () => {
+            if (window.performance && window.performance.timing) {
+                const timing = window.performance.timing;
+                const loadTime = timing.loadEventEnd - timing.navigationStart;
+                console.log(`Page load time: ${loadTime}ms`);
+                
+                // Log other performance metrics
+                const metrics = {
+                    domContentLoaded: timing.domContentLoadedEventEnd - timing.navigationStart,
+                    domComplete: timing.domComplete - timing.navigationStart,
+                    firstPaint: this.getFirstPaintTime()
+                };
+                
+                console.log('Performance metrics:', metrics);
+            }
+        });
+    },
+    
+    /**
+     * Get first paint time if available
+     * @returns {number|null} First paint time in milliseconds
+     */
+    getFirstPaintTime() {
+        if (window.performance && window.performance.getEntriesByType) {
+            const paintEntries = window.performance.getEntriesByType('paint');
+            const firstPaint = paintEntries.find(entry => entry.name === 'first-paint');
+            return firstPaint ? Math.round(firstPaint.startTime) : null;
+        }
+        return null;
+    },
+    
+    /**
+     * Handle initialization errors
+     * @param {Error} error - The error that occurred
+     */
+    handleInitError(error) {
+        // Create a fallback error message for users
+        const errorContainer = document.createElement('div');
+        errorContainer.style.cssText = `
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: #ff4444;
+            color: white;
+            padding: 15px 20px;
+            border-radius: 5px;
+            z-index: 10000;
+            max-width: 300px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+        `;
+        errorContainer.textContent = 'Ein Fehler ist aufgetreten. Bitte laden Sie die Seite neu.';
+        document.body.appendChild(errorContainer);
+        
+        // Auto-remove after 5 seconds
+        setTimeout(() => {
+            errorContainer.remove();
+        }, 5000);
+    }
+};
+
+/**
+ * Utility functions
+ */
+const Utils = {
+    /**
+     * Debounce function to limit function calls
+     * @param {Function} func - Function to debounce
+     * @param {number} wait - Wait time in milliseconds
+     * @returns {Function} Debounced function
+     */
+    debounce(func, wait) {
+        let timeout;
+        return function executedFunction(...args) {
+            const later = () => {
+                clearTimeout(timeout);
+                func(...args);
+            };
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+        };
+    },
+    
+    /**
+     * Throttle function to limit function calls
+     * @param {Function} func - Function to throttle
+     * @param {number} limit - Time limit in milliseconds
+     * @returns {Function} Throttled function
+     */
+    throttle(func, limit) {
+        let inThrottle;
+        return function(...args) {
+            if (!inThrottle) {
+                func.apply(this, args);
+                inThrottle = true;
+                setTimeout(() => inThrottle = false, limit);
+            }
+        };
+    },
+    
+    /**
+     * Check if element is in viewport
+     * @param {HTMLElement} element - Element to check
+     * @returns {boolean} True if element is in viewport
+     */
+    isInViewport(element) {
+        const rect = element.getBoundingClientRect();
+        return (
+            rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+        );
+    },
+    
+    /**
+     * Load script dynamically
+     * @param {string} src - Script source URL
+     * @returns {Promise} Promise that resolves when script is loaded
+     */
+    loadScript(src) {
+        return new Promise((resolve, reject) => {
+            const script = document.createElement('script');
+            script.src = src;
+            script.onload = resolve;
+            script.onerror = reject;
+            document.head.appendChild(script);
+        });
+    },
+    
+    /**
+     * Get cookie value by name
+     * @param {string} name - Cookie name
+     * @returns {string|null} Cookie value or null
+     */
+    getCookie(name) {
+        const value = `; ${document.cookie}`;
+        const parts = value.split(`; ${name}=`);
+        if (parts.length === 2) {
+            return parts.pop().split(';').shift();
+        }
+        return null;
+    },
+    
+    /**
+     * Set cookie
+     * @param {string} name - Cookie name
+     * @param {string} value - Cookie value
+     * @param {number} days - Days until expiration
+     */
+    setCookie(name, value, days) {
+        const date = new Date();
+        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+        const expires = `expires=${date.toUTCString()}`;
+        document.cookie = `${name}=${value};${expires};path=/`;
+    }
+};
+
+// Make Utils globally available if needed
+window.Utils = Utils;
+
+// Start the application
+App.init();