Hugging Face's logo

Spaces:
JayStormX8
/
vision-v3-with-loading-correct
Running

App Files Community
JayStormX8 commited on
Commit
735f0be
·
verified ·
1 Parent(s): 7782b2d

Make the loading screens and progress take 60 seconds - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +1211 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Vision V3 With Loading Correct
3
- emoji: ⚡
4
- colorFrom: indigo
5
  colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: vision-v3-with-loading-correct
3
+ emoji: 🐳
4
+ colorFrom: purple
5
  colorTo: red
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,1211 @@
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 gradientFlow {
47
+ 0% { background-position: 0% 50%; }
48
+ 50% { background-position: 100% 50%; }
49
+ 100% { background-position: 0% 50%; }
50
+ }
51
+ .gradient-flow {
52
+ background-size: 200% 200%;
53
+ animation: gradientFlow 8s ease infinite;
54
+ }
55
+ @keyframes shimmer {
56
+ 0% { background-position: -1000px 0; }
57
+ 100% { background-position: 1000px 0; }
58
+ }
59
+ .shimmer {
60
+ background: linear-gradient(to right, #f0f0f0 8%, #e0e0e0 18%, #f0f0f0 33%);
61
+ background-size: 1000px 100%;
62
+ animation: shimmer 2s infinite linear;
63
+ }
64
+ .goal-card {
65
+ transition: all 0.3s ease;
66
+ transform-style: preserve-3d;
67
+ }
68
+ .goal-card:hover {
69
+ transform: perspective(1000px) rotateY(10deg) scale(1.02);
70
+ }
71
+ .goal-timeline {
72
+ position: relative;
73
+ }
74
+ .goal-timeline::before {
75
+ content: '';
76
+ position: absolute;
77
+ top: 0;
78
+ left: 24px;
79
+ height: 100%;
80
+ width: 2px;
81
+ background: linear-gradient(to bottom, #8b5cf6, #3b82f6, #10b981);
82
+ }
83
+ .goal-timeline-item {
84
+ position: relative;
85
+ padding-left: 56px;
86
+ margin-bottom: 30px;
87
+ }
88
+ .goal-timeline-item::before {
89
+ content: '';
90
+ position: absolute;
91
+ left: 20px;
92
+ top: 0;
93
+ width: 12px;
94
+ height: 12px;
95
+ border-radius: 50%;
96
+ background: #8b5cf6;
97
+ z-index: 1;
98
+ }
99
+ .goal-timeline-item:nth-child(2)::before {
100
+ background: #3b82f6;
101
+ }
102
+ .goal-timeline-item:nth-child(3)::before {
103
+ background: #10b981;
104
+ }
105
+ </style>
106
+ </head>
107
+ <body class="bg-gradient-to-br from-indigo-50 to-purple-50 min-h-screen">
108
+ <div class="container mx-auto px-4 py-8">
109
+ <!-- Header -->
110
+ <header class="text-center mb-12">
111
+ <div class="flex justify-center mb-4">
112
+ <div class="bg-gradient-to-r from-purple-500 to-indigo-600 p-3 rounded-full floating">
113
+ <i class="fas fa-bullseye text-white text-3xl"></i>
114
+ </div>
115
+ </div>
116
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-2">Vision Quest</h1>
117
+ <p class="text-xl text-gray-600">Your AI-powered goal generation engine</p>
118
+ </header>
119
+
120
+ <!-- Main App Container -->
121
+ <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
122
+ <!-- Progress Tracker -->
123
+ <div class="bg-indigo-600 text-white px-6 py-4 flex items-center justify-between">
124
+ <div class="flex items-center space-x-2">
125
+ <div class="w-8 h-8 rounded-full bg-white text-indigo-600 flex items-center justify-center font-bold">1</div>
126
+ <span>Input Your Vision</span>
127
+ </div>
128
+ <div class="flex items-center space-x-2 opacity-50">
129
+ <div class="w-8 h-8 rounded-full bg-indigo-500 text-white flex items-center justify-center font-bold">2</div>
130
+ <span>Generate Goals</span>
131
+ </div>
132
+ <div class="flex items-center space-x-2 opacity-50">
133
+ <div class="w-8 h-8 rounded-full bg-indigo-500 text-white flex items-center justify-center font-bold">3</div>
134
+ <span>Action Plan</span>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- Input Section -->
139
+ <div class="p-6 md:p-8">
140
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
141
+ <!-- Vision Input -->
142
+ <div class="bg-gradient-to-br from-purple-50 to-indigo-50 p-6 rounded-xl">
143
+ <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
144
+ <i class="fas fa-eye mr-3 text-purple-500"></i> Your Vision/Why
145
+ </h2>
146
+ <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>
147
+ <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>
148
+ </div>
149
+
150
+ <!-- Values Input -->
151
+ <div class="bg-gradient-to-br from-blue-50 to-cyan-50 p-6 rounded-xl">
152
+ <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
153
+ <i class="fas fa-heart mr-3 text-blue-500"></i> Core Values (3-5)
154
+ </h2>
155
+ <div id="valuesContainer">
156
+ <div class="flex mb-2">
157
+ <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">
158
+ <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>
159
+ </div>
160
+ </div>
161
+ <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">
162
+ <i class="fas fa-plus mr-2"></i> Add Value
163
+ </button>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Income Planning -->
168
+ <div class="mt-8 bg-gradient-to-br from-amber-50 to-orange-50 p-6 rounded-xl">
169
+ <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
170
+ <i class="fas fa-money-bill-wave mr-3 text-amber-500"></i> Income Strategy
171
+ </h2>
172
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
173
+ <div>
174
+ <h3 class="text-lg font-semibold text-gray-700 mb-3">Current Income Streams</h3>
175
+ <div id="currentIncomeContainer">
176
+ <div class="flex mb-2">
177
+ <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">
178
+ <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>
179
+ </div>
180
+ </div>
181
+ <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">
182
+ <i class="fas fa-plus mr-2"></i> Add Income Source
183
+ </button>
184
+ </div>
185
+
186
+ <div>
187
+ <h3 class="text-lg font-semibold text-gray-700 mb-3">Planned Income Streams</h3>
188
+ <div id="plannedIncomeContainer">
189
+ <div class="flex mb-2">
190
+ <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">
191
+ <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>
192
+ </div>
193
+ </div>
194
+ <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">
195
+ <i class="fas fa-plus mr-2"></i> Add Planned Income
196
+ </button>
197
+ </div>
198
+ </div>
199
+ </div>
200
+
201
+ <!-- Long-term Goals -->
202
+ <div class="mt-8 bg-gradient-to-br from-green-50 to-teal-50 p-6 rounded-xl">
203
+ <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
204
+ <i class="fas fa-mountain mr-3 text-green-500"></i> Long-term Goals
205
+ </h2>
206
+
207
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
208
+ <div>
209
+ <h3 class="text-lg font-semibold text-gray-700 mb-3">10-Year Goals</h3>
210
+ <div id="tenYearGoals">
211
+ <div class="flex mb-2">
212
+ <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">
213
+ <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>
214
+ </div>
215
+ </div>
216
+ <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">
217
+ <i class="fas fa-plus mr-2"></i> Add Goal
218
+ </button>
219
+ </div>
220
+
221
+ <div>
222
+ <h3 class="text-lg font-semibold text-gray-700 mb-3">3-Year Goals</h3>
223
+ <div id="threeYearGoals">
224
+ <div class="flex mb-2">
225
+ <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">
226
+ <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>
227
+ </div>
228
+ </div>
229
+ <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">
230
+ <i class="fas fa-plus mr-2"></i> Add Goal
231
+ </button>
232
+ </div>
233
+ </div>
234
+ </div>
235
+
236
+ <!-- Generate Button -->
237
+ <div class="mt-10 text-center">
238
+ <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">
239
+ <i class="fas fa-magic mr-2"></i> Generate My Action Plan
240
+ </button>
241
+ </div>
242
+ </div>
243
+ </div>
244
+
245
+ <!-- Loading Screen (Initially Hidden) -->
246
+ <div id="loadingScreen" class="hidden fixed inset-0 bg-black bg-opacity-70 z-50 flex flex-col items-center justify-center p-4">
247
+ <div class="w-full max-w-2xl bg-white rounded-2xl shadow-2xl overflow-hidden">
248
+ <div class="gradient-flow bg-gradient-to-r from-purple-500 via-indigo-500 to-blue-500 p-6 text-center">
249
+ <h2 class="text-3xl font-bold text-white mb-2">Crafting Your Vision</h2>
250
+ <p class="text-white opacity-90">Your personalized roadmap is being generated with AI</p>
251
+ </div>
252
+
253
+ <div class="p-8">
254
+ <div class="flex justify-center mb-8">
255
+ <div class="relative w-32 h-32">
256
+ <svg class="w-full h-full" viewBox="0 0 100 100">
257
+ <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
258
+ <circle class="text-indigo-600 progress-ring__circle" stroke-width="8" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
259
+ </svg>
260
+ <div class="absolute inset-0 flex items-center justify-center">
261
+ <span id="progressPercent" class="text-2xl font-bold text-indigo-600">0%</span>
262
+ </div>
263
+ </div>
264
+ </div>
265
+
266
+ <div class="space-y-6">
267
+ <div class="flex items-center">
268
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-4">
269
+ <i class="fas fa-lightbulb"></i>
270
+ </div>
271
+ <div class="flex-1">
272
+ <div class="flex justify-between mb-1">
273
+ <span class="text-sm font-medium text-gray-700">Analyzing your vision</span>
274
+ <span id="visionProgress" class="text-sm font-medium text-indigo-600">0%</span>
275
+ </div>
276
+ <div class="w-full bg-gray-200 rounded-full h-2">
277
+ <div id="visionProgressBar" class="bg-indigo-600 h-2 rounded-full" style="width: 0%"></div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+
282
+ <div class="flex items-center">
283
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-4">
284
+ <i class="fas fa-bullseye"></i>
285
+ </div>
286
+ <div class="flex-1">
287
+ <div class="flex justify-between mb-1">
288
+ <span class="text-sm font-medium text-gray-700">Generating goals</span>
289
+ <span id="goalsProgress" class="text-sm font-medium text-blue-600">0%</span>
290
+ </div>
291
+ <div class="w-full bg-gray-200 rounded-full h-2">
292
+ <div id="goalsProgressBar" class="bg-blue-600 h-2 rounded-full" style="width: 0%"></div>
293
+ </div>
294
+ </div>
295
+ </div>
296
+
297
+ <div class="flex items-center">
298
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-4">
299
+ <i class="fas fa-tasks"></i>
300
+ </div>
301
+ <div class="flex-1">
302
+ <div class="flex justify-between mb-1">
303
+ <span class="text-sm font-medium text-gray-700">Creating action plan</span>
304
+ <span id="actionProgress" class="text-sm font-medium text-green-600">0%</span>
305
+ </div>
306
+ <div class="w-full bg-gray-200 rounded-full h-2">
307
+ <div id="actionProgressBar" class="bg-green-600 h-2 rounded-full" style="width: 0%"></div>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </div>
312
+
313
+ <div class="mt-8 text-center">
314
+ <p id="loadingMessage" class="text-gray-600 italic">"Great things are done by a series of small things brought together." - Vincent Van Gogh</p>
315
+ </div>
316
+ </div>
317
+ </div>
318
+ </div>
319
+
320
+ <!-- Results Section (Initially Hidden) -->
321
+ <div id="resultsSection" class="hidden mt-12 bg-white rounded-2xl shadow-xl overflow-hidden fade-in">
322
+ <div class="bg-indigo-600 text-white px-6 py-4 flex items-center justify-between">
323
+ <div class="flex items-center space-x-2">
324
+ <div class="w-8 h-8 rounded-full bg-white text-indigo-600 flex items-center justify-center font-bold">1</div>
325
+ <span>Input Your Vision</span>
326
+ </div>
327
+ <div class="flex items-center space-x-2">
328
+ <div class="w-8 h-8 rounded-full bg-white text-indigo-600 flex items-center justify-center font-bold">2</div>
329
+ <span>Generate Goals</span>
330
+ </div>
331
+ <div class="flex items-center space-x-2 opacity-50">
332
+ <div class="w-8 h-8 rounded-full bg-indigo-500 text-white flex items-center justify-center font-bold">3</div>
333
+ <span>Action Plan</span>
334
+ </div>
335
+ </div>
336
+
337
+ <div class="p-6 md:p-8">
338
+ <h2 class="text-3xl font-bold text-gray-800 mb-6 text-center">Your Custom Goal Roadmap</h2>
339
+
340
+ <!-- Identity Section -->
341
+ <div class="mb-10 bg-gradient-to-br from-yellow-50 to-orange-50 p-6 rounded-xl">
342
+ <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
343
+ <i class="fas fa-user-shield mr-3 text-yellow-500"></i> Identity Statement
344
+ </h3>
345
+ <div id="identityOutput" class="text-lg text-gray-700 italic">"I am a Visionary Executor who consistently takes aligned action toward meaningful goals."</div>
346
+ </div>
347
+
348
+ <!-- Goals Showcase -->
349
+ <div class="mb-10">
350
+ <h3 class="text-2xl font-bold text-gray-800 mb-6 text-center">Your Goal Timeline</h3>
351
+
352
+ <div class="goal-timeline">
353
+ <!-- 1-Year Goal -->
354
+ <div class="goal-timeline-item">
355
+ <div class="goal-card bg-gradient-to-br from-purple-50 to-indigo-50 p-6 rounded-xl shadow-md">
356
+ <div class="flex justify-between items-start mb-3">
357
+ <div>
358
+ <div class="text-xs font-semibold text-purple-600 mb-1">YEARLY MILESTONE</div>
359
+ <h4 class="text-xl font-bold text-gray-800">1-Year Goal</h4>
360
+ </div>
361
+ <div class="flex items-center justify-center w-12 h-12 rounded-full bg-purple-100 text-purple-600">
362
+ <i class="fas fa-calendar-star text-xl"></i>
363
+ </div>
364
+ </div>
365
+ <div id="oneYearGoal" class="text-gray-700 mb-4 text-lg">Launch MVP of the product and acquire first 100 paying customers.</div>
366
+ <div class="flex justify-between items-center">
367
+ <div class="w-full bg-gray-200 rounded-full h-2">
368
+ <div class="bg-purple-600 h-2 rounded-full" style="width: 15%"></div>
369
+ </div>
370
+ <span class="ml-3 text-sm font-medium text-purple-600">15%</span>
371
+ </div>
372
+ </div>
373
+ </div>
374
+
375
+ <!-- 90-Day Goal -->
376
+ <div class="goal-timeline-item">
377
+ <div class="goal-card bg-gradient-to-br from-blue-50 to-cyan-50 p-6 rounded-xl shadow-md">
378
+ <div class="flex justify-between items-start mb-3">
379
+ <div>
380
+ <div class="text-xs font-semibold text-blue-600 mb-1">QUARTERLY TARGET</div>
381
+ <h4 class="text-xl font-bold text-gray-800">90-Day Goal</h4>
382
+ </div>
383
+ <div class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 text-blue-600">
384
+ <i class="fas fa-calendar-check text-xl"></i>
385
+ </div>
386
+ </div>
387
+ <div id="ninetyDayGoal" class="text-gray-700 mb-4 text-lg">Complete product prototype and run first beta test with 20 users.</div>
388
+ <div class="flex justify-between items-center">
389
+ <div class="w-full bg-gray-200 rounded-full h-2">
390
+ <div class="bg-blue-600 h-2 rounded-full" style="width: 5%"></div>
391
+ </div>
392
+ <span class="ml-3 text-sm font-medium text-blue-600">5%</span>
393
+ </div>
394
+ </div>
395
+ </div>
396
+
397
+ <!-- Monthly Goals -->
398
+ <div class="goal-timeline-item">
399
+ <div class="goal-card bg-gradient-to-br from-green-50 to-teal-50 p-6 rounded-xl shadow-md">
400
+ <div class="flex justify-between items-start mb-3">
401
+ <div>
402
+ <div class="text-xs font-semibold text-green-600 mb-1">MONTHLY ACTIONS</div>
403
+ <h4 class="text-xl font-bold text-gray-800">Monthly Goals</h4>
404
+ </div>
405
+ <div class="flex items-center justify-center w-12 h-12 rounded-full bg-green-100 text-green-600">
406
+ <i class="fas fa-calendar-alt text-xl"></i>
407
+ </div>
408
+ </div>
409
+ <div id="monthlyGoals" class="text-gray-700 mb-4">
410
+ <ul class="space-y-3">
411
+ <li class="flex items-start">
412
+ <div class="flex-shrink-0 h-6 w-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3 mt-1">
413
+ <span class="text-xs font-bold">1</span>
414
+ </div>
415
+ <div class="text-lg">Month 1: Finalize product specifications</div>
416
+ </li>
417
+ <li class="flex items-start">
418
+ <div class="flex-shrink-0 h-6 w-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3 mt-1">
419
+ <span class="text-xs font-bold">2</span>
420
+ </div>
421
+ <div class="text-lg">Month 2: Develop core features</div>
422
+ </li>
423
+ <li class="flex items-start">
424
+ <div class="flex-shrink-0 h-6 w-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3 mt-1">
425
+ <span class="text-xs font-bold">3</span>
426
+ </div>
427
+ <div class="text-lg">Month 3: Conduct initial user testing</div>
428
+ </li>
429
+ </ul>
430
+ </div>
431
+ <div class="flex justify-between items-center">
432
+ <div class="w-full bg-gray-200 rounded-full h-2">
433
+ <div class="bg-green-600 h-2 rounded-full" style="width: 2%"></div>
434
+ </div>
435
+ <span class="ml-3 text-sm font-medium text-green-600">2%</span>
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ </div>
441
+
442
+ <!-- Income Strategy Display -->
443
+ <div class="mb-10 bg-gradient-to-br from-amber-50 to-orange-50 p-6 rounded-xl">
444
+ <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
445
+ <i class="fas fa-money-bill-trend-up mr-3 text-amber-500"></i> Income Strategy
446
+ </h3>
447
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
448
+ <div>
449
+ <h4 class="font-semibold text-gray-700 mb-2">Current Income Streams</h4>
450
+ <ul id="currentIncomeDisplay" class="space-y-2">
451
+ <li class="flex items-center">
452
+ <div class="flex-shrink-0 h-5 w-5 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center mr-3">
453
+ <i class="fas fa-circle text-xs"></i>
454
+ </div>
455
+ <div class="text-gray-700">Freelance design work</div>
456
+ </li>
457
+ <li class="flex items-center">
458
+ <div class="flex-shrink-0 h-5 w-5 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center mr-3">
459
+ <i class="fas fa-circle text-xs"></i>
460
+ </div>
461
+ <div class="text-gray-700">Online course sales</div>
462
+ </li>
463
+ </ul>
464
+ </div>
465
+ <div>
466
+ <h4 class="font-semibold text-gray-700 mb-2">Planned Income Streams</h4>
467
+ <ul id="plannedIncomeDisplay" class="space-y-2">
468
+ <li class="flex items-center">
469
+ <div class="flex-shrink-0 h-5 w-5 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center mr-3">
470
+ <i class="fas fa-bolt text-xs"></i>
471
+ </div>
472
+ <div class="text-gray-700">SaaS product subscriptions</div>
473
+ </li>
474
+ <li class="flex items-center">
475
+ <div class="flex-shrink-0 h-5 w-5 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center mr-3">
476
+ <i class="fas fa-bolt text-xs"></i>
477
+ </div>
478
+ <div class="text-gray-700">Consulting services</div>
479
+ </li>
480
+ </ul>
481
+ </div>
482
+ </div>
483
+ <div class="mt-4">
484
+ <h4 class="font-semibold text-gray-700 mb-2">Revenue Growth Strategy</h4>
485
+ <div id="revenueStrategy" class="text-gray-700 bg-white p-4 rounded-lg border border-amber-100">
486
+ Focus on productizing services and building scalable income streams through digital products and automation. Prioritize recurring revenue models while maintaining service-based income during transition.
487
+ </div>
488
+ </div>
489
+ </div>
490
+
491
+ <!-- Habits & Systems -->
492
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
493
+ <!-- Habits -->
494
+ <div class="bg-gradient-to-br from-pink-50 to-rose-50 p-6 rounded-xl">
495
+ <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
496
+ <i class="fas fa-sync-alt mr-3 text-pink-500"></i> Key Habits
497
+ </h3>
498
+ <div id="habitsOutput" class="space-y-4">
499
+ <div class="flex items-start bg-white p-4 rounded-lg shadow-sm">
500
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-pink-100 text-pink-600 flex items-center justify-center mr-4">
501
+ <i class="fas fa-sun"></i>
502
+ </div>
503
+ <div>
504
+ <h4 class="font-medium text-gray-800">Morning Deep Work</h4>
505
+ <p class="text-gray-600 text-sm">Daily 90-minute focused session on product development</p>
506
+ </div>
507
+ </div>
508
+ <div class="flex items-start bg-white p-4 rounded-lg shadow-sm">
509
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-pink-100 text-pink-600 flex items-center justify-center mr-4">
510
+ <i class="fas fa-users"></i>
511
+ </div>
512
+ <div>
513
+ <h4 class="font-medium text-gray-800">Customer Development</h4>
514
+ <p class="text-gray-600 text-sm">Weekly interviews with potential customers</p>
515
+ </div>
516
+ </div>
517
+ <div class="flex items-start bg-white p-4 rounded-lg shadow-sm">
518
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-pink-100 text-pink-600 flex items-center justify-center mr-4">
519
+ <i class="fas fa-brain"></i>
520
+ </div>
521
+ <div>
522
+ <h4 class="font-medium text-gray-800">Mindful Planning</h4>
523
+ <p class="text-gray-600 text-sm">Morning routine with meditation and daily planning</p>
524
+ </div>
525
+ </div>
526
+ </div>
527
+ </div>
528
+
529
+ <!-- Systems -->
530
+ <div class="bg-gradient-to-br from-amber-50 to-orange-50 p-6 rounded-xl">
531
+ <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
532
+ <i class="fas fa-cogs mr-3 text-amber-500"></i> Value Creation Systems
533
+ </h3>
534
+ <div id="systemsOutput" class="space-y-4">
535
+ <div class="flex items-start bg-white p-4 rounded-lg shadow-sm">
536
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center mr-4">
537
+ <i class="fas fa-rocket"></i>
538
+ </div>
539
+ <div>
540
+ <h4 class="font-medium text-gray-800">Development Sprints</h4>
541
+ <p class="text-gray-600 text-sm">2-week product development cycles with clear deliverables</p>
542
+ </div>
543
+ </div>
544
+ <div class="flex items-start bg-white p-4 rounded-lg shadow-sm">
545
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center mr-4">
546
+ <i class="fas fa-comments"></i>
547
+ </div>
548
+ <div>
549
+ <h4 class="font-medium text-gray-800">Feedback Loop</h4>
550
+ <p class="text-gray-600 text-sm">Structured process for collecting and analyzing user feedback</p>
551
+ </div>
552
+ </div>
553
+ <div class="flex items-start bg-white p-4 rounded-lg shadow-sm">
554
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center mr-4">
555
+ <i class="fas fa-battery-three-quarters"></i>
556
+ </div>
557
+ <div>
558
+ <h4 class="font-medium text-gray-800">Energy Management</h4>
559
+ <p class="text-gray-600 text-sm">Tracking system for personal productivity and energy levels</p>
560
+ </div>
561
+ </div>
562
+ </div>
563
+ </div>
564
+ </div>
565
+
566
+ <!-- Gamification -->
567
+ <div class="bg-gradient-to-br from-indigo-50 to-purple-50 p-6 rounded-xl">
568
+ <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
569
+ <i class="fas fa-trophy mr-3 text-indigo-500"></i> Your Quest Progress
570
+ </h3>
571
+ <div class="flex items-center mb-4">
572
+ <div class="w-full bg-gray-200 rounded-full h-4">
573
+ <div class="bg-gradient-to-r from-purple-400 to-indigo-500 h-4 rounded-full" style="width: 15%"></div>
574
+ </div>
575
+ <span class="ml-4 text-gray-700 font-medium">15%</span>
576
+ </div>
577
+ <div class="grid grid-cols-3 gap-4 text-center">
578
+ <div>
579
+ <div class="bg-white p-3 rounded-lg shadow">
580
+ <div class="text-2xl font-bold text-indigo-600">3</div>
581
+ <div class="text-sm text-gray-500">Goals Set</div>
582
+ </div>
583
+ </div>
584
+ <div>
585
+ <div class="bg-white p-3 rounded-lg shadow">
586
+ <div class="text-2xl font-bold text-indigo-600">0</div>
587
+ <div class="text-sm text-gray-500">Goals Completed</div>
588
+ </div>
589
+ </div>
590
+ <div>
591
+ <div class="bg-white p-3 rounded-lg shadow">
592
+ <div class="text-2xl font-bold text-indigo-600">1</div>
593
+ <div class="text-sm text-gray-500">Badges Earned</div>
594
+ </div>
595
+ </div>
596
+ </div>
597
+ <div class="mt-6">
598
+ <h4 class="font-semibold text-gray-700 mb-2">Next Badge: <span class="text-indigo-600">Vision Setter</span></h4>
599
+ <p class="text-sm text-gray-600">Complete your first 90-day goal to unlock this badge!</p>
600
+ </div>
601
+ </div>
602
+
603
+ <!-- Action Buttons -->
604
+ <div class="mt-10 flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-6">
605
+ <button id="exportPdfBtn" class="bg-indigo-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-indigo-700 transition flex items-center justify-center">
606
+ <i class="fas fa-download mr-2"></i> Export PDF
607
+ </button>
608
+ <button id="exportCsvBtn" class="bg-white border border-indigo-600 text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-indigo-50 transition flex items-center justify-center">
609
+ <i class="fas fa-file-csv mr-2"></i> Export CSV
610
+ </button>
611
+ <button id="regenerateBtn" class="bg-white border border-gray-300 text-gray-700 px-6 py-3 rounded-lg font-medium hover:bg-gray-50 transition flex items-center justify-center">
612
+ <i class="fas fa-redo mr-2"></i> Regenerate
613
+ </button>
614
+ </div>
615
+ </div>
616
+ </div>
617
+ </div>
618
+
619
+ <script>
620
+ // Initialize jsPDF
621
+ const { jsPDF } = window.jspdf;
622
+
623
+ document.addEventListener('DOMContentLoaded', function() {
624
+ // API Key
625
+ const DEEPSEEK_API_KEY = 'sk-0cce68e321854d11b01ee9227147a12d';
626
+
627
+ // Track all inputs
628
+ let userInputs = {
629
+ vision: '',
630
+ values: [],
631
+ currentIncome: [],
632
+ plannedIncome: [],
633
+ tenYearGoals: [],
634
+ threeYearGoals: []
635
+ };
636
+
637
+ // Add Value Field
638
+ let valueCount = 1;
639
+ document.getElementById('addValueBtn').addEventListener('click', function() {
640
+ if (valueCount < 5) {
641
+ valueCount++;
642
+ const newValueField = document.createElement('div');
643
+ newValueField.className = 'flex mb-2';
644
+ newValueField.innerHTML = `
645
+ <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}">
646
+ <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>
647
+ `;
648
+ document.getElementById('valuesContainer').appendChild(newValueField);
649
+
650
+ // Add remove functionality
651
+ newValueField.querySelector('.remove-value').addEventListener('click', function() {
652
+ newValueField.remove();
653
+ valueCount--;
654
+ });
655
+ } else {
656
+ alert('Maximum of 5 values allowed');
657
+ }
658
+ });
659
+
660
+ // Add Current Income Field
661
+ let currentIncomeCount = 1;
662
+ document.getElementById('addCurrentIncomeBtn').addEventListener('click', function() {
663
+ const newIncomeField = document.createElement('div');
664
+ newIncomeField.className = 'flex mb-2';
665
+ newIncomeField.innerHTML = `
666
+ <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}">
667
+ <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>
668
+ `;
669
+ document.getElementById('currentIncomeContainer').appendChild(newIncomeField);
670
+ currentIncomeCount++;
671
+
672
+ // Add remove functionality
673
+ newIncomeField.querySelector('.remove-income').addEventListener('click', function() {
674
+ newIncomeField.remove();
675
+ });
676
+ });
677
+
678
+ // Add Planned Income Field
679
+ let plannedIncomeCount = 1;
680
+ document.getElementById('addPlannedIncomeBtn').addEventListener('click', function() {
681
+ const newPlannedField = document.createElement('div');
682
+ newPlannedField.className = 'flex mb-2';
683
+ newPlannedField.innerHTML = `
684
+ <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}">
685
+ <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>
686
+ `;
687
+ document.getElementById('plannedIncomeContainer').appendChild(newPlannedField);
688
+ plannedIncomeCount++;
689
+
690
+ // Add remove functionality
691
+ newPlannedField.querySelector('.remove-planned').addEventListener('click', function() {
692
+ newPlannedField.remove();
693
+ });
694
+ });
695
+
696
+ // Add 10-Year Goal Field
697
+ let tenYearGoalCount = 1;
698
+ document.getElementById('addTenYearGoalBtn').addEventListener('click', function() {
699
+ if (tenYearGoalCount < 3) {
700
+ tenYearGoalCount++;
701
+ const newGoalField = document.createElement('div');
702
+ newGoalField.className = 'flex mb-2';
703
+ newGoalField.innerHTML = `
704
+ <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}">
705
+ <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>
706
+ `;
707
+ document.getElementById('tenYearGoals').appendChild(newGoalField);
708
+
709
+ // Add remove functionality
710
+ newGoalField.querySelector('.remove-10y').addEventListener('click', function() {
711
+ newGoalField.remove();
712
+ tenYearGoalCount--;
713
+ });
714
+ } else {
715
+ alert('Maximum of 3 10-year goals allowed');
716
+ }
717
+ });
718
+
719
+ // Add 3-Year Goal Field
720
+ let threeYearGoalCount = 1;
721
+ document.getElementById('addThreeYearGoalBtn').addEventListener('click', function() {
722
+ if (threeYearGoalCount < 5) {
723
+ threeYearGoalCount++;
724
+ const newGoalField = document.createElement('div');
725
+ newGoalField.className = 'flex mb-2';
726
+ newGoalField.innerHTML = `
727
+ <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}">
728
+ <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>
729
+ `;
730
+ document.getElementById('threeYearGoals').appendChild(newGoalField);
731
+
732
+ // Add remove functionality
733
+ newGoalField.querySelector('.remove-3y').addEventListener('click', function() {
734
+ newGoalField.remove();
735
+ threeYearGoalCount--;
736
+ });
737
+ } else {
738
+ alert('Maximum of 5 3-year goals allowed');
739
+ }
740
+ });
741
+
742
+ // Generate Action Plan with AI
743
+ document.getElementById('generateBtn').addEventListener('click', async function() {
744
+ // Collect all user inputs
745
+ userInputs.vision = document.getElementById('visionInput').value;
746
+
747
+ // Collect values
748
+ userInputs.values = [];
749
+ document.querySelectorAll('.value-input').forEach(input => {
750
+ if (input.value.trim() !== '') {
751
+ userInputs.values.push(input.value.trim());
752
+ }
753
+ });
754
+
755
+ // Collect current income
756
+ userInputs.currentIncome = [];
757
+ document.querySelectorAll('.income-input').forEach(input => {
758
+ if (input.value.trim() !== '') {
759
+ userInputs.currentIncome.push(input.value.trim());
760
+ }
761
+ });
762
+
763
+ // Collect planned income
764
+ userInputs.plannedIncome = [];
765
+ document.querySelectorAll('.planned-input').forEach(input => {
766
+ if (input.value.trim() !== '') {
767
+ userInputs.plannedIncome.push(input.value.trim());
768
+ }
769
+ });
770
+
771
+ // Collect 10-year goals
772
+ userInputs.tenYearGoals = [];
773
+ document.querySelectorAll('.goal-10y').forEach(input => {
774
+ if (input.value.trim() !== '') {
775
+ userInputs.tenYearGoals.push(input.value.trim());
776
+ }
777
+ });
778
+
779
+ // Collect 3-year goals
780
+ userInputs.threeYearGoals = [];
781
+ document.querySelectorAll('.goal-3y').forEach(input => {
782
+ if (input.value.trim() !== '') {
783
+ userInputs.threeYearGoals.push(input.value.trim());
784
+ }
785
+ });
786
+
787
+ // Validate inputs
788
+ if (!userInputs.vision || userInputs.values.length === 0) {
789
+ alert('Please enter your vision and at least one core value to continue');
790
+ return;
791
+ }
792
+
793
+ // Show loading screen
794
+ const loadingScreen = document.getElementById('loadingScreen');
795
+ loadingScreen.classList.remove('hidden');
796
+
797
+ // Start progress animation
798
+ simulateProgress();
799
+
800
+ try {
801
+ // Call DeepSeek API to generate the identity statement
802
+ 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.`;
803
+ const identityResponse = await callDeepSeekAPI(identityPrompt);
804
+
805
+ // Update identity
806
+ document.getElementById('identityOutput').textContent = identityResponse;
807
+
808
+ // Generate goals
809
+ 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:
810
+ 1. 1-year goal (single most important goal)
811
+ 2. 90-day goal (critical milestone)
812
+ 3. 3 monthly goals (as bullet points)
813
+ Format as JSON with keys: oneYearGoal, ninetyDayGoal, monthlyGoals (array).`;
814
+ const goalsResponse = await callDeepSeekAPI(goalsPrompt);
815
+ const goals = parseJSONResponse(goalsResponse);
816
+
817
+ // Update goals
818
+ if (goals.oneYearGoal) document.getElementById('oneYearGoal').textContent = goals.oneYearGoal;
819
+ if (goals.ninetyDayGoal) document.getElementById('ninetyDayGoal').textContent = goals.ninetyDayGoal;
820
+ if (goals.monthlyGoals) {
821
+ const monthlyList = goals.monthlyGoals.map((goal, i) => `
822
+ <li class="flex items-start">
823
+ <div class="flex-shrink-0 h-6 w-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3 mt-1">
824
+ <span class="text-xs font-bold">${i+1}</span>
825
+ </div>
826
+ <div class="text-lg">${goal}</div>
827
+ </li>
828
+ `).join('');
829
+ document.getElementById('monthlyGoals').innerHTML = `<ul class="space-y-3">${monthlyList}</ul>`;
830
+ }
831
+
832
+ // Generate habits and systems
833
+ const habitsPrompt = `Suggest 3 key daily/weekly habits that would help achieve these goals: ${goals.oneYearGoal}, ${goals.ninetyDayGoal}. For each habit, provide a title and short description. Format as JSON with array of objects with keys: title, description.`;
834
+ const habitsResponse = await callDeepSeekAPI(habitsPrompt);
835
+ const habits = parseJSONResponse(habitsResponse);
836
+
837
+ if (habits && Array.isArray(habits)) {
838
+ const habitsHTML = habits.map(habit => `
839
+ <div class="flex items-start bg-white p-4 rounded-lg shadow-sm">
840
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-pink-100 text-pink-600 flex items-center justify-center mr-4">
841
+ <i class="fas fa-${getRandomHabitIcon()}"></i>
842
+ </div>
843
+ <div>
844
+ <h4 class="font-medium text-gray-800">${habit.title}</h4>
845
+ <p class="text-gray-600 text-sm">${habit.description}</p>
846
+ </div>
847
+ </div>
848
+ `).join('');
849
+ document.getElementById('habitsOutput').innerHTML = habitsHTML;
850
+ }
851
+
852
+ // Generate systems
853
+ const systemsPrompt = `Suggest 3 systems or processes that would help achieve these goals: ${goals.oneYearGoal}, ${goals.ninetyDayGoal}. For each system, provide a title and short description. Format as JSON with array of objects with keys: title, description.`;
854
+ const systemsResponse = await callDeepSeekAPI(systemsPrompt);
855
+ const systems = parseJSONResponse(systemsResponse);
856
+
857
+ if (systems && Array.isArray(systems)) {
858
+ const systemsHTML = systems.map(system => `
859
+ <div class="flex items-start bg-white p-4 rounded-lg shadow-sm">
860
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center mr-4">
861
+ <i class="fas fa-${getRandomSystemIcon()}"></i>
862
+ </div>
863
+ <div>
864
+ <h4 class="font-medium text-gray-800">${system.title}</h4>
865
+ <p class="text-gray-600 text-sm">${system.description}</p>
866
+ </div>
867
+ </div>
868
+ `).join('');
869
+ document.getElementById('systemsOutput').innerHTML = systemsHTML;
870
+ }
871
+
872
+ // Generate revenue strategy
873
+ 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.`;
874
+ const revenueResponse = await callDeepSeekAPI(revenuePrompt);
875
+ document.getElementById('revenueStrategy').textContent = revenueResponse;
876
+
877
+ // Update income displays
878
+ document.getElementById('currentIncomeDisplay').innerHTML = userInputs.currentIncome.map(i => `
879
+ <li class="flex items-center">
880
+ <div class="flex-shrink-0 h-5 w-5 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center mr-3">
881
+ <i class="fas fa-circle text-xs"></i>
882
+ </div>
883
+ <div class="text-gray-700">${i}</div>
884
+ </li>
885
+ `).join('');
886
+
887
+ document.getElementById('plannedIncomeDisplay').innerHTML = userInputs.plannedIncome.map(i => `
888
+ <li class="flex items-center">
889
+ <div class="flex-shrink-0 h-5 w-5 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center mr-3">
890
+ <i class="fas fa-bolt text-xs"></i>
891
+ </div>
892
+ <div class="text-gray-700">${i}</div>
893
+ </li>
894
+ `).join('');
895
+
896
+ // Hide loading screen and show results
897
+ setTimeout(() => {
898
+ loadingScreen.classList.add('hidden');
899
+ document.getElementById('resultsSection').classList.remove('hidden');
900
+
901
+ // Scroll to results
902
+ document.getElementById('resultsSection').scrollIntoView({ behavior: 'smooth' });
903
+ }, 500);
904
+
905
+ } catch (error) {
906
+ console.error('Error generating plan:', error);
907
+ loadingScreen.classList.add('hidden');
908
+ alert('There was an error generating your plan. Please try again.');
909
+ }
910
+ });
911
+
912
+ // Regenerate button
913
+ document.getElementById('regenerateBtn').addEventListener('click', function() {
914
+ document.getElementById('resultsSection').classList.add('hidden');
915
+ document.getElementById('generateBtn').click();
916
+ });
917
+
918
+ // Export to PDF
919
+ document.getElementById('exportPdfBtn').addEventListener('click', function() {
920
+ const doc = new jsPDF();
921
+
922
+ // Title
923
+ doc.setFontSize(22);
924
+ doc.setTextColor(55, 65, 81); // gray-800
925
+ doc.text('Vision Quest - Your Goal Roadmap', 105, 20, { align: 'center' });
926
+
927
+ // Identity Section
928
+ doc.setFontSize(16);
929
+ doc.setTextColor(17, 24, 39); // gray-900
930
+ doc.text('Identity Statement', 15, 40);
931
+ doc.setFontSize(12);
932
+ doc.setTextColor(55, 65, 81); // gray-700
933
+ doc.text(document.getElementById('identityOutput').textContent, 15, 50, { maxWidth: 180 });
934
+
935
+ // Goals
936
+ doc.setFontSize(16);
937
+ doc.setTextColor(17, 24, 39);
938
+ doc.text('Your Goals', 15, 70);
939
+
940
+ doc.setFontSize(12);
941
+ doc.setTextColor(55, 65, 81);
942
+ doc.text('1-Year Goal:', 15, 80);
943
+ doc.text(document.getElementById('oneYearGoal').textContent, 25, 85, { maxWidth: 170 });
944
+
945
+ doc.text('90-Day Goal:', 15, 100);
946
+ doc.text(document.getElementById('ninetyDayGoal').textContent, 25, 105, { maxWidth: 170 });
947
+
948
+ doc.text('Monthly Goals:', 15, 120);
949
+ const monthlyGoals = Array.from(document.getElementById('monthlyGoals').querySelectorAll('li')).map(li => li.textContent.trim());
950
+ monthlyGoals.forEach((goal, i) => {
951
+ doc.text(goal, 25, 125 + (i * 5), { maxWidth: 170 });
952
+ });
953
+
954
+ // Income Strategy
955
+ doc.setFontSize(16);
956
+ doc.setTextColor(17, 24, 39);
957
+ doc.text('Income Strategy', 15, 150);
958
+
959
+ doc.setFontSize(12);
960
+ doc.setTextColor(55, 65, 81);
961
+ doc.text('Current Income Streams:', 15, 160);
962
+ userInputs.currentIncome.forEach((income, i) => {
963
+ doc.text(`• ${income}`, 20, 165 + (i * 5), { maxWidth: 170 });
964
+ });
965
+
966
+ doc.text('Planned Income Streams:', 15, 180);
967
+ userInputs.plannedIncome.forEach((income, i) => {
968
+ doc.text(`• ${income}`, 20, 185 + (i * 5), { maxWidth: 170 });
969
+ });
970
+
971
+ doc.text('Revenue Growth Strategy:', 15, 200);
972
+ doc.text(document.getElementById('revenueStrategy').textContent, 20, 205, { maxWidth: 170 });
973
+
974
+ // Habits & Systems
975
+ doc.setFontSize(16);
976
+ doc.setTextColor(17, 24, 39);
977
+ doc.text('Habits & Systems', 15, 230);
978
+
979
+ doc.setFontSize(12);
980
+ doc.setTextColor(55, 65, 81);
981
+ doc.text('Key Habits:', 15, 240);
982
+ const habits = Array.from(document.getElementById('habitsOutput').querySelectorAll('div')).map(div => {
983
+ const title = div.querySelector('h4').textContent;
984
+ const desc = div.querySelector('p').textContent;
985
+ return `${title}: ${desc}`;
986
+ });
987
+ habits.forEach((habit, i) => {
988
+ doc.text(`• ${habit}`, 20, 245 + (i * 5), { maxWidth: 170 });
989
+ });
990
+
991
+ doc.text('Value Creation Systems:', 15, 260);
992
+ const systems = Array.from(document.getElementById('systemsOutput').querySelectorAll('div')).map(div => {
993
+ const title = div.querySelector('h4').textContent;
994
+ const desc = div.querySelector('p').textContent;
995
+ return `${title}: ${desc}`;
996
+ });
997
+ systems.forEach((system, i) => {
998
+ doc.text(`• ${system}`, 20, 265 + (i * 5), { maxWidth: 170 });
999
+ });
1000
+
1001
+ // Save the PDF
1002
+ doc.save('VisionQuest-Plan.pdf');
1003
+ });
1004
+
1005
+ // Export to CSV
1006
+ document.getElementById('exportCsvBtn').addEventListener('click', function() {
1007
+ // Prepare CSV content
1008
+ let csvContent = "Category,Item\n";
1009
+
1010
+ // Add identity
1011
+ csvContent += `Identity,"${document.getElementById('identityOutput').textContent}"\n`;
1012
+
1013
+ // Add goals
1014
+ csvContent += `1-Year Goal,"${document.getElementById('oneYearGoal').textContent}"\n`;
1015
+ csvContent += `90-Day Goal,"${document.getElementById('ninetyDayGoal').textContent}"\n`;
1016
+
1017
+ const monthlyGoals = Array.from(document.getElementById('monthlyGoals').querySelectorAll('li')).map(li => li.textContent.trim());
1018
+ monthlyGoals.forEach(goal => {
1019
+ csvContent += `Monthly Goal,"${goal}"\n`;
1020
+ });
1021
+
1022
+ // Add income
1023
+ userInputs.currentIncome.forEach(income => {
1024
+ csvContent += `Current Income,"${income}"\n`;
1025
+ });
1026
+
1027
+ userInputs.plannedIncome.forEach(income => {
1028
+ csvContent += `Planned Income,"${income}"\n`;
1029
+ });
1030
+
1031
+ csvContent += `Revenue Strategy,"${document.getElementById('revenueStrategy').textContent}"\n`;
1032
+
1033
+ // Add habits
1034
+ const habits = Array.from(document.getElementById('habitsOutput').querySelectorAll('div')).map(div => {
1035
+ const title = div.querySelector('h4').textContent;
1036
+ const desc = div.querySelector('p').textContent;
1037
+ return `${title}: ${desc}`;
1038
+ });
1039
+ habits.forEach(habit => {
1040
+ csvContent += `Key Habit,"${habit}"\n`;
1041
+ });
1042
+
1043
+ // Add systems
1044
+ const systems = Array.from(document.getElementById('systemsOutput').querySelectorAll('div')).map(div => {
1045
+ const title = div.querySelector('h4').textContent;
1046
+ const desc = div.querySelector('p').textContent;
1047
+ return `${title}: ${desc}`;
1048
+ });
1049
+ systems.forEach(system => {
1050
+ csvContent += `Value System,"${system}"\n`;
1051
+ });
1052
+
1053
+ // Create download link
1054
+ const encodedUri = encodeURI("data:text/csv;charset=utf-8," + csvContent);
1055
+ const link = document.createElement("a");
1056
+ link.setAttribute("href", encodedUri);
1057
+ link.setAttribute("download", "VisionQuest-Plan.csv");
1058
+ document.body.appendChild(link);
1059
+ link.click();
1060
+ document.body.removeChild(link);
1061
+ });
1062
+
1063
+ // Helper function to call DeepSeek API
1064
+ async function callDeepSeekAPI(prompt) {
1065
+ const response = await fetch('https://api.deepseek.com/v1/chat/completions', {
1066
+ method: 'POST',
1067
+ headers: {
1068
+ 'Content-Type': 'application/json',
1069
+ 'Authorization': `Bearer ${DEEPSEEK_API_KEY}`
1070
+ },
1071
+ body: JSON.stringify({
1072
+ model: "deepseek-chat",
1073
+ messages: [
1074
+ {
1075
+ role: "system",
1076
+ content: "You are a helpful goal-setting assistant that helps people create clear, actionable plans to achieve their vision. Provide concise, practical advice."
1077
+ },
1078
+ {
1079
+ role: "user",
1080
+ content: prompt
1081
+ }
1082
+ ],
1083
+ temperature: 0.7,
1084
+ max_tokens: 1000
1085
+ })
1086
+ });
1087
+
1088
+ if (!response.ok) {
1089
+ throw new Error(`API request failed with status ${response.status}`);
1090
+ }
1091
+
1092
+ const data = await response.json();
1093
+ return data.choices[0].message.content.trim();
1094
+ }
1095
+
1096
+ // Helper function to parse JSON responses from AI
1097
+ function parseJSONResponse(response) {
1098
+ try {
1099
+ // Try to find JSON in the response
1100
+ const jsonStart = response.indexOf('{');
1101
+ const jsonEnd = response.lastIndexOf('}') + 1;
1102
+ const jsonString = response.slice(jsonStart, jsonEnd);
1103
+ return JSON.parse(jsonString);
1104
+ } catch (e) {
1105
+ console.error('Error parsing JSON response:', e);
1106
+ // Fallback to manual parsing if JSON is malformed
1107
+ const result = {};
1108
+
1109
+ // Extract 1-year goal
1110
+ const oneYearMatch = response.match(/1-year goal[:\-]?\s*(.+)/i);
1111
+ if (oneYearMatch) result.oneYearGoal = oneYearMatch[1].trim();
1112
+
1113
+ // Extract 90-day goal
1114
+ const ninetyDayMatch = response.match(/90-day goal[:\-]?\s*(.+)/i);
1115
+ if (ninetyDayMatch) result.ninetyDayGoal = ninetyDayMatch[1].trim();
1116
+
1117
+ // Extract monthly goals
1118
+ const monthlyMatches = response.match(/monthly goals?[:\-]?\s*([\s\S]+?)(?=\n\n|\n$|$)/i);
1119
+ if (monthlyMatches) {
1120
+ const monthlyLines = monthlyMatches[1].split('\n').filter(line => line.trim() !== '');
1121
+ result.monthlyGoals = monthlyLines.map(line => line.replace(/^\s*[\-•]\s*/, '').trim());
1122
+ }
1123
+
1124
+ return result;
1125
+ }
1126
+ }
1127
+
1128
+ // Simulate progress for loading screen
1129
+ function simulateProgress() {
1130
+ const progressCircle = document.querySelector('.progress-ring__circle');
1131
+ const progressPercent = document.getElementById('progressPercent');
1132
+ const visionProgress = document.getElementById('visionProgress');
1133
+ const visionProgressBar = document.getElementById('visionProgressBar');
1134
+ const goalsProgress = document.getElementById('goalsProgress');
1135
+ const goalsProgressBar = document.getElementById('goalsProgressBar');
1136
+ const actionProgress = document.getElementById('actionProgress');
1137
+ const actionProgressBar = document.getElementById('actionProgressBar');
1138
+ const loadingMessages = [
1139
+ '"The secret of getting ahead is getting started." - Mark Twain',
1140
+ '"What you get by achieving your goals is not as important as what you become by achieving your goals." - Zig Ziglar',
1141
+ '"Setting goals is the first step in turning the invisible into the visible." - Tony Robbins',
1142
+ '"A goal properly set is halfway reached." - Abraham Lincoln',
1143
+ '"You are never too old to set another goal or to dream a new dream." - C.S. Lewis'
1144
+ ];
1145
+
1146
+ let progress = 0;
1147
+ const radius = 40;
1148
+ const circumference = 2 * Math.PI * radius;
1149
+ const totalDuration = 60000; // 60 seconds in milliseconds
1150
+ const steps = 100; // 100% to complete
1151
+ const intervalDuration = totalDuration / steps; // 600ms per step
1152
+
1153
+ progressCircle.style.strokeDasharray = circumference;
1154
+ progressCircle.style.strokeDashoffset = circumference;
1155
+
1156
+ const interval = setInterval(() => {
1157
+ progress += 1;
1158
+ const offset = circumference - (progress / 100) * circumference;
1159
+ progressCircle.style.strokeDashoffset = offset;
1160
+ progressPercent.textContent = `${progress}%`;
1161
+
1162
+ // Update individual progress bars
1163
+ if (progress <= 40) {
1164
+ const visionPct = Math.min(100, (progress / 40) * 100);
1165
+ visionProgress.textContent = `${Math.round(visionPct)}%`;
1166
+ visionProgressBar.style.width = `${visionPct}%`;
1167
+ } else if (progress <= 80) {
1168
+ visionProgress.textContent = '100%';
1169
+ visionProgressBar.style.width = '100%';
1170
+
1171
+ const goalsPct = Math.min(100, ((progress - 40) / 40) * 100);
1172
+ goalsProgress.textContent = `${Math.round(goalsPct)}%`;
1173
+ goalsProgressBar.style.width = `${goalsPct}%`;
1174
+ } else {
1175
+ visionProgress.textContent = '100%';
1176
+ visionProgressBar.style.width = '100%';
1177
+ goalsProgress.textContent = '100%';
1178
+ goalsProgressBar.style.width = '100%';
1179
+
1180
+ const actionPct = Math.min(100, ((progress - 80) / 20) * 100);
1181
+ actionProgress.textContent = `${Math.round(actionPct)}%`;
1182
+ actionProgressBar.style.width = `${actionPct}%`;
1183
+ }
1184
+
1185
+ // Change loading message every 10%
1186
+ if (progress % 10 === 0) {
1187
+ const randomMessage = loadingMessages[Math.floor(Math.random() * loadingMessages.length)];
1188
+ document.getElementById('loadingMessage').textContent = randomMessage;
1189
+ }
1190
+
1191
+ if (progress >= 100) {
1192
+ clearInterval(interval);
1193
+ }
1194
+ }, intervalDuration);
1195
+ }
1196
+
1197
+ // Helper function to get random habit icons
1198
+ function getRandomHabitIcon() {
1199
+ const icons = ['sun', 'moon', 'running', 'meditation', 'brain', 'book', 'pencil-alt', 'dumbbell', 'water', 'apple-alt'];
1200
+ return icons[Math.floor(Math.random() * icons.length)];
1201
+ }
1202
+
1203
+ // Helper function to get random system icons
1204
+ function getRandomSystemIcon() {
1205
+ const icons = ['rocket', 'cogs', 'project-diagram', 'chart-line', 'clock', 'calendar-check', 'sync', 'random', 'network-wired', 'microchip'];
1206
+ return icons[Math.floor(Math.random() * icons.length)];
1207
+ }
1208
+ });
1209
+ </script>
1210
+ <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-v3-with-loading-correct" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1211
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Make the loading screens and progress take 60 seconds