HR-Collector/Extension/ui.js

// Warten, bis das DOM vollständig geladen ist
document.addEventListener("DOMContentLoaded", function () {
    // Suche nach dem Element mit der Klasse 'horse_banner'
    const banner = document.querySelector('.horse_banner');
    if (banner) {
        // Erstelle das container div
        const div = document.createElement('div');
        div.className = 'collector_ui';
        Object.assign(div.style, {
            position: 'absolute',
            right: '-160px',
            top: '20px',
            zIndex: '1',
            padding: '10px',
            backgroundColor: '#FFFFFFD9',
            width: '120px',
            minHeight: '50px',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'flex-start',
            gap: '10px' // Abstand zwischen Button und Tabelle
        });

        // Erstelle den Button
        const updateHorseButton = document.createElement('updateHorseButton');
        updateHorseButton.textContent = 'Update Horse';
        Object.assign(updateHorseButton.style, {
            padding: '10px 15px',
            backgroundColor: '#ffa200',
            color: '#fff',
            border: 'none',
            borderRadius: '5px',
            cursor: 'pointer',
            alignSelf: 'stretch', // Button auf volle Breite dehnen
            transition: 'background-color 0.3s ease' // Übergang für den Hover-Effekt
        });
        updateHorseButton.addEventListener("click", function() {
            chrome.runtime.sendMessage({ action: "updateHorseData" });
        });

        // Hover-Effekt hinzufügen
        updateHorseButton.addEventListener('mouseenter', function () {
            updateHorseButton.style.backgroundColor = '#bf8700'; // Hover-Farbe
        });
        updateHorseButton.addEventListener('mouseleave', function () {
            updateHorseButton.style.backgroundColor = '#ffa200'; // Originalfarbe
        });

        // Flex-Container für die Tabelle
        const table = document.createElement('div');
        Object.assign(table.style, {
            display: 'flex',
            flexDirection: 'column',
            width: '100%',
            gap: '12px' // Abstand zwischen den Zeilen
        });

        // Beschriftungen und Emoji-Elemente
        const rows = [
            { label: 'Basic', emojiId: 'emojiBasic', emoji: '❌' },
            { label: 'Summary', emojiId: 'emojiSummary', emoji: '❌' },
            { label: 'Training', emojiId: 'emojiTraining', emoji: '❌' },
            { label: 'Genetics', emojiId: 'emojiGenetics', emoji: '❌' },
            { label: 'Achievements', emojiId: 'emojiAchievements', emoji: '❌' },
            { label: 'Health', emojiId: 'emojiHealth', emoji: '❌' },
        ];

        // Erstelle Zeilen für jede Beschriftung
        rows.forEach(row => {
            const rowDiv = document.createElement('div');
            Object.assign(rowDiv.style, {
                display: 'flex',
                justifyContent: 'space-between', // Beschriftung links, Emoji rechts
                width: '100%'
            });

            // Linkes Element für die Beschriftung
            const labelCell = document.createElement('div');
            labelCell.textContent = row.label;
            labelCell.style.flex = '1'; // Beschriftung auf der linken Seite

            // Rechtes Element für das Emoji
            const emojiCell = document.createElement('div');
            const emojiSpan = document.createElement('span');
            emojiSpan.id = row.emojiId;
            emojiSpan.textContent = row.emoji;
            emojiCell.appendChild(emojiSpan);
            emojiCell.style.flex = '0'; // Emoji auf der rechten Seite

            // Zeile zur Tabelle hinzufügen
            rowDiv.appendChild(labelCell);
            rowDiv.appendChild(emojiCell);
            table.appendChild(rowDiv);
        });

        // Linie hinzufügen
        const line = document.createElement('hr');
        Object.assign(line.style, {
            width: '100%',
            border: '0',
            height: '1px',
            backgroundColor: '#ddd',
            margin: '10px 0'
        });

        // Legend-Titel hinzufügen
        const legendTitle = document.createElement('div');
        legendTitle.textContent = 'Legend:';
        Object.assign(legendTitle.style, {
            fontWeight: 'bold',
            fontSize: '14px',
            color: '#555'
        });

        // Info-Text für die Legende hinzufügen
        const legendTexts = [
            { emoji: '✅', text: 'Loaded' },
            { emoji: '☑️', text: 'Dynamic' },
            { emoji: '🔄', text: 'Needs Refresh' },
            { emoji: '❌', text: 'Not Loaded' },
        ];
        const legend = document.createElement('div');
        Object.assign(legend.style, {
            display: 'flex',
            flexDirection: 'column',
            gap: '5px',
            fontSize: '12px',
            color: '#333'
        });

        legendTexts.forEach(item => {
            const legendRow = document.createElement('div');
            Object.assign(legendRow.style, {
                display: 'flex',
                alignItems: 'center',
                gap: '5px'
            });

            const emoji = document.createElement('span');
            emoji.textContent = item.emoji;
            emoji.style.fontSize = '14px';

            const text = document.createElement('span');
            text.textContent = item.text;

            legendRow.appendChild(emoji);
            legendRow.appendChild(text);
            legend.appendChild(legendRow);
        });

        // Button oben hinzufügen, dann die Tabelle, Linie, und die Legende
        div.appendChild(updateHorseButton);
        div.appendChild(table);
        div.appendChild(line);
        div.appendChild(legendTitle);
        div.appendChild(legend);
        banner.appendChild(div);
    }
});