brainable commited on
Commit
1a90352
·
verified ·
1 Parent(s): 3a806b9

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +639 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Se3
3
- emoji: 👁
4
- colorFrom: blue
5
- colorTo: indigo
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: se3
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: blue
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,639 @@
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>My Agents | Agent Builder</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
+ <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#00ff9d',
16
+ secondary: '#00b4ff',
17
+ dark: '#0a0a0a',
18
+ darker: '#050505',
19
+ light: '#f0f0f0',
20
+ gray: {
21
+ 800: '#1e1e1e',
22
+ 700: '#2d2d2d',
23
+ 600: '#3a3a3a',
24
+ }
25
+ },
26
+ fontFamily: {
27
+ sans: ['Inter', 'sans-serif'],
28
+ mono: ['Roboto Mono', 'monospace'],
29
+ },
30
+ animation: {
31
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
32
+ 'blink': 'blink 1s step-end infinite',
33
+ },
34
+ keyframes: {
35
+ blink: {
36
+ '0%, 100%': { opacity: '1' },
37
+ '50%': { opacity: '0' },
38
+ }
39
+ }
40
+ }
41
+ }
42
+ }
43
+ </script>
44
+ <style>
45
+ .terminal-input::before {
46
+ content: '> ';
47
+ color: #00ff9d;
48
+ }
49
+ .code-block {
50
+ position: relative;
51
+ }
52
+ .code-block::before {
53
+ content: '';
54
+ position: absolute;
55
+ top: 0;
56
+ left: 0;
57
+ width: 4px;
58
+ height: 100%;
59
+ background: linear-gradient(to bottom, #00ff9d, #00b4ff);
60
+ }
61
+ .glow-effect {
62
+ box-shadow: 0 0 10px rgba(0, 255, 157, 0.5);
63
+ }
64
+ .glow-effect:hover {
65
+ box-shadow: 0 0 15px rgba(0, 255, 157, 0.7);
66
+ }
67
+ .sidebar-item:hover {
68
+ background: linear-gradient(90deg, rgba(0, 255, 157, 0.1) 0%, rgba(0, 255, 157, 0) 100%);
69
+ border-left: 2px solid #00ff9d;
70
+ }
71
+ .sidebar-item.active {
72
+ background: linear-gradient(90deg, rgba(0, 255, 157, 0.2) 0%, rgba(0, 255, 157, 0) 100%);
73
+ border-left: 2px solid #00ff9d;
74
+ }
75
+ .tab-item {
76
+ position: relative;
77
+ }
78
+ .tab-item.active::after {
79
+ content: '';
80
+ position: absolute;
81
+ bottom: 0;
82
+ left: 0;
83
+ width: 100%;
84
+ height: 2px;
85
+ background-color: #00ff9d;
86
+ }
87
+ .agent-card:hover {
88
+ transform: translateY(-5px);
89
+ box-shadow: 0 10px 25px rgba(0, 255, 157, 0.2);
90
+ }
91
+ .status-active {
92
+ background-color: rgba(0, 255, 157, 0.1);
93
+ color: #00ff9d;
94
+ }
95
+ .status-draft {
96
+ background-color: rgba(0, 180, 255, 0.1);
97
+ color: #00b4ff;
98
+ }
99
+ .status-paused {
100
+ background-color: rgba(255, 165, 0, 0.1);
101
+ color: #ffa500;
102
+ }
103
+ .status-error {
104
+ background-color: rgba(255, 0, 0, 0.1);
105
+ color: #ff5555;
106
+ }
107
+ .grid-stack {
108
+ display: grid;
109
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
110
+ gap: 1.5rem;
111
+ }
112
+ .dropdown-content {
113
+ display: none;
114
+ position: absolute;
115
+ right: 0;
116
+ background-color: #1e1e1e;
117
+ min-width: 160px;
118
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
119
+ z-index: 1;
120
+ border: 1px solid #2d2d2d;
121
+ border-radius: 6px;
122
+ }
123
+ .dropdown:hover .dropdown-content {
124
+ display: block;
125
+ }
126
+ .dropdown-content a {
127
+ color: #f0f0f0;
128
+ padding: 10px 16px;
129
+ text-decoration: none;
130
+ display: block;
131
+ font-size: 14px;
132
+ }
133
+ .dropdown-content a:hover {
134
+ background-color: #2d2d2d;
135
+ }
136
+ </style>
137
+ </head>
138
+ <body class="bg-dark text-light font-sans flex h-screen overflow-hidden">
139
+ <!-- Sidebar -->
140
+ <div class="w-64 bg-darker border-r border-gray-800 flex flex-col">
141
+ <div class="p-4 border-b border-gray-800 flex items-center">
142
+ <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center mr-3">
143
+ <i class="fas fa-robot text-dark"></i>
144
+ </div>
145
+ <h1 class="text-xl font-bold">
146
+ <span class="text-primary">Agent</span>Builder
147
+ </h1>
148
+ </div>
149
+
150
+ <div class="p-4 border-b border-gray-800">
151
+ <button class="w-full bg-primary hover:bg-opacity-90 text-dark font-semibold py-2 px-4 rounded-md flex items-center justify-center transition-all">
152
+ <i class="fas fa-plus mr-2"></i> New Agent
153
+ </button>
154
+ </div>
155
+
156
+ <nav class="flex-1 overflow-y-auto">
157
+ <div class="p-2">
158
+ <h3 class="text-xs uppercase text-gray-500 font-mono tracking-wider mb-2 px-3">Navigation</h3>
159
+ <a href="#" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all">
160
+ <i class="fas fa-sliders-h mr-3 text-gray-400"></i>
161
+ <span>Agent Builder</span>
162
+ </a>
163
+ <a href="#" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all">
164
+ <i class="fas fa-store mr-3 text-gray-400"></i>
165
+ <span>MCP Store</span>
166
+ </a>
167
+ <a href="#" class="sidebar-item active flex items-center py-2 px-3 rounded-md mb-1 transition-all">
168
+ <i class="fas fa-boxes mr-3 text-primary"></i>
169
+ <span>My Agents</span>
170
+ </a>
171
+ </div>
172
+
173
+ <div class="p-2 mt-4">
174
+ <h3 class="text-xs uppercase text-gray-500 font-mono tracking-wider mb-2 px-3">Recent Agents</h3>
175
+ <a href="#" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all">
176
+ <div class="w-2 h-2 rounded-full bg-primary mr-3"></div>
177
+ <span>Customer Support Bot</span>
178
+ </a>
179
+ <a href="#" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all">
180
+ <div class="w-2 h-2 rounded-full bg-secondary mr-3"></div>
181
+ <span>Data Analyzer</span>
182
+ </a>
183
+ <a href="#" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all">
184
+ <div class="w-2 h-2 rounded-full bg-gray-500 mr-3"></div>
185
+ <span>Content Generator</span>
186
+ </a>
187
+ </div>
188
+ </nav>
189
+
190
+ <div class="p-4 border-t border-gray-800">
191
+ <div class="flex items-center">
192
+ <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center mr-3">
193
+ <i class="fas fa-user text-gray-400"></i>
194
+ </div>
195
+ <div>
196
+ <div class="text-sm font-medium">John Doe</div>
197
+ <div class="text-xs text-gray-500">Admin</div>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </div>
202
+
203
+ <!-- Main Content -->
204
+ <div class="flex-1 flex flex-col overflow-hidden">
205
+ <!-- Top Bar -->
206
+ <div class="bg-darker border-b border-gray-800 p-4 flex items-center justify-between">
207
+ <div class="flex items-center">
208
+ <h2 class="text-xl font-bold">
209
+ <span class="text-primary">My</span> Agents
210
+ </h2>
211
+ <div class="ml-4 text-sm bg-gray-800 text-gray-400 px-2 py-1 rounded font-mono">
212
+ <span class="text-primary">12</span> agents total
213
+ </div>
214
+ </div>
215
+
216
+ <div class="flex items-center">
217
+ <div class="relative mr-4">
218
+ <input type="text" placeholder="Search agents..." class="bg-gray-800 border border-gray-700 rounded-md pl-10 pr-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent w-64">
219
+ <i class="fas fa-search absolute left-3 top-3 text-gray-500"></i>
220
+ </div>
221
+ <div class="relative mr-4">
222
+ <select class="bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent appearance-none pr-8">
223
+ <option>All Status</option>
224
+ <option>Active</option>
225
+ <option>Draft</option>
226
+ <option>Paused</option>
227
+ <option>Error</option>
228
+ </select>
229
+ <i class="fas fa-chevron-down absolute right-3 top-3 text-gray-500 pointer-events-none"></i>
230
+ </div>
231
+ <div class="relative">
232
+ <select class="bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent appearance-none pr-8">
233
+ <option>Sort by: Last Modified</option>
234
+ <option>Sort by: Name</option>
235
+ <option>Sort by: Created Date</option>
236
+ <option>Sort by: Usage</option>
237
+ </select>
238
+ <i class="fas fa-chevron-down absolute right-3 top-3 text-gray-500 pointer-events-none"></i>
239
+ </div>
240
+ </div>
241
+ </div>
242
+
243
+ <!-- Content Area -->
244
+ <div class="flex-1 overflow-auto p-6">
245
+ <div class="max-w-7xl mx-auto">
246
+ <!-- Stats Overview -->
247
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
248
+ <div class="bg-gray-800 border border-gray-700 rounded-lg p-4">
249
+ <div class="flex items-center justify-between">
250
+ <div>
251
+ <div class="text-sm text-gray-400">Total Agents</div>
252
+ <div class="text-2xl font-bold">12</div>
253
+ </div>
254
+ <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center">
255
+ <i class="fas fa-robot text-primary"></i>
256
+ </div>
257
+ </div>
258
+ <div class="mt-2 text-xs text-gray-500">
259
+ <span class="text-primary">+2</span> this month
260
+ </div>
261
+ </div>
262
+
263
+ <div class="bg-gray-800 border border-gray-700 rounded-lg p-4">
264
+ <div class="flex items-center justify-between">
265
+ <div>
266
+ <div class="text-sm text-gray-400">Active</div>
267
+ <div class="text-2xl font-bold">8</div>
268
+ </div>
269
+ <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center">
270
+ <i class="fas fa-play text-green-500"></i>
271
+ </div>
272
+ </div>
273
+ <div class="mt-2 text-xs text-gray-500">
274
+ <span class="text-primary">64%</span> of total
275
+ </div>
276
+ </div>
277
+
278
+ <div class="bg-gray-800 border border-gray-700 rounded-lg p-4">
279
+ <div class="flex items-center justify-between">
280
+ <div>
281
+ <div class="text-sm text-gray-400">API Calls</div>
282
+ <div class="text-2xl font-bold">1.2K</div>
283
+ </div>
284
+ <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center">
285
+ <i class="fas fa-bolt text-yellow-500"></i>
286
+ </div>
287
+ </div>
288
+ <div class="mt-2 text-xs text-gray-500">
289
+ <span class="text-primary">+28%</span> from last week
290
+ </div>
291
+ </div>
292
+
293
+ <div class="bg-gray-800 border border-gray-700 rounded-lg p-4">
294
+ <div class="flex items-center justify-between">
295
+ <div>
296
+ <div class="text-sm text-gray-400">Storage Used</div>
297
+ <div class="text-2xl font-bold">3.2GB</div>
298
+ </div>
299
+ <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center">
300
+ <i class="fas fa-database text-secondary"></i>
301
+ </div>
302
+ </div>
303
+ <div class="mt-2 text-xs text-gray-500">
304
+ <span class="text-primary">42%</span> of limit
305
+ </div>
306
+ </div>
307
+ </div>
308
+
309
+ <!-- Agent Grid -->
310
+ <div class="grid-stack">
311
+ <!-- Agent Card 1 -->
312
+ <div class="agent-card bg-gray-800 border border-gray-700 rounded-xl overflow-hidden transition-all duration-300">
313
+ <div class="p-4 border-b border-gray-700 flex items-center justify-between">
314
+ <div class="flex items-center">
315
+ <div class="w-10 h-10 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mr-3">
316
+ <i class="fas fa-headset text-primary"></i>
317
+ </div>
318
+ <div>
319
+ <h3 class="font-medium">Customer Support Bot</h3>
320
+ <div class="text-xs text-gray-500">Last modified: 2 hours ago</div>
321
+ </div>
322
+ </div>
323
+ <div class="dropdown relative">
324
+ <button class="text-gray-500 hover:text-light p-1 rounded">
325
+ <i class="fas fa-ellipsis-v"></i>
326
+ </button>
327
+ <div class="dropdown-content">
328
+ <a href="#"><i class="fas fa-edit mr-2"></i> Edit</a>
329
+ <a href="#"><i class="fas fa-copy mr-2"></i> Duplicate</a>
330
+ <a href="#"><i class="fas fa-pause mr-2"></i> Pause</a>
331
+ <a href="#"><i class="fas fa-trash mr-2 text-red-500"></i> Delete</a>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ <div class="p-4">
336
+ <p class="text-sm text-gray-400 mb-4">Handles customer inquiries and support tickets with natural language understanding.</p>
337
+ <div class="flex items-center justify-between">
338
+ <span class="status-active text-xs px-2 py-1 rounded-full">Active</span>
339
+ <div class="text-xs text-gray-500">
340
+ <i class="fas fa-bolt mr-1 text-yellow-500"></i> 342 calls today
341
+ </div>
342
+ </div>
343
+ </div>
344
+ <div class="px-4 py-2 bg-gray-900 border-t border-gray-700 flex justify-between items-center">
345
+ <div class="text-xs text-gray-500">
346
+ <i class="fas fa-calendar mr-1"></i> Created: May 12, 2023
347
+ </div>
348
+ <button class="text-xs bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all">
349
+ <i class="fas fa-play mr-1"></i> Run
350
+ </button>
351
+ </div>
352
+ </div>
353
+
354
+ <!-- Agent Card 2 -->
355
+ <div class="agent-card bg-gray-800 border border-gray-700 rounded-xl overflow-hidden transition-all duration-300">
356
+ <div class="p-4 border-b border-gray-700 flex items-center justify-between">
357
+ <div class="flex items-center">
358
+ <div class="w-10 h-10 rounded-full bg-secondary bg-opacity-20 flex items-center justify-center mr-3">
359
+ <i class="fas fa-chart-line text-secondary"></i>
360
+ </div>
361
+ <div>
362
+ <h3 class="font-medium">Data Analyzer</h3>
363
+ <div class="text-xs text-gray-500">Last modified: 1 day ago</div>
364
+ </div>
365
+ </div>
366
+ <div class="dropdown relative">
367
+ <button class="text-gray-500 hover:text-light p-1 rounded">
368
+ <i class="fas fa-ellipsis-v"></i>
369
+ </button>
370
+ <div class="dropdown-content">
371
+ <a href="#"><i class="fas fa-edit mr-2"></i> Edit</a>
372
+ <a href="#"><i class="fas fa-copy mr-2"></i> Duplicate</a>
373
+ <a href="#"><i class="fas fa-pause mr-2"></i> Pause</a>
374
+ <a href="#"><i class="fas fa-trash mr-2 text-red-500"></i> Delete</a>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ <div class="p-4">
379
+ <p class="text-sm text-gray-400 mb-4">Processes and visualizes complex datasets with automated insights generation.</p>
380
+ <div class="flex items-center justify-between">
381
+ <span class="status-active text-xs px-2 py-1 rounded-full">Active</span>
382
+ <div class="text-xs text-gray-500">
383
+ <i class="fas fa-bolt mr-1 text-yellow-500"></i> 128 calls today
384
+ </div>
385
+ </div>
386
+ </div>
387
+ <div class="px-4 py-2 bg-gray-900 border-t border-gray-700 flex justify-between items-center">
388
+ <div class="text-xs text-gray-500">
389
+ <i class="fas fa-calendar mr-1"></i> Created: Apr 28, 2023
390
+ </div>
391
+ <button class="text-xs bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all">
392
+ <i class="fas fa-play mr-1"></i> Run
393
+ </button>
394
+ </div>
395
+ </div>
396
+
397
+ <!-- Agent Card 3 -->
398
+ <div class="agent-card bg-gray-800 border border-gray-700 rounded-xl overflow-hidden transition-all duration-300">
399
+ <div class="p-4 border-b border-gray-700 flex items-center justify-between">
400
+ <div class="flex items-center">
401
+ <div class="w-10 h-10 rounded-full bg-yellow-500 bg-opacity-20 flex items-center justify-center mr-3">
402
+ <i class="fas fa-pen-fancy text-yellow-500"></i>
403
+ </div>
404
+ <div>
405
+ <h3 class="font-medium">Content Generator</h3>
406
+ <div class="text-xs text-gray-500">Last modified: 3 days ago</div>
407
+ </div>
408
+ </div>
409
+ <div class="dropdown relative">
410
+ <button class="text-gray-500 hover:text-light p-1 rounded">
411
+ <i class="fas fa-ellipsis-v"></i>
412
+ </button>
413
+ <div class="dropdown-content">
414
+ <a href="#"><i class="fas fa-edit mr-2"></i> Edit</a>
415
+ <a href="#"><i class="fas fa-copy mr-2"></i> Duplicate</a>
416
+ <a href="#"><i class="fas fa-play mr-2"></i> Activate</a>
417
+ <a href="#"><i class="fas fa-trash mr-2 text-red-500"></i> Delete</a>
418
+ </div>
419
+ </div>
420
+ </div>
421
+ <div class="p-4">
422
+ <p class="text-sm text-gray-400 mb-4">Creates marketing content, blog posts, and social media updates on demand.</p>
423
+ <div class="flex items-center justify-between">
424
+ <span class="status-paused text-xs px-2 py-1 rounded-full">Paused</span>
425
+ <div class="text-xs text-gray-500">
426
+ <i class="fas fa-bolt mr-1 text-yellow-500"></i> 0 calls today
427
+ </div>
428
+ </div>
429
+ </div>
430
+ <div class="px-4 py-2 bg-gray-900 border-t border-gray-700 flex justify-between items-center">
431
+ <div class="text-xs text-gray-500">
432
+ <i class="fas fa-calendar mr-1"></i> Created: Jun 5, 2023
433
+ </div>
434
+ <button class="text-xs bg-gray-700 hover:bg-gray-600 text-light px-3 py-1 rounded transition-all">
435
+ <i class="fas fa-play mr-1"></i> Run
436
+ </button>
437
+ </div>
438
+ </div>
439
+
440
+ <!-- Agent Card 4 -->
441
+ <div class="agent-card bg-gray-800 border border-gray-700 rounded-xl overflow-hidden transition-all duration-300">
442
+ <div class="p-4 border-b border-gray-700 flex items-center justify-between">
443
+ <div class="flex items-center">
444
+ <div class="w-10 h-10 rounded-full bg-purple-500 bg-opacity-20 flex items-center justify-center mr-3">
445
+ <i class="fas fa-language text-purple-500"></i>
446
+ </div>
447
+ <div>
448
+ <h3 class="font-medium">Multilingual Translator</h3>
449
+ <div class="text-xs text-gray-500">Last modified: 5 hours ago</div>
450
+ </div>
451
+ </div>
452
+ <div class="dropdown relative">
453
+ <button class="text-gray-500 hover:text-light p-1 rounded">
454
+ <i class="fas fa-ellipsis-v"></i>
455
+ </button>
456
+ <div class="dropdown-content">
457
+ <a href="#"><i class="fas fa-edit mr-2"></i> Edit</a>
458
+ <a href="#"><i class="fas fa-copy mr-2"></i> Duplicate</a>
459
+ <a href="#"><i class="fas fa-pause mr-2"></i> Pause</a>
460
+ <a href="#"><i class="fas fa-trash mr-2 text-red-500"></i> Delete</a>
461
+ </div>
462
+ </div>
463
+ </div>
464
+ <div class="p-4">
465
+ <p class="text-sm text-gray-400 mb-4">Translates between 50+ languages while preserving context and nuance.</p>
466
+ <div class="flex items-center justify-between">
467
+ <span class="status-active text-xs px-2 py-1 rounded-full">Active</span>
468
+ <div class="text-xs text-gray-500">
469
+ <i class="fas fa-bolt mr-1 text-yellow-500"></i> 89 calls today
470
+ </div>
471
+ </div>
472
+ </div>
473
+ <div class="px-4 py-2 bg-gray-900 border-t border-gray-700 flex justify-between items-center">
474
+ <div class="text-xs text-gray-500">
475
+ <i class="fas fa-calendar mr-1"></i> Created: May 22, 2023
476
+ </div>
477
+ <button class="text-xs bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all">
478
+ <i class="fas fa-play mr-1"></i> Run
479
+ </button>
480
+ </div>
481
+ </div>
482
+
483
+ <!-- Agent Card 5 -->
484
+ <div class="agent-card bg-gray-800 border border-gray-700 rounded-xl overflow-hidden transition-all duration-300">
485
+ <div class="p-4 border-b border-gray-700 flex items-center justify-between">
486
+ <div class="flex items-center">
487
+ <div class="w-10 h-10 rounded-full bg-blue-500 bg-opacity-20 flex items-center justify-center mr-3">
488
+ <i class="fas fa-calendar-check text-blue-500"></i>
489
+ </div>
490
+ <div>
491
+ <h3 class="font-medium">Appointment Scheduler</h3>
492
+ <div class="text-xs text-gray-500">Last modified: 1 week ago</div>
493
+ </div>
494
+ </div>
495
+ <div class="dropdown relative">
496
+ <button class="text-gray-500 hover:text-light p-1 rounded">
497
+ <i class="fas fa-ellipsis-v"></i>
498
+ </button>
499
+ <div class="dropdown-content">
500
+ <a href="#"><i class="fas fa-edit mr-2"></i> Edit</a>
501
+ <a href="#"><i class="fas fa-copy mr-2"></i> Duplicate</a>
502
+ <a href="#"><i class="fas fa-play mr-2"></i> Activate</a>
503
+ <a href="#"><i class="fas fa-trash mr-2 text-red-500"></i> Delete</a>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ <div class="p-4">
508
+ <p class="text-sm text-gray-400 mb-4">Manages calendar appointments and sends reminders to clients automatically.</p>
509
+ <div class="flex items-center justify-between">
510
+ <span class="status-draft text-xs px-2 py-1 rounded-full">Draft</span>
511
+ <div class="text-xs text-gray-500">
512
+ <i class="fas fa-bolt mr-1 text-yellow-500"></i> 0 calls today
513
+ </div>
514
+ </div>
515
+ </div>
516
+ <div class="px-4 py-2 bg-gray-900 border-t border-gray-700 flex justify-between items-center">
517
+ <div class="text-xs text-gray-500">
518
+ <i class="fas fa-calendar mr-1"></i> Created: Jun 12, 2023
519
+ </div>
520
+ <button class="text-xs bg-gray-700 hover:bg-gray-600 text-light px-3 py-1 rounded transition-all">
521
+ <i class="fas fa-play mr-1"></i> Run
522
+ </button>
523
+ </div>
524
+ </div>
525
+
526
+ <!-- Agent Card 6 -->
527
+ <div class="agent-card bg-gray-800 border border-gray-700 rounded-xl overflow-hidden transition-all duration-300">
528
+ <div class="p-4 border-b border-gray-700 flex items-center justify-between">
529
+ <div class="flex items-center">
530
+ <div class="w-10 h-10 rounded-full bg-red-500 bg-opacity-20 flex items-center justify-center mr-3">
531
+ <i class="fas fa-bug text-red-500"></i>
532
+ </div>
533
+ <div>
534
+ <h3 class="font-medium">Code Debugger</h3>
535
+ <div class="text-xs text-gray-500">Last modified: 2 days ago</div>
536
+ </div>
537
+ </div>
538
+ <div class="dropdown relative">
539
+ <button class="text-gray-500 hover:text-light p-1 rounded">
540
+ <i class="fas fa-ellipsis-v"></i>
541
+ </button>
542
+ <div class="dropdown-content">
543
+ <a href="#"><i class="fas fa-edit mr-2"></i> Edit</a>
544
+ <a href="#"><i class="fas fa-copy mr-2"></i> Duplicate</a>
545
+ <a href="#"><i class="fas fa-play mr-2"></i> Activate</a>
546
+ <a href="#"><i class="fas fa-trash mr-2 text-red-500"></i> Delete</a>
547
+ </div>
548
+ </div>
549
+ </div>
550
+ <div class="p-4">
551
+ <p class="text-sm text-gray-400 mb-4">Analyzes and fixes code errors in multiple programming languages.</p>
552
+ <div class="flex items-center justify-between">
553
+ <span class="status-error text-xs px-2 py-1 rounded-full">Error</span>
554
+ <div class="text-xs text-gray-500">
555
+ <i class="fas fa-bolt mr-1 text-yellow-500"></i> 0 calls today
556
+ </div>
557
+ </div>
558
+ </div>
559
+ <div class="px-4 py-2 bg-gray-900 border-t border-gray-700 flex justify-between items-center">
560
+ <div class="text-xs text-gray-500">
561
+ <i class="fas fa-calendar mr-1"></i> Created: May 30, 2023
562
+ </div>
563
+ <button class="text-xs bg-gray-700 hover:bg-gray-600 text-light px-3 py-1 rounded transition-all">
564
+ <i class="fas fa-play mr-1"></i> Run
565
+ </button>
566
+ </div>
567
+ </div>
568
+
569
+ <!-- New Agent Card -->
570
+ <div class="agent-card bg-gray-800 border-2 border-dashed border-gray-700 rounded-xl overflow-hidden transition-all duration-300 flex flex-col items-center justify-center p-8 hover:border-primary hover:bg-gray-800 hover:bg-opacity-50 cursor-pointer">
571
+ <div class="w-16 h-16 rounded-full bg-gray-700 flex items-center justify-center mb-4">
572
+ <i class="fas fa-plus text-2xl text-primary"></i>
573
+ </div>
574
+ <h3 class="text-lg font-medium mb-2">Create New Agent</h3>
575
+ <p class="text-sm text-gray-400 text-center mb-4">Build a custom AI agent tailored to your specific needs</p>
576
+ <button class="text-sm bg-primary hover:bg-opacity-90 text-dark px-4 py-2 rounded transition-all">
577
+ <i class="fas fa-plus mr-2"></i> New Agent
578
+ </button>
579
+ </div>
580
+ </div>
581
+
582
+ <!-- Pagination -->
583
+ <div class="mt-8 flex items-center justify-between">
584
+ <div class="text-sm text-gray-500">
585
+ Showing <span class="font-medium">1-6</span> of <span class="font-medium">12</span> agents
586
+ </div>
587
+ <div class="flex space-x-2">
588
+ <button class="px-3 py-1 bg-gray-800 border border-gray-700 rounded text-sm disabled:opacity-50" disabled>
589
+ <i class="fas fa-chevron-left"></i> Previous
590
+ </button>
591
+ <button class="px-3 py-1 bg-gray-800 border border-gray-700 rounded text-sm font-medium">1</button>
592
+ <button class="px-3 py-1 bg-gray-800 border border-gray-700 rounded text-sm hover:bg-gray-700">2</button>
593
+ <button class="px-3 py-1 bg-gray-800 border border-gray-700 rounded text-sm">
594
+ Next <i class="fas fa-chevron-right"></i>
595
+ </button>
596
+ </div>
597
+ </div>
598
+ </div>
599
+ </div>
600
+ </div>
601
+
602
+ <script>
603
+ // Toggle dropdown menus
604
+ document.querySelectorAll('.dropdown').forEach(dropdown => {
605
+ const button = dropdown.querySelector('button');
606
+ const content = dropdown.querySelector('.dropdown-content');
607
+
608
+ button.addEventListener('click', (e) => {
609
+ e.stopPropagation();
610
+ content.style.display = content.style.display === 'block' ? 'none' : 'block';
611
+ });
612
+
613
+ // Close when clicking outside
614
+ document.addEventListener('click', () => {
615
+ content.style.display = 'none';
616
+ });
617
+ });
618
+
619
+ // Agent card hover effects
620
+ document.querySelectorAll('.agent-card').forEach(card => {
621
+ card.addEventListener('mouseenter', () => {
622
+ card.classList.add('shadow-lg');
623
+ });
624
+ card.addEventListener('mouseleave', () => {
625
+ card.classList.remove('shadow-lg');
626
+ });
627
+ });
628
+
629
+ // Sidebar navigation
630
+ const sidebarItems = document.querySelectorAll('.sidebar-item');
631
+ sidebarItems.forEach(item => {
632
+ item.addEventListener('click', function() {
633
+ sidebarItems.forEach(i => i.classList.remove('active'));
634
+ this.classList.add('active');
635
+ });
636
+ });
637
+ </script>
638
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=brainable/se3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
639
+ </html>