Projektarbeit-MYP/backend/app/static/js/background-fix.js

/**
 * Mercedes-Benz MYP Platform - Background Fix
 * Entfernt problematische eckige Hintergründe zur Laufzeit
 */

(function() {
    'use strict';

    // Problematische Farben die entfernt werden sollen
    const problematicColors = [
        '#182031',
        '#d5d7d8',
        'rgb(24, 32, 49)',
        'rgb(213, 215, 216)',
        'rgba(24, 32, 49, 1)',
        'rgba(213, 215, 216, 1)'
    ];

    // Funktion zum Entfernen problematischer Hintergründe
    function removeProblematicBackgrounds() {
        const allElements = document.querySelectorAll('*');
        
        allElements.forEach(element => {
            const computedStyle = window.getComputedStyle(element);
            const backgroundColor = computedStyle.backgroundColor;
            const backgroundImage = computedStyle.backgroundImage;
            
            // Prüfe auf problematische Hintergrundfarben
            problematicColors.forEach(color => {
                if (backgroundColor.includes(color.replace('#', '')) || 
                    backgroundColor === color ||
                    backgroundImage.includes(color)) {
                    
                    console.log('Entferne problematischen Hintergrund:', color, 'von Element:', element);
                    element.style.background = 'transparent';
                    element.style.backgroundColor = 'transparent';
                    element.style.backgroundImage = 'none';
                }
            });

            // Spezielle Checks für inline styles
            const inlineStyle = element.getAttribute('style');
            if (inlineStyle) {
                problematicColors.forEach(color => {
                    if (inlineStyle.includes(color)) {
                        console.log('Entferne problematischen Inline-Style:', color, 'von Element:', element);
                        
                        // Entferne problematische Farbe aus inline style
                        let newStyle = inlineStyle
                            .replace(new RegExp(`background-color:\\s*${color.replace('#', '\\#')}[^;]*;?`, 'gi'), '')
                            .replace(new RegExp(`background:\\s*${color.replace('#', '\\#')}[^;]*;?`, 'gi'), '')
                            .replace(/background-color:\s*transparent\s*!important\s*;?\s*/gi, '')
                            .trim();
                        
                        if (newStyle !== inlineStyle) {
                            element.setAttribute('style', newStyle);
                        }
                    }
                });
            }
        });
    }

    // Funktion zum Erzwingen des Mercedes-Designs
    function enforceDesign() {
        const isDark = document.documentElement.classList.contains('dark');
        
        // Haupthintergrund erzwingen
        document.body.style.background = isDark ? '#000000' : '#f8fafc';
        document.documentElement.style.background = isDark ? '#000000' : '#f8fafc';
        
        // Professionelle Container sicherstellen
        const containers = document.querySelectorAll(
            '.professional-container, .mb-glass, .card-professional, .bg-professional, .professional-hero'
        );
        
        containers.forEach(container => {
            if (isDark) {
                container.style.background = '#111111';
                container.style.borderColor = '#333333';
            } else {
                container.style.background = '#f8fafc';
                container.style.borderColor = '#e2e8f0';
            }
            container.style.borderRadius = '2rem';
        });
        
        // Input-Felder sicherstellen
        const inputs = document.querySelectorAll(
            '.input-professional, input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select'
        );
        
        inputs.forEach(input => {
            if (isDark) {
                input.style.background = '#1a1a1a';
                input.style.borderColor = '#333333';
                input.style.color = '#ffffff';
            } else {
                input.style.background = '#ffffff';
                input.style.borderColor = '#e2e8f0';
                input.style.color = '#0f172a';
            }
            input.style.borderWidth = '2px';
            input.style.borderRadius = '1rem';
        });
    }

    // Funktion zum Überwachen von DOM-Änderungen
    function observeChanges() {
        const observer = new MutationObserver(function(mutations) {
            let shouldCheck = false;
            
            mutations.forEach(function(mutation) {
                if (mutation.type === 'childList' || mutation.type === 'attributes') {
                    shouldCheck = true;
                }
            });
            
            if (shouldCheck) {
                // Kleine Verzögerung um Layout-Thrashing zu vermeiden
                setTimeout(() => {
                    removeProblematicBackgrounds();
                    enforceDesign();
                }, 10);
            }
        });
        
        observer.observe(document.body, {
            childList: true,
            subtree: true,
            attributes: true,
            attributeFilter: ['style', 'class']
        });
    }

    // Dark Mode Toggle überwachen
    function setupDarkModeObserver() {
        const darkModeObserver = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                    const target = mutation.target;
                    if (target === document.documentElement && 
                        (target.classList.contains('dark') || !target.classList.contains('dark'))) {
                        
                        // Warte kurz und wende dann das Design neu an
                        setTimeout(() => {
                            enforceDesign();
                        }, 50);
                    }
                }
            });
        });
        
        darkModeObserver.observe(document.documentElement, {
            attributes: true,
            attributeFilter: ['class']
        });
    }

    // Entferne CSS-Klassen die problematische Hintergründe verursachen könnten
    function removeProblematicClasses() {
        const elements = document.querySelectorAll('*');
        const problematicClassPatterns = [
            /bg-slate-\d+/,
            /bg-gray-\d+/,
            /bg-zinc-\d+/
        ];
        
        elements.forEach(element => {
            const classList = Array.from(element.classList);
            let classesRemoved = false;
            
            classList.forEach(className => {
                problematicClassPatterns.forEach(pattern => {
                    if (pattern.test(className)) {
                        console.log('Entferne problematische CSS-Klasse:', className, 'von Element:', element);
                        element.classList.remove(className);
                        classesRemoved = true;
                    }
                });
            });
            
            if (classesRemoved) {
                // Füge professional classes hinzu
                if (!element.classList.contains('bg-professional') && 
                    !element.classList.contains('professional-container') &&
                    !element.classList.contains('mb-glass')) {
                    // Nur bei bestimmten Elementen
                    if (element.tagName === 'DIV' || element.tagName === 'SECTION') {
                        element.classList.add('bg-professional');
                    }
                }
            }
        });
    }

    // Initialisierung
    function init() {
        console.log('Mercedes-Benz Background Fix - Initialisierung');
        
        // Sofort ausführen
        removeProblematicBackgrounds();
        removeProblematicClasses();
        enforceDesign();
        
        // Observer einrichten
        observeChanges();
        setupDarkModeObserver();
        
        // Regelmäßige Überprüfung alle 5 Sekunden
        setInterval(() => {
            removeProblematicBackgrounds();
            enforceDesign();
        }, 5000);
        
        console.log('Mercedes-Benz Background Fix - Aktiv');
    }

    // Starten wenn DOM bereit ist
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }

    // Auch beim Laden von Ressourcen
    window.addEventListener('load', () => {
        setTimeout(() => {
            removeProblematicBackgrounds();
            enforceDesign();
        }, 100);
    });

    // Expose für Debug-Zwecke
    window.mercedesBackgroundFix = {
        removeProblematicBackgrounds,
        enforceDesign,
        removeProblematicClasses
    };

})();