Hugging Face's logo

Spaces:
a40login
/
test
Running

App Files Community
a40login commited on
Commit
cf2295d
·
verified ·
1 Parent(s): aac2c3c

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +1014 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Test
3
- emoji: 🔥
4
- colorFrom: blue
5
  colorTo: green
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: test
3
+ emoji: 🐳
4
+ colorFrom: purple
5
  colorTo: green
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,1014 @@
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>AI Workflow Hub</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/@supabase/supabase-js@2"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ .auth-bg {
12
+ background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
13
+ }
14
+ .dashboard-card {
15
+ transition: all 0.3s ease;
16
+ border: 1px solid rgba(255, 255, 255, 0.1);
17
+ }
18
+ .dashboard-card:hover {
19
+ transform: translateY(-2px);
20
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
21
+ border-color: rgba(255, 255, 255, 0.2);
22
+ }
23
+ .nav-link {
24
+ position: relative;
25
+ }
26
+ .nav-link::after {
27
+ content: '';
28
+ position: absolute;
29
+ width: 0;
30
+ height: 2px;
31
+ bottom: 0;
32
+ left: 0;
33
+ background-color: #3b82f6;
34
+ transition: width 0.3s ease;
35
+ }
36
+ .nav-link:hover::after {
37
+ width: 100%;
38
+ }
39
+ .active-nav::after {
40
+ width: 100%;
41
+ }
42
+ .prompt-card {
43
+ background: rgba(30, 41, 59, 0.5);
44
+ border: 1px solid rgba(255, 255, 255, 0.1);
45
+ }
46
+ .prompt-card:hover {
47
+ background: rgba(30, 41, 59, 0.7);
48
+ }
49
+ .dark .dark\:bg-slate-800 {
50
+ background-color: #1e293b;
51
+ }
52
+ .dark .dark\:text-white {
53
+ color: #fff;
54
+ }
55
+ .ai-response {
56
+ border-left: 3px solid #3b82f6;
57
+ background: rgba(30, 41, 59, 0.3);
58
+ }
59
+ .markdown-content h1 {
60
+ font-size: 1.5rem;
61
+ font-weight: bold;
62
+ margin: 1rem 0;
63
+ }
64
+ .markdown-content h2 {
65
+ font-size: 1.25rem;
66
+ font-weight: bold;
67
+ margin: 0.75rem 0;
68
+ }
69
+ .markdown-content pre {
70
+ background: #0f172a;
71
+ padding: 1rem;
72
+ border-radius: 0.5rem;
73
+ overflow-x: auto;
74
+ }
75
+ .markdown-content code {
76
+ font-family: monospace;
77
+ background: #0f172a;
78
+ padding: 0.2rem 0.4rem;
79
+ border-radius: 0.25rem;
80
+ }
81
+ </style>
82
+ </head>
83
+ <body class="bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 transition-colors duration-200">
84
+ <!-- App Container -->
85
+ <div id="app" class="min-h-screen">
86
+ <!-- Auth Screens -->
87
+ <div id="auth-screens">
88
+ <!-- Login Screen -->
89
+ <div id="login-screen" class="hidden min-h-screen flex items-center justify-center p-4 auth-bg">
90
+ <div class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl p-8 w-full max-w-md">
91
+ <div class="text-center mb-8">
92
+ <h1 class="text-3xl font-bold text-slate-800 dark:text-white">AI Workflow Hub</h1>
93
+ <p class="text-slate-600 dark:text-slate-300 mt-2">Sign in to access your AI tools</p>
94
+ </div>
95
+
96
+ <div class="space-y-4">
97
+ <button id="google-signin" class="w-full flex items-center justify-center gap-2 bg-white dark:bg-slate-700 text-slate-700 dark:text-white py-3 px-4 rounded-lg border border-slate-300 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-600 transition focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
98
+ <img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" alt="Google logo" class="h-5 w-5">
99
+ Continue with Google
100
+ </button>
101
+
102
+ <div class="relative flex items-center py-4">
103
+ <div class="flex-grow border-t border-slate-300 dark:border-slate-600"></div>
104
+ <span class="flex-shrink mx-2 text-slate-500 dark:text-slate-400">or</span>
105
+ <div class="flex-grow border-t border-slate-300 dark:border-slate-600"></div>
106
+ </div>
107
+
108
+ <form id="email-login-form" class="space-y-4">
109
+ <div>
110
+ <label for="login-email" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Email</label>
111
+ <input type="email" id="login-email" required
112
+ class="w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
113
+ </div>
114
+
115
+ <div>
116
+ <label for="login-password" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Password</label>
117
+ <input type="password" id="login-password" required
118
+ class="w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
119
+ </div>
120
+
121
+ <div class="flex items-center justify-between">
122
+ <div class="flex items-center">
123
+ <input type="checkbox" id="remember-me" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 dark:border-slate-600 rounded">
124
+ <label for="remember-me" class="ml-2 block text-sm text-slate-700 dark:text-slate-300">Remember me</label>
125
+ </div>
126
+ <a href="#" class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300">Forgot password?</a>
127
+ </div>
128
+
129
+ <button type="submit" class="w-full bg-blue-600 text-white py-3 px-4 rounded-lg hover:bg-blue-700 transition focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
130
+ Sign In
131
+ </button>
132
+ </form>
133
+ </div>
134
+
135
+ <div class="mt-6 text-center">
136
+ <p class="text-slate-600 dark:text-slate-400">Don't have an account?
137
+ <a href="#" id="show-signup" class="text-blue-600 dark:text-blue-400 font-medium hover:text-blue-500 dark:hover:text-blue-300">Sign up</a>
138
+ </p>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ </div>
143
+
144
+ <!-- Dashboard -->
145
+ <div id="dashboard" class="hidden min-h-screen">
146
+ <!-- Navigation -->
147
+ <nav class="bg-white dark:bg-slate-800 shadow-sm">
148
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
149
+ <div class="flex justify-between h-16">
150
+ <div class="flex items-center">
151
+ <div class="flex-shrink-0 flex items-center">
152
+ <span class="text-xl font-bold text-blue-600 dark:text-blue-400">AI Hub</span>
153
+ </div>
154
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
155
+ <a href="#" data-section="dashboard" class="nav-link active-nav border-blue-500 text-slate-900 dark:text-white inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
156
+ Dashboard
157
+ </a>
158
+ <a href="#" data-section="agents" class="nav-link border-transparent text-slate-500 dark:text-slate-400 hover:border-slate-300 dark:hover:border-slate-600 hover:text-slate-700 dark:hover:text-slate-200 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
159
+ Agents
160
+ </a>
161
+ <a href="#" data-section="prompts" class="nav-link border-transparent text-slate-500 dark:text-slate-400 hover:border-slate-300 dark:hover:border-slate-600 hover:text-slate-700 dark:hover:text-slate-200 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
162
+ Prompts
163
+ </a>
164
+ <a href="#" data-section="knowledge" class="nav-link border-transparent text-slate-500 dark:text-slate-400 hover:border-slate-300 dark:hover:border-slate-600 hover:text-slate-700 dark:hover:text-slate-200 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
165
+ Knowledge
166
+ </a>
167
+ <a href="#" data-section="chat" class="nav-link border-transparent text-slate-500 dark:text-slate-400 hover:border-slate-300 dark:hover:border-slate-600 hover:text-slate-700 dark:hover:text-slate-200 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
168
+ AI Chat
169
+ </a>
170
+ </div>
171
+ </div>
172
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
173
+ <button id="theme-toggle" type="button" class="bg-white dark:bg-slate-700 p-1 rounded-full text-slate-400 dark:text-slate-300 hover:text-slate-500 dark:hover:text-slate-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
174
+ <span class="sr-only">Toggle theme</span>
175
+ <i class="fas fa-moon dark:hidden h-6 w-6"></i>
176
+ <i class="fas fa-sun hidden dark:block h-6 w-6"></i>
177
+ </button>
178
+
179
+ <button type="button" class="ml-3 bg-white dark:bg-slate-700 p-1 rounded-full text-slate-400 dark:text-slate-300 hover:text-slate-500 dark:hover:text-slate-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
180
+ <span class="sr-only">View notifications</span>
181
+ <i class="fas fa-bell h-6 w-6"></i>
182
+ </button>
183
+
184
+ <!-- Profile dropdown -->
185
+ <div class="ml-3 relative">
186
+ <div>
187
+ <button type="button" class="bg-white dark:bg-slate-700 rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
188
+ <span class="sr-only">Open user menu</span>
189
+ <img class="h-8 w-8 rounded-full" id="nav-profile-img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
190
+ </button>
191
+ </div>
192
+
193
+ <div id="user-menu" class="hidden absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-slate-700 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
194
+ <a href="#" class="block px-4 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-600" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
195
+ <a href="#" class="block px-4 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-600" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
196
+ <a href="#" id="sign-out" class="block px-4 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-600" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ <div class="-mr-2 flex items-center sm:hidden">
201
+ <!-- Mobile menu button -->
202
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-slate-400 dark:text-slate-500 hover:text-slate-500 dark:hover:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false">
203
+ <span class="sr-only">Open main menu</span>
204
+ <i class="fas fa-bars h-6 w-6"></i>
205
+ </button>
206
+ </div>
207
+ </div>
208
+ </div>
209
+
210
+ <!-- Mobile menu, show/hide based on menu state. -->
211
+ <div class="sm:hidden hidden" id="mobile-menu">
212
+ <div class="pt-2 pb-3 space-y-1">
213
+ <a href="#" data-section="dashboard" class="bg-blue-50 dark:bg-slate-700 border-blue-500 text-blue-700 dark:text-blue-400 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Dashboard</a>
214
+ <a href="#" data-section="agents" class="border-transparent text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-700 hover:border-slate-300 dark:hover:border-slate-600 hover:text-slate-700 dark:hover:text-slate-200 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Agents</a>
215
+ <a href="#" data-section="prompts" class="border-transparent text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-700 hover:border-slate-300 dark:hover:border-slate-600 hover:text-slate-700 dark:hover:text-slate-200 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Prompts</a>
216
+ <a href="#" data-section="knowledge" class="border-transparent text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-700 hover:border-slate-300 dark:hover:border-slate-600 hover:text-slate-700 dark:hover:text-slate-200 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Knowledge</a>
217
+ <a href="#" data-section="chat" class="border-transparent text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-700 hover:border-slate-300 dark:hover:border-slate-600 hover:text-slate-700 dark:hover:text-slate-200 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">AI Chat</a>
218
+ </div>
219
+ <div class="pt-4 pb-3 border-t border-slate-200 dark:border-slate-600">
220
+ <div class="flex items-center px-4">
221
+ <div class="flex-shrink-0">
222
+ <img class="h-10 w-10 rounded-full" id="mobile-profile-img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
223
+ </div>
224
+ <div class="ml-3">
225
+ <div class="text-base font-medium text-slate-800 dark:text-white" id="mobile-profile-name">John Doe</div>
226
+ <div class="text-sm font-medium text-slate-500 dark:text-slate-400" id="mobile-profile-email">john@example.com</div>
227
+ </div>
228
+ <button id="mobile-theme-toggle" type="button" class="ml-auto flex-shrink-0 bg-white dark:bg-slate-700 p-1 rounded-full text-slate-400 dark:text-slate-300 hover:text-slate-500 dark:hover:text-slate-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
229
+ <span class="sr-only">Toggle theme</span>
230
+ <i class="fas fa-moon dark:hidden h-6 w-6"></i>
231
+ <i class="fas fa-sun hidden dark:block h-6 w-6"></i>
232
+ </button>
233
+ </div>
234
+ <div class="mt-3 space-y-1">
235
+ <a href="#" class="block px-4 py-2 text-base font-medium text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700">Your Profile</a>
236
+ <a href="#" class="block px-4 py-2 text-base font-medium text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700">Settings</a>
237
+ <a href="#" id="mobile-sign-out" class="block px-4 py-2 text-base font-medium text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700">Sign out</a>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ </nav>
242
+
243
+ <!-- Main Content -->
244
+ <div class="py-6">
245
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
246
+ <!-- Dashboard Section -->
247
+ <div id="dashboard-section" class="section-content">
248
+ <div class="mb-6">
249
+ <h1 class="text-2xl font-bold text-slate-800 dark:text-white">Dashboard</h1>
250
+ <p class="text-slate-600 dark:text-slate-400">Welcome back! Here's your AI workflow hub.</p>
251
+ </div>
252
+
253
+ <!-- Stats -->
254
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
255
+ <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm p-6 dashboard-card">
256
+ <div class="flex items-center">
257
+ <div class="p-3 rounded-lg bg-blue-50 dark:bg-slate-700 text-blue-600 dark:text-blue-400">
258
+ <i class="fas fa-bolt text-xl"></i>
259
+ </div>
260
+ <div class="ml-4">
261
+ <p class="text-sm font-medium text-slate-500 dark:text-slate-400">Active Agents</p>
262
+ <p class="text-2xl font-semibold text-slate-900 dark:text-white">12</p>
263
+ </div>
264
+ </div>
265
+ </div>
266
+
267
+ <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm p-6 dashboard-card">
268
+ <div class="flex items-center">
269
+ <div class="p-3 rounded-lg bg-green-50 dark:bg-slate-700 text-green-600 dark:text-green-400">
270
+ <i class="fas fa-code text-xl"></i>
271
+ </div>
272
+ <div class="ml-4">
273
+ <p class="text-sm font-medium text-slate-500 dark:text-slate-400">Saved Prompts</p>
274
+ <p class="text-2xl font-semibold text-slate-900 dark:text-white">47</p>
275
+ </div>
276
+ </div>
277
+ </div>
278
+
279
+ <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm p-6 dashboard-card">
280
+ <div class="flex items-center">
281
+ <div class="p-3 rounded-lg bg-purple-50 dark:bg-slate-700 text-purple-600 dark:text-purple-400">
282
+ <i class="fas fa-book text-xl"></i>
283
+ </div>
284
+ <div class="ml-4">
285
+ <p class="text-sm font-medium text-slate-500 dark:text-slate-400">Knowledge Docs</p>
286
+ <p class="text-2xl font-semibold text-slate-900 dark:text-white">23</p>
287
+ </div>
288
+ </div>
289
+ </div>
290
+ </div>
291
+
292
+ <!-- Quick Actions -->
293
+ <div class="mb-8">
294
+ <h2 class="text-lg font-medium text-slate-800 dark:text-white mb-4">Quick Actions</h2>
295
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
296
+ <button class="bg-white dark:bg-slate-800 rounded-lg shadow-sm p-4 text-left hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors border border-slate-200 dark:border-slate-700">
297
+ <div class="flex items-center">
298
+ <div class="p-2 rounded-md bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 mr-3">
299
+ <i class="fas fa-comment-dots"></i>
300
+ </div>
301
+ <div>
302
+ <h3 class="font-medium text-slate-800 dark:text-white">New Chat</h3>
303
+ <p class="text-sm text-slate-500 dark:text-slate-400">Start a conversation</p>
304
+ </div>
305
+ </div>
306
+ </button>
307
+
308
+ <button class="bg-white dark:bg-slate-800 rounded-lg shadow-sm p-4 text-left hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors border border-slate-200 dark:border-slate-700">
309
+ <div class="flex items-center">
310
+ <div class="p-2 rounded-md bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-400 mr-3">
311
+ <i class="fas fa-plus"></i>
312
+ </div>
313
+ <div>
314
+ <h3 class="font-medium text-slate-800 dark:text-white">Add Prompt</h3>
315
+ <p class="text-sm text-slate-500 dark:text-slate-400">Create new prompt</p>
316
+ </div>
317
+ </div>
318
+ </button>
319
+
320
+ <button class="bg-white dark:bg-slate-800 rounded-lg shadow-sm p-4 text-left hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors border border-slate-200 dark:border-slate-700">
321
+ <div class="flex items-center">
322
+ <div class="p-2 rounded-md bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-400 mr-3">
323
+ <i class="fas fa-file-alt"></i>
324
+ </div>
325
+ <div>
326
+ <h3 class="font-medium text-slate-800 dark:text-white">New Doc</h3>
327
+ <p class="text-sm text-slate-500 dark:text-slate-400">Add to knowledge base</p>
328
+ </div>
329
+ </div>
330
+ </button>
331
+
332
+ <button class="bg-white dark:bg-slate-800 rounded-lg shadow-sm p-4 text-left hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors border border-slate-200 dark:border-slate-700">
333
+ <div class="flex items-center">
334
+ <div class="p-2 rounded-md bg-yellow-100 dark:bg-yellow-900 text-yellow-600 dark:text-yellow-400 mr-3">
335
+ <i class="fas fa-robot"></i>
336
+ </div>
337
+ <div>
338
+ <h3 class="font-medium text-slate-800 dark:text-white">Run Agent</h3>
339
+ <p class="text-sm text-slate-500 dark:text-slate-400">Execute workflow</p>
340
+ </div>
341
+ </div>
342
+ </button>
343
+ </div>
344
+ </div>
345
+
346
+ <!-- Recent Activity -->
347
+ <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm overflow-hidden dashboard-card">
348
+ <div class="px-6 py-5 border-b border-slate-200 dark:border-slate-700">
349
+ <h3 class="text-lg font-medium leading-6 text-slate-900 dark:text-white">Recent Activity</h3>
350
+ </div>
351
+ <div class="divide-y divide-slate-200 dark:divide-slate-700">
352
+ <div class="px-6 py-4">
353
+ <div class="flex items-center">
354
+ <div class="flex-shrink-0">
355
+ <i class="fas fa-comment text-blue-500"></i>
356
+ </div>
357
+ <div class="ml-4">
358
+ <div class="text-sm font-medium text-slate-900 dark:text-white">New chat started</div>
359
+ <div class="text-sm text-slate-500 dark:text-slate-400">With GPT-4 about marketing strategies</div>
360
+ </div>
361
+ <div class="ml-auto text-sm text-slate-500 dark:text-slate-400">
362
+ 2h ago
363
+ </div>
364
+ </div>
365
+ </div>
366
+
367
+ <div class="px-6 py-4">
368
+ <div class="flex items-center">
369
+ <div class="flex-shrink-0">
370
+ <i class="fas fa-code text-green-500"></i>
371
+ </div>
372
+ <div class="ml-4">
373
+ <div class="text-sm font-medium text-slate-900 dark:text-white">Prompt saved</div>
374
+ <div class="text-sm text-slate-500 dark:text-slate-400">"Content calendar generator"</div>
375
+ </div>
376
+ <div class="ml-auto text-sm text-slate-500 dark:text-slate-400">
377
+ 5h ago
378
+ </div>
379
+ </div>
380
+ </div>
381
+
382
+ <div class="px-6 py-4">
383
+ <div class="flex items-center">
384
+ <div class="flex-shrink-0">
385
+ <i class="fas fa-robot text-purple-500"></i>
386
+ </div>
387
+ <div class="ml-4">
388
+ <div class="text-sm font-medium text-slate-900 dark:text-white">Agent executed</div>
389
+ <div class="text-sm text-slate-500 dark:text-slate-400">"Social media post generator"</div>
390
+ </div>
391
+ <div class="ml-auto text-sm text-slate-500 dark:text-slate-400">
392
+ 1d ago
393
+ </div>
394
+ </div>
395
+ </div>
396
+ </div>
397
+ <div class="px-6 py-4 bg-slate-50 dark:bg-slate-700 text-right">
398
+ <button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
399
+ View All Activity
400
+ </button>
401
+ </div>
402
+ </div>
403
+ </div>
404
+
405
+ <!-- Agents Section -->
406
+ <div id="agents-section" class="section-content hidden">
407
+ <div class="mb-6">
408
+ <h1 class="text-2xl font-bold text-slate-800 dark:text-white">AI Agents</h1>
409
+ <p class="text-slate-600 dark:text-slate-400">Pre-configured automation workflows</p>
410
+ </div>
411
+
412
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
413
+ <!-- Agent Card 1 -->
414
+ <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm p-6 dashboard-card">
415
+ <div class="flex items-start">
416
+ <div class="p-3 rounded-lg bg-blue-50 dark:bg-slate-700 text-blue-600 dark:text-blue-400 mr-4">
417
+ <i class="fas fa-comment-dots text-xl"></i>
418
+ </div>
419
+ <div>
420
+ <h3 class="text-lg font-medium text-slate-800 dark:text-white mb-1">Social Caption Generator</h3>
421
+ <p class="text-sm text-slate-600 dark:text-slate-400 mb-4">Creates engaging social media captions based on your input</p>
422
+ <div class="flex flex-wrap gap-2 mb-4">
423
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">Instagram</span>
424
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">Twitter</span>
425
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200">LinkedIn</span>
426
+ </div>
427
+ <button class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
428
+ Run Agent
429
+ </button>
430
+ </div>
431
+ </div>
432
+ </div>
433
+
434
+ <!-- Agent Card 2 -->
435
+ <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm p-6 dashboard-card">
436
+ <div class="flex items-start">
437
+ <div class="p-3 rounded-lg bg-green-50 dark:bg-slate-700 text-green-600 dark:text-green-400 mr-4">
438
+ <i class="fas fa-image text-xl"></i>
439
+ </div>
440
+ <div>
441
+ <h3 class="text-lg font-medium text-slate-800 dark:text-white mb-1">Image Generator</h3>
442
+ <p class="text-sm text-slate-600 dark:text-slate-400 mb-4">Creates AI-generated images based on your description</p>
443
+ <div class="flex flex-wrap gap-2 mb-4">
444
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">DALL·E</span>
445
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200">Stable Diffusion</span>
446
+ </div>
447
+ <button class="w-full bg-green-600 text-white py-2 px-4 rounded-lg hover:bg-green-700 transition focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2">
448
+ Run Agent
449
+ </button>
450
+ </div>
451
+ </div>
452
+ </div>
453
+
454
+ <!-- Agent Card 3 -->
455
+ <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm p-6 dashboard-card">
456
+ <div class="flex items-start">
457
+ <div class="p-3 rounded-lg bg-purple-50 dark:bg-slate-700 text-purple-600 dark:text-purple-400 mr-4">
458
+ <i class="fas fa-chart-line text-xl"></i>
459
+ </div>
460
+ <div>
461
+ <h3 class="text-lg font-medium text-slate-800 dark:text-white mb-1">Data Analyzer</h3>
462
+ <p class="text-sm text-slate-600 dark:text-slate-400 mb-4">Analyzes and visualizes your data with AI insights</p>
463
+ <div class="flex flex-wrap gap-2 mb-4">
464
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200">CSV</span>
465
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-pink-100 dark:bg-pink-900 text-pink-800 dark:text-pink-200">Excel</span>
466
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">JSON</span>
467
+ </div>
468
+ <button class="w-full bg-purple-600 text-white py-2 px-4 rounded-lg hover:bg-purple-700 transition focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2">
469
+ Run Agent
470
+ </button>
471
+ </div>
472
+ </div>
473
+ </div>
474
+
475
+ <!-- Agent Card 4 -->
476
+ <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm p-6 dashboard-card">
477
+ <div class="flex items-start">
478
+ <div class="p-3 rounded-lg bg-yellow-50 dark:bg-slate-700 text-yellow-600 dark:text-yellow-400 mr-4">
479
+ <i class="fas fa-envelope text-xl"></i>
480
+ </div>
481
+ <div>
482
+ <h3 class="text-lg font-medium text-slate-800 dark:text-white mb-1">Email Writer</h3>
483
+ <p class="text-sm text-slate-600 dark:text-slate-400 mb-4">Composes professional emails based on your brief</p>
484
+ <div class="flex flex-wrap gap-2 mb-4">
485
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">Business</span>
486
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">Follow-up</span>
487
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200">Cold Outreach</span>
488
+ </div>
489
+ <button class="w-full bg-yellow-600 text-white py-2 px-4 rounded-lg hover:bg-yellow-700 transition focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2">
490
+ Run Agent
491
+ </button>
492
+ </div>
493
+ </div>
494
+ </div>
495
+
496
+ <!-- Agent Card 5 -->
497
+ <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm p-6 dashboard-card">
498
+ <div class="flex items-start">
499
+ <div class="p-3 rounded-lg bg-red-50 dark:bg-slate-700 text-red-600 dark:text-red-400 mr-4">
500
+ <i class="fas fa-file-alt text-xl"></i>
501
+ </div>
502
+ <div>
503
+ <h3 class="text-lg font-medium text-slate-800 dark:text-white mb-1">Content Summarizer</h3>
504
+ <p class="text-sm text-slate-600 dark:text-slate-400 mb-4">Summarizes long articles and documents</p>
505
+ <div class="flex flex-wrap gap-2 mb-4">
506
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200">Articles</span>
507
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200">PDFs</span>
508
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">Webpages</span>
509
+ </div>
510
+ <button class="w-full bg-red-600 text-white py-2 px-4 rounded-lg hover:bg-red-700 transition focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
511
+ Run Agent
512
+ </button>
513
+ </div>
514
+ </div>
515
+ </div>
516
+
517
+ <!-- Add New Agent Card -->
518
+ <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm p-6 dashboard-card border-2 border-dashed border-slate-300 dark:border-slate-600 hover:border-blue-500 dark:hover:border-blue-400 transition-colors flex flex-col items-center justify-center">
519
+ <div class="text-center">
520
+ <i class="fas fa-plus text-3xl text-slate-400 dark:text-slate-500 mb-3"></i>
521
+ <h3 class="text-lg font-medium text-slate-800 dark:text-white mb-1">Create New Agent</h3>
522
+ <p class="text-sm text-slate-600 dark:text-slate-400 mb-4">Build a custom AI workflow</p>
523
+ <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
524
+ New Agent
525
+ </button>
526
+ </div>
527
+ </div>
528
+ </div>
529
+ </div>
530
+
531
+ <!-- Prompts Section -->
532
+ <div id="prompts-section" class="section-content hidden">
533
+ <div class="mb-6">
534
+ <div class="flex justify-between items-center">
535
+ <div>
536
+ <h1 class="text-2xl font-bold text-slate-800 dark:text-white">Prompt Library</h1>
537
+ <p class="text-slate-600 dark:text-slate-400">Your collection of AI prompts and templates</p>
538
+ </div>
539
+ <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
540
+ <i class="fas fa-plus mr-2"></i> New Prompt
541
+ </button>
542
+ </div>
543
+ </div>
544
+
545
+ <!-- Filters -->
546
+ <div class="mb-6 bg-white dark:bg-slate-800 rounded-lg shadow-sm p-4 dashboard-card">
547
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
548
+ <div>
549
+ <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Category</label>
550
+ <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-slate-300 dark:border-slate-600 dark:bg-slate-700 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
551
+ <option>All Categories</option>
552
+ <option>Marketing</option>
553
+ <option>Content</option>
554
+ <option>Code</option>
555
+ <option>Analysis</option>
556
+ </select>
557
+ </div>
558
+ <div>
559
+ <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">AI Model</label>
560
+ <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-slate-300 dark:border-slate-600 dark:bg-slate-700 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
561
+ <option>All Models</option>
562
+ <option>GPT-4</option>
563
+ <option>GPT-3.5</option>
564
+ <option>Claude</option>
565
+ <option>Gemini</option>
566
+ </select>
567
+ </div>
568
+ <div>
569
+ <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Sort By</label>
570
+ <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-slate-300 dark:border-slate-600 dark:bg-slate-700 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
571
+ <option>Recently Used</option>
572
+ <option>Most Popular</option>
573
+ <option>A-Z</option>
574
+ <option>Newest First</option>
575
+ </select>
576
+ </div>
577
+ <div>
578
+ <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Search</label>
579
+ <div class="mt-1 relative rounded-md shadow-sm">
580
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
581
+ <i class="fas fa-search text-slate-400"></i>
582
+ </div>
583
+ <input type="text" class="focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 sm:text-sm border-slate-300 dark:border-slate-600 dark:bg-slate-700 rounded-md" placeholder="Search prompts...">
584
+ </div>
585
+ </div>
586
+ </div>
587
+ </div>
588
+
589
+ <!-- Prompts Grid -->
590
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
591
+ <!-- Prompt Card 1 -->
592
+ <div class="prompt-card rounded-lg p-4 cursor-pointer transition-colors">
593
+ <div class="flex justify-between items-start mb-3">
594
+ <h3 class="font-medium text-slate-800 dark:text-white">Blog Post Outline</h3>
595
+ <div class="flex space-x-2">
596
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">GPT-4</span>
597
+ </div>
598
+ </div>
599
+ <p class="text-sm text-slate-600 dark:text-slate-400 mb-4">Generates a structured outline for a blog post based on your topic and keywords.</p>
600
+ <div class="flex flex-wrap gap-2 mb-4">
601
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">Content</span>
602
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200">SEO</span>
603
+ </div>
604
+ <div class="flex justify-between items-center">
605
+ <div class="flex items-center text-sm text-slate-500 dark:text-slate-400">
606
+ <i class="fas fa-history mr-1"></i> 2 days ago
607
+ </div>
608
+ <button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">
609
+ <i class="fas fa-play"></i> Run
610
+ </button>
611
+ </div>
612
+ </div>
613
+
614
+ <!-- Prompt Card 2 -->
615
+ <div class="prompt-card rounded-lg p-4 cursor-pointer transition-colors">
616
+ <div class="flex justify-between items-start mb-3">
617
+ <h3 class="font-medium text-slate-800 dark:text-white">Python Code Debugger</h3>
618
+ <div class="flex space-x-2">
619
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200">Claude</span>
620
+ </div>
621
+ </div>
622
+ <p class="text-sm text-slate-600 dark:text-slate-400 mb-4">Analyzes and fixes errors in your Python code with explanations.</p>
623
+ <div class="flex flex-wrap gap-2 mb-4">
624
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200">Programming</span>
625
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">Debugging</span>
626
+ </div>
627
+ <div class="flex justify-between items-center">
628
+ <div class="flex items-center text-sm text-slate-500 dark:text-slate-400">
629
+ <i class="fas fa-history mr-1"></i> 1 week ago
630
+ </div>
631
+ <button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">
632
+ <i class="fas fa-play"></i> Run
633
+ </button>
634
+ </div>
635
+ </div>
636
+
637
+ <!-- Prompt Card 3 -->
638
+ <div class="prompt-card rounded-lg p-4 cursor-pointer transition-colors">
639
+ <div class="flex justify-between items-start mb-3">
640
+ <h3 class="font-medium text-slate-800 dark:text-white">Cold Email Template</h3>
641
+ <div class="flex space-x-2">
642
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">GPT-4</span>
643
+ </div>
644
+ </div>
645
+ <p class="text-sm text-slate-600 dark:text-slate-400 mb-4">Creates professional cold email templates for outreach campaigns.</p>
646
+ <div class="flex flex-wrap gap-2 mb-4">
647
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200">Sales</span>
648
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">Outreach</span>
649
+ </div>
650
+ <div class="flex justify-between items-center">
651
+ <div class="flex items-center text-sm text-slate-500 dark:text-slate-400">
652
+ <i class="fas fa-history mr-1"></i> 3 days ago
653
+ </div>
654
+ <button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">
655
+ <i class="fas fa-play"></i> Run
656
+ </button>
657
+ </div>
658
+ </div>
659
+
660
+ <!-- Prompt Card 4 -->
661
+ <div class="prompt-card rounded-lg p-4 cursor-pointer transition-colors">
662
+ <div class="flex justify-between items-start mb-3">
663
+ <h3 class="font-medium text-slate-800 dark:text-white">Data Analysis Report</h3>
664
+ <div class="flex space-x-2">
665
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">Gemini</span>
666
+ </div>
667
+ </div>
668
+ <p class="text-sm text-slate-600 dark:text-slate-400 mb-4">Generates insights and reports from your dataset in natural language.</p>
669
+ <div class="flex flex-wrap gap-2 mb-4">
670
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200">Analysis</span>
671
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">Data</span>
672
+ </div>
673
+ <div class="flex justify-between items-center">
674
+ <div class="flex items-center text-sm text-slate-500 dark:text-slate-400">
675
+ <i class="fas fa-history mr-1"></i> 5 days ago
676
+ </div>
677
+ <button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">
678
+ <i class="fas fa-play"></i> Run
679
+ </button>
680
+ </div>
681
+ </div>
682
+
683
+ <!-- Prompt Card 5 -->
684
+ <div class="prompt-card rounded-lg p-4 cursor-pointer transition-colors">
685
+ <div class="flex justify-between items-start mb-3">
686
+ <h3 class="font-medium text-slate-800 dark:text-white">Social Media Post</h3>
687
+ <div class="flex space-x-2">
688
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">GPT-4</span>
689
+ </div>
690
+ </div>
691
+ <p class="text-sm text-slate-600 dark:text-slate-400 mb-4">Creates engaging social media posts for various platforms.</p>
692
+ <div class="flex flex-wrap gap-2 mb-4">
693
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200">Marketing</span>
694
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-pink-100 dark:bg-pink-900 text-pink-800 dark:text-pink-200">Social</span>
695
+ </div>
696
+ <div class="flex justify-between items-center">
697
+ <div class="flex items-center text-sm text-slate-500 dark:text-slate-400">
698
+ <i class="fas fa-history mr-1"></i> 1 day ago
699
+ </div>
700
+ <button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">
701
+ <i class="fas fa-play"></i> Run
702
+ </button>
703
+ </div>
704
+ </div>
705
+
706
+ <!-- Prompt Card 6 -->
707
+ <div class="prompt-card rounded-lg p-4 cursor-pointer transition-colors">
708
+ <div class="flex justify-between items-start mb-3">
709
+ <h3 class="font-medium text-slate-800 dark:text-white">Product Description</h3>
710
+ <div class="flex space-x-2">
711
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">GPT-4</span>
712
+ </div>
713
+ </div>
714
+ <p class="text-sm text-slate-600 dark:text-slate-400 mb-4">Writes compelling product descriptions for e-commerce.</p>
715
+ <div class="flex flex-wrap gap-2 mb-4">
716
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">E-commerce</span>
717
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">SEO</span>
718
+ </div>
719
+ <div class="flex justify-between items-center">
720
+ <div class="flex items-center text-sm text-slate-500 dark:text-slate-400">
721
+ <i class="fas fa-history mr-1"></i> 4 days ago
722
+ </div>
723
+ <button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">
724
+ <i class="fas fa-play"></i> Run
725
+ </button>
726
+ </div>
727
+ </div>
728
+ </div>
729
+ </div>
730
+
731
+ <!-- Knowledge Base Section -->
732
+ <div id="knowledge-section" class="section-content hidden">
733
+ <div class="mb-6">
734
+ <div class="flex justify-between items-center">
735
+ <div>
736
+ <h1 class="text-2xl font-bold text-slate-800 dark:text-white">Knowledge Base</h1>
737
+ <p class="text-slate-600 dark:text-slate-400">Your centralized documentation and resources</p>
738
+ </div>
739
+ <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
740
+ <i class="fas fa-plus mr-2"></i> New Document
741
+ </button>
742
+ </div>
743
+ </div>
744
+
745
+ <!-- Knowledge Grid -->
746
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
747
+ <!-- Document Card 1 -->
748
+ <div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm p-6 dashboard-card cursor-pointer">
749
+ <div class="flex items-start mb-4">
750
+ <div class="p-3 rounded-lg bg-blue-50 dark:bg-slate-700 text-blue-600 dark:text-blue-400 mr-4">
751
+ <i class="fas fa-file-alt"></i>
752
+ </div>
753
+ <div>
754
+ <h3 class="text-lg font-medium text-slate-800 dark:text-white mb-1">API Documentation</h3>
755
+ <p class="text-sm text-slate-600 dark:text-slate-400">Endpoints and usage examples for our REST API</p>
756
+ </div>
757
+ </div>
758
+ <div class="flex flex-wrap gap-2">
759
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">API</span>
760
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">Technical</span>
761
+ </div>
762
+ </div>
763
+
764
+ <!-- Document Card 2 -->
765
+ <div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm p-6 dashboard-card cursor-pointer">
766
+ <div class="flex items-start mb-4">
767
+ <div class="p-3 rounded-lg bg-green-50 dark:bg-slate-700 text-green-600 dark:text-green-400 mr-4">
768
+ <i class="fas fa-book"></i>
769
+ </div>
770
+ <div>
771
+ <h3 class="text-lg font-medium text-slate-800 dark:text-white mb-1">Style Guide</h3>
772
+ <p class="text-sm text-slate-600 dark:text-slate-400">Brand guidelines and content writing standards</p>
773
+ </div>
774
+ </div>
775
+ <div class="flex flex-wrap gap-2">
776
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">Brand</span>
777
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200">Content</span>
778
+ </div>
779
+ </div>
780
+
781
+ <!-- Document Card 3 -->
782
+ <div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm p-6 dashboard-card cursor-pointer">
783
+ <div class="flex items-start mb-4">
784
+ <div class="p-3 rounded-lg bg-purple-50 dark:bg-slate-700 text-purple-600 dark:text-purple-400 mr-4">
785
+ <i class="fas fa-users"></i>
786
+ </div>
787
+ <div>
788
+ <h3 class="text-lg font-medium text-slate-800 dark:text-white mb-1">Onboarding</h3>
789
+ <p class="text-sm text-slate-600 dark:text-slate-400">New employee onboarding process and resources</p>
790
+ </div>
791
+ </div>
792
+ <div class="flex flex-wrap gap-2">
793
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200">HR</span>
794
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">Process</span>
795
+ </div>
796
+ </div>
797
+
798
+ <!-- Document Card 4 -->
799
+ <div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm p-6 dashboard-card cursor-pointer">
800
+ <div class="flex items-start mb-4">
801
+ <div class="p-3 rounded-lg bg-red-50 dark:bg-slate-700 text-red-600 dark:text-red-400 mr-4">
802
+ <i class="fas fa-server"></i>
803
+ </div>
804
+ <div>
805
+ <h3 class="text-lg font-medium text-slate-800 dark:text-white mb-1">Infrastructure</h3>
806
+ <p class="text-sm text-slate-600 dark:text-slate-400">Server setup and deployment procedures</p>
807
+ </div>
808
+ </div>
809
+ <div class="flex flex-wrap gap-2">
810
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200">DevOps</span>
811
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">Technical</span>
812
+ </div>
813
+ </div>
814
+
815
+ <!-- Document Card 5 -->
816
+ <div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm p-6 dashboard-card cursor-pointer">
817
+ <div class="flex items-start mb-4">
818
+ <div class="p-3 rounded-lg bg-yellow-50 dark:bg-slate-700 text-yellow-600 dark:text-yellow-400 mr-4">
819
+ <i class="fas fa-chart-pie"></i>
820
+ </div>
821
+ <div>
822
+ <h3 class="text-lg font-medium text-slate-800 dark:text-white mb-1">Analytics</h3>
823
+ <p class="text-sm text-slate-600 dark:text-slate-400">Metrics definitions and reporting standards</p>
824
+ </div>
825
+ </div>
826
+ <div class="flex flex-wrap gap-2">
827
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">Data</span>
828
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200">Reporting</span>
829
+ </div>
830
+ </div>
831
+
832
+ <!-- Document Card 6 -->
833
+ <div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm p-6 dashboard-card cursor-pointer">
834
+ <div class="flex items-start mb-4">
835
+ <div class="p-3 rounded-lg bg-indigo-50 dark:bg-slate-700 text-indigo-600 dark:text-indigo-400 mr-4">
836
+ <i class="fas fa-lightbulb"></i>
837
+ </div>
838
+ <div>
839
+ <h3 class="text-lg font-medium text-slate-800 dark:text-white mb-1">Best Practices</h3>
840
+ <p class="text-sm text-slate-600 dark:text-slate-400">Team knowledge and lessons learned</p>
841
+ </div>
842
+ </div>
843
+ <div class="flex flex-wrap gap-2">
844
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200">Knowledge</span>
845
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">Process</span>
846
+ </div>
847
+ </div>
848
+ </div>
849
+ </div>
850
+
851
+ <!-- AI Chat Section -->
852
+ <div id="chat-section" class="section-content hidden">
853
+ <div class="mb-6">
854
+ <h1 class="text-2xl font-bold text-slate-800 dark:text-white">AI Chat</h1>
855
+ <p class="text-slate-600 dark:text-slate-400">Conversational interface with multiple AI models</p>
856
+ </div>
857
+
858
+ <div class="flex flex-col h-[calc(100vh-200px)]">
859
+ <!-- Chat Header -->
860
+ <div class="bg-white dark:bg-slate-800 rounded-t-xl shadow-sm p-4 border-b border-slate-200 dark:border-slate-700">
861
+ <div class="flex justify-between items-center">
862
+ <div>
863
+ <h2 class="text-lg font-medium text-slate-800 dark:text-white">New Conversation</h2>
864
+ </div>
865
+ <div class="flex items-center space-x-4">
866
+ <div>
867
+ <label for="ai-model" class="sr-only">AI Model</label>
868
+ <select id="ai-model" class="block w-full rounded-md border-slate-300 dark:border-slate-600 dark:bg-slate-700 py-2 pl-3 pr-10 text-base focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm">
869
+ <option>GPT-4</option>
870
+ <option>GPT-3.5</option>
871
+ <option>Claude 3</option>
872
+ <option>Gemini Pro</option>
873
+ <option>DeepSeek</option>
874
+ </select>
875
+ </div>
876
+ <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
877
+ <i class="fas fa-plus mr-1"></i> New
878
+ </button>
879
+ </div>
880
+ </div>
881
+ </div>
882
+
883
+ <!-- Chat Messages -->
884
+ <div class="flex-1 overflow-y-auto bg-white dark:bg-slate-800 p-4">
885
+ <!-- AI Response -->
886
+ <div class="mb-6 ai-response p-4 rounded-lg">
887
+ <div class="flex items-start">
888
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center text-blue-600 dark:text-blue-400">
889
+ <i class="fas fa-robot"></i>
890
+ </div>
891
+ <div class="ml-4">
892
+ <div class="text-sm font-medium text-slate-900 dark:text-white mb-1">AI Assistant</div>
893
+ <div class="markdown-content text-sm text-slate-700 dark:text-slate-300">
894
+ <p>Hello! I'm your AI assistant. How can I help you today? Here are some things I can do:</p>
895
+ <ul class="list-disc pl-5 mt-2">
896
+ <li>Answer questions on various topics</li>
897
+ <li>Help with content creation and editing</li>
898
+ <li>Generate code and explain programming concepts</li>
899
+ <li>Analyze and summarize documents</li>
900
+ </ul>
901
+ <p class="mt-2">What would you like to work on?</p>
902
+ </div>
903
+ </div>
904
+ </div>
905
+ </div>
906
+
907
+ <!-- User Message -->
908
+ <div class="mb-6 p-4 rounded-lg bg-slate-100 dark:bg-slate-700">
909
+ <div class="flex items-start">
910
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-slate-200 dark:bg-slate-600 flex items-center justify-center text-slate-600 dark:text-slate-300">
911
+ <i class="fas fa-user"></i>
912
+ </div>
913
+ <div class="ml-4">
914
+ <div class="text-sm font-medium text-slate-900 dark:text-white mb-1">You</div>
915
+ <div class="text-sm text-slate-700 dark:text-slate-300">
916
+ Can you help me write a Python script to analyze CSV data?
917
+ </div>
918
+ </div>
919
+ </div>
920
+ </div>
921
+
922
+ <!-- AI Response -->
923
+ <div class="mb-6 ai-response p-4 rounded-lg">
924
+ <div class="flex items-start">
925
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center text-blue-600 dark:text-blue-400">
926
+ <i class="fas fa-robot"></i>
927
+ </div>
928
+ <div class="ml-4">
929
+ <div class="text-sm font-medium text-slate-900 dark:text-white mb-1">AI Assistant</div>
930
+ <div class="markdown-content text-sm text-slate-700 dark:text-slate-300">
931
+ <p>Certainly! Here's a Python script using pandas to analyze CSV data:</p>
932
+ <pre><code class="language-python">import pandas as pd
933
+
934
+ # Load the CSV file
935
+ df = pd.read_csv('data.csv')
936
+
937
+ # Display basic statistics
938
+ print(df.describe())
939
+
940
+ # Show the first 5 rows
941
+ print(df.head())
942
+
943
+ # Calculate specific metrics
944
+ average_value = df['column_name'].mean()
945
+ max_value = df['column_name'].max()
946
+
947
+ print(f"Average: {average_value}")
948
+ print(f"Maximum: {max_value}")</code></pre>
949
+ <p class="mt-2">You'll need to install pandas first if you don't have it:</p>
950
+ <pre><code class="language-bash">pip install pandas</code></pre>
951
+ <p class="mt-2">Would you like me to explain any part of this in more detail or modify it for your specific needs?</p>
952
+ </div>
953
+ </div>
954
+ </div>
955
+ </div>
956
+ </div>
957
+
958
+ <!-- Chat Input -->
959
+ <div class="bg-white dark:bg-slate-800 rounded-b-xl shadow-sm p-4 border-t border-slate-200 dark:border-slate-700">
960
+ <div class="flex items-end space-x-2">
961
+ <div class="flex-1">
962
+ <textarea rows="2" class="block w-full rounded-md border-slate-300 dark:border-slate-600 dark:bg-slate-700 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" placeholder="Type your message..."></textarea>
963
+ </div>
964
+ <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
965
+ <i class="fas fa-paper-plane mr-2"></i> Send
966
+ </button>
967
+ </div>
968
+ <div class="mt-2 flex justify-between items-center text-xs text-slate-500 dark:text-slate-400">
969
+ <div>
970
+ <button type="button" class="inline-flex items-center text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300">
971
+ <i class="fas fa-paperclip mr-1"></i> Attach
972
+ </button>
973
+ <button type="button" class="ml-3 inline-flex items-center text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300">
974
+ <i class="fas fa-code mr-1"></i> Code
975
+ </button>
976
+ </div>
977
+ <div>
978
+ <span>Press Enter to send, Shift+Enter for new line</span>
979
+ </div>
980
+ </div>
981
+ </div>
982
+ </div>
983
+ </div>
984
+ </div>
985
+ </div>
986
+ </div>
987
+ </div>
988
+
989
+ <script>
990
+ // Initialize Supabase
991
+ const supabaseUrl = 'https://your-project.supabase.co';
992
+ const supabaseKey = 'your-anon-key';
993
+ const supabase = supabase.createClient(supabaseUrl, supabaseKey);
994
+
995
+ // App State
996
+ const state = {
997
+ currentScreen: 'login',
998
+ currentSection: 'dashboard',
999
+ user: null,
1000
+ darkMode: localStorage.getItem('darkMode') === 'true' ||
1001
+ (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)
1002
+ };
1003
+
1004
+ // DOM Elements
1005
+ const authScreens = document.getElementById('auth-screens');
1006
+ const loginScreen = document.getElementById('login-screen');
1007
+ const dashboard = document.getElementById('dashboard');
1008
+ const googleSignInBtn = document.getElementById('google-signin');
1009
+ const signOutBtn = document.getElementById('sign-out');
1010
+ const mobileSignOutBtn = document.getElementById('mobile-sign-out');
1011
+ const mobileMenuBtn = document.querySelector('[aria-controls="mobile-menu"]');
1012
+ const mobileMenu = document.getElementById('mobile-menu');
1013
+ const userMenuBtn = document.getElementById('
1014
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Based on your background (AI Automation, n8n, Notion systems, Supabase), here’s an improved and translated version of your prompt, perfectly suited for tools like Lovable.dev, Vercel AI SDK, or any fullstack AI builder (Next.js, Astro, FlutterFlow, etc.). ⸻ 🧠 German Prompt – für eine WebApp mit Supabase, Google Auth und AI-Funktionalität ⸻ 🔧 Projektziel Erstelle eine moderne, performante WebApp mit Login über Google (via Supabase Auth). Nach dem Login soll der Nutzer Zugriff auf ein zentrales Dashboard erhalten, das verschiedene KI-Module bedient. Die Anwendung dient als zentrale Steuerzentrale für KI-Workflows (z. B. n8n), Prompts und Wissensdokumente – mit einem Fokus auf gute UX, klarer Struktur und erweiterbarer AI-Architektur. ⸻ 🛠 Funktionale Anforderungen 🔐 Authentifizierung • Google OAuth-Login via Supabase Auth • Nutzerverwaltung & Session-Handling via Supabase • Redirect nach Login zu /dashboard • Wenn bereits eingeloggt → automatische Weiterleitung 📊 Dashboard Nach dem Login soll ein übersichtliches Dashboard erscheinen mit folgenden Komponenten: 1. ✅ Agenten-Buttons • Button-Karten für verschiedene Automationen (z. B. „Social Caption generieren“, „Bild erstellen“, „Daten analysieren“) • Jeder Button triggert einen vordefinierten Webhook (n8n) 2. 🧠 Prompt-Galerie • Datenbankähnliches UI wie Notion (Cards, Tabellen oder Listen) • Prompts sind kategorisiert (z. B. Rolle, Ziel, Stil, Tonfall) • Einzelansicht mit Bearbeitungsmöglichkeit + „Prompt testen“-Button • Verknüpfung zu Systemen wie OpenAI oder Gemini 3. 📚 Knowledge-Base • Markdown-kompatibles Dokumentenarchiv • Kategorien und Tags • Suche und Volltextfilter • Optional: semantische KI-Suche mit Vektor-Datenbank 4. 🤖 AI-Chatbot • Wählbare AI-Engines: OpenAI, Gemini, DeepSeek, OpenRouter • Konfiguration über API-Key (Nutzer kann Key eingeben oder hinterlegen) • Chatverlauf speichern • Unterstützung für Text, JSON, Bilder (z. B. Markdown oder DALL·E-Vorschau) ⸻ 🌙 UI / UX Anforderungen • Dunkel-/Hellmodus-Schalter • Responsive Design (Desktop & Tablet) • Modernes Design mit Tailwind, Framer Motion oder ShadCN • Klar strukturierte Navigation: Sidebar + Main Panel • Fokus auf reduzierte Klickpfade und kontextbewusstes Arbeiten ⸻ 🧩 Technologie-Stack • Frontend: Next.js (App Router), Tailwind CSS, shadcn/ui • Backend/Auth: Supabase (Auth + DB) • AI APIs (optional via toggle): • OpenAI • Google Gemini • DeepSeek • OpenRouter • Webhook-Unterstützung: Trigger-Buttons → n8n Flows • Prompt- und Output-Management: Datenbankbasiert (Supabase Tables) ⸻ 🔐 Beispiel für .env Konfiguration NEXT_PUBLIC_SUPABASE_URL=https://xlfboxorogcafgkokjeg.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJI... ⸻ ✅ Zielgruppe KI-Interessierte Power-User, Freelancer, Content-Teams oder Entwickler, die skalierbare Prompt-Systeme, personalisierte KI-Experimente und Automationen über ein zentrales Interface steuern wollen. ⸻ „Don’t Travel. Explore.“ – Nur diesmal in deinem Workflow. Mach deine KI-Systeme benutzbar. Ohne Umwege. ⸻ 📦 Möchtest du dieses Prompt direkt als Lovable-ready JSON, oder soll ich dir ein deploybares Next.js Starter-Template mit Supabase + Auth + UI liefern?