Hugging Face's logo

Spaces:
JayStormX8
/
eosv2
Running

App Files Community
JayStormX8 commited on
Commit
5e40726
·
verified ·
1 Parent(s): b7b6dfa

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1199 -18
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Eosv2
3
- emoji: 🔥
4
- colorFrom: green
5
- colorTo: gray
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: eosv2
3
+ emoji: 🐳
4
+ colorFrom: purple
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,1200 @@
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>EOS AI Business Suite</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
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
12
+
13
+ :root {
14
+ --primary: #4F46E5;
15
+ --secondary: #10B981;
16
+ --accent: #F59E0B;
17
+ --dark: #1F2937;
18
+ --light: #F9FAFB;
19
+ }
20
+
21
+ body {
22
+ font-family: 'Poppins', sans-serif;
23
+ background-color: #F3F4F6;
24
+ color: var(--dark);
25
+ }
26
+
27
+ .gradient-bg {
28
+ background: linear-gradient(135deg, var(--primary) 0%, #7C3AED 100%);
29
+ }
30
+
31
+ .sidebar-item:hover {
32
+ background-color: rgba(255, 255, 255, 0.1);
33
+ }
34
+
35
+ .sidebar-item.active {
36
+ background-color: rgba(255, 255, 255, 0.2);
37
+ }
38
+
39
+ .pulse-animation {
40
+ animation: pulse 2s infinite;
41
+ }
42
+
43
+ @keyframes pulse {
44
+ 0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); }
45
+ 70% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); }
46
+ 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
47
+ }
48
+
49
+ .task-card:hover {
50
+ transform: translateY(-2px);
51
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
52
+ }
53
+
54
+ .progress-ring__circle {
55
+ transition: stroke-dashoffset 0.35s;
56
+ transform: rotate(-90deg);
57
+ transform-origin: 50% 50%;
58
+ }
59
+
60
+ .ai-response {
61
+ border-left: 4px solid var(--primary);
62
+ }
63
+
64
+ .tooltip {
65
+ position: relative;
66
+ }
67
+
68
+ .tooltip:hover .tooltip-text {
69
+ visibility: visible;
70
+ opacity: 1;
71
+ }
72
+
73
+ .tooltip-text {
74
+ visibility: hidden;
75
+ width: 120px;
76
+ background-color: var(--dark);
77
+ color: #fff;
78
+ text-align: center;
79
+ border-radius: 6px;
80
+ padding: 5px;
81
+ position: absolute;
82
+ z-index: 1;
83
+ bottom: 125%;
84
+ left: 50%;
85
+ margin-left: -60px;
86
+ opacity: 0;
87
+ transition: opacity 0.3s;
88
+ }
89
+
90
+ .fade-in {
91
+ animation: fadeIn 0.5s;
92
+ }
93
+
94
+ @keyframes fadeIn {
95
+ from { opacity: 0; }
96
+ to { opacity: 1; }
97
+ }
98
+
99
+ .slide-in {
100
+ animation: slideIn 0.3s ease-out;
101
+ }
102
+
103
+ @keyframes slideIn {
104
+ from { transform: translateY(20px); opacity: 0; }
105
+ to { transform: translateY(0); opacity: 1; }
106
+ }
107
+
108
+ .typing-indicator::after {
109
+ content: "...";
110
+ animation: typing 1.5s infinite;
111
+ }
112
+
113
+ @keyframes typing {
114
+ 0% { content: "."; }
115
+ 33% { content: ".."; }
116
+ 66% { content: "..."; }
117
+ }
118
+
119
+ .mobile-menu {
120
+ transition: all 0.3s ease;
121
+ }
122
+
123
+ .mobile-menu.hidden {
124
+ transform: translateX(-100%);
125
+ }
126
+ </style>
127
+ </head>
128
+ <body class="min-h-screen">
129
+ <div class="flex h-screen overflow-hidden">
130
+ <!-- Mobile Sidebar -->
131
+ <div id="mobileSidebar" class="mobile-menu md:hidden fixed inset-y-0 left-0 z-50 w-64 gradient-bg text-white transform -translate-x-full">
132
+ <div class="flex flex-col h-full">
133
+ <div class="flex items-center justify-center h-16 px-4">
134
+ <div class="flex items-center">
135
+ <i class="fas fa-brain text-2xl mr-2"></i>
136
+ <span class="text-xl font-bold">EOS AI Suite</span>
137
+ </div>
138
+ <button onclick="toggleMobileMenu()" class="ml-auto text-white">
139
+ <i class="fas fa-times"></i>
140
+ </button>
141
+ </div>
142
+ <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto">
143
+ <!-- API Configuration -->
144
+ <div class="mb-6 p-3 bg-white bg-opacity-10 rounded-lg">
145
+ <h3 class="text-sm font-semibold mb-2 flex items-center">
146
+ <i class="fas fa-key mr-2"></i> API Configuration
147
+ </h3>
148
+ <div class="mt-2">
149
+ <label class="block text-xs text-white text-opacity-80 mb-1">DeepSeek API Key</label>
150
+ <div class="flex">
151
+ <input type="password" id="mobileApiKey" placeholder="Enter your API key"
152
+ class="w-full px-3 py-2 text-xs bg-white bg-opacity-20 rounded-l focus:outline-none focus:ring-1 focus:ring-white">
153
+ <button onclick="saveApiKey('mobileApiKey')" class="px-3 py-2 bg-white bg-opacity-30 text-xs rounded-r hover:bg-opacity-40">
154
+ <i class="fas fa-save"></i>
155
+ </button>
156
+ </div>
157
+ <div class="mt-2 flex items-center text-xs">
158
+ <i class="fas fa-circle text-green-400 mr-1 text-xs"></i>
159
+ <span id="mobileApiStatus">Not connected</span>
160
+ </div>
161
+ </div>
162
+ </div>
163
+
164
+ <!-- Navigation -->
165
+ <nav class="flex-1 space-y-1">
166
+ <a href="#" class="sidebar-item active flex items-center px-3 py-2 rounded-md text-sm font-medium" onclick="navigateTo('dashboard')">
167
+ <i class="fas fa-home mr-3"></i> Dashboard
168
+ </a>
169
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded-md text-sm font-medium" onclick="navigateTo('vision')">
170
+ <i class="fas fa-rocket mr-3"></i> Vision
171
+ </a>
172
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded-md text-sm font-medium" onclick="navigateTo('people')">
173
+ <i class="fas fa-users mr-3"></i> People
174
+ </a>
175
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded-md text-sm font-medium" onclick="navigateTo('data')">
176
+ <i class="fas fa-chart-line mr-3"></i> Data
177
+ </a>
178
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded-md text-sm font-medium" onclick="navigateTo('issues')">
179
+ <i class="fas fa-tasks mr-3"></i> Issues
180
+ </a>
181
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded-md text-sm font-medium" onclick="navigateTo('process')">
182
+ <i class="fas fa-lightbulb mr-3"></i> Process
183
+ </a>
184
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded-md text-sm font-medium" onclick="navigateTo('assistant')">
185
+ <i class="fas fa-comments mr-3"></i> AI Assistant
186
+ </a>
187
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded-md text-sm font-medium" onclick="navigateTo('settings')">
188
+ <i class="fas fa-cog mr-3"></i> Settings
189
+ </a>
190
+ </nav>
191
+
192
+ <!-- Quick Actions -->
193
+ <div class="mt-auto mb-4">
194
+ <button class="w-full flex items-center justify-center px-4 py-2 bg-white text-indigo-600 rounded-md text-sm font-medium hover:bg-opacity-90">
195
+ <i class="fas fa-plus mr-2"></i> New Meeting
196
+ </button>
197
+ <button onclick="showAiPrompt()" class="mt-2 w-full flex items-center justify-center px-4 py-2 bg-yellow-500 text-white rounded-md text-sm font-medium hover:bg-yellow-600">
198
+ <i class="fas fa-magic mr-2"></i> AI Quick Action
199
+ </button>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Desktop Sidebar -->
206
+ <div class="hidden md:flex md:flex-shrink-0">
207
+ <div class="flex flex-col w-64 gradient-bg text-white">
208
+ <div class="flex items-center justify-center h-16 px-4">
209
+ <div class="flex items-center">
210
+ <i class="fas fa-brain text-2xl mr-2"></i>
211
+ <span class="text-xl font-bold">EOS AI Suite</span>
212
+ </div>
213
+ </div>
214
+ <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto">
215
+ <!-- API Configuration -->
216
+ <div class="mb-6 p-3 bg-white bg-opacity-10 rounded-lg">
217
+ <h3 class="text-sm font-semibold mb-2 flex items-center">
218
+ <i class="fas fa-key mr-2"></i> API Configuration
219
+ </h3>
220
+ <div class="mt-2">
221
+ <label class="block text-xs text-white text-opacity-80 mb-1">DeepSeek API Key</label>
222
+ <div class="flex">
223
+ <input type="password" id="apiKey" placeholder="Enter your API key"
224
+ class="w-full px-3 py-2 text-xs bg-white bg-opacity-20 rounded-l focus:outline-none focus:ring-1 focus:ring-white">
225
+ <button onclick="saveApiKey('apiKey')" class="px-3 py-2 bg-white bg-opacity-30 text-xs rounded-r hover:bg-opacity-40">
226
+ <i class="fas fa-save"></i>
227
+ </button>
228
+ </div>
229
+ <div class="mt-2 flex items-center text-xs">
230
+ <i class="fas fa-circle text-green-400 mr-1 text-xs"></i>
231
+ <span id="apiStatus">Not connected</span>
232
+ </div>
233
+ </div>
234
+ </div>
235
+
236
+ <!-- Navigation -->
237
+ <nav class="flex-1 space-y-1">
238
+ <a href="#" class="sidebar-item active flex items-center px-3 py-2 rounded-md text-sm font-medium" onclick="navigateTo('dashboard')">
239
+ <i class="fas fa-home mr-3"></i> Dashboard
240
+ </a>
241
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded-md text-sm font-medium" onclick="navigateTo('vision')">
242
+ <i class="fas fa-rocket mr-3"></i> Vision
243
+ </a>
244
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded-md text-sm font-medium" onclick="navigateTo('people')">
245
+ <i class="fas fa-users mr-3"></i> People
246
+ </a>
247
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded-md text-sm font-medium" onclick="navigateTo('data')">
248
+ <i class="fas fa-chart-line mr-3"></i> Data
249
+ </a>
250
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded-md text-sm font-medium" onclick="navigateTo('issues')">
251
+ <i class="fas fa-tasks mr-3"></i> Issues
252
+ </a>
253
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded-md text-sm font-medium" onclick="navigateTo('process')">
254
+ <i class="fas fa-lightbulb mr-3"></i> Process
255
+ </a>
256
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded-md text-sm font-medium" onclick="navigateTo('assistant')">
257
+ <i class="fas fa-comments mr-3"></i> AI Assistant
258
+ </a>
259
+ <a href="#" class="sidebar-item flex items-center px-3 py-2 rounded-md text-sm font-medium" onclick="navigateTo('settings')">
260
+ <i class="fas fa-cog mr-3"></i> Settings
261
+ </a>
262
+ </nav>
263
+
264
+ <!-- Quick Actions -->
265
+ <div class="mt-auto mb-4">
266
+ <button class="w-full flex items-center justify-center px-4 py-2 bg-white text-indigo-600 rounded-md text-sm font-medium hover:bg-opacity-90">
267
+ <i class="fas fa-plus mr-2"></i> New Meeting
268
+ </button>
269
+ <button onclick="showAiPrompt()" class="mt-2 w-full flex items-center justify-center px-4 py-2 bg-yellow-500 text-white rounded-md text-sm font-medium hover:bg-yellow-600">
270
+ <i class="fas fa-magic mr-2"></i> AI Quick Action
271
+ </button>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ </div>
276
+
277
+ <!-- Main Content -->
278
+ <div class="flex flex-col flex-1 overflow-hidden">
279
+ <!-- Top Navigation -->
280
+ <div class="flex items-center justify-between h-16 px-4 bg-white border-b">
281
+ <div class="flex items-center">
282
+ <button class="md:hidden mr-2 text-gray-500" onclick="toggleMobileMenu()">
283
+ <i class="fas fa-bars"></i>
284
+ </button>
285
+ <h1 class="text-lg font-semibold" id="pageTitle">EOS Dashboard</h1>
286
+ </div>
287
+
288
+ <div class="flex items-center space-x-4">
289
+ <div class="relative">
290
+ <button onclick="toggleNotifications()" class="p-1 rounded-full text-gray-500 hover:text-gray-700 focus:outline-none">
291
+ <i class="fas fa-bell"></i>
292
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
293
+ </button>
294
+ <div id="notificationsDropdown" class="hidden absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg py-1 z-10">
295
+ <div class="px-4 py-2 border-b">
296
+ <h3 class="text-sm font-medium">Notifications</h3>
297
+ </div>
298
+ <div class="max-h-60 overflow-y-auto">
299
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 border-b">
300
+ <div class="font-medium">New issue reported</div>
301
+ <div class="text-xs text-gray-500">Team communication problem</div>
302
+ </a>
303
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 border-b">
304
+ <div class="font-medium">Quarterly rock completed</div>
305
+ <div class="text-xs text-gray-500">Website redesign finished</div>
306
+ </a>
307
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
308
+ <div class="font-medium">New metric added</div>
309
+ <div class="text-xs text-gray-500">Customer satisfaction score</div>
310
+ </a>
311
+ </div>
312
+ <div class="px-4 py-2 bg-gray-50 text-center">
313
+ <a href="#" class="text-xs text-indigo-600 hover:text-indigo-800">View all notifications</a>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ <div class="relative">
318
+ <button onclick="toggleUserDropdown()" class="flex items-center focus:outline-none">
319
+ <img class="h-8 w-8 rounded-full" 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="">
320
+ <span class="ml-2 text-sm font-medium hidden md:inline">John Doe</span>
321
+ <i class="fas fa-chevron-down ml-1 text-xs hidden md:inline"></i>
322
+ </button>
323
+ <div id="userDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10">
324
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a>
325
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
326
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a>
327
+ </div>
328
+ </div>
329
+ </div>
330
+ </div>
331
+
332
+ <!-- Main Content Area -->
333
+ <div class="flex-1 overflow-auto p-4 bg-gray-50" id="mainContent">
334
+ <!-- Welcome Banner -->
335
+ <div class="gradient-bg text-white rounded-xl p-6 mb-6 relative overflow-hidden">
336
+ <div class="relative z-10">
337
+ <h2 class="text-2xl font-bold mb-2">Welcome back, John!</h2>
338
+ <p class="mb-4 opacity-90">Your company is operating at <span class="font-bold">78%</span> of its potential according to EOS standards.</p>
339
+ <button onclick="getAiRecommendations()" class="px-4 py-2 bg-white text-indigo-600 rounded-md text-sm font-medium hover:bg-opacity-90">
340
+ Get AI Recommendations
341
+ </button>
342
+ </div>
343
+ <div class="absolute -right-10 -bottom-10 opacity-20">
344
+ <i class="fas fa-brain text-9xl"></i>
345
+ </div>
346
+ </div>
347
+
348
+ <!-- EOS Components Grid -->
349
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
350
+ <!-- Vision -->
351
+ <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow">
352
+ <div class="flex items-center justify-between mb-4">
353
+ <h3 class="font-semibold text-lg flex items-center">
354
+ <i class="fas fa-rocket mr-2 text-indigo-500"></i> Vision
355
+ </h3>
356
+ <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">85% Complete</span>
357
+ </div>
358
+ <p class="text-gray-600 text-sm mb-4">Clarify your company's vision and ensure everyone is aligned.</p>
359
+ <div class="space-y-3">
360
+ <div class="flex items-center">
361
+ <div class="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center mr-2">
362
+ <i class="fas fa-check text-indigo-500 text-xs"></i>
363
+ </div>
364
+ <span class="text-sm">Core Values Defined</span>
365
+ </div>
366
+ <div class="flex items-center">
367
+ <div class="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center mr-2">
368
+ <i class="fas fa-check text-indigo-500 text-xs"></i>
369
+ </div>
370
+ <span class="text-sm">10-Year Target Set</span>
371
+ </div>
372
+ <div class="flex items-center opacity-50">
373
+ <div class="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center mr-2">
374
+ <i class="fas fa-ellipsis-h text-gray-400 text-xs"></i>
375
+ </div>
376
+ <span class="text-sm">Marketing Strategy</span>
377
+ </div>
378
+ </div>
379
+ <button onclick="navigateTo('vision')" class="mt-4 w-full py-2 bg-indigo-50 text-indigo-600 rounded-md text-sm font-medium hover:bg-indigo-100">
380
+ Refine Vision
381
+ </button>
382
+ </div>
383
+
384
+ <!-- People -->
385
+ <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow">
386
+ <div class="flex items-center justify-between mb-4">
387
+ <h3 class="font-semibold text-lg flex items-center">
388
+ <i class="fas fa-users mr-2 text-blue-500"></i> People
389
+ </h3>
390
+ <span class="text-xs px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full">Needs Attention</span>
391
+ </div>
392
+ <p class="text-gray-600 text-sm mb-4">Get the right people in the right seats.</p>
393
+ <div class="mb-4">
394
+ <div class="flex justify-between text-xs text-gray-500 mb-1">
395
+ <span>Seats Filled</span>
396
+ <span>5/7</span>
397
+ </div>
398
+ <div class="w-full bg-gray-200 rounded-full h-2">
399
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 71%"></div>
400
+ </div>
401
+ </div>
402
+ <div class="space-y-2">
403
+ <div class="flex items-center justify-between">
404
+ <div class="flex items-center">
405
+ <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center mr-2">
406
+ <i class="fas fa-user text-blue-500 text-xs"></i>
407
+ </div>
408
+ <span class="text-sm">Marketing Lead</span>
409
+ </div>
410
+ <span class="text-xs text-red-500">Vacant</span>
411
+ </div>
412
+ <div class="flex items-center justify-between">
413
+ <div class="flex items-center">
414
+ <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center mr-2">
415
+ <i class="fas fa-user text-blue-500 text-xs"></i>
416
+ </div>
417
+ <span class="text-sm">Operations</span>
418
+ </div>
419
+ <span class="text-xs text-green-500">Strong Fit</span>
420
+ </div>
421
+ </div>
422
+ <button onclick="navigateTo('people')" class="mt-4 w-full py-2 bg-blue-50 text-blue-600 rounded-md text-sm font-medium hover:bg-blue-100">
423
+ Manage Team
424
+ </button>
425
+ </div>
426
+
427
+ <!-- Data -->
428
+ <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow">
429
+ <div class="flex items-center justify-between mb-4">
430
+ <h3 class="font-semibold text-lg flex items-center">
431
+ <i class="fas fa-chart-line mr-2 text-green-500"></i> Data
432
+ </h3>
433
+ <span class="text-xs px-2 py-1 bg-blue-100 text-blue-800 rounded-full">3 New Reports</span>
434
+ </div>
435
+ <p class="text-gray-600 text-sm mb-4">Measure your pulse with the right metrics.</p>
436
+ <div class="grid grid-cols-3 gap-2 mb-4">
437
+ <div class="bg-gray-50 p-2 rounded text-center">
438
+ <div class="text-lg font-bold text-green-600">$124K</div>
439
+ <div class="text-xs text-gray-500">Revenue</div>
440
+ </div>
441
+ <div class="bg-gray-50 p-2 rounded text-center">
442
+ <div class="text-lg font-bold text-blue-600">87%</div>
443
+ <div class="text-xs text-gray-500">Profit Margin</div>
444
+ </div>
445
+ <div class="bg-gray-50 p-2 rounded text-center">
446
+ <div class="text-lg font-bold text-purple-600">42</div>
447
+ <div class="text-xs text-gray-500">New Clients</div>
448
+ </div>
449
+ </div>
450
+ <div class="h-24 mb-2">
451
+ <canvas id="revenueChart"></canvas>
452
+ </div>
453
+ <button onclick="navigateTo('data')" class="mt-2 w-full py-2 bg-green-50 text-green-600 rounded-md text-sm font-medium hover:bg-green-100">
454
+ View All Metrics
455
+ </button>
456
+ </div>
457
+
458
+ <!-- Issues -->
459
+ <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow">
460
+ <div class="flex items-center justify-between mb-4">
461
+ <h3 class="font-semibold text-lg flex items-center">
462
+ <i class="fas fa-exclamation-triangle mr-2 text-red-500"></i> Issues
463
+ </h3>
464
+ <span class="text-xs px-2 py-1 bg-red-100 text-red-800 rounded-full">5 Active</span>
465
+ </div>
466
+ <p class="text-gray-600 text-sm mb-4">Identify, discuss and solve your issues.</p>
467
+ <div class="space-y-3">
468
+ <div class="flex items-start">
469
+ <div class="w-6 h-6 rounded-full bg-red-100 flex items-center justify-center mr-2 mt-1">
470
+ <i class="fas fa-exclamation text-red-500 text-xs"></i>
471
+ </div>
472
+ <div>
473
+ <div class="text-sm font-medium">Client onboarding delays</div>
474
+ <div class="text-xs text-gray-500">Open for 12 days</div>
475
+ </div>
476
+ </div>
477
+ <div class="flex items-start">
478
+ <div class="w-6 h-6 rounded-full bg-red-100 flex items-center justify-center mr-2 mt-1">
479
+ <i class="fas fa-exclamation text-red-500 text-xs"></i>
480
+ </div>
481
+ <div>
482
+ <div class="text-sm font-medium">Inventory shortages</div>
483
+ <div class="text-xs text-gray-500">Open for 5 days</div>
484
+ </div>
485
+ </div>
486
+ <div class="flex items-start">
487
+ <div class="w-6 h-6 rounded-full bg-yellow-100 flex items-center justify-center mr-2 mt-1">
488
+ <i class="fas fa-exclamation text-yellow-500 text-xs"></i>
489
+ </div>
490
+ <div>
491
+ <div class="text-sm font-medium">Team communication</div>
492
+ <div class="text-xs text-gray-500">Open for 3 days</div>
493
+ </div>
494
+ </div>
495
+ </div>
496
+ <button onclick="navigateTo('issues')" class="mt-4 w-full py-2 bg-red-50 text-red-600 rounded-md text-sm font-medium hover:bg-red-100">
497
+ Solve Issues
498
+ </button>
499
+ </div>
500
+
501
+ <!-- Process -->
502
+ <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow">
503
+ <div class="flex items-center justify-between mb-4">
504
+ <h3 class="font-semibold text-lg flex items-center">
505
+ <i class="fas fa-lightbulb mr-2 text-purple-500"></i> Process
506
+ </h3>
507
+ <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 rounded-full">2 Incomplete</span>
508
+ </div>
509
+ <p class="text-gray-600 text-sm mb-4">Document your core processes.</p>
510
+ <div class="mb-4">
511
+ <div class="flex justify-between text-xs text-gray-500 mb-1">
512
+ <span>Process Documentation</span>
513
+ <span>60%</span>
514
+ </div>
515
+ <div class="w-full bg-gray-200 rounded-full h-2">
516
+ <div class="bg-purple-500 h-2 rounded-full" style="width: 60%"></div>
517
+ </div>
518
+ </div>
519
+ <div class="space-y-2">
520
+ <div class="flex items-center">
521
+ <div class="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center mr-2">
522
+ <i class="fas fa-check text-purple-500 text-xs"></i>
523
+ </div>
524
+ <span class="text-sm">Sales Process</span>
525
+ </div>
526
+ <div class="flex items-center">
527
+ <div class="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center mr-2">
528
+ <i class="fas fa-check text-purple-500 text-xs"></i>
529
+ </div>
530
+ <span class="text-sm">Onboarding</span>
531
+ </div>
532
+ <div class="flex items-center opacity-50">
533
+ <div class="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center mr-2">
534
+ <i class="fas fa-ellipsis-h text-gray-400 text-xs"></i>
535
+ </div>
536
+ <span class="text-sm">Customer Support</span>
537
+ </div>
538
+ </div>
539
+ <button onclick="navigateTo('process')" class="mt-4 w-full py-2 bg-purple-50 text-purple-600 rounded-md text-sm font-medium hover:bg-purple-100">
540
+ Document Processes
541
+ </button>
542
+ </div>
543
+
544
+ <!-- Traction -->
545
+ <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow">
546
+ <div class="flex items-center justify-between mb-4">
547
+ <h3 class="font-semibold text-lg flex items-center">
548
+ <i class="fas fa-bullseye mr-2 text-orange-500"></i> Traction
549
+ </h3>
550
+ <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">On Track</span>
551
+ </div>
552
+ <p class="text-gray-600 text-sm mb-4">Execute your vision with discipline.</p>
553
+ <div class="flex items-center justify-between mb-3">
554
+ <div class="text-sm">Quarterly Rocks</div>
555
+ <div class="text-xs px-2 py-1 bg-orange-100 text-orange-800 rounded-full">3/4 Complete</div>
556
+ </div>
557
+ <div class="space-y-2 mb-4">
558
+ <div class="flex items-center">
559
+ <div class="w-4 h-4 rounded-full bg-green-100 border-2 border-green-500 flex items-center justify-center mr-2">
560
+ <i class="fas fa-check text-green-500 text-xs"></i>
561
+ </div>
562
+ <span class="text-sm">Launch new product</span>
563
+ </div>
564
+ <div class="flex items-center">
565
+ <div class="w-4 h-4 rounded-full bg-green-100 border-2 border-green-500 flex items-center justify-center mr-2">
566
+ <i class="fas fa-check text-green-500 text-xs"></i>
567
+ </div>
568
+ <span class="text-sm">Hire 2 team members</span>
569
+ </div>
570
+ <div class="flex items-center">
571
+ <div class="w-4 h-4 rounded-full bg-green-100 border-2 border-green-500 flex items-center justify-center mr-2">
572
+ <i class="fas fa-check text-green-500 text-xs"></i>
573
+ </div>
574
+ <span class="text-sm">Redesign website</span>
575
+ </div>
576
+ <div class="flex items-center">
577
+ <div class="w-4 h-4 rounded-full bg-orange-100 border-2 border-orange-500 flex items-center justify-center mr-2">
578
+ <i class="fas fa-spinner text-orange-500 text-xs"></i>
579
+ </div>
580
+ <span class="text-sm">Secure $200K funding</span>
581
+ </div>
582
+ </div>
583
+ <button onclick="navigateTo('traction')" class="mt-2 w-full py-2 bg-orange-50 text-orange-600 rounded-md text-sm font-medium hover:bg-orange-100">
584
+ View Traction Tools
585
+ </button>
586
+ </div>
587
+ </div>
588
+
589
+ <!-- AI Assistant Section -->
590
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
591
+ <div class="flex items-center justify-between mb-4">
592
+ <h3 class="font-semibold text-lg flex items-center">
593
+ <i class="fas fa-robot mr-2 text-indigo-500"></i> AI Business Assistant
594
+ </h3>
595
+ <div class="flex space-x-2">
596
+ <button onclick="showQuickActions()" class="px-3 py-1 bg-indigo-50 text-indigo-600 rounded-md text-xs font-medium hover:bg-indigo-100">
597
+ <i class="fas fa-bolt mr-1"></i> Quick Actions
598
+ </button>
599
+ <button onclick="showChatHistory()" class="px-3 py-1 bg-gray-100 text-gray-600 rounded-md text-xs font-medium hover:bg-gray-200">
600
+ <i class="fas fa-history mr-1"></i> History
601
+ </button>
602
+ </div>
603
+ </div>
604
+
605
+ <div class="bg-gray-50 rounded-lg p-4 mb-4 h-96 overflow-y-auto" id="chatContainer">
606
+ <div class="flex mb-3">
607
+ <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
608
+ <i class="fas fa-robot text-indigo-500"></i>
609
+ </div>
610
+ <div class="ai-response bg-white p-3 rounded-lg flex-1">
611
+ <p class="text-sm">Hi John! I'm your AI business assistant. I can help you analyze your EOS implementation, suggest improvements, generate reports, and more. What would you like to work on today?</p>
612
+ </div>
613
+ </div>
614
+
615
+ <div class="flex justify-end mb-3">
616
+ <div class="ai-response bg-indigo-50 p-3 rounded-lg max-w-xs">
617
+ <p class="text-sm">Can you analyze our People component and suggest improvements?</p>
618
+ </div>
619
+ <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center ml-3">
620
+ <i class="fas fa-user text-white text-sm"></i>
621
+ </div>
622
+ </div>
623
+
624
+ <div class="flex">
625
+ <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
626
+ <i class="fas fa-robot text-indigo-500"></i>
627
+ </div>
628
+ <div class="ai-response bg-white p-3 rounded-lg flex-1">
629
+ <p class="text-sm font-medium mb-1">Based on your People component data:</p>
630
+ <ul class="text-sm list-disc pl-5 space-y-1">
631
+ <li>Your Marketing Lead position has been vacant for 47 days - I recommend prioritizing this hire</li>
632
+ <li>Your Operations team member is a strong fit - consider recognizing their contributions</li>
633
+ <li>Team communication was flagged as an issue - I can help draft a communication protocol</li>
634
+ </ul>
635
+ <div class="mt-2 flex space-x-2">
636
+ <button onclick="generateProtocol()" class="px-3 py-1 bg-indigo-500 text-white rounded-md text-xs font-medium hover:bg-indigo-600">
637
+ Draft Communication Protocol
638
+ </button>
639
+ <button onclick="showMoreSuggestions()" class="px-3 py-1 bg-white border border-gray-300 rounded-md text-xs font-medium hover:bg-gray-50">
640
+ See More Suggestions
641
+ </button>
642
+ </div>
643
+ </div>
644
+ </div>
645
+ </div>
646
+
647
+ <div class="flex">
648
+ <input type="text" id="aiInput" placeholder="Ask your AI assistant anything..."
649
+ class="flex-1 px-4 py-3 rounded-l-lg border border-gray-300 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
650
+ <button onclick="sendMessage()" class="px-4 py-3 bg-indigo-500 text-white rounded-r-lg hover:bg-indigo-600">
651
+ <i class="fas fa-paper-plane"></i>
652
+ </button>
653
+ </div>
654
+ </div>
655
+
656
+ <!-- Recent Activity -->
657
+ <div class="bg-white rounded-xl shadow-sm p-6">
658
+ <div class="flex items-center justify-between mb-4">
659
+ <h3 class="font-semibold text-lg">Recent Activity</h3>
660
+ <button onclick="navigateTo('activity')" class="text-sm text-indigo-600 hover:text-indigo-800">View All</button>
661
+ </div>
662
+
663
+ <div class="space-y-4">
664
+ <div class="flex items-start">
665
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3 mt-1">
666
+ <i class="fas fa-check text-green-500"></i>
667
+ </div>
668
+ <div class="flex-1">
669
+ <div class="flex items-center justify-between">
670
+ <span class="font-medium">Quarterly Rock Completed</span>
671
+ <span class="text-xs text-gray-500">2 hours ago</span>
672
+ </div>
673
+ <p class="text-sm text-gray-600">"Redesign website" was marked as complete by Sarah from Marketing</p>
674
+ </div>
675
+ </div>
676
+
677
+ <div class="flex items-start">
678
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3 mt-1">
679
+ <i class="fas fa-users text-blue-500"></i>
680
+ </div>
681
+ <div class="flex-1">
682
+ <div class="flex items-center justify-between">
683
+ <span class="font-medium">Team Meeting</span>
684
+ <span class="text-xs text-gray-500">Yesterday</span>
685
+ </div>
686
+ <p class="text-sm text-gray-600">Weekly Level 10 Meeting completed with 3 issues solved</p>
687
+ <div class="mt-1 flex space-x-2">
688
+ <span class="px-2 py-1 bg-gray-100 text-gray-800 rounded-full text-xs">Notes</span>
689
+ <span class="px-2 py-1 bg-gray-100 text-gray-800 rounded-full text-xs">Action Items</span>
690
+ </div>
691
+ </div>
692
+ </div>
693
+
694
+ <div class="flex items-start">
695
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3 mt-1">
696
+ <i class="fas fa-chart-line text-purple-500"></i>
697
+ </div>
698
+ <div class="flex-1">
699
+ <div class="flex items-center justify-between">
700
+ <span class="font-medium">New Metric Added</span>
701
+ <span class="text-xs text-gray-500">2 days ago</span>
702
+ </div>
703
+ <p class="text-sm text-gray-600">"Customer Satisfaction Score" was added to your Scorecard by Michael</p>
704
+ </div>
705
+ </div>
706
+ </div>
707
+ </div>
708
+ </div>
709
+ </div>
710
+ </div>
711
+
712
+ <!-- AI Prompt Modal -->
713
+ <div id="aiPromptModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
714
+ <div class="bg-white rounded-xl w-full max-w-md animate-fade-in">
715
+ <div class="p-5">
716
+ <div class="flex justify-between items-center mb-4">
717
+ <h3 class="text-lg font-semibold">AI Quick Action</h3>
718
+ <button onclick="hideAiPrompt()" class="text-gray-500 hover:text-gray-700">
719
+ <i class="fas fa-times"></i>
720
+ </button>
721
+ </div>
722
+ <div class="mb-4">
723
+ <label class="block text-sm font-medium text-gray-700 mb-2">What would you like to accomplish?</label>
724
+ <select id="aiActionSelect" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500">
725
+ <option value="">Select an action...</option>
726
+ <option value="agenda">Generate a meeting agenda</option>
727
+ <option value="analyze">Analyze a business component</option>
728
+ <option value="process">Create a process document</option>
729
+ <option value="communication">Draft a communication</option>
730
+ <option value="solve">Solve a specific issue</option>
731
+ <option value="report">Generate a report</option>
732
+ </select>
733
+ </div>
734
+ <div class="mb-4">
735
+ <label class="block text-sm font-medium text-gray-700 mb-2">Provide details (optional)</label>
736
+ <textarea id="aiPromptDetails" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500" rows="3" placeholder="E.g. 'Create an agenda for our quarterly planning meeting with the leadership team...'"></textarea>
737
+ </div>
738
+ <div class="flex justify-end space-x-3">
739
+ <button onclick="hideAiPrompt()" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50">
740
+ Cancel
741
+ </button>
742
+ <button onclick="generateAiAction()" class="px-4 py-2 bg-indigo-600 text-white rounded-md text-sm font-medium hover:bg-indigo-700">
743
+ Generate
744
+ </button>
745
+ </div>
746
+ </div>
747
+ </div>
748
+ </div>
749
+
750
+ <!-- Quick Actions Modal -->
751
+ <div id="quickActionsModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
752
+ <div class="bg-white rounded-xl w-full max-w-md animate-fade-in">
753
+ <div class="p-5">
754
+ <div class="flex justify-between items-center mb-4">
755
+ <h3 class="text-lg font-semibold">Quick Actions</h3>
756
+ <button onclick="hideQuickActions()" class="text-gray-500 hover:text-gray-700">
757
+ <i class="fas fa-times"></i>
758
+ </button>
759
+ </div>
760
+ <div class="grid grid-cols-2 gap-3">
761
+ <button onclick="quickAction('analyze')" class="px-4 py-3 bg-indigo-50 text-indigo-600 rounded-md text-sm font-medium hover:bg-indigo-100 flex flex-col items-center">
762
+ <i class="fas fa-chart-pie text-xl mb-1"></i>
763
+ Analyze Data
764
+ </button>
765
+ <button onclick="quickAction('meeting')" class="px-4 py-3 bg-blue-50 text-blue-600 rounded-md text-sm font-medium hover:bg-blue-100 flex flex-col items-center">
766
+ <i class="fas fa-calendar-alt text-xl mb-1"></i>
767
+ Schedule Meeting
768
+ </button>
769
+ <button onclick="quickAction('report')" class="px-4 py-3 bg-green-50 text-green-600 rounded-md text-sm font-medium hover:bg-green-100 flex flex-col items-center">
770
+ <i class="fas fa-file-alt text-xl mb-1"></i>
771
+ Generate Report
772
+ </button>
773
+ <button onclick="quickAction('task')" class="px-4 py-3 bg-purple-50 text-purple-600 rounded-md text-sm font-medium hover:bg-purple-100 flex flex-col items-center">
774
+ <i class="fas fa-tasks text-xl mb-1"></i>
775
+ Create Task
776
+ </button>
777
+ </div>
778
+ </div>
779
+ </div>
780
+ </div>
781
+
782
+ <script>
783
+ // Initialize Chart
784
+ document.addEventListener('DOMContentLoaded', function() {
785
+ // Revenue Chart
786
+ const ctx = document.getElementById('revenueChart').getContext('2d');
787
+ const revenueChart = new Chart(ctx, {
788
+ type: 'line',
789
+ data: {
790
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
791
+ datasets: [{
792
+ label: 'Revenue',
793
+ data: [85000, 92000, 102000, 115000, 124000, 135000],
794
+ backgroundColor: 'rgba(79, 70, 229, 0.1)',
795
+ borderColor: 'rgba(79, 70, 229, 1)',
796
+ borderWidth: 2,
797
+ tension: 0.3,
798
+ fill: true
799
+ }]
800
+ },
801
+ options: {
802
+ responsive: true,
803
+ plugins: {
804
+ legend: {
805
+ display: false
806
+ }
807
+ },
808
+ scales: {
809
+ y: {
810
+ beginAtZero: true,
811
+ grid: {
812
+ display: false
813
+ },
814
+ ticks: {
815
+ callback: function(value) {
816
+ return '$' + (value / 1000) + 'K';
817
+ }
818
+ }
819
+ },
820
+ x: {
821
+ grid: {
822
+ display: false
823
+ }
824
+ }
825
+ }
826
+ }
827
+ });
828
+
829
+ // Simulate API connection
830
+ const savedApiKey = localStorage.getItem('eosApiKey');
831
+ if (savedApiKey) {
832
+ document.getElementById('apiKey').value = savedApiKey;
833
+ document.getElementById('mobileApiKey').value = savedApiKey;
834
+ updateApiStatus(true);
835
+ }
836
+ });
837
+
838
+ // Save API Key
839
+ function saveApiKey(inputId) {
840
+ const apiKey = document.getElementById(inputId).value;
841
+ if (apiKey) {
842
+ // In a real app, you would securely store this and verify it
843
+ localStorage.setItem('eosApiKey', apiKey);
844
+ updateApiStatus(true);
845
+
846
+ // Show success message
847
+ showToast('API key saved successfully! DeepSeek AI integration is now active.', 'success');
848
+ } else {
849
+ showToast('Please enter your DeepSeek API key', 'error');
850
+ }
851
+ }
852
+
853
+ function updateApiStatus(connected) {
854
+ if (connected) {
855
+ document.getElementById('apiStatus').textContent = 'Connected';
856
+ document.getElementById('apiStatus').previousElementSibling.className = 'fas fa-circle text-green-400 mr-1 text-xs';
857
+ document.getElementById('mobileApiStatus').textContent = 'Connected';
858
+ document.getElementById('mobileApiStatus').previousElementSibling.className = 'fas fa-circle text-green-400 mr-1 text-xs';
859
+ } else {
860
+ document.getElementById('apiStatus').textContent = 'Not connected';
861
+ document.getElementById('apiStatus').previousElementSibling.className = 'fas fa-circle text-gray-400 mr-1 text-xs';
862
+ document.getElementById('mobileApiStatus').textContent = 'Not connected';
863
+ document.getElementById('mobileApiStatus').previousElementSibling.className = 'fas fa-circle text-gray-400 mr-1 text-xs';
864
+ }
865
+ }
866
+
867
+ // Toggle user dropdown
868
+ function toggleUserDropdown() {
869
+ document.getElementById('userDropdown').classList.toggle('hidden');
870
+ }
871
+
872
+ // Toggle notifications dropdown
873
+ function toggleNotifications() {
874
+ document.getElementById('notificationsDropdown').classList.toggle('hidden');
875
+ }
876
+
877
+ // Toggle mobile menu
878
+ function toggleMobileMenu() {
879
+ const mobileMenu = document.getElementById('mobileSidebar');
880
+ mobileMenu.classList.toggle('transform');
881
+ mobileMenu.classList.toggle('-translate-x-full');
882
+ }
883
+
884
+ // Show AI prompt modal
885
+ function showAiPrompt() {
886
+ document.getElementById('aiPromptModal').classList.remove('hidden');
887
+ }
888
+
889
+ // Hide AI prompt modal
890
+ function hideAiPrompt() {
891
+ document.getElementById('aiPromptModal').classList.add('hidden');
892
+ }
893
+
894
+ // Show Quick Actions modal
895
+ function showQuickActions() {
896
+ document.getElementById('quickActionsModal').classList.remove('hidden');
897
+ }
898
+
899
+ // Hide Quick Actions modal
900
+ function hideQuickActions() {
901
+ document.getElementById('quickActionsModal').classList.add('hidden');
902
+ }
903
+
904
+ // Show Chat History
905
+ function showChatHistory() {
906
+ // In a real app, you would load actual chat history
907
+ showToast('Chat history loaded', 'info');
908
+ }
909
+
910
+ // Generate AI Action
911
+ function generateAiAction() {
912
+ const action = document.getElementById('aiActionSelect').value;
913
+ const details = document.getElementById('aiPromptDetails').value;
914
+
915
+ if (!action) {
916
+ showToast('Please select an action', 'error');
917
+ return;
918
+ }
919
+
920
+ hideAiPrompt();
921
+
922
+ // Simulate AI processing
923
+ showToast('Generating your request...', 'info');
924
+
925
+ setTimeout(() => {
926
+ let response = '';
927
+
928
+ switch(action) {
929
+ case 'agenda':
930
+ response = `I've generated a meeting agenda based on your request: "${details || 'quarterly planning meeting'}". The agenda includes: 1) Review of quarterly goals, 2) Discussion of key metrics, 3) Identification of roadblocks, 4) Action planning for next quarter. Would you like me to send this to your team or make any adjustments?`;
931
+ break;
932
+ case 'analyze':
933
+ response = `Analysis complete. Based on ${details || 'current business data'}, I've identified 3 key opportunities for improvement: 1) Streamlining client onboarding (could reduce time by 30%), 2) Optimizing team communication (potential 25% efficiency gain), 3) Enhancing your marketing strategy (projected 15% lead increase).`;
934
+ break;
935
+ case 'process':
936
+ response = `I've created a draft process document for ${details || 'your sales process'}. It includes: 1) Step-by-step workflow, 2) Key responsibilities, 3) Success metrics, 4) Common pitfalls to avoid. Would you like to review it now or share it with your team?`;
937
+ break;
938
+ case 'communication':
939
+ response = `Here's a draft communication based on your request: "${details || 'announcing the new company policy'}". The message is clear, concise, and includes all necessary details while maintaining a positive tone. Would you like to preview it before sending?`;
940
+ break;
941
+ case 'solve':
942
+ response = `For the issue "${details || 'team communication problems'}", I recommend: 1) Implementing weekly check-ins, 2) Creating clear communication protocols, 3) Using a collaboration tool like Slack or Teams, 4) Scheduling monthly team-building activities. I can help implement any of these solutions.`;
943
+ break;
944
+ case 'report':
945
+ response = `Your ${details || 'quarterly performance'} report is ready. Key highlights: 1) Revenue growth of 15% quarter-over-quarter, 2) Customer satisfaction score of 4.7/5, 3) 42 new clients onboarded, 4) 3 key challenges identified. Would you like to customize this report further?`;
946
+ break;
947
+ }
948
+
949
+ addAiMessage(response);
950
+ showToast('Action completed successfully!', 'success');
951
+ }, 2000);
952
+ }
953
+
954
+ // Quick Action
955
+ function quickAction(type) {
956
+ hideQuickActions();
957
+ let response = '';
958
+
959
+ switch(type) {
960
+ case 'analyze':
961
+ response = "Quick analysis complete: Your team's productivity is at 78% of potential. Top areas for improvement: 1) Reduce meeting time by 20%, 2) Automate 3 repetitive tasks, 3) Clarify role responsibilities for 2 positions.";
962
+ break;
963
+ case 'meeting':
964
+ response = "I've scheduled a leadership meeting for tomorrow at 10 AM. Agenda includes: 1) Quarterly review, 2) Priority setting, 3) Issue resolution. Would you like to invite additional team members?";
965
+ break;
966
+ case 'report':
967
+ response = "Quick report generated: This week's metrics show 12% growth in leads, 8% increase in conversions, but a 5% drop in customer satisfaction. I can dive deeper into any of these areas.";
968
+ break;
969
+ case 'task':
970
+ response = "Task created: 'Implement new communication protocol' assigned to Sarah with a deadline of Friday. Would you like to set up reminders or add more details?";
971
+ break;
972
+ }
973
+
974
+ addAiMessage(response);
975
+ showToast('Quick action completed!', 'success');
976
+ }
977
+
978
+ // Send message to AI
979
+ function sendMessage() {
980
+ const input = document.getElementById('aiInput');
981
+ const message = input.value.trim();
982
+
983
+ if (!message) {
984
+ showToast('Please enter a message', 'error');
985
+ return;
986
+ }
987
+
988
+ // Add user message to chat
989
+ addUserMessage(message);
990
+ input.value = '';
991
+
992
+ // Show typing indicator
993
+ const chatContainer = document.getElementById('chatContainer');
994
+ const typingDiv = document.createElement('div');
995
+ typingDiv.className = 'flex mb-3';
996
+ typingDiv.innerHTML = `
997
+ <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
998
+ <i class="fas fa-robot text-indigo-500"></i>
999
+ </div>
1000
+ <div class="ai-response bg-white p-3 rounded-lg flex-1">
1001
+ <p class="text-sm typing-indicator">Thinking</p>
1002
+ </div>
1003
+ `;
1004
+ chatContainer.appendChild(typingDiv);
1005
+ chatContainer.scrollTop = chatContainer.scrollHeight;
1006
+
1007
+ // Simulate AI response after delay
1008
+ setTimeout(() => {
1009
+ // Remove typing indicator
1010
+ chatContainer.removeChild(typingDiv);
1011
+
1012
+ // Add AI response
1013
+ let response = '';
1014
+
1015
+ if (message.toLowerCase().includes('vision')) {
1016
+ response = "Regarding your Vision component: Your core values and 10-year target are well-defined, but your marketing strategy needs refinement. I recommend: 1) Conducting a market analysis, 2) Defining clear brand positioning, 3) Setting measurable marketing goals.";
1017
+ } else if (message.toLowerCase().includes('people')) {
1018
+ response = "For your People component: The Marketing Lead position has been vacant for 47 days. I suggest: 1) Prioritizing this hire, 2) Reviewing your hiring process, 3) Considering interim solutions. Your Operations team member is a strong fit - recognition could boost morale.";
1019
+ } else if (message.toLowerCase().includes('data')) {
1020
+ response = "Your data shows: Revenue growth of 15% this quarter, profit margin at 87%, and 42 new clients. Key insights: 1) Client acquisition cost is rising, 2) Retention rate could improve, 3) Operational efficiency is strong. Would you like detailed analysis on any area?";
1021
+ } else if (message.toLowerCase().includes('issue') || message.toLowerCase().includes('problem')) {
1022
+ response = "For the issues you mentioned: The root causes appear to be 1) Communication gaps, 2) Process inconsistencies, 3) Resource constraints. Solutions: 1) Implement daily standups, 2) Document key processes, 3) Reallocate resources strategically.";
1023
+ } else {
1024
+ response = "Thanks for your message! I can help with: 1) Analyzing EOS components, 2) Generating reports, 3) Solving business issues, 4) Creating documents. What would you like to focus on?";
1025
+ }
1026
+
1027
+ addAiMessage(response);
1028
+ }, 1500);
1029
+ }
1030
+
1031
+ // Add user message to chat
1032
+ function addUserMessage(message) {
1033
+ const chatContainer = document.getElementById('chatContainer');
1034
+ const messageDiv = document.createElement('div');
1035
+ messageDiv.className = 'flex justify-end mb-3 slide-in';
1036
+ messageDiv.innerHTML = `
1037
+ <div class="ai-response bg-indigo-50 p-3 rounded-lg max-w-xs">
1038
+ <p class="text-sm">${message}</p>
1039
+ </div>
1040
+ <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center ml-3">
1041
+ <i class="fas fa-user text-white text-sm"></i>
1042
+ </div>
1043
+ `;
1044
+ chatContainer.appendChild(messageDiv);
1045
+ chatContainer.scrollTop = chatContainer.scrollHeight;
1046
+ }
1047
+
1048
+ // Add AI message to chat
1049
+ function addAiMessage(message) {
1050
+ const chatContainer = document.getElementById('chatContainer');
1051
+ const messageDiv = document.createElement('div');
1052
+ messageDiv.className = 'flex mb-3 slide-in';
1053
+ messageDiv.innerHTML = `
1054
+ <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
1055
+ <i class="fas fa-robot text-indigo-500"></i>
1056
+ </div>
1057
+ <div class="ai-response bg-white p-3 rounded-lg flex-1">
1058
+ <p class="text-sm">${message}</p>
1059
+ </div>
1060
+ `;
1061
+ chatContainer.appendChild(messageDiv);
1062
+ chatContainer.scrollTop = chatContainer.scrollHeight;
1063
+ }
1064
+
1065
+ // Generate protocol
1066
+ function generateProtocol() {
1067
+ showToast('Generating communication protocol...', 'info');
1068
+
1069
+ setTimeout(() => {
1070
+ addAiMessage(`Communication Protocol Draft:
1071
+ 1. <strong>Daily Standups</strong>: 15-minute meetings at 9 AM to align priorities
1072
+ 2. <strong>Communication Channels</strong>:
1073
+ - Slack for urgent matters
1074
+ - Email for formal communications
1075
+ - Meetings for complex discussions
1076
+ 3. <strong>Response Times</strong>:
1077
+ - Urgent: Within 1 hour
1078
+ - Normal: Within 24 hours
1079
+ 4. <strong>Meeting Guidelines</strong>: Agenda required 24h in advance
1080
+
1081
+ Would you like to customize any of these or implement them?`);
1082
+ }, 2000);
1083
+ }
1084
+
1085
+ // Show more suggestions
1086
+ function showMoreSuggestions() {
1087
+ addAiMessage(`Additional recommendations for your People component:
1088
+ 1. <strong>Hiring Process</strong>: Implement structured interviews with scorecards
1089
+ 2. <strong>Onboarding</strong>: Create a 30-60-90 day plan for new hires
1090
+ 3. <strong>Performance Reviews</strong>: Quarterly reviews with clear metrics
1091
+ 4. <strong>Team Building</strong>: Monthly activities to strengthen relationships
1092
+
1093
+ I can help create templates or processes for any of these areas.`);
1094
+ }
1095
+
1096
+ // Get AI recommendations
1097
+ function getAiRecommendations() {
1098
+ showToast('Analyzing your business for recommendations...', 'info');
1099
+
1100
+ setTimeout(() => {
1101
+ addAiMessage(`Top Recommendations for Your Business:
1102
+ 1. <strong>Vision Alignment</strong>: Schedule a vision session to ensure 100% team alignment (85% complete)
1103
+ 2. <strong>Hiring Priority</strong>: Fill the Marketing Lead position within 30 days
1104
+ 3. <strong>Process Documentation</strong>: Complete the Customer Support process documentation
1105
+ 4. <strong>Issue Resolution</strong>: Address the client onboarding delays (open 12 days)
1106
+ 5. <strong>Metric Tracking</strong>: Add customer satisfaction to your scorecard
1107
+
1108
+ Would you like me to create an action plan for any of these?`);
1109
+ }, 2500);
1110
+ }
1111
+
1112
+ // Navigate to different sections
1113
+ function navigateTo(section) {
1114
+ // In a real app, this would load different content
1115
+ const titles = {
1116
+ 'dashboard': 'EOS Dashboard',
1117
+ 'vision': 'Vision Component',
1118
+ 'people': 'People Component',
1119
+ 'data': 'Data & Metrics',
1120
+ 'issues': 'Issues Tracker',
1121
+ 'process': 'Process Documentation',
1122
+ 'assistant': 'AI Assistant',
1123
+ 'settings': 'Settings',
1124
+ 'traction': 'Traction Tools',
1125
+ 'activity': 'Activity Log'
1126
+ };
1127
+
1128
+ document.getElementById('pageTitle').textContent = titles[section] || 'EOS Dashboard';
1129
+
1130
+ // Update active sidebar item
1131
+ document.querySelectorAll('.sidebar-item').forEach(item => {
1132
+ item.classList.remove('active');
1133
+ });
1134
+
1135
+ // Find and activate the corresponding sidebar item
1136
+ const sidebarItems = document.querySelectorAll('.sidebar-item');
1137
+ for (let item of sidebarItems) {
1138
+ if (item.textContent.toLowerCase().includes(section)) {
1139
+ item.classList.add('active');
1140
+ break;
1141
+ }
1142
+ }
1143
+
1144
+ // Close mobile menu if open
1145
+ const mobileMenu = document.getElementById('mobileSidebar');
1146
+ if (!mobileMenu.classList.contains('-translate-x-full')) {
1147
+ toggleMobileMenu();
1148
+ }
1149
+
1150
+ showToast(`Navigated to ${titles[section] || 'the selected section'}`, 'info');
1151
+ }
1152
+
1153
+ // Show toast notification
1154
+ function showToast(message, type) {
1155
+ const toast = document.createElement('div');
1156
+ let bgColor = 'bg-indigo-500';
1157
+
1158
+ if (type === 'error') bgColor = 'bg-red-500';
1159
+ if (type === 'success') bgColor = 'bg-green-500';
1160
+ if (type === 'info') bgColor = 'bg-blue-500';
1161
+
1162
+ toast.className = `fixed bottom-4 right-4 ${bgColor} text-white px-4 py-2 rounded-md shadow-lg flex items-center slide-in`;
1163
+ toast.innerHTML = `
1164
+ <span>${message}</span>
1165
+ <button onclick="this.parentElement.remove()" class="ml-2">
1166
+ <i class="fas fa-times"></i>
1167
+ </button>
1168
+ `;
1169
+ document.body.appendChild(toast);
1170
+
1171
+ setTimeout(() => {
1172
+ toast.remove();
1173
+ }, 5000);
1174
+ }
1175
+
1176
+ // Close dropdowns when clicking outside
1177
+ document.addEventListener('click', function(event) {
1178
+ if (!event.target.closest('.relative')) {
1179
+ document.getElementById('userDropdown').classList.add('hidden');
1180
+ document.getElementById('notificationsDropdown').classList.add('hidden');
1181
+ }
1182
+
1183
+ // Close mobile menu when clicking outside
1184
+ const mobileMenu = document.getElementById('mobileSidebar');
1185
+ if (!event.target.closest('#mobileSidebar') && !event.target.closest('.md\\:hidden.mr-2')) {
1186
+ if (!mobileMenu.classList.contains('-translate-x-full')) {
1187
+ toggleMobileMenu();
1188
+ }
1189
+ }
1190
+ });
1191
+
1192
+ // Handle Enter key in AI input
1193
+ document.getElementById('aiInput').addEventListener('keypress', function(e) {
1194
+ if (e.key === 'Enter') {
1195
+ sendMessage();
1196
+ }
1197
+ });
1198
+ </script>
1199
+ <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=JayStormX8/eosv2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1200
  </html>
prompts.txt ADDED
File without changes