Spaces:
Running
Running
| <html lang="de"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>KI Workflow Automatisierung</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .workflow-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .modal { | |
| transition: all 0.3s ease; | |
| } | |
| .settings-popup { | |
| position: absolute; | |
| z-index: 40; | |
| width: 320px; | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| transform-origin: top right; | |
| transition: all 0.2s ease; | |
| } | |
| .dark { background-color: #111827; color: #f3f4f6; } | |
| .dark .bg-white { background-color: #1f2937 ; } | |
| .dark .text-gray-800 { color: #f3f4f6 ; } | |
| .dark .bg-gray-50 { background-color: #374151 ; } | |
| .dark .settings-popup { background-color: #1f2937; border: 1px solid #374151; } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="bg-indigo-600 text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-robot text-2xl"></i> | |
| <h1 class="text-2xl font-bold">KI Workflow Hub</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="theme-toggle" class="p-2 rounded-full hover:bg-indigo-700"> | |
| <i class="fas fa-moon hidden"></i> | |
| <i class="fas fa-sun hidden"></i> | |
| </button> | |
| <button id="create-workflow-btn" class="bg-white text-indigo-600 px-4 py-2 rounded-lg font-medium hover:bg-indigo-50 transition"> | |
| <i class="fas fa-plus mr-2"></i> Neuer Workflow | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-1 container mx-auto px-4 py-8"> | |
| <!-- Workflow Dashboard --> | |
| <div class="mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Meine KI Workflows</h2> | |
| <!-- Workflow Categories --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <!-- Data Processing --> | |
| <div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-6 border border-blue-100"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-database text-blue-600"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Datenverarbeitung</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Automatisierte Datenaufbereitung und -analyse mit KI</p> | |
| <button class="text-blue-600 hover:text-blue-800 flex items-center"> | |
| Alle Workflows anzeigen <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| <!-- API Integration --> | |
| <div class="bg-gradient-to-br from-purple-50 to-indigo-50 rounded-xl p-6 border border-purple-100"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-plug text-purple-600"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">API Integrationen</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Verbinden Sie KI-Modelle mit externen Diensten</p> | |
| <button class="text-purple-600 hover:text-purple-800 flex items-center"> | |
| Alle Workflows anzeigen <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| <!-- Business Automation --> | |
| <div class="bg-gradient-to-br from-green-50 to-teal-50 rounded-xl p-6 border border-green-100"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-cogs text-green-600"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Geschäftsautomatisierung</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">KI-gestützte Prozessoptimierung</p> | |
| <button class="text-green-600 hover:text-green-800 flex items-center"> | |
| Alle Workflows anzeigen <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Active Workflows --> | |
| <div id="workflow-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Workflow 1 --> | |
| <div class="workflow-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300" data-id="1"> | |
| <div class="bg-indigo-600 text-white px-4 py-3 flex justify-between items-center"> | |
| <h3 class="font-bold">Datenbereinigung</h3> | |
| <span class="bg-white text-indigo-600 text-xs px-2 py-1 rounded-full">Aktiv</span> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-gray-600 mb-4">Automatische Bereinigung von Rohdaten mit NLP</p> | |
| <div class="flex justify-between items-center mb-3"> | |
| <span class="text-sm text-gray-500">Letzte Ausführung:</span> | |
| <span class="text-sm font-medium">vor 2 Stunden</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-4"> | |
| <span class="text-sm text-gray-500">Trigger:</span> | |
| <span class="text-sm font-medium">API Call</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="webhook-btn flex-1 bg-indigo-600 text-white px-3 py-2 rounded-lg text-sm hover:bg-indigo-700 transition" | |
| data-webhook="https://your-n8n-webhook.com/data-cleanup"> | |
| <i class="fas fa-play mr-2"></i> Ausführen | |
| </button> | |
| <button class="settings-btn flex-1 border border-gray-300 px-3 py-2 rounded-lg text-sm hover:bg-gray-50 transition"> | |
| <i class="fas fa-cog mr-2"></i> Einstellungen | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Workflow 2 --> | |
| <div class="workflow-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300" data-id="2"> | |
| <div class="bg-purple-600 text-white px-4 py-3 flex justify-between items-center"> | |
| <h3 class="font-bold">Kundenanalyse</h3> | |
| <span class="bg-white text-purple-600 text-xs px-2 py-1 rounded-full">Aktiv</span> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-gray-600 mb-4">KI-gestützte Kundensegmentierung</p> | |
| <div class="flex justify-between items-center mb-3"> | |
| <span class="text-sm text-gray-500">Letzte Ausführung:</span> | |
| <span class="text-sm font-medium">heute 08:15</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-4"> | |
| <span class="text-sm text-gray-500">Trigger:</span> | |
| <span class="text-sm font-medium">Täglich 08:00</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="webhook-btn flex-1 bg-purple-600 text-white px-3 py-2 rounded-lg text-sm hover:bg-purple-700 transition" | |
| data-webhook="https://your-n8n-webhook.com/customer-analysis"> | |
| <i class="fas fa-play mr-2"></i> Ausführen | |
| </button> | |
| <button class="settings-btn flex-1 border border-gray-300 px-3 py-2 rounded-lg text-sm hover:bg-gray-50 transition"> | |
| <i class="fas fa-cog mr-2"></i> Einstellungen | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Workflow 3 --> | |
| <div class="workflow-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300" data-id="3"> | |
| <div class="bg-green-600 text-white px-4 py-3 flex justify-between items-center"> | |
| <h3 class="font-bold">Dokumentenverarbeitung</h3> | |
| <span class="bg-white text-green-600 text-xs px-2 py-1 rounded-full">Aktiv</span> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-gray-600 mb-4">Automatische Extraktion von Vertragsdaten</p> | |
| <div class="flex justify-between items-center mb-3"> | |
| <span class="text-sm text-gray-500">Letzte Ausführung:</span> | |
| <span class="text-sm font-medium">vor 15 Min.</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-4"> | |
| <span class="text-sm text-gray-500">Trigger:</span> | |
| <span class="text-sm font-medium">Datei-Upload</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="webhook-btn flex-1 bg-green-600 text-white px-3 py-2 rounded-lg text-sm hover:bg-green-700 transition" | |
| data-webhook="https://your-n8n-webhook.com/doc-processing"> | |
| <i class="fas fa-play mr-2"></i> Ausführen | |
| </button> | |
| <button class="settings-btn flex-1 border border-gray-300 px-3 py-2 rounded-lg text-sm hover:bg-gray-50 transition"> | |
| <i class="fas fa-cog mr-2"></i> Einstellungen | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Workflow 4 --> | |
| <div class="workflow-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300" data-id="4"> | |
| <div class="bg-yellow-600 text-white px-4 py-3 flex justify-between items-center"> | |
| <h3 class="font-bold">E-Mail Klassifizierung</h3> | |
| <span class="bg-white text-yellow-600 text-xs px-2 py-1 rounded-full">Pausiert</span> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-gray-600 mb-4">Automatische Priorisierung von E-Mails</p> | |
| <div class="flex justify-between items-center mb-3"> | |
| <span class="text-sm text-gray-500">Letzte Ausführung:</span> | |
| <span class="text-sm font-medium">gestern 18:30</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-4"> | |
| <span class="text-sm text-gray-500">Trigger:</span> | |
| <span class="text-sm font-medium">Neue E-Mail</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="webhook-btn flex-1 bg-yellow-600 text-white px-3 py-2 rounded-lg text-sm hover:bg-yellow-700 transition" | |
| data-webhook="https://your-n8n-webhook.com/email-classification"> | |
| <i class="fas fa-play mr-2"></i> Ausführen | |
| </button> | |
| <button class="settings-btn flex-1 border border-gray-300 px-3 py-2 rounded-lg text-sm hover:bg-gray-50 transition"> | |
| <i class="fas fa-cog mr-2"></i> Einstellungen | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Workflow 5 --> | |
| <div class="workflow-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300" data-id="5"> | |
| <div class="bg-red-600 text-white px-4 py-3 flex justify-between items-center"> | |
| <h3 class="font-bold">Betrugserkennung</h3> | |
| <span class="bg-white text-red-600 text-xs px-2 py-1 rounded-full">Aktiv</span> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-gray-600 mb-4">Echtzeit-Analyse von Transaktionen</p> | |
| <div class="flex justify-between items-center mb-3"> | |
| <span class="text-sm text-gray-500">Letzte Ausführung:</span> | |
| <span class="text-sm font-medium">laufend</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-4"> | |
| <span class="text-sm text-gray-500">Trigger:</span> | |
| <span class="text-sm font-medium">Streaming</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="webhook-btn flex-1 bg-red-600 text-white px-3 py-2 rounded-lg text-sm hover:bg-red-700 transition" | |
| data-webhook="https://your-n8n-webhook.com/fraud-detection"> | |
| <i class="fas fa-play mr-2"></i> Testen | |
| </button> | |
| <button class="settings-btn flex-1 border border-gray-300 px-3 py-2 rounded-lg text-sm hover:bg-gray-50 transition"> | |
| <i class="fas fa-cog mr-2"></i> Einstellungen | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Add New Workflow Card --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden border-2 border-dashed border-gray-300 hover:border-indigo-500 transition duration-300 flex items-center justify-center"> | |
| <button id="add-workflow-btn" class="text-center p-6 w-full"> | |
| <i class="fas fa-plus-circle text-4xl text-gray-400 mb-2 hover:text-indigo-500"></i> | |
| <h3 class="font-bold text-gray-600">Neuen Workflow hinzufügen</h3> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Workflow Execution Logs --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mt-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold text-gray-800">Ausführungsprotokolle</h2> | |
| <div class="flex space-x-2"> | |
| <select class="border rounded-lg px-3 py-1 text-sm"> | |
| <option>Letzte 24 Stunden</option> | |
| <option>Letzte Woche</option> | |
| <option>Letzter Monat</option> | |
| </select> | |
| <button class="bg-indigo-600 text-white px-3 py-1 rounded-lg text-sm hover:bg-indigo-700 transition"> | |
| <i class="fas fa-sync-alt mr-2"></i> Aktualisieren | |
| </button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Workflow</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ausgelöst durch</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Startzeit</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Dauer</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Aktionen</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="bg-indigo-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-database text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Datenbereinigung</div> | |
| <div class="text-sm text-gray-500">Batch #2456</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> | |
| Erfolgreich | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| Manuell (API) | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 10:23:45 | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 2m 15s | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-indigo-600 hover:text-indigo-900 mr-3">Details</button> | |
| <button class="text-gray-600 hover:text-gray-900">Protokoll</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="bg-purple-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-users text-purple-600"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Kundenanalyse</div> | |
| <div class="text-sm text-gray-500">Täglicher Job</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> | |
| Erfolgreich | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| Zeitplan | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 08:15:02 | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 5m 42s | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-indigo-600 hover:text-indigo-900 mr-3">Details</button> | |
| <button class="text-gray-600 hover:text-gray-900">Protokoll</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="bg-yellow-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-envelope text-yellow-600"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">E-Mail Klassifizierung</div> | |
| <div class="text-sm text-gray-500">E-Mail #8765</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"> | |
| Fehlgeschlagen | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| E-Mail-Eingang | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 07:45:31 | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 0m 12s | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-indigo-600 hover:text-indigo-900 mr-3">Details</button> | |
| <button class="text-gray-600 hover:text-gray-900">Protokoll</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="text-sm text-gray-500"> | |
| Zeige 1 bis 3 von 12 Einträgen | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border rounded-lg text-sm hover:bg-gray-50 transition"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <button class="px-3 py-1 border rounded-lg text-sm hover:bg-gray-50 transition"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-white border-t border-gray-200 py-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-2 mb-4 md:mb-0"> | |
| <i class="fas fa-robot text-indigo-600"></i> | |
| <span class="font-bold">KI Workflow Hub</span> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-500 hover:text-indigo-600">Dokumentation</a> | |
| <a href="#" class="text-gray-500 hover:text-indigo-600">API Referenz</a> | |
| <a href="#" class="text-gray-500 hover:text-indigo-600">Support</a> | |
| </div> | |
| </div> | |
| <p class="text-center md:text-left text-gray-500 text-sm mt-4">© 2023 KI Workflow Hub. Alle Rechte vorbehalten.</p> | |
| </div> | |
| </footer> | |
| </div> | |
| <!-- Create Workflow Modal --> | |
| <div id="create-workflow-modal" class="fixed inset-0 overflow-y-auto z-50 hidden modal"> | |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center"> | |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> | |
| <div class="absolute inset-0 bg-gray-500 opacity-75" id="create-workflow-backdrop"></div> | |
| </div> | |
| <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full"> | |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | |
| <div class="sm:flex sm:items-start"> | |
| <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 sm:mx-0 sm:h-10 sm:w-10"> | |
| <i class="fas fa-plus text-indigo-600"></i> | |
| </div> | |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900"> | |
| Neuen Workflow erstellen | |
| </h3> | |
| <div class="mt-4 space-y-4"> | |
| <div> | |
| <label for="workflow-name" class="block text-sm font-medium text-gray-700">Workflow Name</label> | |
| <input type="text" id="workflow-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label for="workflow-type" class="block text-sm font-medium text-gray-700">Workflow Typ</label> | |
| <select id="workflow-type" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md border"> | |
| <option>Datenverarbeitung</option> | |
| <option>API Integration</option> | |
| <option>Geschäftsautomatisierung</option> | |
| <option>Benachrichtigung</option> | |
| <option>Benutzerdefiniert</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="trigger-type" class="block text-sm font-medium text-gray-700">Auslöser</label> | |
| <select id="trigger-type" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md border"> | |
| <option>Manuell (Webhook)</option> | |
| <option>Zeitplan</option> | |
| <option>API Aufruf</option> | |
| <option>Datei-Upload</option> | |
| <option>Datenbank-Event</option> | |
| </select> | |
| </div> | |
| <div id="webhook-section" class="bg-blue-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-link text-blue-500 mr-2"></i> | |
| <span class="font-medium text-blue-800">Webhook URL</span> | |
| </div> | |
| <div class="flex"> | |
| <input type="text" id="webhook-url" value="https://your-n8n-webhook.com/new-workflow" class="flex-1 border border-gray-300 rounded-l-md py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500" readonly> | |
| <button id="copy-webhook-btn" class="bg-blue-600 text-white px-3 py-2 rounded-r-md hover:bg-blue-700 transition"> | |
| <i class="fas fa-copy"></i> | |
| </button> | |
| </div> | |
| <p class="text-xs text-blue-600 mt-2">Diese URL wird zum manuellen Auslösen des Workflows verwendet</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> | |
| <button type="button" id="confirm-create-workflow" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm"> | |
| Workflow erstellen | |
| </button> | |
| <button type="button" id="cancel-create-workflow" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Abbrechen | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Settings Popup --> | |
| <div id="settings-popup" class="settings-popup hidden bg-white rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-bold text-lg">Workflow Einstellungen</h3> | |
| <button id="close-settings" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Name</label> | |
| <input type="text" id="settings-name" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label> | |
| <textarea id="settings-description" rows="2" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Webhook URL</label> | |
| <div class="flex"> | |
| <input type="text" id="settings-webhook" class="flex-1 border border-gray-300 rounded-l-md px-3 py-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> | |
| <button id="copy-settings-webhook" class="bg-indigo-600 text-white px-3 py-2 rounded-r-md hover:bg-indigo-700 transition"> | |
| <i class="fas fa-copy"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">HTTP Methode</label> | |
| <select id="settings-method" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option>POST</option> | |
| <option>GET</option> | |
| <option>PUT</option> | |
| <option>DELETE</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Status</label> | |
| <select id="settings-status" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option>Aktiv</option> | |
| <option>Pausiert</option> | |
| <option>Deaktiviert</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between"> | |
| <button id="delete-workflow" class="text-red-600 hover:text-red-800 flex items-center"> | |
| <i class="fas fa-trash mr-2"></i> Löschen | |
| </button> | |
| <button id="save-settings" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition"> | |
| Speichern | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Webhook-Funktion | |
| async function triggerWebhook(url, data = {}) { | |
| try { | |
| const response = await fetch(url, { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify(data) | |
| }); | |
| if (!response.ok) { | |
| throw new Error(`Webhook-Fehler: ${response.status}`); | |
| } | |
| return await response.json(); | |
| } catch (error) { | |
| console.error('Fehler beim Auslösen des Webhooks:', error); | |
| return { success: false, error: error.message }; | |
| } | |
| } | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Theme Toggle | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| const darkIcon = themeToggle.querySelector('.fa-moon'); | |
| const lightIcon = themeToggle.querySelector('.fa-sun'); | |
| if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { | |
| document.documentElement.classList.add('dark'); | |
| lightIcon.classList.remove('hidden'); | |
| } else { | |
| document.documentElement.classList.remove('dark'); | |
| darkIcon.classList.remove('hidden'); | |
| } | |
| themeToggle.addEventListener('click', function() { | |
| if (document.documentElement.classList.contains('dark')) { | |
| document.documentElement.classList.remove('dark'); | |
| localStorage.setItem('color-theme', 'light'); | |
| darkIcon.classList.remove('hidden'); | |
| lightIcon.classList.add('hidden'); | |
| } else { | |
| document.documentElement.classList.add('dark'); | |
| localStorage.setItem('color-theme', 'dark'); | |
| darkIcon.classList.add('hidden'); | |
| lightIcon.classList.remove('hidden'); | |
| } | |
| }); | |
| // Create Workflow Modal | |
| const createWorkflowModal = document.getElementById('create-workflow-modal'); | |
| const createWorkflowBackdrop = document.getElementById('create-workflow-backdrop'); | |
| const cancelCreateWorkflow = document.getElementById('cancel-create-workflow'); | |
| const createWorkflowBtn = document.getElementById('create-workflow-btn'); | |
| const addWorkflowBtn = document.getElementById('add-workflow-btn'); | |
| function openCreateWorkflowModal() { | |
| createWorkflowModal.classList.remove('hidden'); | |
| } | |
| function closeCreateWorkflowModal() { | |
| createWorkflowModal.classList.add('hidden'); | |
| } | |
| createWorkflowBtn.addEventListener('click', openCreateWorkflowModal); | |
| addWorkflowBtn.addEventListener('click', openCreateWorkflowModal); | |
| createWorkflowBackdrop.addEventListener('click', closeCreateWorkflowModal); | |
| cancelCreateWorkflow.addEventListener('click', closeCreateWorkflowModal); | |
| // Copy Webhook URL | |
| document.getElementById('copy-webhook-btn').addEventListener('click', function() { | |
| const webhookUrl = document.getElementById('webhook-url'); | |
| webhookUrl.select(); | |
| document.execCommand('copy'); | |
| const originalText = this.innerHTML; | |
| this.innerHTML = '<i class="fas fa-check"></i>'; | |
| setTimeout(() => { | |
| this.innerHTML = originalText; | |
| }, 2000); | |
| }); | |
| // Settings Popup | |
| const settingsPopup = document.getElementById('settings-popup'); | |
| const closeSettings = document.getElementById('close-settings'); | |
| const saveSettings = document.getElementById('save-settings'); | |
| const deleteWorkflow = document.getElementById('delete-workflow'); | |
| const settingsButtons = document.querySelectorAll('.settings-btn'); | |
| let currentWorkflowCard = null; | |
| settingsButtons.forEach(btn => { | |
| btn.addEventListener('click', function(e) { | |
| const workflowCard = this.closest('.workflow-card'); | |
| currentWorkflowCard = workflowCard; | |
| // Get current workflow data | |
| const title = workflowCard.querySelector('h3').textContent; | |
| const description = workflowCard.querySelector('p').textContent; | |
| const webhook = workflowCard.querySelector('.webhook-btn').getAttribute('data-webhook'); | |
| const status = workflowCard.querySelector('span').textContent; | |
| // Fill settings form | |
| document.getElementById('settings-name').value = title; | |
| document.getElementById('settings-description').value = description; | |
| document.getElementById('settings-webhook').value = webhook; | |
| document.getElementById('settings-status').value = status === 'Aktiv' ? 'Aktiv' : status === 'Pausiert' ? 'Pausiert' : 'Deaktiviert'; | |
| // Position and show popup | |
| const rect = this.getBoundingClientRect(); | |
| settingsPopup.style.top = `${rect.bottom + window.scrollY + 5}px`; | |
| settingsPopup.style.left = `${rect.left + window.scrollX}px`; | |
| settingsPopup.classList.remove('hidden'); | |
| }); | |
| }); | |
| closeSettings.addEventListener('click', function() { | |
| settingsPopup.classList.add('hidden'); | |
| }); | |
| saveSettings.addEventListener('click', function() { | |
| if (!currentWorkflowCard) return; | |
| // Update workflow card with new settings | |
| const name = document.getElementById('settings-name').value; | |
| const description = document.getElementById('settings-description').value; | |
| const webhook = document.getElementById('settings-webhook').value; | |
| const status = document.getElementById('settings-status').value; | |
| currentWorkflowCard.querySelector('h3').textContent = name; | |
| currentWorkflowCard.querySelector('p').textContent = description; | |
| currentWorkflowCard.querySelector('.webhook-btn').setAttribute('data-webhook', webhook); | |
| const statusElement = currentWorkflowCard.querySelector('span'); | |
| statusElement.textContent = status; | |
| if (status === 'Aktiv') { | |
| statusElement.className = 'bg-white text-indigo-600 text-xs px-2 py-1 rounded-full'; | |
| } else if (status === 'Pausiert') { | |
| statusElement.className = 'bg-white text-yellow-600 text-xs px-2 py-1 rounded-full'; | |
| } else { | |
| statusElement.className = 'bg-white text-gray-600 text-xs px-2 py-1 rounded-full'; | |
| } | |
| settingsPopup.classList.add('hidden'); | |
| alert('Einstellungen wurden gespeichert!'); | |
| }); | |
| deleteWorkflow.addEventListener('click', function() { | |
| if (!currentWorkflowCard) return; | |
| if (confirm('Möchten Sie diesen Workflow wirklich löschen?')) { | |
| currentWorkflowCard.remove(); | |
| settingsPopup.classList.add('hidden'); | |
| alert('Workflow wurde gelöscht!'); | |
| } | |
| }); | |
| // Copy Settings Webhook | |
| document.getElementById('copy-settings-webhook').addEventListener('click', function() { | |
| const webhookUrl = document.getElementById('settings-webhook'); | |
| webhookUrl.select(); | |
| document.execCommand('copy'); | |
| const originalText = this.innerHTML; | |
| this.innerHTML = '<i class="fas fa-check"></i>'; | |
| setTimeout(() => { | |
| this.innerHTML = originalText; | |
| }, 2000); | |
| }); | |
| // Webhook Buttons | |
| const webhookButtons = document.querySelectorAll('.webhook-btn'); | |
| webhookButtons.forEach(btn => { | |
| btn.addEventListener('click', async function() { | |
| const webhookUrl = this.getAttribute('data-webhook'); | |
| this.disabled = true; | |
| const originalText = this.innerHTML; | |
| this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Wird ausgeführt...'; | |
| try { | |
| const result = await triggerWebhook(webhookUrl, { | |
| workflow: this.closest('.workflow-card').querySelector('h3').textContent, | |
| time: new Date().toISOString() | |
| }); | |
| if (result.success) { | |
| alert(`Workflow erfolgreich ausgelöst!\nAntwort: ${JSON.stringify(result)}`); | |
| } else { | |
| alert(`Fehler: ${result.error || 'Workflow konnte nicht ausgeführt werden'}`); | |
| } | |
| } catch (error) { | |
| alert(`Webhook-Fehler: ${error.message}`); | |
| } finally { | |
| this.disabled = false; | |
| this.innerHTML = originalText; | |
| } | |
| }); | |
| }); | |
| // Confirm Create Workflow | |
| document.getElementById('confirm-create-workflow').addEventListener('click', function() { | |
| const workflowName = document.getElementById('workflow-name').value; | |
| const workflowType = document.getElementById('workflow-type').value; | |
| const triggerType = document.getElementById('trigger-type').value; | |
| if (!workflowName) { | |
| alert('Bitte geben Sie einen Namen für den Workflow ein'); | |
| return; | |
| } | |
| // Generate random color for the new workflow | |
| const colors = ['indigo', 'purple', 'green', 'yellow', 'red', 'blue', 'pink']; | |
| const randomColor = colors[Math.floor(Math.random() * colors.length)]; | |
| // Create new workflow card | |
| const workflowContainer = document.getElementById('workflow-container'); | |
| const newWorkflowId = Date.now(); // Use timestamp as unique ID | |
| const newWorkflowCard = document.createElement('div'); | |
| newWorkflowCard.className = 'workflow-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300'; | |
| newWorkflowCard.setAttribute('data-id', newWorkflowId); | |
| newWorkflowCard.innerHTML = ` | |
| <div class="bg-${randomColor}-600 text-white px-4 py-3 flex justify-between items-center"> | |
| <h3 class="font-bold">${workflowName}</h3> | |
| <span class="bg-white text-${randomColor}-600 text-xs px-2 py-1 rounded-full">Aktiv</span> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-gray-600 mb-4">Neuer ${workflowType} Workflow</p> | |
| <div class="flex justify-between items-center mb-3"> | |
| <span class="text-sm text-gray-500">Letzte Ausführung:</span> | |
| <span class="text-sm font-medium">Noch nicht ausgeführt</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-4"> | |
| <span class="text-sm text-gray-500">Trigger:</span> | |
| <span class="text-sm font-medium">${triggerType}</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="webhook-btn flex-1 bg-${randomColor}-600 text-white px-3 py-2 rounded-lg text-sm hover:bg-${randomColor}-700 transition" | |
| data-webhook="https://your-n8n-webhook.com/${workflowName.toLowerCase().replace(/\s+/g, '-')}"> | |
| <i class="fas fa-play mr-2"></i> Ausführen | |
| </button> | |
| <button class="settings-btn flex-1 border border-gray-300 px-3 py-2 rounded-lg text-sm hover:bg-gray-50 transition"> | |
| <i class="fas fa-cog mr-2"></i> Einstellungen | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| // Insert before the "Add New Workflow" card | |
| workflowContainer.insertBefore(newWorkflowCard, workflowContainer.lastElementChild); | |
| // Add event listeners to the new buttons | |
| newWorkflowCard.querySelector('.webhook-btn').addEventListener('click', async function() { | |
| const webhookUrl = this.getAttribute('data-webhook'); | |
| this.disabled = true; | |
| const originalText = this.innerHTML; | |
| this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Wird ausgeführt...'; | |
| try { | |
| const result = await triggerWebhook(webhookUrl, { | |
| workflow: this.closest('.workflow-card').querySelector('h3').textContent, | |
| time: new Date().toISOString() | |
| }); | |
| if (result.success) { | |
| alert(`Workflow erfolgreich ausgelöst!\nAntwort: ${JSON.stringify(result)}`); | |
| } else { | |
| alert(`Fehler: ${result.error || 'Workflow konnte nicht ausgeführt werden'}`); | |
| } | |
| } catch (error) { | |
| alert(`Webhook-Fehler: ${error.message}`); | |
| } finally { | |
| this.disabled = false; | |
| this.innerHTML = originalText; | |
| } | |
| }); | |
| newWorkflowCard.querySelector('.settings-btn').addEventListener('click', function(e) { | |
| const workflowCard = this.closest('.workflow-card'); | |
| currentWorkflowCard = workflowCard; | |
| // Get current workflow data | |
| const title = workflowCard.querySelector('h3').textContent; | |
| const description = workflowCard.querySelector('p').textContent; | |
| const webhook = workflowCard.querySelector('.webhook-btn').getAttribute('data-webhook'); | |
| const status = workflowCard.querySelector('span').textContent; | |
| // Fill settings form | |
| document.getElementById('settings-name').value = title; | |
| document.getElementById('settings-description').value = description; | |
| document.getElementById('settings-webhook').value = webhook; | |
| document.getElementById('settings-status').value = status === 'Aktiv' ? 'Aktiv' : status === 'Pausiert' ? 'Pausiert' : 'Deaktiviert'; | |
| // Position and show popup | |
| const rect = this.getBoundingClientRect(); | |
| settingsPopup.style.top = `${rect.bottom + window.scrollY + 5}px`; | |
| settingsPopup.style.left = `${rect.left + window.scrollX}px`; | |
| settingsPopup.classList.remove('hidden'); | |
| }); | |
| closeCreateWorkflowModal(); | |
| alert(`Neuer Workflow "${workflowName}" wurde erstellt!`); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=a40login/workflow-hub-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |