Hugging Face's logo

Spaces:
JayStormX8
/
vision-values-v2
Running

App Files Community
JayStormX8 commited on
Commit
2ad599a
·
verified ·
1 Parent(s): 1babc2b

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1109 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Vision Values V2
3
- emoji: 📉
4
- colorFrom: yellow
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-values-v2
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1109 @@
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 Quest - AI Goal Generator</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://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.28/jspdf.plugin.autotable.min.js"></script>
11
+ <style>
12
+ @keyframes float {
13
+ 0% { transform: translateY(0px); }
14
+ 50% { transform: translateY(-10px); }
15
+ 100% { transform: translateY(0px); }
16
+ }
17
+ .floating {
18
+ animation: float 3s ease-in-out infinite;
19
+ }
20
+ .progress-ring__circle {
21
+ transition: stroke-dashoffset 0.5s;
22
+ transform: rotate(-90deg);
23
+ transform-origin: 50% 50%;
24
+ }
25
+ .card-hover:hover {
26
+ transform: translateY(-5px);
27
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
28
+ }
29
+ .fade-in {
30
+ animation: fadeIn 0.5s ease-in;
31
+ }
32
+ @keyframes fadeIn {
33
+ from { opacity: 0; }
34
+ to { opacity: 1; }
35
+ }
36
+ .loading-dots:after {
37
+ content: '.';
38
+ animation: dots 1.5s steps(5, end) infinite;
39
+ }
40
+ @keyframes dots {
41
+ 0%, 20% { content: '.'; }
42
+ 40% { content: '..'; }
43
+ 60% { content: '...'; }
44
+ 80%, 100% { content: ''; }
45
+ }
46
+ @keyframes gradient {
47
+ 0% { background-position: 0% 50%; }
48
+ 50% { background-position: 100% 50%; }
49
+ 100% { background-position: 0% 50%; }
50
+ }
51
+ .gradient-bg {
52
+ background: linear-gradient(-45deg, #6366f1, #8b5cf6, #ec4899, #f43f5e);
53
+ background-size: 400% 400%;
54
+ animation: gradient 15s ease infinite;
55
+ }
56
+ .glow-text {
57
+ text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
58
+ }
59
+ .staggered-item {
60
+ opacity: 0;
61
+ transform: translateY(20px);
62
+ transition: all 0.6s ease;
63
+ }
64
+ .staggered-item.show {
65
+ opacity: 1;
66
+ transform: translateY(0);
67
+ }
68
+ .goal-card {
69
+ background: rgba(255, 255, 255, 0.1);
70
+ backdrop-filter: blur(10px);
71
+ border: 1px solid rgba(255, 255, 255, 0.2);
72
+ }
73
+ .loading-bar {
74
+ width: 0%;
75
+ transition: width 0.5s ease;
76
+ }
77
+ </style>
78
+ </head>
79
+ <body class="bg-gradient-to-br from-indigo-50 to-purple-50 min-h-screen">
80
+ <div class="container mx-auto px-4 py-8">
81
+ <!-- Header -->
82
+ <header class="text-center mb-12">
83
+ <div class="flex justify-center mb-4">
84
+ <div class="bg-gradient-to-r from-purple-500 to-indigo-600 p-3 rounded-full floating">
85
+ <i class="fas fa-bullseye text-white text-3xl"></i>
86
+ </div>
87
+ </div>
88
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-2">Vision Quest</h1>
89
+ <p class="text-xl text-gray-600">Your AI-powered goal generation engine</p>
90
+ </header>
91
+
92
+ <!-- Main App Container -->
93
+ <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
94
+ <!-- Progress Tracker -->
95
+ <div class="bg-indigo-600 text-white px-6 py-4 flex items-center justify-between">
96
+ <div class="flex items-center space-x-2">
97
+ <div class="w-8 h-8 rounded-full bg-white text-indigo-600 flex items-center justify-center font-bold">1</div>
98
+ <span>Input Your Vision</span>
99
+ </div>
100
+ <div class="flex items-center space-x-2 opacity-50">
101
+ <div class="w-8 h-8 rounded-full bg-indigo-500 text-white flex items-center justify-center font-bold">2</div>
102
+ <span>Generate Goals</span>
103
+ </div>
104
+ <div class="flex items-center space-x-2 opacity-50">
105
+ <div class="w-8 h-8 rounded-full bg-indigo-500 text-white flex items-center justify-center font-bold">3</div>
106
+ <span>Action Plan</span>
107
+ </div>
108
+ </div>
109
+
110
+ <!-- Input Section -->
111
+ <div class="p-6 md:p-8">
112
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
113
+ <!-- Vision Input -->
114
+ <div class="bg-gradient-to-br from-purple-50 to-indigo-50 p-6 rounded-xl">
115
+ <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
116
+ <i class="fas fa-eye mr-3 text-purple-500"></i> Your Vision/Why
117
+ </h2>
118
+ <textarea id="visionInput" class="w-full h-32 p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="What is your ultimate vision? Why does this matter to you?"></textarea>
119
+ <div class="mt-2 text-sm text-gray-500">Example: "To build a sustainable business that empowers creative professionals while maintaining work-life harmony."</div>
120
+ </div>
121
+
122
+ <!-- Values Input -->
123
+ <div class="bg-gradient-to-br from-blue-50 to-cyan-50 p-6 rounded-xl">
124
+ <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
125
+ <i class="fas fa-heart mr-3 text-blue-500"></i> Core Values (3-5)
126
+ </h2>
127
+ <div id="valuesContainer">
128
+ <div class="flex mb-2">
129
+ <input type="text" class="value-input flex-grow p-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Value 1">
130
+ <button class="remove-value bg-blue-500 text-white px-4 rounded-r-lg hover:bg-blue-600 transition"><i class="fas fa-check"></i></button>
131
+ </div>
132
+ </div>
133
+ <button id="addValueBtn" class="mt-2 bg-blue-100 text-blue-600 px-4 py-2 rounded-lg hover:bg-blue-200 transition flex items-center">
134
+ <i class="fas fa-plus mr-2"></i> Add Value
135
+ </button>
136
+ </div>
137
+ </div>
138
+
139
+ <!-- Income Planning -->
140
+ <div class="mt-8 bg-gradient-to-br from-amber-50 to-orange-50 p-6 rounded-xl">
141
+ <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
142
+ <i class="fas fa-money-bill-wave mr-3 text-amber-500"></i> Income Strategy
143
+ </h2>
144
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
145
+ <div>
146
+ <h3 class="text-lg font-semibold text-gray-700 mb-3">Current Income Streams</h3>
147
+ <div id="currentIncomeContainer">
148
+ <div class="flex mb-2">
149
+ <input type="text" class="income-input flex-grow p-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-amber-500 focus:border-transparent" placeholder="Income source">
150
+ <button class="remove-income bg-amber-500 text-white px-4 rounded-r-lg hover:bg-amber-600 transition"><i class="fas fa-check"></i></button>
151
+ </div>
152
+ </div>
153
+ <button id="addCurrentIncomeBtn" class="mt-2 bg-amber-100 text-amber-600 px-4 py-2 rounded-lg hover:bg-amber-200 transition flex items-center">
154
+ <i class="fas fa-plus mr-2"></i> Add Income Source
155
+ </button>
156
+ </div>
157
+
158
+ <div>
159
+ <h3 class="text-lg font-semibold text-gray-700 mb-3">Planned Income Streams</h3>
160
+ <div id="plannedIncomeContainer">
161
+ <div class="flex mb-2">
162
+ <input type="text" class="planned-input flex-grow p-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-amber-500 focus:border-transparent" placeholder="Planned income">
163
+ <button class="remove-planned bg-amber-500 text-white px-4 rounded-r-lg hover:bg-amber-600 transition"><i class="fas fa-check"></i></button>
164
+ </div>
165
+ </div>
166
+ <button id="addPlannedIncomeBtn" class="mt-2 bg-amber-100 text-amber-600 px-4 py-2 rounded-lg hover:bg-amber-200 transition flex items-center">
167
+ <i class="fas fa-plus mr-2"></i> Add Planned Income
168
+ </button>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Long-term Goals -->
174
+ <div class="mt-8 bg-gradient-to-br from-green-50 to-teal-50 p-6 rounded-xl">
175
+ <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
176
+ <i class="fas fa-mountain mr-3 text-green-500"></i> Long-term Goals
177
+ </h2>
178
+
179
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
180
+ <div>
181
+ <h3 class="text-lg font-semibold text-gray-700 mb-3">10-Year Goals</h3>
182
+ <div id="tenYearGoals">
183
+ <div class="flex mb-2">
184
+ <input type="text" class="goal-10y flex-grow p-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-green-500 focus:border-transparent" placeholder="Big audacious goal">
185
+ <button class="remove-10y bg-green-500 text-white px-4 rounded-r-lg hover:bg-green-600 transition"><i class="fas fa-check"></i></button>
186
+ </div>
187
+ </div>
188
+ <button id="addTenYearGoalBtn" class="mt-2 bg-green-100 text-green-600 px-4 py-2 rounded-lg hover:bg-green-200 transition flex items-center">
189
+ <i class="fas fa-plus mr-2"></i> Add Goal
190
+ </button>
191
+ </div>
192
+
193
+ <div>
194
+ <h3 class="text-lg font-semibold text-gray-700 mb-3">3-Year Goals</h3>
195
+ <div id="threeYearGoals">
196
+ <div class="flex mb-2">
197
+ <input type="text" class="goal-3y flex-grow p-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-green-500 focus:border-transparent" placeholder="Milestone goal">
198
+ <button class="remove-3y bg-green-500 text-white px-4 rounded-r-lg hover:bg-green-600 transition"><i class="fas fa-check"></i></button>
199
+ </div>
200
+ </div>
201
+ <button id="addThreeYearGoalBtn" class="mt-2 bg-green-100 text-green-600 px-4 py-2 rounded-lg hover:bg-green-200 transition flex items-center">
202
+ <i class="fas fa-plus mr-2"></i> Add Goal
203
+ </button>
204
+ </div>
205
+ </div>
206
+ </div>
207
+
208
+ <!-- Generate Button -->
209
+ <div class="mt-10 text-center">
210
+ <button id="generateBtn" class="bg-gradient-to-r from-purple-500 to-indigo-600 text-white px-8 py-4 rounded-full text-lg font-bold shadow-lg hover:shadow-xl transition-all transform hover:scale-105">
211
+ <i class="fas fa-magic mr-2"></i> Generate My Action Plan
212
+ </button>
213
+ </div>
214
+ </div>
215
+ </div>
216
+
217
+ <!-- Loading Screen (Initially Hidden) -->
218
+ <div id="loadingScreen" class="fixed inset-0 bg-black bg-opacity-90 z-50 flex flex-col items-center justify-center hidden">
219
+ <div class="text-center max-w-2xl px-6">
220
+ <div class="gradient-bg w-24 h-24 rounded-full flex items-center justify-center mx-auto mb-8">
221
+ <i class="fas fa-spinner fa-spin text-white text-4xl glow-text"></i>
222
+ </div>
223
+
224
+ <h2 class="text-3xl md:text-4xl font-bold text-white mb-4 glow-text">Crafting Your Vision</h2>
225
+ <p class="text-xl text-white mb-8 opacity-80">Our AI is carefully designing your personalized roadmap to success</p>
226
+
227
+ <div class="w-full bg-gray-800 rounded-full h-3 mb-6">
228
+ <div id="loadingProgress" class="loading-bar bg-gradient-to-r from-purple-400 to-indigo-500 h-3 rounded-full" style="width: 0%"></div>
229
+ </div>
230
+
231
+ <div class="grid grid-cols-3 gap-4 text-white text-sm">
232
+ <div class="staggered-item">
233
+ <div class="bg-indigo-900 bg-opacity-50 p-3 rounded-lg">
234
+ <i class="fas fa-brain text-indigo-300 mb-2"></i>
235
+ <p>Analyzing your vision</p>
236
+ </div>
237
+ </div>
238
+ <div class="staggered-item">
239
+ <div class="bg-purple-900 bg-opacity-50 p-3 rounded-lg">
240
+ <i class="fas fa-lightbulb text-purple-300 mb-2"></i>
241
+ <p>Generating strategic goals</p>
242
+ </div>
243
+ </div>
244
+ <div class="staggered-item">
245
+ <div class="bg-pink-900 bg-opacity-50 p-3 rounded-lg">
246
+ <i class="fas fa-chart-line text-pink-300 mb-2"></i>
247
+ <p>Optimizing income streams</p>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+
254
+ <!-- Results Section (Initially Hidden) -->
255
+ <div id="resultsSection" class="hidden mt-12 bg-gradient-to-br from-indigo-900 to-purple-900 rounded-2xl shadow-xl overflow-hidden fade-in text-white">
256
+ <div class="relative overflow-hidden">
257
+ <div class="absolute inset-0 bg-gradient-to-br from-indigo-500 to-purple-600 opacity-10"></div>
258
+ <div class="relative z-10">
259
+ <div class="bg-gradient-to-r from-indigo-800 to-purple-800 px-6 py-6 flex items-center justify-between">
260
+ <div class="flex items-center space-x-4">
261
+ <div class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center">
262
+ <i class="fas fa-check text-white"></i>
263
+ </div>
264
+ <h2 class="text-2xl font-bold">Your Vision Quest</h2>
265
+ </div>
266
+ <div class="flex space-x-2">
267
+ <button id="exportPdfBtn" class="bg-white bg-opacity-10 hover:bg-opacity-20 text-white px-4 py-2 rounded-lg flex items-center transition">
268
+ <i class="fas fa-download mr-2"></i> PDF
269
+ </button>
270
+ <button id="exportCsvBtn" class="bg-white bg-opacity-10 hover:bg-opacity-20 text-white px-4 py-2 rounded-lg flex items-center transition">
271
+ <i class="fas fa-file-csv mr-2"></i> CSV
272
+ </button>
273
+ </div>
274
+ </div>
275
+
276
+ <div class="p-6 md:p-8">
277
+ <!-- Identity Section -->
278
+ <div class="mb-12 goal-card p-6 rounded-xl relative overflow-hidden">
279
+ <div class="absolute inset-0 bg-gradient-to-br from-yellow-500 to-orange-500 opacity-10"></div>
280
+ <div class="relative z-10">
281
+ <div class="flex items-center mb-4">
282
+ <div class="w-12 h-12 rounded-full bg-yellow-500 bg-opacity-20 flex items-center justify-center mr-4">
283
+ <i class="fas fa-user-astronaut text-yellow-300 text-xl"></i>
284
+ </div>
285
+ <h3 class="text-xl font-bold">Identity Statement</h3>
286
+ </div>
287
+ <div id="identityOutput" class="text-lg bg-white bg-opacity-5 p-4 rounded-lg border border-white border-opacity-10 italic">
288
+ "I am a Visionary Executor who consistently takes aligned action toward meaningful goals."
289
+ </div>
290
+ </div>
291
+ </div>
292
+
293
+ <!-- Goals Timeline -->
294
+ <div class="mb-12">
295
+ <h3 class="text-2xl font-bold mb-6 flex items-center">
296
+ <i class="fas fa-map-marked-alt mr-3 text-indigo-300"></i> Your Goal Timeline
297
+ </h3>
298
+
299
+ <div class="relative">
300
+ <!-- Timeline line -->
301
+ <div class="absolute left-5 top-0 bottom-0 w-0.5 bg-indigo-700"></div>
302
+
303
+ <div class="space-y-8 pl-10">
304
+ <!-- 10 Year Goal -->
305
+ <div class="staggered-item relative">
306
+ <div class="absolute -left-10 top-4 w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center">
307
+ <i class="fas fa-mountain text-white"></i>
308
+ </div>
309
+ <div class="goal-card p-5 rounded-xl">
310
+ <div class="flex justify-between items-start mb-2">
311
+ <h4 class="text-lg font-semibold">10-Year Vision</h4>
312
+ <div class="text-xs bg-indigo-800 bg-opacity-50 px-2 py-1 rounded-full">Decade Goal</div>
313
+ </div>
314
+ <div id="tenYearGoalDisplay" class="text-gray-200">
315
+ Build a multi-million dollar business that empowers creative professionals worldwide.
316
+ </div>
317
+ </div>
318
+ </div>
319
+
320
+ <!-- 3 Year Goal -->
321
+ <div class="staggered-item relative">
322
+ <div class="absolute -left-10 top-4 w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center">
323
+ <i class="fas fa-flag text-white"></i>
324
+ </div>
325
+ <div class="goal-card p-5 rounded-xl">
326
+ <div class="flex justify-between items-start mb-2">
327
+ <h4 class="text-lg font-semibold">3-Year Milestone</h4>
328
+ <div class="text-xs bg-blue-800 bg-opacity-50 px-2 py-1 rounded-full">Strategic Goal</div>
329
+ </div>
330
+ <div id="threeYearGoalDisplay" class="text-gray-200">
331
+ Launch a profitable SaaS product with 10,000 active users.
332
+ </div>
333
+ </div>
334
+ </div>
335
+
336
+ <!-- 1 Year Goal -->
337
+ <div class="staggered-item relative">
338
+ <div class="absolute -left-10 top-4 w-8 h-8 rounded-full bg-gradient-to-br from-green-500 to-teal-500 flex items-center justify-center">
339
+ <i class="fas fa-calendar-star text-white"></i>
340
+ </div>
341
+ <div class="goal-card p-5 rounded-xl">
342
+ <div class="flex justify-between items-start mb-2">
343
+ <h4 class="text-lg font-semibold">1-Year Focus</h4>
344
+ <div class="text-xs bg-green-800 bg-opacity-50 px-2 py-1 rounded-full">Annual Goal</div>
345
+ </div>
346
+ <div id="oneYearGoal" class="text-gray-200">
347
+ Launch MVP of the product and acquire first 100 paying customers.
348
+ </div>
349
+ </div>
350
+ </div>
351
+
352
+ <!-- 90 Day Goal -->
353
+ <div class="staggered-item relative">
354
+ <div class="absolute -left-10 top-4 w-8 h-8 rounded-full bg-gradient-to-br from-amber-500 to-orange-500 flex items-center justify-center">
355
+ <i class="fas fa-fire text-white"></i>
356
+ </div>
357
+ <div class="goal-card p-5 rounded-xl">
358
+ <div class="flex justify-between items-start mb-2">
359
+ <h4 class="text-lg font-semibold">90-Day Sprint</h4>
360
+ <div class="text-xs bg-amber-800 bg-opacity-50 px-2 py-1 rounded-full">Quarterly Goal</div>
361
+ </div>
362
+ <div id="ninetyDayGoal" class="text-gray-200">
363
+ Complete product prototype and run first beta test with 20 users.
364
+ </div>
365
+ </div>
366
+ </div>
367
+
368
+ <!-- Monthly Goals -->
369
+ <div class="staggered-item relative">
370
+ <div class="absolute -left-10 top-4 w-8 h-8 rounded-full bg-gradient-to-br from-pink-500 to-rose-500 flex items-center justify-center">
371
+ <i class="fas fa-calendar-alt text-white"></i>
372
+ </div>
373
+ <div class="goal-card p-5 rounded-xl">
374
+ <div class="flex justify-between items-start mb-2">
375
+ <h4 class="text-lg font-semibold">Monthly Targets</h4>
376
+ <div class="text-xs bg-pink-800 bg-opacity-50 px-2 py-1 rounded-full">Action Plan</div>
377
+ </div>
378
+ <div id="monthlyGoals" class="text-gray-200">
379
+ <ul class="space-y-2">
380
+ <li class="flex items-start">
381
+ <span class="inline-block w-2 h-2 bg-pink-400 rounded-full mt-2 mr-2"></span>
382
+ <span>Month 1: Finalize product specifications</span>
383
+ </li>
384
+ <li class="flex items-start">
385
+ <span class="inline-block w-2 h-2 bg-pink-400 rounded-full mt-2 mr-2"></span>
386
+ <span>Month 2: Develop core features</span>
387
+ </li>
388
+ <li class="flex items-start">
389
+ <span class="inline-block w-2 h-2 bg-pink-400 rounded-full mt-2 mr-2"></span>
390
+ <span>Month 3: Conduct initial user testing</span>
391
+ </li>
392
+ </ul>
393
+ </div>
394
+ </div>
395
+ </div>
396
+ </div>
397
+ </div>
398
+ </div>
399
+
400
+ <!-- Income Strategy -->
401
+ <div class="mb-12 goal-card p-6 rounded-xl">
402
+ <div class="flex items-center mb-6">
403
+ <div class="w-12 h-12 rounded-full bg-amber-500 bg-opacity-20 flex items-center justify-center mr-4">
404
+ <i class="fas fa-coins text-amber-300 text-xl"></i>
405
+ </div>
406
+ <h3 class="text-xl font-bold">Income Strategy</h3>
407
+ </div>
408
+
409
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
410
+ <div>
411
+ <h4 class="font-semibold text-amber-200 mb-3">Current Income Streams</h4>
412
+ <ul id="currentIncomeDisplay" class="space-y-2">
413
+ <li class="flex items-center">
414
+ <span class="w-2 h-2 bg-amber-400 rounded-full mr-2"></span>
415
+ <span>Freelance design work</span>
416
+ </li>
417
+ <li class="flex items-center">
418
+ <span class="w-2 h-2 bg-amber-400 rounded-full mr-2"></span>
419
+ <span>Online course sales</span>
420
+ </li>
421
+ </ul>
422
+ </div>
423
+ <div>
424
+ <h4 class="font-semibold text-amber-200 mb-3">Planned Income Streams</h4>
425
+ <ul id="plannedIncomeDisplay" class="space-y-2">
426
+ <li class="flex items-center">
427
+ <span class="w-2 h-2 bg-amber-400 rounded-full mr-2"></span>
428
+ <span>SaaS product subscriptions</span>
429
+ </li>
430
+ <li class="flex items-center">
431
+ <span class="w-2 h-2 bg-amber-400 rounded-full mr-2"></span>
432
+ <span>Consulting services</span>
433
+ </li>
434
+ </ul>
435
+ </div>
436
+ </div>
437
+
438
+ <div>
439
+ <h4 class="font-semibold text-amber-200 mb-3">Revenue Growth Strategy</h4>
440
+ <div id="revenueStrategy" class="bg-white bg-opacity-5 p-4 rounded-lg border border-white border-opacity-10">
441
+ Focus on productizing services and building scalable income streams through digital products and automation. Prioritize recurring revenue models while maintaining consulting for high-touch clients.
442
+ </div>
443
+ </div>
444
+ </div>
445
+
446
+ <!-- Habits & Systems -->
447
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
448
+ <!-- Habits -->
449
+ <div class="goal-card p-6 rounded-xl">
450
+ <div class="flex items-center mb-4">
451
+ <div class="w-10 h-10 rounded-full bg-pink-500 bg-opacity-20 flex items-center justify-center mr-4">
452
+ <i class="fas fa-sync-alt text-pink-300"></i>
453
+ </div>
454
+ <h3 class="text-xl font-bold">Key Habits</h3>
455
+ </div>
456
+ <div id="habitsOutput" class="space-y-4">
457
+ <div class="flex items-start">
458
+ <div class="flex-shrink-0 h-6 w-6 rounded-full bg-pink-500 bg-opacity-20 text-pink-300 flex items-center justify-center mr-3 mt-1">
459
+ <i class="fas fa-check text-xs"></i>
460
+ </div>
461
+ <div class="text-gray-200">Daily 90-minute deep work session on product development</div>
462
+ </div>
463
+ <div class="flex items-start">
464
+ <div class="flex-shrink-0 h-6 w-6 rounded-full bg-pink-500 bg-opacity-20 text-pink-300 flex items-center justify-center mr-3 mt-1">
465
+ <i class="fas fa-check text-xs"></i>
466
+ </div>
467
+ <div class="text-gray-200">Weekly customer development interviews</div>
468
+ </div>
469
+ <div class="flex items-start">
470
+ <div class="flex-shrink-0 h-6 w-6 rounded-full bg-pink-500 bg-opacity-20 text-pink-300 flex items-center justify-center mr-3 mt-1">
471
+ <i class="fas fa-check text-xs"></i>
472
+ </div>
473
+ <div class="text-gray-200">Morning routine with meditation and planning</div>
474
+ </div>
475
+ </div>
476
+ </div>
477
+
478
+ <!-- Systems -->
479
+ <div class="goal-card p-6 rounded-xl">
480
+ <div class="flex items-center mb-4">
481
+ <div class="w-10 h-10 rounded-full bg-amber-500 bg-opacity-20 flex items-center justify-center mr-4">
482
+ <i class="fas fa-cogs text-amber-300"></i>
483
+ </div>
484
+ <h3 class="text-xl font-bold">Value Creation Systems</h3>
485
+ </div>
486
+ <div id="systemsOutput" class="space-y-4">
487
+ <div class="flex items-start">
488
+ <div class="flex-shrink-0 h-6 w-6 rounded-full bg-amber-500 bg-opacity-20 text-amber-300 flex items-center justify-center mr-3 mt-1">
489
+ <i class="fas fa-cog text-xs"></i>
490
+ </div>
491
+ <div class="text-gray-200">Product development sprint system (2-week cycles)</div>
492
+ </div>
493
+ <div class="flex items-start">
494
+ <div class="flex-shrink-0 h-6 w-6 rounded-full bg-amber-500 bg-opacity-20 text-amber-300 flex items-center justify-center mr-3 mt-1">
495
+ <i class="fas fa-cog text-xs"></i>
496
+ </div>
497
+ <div class="text-gray-200">Customer feedback collection and analysis process</div>
498
+ </div>
499
+ <div class="flex items-start">
500
+ <div class="flex-shrink-0 h-6 w-6 rounded-full bg-amber-500 bg-opacity-20 text-amber-300 flex items-center justify-center mr-3 mt-1">
501
+ <i class="fas fa-cog text-xs"></i>
502
+ </div>
503
+ <div class="text-gray-200">Personal energy management tracking</div>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </div>
508
+
509
+ <!-- Gamification -->
510
+ <div class="goal-card p-6 rounded-xl">
511
+ <div class="flex items-center mb-6">
512
+ <div class="w-12 h-12 rounded-full bg-purple-500 bg-opacity-20 flex items-center justify-center mr-4">
513
+ <i class="fas fa-trophy text-purple-300 text-xl"></i>
514
+ </div>
515
+ <h3 class="text-xl font-bold">Your Quest Progress</h3>
516
+ </div>
517
+
518
+ <div class="flex items-center mb-6">
519
+ <div class="w-full bg-gray-800 rounded-full h-4">
520
+ <div class="bg-gradient-to-r from-purple-400 to-indigo-500 h-4 rounded-full" style="width: 15%"></div>
521
+ </div>
522
+ <span class="ml-4 font-medium">15%</span>
523
+ </div>
524
+
525
+ <div class="grid grid-cols-3 gap-4 text-center mb-6">
526
+ <div class="staggered-item">
527
+ <div class="bg-white bg-opacity-5 p-4 rounded-lg border border-white border-opacity-10">
528
+ <div class="text-2xl font-bold text-indigo-300">3</div>
529
+ <div class="text-sm text-gray-300">Goals Set</div>
530
+ </div>
531
+ </div>
532
+ <div class="staggered-item">
533
+ <div class="bg-white bg-opacity-5 p-4 rounded-lg border border-white border-opacity-10">
534
+ <div class="text-2xl font-bold text-purple-300">0</div>
535
+ <div class="text-sm text-gray-300">Goals Completed</div>
536
+ </div>
537
+ </div>
538
+ <div class="staggered-item">
539
+ <div class="bg-white bg-opacity-5 p-4 rounded-lg border border-white border-opacity-10">
540
+ <div class="text-2xl font-bold text-pink-300">1</div>
541
+ <div class="text-sm text-gray-300">Badges Earned</div>
542
+ </div>
543
+ </div>
544
+ </div>
545
+
546
+ <div class="text-center">
547
+ <div class="inline-block bg-gradient-to-r from-purple-500 to-indigo-600 bg-opacity-20 p-4 rounded-xl border border-purple-400 border-opacity-30">
548
+ <div class="w-16 h-16 mx-auto mb-3 rounded-full bg-gradient-to-r from-purple-500 to-indigo-600 flex items-center justify-center">
549
+ <i class="fas fa-seedling text-white text-2xl"></i>
550
+ </div>
551
+ <h4 class="font-semibold text-purple-200">Next Badge: <span class="text-white">Vision Setter</span></h4>
552
+ <p class="text-sm text-purple-200 mt-1">Complete your first 90-day goal to unlock this badge!</p>
553
+ </div>
554
+ </div>
555
+ </div>
556
+ </div>
557
+ </div>
558
+ </div>
559
+ </div>
560
+ </div>
561
+
562
+ <script>
563
+ // Initialize jsPDF
564
+ const { jsPDF } = window.jspdf;
565
+
566
+ document.addEventListener('DOMContentLoaded', function() {
567
+ // API Key
568
+ const DEEPSEEK_API_KEY = 'sk-0cce68e321854d11b01ee9227147a12d';
569
+
570
+ // Track all inputs
571
+ let userInputs = {
572
+ vision: '',
573
+ values: [],
574
+ currentIncome: [],
575
+ plannedIncome: [],
576
+ tenYearGoals: [],
577
+ threeYearGoals: []
578
+ };
579
+
580
+ // Add Value Field
581
+ let valueCount = 1;
582
+ document.getElementById('addValueBtn').addEventListener('click', function() {
583
+ if (valueCount < 5) {
584
+ valueCount++;
585
+ const newValueField = document.createElement('div');
586
+ newValueField.className = 'flex mb-2';
587
+ newValueField.innerHTML = `
588
+ <input type="text" class="value-input flex-grow p-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Value ${valueCount}">
589
+ <button class="remove-value bg-blue-500 text-white px-4 rounded-r-lg hover:bg-blue-600 transition"><i class="fas fa-times"></i></button>
590
+ `;
591
+ document.getElementById('valuesContainer').appendChild(newValueField);
592
+
593
+ // Add remove functionality
594
+ newValueField.querySelector('.remove-value').addEventListener('click', function() {
595
+ newValueField.remove();
596
+ valueCount--;
597
+ });
598
+ } else {
599
+ alert('Maximum of 5 values allowed');
600
+ }
601
+ });
602
+
603
+ // Add Current Income Field
604
+ let currentIncomeCount = 1;
605
+ document.getElementById('addCurrentIncomeBtn').addEventListener('click', function() {
606
+ const newIncomeField = document.createElement('div');
607
+ newIncomeField.className = 'flex mb-2';
608
+ newIncomeField.innerHTML = `
609
+ <input type="text" class="income-input flex-grow p-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-amber-500 focus:border-transparent" placeholder="Income source ${currentIncomeCount}">
610
+ <button class="remove-income bg-amber-500 text-white px-4 rounded-r-lg hover:bg-amber-600 transition"><i class="fas fa-times"></i></button>
611
+ `;
612
+ document.getElementById('currentIncomeContainer').appendChild(newIncomeField);
613
+ currentIncomeCount++;
614
+
615
+ // Add remove functionality
616
+ newIncomeField.querySelector('.remove-income').addEventListener('click', function() {
617
+ newIncomeField.remove();
618
+ });
619
+ });
620
+
621
+ // Add Planned Income Field
622
+ let plannedIncomeCount = 1;
623
+ document.getElementById('addPlannedIncomeBtn').addEventListener('click', function() {
624
+ const newPlannedField = document.createElement('div');
625
+ newPlannedField.className = 'flex mb-2';
626
+ newPlannedField.innerHTML = `
627
+ <input type="text" class="planned-input flex-grow p-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-amber-500 focus:border-transparent" placeholder="Planned income ${plannedIncomeCount}">
628
+ <button class="remove-planned bg-amber-500 text-white px-4 rounded-r-lg hover:bg-amber-600 transition"><i class="fas fa-times"></i></button>
629
+ `;
630
+ document.getElementById('plannedIncomeContainer').appendChild(newPlannedField);
631
+ plannedIncomeCount++;
632
+
633
+ // Add remove functionality
634
+ newPlannedField.querySelector('.remove-planned').addEventListener('click', function() {
635
+ newPlannedField.remove();
636
+ });
637
+ });
638
+
639
+ // Add 10-Year Goal Field
640
+ let tenYearGoalCount = 1;
641
+ document.getElementById('addTenYearGoalBtn').addEventListener('click', function() {
642
+ if (tenYearGoalCount < 3) {
643
+ tenYearGoalCount++;
644
+ const newGoalField = document.createElement('div');
645
+ newGoalField.className = 'flex mb-2';
646
+ newGoalField.innerHTML = `
647
+ <input type="text" class="goal-10y flex-grow p-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-green-500 focus:border-transparent" placeholder="10-Year Goal ${tenYearGoalCount}">
648
+ <button class="remove-10y bg-green-500 text-white px-4 rounded-r-lg hover:bg-green-600 transition"><i class="fas fa-times"></i></button>
649
+ `;
650
+ document.getElementById('tenYearGoals').appendChild(newGoalField);
651
+
652
+ // Add remove functionality
653
+ newGoalField.querySelector('.remove-10y').addEventListener('click', function() {
654
+ newGoalField.remove();
655
+ tenYearGoalCount--;
656
+ });
657
+ } else {
658
+ alert('Maximum of 3 10-year goals allowed');
659
+ }
660
+ });
661
+
662
+ // Add 3-Year Goal Field
663
+ let threeYearGoalCount = 1;
664
+ document.getElementById('addThreeYearGoalBtn').addEventListener('click', function() {
665
+ if (threeYearGoalCount < 5) {
666
+ threeYearGoalCount++;
667
+ const newGoalField = document.createElement('div');
668
+ newGoalField.className = 'flex mb-2';
669
+ newGoalField.innerHTML = `
670
+ <input type="text" class="goal-3y flex-grow p-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-green-500 focus:border-transparent" placeholder="3-Year Goal ${threeYearGoalCount}">
671
+ <button class="remove-3y bg-green-500 text-white px-4 rounded-r-lg hover:bg-green-600 transition"><i class="fas fa-times"></i></button>
672
+ `;
673
+ document.getElementById('threeYearGoals').appendChild(newGoalField);
674
+
675
+ // Add remove functionality
676
+ newGoalField.querySelector('.remove-3y').addEventListener('click', function() {
677
+ newGoalField.remove();
678
+ threeYearGoalCount--;
679
+ });
680
+ } else {
681
+ alert('Maximum of 5 3-year goals allowed');
682
+ }
683
+ });
684
+
685
+ // Generate Action Plan with AI
686
+ document.getElementById('generateBtn').addEventListener('click', async function() {
687
+ // Collect all user inputs
688
+ userInputs.vision = document.getElementById('visionInput').value;
689
+
690
+ // Collect values
691
+ userInputs.values = [];
692
+ document.querySelectorAll('.value-input').forEach(input => {
693
+ if (input.value.trim() !== '') {
694
+ userInputs.values.push(input.value.trim());
695
+ }
696
+ });
697
+
698
+ // Collect current income
699
+ userInputs.currentIncome = [];
700
+ document.querySelectorAll('.income-input').forEach(input => {
701
+ if (input.value.trim() !== '') {
702
+ userInputs.currentIncome.push(input.value.trim());
703
+ }
704
+ });
705
+
706
+ // Collect planned income
707
+ userInputs.plannedIncome = [];
708
+ document.querySelectorAll('.planned-input').forEach(input => {
709
+ if (input.value.trim() !== '') {
710
+ userInputs.plannedIncome.push(input.value.trim());
711
+ }
712
+ });
713
+
714
+ // Collect 10-year goals
715
+ userInputs.tenYearGoals = [];
716
+ document.querySelectorAll('.goal-10y').forEach(input => {
717
+ if (input.value.trim() !== '') {
718
+ userInputs.tenYearGoals.push(input.value.trim());
719
+ }
720
+ });
721
+
722
+ // Collect 3-year goals
723
+ userInputs.threeYearGoals = [];
724
+ document.querySelectorAll('.goal-3y').forEach(input => {
725
+ if (input.value.trim() !== '') {
726
+ userInputs.threeYearGoals.push(input.value.trim());
727
+ }
728
+ });
729
+
730
+ // Validate inputs
731
+ if (!userInputs.vision || userInputs.values.length === 0) {
732
+ alert('Please enter your vision and at least one core value to continue');
733
+ return;
734
+ }
735
+
736
+ // Show loading screen
737
+ const loadingScreen = document.getElementById('loadingScreen');
738
+ loadingScreen.classList.remove('hidden');
739
+ document.body.style.overflow = 'hidden';
740
+
741
+ // Animate loading progress
742
+ const loadingProgress = document.getElementById('loadingProgress');
743
+ let progress = 0;
744
+ const progressInterval = setInterval(() => {
745
+ progress += Math.random() * 10;
746
+ if (progress > 90) progress = 90; // Don't go to 100% until API call completes
747
+ loadingProgress.style.width = `${progress}%`;
748
+ }, 500);
749
+
750
+ // Show staggered items
751
+ const staggeredItems = document.querySelectorAll('.staggered-item');
752
+ staggeredItems.forEach((item, index) => {
753
+ setTimeout(() => {
754
+ item.classList.add('show');
755
+ }, index * 300);
756
+ });
757
+
758
+ try {
759
+ // Call DeepSeek API to generate the identity statement
760
+ const identityPrompt = `Create an "I am" identity statement based on this vision: "${userInputs.vision}" and these values: ${userInputs.values.join(', ')}. The statement should be in first person starting with "I am" and reflect the core identity needed to achieve these goals. Make it inspiring and specific.`;
761
+ const identityResponse = await callDeepSeekAPI(identityPrompt);
762
+
763
+ // Generate goals
764
+ const goalsPrompt = `Based on this vision: "${userInputs.vision}", these values: ${userInputs.values.join(', ')}, and these long-term goals (10-year: ${userInputs.tenYearGoals.join('; ')}, 3-year: ${userInputs.threeYearGoals.join('; ')}), create specific, measurable goals for:
765
+ 1. 10-year vision (single most ambitious goal)
766
+ 2. 3-year milestone (key strategic goal)
767
+ 3. 1-year goal (single most important goal)
768
+ 4. 90-day goal (critical milestone)
769
+ 5. 3 monthly goals (as bullet points)
770
+ Format as JSON with keys: tenYearGoal, threeYearGoal, oneYearGoal, ninetyDayGoal, monthlyGoals (array).`;
771
+ const goalsResponse = await callDeepSeekAPI(goalsPrompt);
772
+ const goals = parseJSONResponse(goalsResponse);
773
+
774
+ // Generate habits and systems
775
+ const habitsPrompt = `Suggest 3 key daily/weekly habits that would help achieve these goals: ${goals.oneYearGoal}, ${goals.ninetyDayGoal}. Format as bullet points.`;
776
+ const habitsResponse = await callDeepSeekAPI(habitsPrompt);
777
+
778
+ const systemsPrompt = `Suggest 3 systems or processes that would help achieve these goals: ${goals.oneYearGoal}, ${goals.ninetyDayGoal}. Format as bullet points with cog icons.`;
779
+ const systemsResponse = await callDeepSeekAPI(systemsPrompt);
780
+
781
+ // Generate revenue strategy
782
+ const revenuePrompt = `Create a revenue growth strategy based on current income streams: ${userInputs.currentIncome.join(', ')}, and planned income streams: ${userInputs.plannedIncome.join(', ')}. Provide a concise paragraph with strategic insights.`;
783
+ const revenueResponse = await callDeepSeekAPI(revenuePrompt);
784
+
785
+ // Complete loading animation
786
+ clearInterval(progressInterval);
787
+ loadingProgress.style.width = '100%';
788
+
789
+ // Wait a moment for the animation to complete
790
+ await new Promise(resolve => setTimeout(resolve, 500));
791
+
792
+ // Hide loading screen
793
+ loadingScreen.classList.add('hidden');
794
+ document.body.style.overflow = '';
795
+
796
+ // Update results with all generated content
797
+ document.getElementById('identityOutput').textContent = identityResponse;
798
+
799
+ if (goals.tenYearGoal) {
800
+ document.getElementById('tenYearGoalDisplay').textContent = goals.tenYearGoal;
801
+ }
802
+ if (goals.threeYearGoal) {
803
+ document.getElementById('threeYearGoalDisplay').textContent = goals.threeYearGoal;
804
+ }
805
+ if (goals.oneYearGoal) {
806
+ document.getElementById('oneYearGoal').textContent = goals.oneYearGoal;
807
+ }
808
+ if (goals.ninetyDayGoal) {
809
+ document.getElementById('ninetyDayGoal').textContent = goals.ninetyDayGoal;
810
+ }
811
+ if (goals.monthlyGoals) {
812
+ const monthlyList = goals.monthlyGoals.map(goal => `
813
+ <li class="flex items-start">
814
+ <span class="inline-block w-2 h-2 bg-pink-400 rounded-full mt-2 mr-2"></span>
815
+ <span>${goal}</span>
816
+ </li>
817
+ `).join('');
818
+ document.getElementById('monthlyGoals').innerHTML = `<ul class="space-y-2">${monthlyList}</ul>`;
819
+ }
820
+
821
+ document.getElementById('habitsOutput').innerHTML = formatAsChecklist(habitsResponse);
822
+ document.getElementById('systemsOutput').innerHTML = formatAsSystems(systemsResponse);
823
+ document.getElementById('revenueStrategy').textContent = revenueResponse;
824
+
825
+ // Update income displays
826
+ document.getElementById('currentIncomeDisplay').innerHTML = userInputs.currentIncome.map(i => `
827
+ <li class="flex items-center">
828
+ <span class="w-2 h-2 bg-amber-400 rounded-full mr-2"></span>
829
+ <span>${i}</span>
830
+ </li>
831
+ `).join('');
832
+ document.getElementById('plannedIncomeDisplay').innerHTML = userInputs.plannedIncome.map(i => `
833
+ <li class="flex items-center">
834
+ <span class="w-2 h-2 bg-amber-400 rounded-full mr-2"></span>
835
+ <span>${i}</span>
836
+ </li>
837
+ `).join('');
838
+
839
+ // Show results section
840
+ document.getElementById('resultsSection').classList.remove('hidden');
841
+
842
+ // Animate in staggered items in results
843
+ setTimeout(() => {
844
+ const resultStaggeredItems = document.querySelectorAll('#resultsSection .staggered-item');
845
+ resultStaggeredItems.forEach((item, index) => {
846
+ setTimeout(() => {
847
+ item.classList.add('show');
848
+ }, index * 200);
849
+ });
850
+ }, 100);
851
+
852
+ // Scroll to results
853
+ document.getElementById('resultsSection').scrollIntoView({ behavior: 'smooth' });
854
+
855
+ } catch (error) {
856
+ console.error('Error generating plan:', error);
857
+ alert('There was an error generating your plan. Please try again.');
858
+
859
+ // Hide loading screen
860
+ loadingScreen.classList.add('hidden');
861
+ document.body.style.overflow = '';
862
+ }
863
+ });
864
+
865
+ // Export to PDF
866
+ document.getElementById('exportPdfBtn').addEventListener('click', function() {
867
+ const doc = new jsPDF();
868
+
869
+ // Title
870
+ doc.setFontSize(22);
871
+ doc.setTextColor(55, 65, 81); // gray-800
872
+ doc.text('Vision Quest - Your Goal Roadmap', 105, 20, { align: 'center' });
873
+
874
+ // Identity Section
875
+ doc.setFontSize(16);
876
+ doc.setTextColor(17, 24, 39); // gray-900
877
+ doc.text('Identity Statement', 15, 40);
878
+ doc.setFontSize(12);
879
+ doc.setTextColor(55, 65, 81); // gray-700
880
+ doc.text(document.getElementById('identityOutput').textContent, 15, 50, { maxWidth: 180 });
881
+
882
+ // Goals
883
+ doc.setFontSize(16);
884
+ doc.setTextColor(17, 24, 39);
885
+ doc.text('Your Goals', 15, 70);
886
+
887
+ doc.setFontSize(12);
888
+ doc.setTextColor(55, 65, 81);
889
+ doc.text('10-Year Vision:', 15, 80);
890
+ doc.text(document.getElementById('tenYearGoalDisplay').textContent, 25, 85, { maxWidth: 170 });
891
+
892
+ doc.text('3-Year Milestone:', 15, 100);
893
+ doc.text(document.getElementById('threeYearGoalDisplay').textContent, 25, 105, { maxWidth: 170 });
894
+
895
+ doc.text('1-Year Goal:', 15, 120);
896
+ doc.text(document.getElementById('oneYearGoal').textContent, 25, 125, { maxWidth: 170 });
897
+
898
+ doc.text('90-Day Goal:', 15, 140);
899
+ doc.text(document.getElementById('ninetyDayGoal').textContent, 25, 145, { maxWidth: 170 });
900
+
901
+ doc.text('Monthly Goals:', 15, 160);
902
+ const monthlyGoals = Array.from(document.getElementById('monthlyGoals').querySelectorAll('li')).map(li => li.textContent.trim());
903
+ monthlyGoals.forEach((goal, i) => {
904
+ doc.text(`• ${goal}`, 25, 165 + (i * 5), { maxWidth: 170 });
905
+ });
906
+
907
+ // Income Strategy
908
+ doc.setFontSize(16);
909
+ doc.setTextColor(17, 24, 39);
910
+ doc.text('Income Strategy', 15, 190);
911
+
912
+ doc.setFontSize(12);
913
+ doc.setTextColor(55, 65, 81);
914
+ doc.text('Current Income Streams:', 15, 200);
915
+ userInputs.currentIncome.forEach((income, i) => {
916
+ doc.text(`• ${income}`, 20, 205 + (i * 5), { maxWidth: 170 });
917
+ });
918
+
919
+ doc.text('Planned Income Streams:', 15, 220);
920
+ userInputs.plannedIncome.forEach((income, i) => {
921
+ doc.text(`• ${income}`, 20, 225 + (i * 5), { maxWidth: 170 });
922
+ });
923
+
924
+ doc.text('Revenue Growth Strategy:', 15, 240);
925
+ doc.text(document.getElementById('revenueStrategy').textContent, 20, 245, { maxWidth: 170 });
926
+
927
+ // Habits & Systems
928
+ doc.setFontSize(16);
929
+ doc.setTextColor(17, 24, 39);
930
+ doc.text('Habits & Systems', 15, 270);
931
+
932
+ doc.setFontSize(12);
933
+ doc.setTextColor(55, 65, 81);
934
+ doc.text('Key Habits:', 15, 280);
935
+ const habits = Array.from(document.getElementById('habitsOutput').querySelectorAll('div')).map(div => div.textContent.trim());
936
+ habits.forEach((habit, i) => {
937
+ doc.text(`• ${habit}`, 20, 285 + (i * 5), { maxWidth: 170 });
938
+ });
939
+
940
+ doc.text('Value Creation Systems:', 15, 300);
941
+ const systems = Array.from(document.getElementById('systemsOutput').querySelectorAll('div')).map(div => div.textContent.trim());
942
+ systems.forEach((system, i) => {
943
+ doc.text(`• ${system}`, 20, 305 + (i * 5), { maxWidth: 170 });
944
+ });
945
+
946
+ // Save the PDF
947
+ doc.save('VisionQuest-Plan.pdf');
948
+ });
949
+
950
+ // Export to CSV
951
+ document.getElementById('exportCsvBtn').addEventListener('click', function() {
952
+ // Prepare CSV content
953
+ let csvContent = "Category,Item\n";
954
+
955
+ // Add identity
956
+ csvContent += `Identity,"${document.getElementById('identityOutput').textContent}"\n`;
957
+
958
+ // Add goals
959
+ csvContent += `10-Year Vision,"${document.getElementById('tenYearGoalDisplay').textContent}"\n`;
960
+ csvContent += `3-Year Milestone,"${document.getElementById('threeYearGoalDisplay').textContent}"\n`;
961
+ csvContent += `1-Year Goal,"${document.getElementById('oneYearGoal').textContent}"\n`;
962
+ csvContent += `90-Day Goal,"${document.getElementById('ninetyDayGoal').textContent}"\n`;
963
+
964
+ const monthlyGoals = Array.from(document.getElementById('monthlyGoals').querySelectorAll('li')).map(li => li.textContent.trim());
965
+ monthlyGoals.forEach(goal => {
966
+ csvContent += `Monthly Goal,"${goal}"\n`;
967
+ });
968
+
969
+ // Add income
970
+ userInputs.currentIncome.forEach(income => {
971
+ csvContent += `Current Income,"${income}"\n`;
972
+ });
973
+
974
+ userInputs.plannedIncome.forEach(income => {
975
+ csvContent += `Planned Income,"${income}"\n`;
976
+ });
977
+
978
+ csvContent += `Revenue Strategy,"${document.getElementById('revenueStrategy').textContent}"\n`;
979
+
980
+ // Add habits
981
+ const habits = Array.from(document.getElementById('habitsOutput').querySelectorAll('div')).map(div => div.textContent.trim());
982
+ habits.forEach(habit => {
983
+ csvContent += `Key Habit,"${habit}"\n`;
984
+ });
985
+
986
+ // Add systems
987
+ const systems = Array.from(document.getElementById('systemsOutput').querySelectorAll('div')).map(div => div.textContent.trim());
988
+ systems.forEach(system => {
989
+ csvContent += `Value System,"${system}"\n`;
990
+ });
991
+
992
+ // Create download link
993
+ const encodedUri = encodeURI("data:text/csv;charset=utf-8," + csvContent);
994
+ const link = document.createElement("a");
995
+ link.setAttribute("href", encodedUri);
996
+ link.setAttribute("download", "VisionQuest-Plan.csv");
997
+ document.body.appendChild(link);
998
+ link.click();
999
+ document.body.removeChild(link);
1000
+ });
1001
+
1002
+ // Helper function to call DeepSeek API
1003
+ async function callDeepSeekAPI(prompt) {
1004
+ const response = await fetch('https://api.deepseek.com/v1/chat/completions', {
1005
+ method: 'POST',
1006
+ headers: {
1007
+ 'Content-Type': 'application/json',
1008
+ 'Authorization': `Bearer ${DEEPSEEK_API_KEY}`
1009
+ },
1010
+ body: JSON.stringify({
1011
+ model: "deepseek-chat",
1012
+ messages: [
1013
+ {
1014
+ role: "system",
1015
+ content: "You are a helpful goal-setting assistant that helps people create clear, actionable plans to achieve their vision. Provide concise, practical advice."
1016
+ },
1017
+ {
1018
+ role: "user",
1019
+ content: prompt
1020
+ }
1021
+ ],
1022
+ temperature: 0.7,
1023
+ max_tokens: 1000
1024
+ })
1025
+ });
1026
+
1027
+ if (!response.ok) {
1028
+ throw new Error(`API request failed with status ${response.status}`);
1029
+ }
1030
+
1031
+ const data = await response.json();
1032
+ return data.choices[0].message.content.trim();
1033
+ }
1034
+
1035
+ // Helper function to parse JSON responses from AI
1036
+ function parseJSONResponse(response) {
1037
+ try {
1038
+ // Try to find JSON in the response
1039
+ const jsonStart = response.indexOf('{');
1040
+ const jsonEnd = response.lastIndexOf('}') + 1;
1041
+ const jsonString = response.slice(jsonStart, jsonEnd);
1042
+ return JSON.parse(jsonString);
1043
+ } catch (e) {
1044
+ console.error('Error parsing JSON response:', e);
1045
+ // Fallback to manual parsing if JSON is malformed
1046
+ const result = {};
1047
+
1048
+ // Extract 10-year goal
1049
+ const tenYearMatch = response.match(/10-year vision[:\-]?\s*(.+)/i);
1050
+ if (tenYearMatch) result.tenYearGoal = tenYearMatch[1].trim();
1051
+
1052
+ // Extract 3-year goal
1053
+ const threeYearMatch = response.match(/3-year milestone[:\-]?\s*(.+)/i);
1054
+ if (threeYearMatch) result.threeYearGoal = threeYearMatch[1].trim();
1055
+
1056
+ // Extract 1-year goal
1057
+ const oneYearMatch = response.match(/1-year goal[:\-]?\s*(.+)/i);
1058
+ if (oneYearMatch) result.oneYearGoal = oneYearMatch[1].trim();
1059
+
1060
+ // Extract 90-day goal
1061
+ const ninetyDayMatch = response.match(/90-day goal[:\-]?\s*(.+)/i);
1062
+ if (ninetyDayMatch) result.ninetyDayGoal = ninetyDayMatch[1].trim();
1063
+
1064
+ // Extract monthly goals
1065
+ const monthlyMatches = response.match(/monthly goals?[:\-]?\s*([\s\S]+?)(?=\n\n|\n$|$)/i);
1066
+ if (monthlyMatches) {
1067
+ const monthlyLines = monthlyMatches[1].split('\n').filter(line => line.trim() !== '');
1068
+ result.monthlyGoals = monthlyLines.map(line => line.replace(/^\s*[\-•]\s*/, '').trim());
1069
+ }
1070
+
1071
+ return result;
1072
+ }
1073
+ }
1074
+
1075
+ // Format AI response as checklist
1076
+ function formatAsChecklist(text) {
1077
+ const lines = text.split('\n').filter(line => line.trim() !== '');
1078
+ return lines.map(line => {
1079
+ const content = line.replace(/^\s*[\-•]\s*/, '').trim();
1080
+ return `
1081
+ <div class="flex items-start">
1082
+ <div class="flex-shrink-0 h-6 w-6 rounded-full bg-pink-500 bg-opacity-20 text-pink-300 flex items-center justify-center mr-3 mt-1">
1083
+ <i class="fas fa-check text-xs"></i>
1084
+ </div>
1085
+ <div class="text-gray-200">${content}</div>
1086
+ </div>
1087
+ `;
1088
+ }).join('');
1089
+ }
1090
+
1091
+ // Format AI response as systems with cog icons
1092
+ function formatAsSystems(text) {
1093
+ const lines = text.split('\n').filter(line => line.trim() !== '');
1094
+ return lines.map(line => {
1095
+ const content = line.replace(/^\s*[\-•]\s*/, '').trim();
1096
+ return `
1097
+ <div class="flex items-start">
1098
+ <div class="flex-shrink-0 h-6 w-6 rounded-full bg-amber-500 bg-opacity-20 text-amber-300 flex items-center justify-center mr-3 mt-1">
1099
+ <i class="fas fa-cog text-xs"></i>
1100
+ </div>
1101
+ <div class="text-gray-200">${content}</div>
1102
+ </div>
1103
+ `;
1104
+ }).join('');
1105
+ }
1106
+ });
1107
+ </script>
1108
+ <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-values-v2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1109
+ </html>
prompts.txt ADDED
File without changes