Hugging Face's logo

Spaces:
a40login
/
workflow-hub-2
Running

App Files Community
a40login commited on
Commit
a6ca863
·
verified ·
1 Parent(s): be98125

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +262 -13
  2. prompts.txt +2 -1
index.html CHANGED
@@ -14,10 +14,19 @@
14
  .modal {
15
  transition: all 0.3s ease;
16
  }
 
 
 
 
 
 
 
 
17
  .dark { background-color: #111827; color: #f3f4f6; }
18
  .dark .bg-white { background-color: #1f2937 !important; }
19
  .dark .text-gray-800 { color: #f3f4f6 !important; }
20
  .dark .bg-gray-50 { background-color: #374151 !important; }
 
21
  </style>
22
  </head>
23
  <body class="bg-gray-50">
@@ -93,9 +102,9 @@
93
  </div>
94
 
95
  <!-- Active Workflows -->
96
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
97
  <!-- Workflow 1 -->
98
- <div class="bg-white rounded-xl shadow-md overflow-hidden workflow-card transition duration-300">
99
  <div class="bg-indigo-600 text-white px-4 py-3 flex justify-between items-center">
100
  <h3 class="font-bold">Datenbereinigung</h3>
101
  <span class="bg-white text-indigo-600 text-xs px-2 py-1 rounded-full">Aktiv</span>
@@ -115,7 +124,7 @@
115
  data-webhook="https://your-n8n-webhook.com/data-cleanup">
116
  <i class="fas fa-play mr-2"></i> Ausführen
117
  </button>
118
- <button class="flex-1 border border-gray-300 px-3 py-2 rounded-lg text-sm hover:bg-gray-50 transition">
119
  <i class="fas fa-cog mr-2"></i> Einstellungen
120
  </button>
121
  </div>
@@ -123,7 +132,7 @@
123
  </div>
124
 
125
  <!-- Workflow 2 -->
126
- <div class="bg-white rounded-xl shadow-md overflow-hidden workflow-card transition duration-300">
127
  <div class="bg-purple-600 text-white px-4 py-3 flex justify-between items-center">
128
  <h3 class="font-bold">Kundenanalyse</h3>
129
  <span class="bg-white text-purple-600 text-xs px-2 py-1 rounded-full">Aktiv</span>
@@ -143,7 +152,7 @@
143
  data-webhook="https://your-n8n-webhook.com/customer-analysis">
144
  <i class="fas fa-play mr-2"></i> Ausführen
145
  </button>
146
- <button class="flex-1 border border-gray-300 px-3 py-2 rounded-lg text-sm hover:bg-gray-50 transition">
147
  <i class="fas fa-cog mr-2"></i> Einstellungen
148
  </button>
149
  </div>
@@ -151,7 +160,7 @@
151
  </div>
152
 
153
  <!-- Workflow 3 -->
154
- <div class="bg-white rounded-xl shadow-md overflow-hidden workflow-card transition duration-300">
155
  <div class="bg-green-600 text-white px-4 py-3 flex justify-between items-center">
156
  <h3 class="font-bold">Dokumentenverarbeitung</h3>
157
  <span class="bg-white text-green-600 text-xs px-2 py-1 rounded-full">Aktiv</span>
@@ -171,7 +180,7 @@
171
  data-webhook="https://your-n8n-webhook.com/doc-processing">
172
  <i class="fas fa-play mr-2"></i> Ausführen
173
  </button>
174
- <button class="flex-1 border border-gray-300 px-3 py-2 rounded-lg text-sm hover:bg-gray-50 transition">
175
  <i class="fas fa-cog mr-2"></i> Einstellungen
176
  </button>
177
  </div>
@@ -179,7 +188,7 @@
179
  </div>
180
 
181
  <!-- Workflow 4 -->
182
- <div class="bg-white rounded-xl shadow-md overflow-hidden workflow-card transition duration-300">
183
  <div class="bg-yellow-600 text-white px-4 py-3 flex justify-between items-center">
184
  <h3 class="font-bold">E-Mail Klassifizierung</h3>
185
  <span class="bg-white text-yellow-600 text-xs px-2 py-1 rounded-full">Pausiert</span>
@@ -199,7 +208,7 @@
199
  data-webhook="https://your-n8n-webhook.com/email-classification">
200
  <i class="fas fa-play mr-2"></i> Ausführen
201
  </button>
202
- <button class="flex-1 border border-gray-300 px-3 py-2 rounded-lg text-sm hover:bg-gray-50 transition">
203
  <i class="fas fa-cog mr-2"></i> Einstellungen
204
  </button>
205
  </div>
@@ -207,7 +216,7 @@
207
  </div>
208
 
209
  <!-- Workflow 5 -->
210
- <div class="bg-white rounded-xl shadow-md overflow-hidden workflow-card transition duration-300">
211
  <div class="bg-red-600 text-white px-4 py-3 flex justify-between items-center">
212
  <h3 class="font-bold">Betrugserkennung</h3>
213
  <span class="bg-white text-red-600 text-xs px-2 py-1 rounded-full">Aktiv</span>
@@ -227,7 +236,7 @@
227
  data-webhook="https://your-n8n-webhook.com/fraud-detection">
228
  <i class="fas fa-play mr-2"></i> Testen
229
  </button>
230
- <button class="flex-1 border border-gray-300 px-3 py-2 rounded-lg text-sm hover:bg-gray-50 transition">
231
  <i class="fas fa-cog mr-2"></i> Einstellungen
232
  </button>
233
  </div>
@@ -479,6 +488,66 @@
479
  </div>
480
  </div>
481
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
482
  <script>
483
  // Webhook-Funktion
484
  async function triggerWebhook(url, data = {}) {
@@ -565,6 +634,96 @@
565
  }, 2000);
566
  });
567
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
568
  // Webhook Buttons
569
  const webhookButtons = document.querySelectorAll('.webhook-btn');
570
  webhookButtons.forEach(btn => {
@@ -606,10 +765,100 @@
606
  return;
607
  }
608
 
609
- // In einer echten App würde hier der Workflow erstellt werden
610
- alert(`Neuer Workflow "${workflowName}" (Typ: ${workflowType}, Trigger: ${triggerType}) wird erstellt`);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
611
 
612
  closeCreateWorkflowModal();
 
613
  });
