Hugging Face's logo

Spaces:
theaimoron
/
flowforge-an-n8n-tool-for-those-trying-to-learn-automation
Running

App Files Community
theaimoron commited on
Commit
309ebd5
·
verified ·
1 Parent(s): 9b97a2b

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1427 -19
  3. prompts.txt +6 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Flowforge An N8n Tool For Those Trying To Learn Automation
3
- emoji: 👁
4
- colorFrom: pink
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: flowforge-an-n8n-tool-for-those-trying-to-learn-automation
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1427 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>FlowForge - No-Code Automation</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .node {
11
+ position: absolute;
12
+ width: 200px;
13
+ background: white;
14
+ border-radius: 8px;
15
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
16
+ cursor: move;
17
+ overflow: hidden;
18
+ transition: all 0.2s ease;
19
+ z-index: 10;
20
+ }
21
+ .node:hover {
22
+ box-shadow: 0 4px 15px rgba(0,0,0,0.15);
23
+ }
24
+ .node-header {
25
+ padding: 8px 12px;
26
+ font-weight: 600;
27
+ border-bottom: 1px solid #eee;
28
+ display: flex;
29
+ justify-content: space-between;
30
+ align-items: center;
31
+ }
32
+ .node-body {
33
+ padding: 12px;
34
+ }
35
+ .node-port {
36
+ width: 12px;
37
+ height: 12px;
38
+ border-radius: 50%;
39
+ background: #555;
40
+ position: absolute;
41
+ cursor: pointer;
42
+ top: 50%;
43
+ transform: translateY(-50%);
44
+ }
45
+ .node-input {
46
+ left: -6px;
47
+ }
48
+ .node-output {
49
+ right: -6px;
50
+ }
51
+ .connection {
52
+ position: absolute;
53
+ pointer-events: none;
54
+ z-index: 5;
55
+ }
56
+ .workflow-area {
57
+ position: relative;
58
+ width: 100%;
59
+ height: calc(100vh - 60px);
60
+ background-color: #f8f9fa;
61
+ background-image:
62
+ linear-gradient(#e5e7eb 1px, transparent 1px),
63
+ linear-gradient(90deg, #e5e7eb 1px, transparent 1px);
64
+ background-size: 20px 20px;
65
+ overflow: hidden;
66
+ }
67
+ .node-option {
68
+ padding: 8px 12px;
69
+ border-radius: 4px;
70
+ margin-bottom: 4px;
71
+ cursor: pointer;
72
+ }
73
+ .node-option:hover {
74
+ background: #f0f4f8;
75
+ }
76
+ .node-selected {
77
+ box-shadow: 0 0 0 2px #3b82f6;
78
+ }
79
+ .connection-path {
80
+ stroke: #888;
81
+ stroke-width: 2;
82
+ fill: none;
83
+ }
84
+ .sidebar {
85
+ transition: all 0.3s ease;
86
+ }
87
+ .node-config {
88
+ background: white;
89
+ border-radius: 8px;
90
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
91
+ }
92
+ .page {
93
+ display: none;
94
+ height: 100%;
95
+ }
96
+ .page.active {
97
+ display: block;
98
+ }
99
+ .nav-link {
100
+ position: relative;
101
+ }
102
+ .nav-link.active:after {
103
+ content: '';
104
+ position: absolute;
105
+ bottom: -12px;
106
+ left: 0;
107
+ width: 100%;
108
+ height: 2px;
109
+ background: #3b82f6;
110
+ }
111
+ .tutorial-step {
112
+ display: none;
113
+ }
114
+ .tutorial-step.active {
115
+ display: block;
116
+ }
117
+ .tutorial-highlight {
118
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
119
+ transition: all 0.3s ease;
120
+ }
121
+ .drag-preview {
122
+ position: absolute;
123
+ pointer-events: none;
124
+ z-index: 1000;
125
+ opacity: 0.7;
126
+ }
127
+ .template-card:hover {
128
+ transform: translateY(-2px);
129
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
130
+ }
131
+ .execution-log {
132
+ font-family: monospace;
133
+ white-space: pre-wrap;
134
+ background-color: #1e293b;
135
+ color: #f8fafc;
136
+ padding: 1rem;
137
+ border-radius: 0.5rem;
138
+ max-height: 300px;
139
+ overflow-y: auto;
140
+ }
141
+ .modal {
142
+ display: none;
143
+ position: fixed;
144
+ top: 0;
145
+ left: 0;
146
+ width: 100%;
147
+ height: 100%;
148
+ background-color: rgba(0,0,0,0.5);
149
+ z-index: 100;
150
+ justify-content: center;
151
+ align-items: center;
152
+ }
153
+ .modal.active {
154
+ display: flex;
155
+ }
156
+ .modal-content {
157
+ background: white;
158
+ border-radius: 8px;
159
+ box-shadow: 0 2px 10px rgba(0,0,0,0.2);
160
+ max-width: 800px;
161
+ width: 90%;
162
+ max-height: 90vh;
163
+ overflow-y: auto;
164
+ }
165
+ .notification {
166
+ position: fixed;
167
+ bottom: 20px;
168
+ right: 20px;
169
+ padding: 12px 20px;
170
+ border-radius: 8px;
171
+ color: white;
172
+ display: flex;
173
+ align-items: center;
174
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
175
+ z-index: 1000;
176
+ opacity: 0;
177
+ transition: opacity 0.3s ease;
178
+ }
179
+ .notification.show {
180
+ opacity: 1;
181
+ }
182
+ .notification.success {
183
+ background-color: #10b981;
184
+ }
185
+ .notification.error {
186
+ background-color: #ef4444;
187
+ }
188
+ </style>
189
+ </head>
190
+ <body class="bg-gray-100 h-screen flex flex-col">
191
+ <!-- Header -->
192
+ <header class="bg-white shadow-sm py-3 px-6 flex items-center justify-between">
193
+ <div class="flex items-center space-x-4">
194
+ <div class="text-indigo-600 font-bold text-xl flex items-center">
195
+ <i class="fas fa-project-diagram mr-2"></i>
196
+ <span>FlowForge</span>
197
+ </div>
198
+ <nav class="hidden md:flex space-x-6">
199
+ <a href="#" class="nav-link text-indigo-600 font-medium active" data-page="workflows">Workflows</a>
200
+ <a href="#" class="nav-link text-gray-600 hover:text-indigo-600" data-page="templates">Templates</a>
201
+ <a href="#" class="nav-link text-gray-600 hover:text-indigo-600" data-page="executions">Executions</a>
202
+ <a href="#" class="nav-link text-gray-600 hover:text-indigo-600" data-page="integrations">Integrations</a>
203
+ </nav>
204
+ </div>
205
+ <div class="flex items-center space-x-4">
206
+ <button class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 flex items-center" id="execute-btn">
207
+ <i class="fas fa-play mr-2"></i>
208
+ <span>Run Workflow</span>
209
+ </button>
210
+ <button class="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 flex items-center" id="tutorial-btn">
211
+ <i class="fas fa-graduation-cap mr-2"></i>
212
+ <span>Quick Start</span>
213
+ </button>
214
+ <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center cursor-pointer" id="user-profile-btn">
215
+ <i class="fas fa-user text-gray-600"></i>
216
+ </div>
217
+ </div>
218
+ </header>
219
+
220
+ <!-- Main Content -->
221
+ <div class="flex flex-1 overflow-hidden">
222
+ <!-- Left Sidebar - Nodes Palette -->
223
+ <div class="sidebar w-64 bg-white border-r border-gray-200 flex flex-col" id="nodes-palette">
224
+ <div class="p-4 border-b border-gray-200">
225
+ <h2 class="font-semibold text-lg">Building Blocks</h2>
226
+ <div class="mt-2 relative">
227
+ <input type="text" placeholder="Search blocks..." class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
228
+ <i class="fas fa-search absolute right-3 top-2.5 text-gray-400"></i>
229
+ </div>
230
+ </div>
231
+ <div class="flex-1 overflow-y-auto p-2">
232
+ <div class="mb-4">
233
+ <h3 class="text-sm font-medium text-gray-500 mb-2 px-2">TRIGGERS</h3>
234
+ <div class="node-option" data-type="trigger" data-name="Manual">
235
+ <i class="fas fa-hand-pointer mr-2 text-indigo-500"></i>
236
+ <span>Manual Trigger</span>
237
+ </div>
238
+ <div class="node-option" data-type="trigger" data-name="Schedule">
239
+ <i class="fas fa-clock mr-2 text-indigo-500"></i>
240
+ <span>Scheduled</span>
241
+ </div>
242
+ <div class="node-option" data-type="trigger" data-name="Webhook">
243
+ <i class="fas fa-link mr-2 text-indigo-500"></i>
244
+ <span>Webhook</span>
245
+ </div>
246
+ <div class="node-option" data-type="trigger" data-name="Email">
247
+ <i class="fas fa-envelope mr-2 text-indigo-500"></i>
248
+ <span>New Email</span>
249
+ </div>
250
+ </div>
251
+ <div class="mb-4">
252
+ <h3 class="text-sm font-medium text-gray-500 mb-2 px-2">ACTIONS</h3>
253
+ <div class="node-option" data-type="action" data-name="HTTP Request">
254
+ <i class="fas fa-globe mr-2 text-green-500"></i>
255
+ <span>HTTP Request</span>
256
+ </div>
257
+ <div class="node-option" data-type="action" data-name="Database">
258
+ <i class="fas fa-database mr-2 text-green-500"></i>
259
+ <span>Database Query</span>
260
+ </div>
261
+ <div class="node-option" data-type="action" data-name="Email">
262
+ <i class="fas fa-paper-plane mr-2 text-green-500"></i>
263
+ <span>Send Email</span>
264
+ </div>
265
+ <div class="node-option" data-type="action" data-name="Slack">
266
+ <i class="fab fa-slack mr-2 text-green-500"></i>
267
+ <span>Slack Message</span>
268
+ </div>
269
+ </div>
270
+ <div class="mb-4">
271
+ <h3 class="text-sm font-medium text-gray-500 mb-2 px-2">DATA TRANSFORM</h3>
272
+ <div class="node-option" data-type="transform" data-name="Set">
273
+ <i class="fas fa-pen mr-2 text-purple-500"></i>
274
+ <span>Set Variable</span>
275
+ </div>
276
+ <div class="node-option" data-type="transform" data-name="Merge">
277
+ <i class="fas fa-object-group mr-2 text-purple-500"></i>
278
+ <span>Merge Data</span>
279
+ </div>
280
+ <div class="node-option" data-type="transform" data-name="Filter">
281
+ <i class="fas fa-filter mr-2 text-purple-500"></i>
282
+ <span>Filter Data</span>
283
+ </div>
284
+ <div class="node-option" data-type="transform" data-name="Format">
285
+ <i class="fas fa-align-left mr-2 text-purple-500"></i>
286
+ <span>Format Text</span>
287
+ </div>
288
+ </div>
289
+ <div class="mb-4">
290
+ <h3 class="text-sm font-medium text-gray-500 mb-2 px-2">LOGIC</h3>
291
+ <div class="node-option" data-type="logic" data-name="Condition">
292
+ <i class="fas fa-code-branch mr-2 text-yellow-500"></i>
293
+ <span>Condition</span>
294
+ </div>
295
+ <div class="node-option" data-type="logic" data-name="Delay">
296
+ <i class="fas fa-hourglass-half mr-2 text-yellow-500"></i>
297
+ <span>Delay</span>
298
+ </div>
299
+ <div class="node-option" data-type="logic" data-name="Loop">
300
+ <i class="fas fa-redo mr-极 text-yellow-500"></i>
301
+ <span>Loop</span>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+
307
+ <!-- Pages -->
308
+ <div class="flex-1 relative overflow-hidden">
309
+ <!-- Workflows Page -->
310
+ <div id="workflows-page" class="page h-full active">
311
+ <div class="absolute top-0 left-0 right-0 bg-white border-b border-gray-200 p-2 flex items-center justify-between z-10">
312
+ <div class="flex items-center space-x-2">
313
+ <button class="p-2 rounded hover:bg-gray-100" id="new-workflow-btn">
314
+ <i class="fas fa-plus"></i>
315
+ </button>
316
+ <button class="p-2 rounded hover:bg-gray-100" id="save-workflow-btn">
317
+ 极<i class="fas fa-save"></i>
318
+ </button>
319
+ <button class="p-2 rounded hover:bg-gray-100" id="delete-workflow-btn">
320
+ <i class="fas fa-trash"></i>
321
+ </button>
322
+ <div class="text-sm font-medium ml-2">Current Workflow: <span id="current-workflow-name">My First Workflow</span></div>
323
+ </div>
324
+ <div class="flex items-center space-x-2">
325
+ <button class="p-2 rounded hover:bg-gray-100" id="zoom-in-btn">
326
+ <i class="fas fa-search-plus"></i>
327
+ </button>
328
+ <button class="p-2 rounded hover:bg-gray-100" id="zoom-out-btn">
329
+ <i class="fas fa-search-minus"></i>
330
+ </button>
331
+ <button class="p-2 rounded hover:bg-gray-100" id="zoom-reset-btn">
332
+ <i class="fas fa-expand"></i>
333
+ </button>
334
+ <div class="text-sm text-gray-500" id="zoom-level">
335
+ Zoom: 100%
336
+ </div>
337
+ </div>
338
+ </div>
339
+ <div class="workflow-area" id="workflow-area">
340
+ <!-- Nodes will be added here dynamically -->
341
+ </div>
342
+ </div>
343
+
344
+ <!-- Templates Page -->
345
+ <div id="templates-page" class="page h-full p-6 overflow-y-auto">
346
+ <div class="bg-white rounded-lg shadow-sm p-6">
347
+ <div class="flex justify-between items-center mb-6">
348
+ <h2 class="text-xl font-semibold">Workflow Templates</h2>
349
+ <div class="flex space-x-2">
350
+ <div class="relative">
351
+ <input type="text" placeholder="Search templates..." class="w-64 px-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
352
+ <i class="fas fa-search absolute right-3 top-2.5 text-gray-400"></i>
353
+ </div>
354
+ <select class="px-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
355
+ <option>All Categories</option>
356
+ <option>Data Processing</option>
357
+ <option>Notifications</option>
358
+ <option>API Integrations</option>
359
+ <option>Database</option>
360
+ </select>
361
+ </div>
362
+ </div>
363
+
364
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
365
+ <div class="template-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm transition-all duration-200 cursor-pointer">
366
+ <div class="p-4">
367
+ <div class="flex items-center mb-3">
368
+ <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
369
+ <i class="fas fa-envelope text-indigo-600"></i>
370
+ </div>
371
+ <h3 class="font-medium">Email Digest</h3>
372
+ </div>
373
+ <p class="text-sm text-gray-600 mb-4">Collect data from multiple sources and send a daily summary email</p>
374
+ <div class="flex justify-between items-center">
375
+ <span class="text-xs text-gray-500">Last used: 2 days ago</span>
376
+ <button class="text-xs bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full hover:bg-indigo-200">
377
+ Use Template
378
+ </button>
379
+ </div>
380
+ </div>
381
+ </div>
382
+
383
+ <div class="template-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm transition-all duration-200 cursor-pointer">
384
+ <div class="p-4">
385
+ <div class="flex items-center mb-3">
386
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
387
+ <i class="fas fa-database text-green-600"></i>
388
+ </div>
389
+ <h3 class="font-medium">Database Backup</h3>
390
+ </div>
391
+ <p class="text-sm text-gray-600 mb-4">Automatically backup your database to cloud storage on a schedule</p>
392
+ <div class="flex justify-between items-center">
393
+ <span class="text-xs text-gray-500">Last used: 1 week ago</span>
394
+ <button class="text-xs bg-green-100 text-green-700 px-3 py-1 rounded-full hover:bg-green-200">
395
+ Use Template
396
+ </button>
397
+ </div>
398
+ </div>
399
+ </div>
400
+
401
+ <div class="template-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm transition-all duration-200 cursor-pointer">
402
+ <div class="p-4">
403
+ <div class="flex items-center mb-3">
404
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
405
+ <i class="fab fa-slack text-blue-600"></i>
406
+ </div>
407
+ <h3 class="font-medium">Slack Notifier</h3>
408
+ </div>
409
+ <p class="text-sm text-gray-600 mb-4">Send notifications to Slack when specific events occur</p>
410
+ <div class="flex justify-between items-center">
411
+ <span class="text-xs text-gray-500">Last used: 3 days ago</span>
412
+ <button class="text-xs bg-blue-100 text-blue-700 px-3 py-1 rounded-full hover:bg-blue-200">
413
+ Use Template
414
+ </button>
415
+ </div>
416
+ </div>
417
+ </div>
418
+
419
+ <div class="template-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm transition-all duration-200 cursor-pointer">
420
+ <div class="p-4">
421
+ <div class="flex items-center mb-3">
422
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
423
+ <i class="fas fa-sync-alt text-purple-600"></i>
424
+ </div>
425
+ <h3 class="font-medium">Data Sync</h3>
426
+ </div>
427
+ <p class="text-sm text-gray-600 mb-4">Sync data between two different systems or APIs</p>
428
+ <div class="flex justify-between items-center">
429
+ <span class="text-xs text-gray-500">Last used: 5 days ago</span>
430
+ <button class="text-xs bg-purple-100 text-purple-700 px-3 py-1 rounded-full hover:bg-purple-200">
431
+ Use Template
432
+ </button>
433
+ </div>
434
+ </div>
435
+ </div>
436
+
437
+ <div class="template-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm transition-all duration-200 cursor-pointer">
438
+ <div class="p-4">
439
+ <div class="flex items-center mb-3">
440
+ <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center mr-3">
441
+ <i class="fas fa-file-export text-yellow-600"></i>
442
+ </div>
443
+ <h3 class="font-medium">CSV Exporter</h3>
444
+ </div>
445
+ <p class="text-sm text-gray-600 mb-4">Query data and export to CSV file on a schedule</极>
446
+ <div class="flex justify-between items-center">
447
+ <span class="text-xs text-gray-500">Last used: 1 day ago</span>
448
+ <button class="text-xs bg-yellow-100 text-yellow-700 px-3 py-1 rounded-full hover:bg-yellow-200">
449
+ Use Template
450
+ </button>
451
+ </div>
452
+ </div>
453
+ </div>
454
+
455
+ <div class="template-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm transition-all duration-200 cursor-pointer">
456
+ <极 class="p-4">
457
+ <div class="flex items-center mb-3">
458
+ <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
459
+ <i class="fas fa-bell text-red-600"></i>
460
+ </div>
461
+ <h3 class="font-medium">Alert System</h3>
462
+ </div>
463
+ <p class="text-sm text-gray-600 mb-4">Monitor systems and send alerts via email/SMS when thresholds are exceeded</p>
464
+ <div class="flex justify-between items-center">
465
+ <span class="text-xs text-gray-500">Last used: 2 weeks ago</span>
466
+ <button class="text-xs bg-red-100 text-red-700 px-3 py-1 rounded-full hover:bg-red-200">
467
+ Use Template
468
+ </button>
469
+ </div>
470
+ </div>
471
+ </div>
472
+ </div>
473
+ </div>
474
+ </div>
475
+
476
+ <!-- Executions Page -->
477
+ <div id="executions-page" class="page h-full p-6 overflow-y-auto">
478
+ <div class="bg-white rounded-lg shadow-sm p-6">
479
+ <div class="flex justify-between items-center mb-6">
480
+ <h2 class="text-xl font-semibold">Workflow Executions</h2>
481
+ <div class="flex space-x-2">
482
+ <div class="relative">
483
+ <input type="text" placeholder="Search executions..." class="w-64 px-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
484
+ <i class="fas fa-search absolute right-3 top-2.5 text-gray-400"></i>
485
+ </div>
486
+ <select class="px-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
487
+ <option>All Workflows</option>
488
+ <option>Email Digest</option>
489
+ <option>Database Backup</option>
490
+ <option>Slack Notifier</option>
491
+ </select>
492
+ <select class="px-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
493
+ <option>All Statuses</option>
494
+ <option>Success</option>
495
+ <option>Error</option>
496
+ <option>Running</option>
497
+ </select>
498
+ </div>
499
+ </div>
500
+
501
+ <div class="overflow-x-auto">
502
+ <table class="min-w-full divide-y divide-gray-200">
503
+ <thead class="bg-gray-50">
504
+ <tr>
505
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
506
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Workflow</th>
507
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
508
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Start Time</th>
509
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th>
510
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
511
+ </tr>
512
+ </thead>
513
+ <tbody class="bg-white divide极 divide-gray-200">
514
+ <tr class="hover:bg-gray-50">
515
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-500">#23567</td>
516
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Email Digest</td>
517
+ <td class="px-6 py-4 whitespace-nowrap">
518
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
519
+ Success
520
+ </span>
521
+ </td>
522
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15 14:30:22</td>
523
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.2s</td>
524
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
525
+ <button class="text-indigo-600 hover:text-indigo-800 mr-3 view-execution-btn" data-id="23567">
526
+ <i class="fas fa-eye"></i>
527
+ </button>
528
+ <button class="text-indigo-600 hover:text-indigo-800 rerun-execution-btn" data-id="23567">
529
+ <i class="fas fa-redo"></i>
530
+ </button>
531
+ </td>
532
+ </tr>
533
+ <tr class="hover:bg-gray-50">
534
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-500">#23566</td>
535
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Database Backup</td>
536
+ <td class="px-6 py-4 whitespace-nowrap">
537
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
538
+ Success
539
+ </span>
540
+ </td>
541
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-极-15 04:30:00</td>
542
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">45.7s</td>
543
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
544
+ <button class="text-indigo-600 hover:text-indigo-800 mr-3 view-execution-btn" data-id="23566">
545
+ <i class="fas fa-eye"></i>
546
+ </button>
547
+ <button class="text-indigo-600 hover:text-indigo-800 rerun-execution-btn" data-id="23566">
548
+ <i class="fas fa-redo"></i>
549
+ </button>
550
+ </td>
551
+ </tr>
552
+ <tr class="hover:bg-gray-50">
553
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-500">#23565</td>
554
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Slack Notifier</td>
555
+ <td class="px-6 py-4 whitespace-nowrap">
556
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
557
+ Error
558
+ </span>
559
+ </td>
560
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-14 22:15:33</td>
561
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0.4s</td>
562
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
563
+ <button class="text-indigo-600 hover:text-indigo-800 mr-3 view-execution-btn" data-id="23565">
564
+ <i class="fas fa-eye"></i>
565
+ </button>
566
+ <button class="text-indigo-600 hover:text-indigo-800 rerun-execution-btn" data-id="23565">
567
+ <i class="fas fa-redo"></i>
568
+ </button>
569
+ </td>
570
+ </tr>
571
+ <tr class="hover:bg-gray-50">
572
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-500">#23564</td>
573
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Email Digest</td>
574
+ <td class="px-6 py-4 whitespace-nowrap">
575
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
576
+ Success
577
+ </span>
578
+ </td>
579
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-14 14:30:22</td>
580
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.1s</td>
581
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
582
+ <button class="text-indigo-600 hover:text-indigo-800 mr-3 view-execution-btn" data-id="23564">
583
+ <i class="fas fa-eye"></i>
584
+ </button>
585
+ <button class="text-indigo-600 hover:text-indigo-800 rerun-execution-btn" data-id="23564">
586
+ <i class="fas fa-redo"></i>
587
+ </button>
588
+ </td>
589
+ </tr>
590
+ <tr class="hover:bg-gray-50">
591
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-500">#23563</td>
592
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Data Sync</td>
593
+ <td class="px-6 py-4 whitespace-nowrap">
594
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
595
+ Running
596
+ </span>
597
+ </td>
598
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-14 12:45:18</td>
599
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2m 37s</td>
600
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
601
+ <button class="text-indigo-600 hover:text-indigo-800 mr-3 view-execution-btn" data-id="23563">
602
+ <i class="fas fa-eye"></i>
603
+ </button>
604
+ <button class="text-indigo-600 hover:text-indigo-800 rerun-execution-btn" data-id="23563">
605
+ <i class="fas fa-redo"></i>
606
+ </button>
607
+ </td>
608
+ </tr>
609
+ </tbody>
610
+ </table>
611
+ </div>
612
+ </div>
613
+ </div>
614
+
615
+ <!-- Integrations Page -->
616
+ <div id="integrations-page" class="page h-full p-6 overflow-y-auto">
617
+ <div class="bg-white rounded-lg shadow-sm p-6">
618
+ <div class="flex justify-between items-center mb-6">
619
+ <h2 class="text-xl font-semibold">Connected Integrations</h2>
620
+ <button class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 flex items-center" id="new-integration-btn">
621
+ <i class="fas fa-plus mr-2"></i>
622
+ <span>Add Integration</span>
623
+ </button>
624
+ </div>
625
+
626
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
627
+ <div class="bg-white border border-gray-200 rounded-lg p-4">
628
+ <div class="flex items-center mb-3">
629
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-3">
630
+ <i class="fab fa-slack text-blue-600 text-xl"></i>
631
+ </div>
632
+ <div>
633
+ <h3 class="font-medium">Slack</h3>
634
+ <p class="text-sm text-gray-500">Connected to workspace</p>
635
+ </div>
636
+ </div>
637
+ <div class="flex justify-between items-center mt-4">
638
+ <span class="text-xs text-gray-500">Last used: 2 hours ago</span>
639
+ <button class="text-xs bg-gray-100 text-gray-700 px-3 py-1 rounded-full hover:bg-gray-200">
640
+ Configure
641
+ </button>
642
+ </div>
643
+ </div>
644
+
645
+ <div class="bg-white border border-gray-200 rounded-lg p-4">
646
+ <div class="flex items-center mb-3">
647
+ <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-3">
648
+ <i class="fas fa-envelope text-green-600 text-xl"></i>
649
+ </div>
650
+ <div>
651
+ <h3 class="font-medium">Email (SMTP)</h3>
652
+ <p class="text-sm text-gray-500">Connected to Gmail</p>
653
+ </div>
654
+ </div>
655
+ <div class="flex justify-between items-center mt-4">
656
+ <span class="text-xs text-gray-500">Last used: 1 day ago</span>
657
+ <button class="text-xs bg-gray-100 text-gray-700 px-3 py-1 rounded-full hover:bg-gray-200">
658
+ Configure
659
+ </button>
660
+ </div>
661
+ </div>
662
+
663
+ <div class="bg-white border border-gray-200 rounded-lg p-4">
664
+ <div class="flex items-center mb-3">
665
+ <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mr-3">
666
+ <i class="fab fa-google-drive text-red-600 text-xl"></i>
667
+ </div>
668
+ <div>
669
+ <h3 class="font-medium">Google Drive</h3>
670
+ <p class="text-sm text-gray-500">Connected to account</p>
671
+ </div>
672
+ </div>
673
+ <div class="flex justify-between items-center mt-4">
674
+ <span class="text-xs text-gray-500">Last used: 3 days ago</span>
675
+ <button class="text-xs bg-gray-100 text-gray-700 px-3 py-1 rounded-full hover:bg-gray-200">
676
+ Configure
677
+ </button>
678
+ </div>
679
+ </div>
680
+
681
+ <div class="bg-white border border-gray-200 rounded-lg p-4">
682
+ <div class="flex items-center mb-3">
683
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-3">
684
+ <i class="fas fa-database text-purple-600 text-xl"></i>
685
+ </div>
686
+ <div>
687
+ <h3 class="font-medium">MySQL</h3>
688
+ <p class="text-sm text-gray-500">Connected to production</p>
689
+ </div>
690
+ </div>
691
+ <div class="flex justify-between items-center mt-4">
692
+ <span class="text-xs text-gray-500">Last used: 5 hours ago</span>
693
+ <button class="text-xs bg-gray-100 text-gray-700 px-3 py-1 rounded-full hover:bg-gray-200">
694
+ Configure
695
+ </button>
696
+ </div>
697
+ </div>
698
+
699
+ <div class="bg-white border border-gray-200 rounded-lg p-4">
700
+ <div class="flex items-center mb-3">
701
+ <div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center mr-3">
702
+ <i class="fas fa-server text-yellow-600 text-xl"></i>
703
+ </div>
704
+ <div>
705
+ <h3 class="font-medium">REST API</h3>
706
+ <p class="text-sm text-gray-500">3 endpoints configured</p>
707
+ </div>
708
+ </div>
709
+ <div class="flex justify-between items-center mt-4">
710
+ <span class="text-xs text-gray-500">Last used: 2 days ago</span>
711
+ <button class="text-xs bg-gray-100 text-gray-700 px-3 py-1 rounded-full hover:bg-gray-200">
712
+ Configure
713
+ </button>
714
+ </div>
715
+ </div>
716
+
717
+ <div class="bg-white border border-gray-200 rounded-lg p-4">
718
+ <div class="flex items-center mb-3">
719
+ <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
720
+ <i class="fas fa-plus text-indigo-600 text-xl"></i>
721
+ </div>
722
+ <div>
723
+ <h3 class="font-medium">Add New</h3>
724
+ <p class="text-sm text-gray-500">Connect another service</p>
725
+ </div>
726
+ </div>
727
+ <div class="flex justify-between items-center mt-4">
728
+ <span class="text-xs text-gray-500">100+ available</span>
729
+ <button class="text-xs bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full hover:bg-indigo-200">
730
+ Browse
731
+ </button>
732
+ </div>
733
+ </div>
734
+ </div>
735
+ </div>
736
+ </div>
737
+ </div>
738
+
739
+ <!-- Right Sidebar - Node Configuration -->
740
+ <div class="sidebar w-96 bg-white border-l border-gray-200 flex flex-col" id="node-config-sidebar">
741
+ <div class="p-4 border-b border-gray-200">
742
+ <h2 class="font-semibold text-lg">Node Configuration</h2>
743
+ </div>
744
+ <div class="flex-1 overflow-y-auto p-4">
745
+ <div id="node-config" class="node-config p-4">
746
+ <div class="text-center text-gray-500 py-8">
747
+ <i class="fas fa-mouse-pointer text-3xl mb-2"></i>
748
+ <p>Select a node to configure it</p>
749
+ </div>
750
+ </div>
751
+ </div>
752
+ <div class="p-4 border-t border-gray-200">
753
+ <button class="w-full bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700" id="save-node-config">
754
+ Save Changes
755
+ </button>
756
+ </div>
757
+ </div>
758
+ </div>
759
+
760
+ <!-- Tutorial Modal -->
761
+ <div id="tutorial-modal" class="modal">
762
+ <div class="modal-content">
763
+ <div class="p-6">
764
+ <div class="flex justify-between items-center mb-4">
765
+ <h3 class="text-lg font-semibold">FlowForge Quick Start</h3>
766
+ <button id="close-tutorial-modal" class="text-gray-400 hover:text-gray-500">
767
+ <i class="fas fa-times"></i>
768
+ </button>
769
+ </div>
770
+
771
+ <div class="space-y-6">
772
+ <!-- Step 1 -->
773
+ <div class="tutorial-step active" data-step="1">
774
+ <h4 class="font-medium text-lg mb-2">Welcome to FlowForge!</h4>
775
+ <p class="text-gray-600 mb-4">This quick guide will help you create your first automation workflow in just a few minutes.</p>
776
+ <div class极="bg-indigo-50 border-l-4 border-indigo-400 p-4 mb-4">
777
+ <div class="flex">
778
+ <div class="flex-shrink-0">
779
+ <i class="fas fa-info-circle text-indigo-400"></i>
780
+ </div>
781
+ <div class="ml-3">
782
+ <p class="text-sm text-indigo-700">
783
+ FlowForge lets you connect apps and automate tasks without writing any code.
784
+ </p>
785
+ </div>
786
+ </div>
787
+ </div>
788
+ <div class="flex justify-between mt-6">
789
+ <button class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:极bg-gray-50" disabled>
790
+ Previous
791
+ </button>
792
+ <button class="next-step-btn bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 text-sm font-medium" data-next="2">
793
+ Next: Create a Workflow
794
+ </button>
795
+ </div>
796
+ </div>
797
+
798
+ <!-- Step 2 -->
799
+ <div class="tutorial-step" data-step="2">
800
+ <h4 class="font-medium text-lg mb-2">1. Create a New Workflow</h4>
801
+ <p class="text-gray-600 mb-4">Workflows are sequences of automated steps that perform tasks for you.</p>
802
+ <div class="bg-indigo-50 border-l-4 border-indigo-400 p-4 mb-4">
803
+ <div class="flex">
804
+ <div class="flex-shrink-0">
805
+ <i class="fas fa-lightbulb text-indigo-400"></i>
806
+ </div>
807
+ <div class="ml-3">
808
+ <p class="text-sm text-indigo-700">
809
+ Click the <span class="font-medium">+</span> button in the top left to create a new workflow.
810
+ </p>
811
+ </div>
812
+ </div>
813
+ </div>
814
+ <div class="flex justify-between mt-6">
815
+ <button class="prev-step-btn px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50" data-prev="1">
816
+ Previous
817
+ </button>
818
+ <button class="next-step-btn bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 text-sm font-medium" data-next="3">
819
+ Next: Add a Trigger
820
+ </button>
821
+ </div>
822
+ </div>
823
+
824
+ <!-- Step 3 -->
825
+ <div class="tutorial-step" data-step="3">
826
+ <h4 class="font-medium text-lg mb-2">2. Add a Trigger</h4>
827
+ <p class="text-gray-600 mb-4">Every workflow starts with a trigger - an event that starts the automation.</p>
828
+ <div class="bg-indigo-50 border-l-4 border-indigo-400 p-4 mb-4">
829
+ <div class="flex">
830
+ <div class="flex-shrink-0">
831
+ <i class="fas fa-hand-pointer text-indigo-400"></i>
832
+ </div>
833
+ <div class="ml-3">
834
+ <p class="text-sm text-indigo-700">
835
+ From the left sidebar under <span class="font-medium">Triggers</span>, drag a <span class="font-medium">Manual Trigger</span> to the canvas.
836
+ </p>
837
+ </div>
838
+ </div>
839
+ </div>
840
+ <div class="flex justify-between mt-6">
841
+ <button class="prev-step-btn px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50" data-prev="2">
842
+ Previous
843
+ </button>
844
+ <button class="next-step-btn bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 text-sm font-medium" data-next="4">
845
+ Next: Add an Action
846
+ </button>
847
+ </div>
848
+ </div>
849
+
850
+ <!-- Step 4 -->
851
+ <div class="tutorial-step" data-step="4">
852
+ <h4 class="font-medium text-lg mb-2">3. Add an Action</h4>
853
+ <p class="text-gray-600 mb-4">Actions are the steps that perform tasks after the trigger activates.</p>
854
+ <div class="bg-indigo-50 border-l-4 border-indigo-400 p-4 mb-4">
855
+ <div class="flex">
856
+ <div class="flex-shrink-0">
857
+ <i class="fas fa-bolt text-indigo-400"></i>
858
+ </div>
859
+ <div class="ml-3">
860
+ <p class="text-sm text-indigo-700">
861
+ From the <span class="font-medium">Actions</span> section, drag an <span class="font-medium">HTTP Request</span> node to the canvas.
862
+ </p>
863
+ </div>
864
+ </div>
865
+ </div>
866
+ <div class="flex justify-between mt-6">
867
+ <button class="prev-step-btn px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50" data-prev="3">
868
+ Previous
869
+ </button>
870
+ <button class="next-step-btn bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 text-sm font-medium" data-next="5">
871
+ Next: Connect Nodes
872
+ </button>
873
+ </div>
874
+ </div>
875
+
876
+ <!-- Step 5 -->
877
+ <div class="tutorial-step" data-step="5">
878
+ <h4 class="font-medium text-lg mb-2">4. Connect the Nodes</h4>
879
+ <p class="text-gray-600 mb-4">Nodes need to be connected to define the flow of your automation.</p>
880
+ <div class="bg-indigo-50 border-l-4 border-indigo-400 p-极 mb-4">
881
+ <div class="flex">
882
+ <div class="flex-shrink-0">
883
+ <i class="fas fa-link text-indigo-400"></i>
884
+ </div>
885
+ <div class="ml-3">
886
+ <p class="text-sm text极indigo-700">
887
+ Click and drag from the <span class="font-medium">output port</span> (right side) of the Manual Trigger to the <span class="font-medium">input port</span> (left side) of the HTTP Request.
888
+ </p>
889
+ </div>
890
+ </div>
891
+ </div>
892
+ <div class="flex justify-between mt-6">
893
+ <button class="prev-step-btn px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50" data-prev="4">
894
+ Previous
895
+ </button>
896
+ <button class="next-step-btn bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 text-sm font-medium" data-next="6">
897
+ Next: Configure Nodes
898
+ </button>
899
+ </div>
900
+ </div>
901
+
902
+ <!-- Step 6 -->
903
+ <div class="tutorial-step" data-step="6">
904
+ <h4 class="font-medium text-lg mb-2">5. Configure Your Nodes</h4>
905
+ <p class="text-gray-600 mb-4">Each node has settings that define what it does.</p>
906
+ <div class="bg-indigo-50 border-l-4 border-indigo-400 p-4 mb-4">
907
+ <div class="flex">
908
+ <div class="flex-shrink-0">
909
+ <i class="fas fa-cog text-indigo-400"></i>
910
+ </div>
911
+ <div class="ml-3">
912
+ <p class="text-sm text-indigo-700">
913
+ Click on the <span class="font-medium">HTTP Request</span> node, then in the right sidebar enter a URL like <span class="font-mono">https://api.example.com/data</span>
914
+ </p>
915
+ </div>
916
+ </div>
917
+ </div>
918
+ <div class="flex justify-between mt-6">
919
+ <button class="prev-step-btn px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50" data-prev="5">
920
+ Previous
921
+ </button>
922
+ <button class="next-step-btn bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 text-sm font-medium" data-next="7">
923
+ Next: Run Your Workflow
924
+ </button>
925
+ </div>
926
+ </div>
927
+
928
+ <!-- Step 7 -->
929
+ <div class="tutorial-step" data-step="7">
930
+ <h4 class="font-medium text-lg mb-2">6. Run Your Workflow</h4>
931
+ <p class="text-gray-600 mb-4">Test your workflow to make sure it works as expected.</p>
932
+ <div class="bg-indigo-50 border-l-4 border-indigo-400 p-4 mb-4">
933
+ <div class="flex">
934
+ <div class="flex-shrink-0">
935
+ <i class="fas fa-play text-indigo-400"></i>
936
+ </div>
937
+ <div class="ml-3">
938
+ <p class="text-sm text-indigo-700">
939
+ Click the <span class="font-medium">Run Workflow</span> button in the top right to execute your workflow manually.
940
+ </p>
941
+ </div>
942
+ </div>
943
+ </div>
944
+ <div class="flex justify-between mt-6">
945
+ <button class="prev-step-btn px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50" data-prev="6">
946
+ Previous
947
+ </button>
948
+ <button class="next-step-btn bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 text-sm font-medium" data-next="8">
949
+ Next: Save Your Workflow
950
+ </button>
951
+ </div>
952
+ </div>
953
+
954
+ <!-- Step 8 -->
955
+ <div class="tutorial-step" data-step="8">
956
+ <h4 class="font-medium text-lg mb-2">7. Save Your Workflow</h4>
957
+ <p class="text-gray-600 mb-4">Always save your work to avoid losing your progress.</p>
958
+ <div class="bg-indigo-50 border-l-4 border-indigo-400 p-4 mb-4">
959
+ <div class="flex">
960
+ <div class="flex-shrink-0">
961
+ <i class="fas fa-save text-indigo-400"></i>
962
+ </div>
963
+ <div class="ml-3">
964
+ <p class="text-sm text-indigo-700">
965
+ Click the <span class="font-medium">Save</span> button in the top left or press <span class="font-mono">Ctrl+S</span> (Mac: <span class="font-mono">Cmd+S</span>).
966
+ </p>
967
+ </div>
968
+ </div>
969
+ </div>
970
+ <div class="flex justify-between mt-6">
971
+ <button class="prev-step-btn px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50" data-prev="7">
972
+ Previous
973
+ </button>
974
+ <button id="finish-tutorial" class="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 text-sm font-medium">
975
+ Finish Tutorial
976
+ </button>
977
+ </div>
978
+ </div>
979
+ </div>
980
+ </div>
981
+ </div>
982
+ </div>
983
+
984
+ <!-- Execution Results Modal -->
985
+ <div id="execution-modal" class="modal">
986
+ <div class="modal-content">
987
+ <div class="p-6">
988
+ <div class="flex justify-between items-center mb-4">
989
+ <h3 class="text-lg font-semibold">Execution Results - <span id="execution-id">#23567</span></h3>
990
+ <button id="close-execution-modal" class="text-gray-400 hover:text-gray-500">
991
+ <i class="fas fa-times"></i>
992
+ </button>
993
+ </div>
994
+
995
+ <div class="mb-6">
996
+ <div class="flex items-center mb-2">
997
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 mr-3">
998
+ Success
999
+ </span>
1000
+ <span class="text-sm text-gray-600">Workflow: <span class="font-medium" id="execution-workflow">Email Digest</span></span>
1001
+ </div>
1002
+ <div class="text-sm text-gray-600 mb-1">Started: <span id="execution-start">2023-06-15 14:30:22</span></div>
1003
+ <div class="text-sm text-gray-600">Duration: <span id="execution-duration">1.2 seconds</span></div>
1004
+ </div>
1005
+
1006
+ <div class="border-t border-gray-200 pt-4">
1007
+ <h4 class="font-medium mb-3">Execution Steps</h4>
1008
+ <div class="space-y-3" id="execution-steps">
1009
+ <!-- Steps will be added here dynamically -->
1010
+ </div>
1011
+ </div>
1012
+
1013
+ <div class="border-t border-gray-200 mt-6 pt-4">
1014
+ <h4 class="font-medium mb-3">Execution Log</h4>
1015
+ <div class="execution-log" id="execution-log-content">
1016
+ [2023-06-15 14:30:22] Workflow started
1017
+ [2023-06-15 14:30:22] Trigger: Manual trigger activated
1018
+ [2023-06-15 14:30:22] HTTP Request: Making GET request to https://api.example.com/data
1019
+ [2023-06-15 14:30:22] HTTP Request: Received 200 OK response (25 items)
1020
+ [2023-06-15 14:30:22] Filter: Applied filter criteria (10 items match)
1021
+ [2023-06-15 14:30:23] Email: Sending digest to [email protected]
1022
+ [2023-06-15 14:30:23] Email: Successfully sent
1023
+ [2023-06-15 14:30:23] Workflow completed successfully
1024
+ </div>
1025
+ </div>
1026
+
1027
+ <div class="flex justify-end mt-6">
1028
+ <button id="close-execution-modal" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 mr-3">
1029
+ Close
1030
+ </button>
1031
+ <button class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 text-sm font-medium">
1032
+ <i class="fas fa-redo mr-2"></i> Run Again
1033
+ </button>
1034
+ </div>
1035
+ </div>
1036
+ </div>
1037
+ </div>
1038
+
1039
+ <!-- New Integration Modal -->
1040
+ <div id="new-integration-modal" class="modal">
1041
+ <div class="modal-content">
1042
+ <div class="p-6">
1043
+ <div class="flex justify-between items-center mb-4">
1044
+ <h3 class="text-lg font-semibold">Add New Integration</h3>
1045
+ <button id="close-integration-modal" class="text-gray-400 hover:text-gray-500">
1046
+ <i class="fas fa-times"></i>
1047
+ </button>
1048
+ </div>
1049
+
1050
+ <div class="mb-6">
1051
+ <div class="relative">
1052
+ <input type="text" placeholder="Search integrations..." class="w-full px-4 py-3 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
1053
+ <i class="fas fa-search absolute right-3 top-3.5 text-gray-400"></i>
1054
+ </div>
1055
+ </div>
1056
+
1057
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
1058
+ <div class="border border-gray-200 rounded-lg p-4 text-center cursor-pointer hover:bg-gray-50">
1059
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mx-auto mb-3">
1060
+ <i class="fab fa-slack text-blue-600 text-xl"></i>
1061
+ </div>
1062
+ <h4 class="font-medium text-sm">Slack</h4>
1063
+ </div>
1064
+
1065
+ <div class="border border-gray-200 rounded-lg p-4 text-center cursor-pointer hover:bg-gray-50">
1066
+ <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-3">
1067
+ <i class="fab fa-google text-red-600 text-xl"></i>
1068
+ </div>
1069
+ <h4 class="font-medium text-sm">Google Workspace</h4>
1070
+ </div>
1071
+
1072
+ <div class="border border-gray-200 rounded-lg p-4 text-center cursor-pointer hover:bg-gray-50">
1073
+ <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-3">
1074
+ <i class="fas fa-envelope text-green-600 text-xl"></i>
1075
+ </div>
1076
+ <h4 class="font-medium text-sm">Email (SMTP)</h4>
1077
+ </div>
1078
+
1079
+ <div class="border border-gray-200 rounded-lg p-4 text-center cursor-pointer hover:bg-gray-50">
1080
+ <div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center mx-auto mb-3">
1081
+ <i class="fab fa-microsoft text-yellow-600 text-xl"></i>
1082
+ </div>
1083
+ <h4 class="font-medium text-sm">Microsoft 365</h4>
1084
+ </div>
1085
+
1086
+ <div class="border border-gray-200 rounded-lg p-4 text-center cursor-pointer hover:bg-gray-50">
1087
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mx-auto mb-3">
1088
+ <i class="fas fa-database text-purple-600 text-xl"></i>
1089
+ </div>
1090
+ <h4 class="font-medium text-sm">Database</h4>
1091
+ </div>
1092
+
1093
+ <div class="border border-gray-200 rounded-lg p-4 text-center cursor-pointer hover:bg-gray-50">
1094
+ <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mx-auto mb-3">
1095
+ <i class="fas fa-server text-indigo-600 text-xl"></i>
1096
+ </div>
1097
+ <h4 class="font-medium text-sm">REST API</h4>
1098
+ </div>
1099
+ </div>
1100
+
1101
+ <div class="flex justify-end mt-6">
1102
+ <button id="cancel-integration" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
1103
+ Cancel
1104
+ </button>
1105
+ </div>
1106
+ </div>
1107
+ </div>
1108
+ </div>
1109
+
1110
+ <!-- User Profile Dropdown -->
1111
+ <div id="user-profile-dropdown" class="hidden absolute right-6 top-16 w-48 bg-white rounded-md shadow-lg py-1 z-50">
1112
+ <div class="px-4 py-2 border-b border-gray-200">
1113
+ <div class="text-sm font-medium">John Doe</div>
1114
+ <div class="text-xs text-gray-500">[email protected]</div>
1115
+ </div>
1116
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profile</a>
1117
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
1118
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Help</a>
1119
+ <div class="border-t border-gray-200"></div>
1120
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a>
1121
+ </div>
1122
+
1123
+ <!-- Success Notification -->
1124
+ <div id="success-notification" class="notification success">
1125
+ <i class="fas fa-check-circle mr-2"></i>
1126
+ <span id="success-message">Operation completed successfully!</span>
1127
+ </div>
1128
+
1129
+ <script>
1130
+ document.addEventListener('DOMContentLoaded', function() {
1131
+ // Page navigation
1132
+ const navLinks = document.querySelectorAll('.nav-link');
1133
+ const pages = document.querySelectorAll('.page');
1134
+
1135
+ navLinks.forEach(link => {
1136
+ link.addEventListener('click', function(e) {
1137
+ e.preventDefault();
1138
+
1139
+ // Update active nav link
1140
+ navLinks.forEach(l => l.classList.remove('active', 'text-indigo-600'));
1141
+ navLinks.forEach(l => l.classList.add('text-gray-600'));
1142
+ this.classList.add('active', 'text-indigo-600');
1143
+ this.classList.remove('text-gray-600');
1144
+
1145
+ // Show the selected page
1146
+ const pageId = this.getAttribute('data-page') + '-page';
1147
+ pages.forEach(page => page.classList.remove('active'));
1148
+ document.getElementById(pageId).classList.add('active');
1149
+
1150
+ // Show/hide sidebars based on page
1151
+ if (pageId === 'workflows-page') {
1152
+ document.getElementById('nodes-palette').classList.remove('hidden');
1153
+ document.getElementById('node-config-sidebar').classList.remove('hidden');
1154
+ document.getElementById('execute-btn').classList.remove('hidden');
1155
+ } else {
1156
+ document.getElementById('nodes-palette').classList.add('hidden');
1157
+ document.getElementById('node-config-sidebar').classList.add('hidden');
1158
+ document.getElementById('execute-btn').classList.add('hidden');
1159
+ }
1160
+ });
1161
+ });
1162
+
1163
+ // Tutorial functionality
1164
+ const tutorialBtn = document.getElementById('tutorial-btn');
1165
+ const tutorialModal = document.getElementById('tutorial-modal');
1166
+ const closeTutorialModal = document.getElementById('close-tutorial-modal');
1167
+ const nextStepBtns = document.querySelectorAll('.next-step-btn');
1168
+ const prevStepBtns = document.querySelectorAll('.prev-step-btn');
1169
+ const finishTutorialBtn = document.getElementById('finish-tutorial');
1170
+ const tutorialSteps = document.querySelectorAll('.tutorial-step');
1171
+
1172
+ tutorialBtn.addEventListener('click', function() {
1173
+ tutorialModal.classList.add('active');
1174
+ // Reset to first step
1175
+ tutorialSteps.forEach(step => step.classList.remove('active'));
1176
+ document.querySelector('.tutorial-step[data-step="1"]').classList.add('active');
1177
+ });
1178
+
1179
+ closeTutorialModal.addEventListener('click', function() {
1180
+ tutorialModal.classList.remove('active');
1181
+ });
1182
+
1183
+ nextStepBtns.forEach(btn => {
1184
+ btn.addEventListener('click', function() {
1185
+ const nextStep = this.getAttribute('data-next');
1186
+ tutorialSteps.forEach(step => step.classList.remove('active'));
1187
+ document.querySelector(`.tutorial-step[data-step="${nextStep}"]`).classList.add('active');
1188
+ });
1189
+ });
1190
+
1191
+ prevStepBtns.forEach(btn => {
1192
+ btn.addEventListener('click', function() {
1193
+ const prevStep = this.getAttribute('data-prev');
1194
+ tutorialSteps.forEach(step => step.classList.remove('active'));
1195
+ document.querySelector(`.tutorial-step[data-step="${prevStep}"]`).classList.add('active');
1196
+ });
1197
+ });
1198
+
1199
+ finishTutorialBtn.addEventListener('click', function() {
1200
+ tutorialModal.classList.remove('active');
1201
+ showSuccess('Tutorial completed! Ready to build your first workflow.');
1202
+ });
1203
+
1204
+ // User profile dropdown
1205
+ const userProfileBtn = document.getElementById('user-profile-btn');
1206
+ const userProfileDropdown = document.getElementById('user-profile-dropdown');
1207
+
1208
+ userProfileBtn.addEventListener('click', function(e) {
1209
+ e.stopPropagation();
1210
+ userProfileDropdown.classList.toggle('hidden');
1211
+ });
1212
+
1213
+ // Close dropdown when clicking elsewhere
1214
+ document.addEventListener('click', function() {
1215
+ userProfileDropdown.classList.add('hidden');
1216
+ });
1217
+
1218
+ // Workflow editor functionality
1219
+ const workflowArea = document.getElementById('workflow-area');
1220
+ const nodeOptions = document.querySelectorAll('.node-option');
1221
+ const nodeConfig = document.getElementById('node-config');
1222
+ const saveNodeConfigBtn = document.getElementById('save-node-config');
1223
+ const executeBtn = document.getElementById('execute-btn');
1224
+ const zoomInBtn = document.getElementById('zoom-in-btn');
1225
+ const zoomOutBtn = document.getElementById('zoom-out-btn');
1226
+ const zoomResetBtn = document.getElementById('zoom-reset-btn');
1227
+ const zoomLevel = document.getElementById('zoom-level');
1228
+ const newIntegrationBtn = document.getElementById('new-integration-btn');
1229
+ const newIntegrationModal = document.getElementById('new-integration-modal');
1230
+ const closeIntegrationModal = document.getElementById('close-integration-modal');
1231
+ const cancelIntegration = document.getElementById('cancel-integration');
1232
+ const executionModal = document.getElementById('execution-modal');
1233
+ const closeExecutionModal = document.getElementById('close-execution-modal');
1234
+ const viewExecutionBtns = document.querySelectorAll('.view-execution-btn');
1235
+ const rerunExecutionBtns = document.querySelectorAll('.rerun-execution-btn');
1236
+ const successNotification = document.getElementById('success-notification');
1237
+
1238
+ let nodes = [];
1239
+ let connections = [];
1240
+ let selectedNode = null;
1241
+ let isDragging = false;
1242
+ let dragOffsetX = 0;
1243
+ let dragOffsetY = 0;
1244
+ let isConnecting = false;
1245
+ let connectingFrom = null;
1246
+ let currentZoom = 100;
1247
+ let dragPreview = null;
1248
+
1249
+ // Add node to workflow area
1250
+ nodeOptions.forEach(option => {
1251
+ option.addEventListener('mousedown', function(e) {
1252
+ if (e.button !== 0) return; // Only left mouse button
1253
+
1254
+ const type = this.getAttribute('data-type');
1255
+ const name = this.getAttribute('data-name');
1256
+
1257
+ // Create drag preview
1258
+ dragPreview = document.createElement('div');
1259
+ dragPreview.className = 'drag-preview node';
1260
+ dragPreview.style.width = '200px';
1261
+ dragPreview.innerHTML = `
1262
+ <div class="node-header">
1263
+ <span>${name}</span>
1264
+ </div>
1265
+ <div class="node-body">
1266
+ <div class="text-sm text-gray-500">Click to configure</div>
1267
+ </div>
1268
+ `;
1269
+ document.body.appendChild(dragPreview);
1270
+
1271
+ // Position preview at cursor
1272
+ updateDragPreviewPosition(e);
1273
+
1274
+ // Setup drag events
1275
+ document.addEventListener('mousemove', handleNodeDrag);
1276
+ document.addEventListener('mouseup', handleNodeDrop);
1277
+
1278
+ function handleNodeDrag(e) {
1279
+ updateDragPreviewPosition(e);
1280
+ }
1281
+
1282
+ function handleNodeDrop(e) {
1283
+ // Remove drag preview
1284
+ if (dragPreview) {
1285
+ dragPreview.remove();
1286
+ dragPreview = null;
1287
+ }
1288
+
1289
+ // Remove event listeners
1290
+ document.removeEventListener('mousemove', handleNodeDrag);
1291
+ document.removeEventListener('mouseup', handleNodeDrop);
1292
+
1293
+ // Check if dropped on workflow area
1294
+ if (e.target.closest('#workflow-area')) {
1295
+ addNodeToWorkflow(type, name, e.clientX, e.clientY);
1296
+ }
1297
+ }
1298
+
1299
+ function updateDragPreviewPosition(e) {
1300
+ if (!dragPreview) return;
1301
+
1302
+ const rect = workflowArea.getBoundingClientRect();
1303
+ const x = e.clientX - rect.left - 100; // Center on cursor
1304
+ const y = e.clientY - rect.top - 20;
1305
+
1306
+ dragPreview.style.left = (e.clientX - 100) + 'px';
1307
+ dragPreview.style.top = (e.clientY - 20) + 'px';
1308
+ }
1309
+ });
1310
+ });
1311
+
1312
+ function addNodeToWorkflow(type, name, clientX, clientY) {
1313
+ // Generate a unique ID for the node
1314
+ const nodeId = 'node-' + Date.now();
1315
+
1316
+ // Create node element
1317
+ const node = document.createElement('div');
1318
+ node.className = 'node';
1319
+ node.id = nodeId;
1320
+
1321
+ // Position the node where dropped
1322
+ const rect = workflowArea.getBoundingClientRect();
1323
+ const x = clientX - rect.left - 100; // Center on cursor
1324
+ const y = clientY - rect.top - 20;
1325
+
1326
+ node.style.left = x + 'px';
1327
+ node.style.top = y + 'px';
1328
+
1329
+ // Node header
1330
+ const header = document.createElement('div');
1331
+ header.className = 'node-header';
1332
+ header.innerHTML = `
1333
+ <span>${name}</span>
1334
+ <i class="fas fa-ellipsis-h text-gray-400"></i>
1335
+ `;
1336
+
1337
+ // Node body
1338
+ const body = document.createElement('div');
1339
+ body.className = 'node-body';
1340
+ body.innerHTML = `
1341
+ <div class极text-sm text-gray-500">Click to configure</div>
1342
+ `;
1343
+
1344
+ // Node ports
1345
+ const input = document.createElement('div');
1346
+ input.className = 'node-port node-input';
1347
+
1348
+ const output = document.createElement('div');
1349
+ output.className = 'node-port node-output';
1350
+
1351
+ node.appendChild(header);
1352
+ node.appendChild(body);
1353
+ node.appendChild(input);
1354
+ node.appendChild(output);
1355
+
1356
+ workflowArea.appendChild(node);
1357
+
1358
+ // Add node to our nodes array
1359
+ nodes.push({
1360
+ id: nodeId,
1361
+ type: type,
1362
+ name: name,
1363
+ x: x,
1364
+ y: y,
1365
+ element: node,
1366
+ config: {}
1367
+ });
1368
+
1369
+ // Add drag functionality
1370
+ setupNodeDrag(node);
1371
+
1372
+ // Add click handler for selection
1373
+ node.addEventListener('click', function(e) {
1374
+ if (e.target.classList.contains('node-port')) {
1375
+ return;
1376
+ }
1377
+
1378
+ // Deselect all nodes
1379
+ document.querySelectorAll('.node').forEach(n => {
1380
+ n.classList.remove('node-selected');
1381
+ });
1382
+
1383
+ // Select this node
1384
+ this.classList.add('node-selected');
1385
+ selectedNode = nodes.find(n => n.id === this.id);
1386
+
1387
+ // Update node configuration panel
1388
+ updateNodeConfig(selectedNode);
1389
+ });
1390
+
1391
+ // Add port click handlers
1392
+ input.addEventListener('mousedown', function(e) {
1393
+ e.stopPropagation();
1394
+ startConnection(this, nodeId, 'input');
1395
+ });
1396
+
1397
+ output.addEventListener('mousedown', function(e) {
1398
+ e.stopPropagation();
1399
+ startConnection(this, nodeId, 'output');
1400
+ });
1401
+
1402
+ // Show success message
1403
+ showSuccess(`Added ${name} node to workflow`);
1404
+ }
1405
+
1406
+ function setupNodeDrag(node) {
1407
+ const header = node.querySelector('.node-header');
1408
+
1409
+ header.addEventListener('mousedown', function(e) {
1410
+ if (e.button !== 0) return; // Only left mouse button
1411
+
1412
+ isDragging = true;
1413
+ const rect = node.getBoundingClientRect();
1414
+ dragOffsetX = e.clientX - rect.left;
1415
+ dragOffsetY = e.clientY - rect.top;
1416
+
1417
+ document.addEventListener('mousemove', handleDrag);
1418
+ document.addEventListener('mouseup', stopDrag);
1419
+
1420
+ function handleDrag(e) {
1421
+ if (!isDragging) return;
1422
+
1423
+ const x = e.clientX - dragOffsetX;
1424
+ const y = e.clientY - dragOffsetY;
1425
+
1426
+ node.style.left = x
1427
+ </html>
prompts.txt ADDED
@@ -0,0 +1,6 @@
 
 
 
 
 
 
 
1
+ recreate me a fully functional n8n both frontend and backend
2
+ develop all the other pages
3
+ make ' N8N Workflows Executions Credentials Settings Execute Nodes youtube TRIGGERS Manual Schedule Webhook ACTIONS HTTP Request Function Email DATA TRANSFORMATION Set Merge Filter Zoom: 100% Manual Click to configure HTTP Request Click to configure Function Click to configure Function Click to configure Manual Click to configure Function Click to configure Manual Click to configure Manual Click to configure Schedule Click to configure Manual Click to configure Manual Click to configure Schedule Click to configure Set Click to configure Merge Click to configure Filter Click to configure Node Configuration Filter Node Node Name Filter Description Save Changes' all function and include a tutorial nand make it easy to use with no code
4
+ create me a rival to nbn with both backend and front end. make it easy to use and requires no code. add a tutorial
5
+ make all elements,tabs,buttons and underlying corresponding pages all function.
6
+ ' FlowForge Workflows Templates Executions Integrations Run Workflow Quick Start and the user profile work)