Hugging Face's logo

Spaces:
JayStormX8
/
vision-mission-values-generator
Running

App Files Community
JayStormX8 commited on
Commit
738c1d9
·
verified ·
1 Parent(s): 5ac1632

Create a vision, mission and values generator that uses ai based off the descriptions and quiz that people select to generate and them allows them to edit it. Colors to use are RGB: #252525 RGB: #ff3c00 RGB: #ffffff RGB: #f5f4f1 RGB: #e4e1dc RGB: #d1b6a6 and the api key to use is deepseek api: sk-a823429c22e8408abeba2054c696ea63 - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +666 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Vision Mission Values Generator
3
- emoji: 📉
4
- colorFrom: indigo
5
  colorTo: purple
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: vision-mission-values-generator
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
  colorTo: purple
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,666 @@
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>Vision, Mission & Values Generator</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script>
9
+ tailwind.config = {
10
+ theme: {
11
+ extend: {
12
+ colors: {
13
+ primary: '#252525',
14
+ accent: '#ff3c00',
15
+ white: '#ffffff',
16
+ light: '#f5f4f1',
17
+ gray: '#e4e1dc',
18
+ beige: '#d1b6a6'
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
25
+ <style>
26
+ .fade-in {
27
+ animation: fadeIn 0.5s ease-in-out;
28
+ }
29
+
30
+ @keyframes fadeIn {
31
+ from { opacity: 0; transform: translateY(10px); }
32
+ to { opacity: 1; transform: translateY(0); }
33
+ }
34
+
35
+ .textarea-auto {
36
+ min-height: 100px;
37
+ resize: none;
38
+ overflow: hidden;
39
+ }
40
+
41
+ .textarea-auto:focus {
42
+ outline: none;
43
+ }
44
+
45
+ .loading-dots:after {
46
+ content: '.';
47
+ animation: dots 1.5s steps(5, end) infinite;
48
+ }
49
+
50
+ @keyframes dots {
51
+ 0%, 20% { content: '.'; }
52
+ 40% { content: '..'; }
53
+ 60% { content: '...'; }
54
+ 80%, 100% { content: ''; }
55
+ }
56
+ </style>
57
+ </head>
58
+ <body class="bg-light font-sans">
59
+ <div class="min-h-screen">
60
+ <!-- Header -->
61
+ <header class="bg-primary text-white py-6 shadow-md">
62
+ <div class="container mx-auto px-4">
63
+ <h1 class="text-3xl font-bold">Vision, Mission & Values Generator</h1>
64
+ <p class="mt-2 text-gray-300">Create your organization's guiding principles with AI</p>
65
+ </div>
66
+ </header>
67
+
68
+ <!-- Main Content -->
69
+ <main class="container mx-auto px-4 py-8">
70
+ <!-- Step Navigation -->
71
+ <div class="flex justify-center mb-8">
72
+ <div class="flex items-center space-x-8">
73
+ <div id="step1" class="step flex flex-col items-center cursor-pointer">
74
+ <div class="w-12 h-12 rounded-full bg-accent text-white flex items-center justify-center font-bold">1</div>
75
+ <span class="mt-2 font-medium text-primary">About You</span>
76
+ </div>
77
+ <div class="w-16 h-1 bg-gray-300"></div>
78
+ <div id="step2" class="step flex flex-col items-center cursor-pointer opacity-50">
79
+ <div class="w-12 h-12 rounded-full bg-gray-300 text-primary flex items-center justify-center font-bold">2</div>
80
+ <span class="mt-2 font-medium text-gray-500">Preferences</span>
81
+ </div>
82
+ <div class="w-16 h-1 bg-gray-300"></div>
83
+ <div id="step3" class="step flex flex-col items-center cursor-pointer opacity-50">
84
+ <div class="w-12 h-12 rounded-full bg-gray-300 text-primary flex items-center justify-center font-bold">3</div>
85
+ <span class="mt-2 font-medium text-gray-500">Results</span>
86
+ </div>
87
+ </div>
88
+ </div>
89
+
90
+ <!-- Step 1: About You -->
91
+ <div id="step1-content" class="fade-in">
92
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
93
+ <h2 class="text-2xl font-bold text-primary mb-4">Tell us about your organization</h2>
94
+
95
+ <div class="space-y-6">
96
+ <div>
97
+ <label for="org-name" class="block text-primary font-medium mb-2">Organization Name</label>
98
+ <input type="text" id="org-name" class="w-full px-4 py-2 border border-gray rounded-md focus:ring-2 focus:ring-accent focus:border-transparent" placeholder="e.g. Tech Innovations Inc.">
99
+ </div>
100
+
101
+ <div>
102
+ <label for="org-type" class="block text-primary font-medium mb-2">Organization Type</label>
103
+ <select id="org-type" class="w-full px-4 py-2 border border-gray rounded-md focus:ring-2 focus:ring-accent focus:border-transparent">
104
+ <option value="">Select type...</option>
105
+ <option value="startup">Startup</option>
106
+ <option value="nonprofit">Nonprofit</option>
107
+ <option value="corporate">Corporate</option>
108
+ <option value="small-business">Small Business</option>
109
+ <option value="educational">Educational Institution</option>
110
+ <option value="government">Government Agency</option>
111
+ <option value="other">Other</option>
112
+ </select>
113
+ </div>
114
+
115
+ <div>
116
+ <label for="org-industry" class="block text-primary font-medium mb-2">Industry/Sector</label>
117
+ <input type="text" id="org-industry" class="w-full px-4 py-2 border border-gray rounded-md focus:ring-2 focus:ring-accent focus:border-transparent" placeholder="e.g. Technology, Healthcare, Education">
118
+ </div>
119
+
120
+ <div>
121
+ <label for="org-description" class="block text-primary font-medium mb-2">Brief Description</label>
122
+ <textarea id="org-description" rows="4" class="w-full px-4 py-2 border border-gray rounded-md focus:ring-2 focus:ring-accent focus:border-transparent textarea-auto" placeholder="Describe what your organization does, its purpose, and any unique aspects..."></textarea>
123
+ </div>
124
+ </div>
125
+ </div>
126
+
127
+ <div class="flex justify-end">
128
+ <button id="next-to-step2" class="bg-accent hover:bg-opacity-90 text-white px-6 py-3 rounded-md font-medium transition duration-300">
129
+ Next <i class="fas fa-arrow-right ml-2"></i>
130
+ </button>
131
+ </div>
132
+ </div>
133
+
134
+ <!-- Step 2: Preferences -->
135
+ <div id="step2-content" class="hidden fade-in">
136
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
137
+ <h2 class="text-2xl font-bold text-primary mb-4">Define your preferences</h2>
138
+
139
+ <div class="space-y-8">
140
+ <div>
141
+ <h3 class="text-xl font-semibold text-primary mb-3">Tone & Style</h3>
142
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
143
+ <label class="tone-option cursor-pointer border border-gray rounded-lg p-4 hover:border-accent hover:bg-light transition duration-200">
144
+ <input type="radio" name="tone" value="professional" class="hidden">
145
+ <div class="flex items-center">
146
+ <div class="w-6 h-6 rounded-full border-2 border-gray mr-3 flex items-center justify-center">
147
+ <div class="w-3 h-3 rounded-full bg-accent hidden"></div>
148
+ </div>
149
+ <span class="font-medium">Professional</span>
150
+ </div>
151
+ <p class="mt-2 text-sm text-gray-600">Formal, corporate language suitable for established businesses</p>
152
+ </label>
153
+
154
+ <label class="tone-option cursor-pointer border border-gray rounded-lg p-4 hover:border-accent hover:bg-light transition duration-200">
155
+ <input type="radio" name="tone" value="modern" class="hidden">
156
+ <div class="flex items-center">
157
+ <div class="w-6 h-6 rounded-full border-2 border-gray mr-3 flex items-center justify-center">
158
+ <div class="w-3 h-3 rounded-full bg-accent hidden"></div>
159
+ </div>
160
+ <span class="font-medium">Modern</span>
161
+ </div>
162
+ <p class="mt-2 text-sm text-gray-600">Contemporary, forward-thinking with a tech-friendly approach</p>
163
+ </label>
164
+
165
+ <label class="tone-option cursor-pointer border border-gray rounded-lg p-4 hover:border-accent hover:bg-light transition duration-200">
166
+ <input type="radio" name="tone" value="inspirational" class="hidden">
167
+ <div class="flex items-center">
168
+ <div class="w-6 h-6 rounded-full border-2 border-gray mr-3 flex items-center justify-center">
169
+ <div class="w-3 h-3 rounded-full bg-accent hidden"></div>
170
+ </div>
171
+ <span class="font-medium">Inspirational</span>
172
+ </div>
173
+ <p class="mt-2 text-sm text-gray-600">Motivational and uplifting, ideal for mission-driven organizations</p>
174
+ </label>
175
+ </div>
176
+ </div>
177
+
178
+ <div>
179
+ <h3 class="text-xl font-semibold text-primary mb-3">Focus Areas</h3>
180
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
181
+ <label class="focus-option cursor-pointer">
182
+ <input type="checkbox" value="innovation" class="hidden">
183
+ <div class="border border-gray rounded-lg px-4 py-2 hover:border-accent hover:bg-light transition duration-200">
184
+ <span>Innovation</span>
185
+ </div>
186
+ </label>
187
+ <label class="focus-option cursor-pointer">
188
+ <input type="checkbox" value="sustainability" class="hidden">
189
+ <div class="border border-gray rounded-lg px-4 py-2 hover:border-accent hover:bg-light transition duration-200">
190
+ <span>Sustainability</span>
191
+ </div>
192
+ </label>
193
+ <label class="focus-option cursor-pointer">
194
+ <input type="checkbox" value="customer-centric" class="hidden">
195
+ <div class="border border-gray rounded-lg px-4 py-2 hover:border-accent hover:bg-light transition duration-200">
196
+ <span>Customer-Centric</span>
197
+ </div>
198
+ </label>
199
+ <label class="focus-option cursor-pointer">
200
+ <input type="checkbox" value="employee-wellbeing" class="hidden">
201
+ <div class="border border-gray rounded-lg px-4 py-2 hover:border-accent hover:bg-light transition duration-200">
202
+ <span>Employee Wellbeing</span>
203
+ </div>
204
+ </label>
205
+ <label class="focus-option cursor-pointer">
206
+ <input type="checkbox" value="community-impact" class="hidden">
207
+ <div class="border border-gray rounded-lg px-4 py-2 hover:border-accent hover:bg-light transition duration-200">
208
+ <span>Community Impact</span>
209
+ </div>
210
+ </label>
211
+ <label class="focus-option cursor-pointer">
212
+ <input type="checkbox" value="growth" class="hidden">
213
+ <div class="border border-gray rounded-lg px-4 py-2 hover:border-accent hover:bg-light transition duration-200">
214
+ <span>Growth</span>
215
+ </div>
216
+ </label>
217
+ </div>
218
+ </div>
219
+
220
+ <div>
221
+ <h3 class="text-xl font-semibold text-primary mb-3">Additional Preferences</h3>
222
+ <textarea id="additional-prefs" rows="3" class="w-full px-4 py-2 border border-gray rounded-md focus:ring-2 focus:ring-accent focus:border-transparent textarea-auto" placeholder="Any specific phrases, keywords, or concepts you'd like included?"></textarea>
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ <div class="flex justify-between">
228
+ <button id="back-to-step1" class="text-primary hover:text-accent font-medium px-6 py-3 rounded-md transition duration-300">
229
+ <i class="fas fa-arrow-left mr-2"></i> Back
230
+ </button>
231
+ <button id="generate-content" class="bg-accent hover:bg-opacity-90 text-white px-6 py-3 rounded-md font-medium transition duration-300 flex items-center">
232
+ Generate Content <i class="fas fa-magic ml-2"></i>
233
+ </button>
234
+ </div>
235
+ </div>
236
+
237
+ <!-- Step 3: Results -->
238
+ <div id="step3-content" class="hidden fade-in">
239
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
240
+ <h2 class="text-2xl font-bold text-primary mb-6">Your Generated Content</h2>
241
+
242
+ <div id="loading-section" class="text-center py-12">
243
+ <div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-accent mb-4"></div>
244
+ <h3 class="text-xl font-medium text-primary">Generating your vision, mission, and values<span class="loading-dots"></span></h3>
245
+ <p class="text-gray-600 mt-2">This usually takes about 15-30 seconds</p>
246
+ </div>
247
+
248
+ <div id="results-section" class="hidden space-y-8">
249
+ <div class="border-b border-gray pb-6">
250
+ <h3 class="text-xl font-semibold text-primary mb-3">Vision Statement</h3>
251
+ <div class="relative">
252
+ <textarea id="vision-statement" class="w-full px-4 py-3 border border-gray rounded-md focus:ring-2 focus:ring-accent focus:border-transparent textarea-auto bg-light font-medium"></textarea>
253
+ <button class="copy-btn absolute top-2 right-2 bg-white text-accent p-1 rounded-md hover:bg-gray-100" data-target="vision-statement">
254
+ <i class="far fa-copy"></i>
255
+ </button>
256
+ </div>
257
+ <p class="text-sm text-gray-600 mt-2">A compelling vision of what your organization aspires to achieve in the future</p>
258
+ </div>
259
+
260
+ <div class="border-b border-gray pb-6">
261
+ <h3 class="text-xl font-semibold text-primary mb-3">Mission Statement</h3>
262
+ <div class="relative">
263
+ <textarea id="mission-statement" class="w-full px-4 py-3 border border-gray rounded-md focus:ring-2 focus:ring-accent focus:border-transparent textarea-auto bg-light font-medium"></textarea>
264
+ <button class="copy-btn absolute top-2 right-2 bg-white text-accent p-1 rounded-md hover:bg-gray-100" data-target="mission-statement">
265
+ <i class="far fa-copy"></i>
266
+ </button>
267
+ </div>
268
+ <p class="text-sm text-gray-600 mt-2">A clear statement of your organization's purpose and primary objectives</p>
269
+ </div>
270
+
271
+ <div>
272
+ <h3 class="text-xl font-semibold text-primary mb-3">Core Values</h3>
273
+ <div id="values-container" class="space-y-4">
274
+ <!-- Values will be added here dynamically -->
275
+ </div>
276
+ <button id="add-value" class="mt-4 text-accent hover:text-opacity-80 font-medium flex items-center">
277
+ <i class="fas fa-plus-circle mr-2"></i> Add Another Value
278
+ </button>
279
+ </div>
280
+ </div>
281
+ </div>
282
+
283
+ <div class="flex justify-between">
284
+ <button id="back-to-step2" class="text-primary hover:text-accent font-medium px-6 py-3 rounded-md transition duration-300">
285
+ <i class="fas fa-arrow-left mr-2"></i> Back
286
+ </button>
287
+ <div class="space-x-4">
288
+ <button id="regenerate-content" class="bg-gray hover:bg-opacity-90 text-primary px-6 py-3 rounded-md font-medium transition duration-300 hidden">
289
+ <i class="fas fa-sync-alt mr-2"></i> Regenerate
290
+ </button>
291
+ <button id="download-content" class="bg-accent hover:bg-opacity-90 text-white px-6 py-3 rounded-md font-medium transition duration-300 hidden">
292
+ <i class="fas fa-download mr-2"></i> Download
293
+ </button>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </main>
298
+ </div>
299
+
300
+ <script>
301
+ document.addEventListener('DOMContentLoaded', function() {
302
+ // DOM Elements
303
+ const step1 = document.getElementById('step1');
304
+ const step2 = document.getElementById('step2');
305
+ const step3 = document.getElementById('step3');
306
+ const step1Content = document.getElementById('step1-content');
307
+ const step2Content = document.getElementById('step2-content');
308
+ const step3Content = document.getElementById('step3-content');
309
+ const nextToStep2 = document.getElementById('next-to-step2');
310
+ const backToStep1 = document.getElementById('back-to-step1');
311
+ const generateContent = document.getElementById('generate-content');
312
+ const backToStep2 = document.getElementById('back-to-step2');
313
+ const regenerateContent = document.getElementById('regenerate-content');
314
+ const downloadContent = document.getElementById('download-content');
315
+ const addValue = document.getElementById('add-value');
316
+ const loadingSection = document.getElementById('loading-section');
317
+ const resultsSection = document.getElementById('results-section');
318
+
319
+ // API Key
320
+ const API_KEY = 'sk-a823429c22e8408abeba2054c696ea63';
321
+
322
+ // Step Navigation
323
+ nextToStep2.addEventListener('click', function() {
324
+ const orgName = document.getElementById('org-name').value;
325
+ const orgType = document.getElementById('org-type').value;
326
+ const orgDescription = document.getElementById('org-description').value;
327
+
328
+ if (!orgName || !orgType || !orgDescription) {
329
+ alert('Please fill in all fields before proceeding.');
330
+ return;
331
+ }
332
+
333
+ step1.classList.add('opacity-50');
334
+ step2.classList.remove('opacity-50');
335
+ step1Content.classList.add('hidden');
336
+ step2Content.classList.remove('hidden');
337
+ step2Content.classList.add('fade-in');
338
+ });
339
+
340
+ backToStep1.addEventListener('click', function() {
341
+ step1.classList.remove('opacity-50');
342
+ step2.classList.add('opacity-50');
343
+ step2Content.classList.add('hidden');
344
+ step1Content.classList.remove('hidden');
345
+ step1Content.classList.add('fade-in');
346
+ });
347
+
348
+ generateContent.addEventListener('click', function() {
349
+ const tone = document.querySelector('input[name="tone"]:checked');
350
+ const focusAreas = Array.from(document.querySelectorAll('.focus-option input:checked')).map(el => el.value);
351
+
352
+ if (!tone || focusAreas.length === 0) {
353
+ alert('Please select at least one tone and one focus area.');
354
+ return;
355
+ }
356
+
357
+ step2.classList.add('opacity-50');
358
+ step3.classList.remove('opacity-50');
359
+ step2Content.classList.add('hidden');
360
+ step3Content.classList.remove('hidden');
361
+ step3Content.classList.add('fade-in');
362
+
363
+ loadingSection.classList.remove('hidden');
364
+ resultsSection.classList.add('hidden');
365
+ regenerateContent.classList.add('hidden');
366
+ downloadContent.classList.add('hidden');
367
+
368
+ // Prepare data for API call
369
+ const orgData = {
370
+ name: document.getElementById('org-name').value,
371
+ type: document.getElementById('org-type').value,
372
+ industry: document.getElementById('org-industry').value,
373
+ description: document.getElementById('org-description').value,
374
+ tone: tone.value,
375
+ focusAreas: focusAreas,
376
+ additionalPrefs: document.getElementById('additional-prefs').value
377
+ };
378
+
379
+ // Generate content with AI
380
+ generateWithAI(orgData);
381
+ });
382
+
383
+ backToStep2.addEventListener('click', function() {
384
+ step3.classList.add('opacity-50');
385
+ step2.classList.remove('opacity-50');
386
+ step3Content.classList.add('hidden');
387
+ step2Content.classList.remove('hidden');
388
+ step2Content.classList.add('fade-in');
389
+ });
390
+
391
+ // Tone option selection
392
+ document.querySelectorAll('.tone-option').forEach(option => {
393
+ option.addEventListener('click', function() {
394
+ document.querySelectorAll('.tone-option').forEach(opt => {
395
+ opt.classList.remove('border-accent', 'bg-light');
396
+ opt.querySelector('input').checked = false;
397
+ opt.querySelector('.w-3.h-3').classList.add('hidden');
398
+ });
399
+
400
+ this.classList.add('border-accent', 'bg-light');
401
+ this.querySelector('input').checked = true;
402
+ this.querySelector('.w-3.h-3').classList.remove('hidden');
403
+ });
404
+ });
405
+
406
+ // Focus option selection
407
+ document.querySelectorAll('.focus-option').forEach(option => {
408
+ option.addEventListener('click', function() {
409
+ const input = this.querySelector('input');
410
+ input.checked = !input.checked;
411
+
412
+ if (input.checked) {
413
+ this.querySelector('div').classList.add('border-accent', 'bg-light');
414
+ } else {
415
+ this.querySelector('div').classList.remove('border-accent', 'bg-light');
416
+ }
417
+ });
418
+ });
419
+
420
+ // Auto-expanding textareas
421
+ document.querySelectorAll('.textarea-auto').forEach(textarea => {
422
+ textarea.addEventListener('input', function() {
423
+ this.style.height = 'auto';
424
+ this.style.height = (this.scrollHeight) + 'px';
425
+ });
426
+ });
427
+
428
+ // Add new value
429
+ addValue.addEventListener('click', function() {
430
+ const valueId = 'value-' + Date.now();
431
+ const valueDiv = document.createElement('div');
432
+ valueDiv.className = 'border border-gray rounded-md p-4 bg-light';
433
+ valueDiv.innerHTML = `
434
+ <div class="flex justify-between items-start mb-2">
435
+ <input type="text" placeholder="Value Title" class="font-medium bg-transparent border-b border-gray focus:border-accent focus:outline-none px-1 py-1 w-1/2">
436
+ <button class="delete-value text-gray-500 hover:text-accent">
437
+ <i class="fas fa-times"></i>
438
+ </button>
439
+ </div>
440
+ <textarea placeholder="Value Description" class="w-full px-2 py-1 bg-transparent focus:outline-none textarea-auto" rows="2"></textarea>
441
+ `;
442
+
443
+ document.getElementById('values-container').appendChild(valueDiv);
444
+
445
+ // Add event listener for delete button
446
+ valueDiv.querySelector('.delete-value').addEventListener('click', function() {
447
+ valueDiv.remove();
448
+ });
449
+
450
+ // Auto-expand the new textarea
451
+ const newTextarea = valueDiv.querySelector('textarea');
452
+ newTextarea.addEventListener('input', function() {
453
+ this.style.height = 'auto';
454
+ this.style.height = (this.scrollHeight) + 'px';
455
+ });
456
+ });
457
+
458
+ // Copy buttons
459
+ document.addEventListener('click', function(e) {
460
+ if (e.target.classList.contains('copy-btn') || e.target.closest('.copy-btn')) {
461
+ const btn = e.target.classList.contains('copy-btn') ? e.target : e.target.closest('.copy-btn');
462
+ const targetId = btn.getAttribute('data-target');
463
+ const textarea = document.getElementById(targetId);
464
+
465
+ textarea.select();
466
+ document.execCommand('copy');
467
+
468
+ // Show tooltip
469
+ const tooltip = document.createElement('div');
470
+ tooltip.className = 'absolute top-10 right-2 bg-primary text-white text-xs px-2 py-1 rounded';
471
+ tooltip.textContent = 'Copied!';
472
+ btn.appendChild(tooltip);
473
+
474
+ setTimeout(() => {
475
+ tooltip.remove();
476
+ }, 2000);
477
+ }
478
+ });
479
+
480
+ // Download content
481
+ downloadContent.addEventListener('click', function() {
482
+ const orgName = document.getElementById('org-name').value || 'MyOrganization';
483
+ const vision = document.getElementById('vision-statement').value;
484
+ const mission = document.getElementById('mission-statement').value;
485
+
486
+ let valuesText = '';
487
+ document.querySelectorAll('#values-container > div').forEach(valueDiv => {
488
+ const title = valueDiv.querySelector('input').value || 'Untitled Value';
489
+ const description = valueDiv.querySelector('textarea').value || 'No description provided.';
490
+ valuesText += `• ${title}: ${description}\n\n`;
491
+ });
492
+
493
+ const content = `Vision, Mission & Values for ${orgName}\n\n` +
494
+ `VISION STATEMENT:\n${vision}\n\n` +
495
+ `MISSION STATEMENT:\n${mission}\n\n` +
496
+ `CORE VALUES:\n${valuesText}`;
497
+
498
+ const blob = new Blob([content], { type: 'text/plain' });
499
+ const url = URL.createObjectURL(blob);
500
+ const a = document.createElement('a');
501
+ a.href = url;
502
+ a.download = `${orgName.replace(/\s+/g, '_')}_Vision_Mission_Values.txt`;
503
+ document.body.appendChild(a);
504
+ a.click();
505
+ document.body.removeChild(a);
506
+ URL.revokeObjectURL(url);
507
+ });
508
+
509
+ // Regenerate content
510
+ regenerateContent.addEventListener('click', function() {
511
+ loadingSection.classList.remove('hidden');
512
+ resultsSection.classList.add('hidden');
513
+ regenerateContent.classList.add('hidden');
514
+ downloadContent.classList.add('hidden');
515
+
516
+ // Prepare data for API call
517
+ const orgData = {
518
+ name: document.getElementById('org-name').value,
519
+ type: document.getElementById('org-type').value,
520
+ industry: document.getElementById('org-industry').value,
521
+ description: document.getElementById('org-description').value,
522
+ tone: document.querySelector('input[name="tone"]:checked').value,
523
+ focusAreas: Array.from(document.querySelectorAll('.focus-option input:checked')).map(el => el.value),
524
+ additionalPrefs: document.getElementById('additional-prefs').value
525
+ };
526
+
527
+ // Generate content with AI
528
+ generateWithAI(orgData);
529
+ });
530
+
531
+ // AI Generation Function
532
+ async function generateWithAI(orgData) {
533
+ try {
534
+ // Construct the prompt
535
+ let prompt = `Create a vision statement, mission statement, and 4-6 core values for ${orgData.name}, `;
536
+ prompt += `a ${orgData.type} organization in the ${orgData.industry} industry. `;
537
+ prompt += `Here's a description of the organization: "${orgData.description}". `;
538
+ prompt += `The tone should be ${orgData.tone}. `;
539
+
540
+ if (orgData.focusAreas.length > 0) {
541
+ prompt += `Key focus areas include: ${orgData.focusAreas.join(', ')}. `;
542
+ }
543
+
544
+ if (orgData.additionalPrefs) {
545
+ prompt += `Additional preferences: ${orgData.additionalPrefs}. `;
546
+ }
547
+
548
+ prompt += `Please format the response as follows:\n\n`;
549
+ prompt += `VISION: [vision statement]\n\n`;
550
+ prompt += `MISSION: [mission statement]\n\n`;
551
+ prompt += `VALUES:\n1. [value name]: [value description]\n2. [value name]: [value description]\n...`;
552
+
553
+ // Call DeepSeek API
554
+ const response = await fetch('https://api.deepseek.com/v1/chat/completions', {
555
+ method: 'POST',
556
+ headers: {
557
+ 'Content-Type': 'application/json',
558
+ 'Authorization': `Bearer ${API_KEY}`
559
+ },
560
+ body: JSON.stringify({
561
+ model: 'deepseek-chat',
562
+ messages: [
563
+ {
564
+ role: 'user',
565
+ content: prompt
566
+ }
567
+ ],
568
+ temperature: 0.7,
569
+ max_tokens: 1000
570
+ })
571
+ });
572
+
573
+ if (!response.ok) {
574
+ throw new Error(`API request failed with status ${response.status}`);
575
+ }
576
+
577
+ const data = await response.json();
578
+ const content = data.choices[0].message.content;
579
+
580
+ // Parse the response
581
+ const visionMatch = content.match(/VISION:\s*(.+?)\n\n/i);
582
+ const missionMatch = content.match(/MISSION:\s*(.+?)\n\n/i);
583
+ const valuesMatch = content.match(/VALUES:\s*([\s\S]+)/i);
584
+
585
+ if (visionMatch && missionMatch && valuesMatch) {
586
+ const vision = visionMatch[1].trim();
587
+ const mission = missionMatch[1].trim();
588
+ const valuesText = valuesMatch[1].trim();
589
+
590
+ // Split values into individual items
591
+ const values = valuesText.split('\n').filter(line => line.trim()).map(line => {
592
+ const parts = line.split(':').map(part => part.trim());
593
+ return {
594
+ title: parts[0].replace(/^\d+\.\s*/, ''),
595
+ description: parts.slice(1).join(': ')
596
+ };
597
+ });
598
+
599
+ // Update the UI
600
+ document.getElementById('vision-statement').value = vision;
601
+ document.getElementById('mission-statement').value = mission;
602
+
603
+ const valuesContainer = document.getElementById('values-container');
604
+ valuesContainer.innerHTML = '';
605
+
606
+ values.forEach(value => {
607
+ const valueId = 'value-' + Date.now();
608
+ const valueDiv = document.createElement('div');
609
+ valueDiv.className = 'border border-gray rounded-md p-4 bg-light';
610
+ valueDiv.innerHTML = `
611
+ <div class="flex justify-between items-start mb-2">
612
+ <input type="text" value="${value.title}" class="font-medium bg-transparent border-b border-gray focus:border-accent focus:outline-none px-1 py-1 w-1/2">
613
+ <button class="delete-value text-gray-500 hover:text-accent">
614
+ <i class="fas fa-times"></i>
615
+ </button>
616
+ </div>
617
+ <textarea class="w-full px-2 py-1 bg-transparent focus:outline-none textarea-auto" rows="2">${value.description}</textarea>
618
+ `;
619
+
620
+ valuesContainer.appendChild(valueDiv);
621
+
622
+ // Add event listener for delete button
623
+ valueDiv.querySelector('.delete-value').addEventListener('click', function() {
624
+ valueDiv.remove();
625
+ });
626
+
627
+ // Auto-expand the textarea
628
+ const textarea = valueDiv.querySelector('textarea');
629
+ textarea.style.height = 'auto';
630
+ textarea.style.height = (textarea.scrollHeight) + 'px';
631
+ textarea.addEventListener('input', function() {
632
+ this.style.height = 'auto';
633
+ this.style.height = (this.scrollHeight) + 'px';
634
+ });
635
+ });
636
+
637
+ // Show results
638
+ loadingSection.classList.add('hidden');
639
+ resultsSection.classList.remove('hidden');
640
+ regenerateContent.classList.remove('hidden');
641
+ downloadContent.classList.remove('hidden');
642
+ } else {
643
+ throw new Error('Could not parse the AI response');
644
+ }
645
+ } catch (error) {
646
+ console.error('Error generating content:', error);
647
+ loadingSection.innerHTML = `
648
+ <div class="text-center py-12">
649
+ <i class="fas fa-exclamation-triangle text-4xl text-accent mb-4"></i>
650
+ <h3 class="text-xl font-medium text-primary">Error Generating Content</h3>
651
+ <p class="text-gray-600 mt-2">We encountered an issue while generating your content. Please try again.</p>
652
+ <button id="try-again" class="mt-4 bg-accent hover:bg-opacity-90 text-white px-4 py-2 rounded-md font-medium transition duration-300">
653
+ Try Again
654
+ </button>
655
+ </div>
656
+ `;
657
+
658
+ document.getElementById('try-again').addEventListener('click', function() {
659
+ location.reload();
660
+ });
661
+ }
662
+ }
663
+ });
664
+ </script>
665
+ <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/vision-mission-values-generator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
666
+ </html>