614
  });
615
  </script>
 
14
  .modal {
15
  transition: all 0.3s ease;
16
  }
17
+ .settings-popup {
18
+ position: absolute;
19
+ z-index: 40;
20
+ width: 320px;
21
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
22
+ transform-origin: top right;
23
+ transition: all 0.2s ease;
24
+ }
25
  .dark { background-color: #111827; color: #f3f4f6; }
26
  .dark .bg-white { background-color: #1f2937 !important; }
27
  .dark .text-gray-800 { color: #f3f4f6 !important; }
28
  .dark .bg-gray-50 { background-color: #374151 !important; }
29
+ .dark .settings-popup { background-color: #1f2937; border: 1px solid #374151; }
30
  </style>
31
  </head>
32
  <body class="bg-gray-50">
 
102
  </div>
103
 
104
  <!-- Active Workflows -->
105
+ <div id="workflow-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
106
  <!-- Workflow 1 -->
107
+ <div class="workflow-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300" data-id="1">
108
  <div class="bg-indigo-600 text-white px-4 py-3 flex justify-between items-center">
109
  <h3 class="font-bold">Datenbereinigung</h3>
110
  <span class="bg-white text-indigo-600 text-xs px-2 py-1 rounded-full">Aktiv</span>
 
124
  data-webhook="https://your-n8n-webhook.com/data-cleanup">
125
  <i class="fas fa-play mr-2"></i> Ausführen
126
  </button>
127
+ <button class="settings-btn flex-1 border border-gray-300 px-3 py-2 rounded-lg text-sm hover:bg-gray-50 transition">
128
  <i class="fas fa-cog mr-2"></i> Einstellungen
129
  </button>
130
  </div>
 
132
  </div>
133
 
134
  <!-- Workflow 2 -->
135
+ <div class="workflow-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300" data-id="2">
136
  <div class="bg-purple-600 text-white px-4 py-3 flex justify-between items-center">
137
  <h3 class="font-bold">Kundenanalyse</h3>
138
  <span class="bg-white text-purple-600 text-xs px-2 py-1 rounded-full">Aktiv</span>
 
152
  data-webhook="https://your-n8n-webhook.com/customer-analysis">
153
  <i class="fas fa-play mr-2"></i> Ausführen
154
  </button>
155
+ <button class="settings-btn flex-1 border border-gray-300 px-3 py-2 rounded-lg text-sm hover:bg-gray-50 transition">
156
  <i class="fas fa-cog mr-2"></i> Einstellungen
157
  </button>
158
  </div>
 
160
  </div>
161
 
162
  <!-- Workflow 3 -->
163
+ <div class="workflow-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300" data-id="3">
164
  <div class="bg-green-600 text-white px-4 py-3 flex justify-between items-center">
165
  <h3 class="font-bold">Dokumentenverarbeitung</h3>
166
  <span class="bg-white text-green-600 text-xs px-2 py-1 rounded-full">Aktiv</span>
 
180
  data-webhook="https://your-n8n-webhook.com/doc-processing">
181
  <i class="fas fa-play mr-2"></i> Ausführen
182
  </button>
183
+ <button class="settings-btn flex-1 border border-gray-300 px-3 py-2 rounded-lg text-sm hover:bg-gray-50 transition">
184
  <i class="fas fa-cog mr-2"></i> Einstellungen
185
  </button>
186
  </div>
 
188
  </div>
189
 
190
  <!-- Workflow 4 -->
191
+ <div class="workflow-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300" data-id="4">
192
  <div class="bg-yellow-600 text-white px-4 py-3 flex justify-between items-center">
193
  <h3 class="font-bold">E-Mail Klassifizierung</h3>
194
  <span class="bg-white text-yellow-600 text-xs px-2 py-1 rounded-full">Pausiert</span>
 
208
  data-webhook="https://your-n8n-webhook.com/email-classification">
209
  <i class="fas fa-play mr-2"></i> Ausführen
210
  </button>
211
+ <button class="settings-btn flex-1 border border-gray-300 px-3 py-2 rounded-lg text-sm hover:bg-gray-50 transition">
212
  <i class="fas fa-cog mr-2"></i> Einstellungen
213
  </button>
214
  </div>
 
216
  </div>
217
 
218
  <!-- Workflow 5 -->
219
+ <div class="workflow-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300" data-id="5">
220
  <div class="bg-red-600 text-white px-4 py-3 flex justify-between items-center">
221
  <h3 class="font-bold">Betrugserkennung</h3>
222
  <span class="bg-white text-red-600 text-xs px-2 py-1 rounded-full">Aktiv</span>
 
236
  data-webhook="https://your-n8n-webhook.com/fraud-detection">
237
  <i class="fas fa-play mr-2"></i> Testen
238
  </button>
239
+ <button class="settings-btn flex-1 border border-gray-300 px-3 py-2 rounded-lg text-sm hover:bg-gray-50 transition">
240
  <i class="fas fa-cog mr-2"></i> Einstellungen
241
  </button>
242
  </div>
 
488
  </div>
489
  </div>
490
 
491
+ <!-- Settings Popup -->
492
+ <div id="settings-popup" class="settings-popup hidden bg-white rounded-lg p-4">
493
+ <div class="flex justify-between items-center mb-4">
494
+ <h3 class="font-bold text-lg">Workflow Einstellungen</h3>
495
+ <button id="close-settings" class="text-gray-500 hover:text-gray-700">
496
+ <i class="fas fa-times"></i>
497
+ </button>
498
+ </div>
499
+
500
+ <div class="space-y-4">
501
+ <div>
502
+ <label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
503
+ <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">
504
+ </div>
505
+
506
+ <div>
507
+ <label class="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
508
+ <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>
509
+ </div>
510
+
511
+ <div>
512
+ <label class="block text-sm font-medium text-gray-700 mb-1">Webhook URL</label>
513
+ <div class="flex">
514
+ <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">
515
+ <button id="copy-settings-webhook" class="bg-indigo-600 text-white px-3 py-2 rounded-r-md hover:bg-indigo-700 transition">
516
+ <i class="fas fa-copy"></i>
517
+ </button>
518
+ </div>
519
+ </div>
520
+
521
+ <div>
522
+ <label class="block text-sm font-medium text-gray-700 mb-1">HTTP Methode</label>
523
+ <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">
524
+ <option>POST</option>
525
+ <option>GET</option>
526
+ <option>PUT</option>
527
+ <option>DELETE</option>
528
+ </select>
529
+ </div>
530
+
531
+ <div>
532
+ <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
533
+ <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">
534
+ <option>Aktiv</option>
535
+ <option>Pausiert</option>
536
+ <option>Deaktiviert</option>
537
+ </select>
538
+ </div>
539
+ </div>
540
+
541
+ <div class="mt-6 flex justify-between">
542
+ <button id="delete-workflow" class="text-red-600 hover:text-red-800 flex items-center">
543
+ <i class="fas fa-trash mr-2"></i> Löschen
544
+ </button>
545
+ <button id="save-settings" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition">
546
+ Speichern
547
+ </button>
548
+ </div>
549
+ </div>
550
+
551
  <script>
552
  // Webhook-Funktion
553
  async function triggerWebhook(url, data = {}) {
 
634
  }, 2000);
635
  });
636
 
637
+ // Settings Popup
638
+ const settingsPopup = document.getElementById('settings-popup');
639
+ const closeSettings = document.getElementById('close-settings');
640
+ const saveSettings = document.getElementById('save-settings');
641
+ const deleteWorkflow = document.getElementById('delete-workflow');
642
+ const settingsButtons = document.querySelectorAll('.settings-btn');
643
+
644
+ let currentWorkflowCard = null;
645
+
646
+ settingsButtons.forEach(btn => {
647
+ btn.addEventListener('click', function(e) {
648
+ const workflowCard = this.closest('.workflow-card');
649
+ currentWorkflowCard = workflowCard;
650
+
651
+ // Get current workflow data
652
+ const title = workflowCard.querySelector('h3').textContent;
653
+ const description = workflowCard.querySelector('p').textContent;
654
+ const webhook = workflowCard.querySelector('.webhook-btn').getAttribute('data-webhook');
655
+ const status = workflowCard.querySelector('span').textContent;
656
+
657
+ // Fill settings form
658
+ document.getElementById('settings-name').value = title;
659
+ document.getElementById('settings-description').value = description;
660
+ document.getElementById('settings-webhook').value = webhook;
661
+ document.getElementById('settings-status').value = status === 'Aktiv' ? 'Aktiv' : status === 'Pausiert' ? 'Pausiert' : 'Deaktiviert';
662
+
663
+ // Position and show popup
664
+ const rect = this.getBoundingClientRect();
665
+ settingsPopup.style.top = `${rect.bottom + window.scrollY + 5}px`;
666
+ settingsPopup.style.left = `${rect.left + window.scrollX}px`;
667
+ settingsPopup.classList.remove('hidden');
668
+ });
669
+ });
670
+
671
+ closeSettings.addEventListener('click', function() {
672
+ settingsPopup.classList.add('hidden');
673
+ });
674
+
675
+ saveSettings.addEventListener('click', function() {
676
+ if (!currentWorkflowCard) return;
677
+
678
+ // Update workflow card with new settings
679
+ const name = document.getElementById('settings-name').value;
680
+ const description = document.getElementById('settings-description').value;
681
+ const webhook = document.getElementById('settings-webhook').value;
682
+ const status = document.getElementById('settings-status').value;
683
+
684
+ currentWorkflowCard.querySelector('h3').textContent = name;
685
+ currentWorkflowCard.querySelector('p').textContent = description;
686
+ currentWorkflowCard.querySelector('.webhook-btn').setAttribute('data-webhook', webhook);
687
+
688
+ const statusElement = currentWorkflowCard.querySelector('span');
689
+ statusElement.textContent = status;
690
+
691
+ if (status === 'Aktiv') {
692
+ statusElement.className = 'bg-white text-indigo-600 text-xs px-2 py-1 rounded-full';
693
+ } else if (status === 'Pausiert') {
694
+ statusElement.className = 'bg-white text-yellow-600 text-xs px-2 py-1 rounded-full';
695
+ } else {
696
+ statusElement.className = 'bg-white text-gray-600 text-xs px-2 py-1 rounded-full';
697
+ }
698
+
699
+ settingsPopup.classList.add('hidden');
700
+ alert('Einstellungen wurden gespeichert!');
701
+ });
702
+
703
+ deleteWorkflow.addEventListener('click', function() {
704
+ if (!currentWorkflowCard) return;
705
+
706
+ if (confirm('Möchten Sie diesen Workflow wirklich löschen?')) {
707
+ currentWorkflowCard.remove();
708
+ settingsPopup.classList.add('hidden');
709
+ alert('Workflow wurde gelöscht!');
710
+ }
711
+ });
712
+
713
+ // Copy Settings Webhook
714
+ document.getElementById('copy-settings-webhook').addEventListener('click', function() {
715
+ const webhookUrl = document.getElementById('settings-webhook');
716
+ webhookUrl.select();
717
+ document.execCommand('copy');
718
+
719
+ const originalText = this.innerHTML;
720
+ this.innerHTML = '<i class="fas fa-check"></i>';
721
+
722
+ setTimeout(() => {
723
+ this.innerHTML = originalText;
724
+ }, 2000);
725
+ });
726
+
727
  // Webhook Buttons
728
  const webhookButtons = document.querySelectorAll('.webhook-btn');
729
  webhookButtons.forEach(btn => {
 
765
  return;
766
  }
767
 
768
+ // Generate random color for the new workflow
769
+ const colors = ['indigo', 'purple', 'green', 'yellow', 'red', 'blue', 'pink'];
770
+ const randomColor = colors[Math.floor(Math.random() * colors.length)];
771
+
772
+ // Create new workflow card
773
+ const workflowContainer = document.getElementById('workflow-container');
774
+ const newWorkflowId = Date.now(); // Use timestamp as unique ID
775
+
776
+ const newWorkflowCard = document.createElement('div');
777
+ newWorkflowCard.className = 'workflow-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300';
778
+ newWorkflowCard.setAttribute('data-id', newWorkflowId);
779
+
780
+ newWorkflowCard.innerHTML = `
781
+ <div class="bg-${randomColor}-600 text-white px-4 py-3 flex justify-between items-center">
782
+ <h3 class="font-bold">${workflowName}</h3>
783
+ <span class="bg-white text-${randomColor}-600 text-xs px-2 py-1 rounded-full">Aktiv</span>
784
+ </div>
785
+ <div class="p-4">
786
+ <p class="text-gray-600 mb-4">Neuer ${workflowType} Workflow</p>
787
+ <div class="flex justify-between items-center mb-3">
788
+ <span class="text-sm text-gray-500">Letzte Ausführung:</span>
789
+ <span class="text-sm font-medium">Noch nicht ausgeführt</span>
790
+ </div>
791
+ <div class="flex justify-between items-center mb-4">
792
+ <span class="text-sm text-gray-500">Trigger:</span>
793
+ <span class="text-sm font-medium">${triggerType}</span>
794
+ </div>
795
+ <div class="flex space-x-2">
796
+ <button class="webhook-btn flex-1 bg-${randomColor}-600 text-white px-3 py-2 rounded-lg text-sm hover:bg-${randomColor}-700 transition"
797
+ data-webhook="https://your-n8n-webhook.com/${workflowName.toLowerCase().replace(/\s+/g, '-')}">
798
+ <i class="fas fa-play mr-2"></i> Ausführen
799
+ </button>
800
+ <button class="settings-btn flex-1 border border-gray-300 px-3 py-2 rounded-lg text-sm hover:bg-gray-50 transition">
801
+ <i class="fas fa-cog mr-2"></i> Einstellungen
802
+ </button>
803
+ </div>
804
+ </div>
805
+ `;
806
+
807
+ // Insert before the "Add New Workflow" card
808
+ workflowContainer.insertBefore(newWorkflowCard, workflowContainer.lastElementChild);
809
+
810
+ // Add event listeners to the new buttons
811
+ newWorkflowCard.querySelector('.webhook-btn').addEventListener('click', async function() {
812
+ const webhookUrl = this.getAttribute('data-webhook');
813
+
814
+ this.disabled = true;
815
+ const originalText = this.innerHTML;
816
+ this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Wird ausgeführt...';
817
+
818
+ try {
819
+ const result = await triggerWebhook(webhookUrl, {
820
+ workflow: this.closest('.workflow-card').querySelector('h3').textContent,
821
+ time: new Date().toISOString()
822
+ });
823
+
824
+ if (result.success) {
825
+ alert(`Workflow erfolgreich ausgelöst!\nAntwort: ${JSON.stringify(result)}`);
826
+ } else {
827
+ alert(`Fehler: ${result.error || 'Workflow konnte nicht ausgeführt werden'}`);
828
+ }
829
+ } catch (error) {
830
+ alert(`Webhook-Fehler: ${error.message}`);
831
+ } finally {
832
+ this.disabled = false;
833
+ this.innerHTML = originalText;
834
+ }
835
+ });
836
+
837
+ newWorkflowCard.querySelector('.settings-btn').addEventListener('click', function(e) {
838
+ const workflowCard = this.closest('.workflow-card');
839
+ currentWorkflowCard = workflowCard;
840
+
841
+ // Get current workflow data
842
+ const title = workflowCard.querySelector('h3').textContent;
843
+ const description = workflowCard.querySelector('p').textContent;
844
+ const webhook = workflowCard.querySelector('.webhook-btn').getAttribute('data-webhook');
845
+ const status = workflowCard.querySelector('span').textContent;
846
+
847
+ // Fill settings form
848
+ document.getElementById('settings-name').value = title;
849
+ document.getElementById('settings-description').value = description;
850
+ document.getElementById('settings-webhook').value = webhook;
851
+ document.getElementById('settings-status').value = status === 'Aktiv' ? 'Aktiv' : status === 'Pausiert' ? 'Pausiert' : 'Deaktiviert';
852
+
853
+ // Position and show popup
854
+ const rect = this.getBoundingClientRect();
855
+ settingsPopup.style.top = `${rect.bottom + window.scrollY + 5}px`;
856
+ settingsPopup.style.left = `${rect.left + window.scrollX}px`;
857
+ settingsPopup.classList.remove('hidden');
858
+ });
859
 
860
  closeCreateWorkflowModal();
861
+ alert(`Neuer Workflow "${workflowName}" wurde erstellt!`);
862
  });
863
  });
