Hugging Face's logo

Spaces:
AIASDigital
/
autoflow-nexus
Running

App Files Community
AIASDigital commited on
Commit
337a4c4
·
verified ·
1 Parent(s): 7a2dc13

can you create the workflow interface

Browse files
Files changed (3) hide show
  1. dashboard.html +3 -3
  2. index.html +2 -2
  3. workflows.html +315 -0
dashboard.html CHANGED
@@ -47,15 +47,15 @@
47
  </div>
48
 
49
  <nav class="space-y-2">
50
- <a href="#" class="flex items-center space-x-3 p-3 rounded-lg bg-gray-800 text-white">
51
  <i data-feather="layout" class="w-5 h-5"></i>
52
  <span>Dashboard</span>
53
  </a>
54
- <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-gray-400 hover:bg-gray-800 hover:text-white transition">
55
  <i data-feather="settings" class="w-5 h-5"></i>
56
  <span>Workflows</span>
57
  </a>
58
- <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-gray-400 hover:bg-gray-800 hover:text-white transition">
59
  <i data-feather="link" class="w-5 h-5"></i>
60
  <span>Connections</span>
61
  </a>
 
47
  </div>
48
 
49
  <nav class="space-y-2">
50
+ <a href="dashboard.html" class="flex items-center space-x-3 p-3 rounded-lg bg-gray-800 text-white">
51
  <i data-feather="layout" class="w-5 h-5"></i>
52
  <span>Dashboard</span>
53
  </a>
54
+ <a href="workflows.html" class="flex items-center space-x-3 p-3 rounded-lg text-gray-400 hover:bg-gray-800 hover:text-white transition">
55
  <i data-feather="settings" class="w-5 h-5"></i>
56
  <span>Workflows</span>
57
  </a>
58
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-gray-400 hover:bg-gray-800 hover:text-white transition">
59
  <i data-feather="link" class="w-5 h-5"></i>
60
  <span>Connections</span>
61
  </a>
index.html CHANGED
@@ -92,8 +92,8 @@
92
  </form>
93
 
94
  <div class="mt-6 text-center">
95
- <p class="text-gray-400">Don't have an account? <a href="#" class="text-purple-400 hover:text-purple-300 transition font-medium">Get started</a></p>
96
- </div>
97
 
98
  <div class="mt-8 pt-6 border-t border-gray-700">
99
  <div class="flex justify-center space-x-4">
 
92
  </form>
93
 
94
  <div class="mt-6 text-center">
95
+ <p class="text-gray-400">Don't have an account? <a href="dashboard.html" class="text-purple-400 hover:text-purple-300 transition font-medium">Get started</a></p>
96
+ </div>
97
 
98
  <div class="mt-8 pt-6 border-t border-gray-700">
99
  <div class="flex justify-center space-x-4">
