Hugging Face's logo

Spaces:
JayStormX8
/
performance-management
Running

App Files Community
JayStormX8 commited on
Commit
4d80002
·
verified ·
1 Parent(s): 7ebb00e

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +672 -19
  3. prompts.txt +11 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Performance Management
3
- emoji: 🏢
4
  colorFrom: blue
5
- colorTo: red
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: performance-management
3
+ emoji: 🐳
4
  colorFrom: blue
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,672 @@
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>SkyGrowth | AI-Powered Performance & Growth Platform</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>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: {
15
+ 50: '#f0f9ff',
16
+ 100: '#e0f2fe',
17
+ 200: '#bae6fd',
18
+ 300: '#7dd3fc',
19
+ 400: '#38bdf8',
20
+ 500: '#0ea5e9',
21
+ 600: '#0284c7',
22
+ 700: '#0369a1',
23
+ 800: '#075985',
24
+ 900: '#0c4a6e',
25
+ }
26
+ }
27
+ }
28
+ }
29
+ }
30
+ </script>
31
+ <style>
32
+ .gradient-bg {
33
+ background: linear-gradient(135deg, #0ea5e9 0%, #7dd3fc 100%);
34
+ }
35
+ .sidebar {
36
+ transition: all 0.3s ease;
37
+ }
38
+ .chart-container {
39
+ position: relative;
40
+ height: 300px;
41
+ width: 100%;
42
+ }
43
+ .strength-card:hover {
44
+ transform: translateY(-5px);
45
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
46
+ }
47
+ .pulse-animation {
48
+ animation: pulse 2s infinite;
49
+ }
50
+ @keyframes pulse {
51
+ 0% {
52
+ box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.7);
53
+ }
54
+ 70% {
55
+ box-shadow: 0 0 0 10px rgba(14, 165, 233, 0);
56
+ }
57
+ 100% {
58
+ box-shadow: 0 0 0 0 rgba(14, 165, 233, 0);
59
+ }
60
+ }
61
+ </style>
62
+ </head>
63
+ <body class="bg-gray-50 font-sans">
64
+ <div class="flex h-screen overflow-hidden">
65
+ <!-- Sidebar -->
66
+ <div class="sidebar bg-white w-64 border-r border-gray-200 flex flex-col">
67
+ <div class="p-4 border-b border-gray-200">
68
+ <div class="flex items-center space-x-3">
69
+ <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold text-xl">SG</div>
70
+ <h1 class="text-xl font-bold text-gray-800">SkyGrowth</h1>
71
+ </div>
72
+ </div>
73
+ <div class="flex-1 overflow-y-auto p-4">
74
+ <nav>
75
+ <div class="space-y-1">
76
+ <a href="#" class="flex items-center space-x-3 px-3 py-2 bg-primary-100 text-primary-700 rounded-lg font-medium">
77
+ <i class="fas fa-tachometer-alt w-5 text-center"></i>
78
+ <span>Dashboard</span>
79
+ </a>
80
+ <a href="#" class="flex items-center space-x-3 px-3 py-2 text-gray-600 hover:bg-gray-100 rounded-lg font-medium">
81
+ <i class="fas fa-chart-line w-5 text-center"></i>
82
+ <span>Performance</span>
83
+ </a>
84
+ <a href="#" class="flex items-center space-x-3 px-3 py-2 text-gray-600 hover:bg-gray-100 rounded-lg font-medium">
85
+ <i class="fas fa-users w-5 text-center"></i>
86
+ <span>Team Culture</span>
87
+ </a>
88
+ <a href="#" class="flex items-center space-x-3 px-3 py-2 text-gray-600 hover:bg-gray-100 rounded-lg font-medium">
89
+ <i class="fas fa-brain w-5 text-center"></i>
90
+ <span>Strengths</span>
91
+ </a>
92
+ <a href="#" class="flex items-center space-x-3 px-3 py-2 text-gray-600 hover:bg-gray-100 rounded-lg font-medium">
93
+ <i class="fas fa-graduation-cap w-5 text-center"></i>
94
+ <span>Growth Path</span>
95
+ </a>
96
+ <a href="#" class="flex items-center space-x-3 px-3 py-2 text-gray-600 hover:bg-gray-100 rounded-lg font-medium">
97
+ <i class="fas fa-comments w-5 text-center"></i>
98
+ <span>AI Coach</span>
99
+ </a>
100
+ <a href="#" class="flex items-center space-x-3 px-3 py-2 text-gray-600 hover:bg-gray-100 rounded-lg font-medium">
101
+ <i class="fas fa-cog w-5 text-center"></i>
102
+ <span>Settings</span>
103
+ </a>
104
+ </div>
105
+
106
+ <div class="mt-8">
107
+ <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Teams</h3>
108
+ <div class="mt-2 space-y-1">
109
+ <a href="#" class="flex items-center space-x-3 px-3 py-2 text-gray-600 hover:bg-gray-100 rounded-lg font-medium">
110
+ <div class="w-2 h-2 rounded-full bg-green-500"></div>
111
+ <span>Product Team</span>
112
+ </a>
113
+ <a href="#" class="flex items-center space-x-3 px-3 py-2 text-gray-600 hover:bg-gray-100 rounded-lg font-medium">
114
+ <div class="w-2 h-2 rounded-full bg-blue-500"></div>
115
+ <span>Engineering</span>
116
+ </a>
117
+ <a href="#" class="flex items-center space-x-3 px-3 py-2 text-gray-600 hover:bg-gray-100 rounded-lg font-medium">
118
+ <div class="w-2 h-2 rounded-full bg-purple-500"></div>
119
+ <span>Marketing</span>
120
+ </a>
121
+ </div>
122
+ </div>
123
+ </nav>
124
+ </div>
125
+ <div class="p-4 border-t border-gray-200">
126
+ <div class="flex items-center space-x-3">
127
+ <div class="w-10 h-10 rounded-full bg-primary-500 flex items-center justify-center text-white font-bold">JD</div>
128
+ <div>
129
+ <p class="font-medium text-gray-800">John Doe</p>
130
+ <p class="text-xs text-gray-500">Admin</p>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </div>
135
+
136
+ <!-- Main Content -->
137
+ <div class="flex-1 overflow-auto">
138
+ <!-- Header -->
139
+ <header class="bg-white border-b border-gray-200">
140
+ <div class="flex items-center justify-between px-6 py-4">
141
+ <div class="flex items-center space-x-4">
142
+ <button class="text-gray-500 focus:outline-none lg:hidden">
143
+ <i class="fas fa-bars"></i>
144
+ </button>
145
+ <h1 class="text-xl font-bold text-gray-800">Performance Dashboard</h1>
146
+ </div>
147
+ <div class="flex items-center space-x-4">
148
+ <div class="relative">
149
+ <button class="text-gray-500 focus:outline-none">
150
+ <i class="fas fa-bell"></i>
151
+ </button>
152
+ <span class="absolute top-0 right-0 w-2 h-2 rounded-full bg-red-500"></span>
153
+ </div>
154
+ <div class="relative">
155
+ <button class="text-gray-500 focus:outline-none">
156
+ <i class="fas fa-envelope"></i>
157
+ </button>
158
+ <span class="absolute top-0 right-0 w-2 h-2 rounded-full bg-blue-500"></span>
159
+ </div>
160
+ <div class="relative">
161
+ <button id="ai-coach-btn" class="bg-primary-500 text-white px-4 py-2 rounded-full flex items-center space-x-2 hover:bg-primary-600 transition">
162
+ <i class="fas fa-robot"></i>
163
+ <span>AI Coach</span>
164
+ </button>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </header>
169
+
170
+ <!-- Dashboard Content -->
171
+ <main class="p-6">
172
+ <!-- Stats Cards -->
173
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
174
+ <div class="bg-white rounded-xl shadow-sm p-6">
175
+ <div class="flex items-center justify-between">
176
+ <div>
177
+ <p class="text-sm font-medium text-gray-500">Performance Score</p>
178
+ <p class="text-2xl font-bold text-gray-800 mt-1">87<span class="text-sm text-green-500 ml-1">+5%</span></p>
179
+ </div>
180
+ <div class="w-12 h-12 rounded-full bg-primary-50 flex items-center justify-center text-primary-500">
181
+ <i class="fas fa-chart-line text-xl"></i>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ <div class="bg-white rounded-xl shadow-sm p-6">
186
+ <div class="flex items-center justify-between">
187
+ <div>
188
+ <p class="text-sm font-medium text-gray-500">Strengths Identified</p>
189
+ <p class="text-2xl font-bold text-gray-800 mt-1">5<span class="text-sm text-green-500 ml-1">+2</span></p>
190
+ </div>
191
+ <div class="w-12 h-12 rounded-full bg-green-50 flex items-center justify-center text-green-500">
192
+ <i class="fas fa-brain text-xl"></i>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ <div class="bg-white rounded-xl shadow-sm p-6">
197
+ <div class="flex items-center justify-between">
198
+ <div>
199
+ <p class="text-sm font-medium text-gray-500">Growth Areas</p>
200
+ <p class="text-2xl font-bold text-gray-800 mt-1">3<span class="text-sm text-yellow-500 ml-1">-1</span></p>
201
+ </div>
202
+ <div class="w-12 h-12 rounded-full bg-yellow-50 flex items-center justify-center text-yellow-500">
203
+ <i class="fas fa-seedling text-xl"></i>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ <div class="bg-white rounded-xl shadow-sm p-6">
208
+ <div class="flex items-center justify-between">
209
+ <div>
210
+ <p class="text-sm font-medium text-gray-500">Team Culture Index</p>
211
+ <p class="text-2xl font-bold text-gray-800 mt-1">92<span class="text-sm text-green-500 ml-1">+8%</span></p>
212
+ </div>
213
+ <div class="w-12 h-12 rounded-full bg-purple-50 flex items-center justify-center text-purple-500">
214
+ <i class="fas fa-users text-xl"></i>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+
220
+ <!-- Performance Chart -->
221
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
222
+ <div class="flex items-center justify-between mb-6">
223
+ <h2 class="text-lg font-bold text-gray-800">Performance Trends</h2>
224
+ <div class="flex space-x-2">
225
+ <button class="px-3 py-1 text-sm bg-primary-50 text-primary-600 rounded-md">Monthly</button>
226
+ <button class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded-md">Quarterly</button>
227
+ <button class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded-md">Yearly</button>
228
+ </div>
229
+ </div>
230
+ <div class="chart-container">
231
+ <canvas id="performanceChart"></canvas>
232
+ </div>
233
+ </div>
234
+
235
+ <!-- Strengths and Growth Areas -->
236
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
237
+ <!-- Strengths -->
238
+ <div class="bg-white rounded-xl shadow-sm p-6">
239
+ <div class="flex items-center justify-between mb-6">
240
+ <h2 class="text-lg font-bold text-gray-800">Your Top Strengths</h2>
241
+ <button class="text-primary-500 hover:text-primary-600">
242
+ <i class="fas fa-plus"></i> Add Strength
243
+ </button>
244
+ </div>
245
+ <div class="space-y-4">
246
+ <div class="strength-card bg-green-50 border border-green-100 rounded-lg p-4 transition cursor-pointer">
247
+ <div class="flex items-start justify-between">
248
+ <div>
249
+ <h3 class="font-bold text-green-800">Strategic Thinking</h3>
250
+ <p class="text-sm text-green-600 mt-1">You excel at seeing the big picture and planning long-term strategies.</p>
251
+ </div>
252
+ <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600">
253
+ <i class="fas fa-chess"></i>
254
+ </div>
255
+ </div>
256
+ <div class="mt-3 flex items-center text-xs text-green-600">
257
+ <span class="mr-2">Identified: 3 months ago</span>
258
+ <span>Confidence: 92%</span>
259
+ </div>
260
+ </div>
261
+ <div class="strength-card bg-blue-50 border border-blue-100 rounded-lg p-4 transition cursor-pointer">
262
+ <div class="flex items-start justify-between">
263
+ <div>
264
+ <h3 class="font-bold text-blue-800">Emotional Intelligence</h3>
265
+ <p class="text-sm text-blue-600 mt-1">You're highly aware of emotions in yourself and others.</p>
266
+ </div>
267
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
268
+ <i class="fas fa-heart"></i>
269
+ </div>
270
+ </div>
271
+ <div class="mt-3 flex items-center text-xs text-blue-600">
272
+ <span class="mr-2">Identified: 1 month ago</span>
273
+ <span>Confidence: 88%</span>
274
+ </div>
275
+ </div>
276
+ <div class="strength-card bg-purple-50 border border-purple-100 rounded-lg p-4 transition cursor-pointer">
277
+ <div class="flex items-start justify-between">
278
+ <div>
279
+ <h3 class="font-bold text-purple-800">Adaptability</h3>
280
+ <p class="text-sm text-purple-600 mt-1">You thrive in changing environments and adjust quickly.</p>
281
+ </div>
282
+ <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
283
+ <i class="fas fa-random"></i>
284
+ </div>
285
+ </div>
286
+ <div class="mt-3 flex items-center text-xs text-purple-600">
287
+ <span class="mr-2">Identified: 2 weeks ago</span>
288
+ <span>Confidence: 85%</span>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+
294
+ <!-- Growth Areas -->
295
+ <div class="bg-white rounded-xl shadow-sm p-6">
296
+ <div class="flex items-center justify-between mb-6">
297
+ <h2 class="text-lg font-bold text-gray-800">Growth Opportunities</h2>
298
+ <button class="text-primary-500 hover:text-primary-600">
299
+ <i class="fas fa-plus"></i> Add Goal
300
+ </button>
301
+ </div>
302
+ <div class="space-y-4">
303
+ <div class="bg-yellow-50 border border-yellow-100 rounded-lg p-4">
304
+ <div class="flex items-start justify-between">
305
+ <div>
306
+ <h3 class="font-bold text-yellow-800">Public Speaking</h3>
307
+ <p class="text-sm text-yellow-600 mt-1">Improve confidence and clarity when presenting to groups.</p>
308
+ </div>
309
+ <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
310
+ <i class="fas fa-bullhorn"></i>
311
+ </div>
312
+ </div>
313
+ <div class="mt-3">
314
+ <div class="flex items-center justify-between text-xs text-yellow-600 mb-1">
315
+ <span>Progress</span>
316
+ <span>45%</span>
317
+ </div>
318
+ <div class="w-full bg-yellow-100 rounded-full h-2">
319
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 45%"></div>
320
+ </div>
321
+ </div>
322
+ </div>
323
+ <div class="bg-orange-50 border border-orange-100 rounded-lg p-4">
324
+ <div class="flex items-start justify-between">
325
+ <div>
326
+ <h3 class="font-bold text-orange-800">Technical Skills</h3>
327
+ <p class="text-sm text-orange-600 mt-1">Develop advanced data analysis capabilities.</p>
328
+ </div>
329
+ <div class="w-8 h-8 rounded-full bg-orange-100 flex items-center justify-center text-orange-600">
330
+ <i class="fas fa-code"></i>
331
+ </div>
332
+ </div>
333
+ <div class="mt-3">
334
+ <div class="flex items-center justify-between text-xs text-orange-600 mb-1">
335
+ <span>Progress</span>
336
+ <span>30%</span>
337
+ </div>
338
+ <div class="w-full bg-orange-100 rounded-full h-2">
339
+ <div class="bg-orange-500 h-2 rounded-full" style="width: 30%"></div>
340
+ </div>
341
+ </div>
342
+ </div>
343
+ <div class="bg-red-50 border border-red-100 rounded-lg p-4">
344
+ <div class="flex items-start justify-between">
345
+ <div>
346
+ <h3 class="font-bold text-red-800">Time Management</h3>
347
+ <p class="text-sm text-red-600 mt-1">Better prioritize tasks and minimize distractions.</p>
348
+ </div>
349
+ <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center text-red-600">
350
+ <i class="fas fa-clock"></i>
351
+ </div>
352
+ </div>
353
+ <div class="mt-3">
354
+ <div class="flex items-center justify-between text-xs text-red-600 mb-1">
355
+ <span>Progress</span>
356
+ <span>60%</span>
357
+ </div>
358
+ <div class="w-full bg-red-100 rounded-full h-2">
359
+ <div class="bg-red-500 h-2 rounded-full" style="width: 60%"></div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </div>
366
+
367
+ <!-- Team Culture Insights -->
368
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
369
+ <div class="flex items-center justify-between mb-6">
370
+ <h2 class="text-lg font-bold text-gray-800">Team Culture Insights</h2>
371
+ <button class="text-primary-500 hover:text-primary-600">
372
+ <i class="fas fa-plus"></i> Request Feedback
373
+ </button>
374
+ </div>
375
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
376
+ <div class="bg-indigo-50 rounded-lg p-4">
377
+ <div class="flex items-center space-x-3 mb-3">
378
+ <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600">
379
+ <i class="fas fa-hands-helping"></i>
380
+ </div>
381
+ <h3 class="font-bold text-indigo-800">Collaboration</h3>
382
+ </div>
383
+ <p class="text-sm text-indigo-600">Your team rates collaboration at 89/100, higher than 75% of similar teams.</p>
384
+ <div class="mt-4">
385
+ <div class="flex items-center justify-between text-xs text-indigo-600 mb-1">
386
+ <span>Team Average</span>
387
+ <span>89/100</span>
388
+ </div>
389
+ <div class="w-full bg-indigo-100 rounded-full h-2">
390
+ <div class="bg-indigo-500 h-2 rounded-full" style="width: 89%"></div>
391
+ </div>
392
+ </div>
393
+ </div>
394
+ <div class="bg-pink-50 rounded-lg p-4">
395
+ <div class="flex items-center space-x-3 mb-3">
396
+ <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center text-pink-600">
397
+ <i class="fas fa-lightbulb"></i>
398
+ </div>
399
+ <h3 class="font-bold text-pink-800">Innovation</h3>
400
+ </div>
401
+ <p class="text-sm text-pink-600">Innovation scores have increased by 12% this quarter to 78/100.</p>
402
+ <div class="mt-4">
403
+ <div class="flex items-center justify-between text-xs text-pink-600 mb-1">
404
+ <span>Team Average</span>
405
+ <span>78/100</span>
406
+ </div>
407
+ <div class="w-full bg-pink-100 rounded-full h-2">
408
+ <div class="bg-pink-500 h-2 rounded-full" style="width: 78%"></div>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ <div class="bg-teal-50 rounded-lg p-4">
413
+ <div class="flex items-center space-x-3 mb-3">
414
+ <div class="w-10 h-10 rounded-full bg-teal-100 flex items-center justify-center text-teal-600">
415
+ <i class="fas fa-heartbeat"></i>
416
+ </div>
417
+ <h3 class="font-bold text-teal-800">Wellbeing</h3>
418
+ </div>
419
+ <p class="text-sm text-teal-600">Wellbeing scores are stable at 82/100, with work-life balance as a strength.</p>
420
+ <div class="mt-4">
421
+ <div class="flex items-center justify-between text-xs text-teal-600 mb-1">
422
+ <span>Team Average</span>
423
+ <span>82/100</span>
424
+ </div>
425
+ <div class="w-full bg-teal-100 rounded-full h-2">
426
+ <div class="bg-teal-500 h-2 rounded-full" style="width: 82%"></div>
427
+ </div>
428
+ </div>
429
+ </div>
430
+ </div>
431
+ </div>
432
+
433
+ <!-- AI Coach Chat (Hidden by default) -->
434
+ <div id="ai-coach-chat" class="hidden fixed bottom-6 right-6 w-96 bg-white rounded-xl shadow-xl flex flex-col border border-gray-200 z-50">
435
+ <div class="bg-primary-500 text-white rounded-t-xl p-4 flex items-center justify-between">
436
+ <div class="flex items-center space-x-2">
437
+ <div class="w-8 h-8 rounded-full bg-white text-primary-500 flex items-center justify-center">
438
+ <i class="fas fa-robot"></i>
439
+ </div>
440
+ <h3 class="font-bold">AI Growth Coach</h3>
441
+ </div>
442
+ <button id="close-chat" class="text-white hover:text-gray-200">
443
+ <i class="fas fa-times"></i>
444
+ </button>
445
+ </div>
446
+ <div class="flex-1 p-4 overflow-y-auto bg-gray-50" id="chat-messages" style="height: 300px;">
447
+ <div class="mb-4">
448
+ <div class="flex items-start space-x-2">
449
+ <div class="w-8 h-8 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center">
450
+ <i class="fas fa-robot"></i>
451
+ </div>
452
+ <div class="bg-white p-3 rounded-lg shadow-sm max-w-xs">
453
+ <p class="text-sm">Hello! I'm your AI Growth Coach. How can I help you with your performance, strengths, or growth goals today?</p>
454
+ </div>
455
+ </div>
456
+ </div>
457
+ </div>
458
+ <div class="p-4 border-t border-gray-200 bg-white rounded-b-xl">
459
+ <div class="flex space-x-2">
460
+ <input type="text" id="chat-input" placeholder="Ask me anything..." class="flex-1 border border-gray-300 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent">
461
+ <button id="send-message" class="w-10 h-10 rounded-full bg-primary-500 text-white flex items-center justify-center hover:bg-primary-600">
462
+ <i class="fas fa-paper-plane"></i>
463
+ </button>
464
+ </div>
465
+ <div class="mt-2 flex space-x-2 overflow-x-auto">
466
+ <button class="quick-prompt px-3 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded-full">Suggest growth goals</button>
467
+ <button class="quick-prompt px-3 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded-full">Analyze my strengths</button>
468
+ <button class="quick-prompt px-3 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded-full">Team culture tips</button>
469
+ </div>
470
+ </div>
471
+ </div>
472
+ </main>
473
+ </div>
474
+ </div>
475
+
476
+ <!-- DeepSeek API Integration Modal -->
477
+ <div id="api-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
478
+ <div class="bg-white rounded-xl p-6 w-full max-w-md">
479
+ <div class="flex justify-between items-center mb-4">
480
+ <h3 class="text-lg font-bold">Connect DeepSeek API</h3>
481
+ <button id="close-api-modal" class="text-gray-500 hover:text-gray-700">
482
+ <i class="fas fa-times"></i>
483
+ </button>
484
+ </div>
485
+ <div class="space-y-4">
486
+ <div>
487
+ <label class="block text-sm font-medium text-gray-700 mb-1">API Key</label>
488
+ <input type="password" placeholder="Enter your DeepSeek API key" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500">
489
+ </div>
490
+ <div>
491
+ <label class="block text-sm font-medium text-gray-700 mb-1">Model</label>
492
+ <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500">
493
+ <option>DeepSeek-Pro</option>
494
+ <option>DeepSeek-Lite</option>
495
+ <option>DeepSeek-Custom</option>
496
+ </select>
497
+ </div>
498
+ <div class="flex justify-end space-x-3 pt-4">
499
+ <button id="cancel-api" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">Cancel</button>
500
+ <button id="save-api" class="px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600">Connect</button>
501
+ </div>
502
+ </div>
503
+ </div>
504
+ </div>
505
+
506
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
507
+ <script>
508
+ // Initialize performance chart
509
+ const ctx = document.getElementById('performanceChart').getContext('2d');
510
+ const performanceChart = new Chart(ctx, {
511
+ type: 'line',
512
+ data: {
513
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
514
+ datasets: [
515
+ {
516
+ label: 'Performance Score',
517
+ data: [75, 78, 82, 80, 85, 87, 89],
518
+ borderColor: '#0ea5e9',
519
+ backgroundColor: 'rgba(14, 165, 233, 0.1)',
520
+ tension: 0.3,
521
+ fill: true,
522
+ borderWidth: 2
523
+ },
524
+ {
525
+ label: 'Team Average',
526
+ data: [70, 72, 75, 77, 79, 82, 84],
527
+ borderColor: '#94a3b8',
528
+ backgroundColor: 'rgba(148, 163, 184, 0.05)',
529
+ tension: 0.3,
530
+ borderDash: [5, 5],
531
+ borderWidth: 1
532
+ }
533
+ ]
534
+ },
535
+ options: {
536
+ responsive: true,
537
+ maintainAspectRatio: false,
538
+ plugins: {
539
+ legend: {
540
+ position: 'top',
541
+ },
542
+ tooltip: {
543
+ mode: 'index',
544
+ intersect: false,
545
+ }
546
+ },
547
+ scales: {
548
+ y: {
549
+ beginAtZero: false,
550
+ min: 60,
551
+ max: 100
552
+ }
553
+ }
554
+ }
555
+ });
556
+
557
+ // AI Coach Chat functionality
558
+ const aiCoachBtn = document.getElementById('ai-coach-btn');
559
+ const aiCoachChat = document.getElementById('ai-coach-chat');
560
+ const closeChat = document.getElementById('close-chat');
561
+ const chatMessages = document.getElementById('chat-messages');
562
+ const chatInput = document.getElementById('chat-input');
563
+ const sendMessageBtn = document.getElementById('send-message');
564
+ const quickPrompts = document.querySelectorAll('.quick-prompt');
565
+
566
+ aiCoachBtn.addEventListener('click', () => {
567
+ aiCoachChat.classList.toggle('hidden');
568
+ });
569
+
570
+ closeChat.addEventListener('click', () => {
571
+ aiCoachChat.classList.add('hidden');
572
+ });
573
+
574
+ function addMessage(content, isUser = false) {
575
+ const messageDiv = document.createElement('div');
576
+ messageDiv.classList.add('mb-4');
577
+
578
+ if (isUser) {
579
+ messageDiv.classList.add('flex', 'justify-end');
580
+ messageDiv.innerHTML = `
581
+ <div class="flex items-start space-x-2 flex-row-reverse">
582
+ <div class="w-8 h-8 rounded-full bg-primary-500 text-white flex items-center justify-center">
583
+ <i class="fas fa-user"></i>
584
+ </div>
585
+ <div class="bg-primary-500 text-white p-3 rounded-lg shadow-sm max-w-xs">
586
+ <p class="text-sm">${content}</p>
587
+ </div>
588
+ </div>
589
+ `;
590
+ } else {
591
+ messageDiv.innerHTML = `
592
+ <div class="flex items-start space-x-2">
593
+ <div class="w-8 h-8 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center">
594
+ <i class="fas fa-robot"></i>
595
+ </div>
596
+ <div class="bg-white p-3 rounded-lg shadow-sm max-w-xs">
597
+ <p class="text-sm">${content}</p>
598
+ </div>
599
+ </div>
600
+ `;
601
+ }
602
+
603
+ chatMessages.appendChild(messageDiv);
604
+ chatMessages.scrollTop = chatMessages.scrollHeight;
605
+ }
606
+
607
+ sendMessageBtn.addEventListener('click', () => {
608
+ const message = chatInput.value.trim();
609
+ if (message) {
610
+ addMessage(message, true);
611
+ chatInput.value = '';
612
+
613
+ // Simulate AI response
614
+ setTimeout(() => {
615
+ const responses = [
616
+ "Based on your performance data, I'd suggest focusing on your public speaking goal first. Would you like me to create a 30-day plan?",
617
+ "Your strategic thinking strength could be leveraged to improve your time management. Want to explore how?",
618
+ "I notice your team's collaboration score is excellent. Maybe we could work on transferring some of those skills to your growth areas.",
619
+ "Looking at your data, you're making great progress! Would you like me to adjust any of your growth goals?"
620
+ ];
621
+ const randomResponse = responses[Math.floor(Math.random() * responses.length)];
622
+ addMessage(randomResponse);
623
+ }, 1000);
624
+ }
625
+ });
626
+
627
+ chatInput.addEventListener('keypress', (e) => {
628
+ if (e.key === 'Enter') {
629
+ sendMessageBtn.click();
630
+ }
631
+ });
632
+
633
+ quickPrompts.forEach(prompt => {
634
+ prompt.addEventListener('click', () => {
635
+ chatInput.value = prompt.textContent;
636
+ chatInput.focus();
637
+ });
638
+ });
639
+
640
+ // DeepSeek API Modal functionality
641
+ const apiModal = document.getElementById('api-modal');
642
+ const closeApiModal = document.getElementById('close-api-modal');
643
+ const cancelApi = document.getElementById('cancel-api');
644
+ const saveApi = document.getElementById('save-api');
645
+
646
+ // This would normally be triggered from a settings page
647
+ // For demo, we'll add a hidden button to show the modal
648
+ const showApiModal = () => {
649
+ apiModal.classList.remove('hidden');
650
+ };
651
+
652
+ closeApiModal.addEventListener('click', () => {
653
+ apiModal.classList.add('hidden');
654
+ });
655
+
656
+ cancelApi.addEventListener('click', () => {
657
+ apiModal.classList.add('hidden');
658
+ });
659
+
660
+ saveApi.addEventListener('click', () => {
661
+ // Here you would normally save the API key and connect
662
+ alert('DeepSeek API connected successfully!');
663
+ apiModal.classList.add('hidden');
664
+ });
665
+
666
+ // Pulse animation for AI coach button
667
+ setInterval(() => {
668
+ aiCoachBtn.classList.toggle('pulse-animation');
669
+ }, 5000);
670
+ </script>
671
+ <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/performance-management" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
672
+ </html>
prompts.txt ADDED
@@ -0,0 +1,11 @@
 
 
 
 
 
 
 
 
 
 
 
 
1
+ Create a hero image for Ski Ai a business Ai that helps build apps to increase revenue and reduce expenses
2
+ Great just give me to code for the trusted by business and the images and stars etc...
3
+ Make the background white
4
+ Great change up the name it is Sky Ai, and have it completely white background for the header
5
+ Great, make it more blue chrome color and keep everything else, have just one call to action of hop on a call or something like that
6
+ Rebuild the header based on our offering --- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sky AI - Choose Your Power</title> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> .chrome-gradient { background: linear-gradient(135deg, rgba(56,182,255,1) 0%, rgba(0,114,245,1) 50%, rgba(0,71,186,1) 100%); } .card-hover { transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0, 114, 245, 0.1); } .card-hover:hover { transform: translateY(-8px); box-shadow: 0 20px 25px rgba(0, 114, 245, 0.2); } .feature-item { position: relative; padding-left: 2rem; transition: all 0.2s ease; } .feature-item:hover { transform: translateX(5px); } .feature-item:before { content: "✦"; position: absolute; left: 0; color: #38b6ff; font-weight: bold; } .glow { animation: glow 2s ease-in-out infinite alternate; } @keyframes glow { from { box-shadow: 0 0 5px rgba(56, 182, 255, 0.5); } to { box-shadow: 0 0 20px rgba(56, 182, 255, 0.8); } } .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .step-card { border-left: 4px solid #38b6ff; transition: all 0.3s ease; } .step-card:hover { border-left-width: 8px; background-color: rgba(56, 182, 255, 0.05); } .comparison-row:hover { background-color: rgba(56, 182, 255, 0.05); } .slider-thumb::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #0072f5; cursor: pointer; } .slider-thumb::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #0072f5; cursor: pointer; } </style> </head> <body class="bg-gray-50"> <div class="min-h-screen py-12 px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto"> <!-- Hero Section --> <div class="text-center mb-16"> <h1 class="text-5xl font-extrabold text-gray-900 sm:text-6xl sm:tracking-tight lg:text-7xl mb-6"> <span class="bg-clip-text text-transparent chrome-gradient">Sky AI Power Tiers</span> </h1> <p class="mt-5 max-w-2xl mx-auto text-xl text-gray-600"> Choose your path to AI-powered business transformation </p> </div> <!-- Pricing Cards --> <div class="mt-16 grid gap-8 lg:grid-cols-2 lg:gap-8 max-w-6xl mx-auto"> <!-- Oracle Plan --> <div class="flex"> <div class="relative bg-white rounded-2xl overflow-hidden flex-1 card-hover border-2 border-blue-100 hover:border-blue-300"> <div class="p-8"> <div class="flex items-center mb-4"> <div class="bg-blue-100 p-2 rounded-lg"> <i class="fas fa-brain text-blue-600 text-2xl"></i> </div> <h3 class="ml-3 text-3xl font-bold text-gray-900">The Oracle</h3> </div> <p class="mt-2 text-lg text-blue-600 font-medium">AI Knowledge Engine for Your Business</p> <div class="mt-8"> <div class="inline-block px-4 py-2 rounded-full bg-blue-50"> <span class="text-xl font-extrabold text-gray-900">Knowledge Mastery</span> </div> </div> <ul class="mt-8 space-y-4"> <li class="feature-item">Instant answers from your documents, emails, and databases</li> <li class="feature-item">24/7 expert assistant trained on your company knowledge</li> <li class="feature-item">Automated workflow analysis and optimization suggestions</li> <li class="feature-item">Smart document organization and retrieval system</li> <li class="feature-item">Predictive insights based on your business data</li> </ul> <div class="mt-10 pt-6 border-t border-gray-200"> <button class="w-full chrome-gradient text-white font-bold py-3 px-4 rounded-lg hover:opacity-90 transition"> Deploy Your Knowledge AI </button> </div> </div> </div> </div> <!-- Architect Plan --> <div class="flex"> <div class="relative bg-white rounded-2xl overflow-hidden flex-1 card-hover border-2 border-blue-200 hover:border-blue-400 glow"> <div class="absolute top-4 right-4"> <div class="bg-yellow-400 text-xs font-bold px-3 py-1 rounded-full transform rotate-12"> MOST POWERFUL </div> </div> <div class="p-8"> <div class="flex items-center mb-4"> <div class="bg-blue-200 p-2 rounded-lg pulse"> <i class="fas fa-magic text-blue-700 text-2xl"></i> </div> <h3 class="ml-3 text-3xl font-bold text-gray-900">The Architect</h3> </div> <p class="mt-2 text-lg text-blue-700 font-medium">Custom AI Tool Development Platform</p> <div class="mt-8"> <div class="inline-block px-4 py-2 rounded-full bg-blue-100"> <span class="text-xl font-extrabold text-gray-900">Creation Unleashed</span> </div> </div> <ul class="mt-8 space-y-4"> <li class="feature-item"><strong>Includes all Oracle features</strong></li> <li class="feature-item">Build custom AI tools with natural language prompts</li> <li class="feature-item">First production-ready tool built by our AI engineers</li> <li class="feature-item">Create revenue-generating AI applications</li> <li class="feature-item">Automate complex business processes end-to-end</li> <li class="feature-item">Early access to cutting-edge AI capabilities</li> </ul> <div class="mt-10 pt-6 border-t border-gray-200"> <button class="w-full chrome-gradient text-white font-bold py-3 px-4 rounded-lg hover:opacity-90 transition"> Start Building AI Tools </button> </div> </div> </div> </div> </div> <!-- Feature Comparison --> <div class="mt-24 max-w-5xl mx-auto"> <h2 class="text-3xl font-bold text-center text-gray-900 mb-8">Plan Capabilities Comparison</h2> <div class="bg-white shadow-lg rounded-xl overflow-hidden"> <div class="grid grid-cols-4 divide-x divide-gray-200 bg-gray-50"> <div class="p-4 font-medium text-gray-500">Feature</div> <div class="p-4 font-medium text-center text-blue-600">The Oracle</div> <div class="p-4 font-medium text-center text-blue-700">The Architect</div> <div class="p-4 font-medium text-center text-gray-500">Business Impact</div> </div> <!-- Knowledge Base --> <div class="grid grid-cols-4 divide-x divide-gray-200 comparison-row"> <div class="p-4 flex items-center font-medium">Company Knowledge Base</div> <div class="p-4 text-center"><i class="fas fa-check-circle text-blue-500 text-xl"></i></div> <div class="p-4 text-center"><i class="fas fa-check-circle text-blue-600 text-xl"></i></div> <div class="p-4 text-gray-600">Centralized AI access to all company information and documents</div> </div> <!-- Instant Answers --> <div class="grid grid-cols-4 divide-x divide-gray-200 comparison-row"> <div class="p-4 flex items-center font-medium">Instant Answers</div> <div class="p-4 text-center"><i class="fas fa-check-circle text-blue-500 text-xl"></i></div> <div class="p-4 text-center"><i class="fas fa-check-circle text-blue-600 text-xl"></i></div> <div class="p-4 text-gray-600">Reduce employee time spent searching for information by 80%</div> </div> <!-- Process Optimization --> <div class="grid grid-cols-4 divide-x divide-gray-200 comparison-row"> <div class="p-4 flex items-center font-medium">Process Optimization</div> <div class="p-4 text-center"><i class="fas fa-check-circle text-blue-500 text-xl"></i></div> <div class="p-4 text-center"><i class="fas fa-check-circle text-blue-600 text-xl"></i></div> <div class="p-4 text-gray-600">AI identifies inefficiencies and suggests measurable improvements</div> </div> <!-- Tool Building --> <div class="grid grid-cols-4 divide-x divide-gray-200 comparison-row"> <div class="p-4 flex items-center font-medium">Custom AI Tool Creation</div> <div class="p-4 text-center"><i class="fas fa-times-circle text-gray-300 text-xl"></i></div> <div class="p-4 text-center"><i class="fas fa-check-circle text-blue-600 text-xl"></i></div> <div class="p-4 text-gray-600">Transform business needs into functional AI applications with simple prompts</div> </div> <!-- First Tool --> <div class="grid grid-cols-4 divide-x divide-gray-200 comparison-row"> <div class="p-4 flex items-center font-medium">First Production Tool</div> <div class="p-4 text-center"><i class="fas fa-times-circle text-gray-300 text-xl"></i></div> <div class="p-4 text-center"><i class="fas fa-check-circle text-blue-600 text-xl"></i></div> <div class="p-4 text-gray-600">Our engineers build and deploy your first custom tool within 48 hours</div> </div> <!-- Revenue Tools --> <div class="grid grid-cols-4 divide-x divide-gray-200 comparison-row"> <div class="p-4 flex items-center font-medium">Revenue-Generating AI</div> <div class="p-4 text-center"><i class="fas fa-times-circle text-gray-300 text-xl"></i></div> <div class="p-4 text-center"><i class="fas fa-check-circle text-blue-600 text-xl"></i></div> <div class="p-4 text-gray-600">Develop AI applications that directly increase sales and customer engagement</div> </div> <!-- Priority Access --> <div class="grid grid-cols-4 divide-x divide-gray-200 comparison-row"> <div class="p-4 flex items-center font-medium">Advanced Feature Access</div> <div class="p-4 text-center"><i class="fas fa-times-circle text-gray-300 text-xl"></i></div> <div class="p-4 text-center"><i class="fas fa-check-circle text-blue-600 text-xl"></i></div> <div class="p-4 text-gray-600">Get exclusive early access to cutting-edge AI capabilities</div> </div> </div> </div> <!-- 3-Step Onboarding --> <div class="mt-24 bg-white rounded-xl shadow-lg overflow-hidden"> <div class="chrome-gradient p-6 text-white text-center"> <h2 class="text-2xl font-bold">Implementation Process</h2> <p class="mt-2">Get your AI solution operational in 3 business days</p> </div> <div class="grid md:grid-cols-3 gap-8 p-8"> <div class="step-card p-6 rounded-lg"> <div class="flex items-center mb-4"> <div class="bg-blue-100 text-blue-600 font-bold rounded-full h-8 w-8 flex items-center justify-center mr-3">1</div> <h3 class="text-lg font-bold text-gray-800">Select Your AI Tier</h3> </div> <p class="text-gray-600">Choose between The Oracle for instant knowledge access or The Architect for custom AI tool development.</p> <ul class="mt-3 ml-5 list-disc text-gray-600 text-sm"> <li>Oracle: Immediate deployment</li> <li>Architect: 48-hour first tool delivery</li> </ul> </div> <div class="step-card p-6 rounded-lg"> <div class="flex items-center mb-4"> <div class="bg-blue-100 text-blue-600 font-bold rounded-full h-8 w-8 flex items-center justify-center mr-3">2</div> <h3 class="text-lg font-bold text-gray-800">Data Integration</h3> </div> <p class="text-gray-600">Connect your business data sources through our secure onboarding portal.</p> <ul class="mt-3 ml-5 list-disc text-gray-600 text-sm"> <li>Google Drive, Notion, Dropbox, databases</li> <li>256-bit encryption throughout</li> <li>Permission controls by department</li> </ul> </div> <div class="step-card p-6 rounded-lg"> <div class="flex items-center mb-4"> <div class="bg-blue-100 text-blue-600 font-bold rounded-full h-8 w-8 flex items-center justify-center mr-3">3</div> <h3 class="text-lg font-bold text-gray-800">AI Activation</h3> </div> <p class="text-gray-600">Your AI solution goes live with team training and ongoing support.</p> <ul class="mt-3 ml-5 list-disc text-gray-600 text-sm"> <li>Oracle: Instant access to knowledge</li> <li>Architect: First custom tool deployed</li> <li>Dedicated success manager</li> </ul> </div> </div> </div> <!-- ROI Calculator --> <div class="mt-24 bg-white rounded-xl shadow-lg overflow-hidden"> <div class="chrome-gradient p-6 text-white text-center"> <h2 class="text-2xl font-bold">AI Impact Calculator</h2> <p class="mt-2">Estimate your potential revenue growth and cost savings</p> </div> <div class="grid md:grid-cols-2 gap-8 p-8"> <!-- Revenue Growth Calculator --> <div class="bg-blue-50 p-6 rounded-lg"> <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> <i class="fas fa-chart-line text-blue-600 mr-2"></i> Revenue Growth Potential </h3> <div class="mb-6"> <label for="annualRevenue" class="block text-sm font-medium text-gray-700 mb-2"> Current Annual Revenue ($) </label> <input type="range" id="annualRevenue" min="100000" max="10000000" step="100000" value="1000000" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb"> <div class="flex justify-between mt-2"> <span class="text-xs text-gray-500">$100K</span> <span class="text-xs text-gray-500">$10M</span> </div> <div class="mt-2"> <input type="number" id="annualRevenueDisplay" value="1000000" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> </div> </div> <div class="mb-6"> <label for="revenueGrowth" class="block text-sm font-medium text-gray-700 mb-2"> Expected Revenue Growth (%) </label> <div class="flex items-center"> <span class="text-sm font-medium text-gray-500 mr-2">Oracle:</span> <span id="oracleGrowthValue" class="text-blue-600 font-bold">5%</span> <span class="text-sm font-medium text-gray-500 mx-2">vs</span> <span class="text-sm font-medium text-gray-500 mr-2">Architect:</span> <span id="architectGrowthValue" class="text-blue-700 font-bold">15%</span> </div> <input type="range" id="revenueGrowth" min="5" max="30" step="1" value="15" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb mt-2"> <div class="flex justify-between mt-2"> <span class="text-xs text-gray-500">5%</span> <span class="text-xs text-gray-500">30%</span> </div> </div> <div class="bg-white p-4 rounded-lg border border-blue-100"> <h4 class="font-medium text-gray-700 mb-2">Projected Annual Revenue Increase</h4> <div class="grid grid-cols-2 gap-4"> <div class="text-center"> <div class="text-sm text-gray-500">Oracle</div> <div id="oracleRevenueImpact" class="text-xl font-bold text-blue-600">$50,000</div> </div> <div class="text-center"> <div class="text-sm text-gray-500">Architect</div> <div id="architectRevenueImpact" class="text-xl font-bold text-blue-700">$150,000</div> </div> </div> </div> </div> <!-- Cost Savings Calculator --> <div class="bg-blue-50 p-6 rounded-lg"> <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> <i class="fas fa-piggy-bank text-blue-600 mr-2"></i> Operational Cost Savings </h3> <div class="mb-6"> <label for="employeeCount" class="block text-sm font-medium text-gray-700 mb-2"> Number of Employees </label> <input type="range" id="employeeCount" min="5" max="500" step="5" value="50" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb"> <div class="flex justify-between mt-2"> <span class="text-xs text-gray-500">5</span> <span class="text-xs text-gray-500">500</span> </div> <div class="mt-2"> <input type="number" id="employeeCountDisplay" value="50" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> </div> </div> <div class="mb-6"> <label for="avgSalary" class="block text-sm font-medium text-gray-700 mb-2"> Average Employee Salary ($) </label> <input type="range" id="avgSalary" min="30000" max="150000" step="5000" value="60000" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb"> <div class="flex justify-between mt-2"> <span class="text-xs text-gray-500">$30K</span> <span class="text-xs text-gray-500">$150K</span> </div> <div class="mt-2"> <input type="number" id="avgSalaryDisplay" value="60000" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> </div> </div> <div class="bg-white p-4 rounded-lg border border-blue-100"> <h4 class="font-medium text-gray-700 mb-2">Projected Annual Savings</h4> <div class="grid grid-cols-2 gap-4"> <div class="text-center"> <div class="text-sm text-gray-500">Oracle</div> <div id="oracleSavingsImpact" class="text-xl font-bold text-blue-600">$120,000</div> <div class="text-xs text-gray-500">(8 hours/week saved)</div> </div> <div class="text-center"> <div class="text-sm text-gray-500">Architect</div> <div id="architectSavingsImpact" class="text-xl font-bold text-blue-700">$300,000</div> <div class="text-xs text-gray-500">(20 hours/week saved)</div> </div> </div> </div> </div> </div> <div class="p-6 bg-gray-50 border-t border-gray-200"> <div class="text-center"> <h3 class="text-lg font-bold text-gray-800 mb-2">Total Potential Impact</h3> <div class="grid md:grid-cols-2 gap-6 max-w-2xl mx-auto"> <div class="bg-white p-4 rounded-lg shadow-sm border border-blue-100"> <div class="text-sm text-gray-500">Oracle Plan</div> <div id="oracleTotalImpact" class="text-2xl font-bold text-blue-600">$170,000</div> <div class="text-xs text-gray-500">Annual revenue + savings</div> </div> <div class="bg-white p-4 rounded-lg shadow-sm border border-blue-200"> <div class="text-sm text-gray-500">Architect Plan</div> <div id="architectTotalImpact" class="text-2xl font-bold text-blue-700">$450,000</div> <div class="text-xs text-gray-500">Annual revenue + savings</div> </div> </div> </div> </div> </div> </div> </div> <script> // Simple interactivity for comparison rows document.querySelectorAll('.comparison-row').forEach(row => { row.addEventListener('mouseenter', () => { row.querySelectorAll('div').forEach(cell => { cell.classList.add('bg-blue-50'); }); }); row.addEventListener('mouseleave', () => { row.querySelectorAll('div').forEach(cell => { cell.classList.remove('bg-blue-50'); }); }); }); // Button hover effects document.querySelectorAll('button').forEach(button => { button.addEventListener('mouseenter', () => { button.style.transform = 'translateY(-2px)'; }); button.addEventListener('mouseleave', () => { button.style.transform = 'translateY(0)'; }); }); // ROI Calculator Logic function formatCurrency(value) { return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(value); } function calculateImpacts() { // Get input values const annualRevenue = parseFloat(document.getElementById('annualRevenue').value); const revenueGrowth = parseFloat(document.getElementById('revenueGrowth').value); const employeeCount = parseFloat(document.getElementById('employeeCount').value); const avgSalary = parseFloat(document.getElementById('avgSalary').value); // Oracle calculations (lower impact) const oracleGrowth = revenueGrowth * 0.5; // Oracle gets 50% of selected growth const oracleRevenueImpact = annualRevenue * (oracleGrowth / 100); // 8 hours/week savings = 416 hours/year (8 * 52) // Hourly rate = salary / 2080 (standard work hours per year) const oracleHoursSaved = 416; const hourlyRate = avgSalary / 2080; const oracleSavingsImpact = employeeCount * oracleHoursSaved * hourlyRate; // Architect calculations (full impact) const architectGrowth = revenueGrowth; // Architect gets full selected growth const architectRevenueImpact = annualRevenue * (architectGrowth / 100); // 20 hours/week savings = 1040 hours/year (20 * 52) const architectHoursSaved = 1040; const architectSavingsImpact = employeeCount * architectHoursSaved * hourlyRate; // Update displays document.getElementById('annualRevenueDisplay').value = annualRevenue; document.getElementById('employeeCountDisplay').value = employeeCount; document.getElementById('avgSalaryDisplay').value = avgSalary; document.getElementById('oracleGrowthValue').textContent = `${oracleGrowth.toFixed(1)}%`; document.getElementById('architectGrowthValue').textContent = `${architectGrowth.toFixed(1)}%`; document.getElementById('oracleRevenueImpact').textContent = formatCurrency(oracleRevenueImpact); document.getElementById('architectRevenueImpact').textContent = formatCurrency(architectRevenueImpact); document.getElementById('oracleSavingsImpact').textContent = formatCurrency(oracleSavingsImpact); document.getElementById('architectSavingsImpact').textContent = formatCurrency(architectSavingsImpact); document.getElementById('oracleTotalImpact').textContent = formatCurrency(oracleRevenueImpact + oracleSavingsImpact); document.getElementById('architectTotalImpact').textContent = formatCurrency(architectRevenueImpact + architectSavingsImpact); } // Initialize calculator document.addEventListener('DOMContentLoaded', () => { // Set up event listeners for all inputs document.getElementById('annualRevenue').addEventListener('input', function() { document.getElementById('annualRevenueDisplay').value = this.value; calculateImpacts(); }); document.getElementById('annualRevenueDisplay').addEventListener('change', function() { document.getElementById('annualRevenue').value = this.value; calculateImpacts(); }); document.getElementById('revenueGrowth').addEventListener('input', calculateImpacts); document.getElementById('employeeCount').addEventListener('input', function() { document.getElementById('employeeCountDisplay').value = this.value; calculateImpacts(); }); document.getElementById('employeeCountDisplay').addEventListener('change', function() { document.getElementById('employeeCount').value = this.value; calculateImpacts(); }); document.getElementById('avgSalary').addEventListener('input', function() { document.getElementById('avgSalaryDisplay').value = this.value; calculateImpacts(); }); document.getElementById('avgSalaryDisplay').addEventListener('change', function() { document.getElementById('avgSalary').value = this.value; calculateImpacts(); }); // Initial calculation calculateImpacts(); }); </script> </body> </html>
7
+ Create a interactive sky ai hero section with blue gradient and interactivity- here is the offer OFFER: Sky AI Your Team’s Private AI Assistant – Built to Eliminate Bottlenecks, Speed Up Execution & Create Simple Internal Tools on Command What Is Sky AI? Sky AI is a private, chat-based GPT assistant built just for your business. It’s trained on your SOPs, playbooks, team processes, and knowledge — so your team can ask questions, get instant answers, fix inefficiencies, and even generate simple internal tools with zero tech skills. Think of it as: ✅ A 24/7 internal knowledge base (but smart) ✅ A process improvement consultant (that learns your ops) ✅ A personal prompt engineer & dev team (without the cost) What Sky AI Does for Your Business: Eliminates Bottlenecks: No more “Where’s that file?” or “How do I do this again?” Speeds Up Execution: Instant answers from your own playbooks Suggests Streamlining Ideas: GPT is trained to recommend faster, smarter ways to run and grow your business Generates Internal Tools: Sky AI gives you one-shot prompts to create tools that eliminate repetitive work Builds & Hosts Those Tools: You also get access to a Sky Create where it creates the tools — and we host it for you How It Works: You upload your SOPs, docs, scripts, playbooks, policies — whatever your team uses We build and train Sky AI to know it all Your team chats with Sky to get answers, suggestions, and prompt-based tools We host any tools you generate using our connected Sky Create Ai We train your team how to use it for daily execution and smart decision-making
8
+ Great now change it up where it has 5 stars and the interactive dashboard shows revenue growth and cost savings
9
+ Create a interactive cost saving and revenue growth Impact dashboard for Sky Ai
10
+ Create a hero header for Sky Ai, blue chrome color scheme - Custom Sky Ai bot Build - chatGPT Hosted Sky Ai Create - to create any internal app to increase efficiency or increase revenue Ai Learn Anything We build and host your first tool
11
+ create a completely functional performance management, culture building and personal growth based on strengths and personality app, give it ai capabilities where I can add in my deepseek api, modern Ui. Comprehensive and fully functional