864
  </script>
prompts.txt CHANGED
@@ -1,3 +1,4 @@
1
  Based on your background (AI Automation, n8n, Notion systems, Supabase), here’s an improved and translated version of your prompt, perfectly suited for tools like Lovable.dev, Vercel AI SDK, or any fullstack AI builder (Next.js, Astro, FlutterFlow, etc.). ⸻ 🧠 German Prompt – für eine WebApp mit Supabase, Google Auth und AI-Funktionalität ⸻ 🔧 Projektziel Erstelle eine moderne, performante WebApp mit Login über Google (via Supabase Auth). Nach dem Login soll der Nutzer Zugriff auf ein zentrales Dashboard erhalten, das verschiedene KI-Module bedient. Die Anwendung dient als zentrale Steuerzentrale für KI-Workflows (z. B. n8n), Prompts und Wissensdokumente – mit einem Fokus auf gute UX, klarer Struktur und erweiterbarer AI-Architektur. ⸻ 🛠 Funktionale Anforderungen 🔐 Authentifizierung • Google OAuth-Login via Supabase Auth • Nutzerverwaltung & Session-Handling via Supabase • Redirect nach Login zu /dashboard • Wenn bereits eingeloggt → automatische Weiterleitung 📊 Dashboard Nach dem Login soll ein übersichtliches Dashboard erscheinen mit folgenden Komponenten: 1. ✅ Agenten-Buttons • Button-Karten für verschiedene Automationen (z. B. „Social Caption generieren“, „Bild erstellen“, „Daten analysieren“) • Jeder Button triggert einen vordefinierten Webhook (n8n) 2. 🧠 Prompt-Galerie • Datenbankähnliches UI wie Notion (Cards, Tabellen oder Listen) • Prompts sind kategorisiert (z. B. Rolle, Ziel, Stil, Tonfall) • Einzelansicht mit Bearbeitungsmöglichkeit + „Prompt testen“-Button • Verknüpfung zu Systemen wie OpenAI oder Gemini 3. 📚 Knowledge-Base • Markdown-kompatibles Dokumentenarchiv • Kategorien und Tags • Suche und Volltextfilter • Optional: semantische KI-Suche mit Vektor-Datenbank 4. 🤖 AI-Chatbot • Wählbare AI-Engines: OpenAI, Gemini, DeepSeek, OpenRouter • Konfiguration über API-Key (Nutzer kann Key eingeben oder hinterlegen) • Chatverlauf speichern • Unterstützung für Text, JSON, Bilder (z. B. Markdown oder DALL·E-Vorschau) ⸻ 🌙 UI / UX Anforderungen • Dunkel-/Hellmodus-Schalter • Responsive Design (Desktop & Tablet) • Modernes Design mit Tailwind, Framer Motion oder ShadCN • Klar strukturierte Navigation: Sidebar + Main Panel • Fokus auf reduzierte Klickpfade und kontextbewusstes Arbeiten ⸻ 🧩 Technologie-Stack • Frontend: Next.js (App Router), Tailwind CSS, shadcn/ui • Backend/Auth: Supabase (Auth + DB) • AI APIs (optional via toggle): • OpenAI • Google Gemini • DeepSeek • OpenRouter • Webhook-Unterstützung: Trigger-Buttons → n8n Flows • Prompt- und Output-Management: Datenbankbasiert (Supabase Tables) ⸻ 🔐 Beispiel für .env Konfiguration NEXT_PUBLIC_SUPABASE_URL=https://xlfboxorogcafgkokjeg.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJI... ⸻ ✅ Zielgruppe KI-Interessierte Power-User, Freelancer, Content-Teams oder Entwickler, die skalierbare Prompt-Systeme, personalisierte KI-Experimente und Automationen über ein zentrales Interface steuern wollen. ⸻ „Don’t Travel. Explore.“ – Nur diesmal in deinem Workflow. Mach deine KI-Systeme benutzbar. Ohne Umwege. ⸻ 📦 Möchtest du dieses Prompt direkt als Lovable-ready JSON, oder soll ich dir ein deploybares Next.js Starter-Template mit Supabase + Auth + UI liefern?