workflows.html ADDED
@@ -0,0 +1,315 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Workflows - AutoFlow Nexus</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
13
+ * {
14
+ font-family: 'Inter', sans-serif;
15
+ }
16
+ .gradient-text {
17
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
18
+ -webkit-background-clip: text;
19
+ -webkit-text-fill-color: transparent;
20
+ background-clip: text;
21
+ }
22
+ .sidebar {
23
+ background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
24
+ }
25
+ .card-hover {
26
+ transition: all 0.3s ease;
27
+ }
28
+ .card-hover:hover {
29
+ transform: translateY(-2px);
30
+ }
31
+ .workflow-card {
32
+ border-left: 4px solid transparent;
33
+ }
34
+ .workflow-card.active {
35
+ border-left-color: #10b981;
36
+ }
37
+ .workflow-card.paused {
38
+ border-left-color: #f59e0b;
39
+ }
40
+ .workflow-card.error {
41
+ border-left-color: #ef4444;
42
+ }
43
+ </style>
44
+ </head>
45
+ <body class="bg-gray-900 text-white min-h-screen">
46
+ <div class="flex">
47
+ <!-- Sidebar -->
48
+ <div class="sidebar w-64 min-h-screen fixed hidden md:block">
49
+ <div class="p-6">
50
+ <div class="flex items-center space-x-3 mb-8">
51
+ <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-500 to-blue-600 flex items-center justify-center">
52
+ <i data-feather="zap" class="w-4 h-4 text-white"></i>
53
+ </div>
54
+ <h1 class="text-xl font-bold gradient-text">AutoFlow Nexus</h1>
55
+ </div>
56
+
57
+ <nav class="space-y-2">
58
+ <a href="dashboard.html" class="flex items-center space-x-3 p-3 rounded-lg text-gray-400 hover:bg-gray-800 hover:text-white transition">
59
+ <i data-feather="layout" class="w-5 h-5"></i>
60
+ <span>Dashboard</span>
61
+ </a>
62
+ <a href="workflows.html" class="flex items-center space-x-3 p-3 rounded-lg bg-gray-800 text-white">
63
+ <i data-feather="settings" class="w-5 h-5"></i>
64
+ <span>Workflows</span>
65
+ </a>
66
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-gray-400 hover:bg-gray-800 hover:text-white transition">
67
+ <i data-feather="link" class="w-5 h-5"></i>
68
+ <span>Connections</span>
69
+ </a>
70
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-gray-400 hover:bg-gray-800 hover:text-white transition">
71
+ <i data-feather="bar-chart" class="w-5 h-5"></i>
72
+ <span>Analytics</span>
73
+ </a>
74
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-gray-400 hover:bg-gray-800 hover:text-white transition">
75
+ <i data-feather="users" class="w-5 h-5"></i>
76
+ <span>Team</span>
77
+ </a>
78
+ </nav>
79
+
80
+ <div class="mt-8 pt-6 border-t border-gray-700">
81
+ <a href="index.html" class="flex items-center space-x-3 p-3 rounded-lg text-gray-400 hover:bg-gray-800 hover:text-white transition">
82
+ <i data-feather="log-out" class="w-5 h-5"></i>
83
+ <span>Sign Out</span>
84
+ </a>
85
+ </div>
86
+ </div>
87
+ </div>
88
+
89
+ <!-- Main Content -->
90
+ <div class="flex-1 md:ml-64">
91
+ <!-- Header -->
92
+ <header class="bg-gray-800 border-b border-gray-700 p-4">
93
+ <div class="flex items-center justify-between">
94
+ <div class="flex items-center space-x-4">
95
+ <button class="md:hidden">
96
+ <i data-feather="menu" class="w-6 h-6"></i>
97
+ </button>
98
+ <h2 class="text-xl font-semibold">Workflows</h2>
99
+ </div>
100
+ <div class="flex items-center space-x-4">
101
+ <button class="p-2 rounded-lg hover:bg-gray-700 transition">
102
+ <i data-feather="bell" class="w-5 h-5"></i>
103
+ </button>
104
+ <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-500 to-blue-600 flex items-center justify-center">
105
+ <i data-feather="user" class="w-4 h-4 text-white"></i>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </header>
110
+
111
+ <!-- Filters and Actions -->
112
+ <div class="p-6 bg-gray-800 border-b border-gray-700">
113
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0">
114
+ <div class="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
115
+ <div class="relative">
116
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
117
+ <i data-feather="search" class="h-4 w-4 text-gray-400"></i>
118
+ </div>
119
+ <input type="text" placeholder="Search workflows..." class="pl-10 pr-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent outline-none">
120
+ </div>
121
+ <select class="px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent outline-none">
122
+ <option>All Status</option>
123
+ <option>Active</option>
124
+ <option>Paused</option>
125
+ <option>Error</option>
126
+ </select>
127
+ </div>
128
+ <button class="px-6 py-2 bg-purple-600 rounded-lg hover:bg-purple-700 transition flex items-center">
129
+ <i data-feather="plus" class="w-4 h-4 mr-2"></i>
130
+ New Workflow
131
+ </button>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Workflows Grid -->
136
+ <div class="p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
137
+ <!-- Workflow Card 1 -->
138
+ <div class="workflow-card active bg-gray-800 rounded-xl p-6 card-hover">
139
+ <div class="flex items-center justify-between mb-4">
140
+ <div class="w-10 h-10 rounded bg-blue-500 flex items-center justify-center">
141
+ <i data-feather="database" class="w-5 h-5 text-white"></i>
142
+ </div>
143
+ <span class="px-2 py-1 bg-green-900 text-green-300 rounded-full text-xs">Active</span>
144
+ </div>
145
+ <h3 class="font-semibold mb-2">Data Sync</h3>
146
+ <p class="text-sm text-gray-400 mb-4">Google Sheets to Airtable</p>
147
+ <div class="flex items-center justify-between text-xs text-gray-500 mb-4">
148
+ <span>Last run: 2h ago</span>
149
+ <span>98% success</span>
150
+ </div>
151
+ <div class="flex space-x-2">
152
+ <button class="flex-1 py-2 px-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition text-sm">
153
+ <i data-feather="play" class="w-3 h-3 inline mr-1"></i>
154
+ Run
155
+ </button>
156
+ <button class="p-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition">
157
+ <i data-feather="more-vertical" class="w-4 h-4"></i>
158
+ </button>
159
+ </div>
160
+ </div>
161
+
162
+ <!-- Workflow Card 2 -->
163
+ <div class="workflow-card active bg-gray-800 rounded-xl p-6 card-hover">
164
+ <div class="flex items-center justify-between mb-4">
165
+ <div class="w-10 h-10 rounded bg-purple-500 flex items-center justify-center">
166
+ <i data-feather="mail" class="w-5 h-5 text-white"></i>
167
+ </div>
168
+ <span class="px-2 py-1 bg-green-900 text-green-300 rounded-full text-xs">Active</span>
169
+ </div>
170
+ <h3 class="font-semibold mb-2">Email Notifications</h3>
171
+ <p class="text-sm text-gray-400 mb-4">Slack to Email</p>
172
+ <div class="flex items-center justify-between text-xs text-gray-500 mb-4">
173
+ <span>Last run: 5h ago</span>
174
+ <span>95% success</span>
175
+ </div>
176
+ <div class="flex space-x-2">
177
+ <button class="flex-1 py-2 px-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition text-sm">
178
+ <i data-feather="play" class="w-3 h-3 inline mr-1"></i>
179
+ Run
180
+ </button>
181
+ <button class="p-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition">
182
+ <i data-feather="more-vertical" class="w-4 h-4"></i>
183
+ </button>
184
+ </div>
185
+ </div>
186
+
187
+ <!-- Workflow Card 3 -->
188
+ <div class="workflow-card paused bg-gray-800 rounded-xl p-6 card-hover">
189
+ <div class="flex items-center justify-between mb-4">
190
+ <div class="w-10 h-10 rounded bg-yellow-500 flex items-center justify-center">
191
+ <i data-feather="cloud" class="w-5 h-5 text-white"></i>
192
+ </div>
193
+ <span class="px-2 py-1 bg-gray-700 text-gray-300 rounded-full text-xs">Paused</span>
194
+ </div>
195
+ <h3 class="font-semibold mb-2">API Sync</h3>
196
+ <p class="text-sm text-gray-400 mb-4">REST to Webhook</p>
197
+ <div class="flex items-center justify-between text-xs text-gray-500 mb-4">
198
+ <span>Last run: 1d ago</span>
199
+ <span>87% success</span>
200
+ </div>
201
+ <div class="flex space-x-2">
202
+ <button class="flex-1 py-2 px-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition text-sm">
203
+ <i data-feather="play" class="w-3 h-3 inline mr-1"></i>
204
+ Run
205
+ </button>
206
+ <button class="p-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition">
207
+ <i data-feather="more-vertical" class="w-4 h-4"></i>
208
+ </button>
209
+ </div>
210
+ </div>
211
+
212
+ <!-- Workflow Card 4 -->
213
+ <div class="workflow-card active bg-gray-800 rounded-xl p-6 card-hover">
214
+ <div class="flex items-center justify-between mb-4">
215
+ <div class="w-10 h-10 rounded bg-green-500 flex items-center justify-center">
216
+ <i data-feather="message-square" class="w-5 h-5 text-white"></i>
217
+ </div>
218
+ <span class="px-2 py-1 bg-green-900 text-green-300 rounded-full text-xs">Active</span>
219
+ </div>
220
+ <h3 class="font-semibold mb-2">Slack Alerts</h3>
221
+ <p class="text-sm text-gray-400 mb-4">Monitoring to Slack</p>
222
+ <div class="flex items-center justify-between text-xs text-gray-500 mb-4">
223
+ <span>Last run: 3h ago</span>
224
+ <span>99% success</span>
225
+ </div>
226
+ <div class="flex space-x-2">
227
+ <button class="flex-1 py-2 px-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition text-sm">
228
+ <i data-feather="play" class="w-3 h-3 inline mr-1"></i>
229
+ Run
230
+ </button>
231
+ <button class="p-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition">
232
+ <i data-feather="more-vertical" class="w-4 h-4"></i>
233
+ </button>
234
+ </div>
235
+ </div>
236
+
237
+ <!-- Workflow Card 5 -->
238
+ <div class="workflow-card error bg-gray-800 rounded-xl p-6 card-hover">
239
+ <div class="flex items-center justify-between mb-4">
240
+ <div class="w-10 h-10 rounded bg-red-500 flex items-center justify-center">
241
+ <i data-feather="alert-triangle" class="w-5 h-5 text-white"></i>
242
+ </div>
243
+ <span class="px-2 py-1 bg-red-900 text-red-300 rounded-full text-xs">Error</span>
244
+ </div>
245
+ <h3 class="font-semibold mb-2">Data Backup</h3>
246
+ <p class="text-sm text-gray-400 mb-4">DB to Cloud Storage</p>
247
+ <div class="flex items-center justify-between text-xs text-gray-500 mb-4">
248
+ <span>Last run: 6h ago</span>
249
+ <span>45% success</span>
250
+ </div>
251
+ <div class="flex space-x-2">
252
+ <button class="flex-1 py-2 px-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition text-sm">
253
+ <i data-feather="play" class="w-3 h-3 inline mr-1"></i>
254
+ Run
255
+ </button>
256
+ <button class="p-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition">
257
+ <i data-feather="more-vertical" class="w-4 h-4"></i>
258
+ </button>
259
+ </div>
260
+ </div>
261
+
262
+ <!-- Add New Workflow Card -->
263
+ <div class="bg-gray-800 rounded-xl p-6 card-hover border-2 border-dashed border-gray-600 hover:border-purple-500 transition">
264
+ <div class="flex flex-col items-center justify-center h-full text-gray-400 hover:text-purple-400 transition">
265
+ <i data-feather="plus" class="w-12 h-12 mb-4"></i>
266
+ <h3 class="font-semibold mb-2">Add New Workflow</h3>
267
+ <p class="text-sm text-center">Create a new automation workflow</p>
268
+ </div>
269
+ </div>
270
+ </div>
271
+
272
+ <!-- Workflow Details Modal (Hidden by default) -->
273
+ <div class="fixed inset-0 bg-black bg-opacity-50 hidden" id="workflowModal">
274
+ <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-4xl bg-gray-800 rounded-xl p-6">
275
+ <div class="flex items-center justify-between mb-6">
276
+ <h3 class="text-xl font-semibold">Workflow Details</h3>
277
+ <button class="p-2 rounded-lg hover:bg-gray-700 transition" onclick="closeModal()">
278
+ <i data-feather="x" class="w-5 h-5"></i>
279
+ </button>
280
+ </div>
281
+ <!-- Modal content would go here -->
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </div>
286
+
287
+ <script>
288
+ // Initialize Feather Icons
289
+ feather.replace();
290
+
291
+ // Mobile menu toggle
292
+ document.querySelector('button.md\\:hidden').addEventListener('click', function() {
293
+ document.querySelector('.sidebar').classList.toggle('hidden');
294
+ });
295
+
296
+ // Modal functions
297
+ function openModal() {
298
+ document.getElementById('workflowModal').classList.remove('hidden');
299
+ }
300
+
301
+ function closeModal() {
302
+ document.getElementById('workflowModal').classList.add('hidden');
303
+ }
304
+
305
+ // Workflow card click handlers
306
+ document.querySelectorAll('.workflow-card').forEach(card => {
307
+ card.addEventListener('click', function(e) {
308
+ if (!e.target.closest('button')) {
309
+ openModal();
310
+ }
311
+ });
312
+ });
313
+ </script>
314
+ </body>
315
+ </html>