Hugging Face's logo

Spaces:
JayStormX8
/
scale-space-v3
Running

App Files Community
JayStormX8 commited on
Commit
87e28f0
·
verified ·
1 Parent(s): fd93b30

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1377 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Scale Space V3
3
- emoji: 🦀
4
- colorFrom: green
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: scale-space-v3
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: gray
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,1377 @@
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>Scaling Up Dashboard</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/apexcharts"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#1E40AF',
16
+ secondary: '#1E3A8A',
17
+ accent: '#3B82F6',
18
+ dark: '#1F2937',
19
+ light: '#F9FAFB',
20
+ },
21
+ fontFamily: {
22
+ sans: ['Inter', 'sans-serif'],
23
+ },
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ <style>
29
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
30
+
31
+ body {
32
+ font-family: 'Inter', sans-serif;
33
+ }
34
+
35
+ .progress-ring__circle {
36
+ transition: stroke-dashoffset 0.35s;
37
+ transform: rotate(-90deg);
38
+ transform-origin: 50% 50%;
39
+ }
40
+
41
+ .animate-pulse {
42
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
43
+ }
44
+
45
+ @keyframes pulse {
46
+ 0%, 100% {
47
+ opacity: 1;
48
+ }
49
+ 50% {
50
+ opacity: 0.5;
51
+ }
52
+ }
53
+
54
+ .grid-stack-item {
55
+ position: absolute;
56
+ }
57
+
58
+ .grid-stack-item-content {
59
+ background: white;
60
+ border-radius: 0.5rem;
61
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
62
+ height: 100%;
63
+ padding: 1rem;
64
+ }
65
+
66
+ .sidebar-item {
67
+ transition: all 0.2s ease;
68
+ }
69
+
70
+ .sidebar-item:hover {
71
+ background-color: rgba(255, 255, 255, 0.1);
72
+ }
73
+
74
+ .sidebar-item.active {
75
+ background-color: rgba(255, 255, 255, 0.2);
76
+ }
77
+
78
+ .dashboard-card {
79
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
80
+ }
81
+
82
+ .dashboard-card:hover {
83
+ transform: translateY(-2px);
84
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
85
+ }
86
+
87
+ .priority-badge {
88
+ font-size: 0.65rem;
89
+ padding: 0.15rem 0.4rem;
90
+ }
91
+
92
+ .scrollbar-hide::-webkit-scrollbar {
93
+ display: none;
94
+ }
95
+
96
+ .scrollbar-hide {
97
+ -ms-overflow-style: none;
98
+ scrollbar-width: none;
99
+ }
100
+ </style>
101
+ </head>
102
+ <body class="bg-gray-50">
103
+ <div class="flex h-screen overflow-hidden">
104
+ <!-- Mobile sidebar overlay -->
105
+ <div id="mobileSidebarOverlay" class="fixed inset-0 z-40 bg-black bg-opacity-50 hidden"></div>
106
+
107
+ <!-- Sidebar -->
108
+ <div id="sidebar" class="hidden md:flex md:flex-shrink-0">
109
+ <div class="flex flex-col w-64 bg-primary text-white">
110
+ <div class="flex items-center justify-center h-16 px-4 bg-secondary">
111
+ <div class="flex items-center">
112
+ <i class="fas fa-chart-line text-2xl mr-2 text-accent"></i>
113
+ <span class="text-xl font-semibold">ScaleUp</span>
114
+ </div>
115
+ </div>
116
+ <div class="flex flex-col flex-grow pt-5 overflow-y-auto">
117
+ <div class="px-4 mb-10">
118
+ <div class="flex items-center justify-center">
119
+ <img class="h-16 w-16 rounded-full object-cover border-2 border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar">
120
+ <div class="ml-3">
121
+ <p class="text-sm font-medium">John Doe</p>
122
+ <p class="text-xs text-gray-300">CEO</p>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ <nav class="flex-1 px-2 space-y-1">
127
+ <a href="#" class="sidebar-item active flex items-center px-4 py-3 text-sm font-medium rounded-md bg-secondary text-white">
128
+ <i class="fas fa-home mr-3"></i>
129
+ Dashboard
130
+ </a>
131
+ <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-secondary hover:text-white">
132
+ <i class="fas fa-bullseye mr-3"></i>
133
+ Priorities
134
+ </a>
135
+ <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-secondary hover:text-white">
136
+ <i class="fas fa-chart-pie mr-3"></i>
137
+ Metrics
138
+ </a>
139
+ <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-secondary hover:text-white">
140
+ <i class="fas fa-users mr-3"></i>
141
+ People
142
+ </a>
143
+ <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-secondary hover:text-white">
144
+ <i class="fas fa-file-alt mr-3"></i>
145
+ OPSP
146
+ </a>
147
+ <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-secondary hover:text-white">
148
+ <i class="fas fa-calendar-alt mr-3"></i>
149
+ Meeting Pulse
150
+ </a>
151
+ <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-secondary hover:text-white">
152
+ <i class="fas fa-cog mr-3"></i>
153
+ Settings
154
+ </a>
155
+ </nav>
156
+ <div class="px-4 py-4 border-t border-gray-700">
157
+ <div class="flex items-center">
158
+ <div class="p-2 rounded-full bg-blue-100 text-blue-600">
159
+ <i class="fas fa-question-circle"></i>
160
+ </div>
161
+ <div class="ml-3">
162
+ <p class="text-xs font-medium">Need help?</p>
163
+ <a href="#" class="text-xs text-blue-300 hover:underline">Contact support</a>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </div>
170
+
171
+ <!-- Main content -->
172
+ <div class="flex flex-col flex-1 overflow-hidden">
173
+ <!-- Top navigation -->
174
+ <header class="bg-white shadow-sm z-10">
175
+ <div class="flex items-center justify-between px-4 py-3">
176
+ <div class="flex items-center">
177
+ <button id="mobileSidebarButton" class="md:hidden text-gray-500 focus:outline-none">
178
+ <i class="fas fa-bars text-xl"></i>
179
+ </button>
180
+ <h1 class="ml-2 text-xl font-semibold text-gray-800">Scaling Up Dashboard</h1>
181
+ </div>
182
+ <div class="flex items-center space-x-4">
183
+ <div class="relative">
184
+ <button id="notificationsButton" class="text-gray-500 hover:text-gray-700 focus:outline-none relative">
185
+ <i class="fas fa-bell text-xl"></i>
186
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
187
+ </button>
188
+ <div id="notificationsDropdown" class="hidden absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg py-1 z-50">
189
+ <div class="px-4 py-2 border-b border-gray-200">
190
+ <p class="text-sm font-medium text-gray-800">Notifications</p>
191
+ </div>
192
+ <div class="max-h-60 overflow-y-auto">
193
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
194
+ <div class="flex items-start">
195
+ <div class="flex-shrink-0 pt-1">
196
+ <div class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
197
+ <i class="fas fa-calendar-check"></i>
198
+ </div>
199
+ </div>
200
+ <div class="ml-3">
201
+ <p class="text-sm font-medium">Quarterly review meeting in 2 days</p>
202
+ <p class="text-xs text-gray-500">10 minutes ago</p>
203
+ </div>
204
+ </div>
205
+ </a>
206
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
207
+ <div class="flex items-start">
208
+ <div class="flex-shrink-0 pt-1">
209
+ <div class="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center text-green-600">
210
+ <i class="fas fa-check-circle"></i>
211
+ </div>
212
+ </div>
213
+ <div class="ml-3">
214
+ <p class="text-sm font-medium">New hire completed onboarding</p>
215
+ <p class="text-xs text-gray-500">1 hour ago</p>
216
+ </div>
217
+ </div>
218
+ </a>
219
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
220
+ <div class="flex items-start">
221
+ <div class="flex-shrink-0 pt-1">
222
+ <div class="h-8 w-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
223
+ <i class="fas fa-exclamation-triangle"></i>
224
+ </div>
225
+ </div>
226
+ <div class="ml-3">
227
+ <p class="text-sm font-medium">Customer NPS dropped by 5 points</p>
228
+ <p class="text-xs text-gray-500">3 hours ago</p>
229
+ </div>
230
+ </div>
231
+ </a>
232
+ </div>
233
+ <div class="px-4 py-2 border-t border-gray-200">
234
+ <a href="#" class="text-xs font-medium text-blue-600 hover:text-blue-800">View all notifications</a>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ <button class="text-gray-500 hover:text-gray-700 focus:outline-none">
239
+ <i class="fas fa-question-circle text-xl"></i>
240
+ </button>
241
+ <div class="relative">
242
+ <button id="userMenuButton" class="flex items-center focus:outline-none">
243
+ <span class="hidden md:inline-block ml-2 text-sm font-medium text-gray-700">John Doe</span>
244
+ <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar">
245
+ </button>
246
+ <div id="userMenuDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50">
247
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a>
248
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
249
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </header>
255
+
256
+ <!-- Main content area -->
257
+ <main class="flex-1 overflow-y-auto p-4 bg-gray-50">
258
+ <!-- Quick stats and company health -->
259
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
260
+ <div class="dashboard-card bg-white rounded-lg shadow p-6">
261
+ <div class="flex items-center">
262
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
263
+ <i class="fas fa-rocket text-xl"></i>
264
+ </div>
265
+ <div class="ml-4">
266
+ <p class="text-sm font-medium text-gray-500">Revenue</p>
267
+ <p class="text-2xl font-semibold text-gray-800">$1.2M</p>
268
+ <p class="text-xs text-green-500 flex items-center">
269
+ <i class="fas fa-arrow-up mr-1"></i> +12% from last quarter
270
+ </p>
271
+ </div>
272
+ </div>
273
+ <div class="mt-4">
274
+ <div id="revenueChart" style="height: 60px;"></div>
275
+ </div>
276
+ </div>
277
+ <div class="dashboard-card bg-white rounded-lg shadow p-6">
278
+ <div class="flex items-center">
279
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
280
+ <i class="fas fa-users text-xl"></i>
281
+ </div>
282
+ <div class="ml-4">
283
+ <p class="text-sm font-medium text-gray-500">Employees</p>
284
+ <p class="text-2xl font-semibold text-gray-800">84</p>
285
+ <p class="text-xs text-green-500 flex items-center">
286
+ <i class="fas fa-arrow-up mr-1"></i> +5 this quarter
287
+ </p>
288
+ </div>
289
+ </div>
290
+ <div class="mt-4">
291
+ <div id="employeesChart" style="height: 60px;"></div>
292
+ </div>
293
+ </div>
294
+ <div class="dashboard-card bg-white rounded-lg shadow p-6">
295
+ <div class="flex items-center">
296
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
297
+ <i class="fas fa-heart text-xl"></i>
298
+ </div>
299
+ <div class="ml-4">
300
+ <p class="text-sm font-medium text-gray-500">Customer NPS</p>
301
+ <p class="text-2xl font-semibold text-gray-800">72</p>
302
+ <p class="text-xs text-red-500 flex items-center">
303
+ <i class="fas fa-arrow-down mr-1"></i> -3 from last quarter
304
+ </p>
305
+ </div>
306
+ </div>
307
+ <div class="mt-4">
308
+ <div id="npsChart" style="height: 60px;"></div>
309
+ </div>
310
+ </div>
311
+ <div class="dashboard-card bg-white rounded-lg shadow p-6">
312
+ <div class="flex items-center">
313
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
314
+ <i class="fas fa-bullseye text-xl"></i>
315
+ </div>
316
+ <div class="ml-4">
317
+ <p class="text-sm font-medium text-gray-500">Quarterly Goals</p>
318
+ <p class="text-2xl font-semibold text-gray-800">65%</p>
319
+ <p class="text-xs text-blue-500">On track</p>
320
+ </div>
321
+ </div>
322
+ <div class="mt-4">
323
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
324
+ <div class="bg-blue-600 h-2.5 rounded-full" style="width: 65%"></div>
325
+ </div>
326
+ <p class="text-xs text-gray-500 mt-1">35 days remaining</p>
327
+ </div>
328
+ </div>
329
+ </div>
330
+
331
+ <!-- Company health scorecard -->
332
+ <div class="mb-6">
333
+ <div class="bg-white rounded-lg shadow overflow-hidden">
334
+ <div class="px-6 py-4 border-b border-gray-200">
335
+ <h2 class="text-lg font-semibold text-gray-800">Company Health Scorecard</h2>
336
+ <p class="text-sm text-gray-500">Key indicators across all business functions</p>
337
+ </div>
338
+ <div class="p-6">
339
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
340
+ <div class="text-center">
341
+ <div class="relative inline-block mb-3">
342
+ <svg class="w-16 h-16" viewBox="0 0 36 36">
343
+ <path
344
+ d="M18 2.0845
345
+ a 15.9155 15.9155 0 0 1 0 31.831
346
+ a 15.9155 15.9155 0 0 1 0 -31.831"
347
+ fill="none"
348
+ stroke="#E5E7EB"
349
+ stroke-width="3"
350
+ stroke-dasharray="100, 100"
351
+ />
352
+ <path
353
+ d="M18 2.0845
354
+ a 15.9155 15.9155 0 0 1 0 31.831
355
+ a 15.9155 15.9155 0 0 1 0 -31.831"
356
+ fill="none"
357
+ stroke="#10B981"
358
+ stroke-width="3"
359
+ stroke-dasharray="85, 100"
360
+ />
361
+ <text x="18" y="20.5" text-anchor="middle" font-size="10" fill="#111827" font-weight="bold">85%</text>
362
+ </svg>
363
+ </div>
364
+ <h3 class="text-sm font-medium text-gray-700">People</h3>
365
+ <p class="text-xs text-gray-500">Employee engagement</p>
366
+ </div>
367
+ <div class="text-center">
368
+ <div class="relative inline-block mb-3">
369
+ <svg class="w-16 h-16" viewBox="0 0 36 36">
370
+ <path
371
+ d="M18 2.0845
372
+ a 15.9155 15.9155 0 0 1 0 31.831
373
+ a 15.9155 15.9155 0 0 1 0 -31.831"
374
+ fill="none"
375
+ stroke="#E5E7EB"
376
+ stroke-width="3"
377
+ stroke-dasharray="100, 100"
378
+ />
379
+ <path
380
+ d="M18 2.0845
381
+ a 15.9155 15.9155 0 0 1 0 31.831
382
+ a 15.9155 15.9155 0 0 1 0 -31.831"
383
+ fill="none"
384
+ stroke="#3B82F6"
385
+ stroke-width="3"
386
+ stroke-dasharray="78, 100"
387
+ />
388
+ <text x="18" y="20.5" text-anchor="middle" font-size="10" fill="#111827" font-weight="bold">78%</text>
389
+ </svg>
390
+ </div>
391
+ <h3 class="text-sm font-medium text-gray-700">Strategy</h3>
392
+ <p class="text-xs text-gray-500">Execution clarity</p
393
+ </div>
394
+ <div class="text-center">
395
+ <div class="relative inline-block mb-3">
396
+ <svg class="w-16 h-16" viewBox="0 0 36 36">
397
+ <path
398
+ d="M18 2.0845
399
+ a 15.9155 15.9155 0 0 1 0 31.831
400
+ a 15.9155 15.9155 0 0 1 0 -31.831"
401
+ fill="none"
402
+ stroke="#E5E7EB"
403
+ stroke-width="3"
404
+ stroke-dasharray="100, 100"
405
+ />
406
+ <path
407
+ d="M18 2.0845
408
+ a 15.9155 15.9155 0 0 1 0 31.831
409
+ a 15.9155 15.9155 0 0 1 0 -31.831"
410
+ fill="none"
411
+ stroke="#8B5CF6"
412
+ stroke-width="3"
413
+ stroke-dasharray="92, 100"
414
+ />
415
+ <text x="18" y="20.5" text-anchor="middle" font-size="10" fill="#111827" font-weight="bold">92%</text>
416
+ </svg>
417
+ </div>
418
+ <h3 class="text-sm font-medium text-gray-700">Execution</h3>
419
+ <p class="text-xs text-gray-500">Meeting rhythm</p>
420
+ </div>
421
+ <div class="text-center">
422
+ <div class="relative inline-block mb-3">
423
+ <svg class="w-16 h-16" viewBox="0 0 36 36">
424
+ <path
425
+ d="M18 2.0845
426
+ a 15.9155 15.9155 0 0 1 0 31.831
427
+ a 15.9155 15.9155 0 0 1 0 -31.831"
428
+ fill="none"
429
+ stroke="#E5E7EB"
430
+ stroke-width="3"
431
+ stroke-dasharray="100, 100"
432
+ />
433
+ <path
434
+ d="M18 2.0845
435
+ a 15.9155 15.9155 0 0 1 0 31.831
436
+ a 15.9155 15.9155 0 0 1 0 -31.831"
437
+ fill="none
438
+ stroke="#EC4899"
439
+ stroke-width="3"
440
+ stroke-dasharray="65, 100"
441
+ />
442
+ <text x="18" y="20.5" text-anchor="middle" font-size="10" fill="#111827" font-weight="bold">65%</text>
443
+ </svg>
444
+ </div>
445
+ <h3 class="text-sm font-medium text-gray-700">Cash</h3>
446
+ <p class="text-xs text-gray-500">Financial health</p>
447
+ </div>
448
+ <div class="text-center">
449
+ <div class="relative inline-block mb-3">
450
+ <svg class="w-16 h-16" viewBox="0 0 36 36">
451
+ <path
452
+ d="M18 2.0845
453
+ a 15.9155 15.9155 0 0 1 0 31.831
454
+ a 15.9155 15.9155 0 0 1 0 -31.831"
455
+ fill="none"
456
+ stroke="#E5E7EB"
457
+ stroke-width="3"
458
+ stroke-dasharray="100, 100"
459
+ />
460
+ <path
461
+ d="M18 2.0845
462
+ a 15.9155 15.9155 0 0 1 0 31.831
463
+ a 15.9155 15.9155 0 0 1 0 -31.831"
464
+ fill="none"
465
+ stroke="#F59E0B"
466
+ stroke-width="3"
467
+ stroke-dasharray="88, 100"
468
+ />
469
+ <text x="18" y="20.5" text-anchor="middle" font-size="10" fill="#111827" font-weight="bold">88%</text>
470
+ </svg>
471
+ </div>
472
+ <h3 class="text-sm font-medium text-gray-700">Overall</h3>
473
+ <p class="text-xs text-gray-500">Company health</p>
474
+ </div>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ </div>
479
+
480
+ <!-- Main dashboard sections -->
481
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
482
+ <!-- Rockefeller Habits Checklist -->
483
+ <div class="lg:col-span-1 bg-white rounded-lg shadow overflow-hidden">
484
+ <div class="px-6 py-4 border-b border-gray-200">
485
+ <div class="flex items-center justify-between">
486
+ <div>
487
+ <h2 class="text-lg font-semibold text-gray-800">Rockefeller Habits</h2>
488
+ <p class="text-sm text-gray-500">Daily/Weekly disciplines</p>
489
+ </div>
490
+ <span class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded-full">5/10</span>
491
+ </div>
492
+ </div>
493
+ <div class="p-6">
494
+ <div class="space-y-4">
495
+ <div class="flex items-start">
496
+ <input type="checkbox" id="habit1" class="mt-1 h-4 w-4 text-blue-600 rounded focus:ring-blue-500" checked>
497
+ <label for="habit1" class="ml-3 block text-sm font-medium text-gray-700">
498
+ Executive team is healthy and aligned
499
+ <p class="text-xs text-gray-500 mt-1">Last checked: Today</p>
500
+ </label>
501
+ </div>
502
+ <div class="flex items-start">
503
+ <input type="checkbox" id="habit2" class="mt-1 h-4 w-4 text-blue-600 rounded focus:ring-blue-500" checked>
504
+ <label for="habit2" class="ml-3 block text-sm font-medium text-gray-700">
505
+ Everyone is aligned with #1 priority
506
+ <p class="text-xs text-gray-500 mt-1">Last checked: Today</p>
507
+ </label>
508
+ </div>
509
+ <div class="flex items-start">
510
+ <input type="checkbox" id="habit3" class="mt-1 h-4 w-4 text-blue-600 rounded focus:ring-blue-500">
511
+ <label for="habit3" class="ml-3 block text-sm font-medium text-gray-700">
512
+ Communication rhythm is established
513
+ <p class="text-xs text-gray-500 mt-1">Last checked: 2 days ago</p>
514
+ </label>
515
+ </div>
516
+ <div class="flex items-start">
517
+ <input type="checkbox" id="habit4" class="mt-1 h-4 w-4 text-blue-600 rounded focus:ring-blue-500">
518
+ <label for="habit4" class="ml-3 block text-sm font-medium text-gray-700">
519
+ Every facet has a person assigned
520
+ <p class="text-xs text-gray-500 mt-1">Last checked: 1 week ago</p>
521
+ </label>
522
+ </div>
523
+ <div class="flex items-start">
524
+ <input type="checkbox" id="habit5" class="mt-1 h-4 w-4 text-blue-600 rounded focus:ring-blue-500" checked>
525
+ <label for="habit5" class="ml-3 block text-sm font-medium text-gray-700">
526
+ Ongoing employee feedback
527
+ <p class="text-xs text-gray-500 mt-1">Last checked: Yesterday</p>
528
+ </label>
529
+ </div>
530
+ </div>
531
+ <div class="mt-6">
532
+ <button class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
533
+ <i class="fas fa-sync-alt mr-2"></i> Update Habits
534
+ </button>
535
+ </div>
536
+ </div>
537
+ </div>
538
+
539
+ <!-- One Page Strategic Plan -->
540
+ <div class="lg:col-span-2 bg-white rounded-lg shadow overflow-hidden">
541
+ <div class="px-6 py-4 border-b border-gray-200">
542
+ <div class="flex items-center justify-between">
543
+ <div>
544
+ <h2 class="text-lg font-semibold text-gray-800">One Page Strategic Plan</h2>
545
+ <p class="text-sm text-gray-500">Company vision and priorities</p>
546
+ </div>
547
+ <div class="flex space-x-2">
548
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-xs font-medium text-gray-700 hover:bg-gray-50">
549
+ <i class="fas fa-history mr-1"></i> Version History
550
+ </button>
551
+ <button class="px-3 py-1 border border-transparent rounded-md text-xs font-medium text-white bg-blue-600 hover:bg-blue-700">
552
+ <i class="fas fa-print mr-1"></i> Print
553
+ </button>
554
+ </div>
555
+ </div>
556
+ </div>
557
+ <div class="p-6">
558
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
559
+ <div>
560
+ <h3 class="text-md font-medium text-gray-800 mb-3 flex items-center">
561
+ <span class="bg-blue-100 text-blue-800 p-1 rounded mr-2">
562
+ <i class="fas fa-medal text-xs"></i>
563
+ </span>
564
+ Core Values
565
+ </h3>
566
+ <ul class="space-y-3">
567
+ <li class="flex items-start">
568
+ <span class="flex-shrink-0 h-6 w-6 text-green-500 flex items-center justify-center">
569
+ <i class="fas fa-check"></i>
570
+ </span>
571
+ <div class="ml-2">
572
+ <span class="text-sm font-medium text-gray-700">Customer Obsession</span>
573
+ <p class="text-xs text-gray-500">Start with the customer and work backwards</p>
574
+ </div>
575
+ </li>
576
+ <li class="flex items-start">
577
+ <span class="flex-shrink-0 h-6 w-6 text-green-500 flex items-center justify-center">
578
+ <i class="fas fa-check"></i>
579
+ </span>
580
+ <div class="ml-2">
581
+ <span class="text-sm font-medium text-gray-700">Ownership</span>
582
+ <p class="text-xs text-gray-500">Think long term and don't sacrifice for short-term results</p>
583
+ </div>
584
+ </li>
585
+ <li class="flex items-start">
586
+ <span class="flex-shrink-0 h-6 w-6 text-green-500 flex items-center justify-center">
587
+ <i class="fas fa-check"></i>
588
+ </span>
589
+ <div class="ml-2">
590
+ <span class="text-sm font-medium text-gray-700">Innovate & Simplify</span>
591
+ <p class="text-xs text-gray-500">Expect and require innovation and invention</p
592
+ </div>
593
+ </li>
594
+ </ul>
595
+ </div>
596
+ <div>
597
+ <h3 class="text-md font-medium text-gray-800 mb-3 flex items-center">
598
+ <span class="bg-purple-100 text-purple-800 p-1 rounded mr-2">
599
+ <i class="fas fa-bullseye text-xs"></i>
600
+ </span>
601
+ BHAG (10-25 Year Goal)
602
+ </h3>
603
+ <div class="bg-gray-50 p-3 rounded-lg">
604
+ <p class="text-sm text-gray-700">To become the most customer-centric company in our industry, serving 1 million customers globally by 2040.</p>
605
+ </div>
606
+ <div class="mt-4">
607
+ <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">Progress</h4>
608
+ <div class="w-full bg-gray-200 rounded-full h-2">
609
+ <div class="bg-purple-600 h-2 rounded-full" style="width: 15%"></div>
610
+ </div>
611
+ <p class="text-xs text-gray-500 mt-1">15% towards goal</p>
612
+ </div>
613
+ </div>
614
+ <div>
615
+ <h3 class="text-md font-medium text-gray-800 mb-3 flex items-center">
616
+ <span class="bg-green-100 text-green-800 p-1 rounded mr-2">
617
+ <i class="fas fa-chart-line text-xs"></i>
618
+ </span>
619
+ 3-5 Year Targets
620
+ </h3>
621
+ <ul class="space-y-3">
622
+ <li class="flex items-start">
623
+ <span class="flex-shrink-0 h-6 w-6 text-blue-500 flex items-center justify-center">
624
+ <i class="fas fa-bullseye"></i>
625
+ </span>
626
+ <div class="ml-2">
627
+ <span class="text-sm font-medium text-gray-700">$50M annual revenue</span>
628
+ <p class="text-xs text-gray-500">Current: $12M</p>
629
+ </div>
630
+ </li>
631
+ <li class="flex items-start">
632
+ <span class="flex-shrink-0 h-6 w-6 text-blue-500 flex items-center justify-center">
633
+ <i class="fas fa-bullseye"></i>
634
+ </span>
635
+ <div class="ml-2">
636
+ <span class="text-sm font-medium text-gray-700">Expand to 3 new markets</span>
637
+ <p class="text-xs text-gray-500">Current: 1 new market entered</p>
638
+ </div>
639
+ </li>
640
+ <li class="flex items-start">
641
+ <span class="flex-shrink-0 h-6 w-6 text-blue-500 flex items-center justify-center">
642
+ <i class="fas fa-bullseye"></i>
643
+ </span>
644
+ <div class="ml-2">
645
+ <span class="text-sm font-medium text-gray-700">300 employees</span>
646
+ <p class="text-xs text-gray-500">Current: 84 employees</p>
647
+ </div>
648
+ </li>
649
+ </ul>
650
+ </div>
651
+ <div>
652
+ <h3 class="text-md font-medium text-gray-800 mb-3 flex items-center">
653
+ <span class="bg-yellow-100 text-yellow-800 p-1 rounded mr-2">
654
+ <i class="fas fa-flag text-xs"></i>
655
+ </span>
656
+ 1 Year Priorities
657
+ </h3>
658
+ <ul class="space-y-3">
659
+ <li class="flex items-start">
660
+ <span class="flex-shrink-0 h-6 w-6 text-purple-500 flex items-center justify-center">
661
+ <i class="fas fa-flag"></i>
662
+ </span>
663
+ <div class="ml-2">
664
+ <span class="text-sm font-medium text-gray-700">Launch new product line</span>
665
+ <div class="mt-1">
666
+ <div class="w-full bg-gray-200 rounded-full h-1.5">
667
+ <div class="bg-purple-600 h-1.5 rounded-full" style="width: 45%"></div>
668
+ </div>
669
+ <p class="text-xs text-gray-500 mt-1">On track for Q4 launch</p>
670
+ </div>
671
+ </div>
672
+ </li>
673
+ <li class="flex items-start">
674
+ <span class="flex-shrink-0 h-6 w-6 text-purple-500 flex items-center justify-center">
675
+ <i class="fas fa-flag"></i>
676
+ </span>
677
+ <div class="ml-2">
678
+ <span class="text-sm font-medium text-gray-700">Improve customer retention by 15%</span>
679
+ <div class="mt-1">
680
+ <div class="w-full bg-gray-200 rounded-full h-1.5">
681
+ <div class="bg-purple-600 h-1.5 rounded-full" style="width: 30%"></div>
682
+ </div>
683
+ <p class="text-xs text-gray-500 mt-1">Currently at +5%</p>
684
+ </div>
685
+ </div>
686
+ </li>
687
+ </ul>
688
+ </div>
689
+ </div>
690
+ <div class="mt-6">
691
+ <button class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
692
+ <i class="fas fa-edit mr-2"></i> Edit Strategic Plan
693
+ </button>
694
+ </div>
695
+ </div>
696
+ </div>
697
+ </div>
698
+
699
+ <!-- Quarterly Priorities and Metrics -->
700
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
701
+ <!-- Quarterly Priorities -->
702
+ <div class="lg:col-span-2 bg-white rounded-lg shadow overflow-hidden">
703
+ <div class="px-6 py-4 border-b border-gray-200">
704
+ <div class="flex items-center justify-between">
705
+ <div>
706
+ <h2 class="text-lg font-semibold text-gray-800">Quarterly Priorities</h2>
707
+ <p class="text-sm text-gray-500">Q3 2023 - Critical Few</p>
708
+ </div>
709
+ <div class="flex space-x-2">
710
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-xs font-medium text-gray-700 hover:bg-gray-50">
711
+ <i class="fas fa-plus mr-1"></i> Add Priority
712
+ </button>
713
+ <button class="px-3 py-1 border border-transparent rounded-md text-xs font-medium text-white bg-blue-600 hover:bg-blue-700">
714
+ <i class="fas fa-sliders-h mr-1"></i> Adjust
715
+ </button>
716
+ </div>
717
+ </div>
718
+ </div>
719
+ <div class="p-6">
720
+ <div class="space-y-6">
721
+ <div class="flex items-start">
722
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 font-bold">
723
+ 1
724
+ </div>
725
+ <div class="ml-4 flex-1">
726
+ <div class="flex items-center justify-between">
727
+ <h3 class="text-md font-medium text-gray-800">Launch new marketing campaign</h3>
728
+ <span class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded-full priority-badge">On Track</span>
729
+ </div>
730
+ <p class="text-sm text-gray-600 mt-1">Increase brand awareness and lead generation by 30%</p>
731
+ <div class="mt-3">
732
+ <div class="flex items-center justify-between mb-1">
733
+ <span class="text-xs font-medium text-gray-500">Progress</span>
734
+ <span class="text-xs font-semibold text-green-600">75%</span>
735
+ </div>
736
+ <div class="w-full bg-gray-200 rounded-full h-2">
737
+ <div class="bg-green-500 h-2 rounded-full" style="width: 75%"></div>
738
+ </div>
739
+ <div class="flex items-center justify-between mt-1">
740
+ <p class="text-xs text-gray-500">Due in 2 weeks</p>
741
+ <p class="text-xs text-gray-500">Sarah Johnson (Owner)</p>
742
+ </div>
743
+ </div>
744
+ </div>
745
+ </div>
746
+ <div class="flex items-start">
747
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold">
748
+ 2
749
+ </div>
750
+ <div class="ml-4 flex-1">
751
+ <div class="flex items-center justify-between">
752
+ <h3 class="text-md font-medium text-gray-800">Hire 5 new sales reps</h3>
753
+ <span class="px-2 py-1 text-xs font-semibold text-blue-800 bg-blue-100 rounded-full priority-badge">In Progress</span>
754
+ </div>
755
+ <p class="text-sm text-gray-600 mt-1">Expand sales team to meet growing demand</p>
756
+ <div class="mt-3">
757
+ <div class="flex items-center justify-between mb-1">
758
+ <span class="text-xs font-medium text-gray-500">Progress</span>
759
+ <span class="text-xs font-semibold text-blue-600">40%</span>
760
+ </div>
761
+ <div class="w-full bg-gray-200 rounded-full h-2">
762
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 40%"></div>
763
+ </div>
764
+ <div class="flex items-center justify-between mt-1">
765
+ <p class="text-xs text-gray-500">2 hires completed</p>
766
+ <p class="text-xs text-gray-500">Michael Chen (Owner)</p>
767
+ </div>
768
+ </div>
769
+ </div>
770
+ </div>
771
+ <div class="flex items-start">
772
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-bold">
773
+ 3
774
+ </div>
775
+ <div class="ml-4 flex-1">
776
+ <div class="flex items-center justify-between">
777
+ <h3 class="text-md font-medium text-gray-800">Implement new CRM system</h3>
778
+ <span class="px-2 py-1 text-xs font-semibold text-purple-800 bg-purple-100 rounded-full priority-badge">Needs Attention</span>
779
+ </div>
780
+ <p class="text-sm text-gray-600 mt-1">Improve customer relationship management and sales tracking</p>
781
+ <div class="mt-3">
782
+ <div class="flex items-center justify-between mb-1">
783
+ <span class="text-xs font-medium text-gray-500">Progress</span>
784
+ <span class="text-xs font-semibold text-purple-600">20%</span>
785
+ </div>
786
+ <div class="w-full bg-gray-200 rounded-full h-2">
787
+ <div class="bg-purple-500 h-2 rounded-full" style="width: 20%"></div>
788
+ </div>
789
+ <div class="flex items-center justify-between mt-1">
790
+ <p class="text-xs text-gray-500">In discovery phase</p>
791
+ <p class="text-xs text-gray-500">Alex Rodriguez (Owner)</p>
792
+ </div>
793
+ </div>
794
+ </div>
795
+ </div>
796
+ </div>
797
+ </div>
798
+ </div>
799
+
800
+ <!-- Key Metrics -->
801
+ <div class="lg:col-span-1 bg-white rounded-lg shadow overflow-hidden">
802
+ <div class="px-6 py-4 border-b border-gray-200">
803
+ <div class="flex items-center justify-between">
804
+ <div>
805
+ <h2 class="text-lg font-semibold text-gray-800">Key Metrics</h2>
806
+ <p class="text-sm text-gray-500">Quarterly performance</p>
807
+ </div>
808
+ <div class="flex space-x-2">
809
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-xs font-medium text-gray-700 hover:bg-gray-50">
810
+ <i class="fas fa-cog mr-1"></i> Configure
811
+ </button>
812
+ </div>
813
+ </div>
814
+ </div>
815
+ <div class="p-6">
816
+ <div class="space-y-6">
817
+ <div>
818
+ <div class="flex justify-between items-center mb-1">
819
+ <span class="text-sm font-medium text-gray-700 flex items-center">
820
+ <i class="fas fa-dollar-sign text-gray-400 mr-1 text-xs"></i> Revenue Growth
821
+ </span>
822
+ <span class="text-sm font-semibold text-green-600">+12%</span>
823
+ </div>
824
+ <div class="w-full bg-gray-200 rounded-full h-2">
825
+ <div class="bg-green-500 h-2 rounded-full" style="width: 80%"></div>
826
+ </div>
827
+ <div class="flex justify-between items-center mt-1">
828
+ <p class="text-xs text-gray-500">$1.2M actual</p>
829
+ <p class="text-xs text-gray-500">$1.35M target</p>
830
+ </div>
831
+ </div>
832
+ <div>
833
+ <div class="flex justify-between items-center mb-1">
834
+ <span class="text-sm font-medium text-gray-700 flex items-center">
835
+ <i class="fas fa-user-plus text-gray-400 mr-1 text-xs"></i> Customer Acquisition
836
+ </span>
837
+ <span class="text-sm font-semibold text-blue-600">245</span>
838
+ </div>
839
+ <div class="w-full bg-gray-200 rounded-full h-2">
840
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 65%"></div>
841
+ </div>
842
+ <div class="flex justify-between items-center mt-1">
843
+ <p class="text-xs text-gray-500">245 actual</p>
844
+ <p class="text-xs text-gray-500">375 target</p>
845
+ </div>
846
+ </div>
847
+ <div>
848
+ <div class="flex justify-between items-center mb-1">
849
+ <span class="text-sm font-medium text-gray-700 flex items-center">
850
+ <i class="fas fa-heart text-gray-400 mr-1 text-xs"></i> Employee Engagement
851
+ </span>
852
+ <span class="text-sm font-semibold text-yellow-600">78%</span>
853
+ </div>
854
+ <div class="w-full bg-gray-200 rounded-full h-2">
855
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 78%"></div>
856
+ </div>
857
+ <div class="flex justify-between items-center mt-1">
858
+ <p class="text-xs text-gray-500">+3% from last quarter</p>
859
+ <p class="text-xs text-gray-500">80% target</p>
860
+ </div>
861
+ </div>
862
+ <div>
863
+ <div class="flex justify-between items-center mb-1">
864
+ <span class="text-sm font-medium text-gray-700 flex items-center">
865
+ <i class="fas fa-bolt text-gray-400 mr-1 text-xs"></i> Productivity
866
+ </span>
867
+ <span class="text-sm font-semibold text-purple-600">1.2x</span>
868
+ </div>
869
+ <div class="w-full bg-gray-200 rounded-full h-2">
870
+ <div class="bg-purple-500 h-2 rounded-full" style="width: 60%"></div>
871
+ </div>
872
+ <div class="flex justify-between items-center mt-1">
873
+ <p class="text-xs text-gray-500">1.2x actual</p>
874
+ <p class="text-xs text-gray-500">2x target</p>
875
+ </div>
876
+ </div>
877
+ </div>
878
+ <div class="mt-6">
879
+ <div class="bg-gray-50 p-4 rounded-lg">
880
+ <h3 class="text-sm font-medium text-gray-800 mb-2">Trend Analysis</h3>
881
+ <div id="metricsTrendChart" style="height: 150px;"></div>
882
+ </div>
883
+ </div>
884
+ </div>
885
+ </div>
886
+ </div>
887
+
888
+ <!-- Meeting Pulse and To-Dos -->
889
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
890
+ <!-- Meeting Pulse -->
891
+ <div class="lg:col-span-2 bg-white rounded-lg shadow overflow-hidden">
892
+ <div class="px极客时间 6 py-4 border-b border-gray-200">
893
+ <div class="flex items-center justify-between">
894
+ <div>
895
+ <h2 class="text-lg font-semibold text-gray-800">Meeting Pulse</h2>
896
+ <p class="text-sm text-gray-500">Daily, weekly, monthly rhythm</p>
897
+ </div>
898
+ <div class="flex space-x-2">
899
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-xs font-medium text-gray-700 hover:bg-gray-50">
900
+ <i class="fas fa-calendar-plus mr-1"></i> Add Meeting
901
+ </button>
902
+ </div>
903
+ </div>
904
+ </div>
905
+ <div class="p-6">
906
+ <div class="space-y-6">
907
+ <div>
908
+ <h3 class="text-md font-medium text-gray-800 mb-3 flex items-center">
909
+ <span class="bg-blue-100 text-blue-800 p-1 rounded mr-2">
910
+ <i class="fas fa-calendar-day text-xs"></i>
911
+ </span>
912
+ Daily Huddle (15 min)
913
+ </h3>
914
+ <div class="bg-blue-50 p-4 rounded-lg">
915
+ <极客时间 div class="flex items-center justify-between">
916
+ <div>
917
+ <p class="text-sm font-medium text-gray-700">Today's Priorities</p>
918
+ <p class="text-xs text-gray-500">8:15 AM, Conference Room</p>
919
+ </div>
920
+ <div class="flex space-x-2">
921
+ <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-medium">
922
+ <i class="fas fa-video mr-1"></i> Join
923
+ </button>
924
+ <button class="px-3 py-1 bg-white text-blue-700 rounded-full text-xs font-medium border border-blue-200">
925
+ <i class="fas fa-clipboard-list mr极客时间 -1"></i> Agenda
926
+ </button>
927
+ </div>
928
+ </div>
929
+ </div>
930
+ <div class="mt-2">
931
+ <div class="flex items-center text-xs text-gray-500">
932
+ <i class="fas fa-info-circle mr-1"></i>
933
+ <span>Next meeting: Tomorrow at 8:15 AM</span>
934
+ </div>
935
+ </div>
936
+ </div>
937
+ <div>
938
+ <h3 class="text-md font-medium text-gray-800 mb-3 flex items-center">
939
+ <span class="bg-green-100 text-green-800 p-1 rounded mr-2">
940
+ <i class="fas fa-calendar-week text-xs"></i>
941
+ </span>
942
+ Weekly Meeting (90 min)
943
+ </h3>
944
+ <div class="bg-green-50 p-4 rounded-lg">
945
+ <div class="flex items-center justify-between">
946
+ <div>
947
+ <p class="text-sm font-medium text-gray-700">Quarterly Priority Review</p>
948
+ <p class="text-xs text-gray-500">Monday, 10:00 AM, Board Room</p>
949
+ </div>
950
+ <div class="flex space-x-2">
951
+ <button class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-medium">
952
+ <i class="fas fa-clipboard-check mr-1"></i> Prepare
953
+ </button>
954
+ <button class="px-3 py-1 bg-white text-green-700 rounded-full text-xs font-medium border border-green-200">
955
+ <i class="fas fa-file-alt mr-1"></i> Notes
956
+ </button>
957
+ </div>
958
+ </div>
959
+ </div>
960
+ <div class="mt-2">
961
+ <div class="flex items-center text-xs text-gray-500">
962
+ <i class="fas fa-info-circle mr-1"></i>
963
+ <span>Next meeting: Monday, July 10 at 10:00 AM</span>
964
+ </div>
965
+ </div>
966
+ </div>
967
+ <div>
968
+ <h3 class="text-md font-medium text-gray-800 mb-3 flex items-center">
969
+ <span class="bg-purple-100 text-purple-800 p-1 rounded mr-2">
970
+ <i class="fas fa-calendar-alt text-xs"></i>
971
+ </span>
972
+ Monthly Learning (2 hours)
973
+ </h3>
974
+ <div class="bg-purple-50 p-4 rounded-lg">
975
+ <div class="flex items-center justify-between">
976
+ <div>
977
+ <p class="text-sm font-medium text-gray-700">Customer Feedback Analysis</p>
978
+ <p class="text-xs text-gray-500">First Friday, 1:00 PM, Training Room</p>
979
+ </div>
980
+ <div class="flex space-x-2">
981
+ <button class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-xs font-medium">
982
+ <i class="fas fa-chart-bar mr-1"></i> Review Data
983
+ </button>
984
+ </div>
985
+ </div>
986
+ </div>
987
+ <div class="mt-2">
988
+ <div class="flex items-center text-xs text-gray-500">
989
+ <i class="fas fa-info-circle mr-1"></i>
990
+ <span>Next meeting: Friday, July 7 at 1:00 PM</span>
991
+ </div>
992
+ </div>
993
+ </div>
994
+ <div>
995
+ <h3 class="text-md font-medium text-gray-800 mb-3 flex items-center">
996
+ <span class="bg-yellow-100 text-yellow-800 p-1 rounded mr-2">
997
+ <i class="fas fa-calendar-check text-xs"></i>
998
+ </span>
999
+ Quarterly Offsite (2 days)
1000
+ </h3>
1001
+ <div class="bg-yellow-极客时间 50 p-4 rounded-lg">
1002
+ <div class="flex items-center justify-between">
1003
+ <div>
1004
+ <p class="text-sm font-medium text-gray-700">Strategic Planning</p>
1005
+ <p class="text-xs text-gray-500">Oct 15-16, Mountain View Resort</p>
1006
+ </div>
1007
+ <div class="flex space-x-2">
1008
+ <button class="px-3 py-1 bg-yellow-100 text-yellow-700 rounded-full text-xs font-medium">
1009
+ <i class="fas fa-reply mr-1"></i> RSVP
1010
+ </button>
1011
+ <button class="px-3 py-1 bg-white text-yellow-700 rounded-full text-xs font-medium border border-yellow-200">
1012
+ <i class="fas fa-map-marked-alt mr-1"></i> Location
1013
+ </button>
1014
+ </div>
1015
+ </div>
1016
+ </div>
1017
+ <div class="mt-2">
1018
+ <div class="flex items-center text-xs text-gray-500">
1019
+ <i class="fas fa-info-circle mr-1"></i>
1020
+ <span>90 days until offsite</span>
1021
+ </div>
1022
+ </div>
1023
+ </div>
1024
+ </div>
1025
+ </div>
1026
+ </div>
1027
+
1028
+ <!-- To-Dos and Action Items -->
1029
+ <div class="lg:col-span-1 bg-white rounded-lg shadow overflow-hidden">
1030
+ <div class="px-6 py-4 border-b border-gray-200">
1031
+ <div class="flex items-center justify-between">
1032
+ <div>
1033
+ <h2 class="text-lg font-semibold text-gray-800">My Action Items</h2>
1034
+ <p class="text-sm text-gray-500">Priority tasks</p>
1035
+ </div>
1036
+ <div class="flex space-x-2">
1037
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-xs font-medium text-gray-700 hover:极客时间 bg-gray-50">
1038
+ <i class="fas fa-filter mr-1"></i> Filter
1039
+ </button>
1040
+ </div>
1041
+ </div>
1042
+ </div>
1043
+ <div class="p-6">
1044
+ <div class="space-y-4">
1045
+ <div class="flex items-start">
1046
+ <input type="checkbox" id="task1" class="mt-1 h-4 w-4 text-blue-600 rounded focus:ring-blue-500">
1047
+ <label for="task1" class="ml-3 block text-sm font-medium text-gray-700">
1048
+ Review marketing campaign results
1049
+ <div class="flex items-center mt-1">
1050
+ <span class="text-xs text-gray-500">Due tomorrow</span>
1051
+ <span class="ml-2 px-1 py-0.5 text-xs font-medium bg-blue-100 text-blue-800 rounded">High</span>
1052
+ </div>
1053
+ </label>
1054
+ </div>
1055
+ <div class="flex items-start">
1056
+ <input type="checkbox" id="task2" class="mt-1 h-4 w-4 text-blue-600 rounded focus:ring-blue-500" checked>
1057
+ <label for="task2" class="ml-3 block text-sm font-medium text-gray-700 line-through text-gray-400">
1058
+ Interview sales candidate
1059
+ <div class="flex items-center mt-1">
1060
+ <span class="text-xs text-gray-400">Completed today</span>
1061
+ </div>
1062
+ </label>
1063
+ </div>
1064
+ <div class="flex items-start">
1065
+ <input type="checkbox" id="task3" class="mt-1 h-4 w-极客时间 4 text-blue-600 rounded focus:ring-blue-500">
1066
+ <label for="task3" class="ml-3 block text-sm font-medium text-gray-700">
1067
+ Prepare quarterly board report
1068
+ <div class="flex items-center mt-1">
1069
+ <span class="text-xs text-gray极客时间 -500">Due in 3 days</span>
1070
+ <span class="ml-2 px-1 py-0.5 text-xs font-medium bg-yellow-100 text-yellow-800 rounded">Medium</span>
1071
+ </div>
1072
+ </label>
1073
+ </div>
1074
+ <div class="flex items-start">
1075
+ <input type="checkbox" id="task4" class="mt-1 h-4 w-4 text-blue-600 rounded focus:ring-blue-500">
1076
+ <label for="task4" class="ml-3 block text-sm font-medium text-gray-700">
1077
+ Follow up with key client
1078
+ <div class="flex items-center mt-1">
1079
+ <span class="text-xs text-gray-500">Due Friday</span>
1080
+ </div>
1081
+ </label>
1082
+ </div>
1083
+ <div class="flex items-start">
1084
+ <input type="checkbox" id="task5" class="mt-1 h-4 w-4 text-blue-600 rounded focus:ring-blue-500">
1085
+ <label for="task5" class="ml-3 block text-sm font-medium text-gray-700">
1086
+ Approve budget for Q4 initiatives
1087
+ <div class="flex items-center mt-1">
1088
+ <span class="text-xs text-gray-500">Due next week</span>
1089
+ </div>
1090
+ </label>
1091
+ </div>
1092
+ </div>
1093
+ <div class="mt-6">
1094
+ <div class="flex">
1095
+ <input type="text" class="flex-1 min-w-0 block w-full px-3 py-2 rounded-md border border-gray-300 shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Add new action item">
1096
+ <button class="ml-3 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
1097
+ <i class="fas fa-plus mr-1"></i> Add
1098
+ </button>
1099
+ </div>
1100
+ </div>
1101
+ </div>
1102
+ </div>
1103
+ </div>
1104
+ </main>
1105
+ </div>
1106
+ </div>
1107
+
1108
+ <script>
1109
+ // Initialize all interactive elements
1110
+ document.addEventListener('DOMContentLoaded', function() {
1111
+ // Mobile sidebar toggle
1112
+ const mobileSidebarButton = document.getElementById('mobileSidebarButton');
1113
+ const mobileSidebarOverlay = document.getElementById('mobileSidebarOverlay');
1114
+ const sidebar = document.getElementById('sidebar');
1115
+
1116
+ if (mobileSidebarButton && mobileSidebarOverlay && sidebar) {
1117
+ mobileSidebarButton.addEventListener('click', function() {
1118
+ sidebar.classList.toggle('hidden');
1119
+ mobileSidebarOverlay.classList.toggle('hidden');
1120
+ document.body.classList.toggle('overflow-hidden');
1121
+ });
1122
+
1123
+ mobileSidebarOverlay.addEventListener('click', function() {
1124
+ sidebar.classList.add('hidden');
1125
+ mobileSidebarOverlay.classList.add('hidden');
1126
+ document.body.classList.remove('overflow-hidden');
1127
+ });
1128
+ }
1129
+
1130
+ // Notifications dropdown
1131
+ const notificationsButton = document.getElementById('notificationsButton');
1132
+ const notificationsDropdown = document.getElementById('notificationsDropdown');
1133
+
1134
+ if (notificationsButton && notificationsDropdown) {
1135
+ notificationsButton.addEventListener('click', function() {
1136
+ notificationsDropdown.classList.toggle('hidden');
1137
+ if (userMenuDropdown) userMenuDropdown.classList.add('hidden');
1138
+ });
1139
+ }
1140
+
1141
+ // User menu dropdown
1142
+ const userMenuButton = document.getElementById('userMenuButton');
1143
+ const userMenuDropdown = document.getElementById('userMenuDropdown');
1144
+
1145
+ if (userMenuButton && userMenuDropdown) {
1146
+ userMenuButton.addEventListener('click', function() {
1147
+ userMenuDropdown.classList.toggle('hidden');
1148
+ if (notificationsDropdown) notificationsDropdown.classList.add('hidden');
1149
+ });
1150
+ }
1151
+
1152
+ // Close dropdowns when clicking outside
1153
+ document.addEventListener('click', function(event) {
1154
+ if (notificationsButton && notificationsDropdown &&
1155
+ !notificationsButton.contains(event.target) &&
1156
+ !notificationsDropdown.contains(event.target)) {
1157
+ notificationsDropdown.classList.add('hidden');
1158
+ }
1159
+ if (userMenuButton && userMenuDropdown &&
1160
+ !userMenuButton.contains(event.target) &&
1161
+ !userMenuDropdown.contains(event.target)) {
1162
+ userMenuDropdown.classList.add('hidden');
1163
+ }
1164
+ });
1165
+
1166
+ // Toggle checkboxes and strike through text
1167
+ const checkboxes = document.querySelectorAll('input[type="checkbox"]');
1168
+ checkboxes.forEach(checkbox => {
1169
+ checkbox.addEventListener('change', function() {
1170
+ const label = this.nextElementSibling;
1171
+ if (this.checked) {
1172
+ label.classList.add('line-through', 'text-gray-400');
1173
+ } else {
1174
+ label.classList.remove('line-through', 'text-gray-400');
1175
+ }
1176
+ });
1177
+ });
1178
+
1179
+ // Initialize mini charts only if elements exist
1180
+ if (document.querySelector("#revenueChart")) {
1181
+ const revenueChartOptions = {
1182
+ series: [{
1183
+ name: 'Revenue',
1184
+ data: [30, 40, 45, 50, 49, 60, 70, 80, 90, 100, 110, 120]
1185
+ }],
1186
+ chart: {
1187
+ type: 'area',
1188
+ height: 60,
1189
+ sparkline: {
1190
+ enabled: true
1191
+ },
1192
+ },
1193
+ stroke: {
1194
+ curve: 'smooth',
1195
+ width: 2
1196
+ },
1197
+ fill: {
1198
+ type: 'gradient',
1199
+ gradient: {
1200
+ shadeIntensity: 1,
1201
+ opacityFrom: 0.7,
1202
+ opacityTo: 0.2,
1203
+ stops: [0, 100]
1204
+ }
1205
+ },
1206
+ colors: ['#3B82F6'],
1207
+ tooltip: {
1208
+ fixed: {
1209
+ enabled: false
1210
+ },
1211
+ x: {
1212
+ show: false
1213
+ },
1214
+ marker: {
1215
+ show: false
1216
+ }
1217
+ }
1218
+ };
1219
+
1220
+ const revenueChart = new ApexCharts(document.querySelector("#revenueChart"), revenueChartOptions);
1221
+ revenueChart.render();
1222
+ }
1223
+
1224
+ if (document.querySelector("#employeesChart")) {
1225
+ const employeesChartOptions = {
1226
+ series: [{
1227
+ name: 'Employees',
1228
+ data: [60, 65, 68, 70, 72, 75, 78, 80, 82, 84]
1229
+ }],
1230
+ chart: {
1231
+ type: 'area',
1232
+ height: 60,
1233
+ sparkline: {
1234
+ enabled: true
1235
+ },
1236
+ },
1237
+ stroke: {
1238
+ curve: 'smooth',
1239
+ width: 2
1240
+ },
1241
+ fill: {
1242
+ type: 'gradient',
1243
+ gradient: {
1244
+ shadeIntensity极客时间 : 1,
1245
+ opacityFrom: 0.7,
1246
+ opacityTo: 0.2,
1247
+ stops: [0, 100]
1248
+ }
1249
+ },
1250
+ colors: ['#10B981'],
1251
+ tooltip: {
1252
+ fixed: {
1253
+ enabled: false
1254
+ },
1255
+ x: {
1256
+ show: false
1257
+ },
1258
+ marker: {
1259
+ show: false
1260
+ }
1261
+ }
1262
+ };
1263
+
1264
+ const employeesChart = new ApexCharts(document.querySelector("#employeesChart"), employeesChartOptions);
1265
+ employeesChart.render();
1266
+ }
1267
+
1268
+ if (document.querySelector("#npsChart")) {
1269
+ const npsChartOptions = {
1270
+ series: [{
1271
+ name: 'NPS',
1272
+ data: [70, 72, 71, 73, 75, 74, 72, 70, 71, 72, 70, 72]
1273
+ }],
1274
+ chart: {
1275
+ type: 'area',
1276
+ height: 60,
1277
+ sparkline: {
1278
+ enabled: true
1279
+ },
1280
+ },
1281
+ stroke: {
1282
+ curve: 'smooth',
1283
+ width: 2
1284
+ },
1285
+ fill: {
1286
+ type: 'gradient',
1287
+ gradient: {
1288
+ shadeIntensity: 1,
1289
+ opacityFrom: 0.7,
1290
+ opacityTo: 0.2,
1291
+ stops: [0, 100]
1292
+ }
1293
+ },
1294
+ colors: ['#8B5CF6'],
1295
+ tooltip: {
1296
+ fixed: {
1297
+ enabled: false
1298
+ },
1299
+ x: {
1300
+ show: false
1301
+ },
1302
+ marker: {
1303
+ show: false
1304
+ }
1305
+ }
1306
+ };
1307
+
1308
+ const npsChart = new ApexCharts(document.querySelector("#npsChart"), npsChartOptions);
1309
+ npsChart.render();
1310
+ }
1311
+
1312
+ // Metrics trend chart
1313
+ if (document.querySelector("#metricsTrendChart")) {
1314
+ const metricsTrendChartOptions = {
1315
+ series: [{
1316
+ name: 'Revenue',
1317
+ data: [30, 40, 45, 50, 49, 60, 70, 80, 90, 100, 110, 120]
1318
+ }, {
1319
+ name: 'Customers',
1320
+ data: [100, 120, 140, 160, 180, 185, 190, 210, 230, 245, 260, 280]
1321
+ }, {
1322
+ name: 'NPS',
1323
+ data: [70, 72, 71, 73, 75, 74, 72, 70, 71, 72, 70, 72]
1324
+ }],
1325
+ chart: {
1326
+ type: 'line',
1327
+ height: 150,
1328
+ toolbar: {
1329
+ show: false
1330
+ },
1331
+ },
1332
+ colors: ['#3B82F6', '#10B981', '#8B5CF6'],
1333
+ stroke: {
1334
+ curve: 'smooth',
1335
+ width: 2
1336
+ },
1337
+ markers: {
1338
+ size: 0
1339
+ },
1340
+ xaxis: {
1341
+ categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
1342
+ labels: {
1343
+ style: {
1344
+ fontSize: '10px'
1345
+ }
1346
+ }
1347
+ },
1348
+ yaxis: {
1349
+ show: false
1350
+ },
1351
+ tooltip: {
1352
+ enabled: false
1353
+ },
1354
+ legend: {
1355
+ show: false
1356
+ },
1357
+ grid: {
1358
+ show: false
1359
+ }
1360
+ };
1361
+
1362
+ const metricsTrendChart = new ApexCharts(document.querySelector("#metricsTrendChart"), metricsTrendChartOptions);
1363
+ metricsTrendChart.render();
1364
+ }
1365
+
1366
+ // Sidebar navigation active state
1367
+ const sidebarItems = document.querySelectorAll('.sidebar-item');
1368
+ sidebarItems.forEach(item => {
1369
+ item.addEventListener('click', function() {
1370
+ sidebarItems.forEach(i => i.classList.remove('active', 'bg-secondary', 'text-white'));
1371
+ this.classList.add('active', 'bg-secondary', 'text-white');
1372
+ });
1373
+ });
1374
+ });
1375
+ </script>
1376
+ <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/scale-space-v3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1377
+ </html>
prompts.txt ADDED
File without changes