SF/FF Filter: Ersetze Alerts durch Modals // Blende "noobyfication" aus

serienfans-releasegroup-filter.user.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         Serienfans/Filmfans Releasegruppen Filter
 // @namespace    https://git.ponywave.de/Akamaru/Userscripts
-// @version      1.3
+// @version      1.4
 // @description  Blende Uploads bestimmter Releasegruppen aus
 // @author       Akamaru
 // @match        https://serienfans.org/*
@@ -36,7 +36,7 @@
             vertical-align: middle;
         }
 
-        #blacklist-modal {
+        #blacklist-modal, #confirm-modal, #alert-modal {
             display: none;
             position: fixed;
             z-index: 10000;
@@ -182,6 +182,61 @@
         #blacklist-menu-btn:hover {
             opacity: 0.8;
         }
+
+        /* Confirm/Alert Modal Styles */
+        #confirm-modal-content, #alert-modal-content {
+            background-color: #1a1a1a;
+            margin: 15% auto;
+            padding: 30px;
+            border: 1px solid #333;
+            border-radius: 8px;
+            width: 90%;
+            max-width: 450px;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.5);
+            color: #fff;
+            text-align: center;
+        }
+
+        #confirm-modal-message, #alert-modal-message {
+            margin: 20px 0 30px;
+            font-size: 16px;
+            line-height: 1.5;
+        }
+
+        #confirm-modal-buttons, #alert-modal-buttons {
+            display: flex;
+            gap: 10px;
+            justify-content: center;
+        }
+
+        .modal-btn {
+            padding: 10px 25px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 500;
+            transition: background 0.2s;
+            min-width: 100px;
+        }
+
+        .modal-btn-confirm {
+            background: #4caf50;
+            color: white;
+        }
+
+        .modal-btn-confirm:hover {
+            background: #45a049;
+        }
+
+        .modal-btn-cancel, .modal-btn-ok {
+            background: #666;
+            color: white;
+        }
+
+        .modal-btn-cancel:hover, .modal-btn-ok:hover {
+            background: #777;
+        }
     `);
 
     // Standard-Blacklist (kann über das Menü bearbeitet werden)
@@ -261,10 +316,11 @@
                     blockBtn.textContent = '🚫';
                     blockBtn.className = 'block-group-btn';
                     blockBtn.title = `Releasegruppe "${releasegroup}" blocken`;
-                    blockBtn.onclick = (e) => {
+                    blockBtn.onclick = async (e) => {
                         e.preventDefault();
                         e.stopPropagation();
-                        if (confirm(`Releasegruppe "${releasegroup}" zur Blacklist hinzufügen?`)) {
+                        const confirmed = await showConfirmModal(`Releasegruppe "${releasegroup}" zur Blacklist hinzufügen?`);
+                        if (confirmed) {
                             blockReleasegroup(releasegroup);
                         }
                     };
@@ -336,14 +392,14 @@
     }
 
     // Funktion zum Hinzufügen einer Releasegruppe
-    function addToBlacklist() {
+    async function addToBlacklist() {
         const input = document.getElementById('blacklist-add-input');
         const group = input.value.trim();
 
         if (group === '') return;
 
         if (blacklist.some(blocked => blocked.toLowerCase() === group.toLowerCase())) {
-            alert(`"${group}" ist bereits in der Blacklist!`);
+            await showAlertModal(`"${group}" ist bereits in der Blacklist!`);
             return;
         }
 
@@ -380,6 +436,95 @@
         }
     }
 
+    // Custom Confirm Modal
+    function showConfirmModal(message) {
+        return new Promise((resolve) => {
+            // Erstelle Modal falls nicht vorhanden
+            let modal = document.getElementById('confirm-modal');
+            if (!modal) {
+                modal = document.createElement('div');
+                modal.id = 'confirm-modal';
+                modal.innerHTML = `
+                    <div id="confirm-modal-content">
+                        <div id="confirm-modal-message"></div>
+                        <div id="confirm-modal-buttons">
+                            <button class="modal-btn modal-btn-confirm" id="confirm-yes">Ja</button>
+                            <button class="modal-btn modal-btn-cancel" id="confirm-no">Abbrechen</button>
+                        </div>
+                    </div>
+                `;
+                document.body.appendChild(modal);
+
+                // Event Listeners
+                modal.addEventListener('click', (e) => {
+                    if (e.target === modal) {
+                        modal.style.display = 'none';
+                        resolve(false);
+                    }
+                });
+            }
+
+            // Setze Nachricht und zeige Modal
+            document.getElementById('confirm-modal-message').textContent = message;
+            modal.style.display = 'block';
+
+            // Button Event Listeners
+            const yesBtn = document.getElementById('confirm-yes');
+            const noBtn = document.getElementById('confirm-no');
+
+            const cleanup = (result) => {
+                modal.style.display = 'none';
+                yesBtn.onclick = null;
+                noBtn.onclick = null;
+                resolve(result);
+            };
+
+            yesBtn.onclick = () => cleanup(true);
+            noBtn.onclick = () => cleanup(false);
+        });
+    }
+
+    // Custom Alert Modal
+    function showAlertModal(message) {
+        return new Promise((resolve) => {
+            // Erstelle Modal falls nicht vorhanden
+            let modal = document.getElementById('alert-modal');
+            if (!modal) {
+                modal = document.createElement('div');
+                modal.id = 'alert-modal';
+                modal.innerHTML = `
+                    <div id="alert-modal-content">
+                        <div id="alert-modal-message"></div>
+                        <div id="alert-modal-buttons">
+                            <button class="modal-btn modal-btn-ok" id="alert-ok">OK</button>
+                        </div>
+                    </div>
+                `;
+                document.body.appendChild(modal);
+
+                // Event Listeners
+                modal.addEventListener('click', (e) => {
+                    if (e.target === modal) {
+                        modal.style.display = 'none';
+                        resolve();
+                    }
+                });
+            }
+
+            // Setze Nachricht und zeige Modal
+            document.getElementById('alert-modal-message').textContent = message;
+            modal.style.display = 'block';
+
+            // Button Event Listener
+            const okBtn = document.getElementById('alert-ok');
+            okBtn.onclick = () => {
+                modal.style.display = 'none';
+                okBtn.onclick = null;
+                resolve();
+            };
+        });
+    }
+
     // Funktion zum Hinzufügen des Buttons im Header
     function addHeaderButton() {
         const menu = document.getElementById('menu');
@@ -405,14 +550,22 @@
     // Registriere Menübefehl (als Fallback)
     GM_registerMenuCommand('Releasegruppen-Filter bearbeiten', openModal);
 
+    // Funktion zum Entfernen des roten Hinweises
+    function removeNoobyfication() {
+        const noobElements = document.querySelectorAll('.noobyfication');
+        noobElements.forEach(element => element.remove());
+    }
+
     // Initialisierung
     addHeaderButton();
     createBlacklistModal();
     filterReleasesAlternative();
+    removeNoobyfication();
 
     // Beobachte Änderungen (falls Inhalte dynamisch nachgeladen werden)
     const observer = new MutationObserver(() => {
         filterReleasesAlternative();
+        removeNoobyfication();
     });
 
     const listContainer = document.getElementById('list');