2
  now make it in german and with buttons that trigger a webhook
3
- nicht über pflanzen sondern über KI workflows.
 
 
1
  Based on your background (AI Automation, n8n, Notion systems, Supabase), here’s an improved and translated version of your prompt, perfectly suited for tools like Lovable.dev, Vercel AI SDK, or any fullstack AI builder (Next.js, Astro, FlutterFlow, etc.). ⸻ 🧠 German Prompt – für eine WebApp mit Supabase, Google Auth und AI-Funktionalität ⸻ 🔧 Projektziel Erstelle eine moderne, performante WebApp mit Login über Google (via Supabase Auth). Nach dem Login soll der Nutzer Zugriff auf ein zentrales Dashboard erhalten, das verschiedene KI-Module bedient. Die Anwendung dient als zentrale Steuerzentrale für KI-Workflows (z. B. n8n), Prompts und Wissensdokumente – mit einem Fokus auf gute UX, klarer Struktur und erweiterbarer AI-Architektur. ⸻ 🛠 Funktionale Anforderungen 🔐 Authentifizierung • Google OAuth-Login via Supabase Auth • Nutzerverwaltung & Session-Handling via Supabase • Redirect nach Login zu /dashboard • Wenn bereits eingeloggt → automatische Weiterleitung 📊 Dashboard Nach dem Login soll ein übersichtliches Dashboard erscheinen mit folgenden Komponenten: 1. ✅ Agenten-Buttons • Button-Karten für verschiedene Automationen (z. B. „Social Caption generieren“, „Bild erstellen“, „Daten analysieren“) • Jeder Button triggert einen vordefinierten Webhook (n8n) 2. 🧠 Prompt-Galerie • Datenbankähnliches UI wie Notion (Cards, Tabellen oder Listen) • Prompts sind kategorisiert (z. B. Rolle, Ziel, Stil, Tonfall) • Einzelansicht mit Bearbeitungsmöglichkeit + „Prompt testen“-Button • Verknüpfung zu Systemen wie OpenAI oder Gemini 3. 📚 Knowledge-Base • Markdown-kompatibles Dokumentenarchiv • Kategorien und Tags • Suche und Volltextfilter • Optional: semantische KI-Suche mit Vektor-Datenbank 4. 🤖 AI-Chatbot • Wählbare AI-Engines: OpenAI, Gemini, DeepSeek, OpenRouter • Konfiguration über API-Key (Nutzer kann Key eingeben oder hinterlegen) • Chatverlauf speichern • Unterstützung für Text, JSON, Bilder (z. B. Markdown oder DALL·E-Vorschau) ⸻ 🌙 UI / UX Anforderungen • Dunkel-/Hellmodus-Schalter • Responsive Design (Desktop & Tablet) • Modernes Design mit Tailwind, Framer Motion oder ShadCN • Klar strukturierte Navigation: Sidebar + Main Panel • Fokus auf reduzierte Klickpfade und kontextbewusstes Arbeiten ⸻ 🧩 Technologie-Stack • Frontend: Next.js (App Router), Tailwind CSS, shadcn/ui • Backend/Auth: Supabase (Auth + DB) • AI APIs (optional via toggle): • OpenAI • Google Gemini • DeepSeek • OpenRouter • Webhook-Unterstützung: Trigger-Buttons → n8n Flows • Prompt- und Output-Management: Datenbankbasiert (Supabase Tables) ⸻ 🔐 Beispiel für .env Konfiguration NEXT_PUBLIC_SUPABASE_URL=https://xlfboxorogcafgkokjeg.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJI... ⸻ ✅ Zielgruppe KI-Interessierte Power-User, Freelancer, Content-Teams oder Entwickler, die skalierbare Prompt-Systeme, personalisierte KI-Experimente und Automationen über ein zentrales Interface steuern wollen. ⸻ „Don’t Travel. Explore.“ – Nur diesmal in deinem Workflow. Mach deine KI-Systeme benutzbar. Ohne Umwege. ⸻ 📦 Möchtest du dieses Prompt direkt als Lovable-ready JSON, oder soll ich dir ein deploybares Next.js Starter-Template mit Supabase + Auth + UI liefern?
2
  now make it in german and with buttons that trigger a webhook
3
+ nicht über pflanzen sondern über KI workflows.
4
+ wenn ich auf einstellungen klicke, öffnet sich floating popup wo man den Webhook URL, die Webhook Methode und Name sowie Beschreibung anpassen kann. ergänze einen Add Workflow button,welcher dann eine neue Karte anlegt