Hugging Face's logo

Spaces:
JayStormX8
/
sky-ai-goals-game
Running

App Files Community
JayStormX8 commited on
Commit
1ba5fbc
·
verified ·
1 Parent(s): 68d884a

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +860 -54
  2. prompts.txt +2 -1
index.html CHANGED
@@ -40,6 +40,45 @@
40
  70% { box-shadow: 0 0 0 10px rgba(234, 88, 12, 0); }
41
  100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0); }
42
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
43
  </style>
44
  </head>
45
  <body class="bg-gray-50 font-sans">
@@ -57,7 +96,7 @@
57
  <div class="flex items-center space-x-3">
58
  <div class="relative">
59
  <div class="w-8 h-8 bg-yellow-400 rounded-full flex items-center justify-center streak-pulse">
60
- <span class="font-bold text-orange-800">7</span>
61
  </div>
62
  <div class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">🔥</div>
63
  </div>
@@ -69,18 +108,18 @@
69
  </header>
70
 
71
  <!-- Main Content -->
72
- <main class="p-4 pb-20">
73
  <!-- User Progress -->
74
  <div class="bg-white rounded-xl shadow-md p-4 mb-4">
75
  <div class="flex justify-between items-center mb-2">
76
  <div>
77
- <span class="text-sm text-gray-500">Level 3 Explorer</span>
78
- <h3 class="font-bold">Alex Founder</h3>
79
  </div>
80
  <div class="text-right">
81
- <div class="text-xs text-gray-500">XP: 245/400</div>
82
  <div class="w-full bg-gray-200 rounded-full h-2">
83
- <div class="bg-indigo-500 h-2 rounded-full progress-bar" style="width: 61%"></div>
84
  </div>
85
  </div>
86
  </div>
@@ -91,41 +130,41 @@
91
  <div class="flex justify-between items-start mb-2">
92
  <div>
93
  <span class="text-xs font-semibold bg-blue-100 text-blue-800 px-2 py-1 rounded-full">ACTIVE GOAL</span>
94
- <h3 class="font-bold mt-2 text-lg">Reach $10k MRR</h3>
95
  </div>
96
- <button class="text-blue-500">
97
  <i class="fas fa-ellipsis-h"></i>
98
  </button>
99
  </div>
100
- <p class="text-sm text-gray-600 mb-3">Current: $3,200 MRR → Goal: $10,000 MRR</p>
101
 
102
  <!-- Progress Map -->
103
  <div class="relative h-24 mb-4">
104
  <div class="absolute top-1/2 left-0 right-0 h-1 bg-gray-200 transform -translate-y-1/2"></div>
105
- <div class="absolute top-1/2 left-0 h-1 bg-indigo-500 transform -translate-y-1/2" style="width: 32%"></div>
106
 
107
  <div class="absolute top-1/2 left-0 transform -translate-y-1/2 -translate-x-1/2">
108
- <div class="w-6 h-6 bg-indigo-500 rounded-full flex items-center justify-center text-white text-xs map-node active">1</div>
109
  <div class="text-xs text-center mt-1">Start</div>
110
  </div>
111
 
112
  <div class="absolute top-1/2 left-1/3 transform -translate-y-1/2 -translate-x-1/2">
113
- <div class="w-6 h-6 bg-indigo-500 rounded-full flex items-center justify-center text-white text-xs map-node">2</div>
114
  <div class="text-xs text-center mt-1">$5k</div>
115
  </div>
116
 
117
  <div class="absolute top-1/2 left-2/3 transform -translate-y-1/2 -translate-x-1/2">
118
- <div class="w-6 h-6 bg-gray-300 rounded-full flex items-center justify-center text-gray-600 text-xs map-node">3</div>
119
  <div class="text-xs text-center mt-1">$7.5k</div>
120
  </div>
121
 
122
  <div class="absolute top-1/2 right-0 transform -translate-y-1/2 translate-x-1/2">
123
- <div class="w-6 h-6 bg-gray-300 rounded-full flex items-center justify-center text-gray-600 text-xs map-node">4</div>
124
  <div class="text-xs text-center mt-1">Goal</div>
125
  </div>
126
  </div>
127
 
128
- <button class="w-full bg-indigo-500 hover:bg-indigo-600 text-white py-2 px-4 rounded-lg font-medium transition duration-200">
129
  See Full Journey
130
  </button>
131
  </div>
@@ -143,10 +182,10 @@
143
  </div>
144
 
145
  <div class="bg-gray-50 rounded-lg p-3 mb-3">
146
- <p class="text-sm">"Based on your current progress, I recommend focusing on these high-leverage tasks to move toward $10k MRR:"</p>
147
  </div>
148
 
149
- <button class="w-full bg-gradient-to-r from-purple-500 to-indigo-500 hover:from-purple-600 hover:to-indigo-600 text-white py-2 px-4 rounded-lg font-medium transition duration-200 flex items-center justify-center">
150
  <i class="fas fa-comment-dots mr-2"></i> Chat with AI
151
  </button>
152
  </div>
@@ -155,10 +194,10 @@
155
  <div class="mb-6">
156
  <div class="flex justify-between items-center mb-3">
157
  <h2 class="font-bold text-lg">Priority Tasks</h2>
158
- <button class="text-sm text-indigo-500">View All</button>
159
  </div>
160
 
161
- <div class="space-y-3">
162
  <!-- Task 1 -->
163
  <div class="task-card bg-white rounded-lg shadow-md p-4 border-l-4 border-blue-500">
164
  <div class="flex justify-between items-start mb-2">
@@ -172,8 +211,8 @@
172
  <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">UX</span>
173
  </div>
174
  <div class="flex space-x-2">
175
- <button class="text-blue-500 text-sm"><i class="fas fa-share-alt"></i></button>
176
- <button class="text-green-500 text-sm"><i class="fas fa-check-circle"></i></button>
177
  </div>
178
  </div>
179
  </div>
@@ -191,8 +230,8 @@
191
  <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded-full">CONTENT</span>
192
  </div>
193
  <div class="flex space-x-2">
194
- <button class="text-blue-500 text-sm"><i class="fas fa-share-alt"></i></button>
195
- <button class="text-green-500 text-sm"><i class="fas fa-check-circle"></i></button>
196
  </div>
197
  </div>
198
  </div>
@@ -203,10 +242,10 @@
203
  <div class="mb-6">
204
  <div class="flex justify-between items-center mb-3">
205
  <h2 class="font-bold text-lg">Tasks to Delegate</h2>
206
- <button class="text-sm text-indigo-500">View All</button>
207
  </div>
208
 
209
- <div class="space-y-3">
210
  <!-- Task 1 -->
211
  <div class="task-card bg-white rounded-lg shadow-md p-4 border-l-4 border-gray-400">
212
  <div class="flex justify-between items-start mb-2">
@@ -220,8 +259,8 @@
220
  <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">DESIGN</span>
221
  </div>
222
  <div class="flex space-x-2">
223
- <button class="text-blue-500 text-sm"><i class="fas fa-user-plus"></i></button>
224
- <button class="text-blue-500 text-sm"><i class="fas fa-paper-plane"></i></button>
225
  </div>
226
  </div>
227
  </div>
@@ -232,61 +271,828 @@
232
  <!-- Bottom Navigation -->
233
  <nav class="fixed bottom-0 left-0 right-0 bg-white shadow-lg border-t border-gray-200 max-w-md mx-auto">
234
  <div class="flex justify-around p-3">
235
- <a href="#" class="text-indigo-500 flex flex-col items-center">
236
  <i class="fas fa-home text-xl"></i>
237
  <span class="text-xs mt-1">Home</span>
238
  </a>
239
- <a href="#" class="text-gray-500 flex flex-col items-center">
240
  <i class="fas fa-map text-xl"></i>
241
  <span class="text-xs mt-1">Journey</span>
242
  </a>
243
- <a href="#" class="text-gray-500 flex flex-col items-center">
244
  <div class="relative">
245
  <i class="fas fa-plus-circle text-3xl text-indigo-500 floating" style="margin-top: -20px;"></i>
246
  </div>
247
  </a>
248
- <a href="#" class="text-gray-500 flex flex-col items-center">
249
  <i class="fas fa-users text-xl"></i>
250
  <span class="text-xs mt-1">Community</span>
251
  </a>
252
- <a href="#" class="text-gray-500 flex flex-col items-center">
253
  <i class="fas fa-user text-xl"></i>
254
  <span class="text-xs mt-1">Profile</span>
255
  </a>
256
  </div>
257
  </nav>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
258
  </div>
259
 
260
  <script>
261
- // Simple interactive elements
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
262
  document.addEventListener('DOMContentLoaded', function() {
263
- // Make map nodes interactive
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
264
  const nodes = document.querySelectorAll('.map-node');
265
- nodes.forEach(node => {
266
- node.addEventListener('click', function() {
267
- nodes.forEach(n => n.classList.remove('active'));
268
- this.classList.add('active');
269
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
270
  });
271
 
272
- // Task completion
273
- const completeButtons = document.querySelectorAll('.fa-check-circle');
274
- completeButtons.forEach(button => {
275
- button.addEventListener('click', function() {
276
- const taskCard = this.closest('.task-card');
277
- taskCard.classList.add('opacity-50');
278
- setTimeout(() => {
279
- taskCard.style.display = 'none';
280
- // In a real app, we would update XP and progress here
281
- }, 300);
282
- });
 
 
 
283
  });
284
 
285
- // Simulate XP progress animation
 
 
 
 
 
 
 
 
 
 
 
286
  setTimeout(() => {
287
- const progressBar = document.querySelector('.progress-bar');
288
- progressBar.style.width = '65%';
289
- }, 500);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
290
  });
291
  </script>
292
  <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/sky-ai-goals-game" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
40
  70% { box-shadow: 0 0 0 10px rgba(234, 88, 12, 0); }
41
  100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0); }
42
  }
43
+ .modal {
44
+ display: none;
45
+ position: fixed;
46
+ top: 0;
47
+ left: 0;
48
+ width: 100%;
49
+ height: 100%;
50
+ background-color: rgba(0,0,0,0.5);
51
+ z-index: 1000;
52
+ justify-content: center;
53
+ align-items: center;
54
+ }
55
+ .modal-content {
56
+ background-color: white;
57
+ padding: 20px;
58
+ border-radius: 10px;
59
+ width: 90%;
60
+ max-width: 400px;
61
+ max-height: 80vh;
62
+ overflow-y: auto;
63
+ }
64
+ .chat-message {
65
+ max-width: 80%;
66
+ margin-bottom: 10px;
67
+ padding: 8px 12px;
68
+ border-radius: 12px;
69
+ }
70
+ .user-message {
71
+ background-color: #6366f1;
72
+ color: white;
73
+ margin-left: auto;
74
+ border-bottom-right-radius: 4px;
75
+ }
76
+ .ai-message {
77
+ background-color: #f3f4f6;
78
+ color: #1f2937;
79
+ margin-right: auto;
80
+ border-bottom-left-radius: 4px;
81
+ }
82
  </style>
83
  </head>
84
  <body class="bg-gray-50 font-sans">
 
96
  <div class="flex items-center space-x-3">
97
  <div class="relative">
98
  <div class="w-8 h-8 bg-yellow-400 rounded-full flex items-center justify-center streak-pulse">
99
+ <span class="font-bold text-orange-800" id="streak-count">7</span>
100
  </div>
101
  <div class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">🔥</div>
102
  </div>
 
108
  </header>
109
 
110
  <!-- Main Content -->
111
+ <main class="p-4 pb-20" id="main-content">
112
  <!-- User Progress -->
113
  <div class="bg-white rounded-xl shadow-md p-4 mb-4">
114
  <div class="flex justify-between items-center mb-2">
115
  <div>
116
+ <span class="text-sm text-gray-500">Level <span id="user-level">3</span> Explorer</span>
117
+ <h3 class="font-bold" id="username">Alex Founder</h3>
118
  </div>
119
  <div class="text-right">
120
+ <div class="text-xs text-gray-500">XP: <span id="current-xp">245</span>/<span id="max-xp">400</span></div>
121
  <div class="w-full bg-gray-200 rounded-full h-2">
122
+ <div class="bg-indigo-500 h-2 rounded-full progress-bar" id="xp-bar" style="width: 61%"></div>
123
  </div>
124
  </div>
125
  </div>
 
130
  <div class="flex justify-between items-start mb-2">
131
  <div>
132
  <span class="text-xs font-semibold bg-blue-100 text-blue-800 px-2 py-1 rounded-full">ACTIVE GOAL</span>
133
+ <h3 class="font-bold mt-2 text-lg" id="current-goal-title">Reach $10k MRR</h3>
134
  </div>
135
+ <button class="text-blue-500" onclick="showEditGoalModal()">
136
  <i class="fas fa-ellipsis-h"></i>
137
  </button>
138
  </div>
139
+ <p class="text-sm text-gray-600 mb-3" id="current-goal-description">Current: $3,200 MRR → Goal: $10,000 MRR</p>
140
 
141
  <!-- Progress Map -->
142
  <div class="relative h-24 mb-4">
143
  <div class="absolute top-1/2 left-0 right-0 h-1 bg-gray-200 transform -translate-y-1/2"></div>
144
+ <div class="absolute top-1/2 left-0 h-1 bg-indigo-500 transform -translate-y-1/2" id="goal-progress-bar" style="width: 32%"></div>
145
 
146
  <div class="absolute top-1/2 left-0 transform -translate-y-1/2 -translate-x-1/2">
147
+ <div class="w-6 h-6 bg-indigo-500 rounded-full flex items-center justify-center text-white text-xs map-node active" onclick="selectMapNode(0)">1</div>
148
  <div class="text-xs text-center mt-1">Start</div>
149
  </div>
150
 
151
  <div class="absolute top-1/2 left-1/3 transform -translate-y-1/2 -translate-x-1/2">
152
+ <div class="w-6 h-6 bg-indigo-500 rounded-full flex items-center justify-center text-white text-xs map-node" onclick="selectMapNode(1)">2</div>
153
  <div class="text-xs text-center mt-1">$5k</div>
154
  </div>
155
 
156
  <div class="absolute top-1/2 left-2/3 transform -translate-y-1/2 -translate-x-1/2">
157
+ <div class="w-6 h-6 bg-gray-300 rounded-full flex items-center justify-center text-gray-600 text-xs map-node" onclick="selectMapNode(2)">3</div>
158
  <div class="text-xs text-center mt-1">$7.5k</div>
159
  </div>
160
 
161
  <div class="absolute top-1/2 right-0 transform -translate-y-1/2 translate-x-1/2">
162
+ <div class="w-6 h-6 bg-gray-300 rounded-full flex items-center justify-center text-gray-600 text-xs map-node" onclick="selectMapNode(3)">4</div>
163
  <div class="text-xs text-center mt-1">Goal</div>
164
  </div>
165
  </div>
166
 
167
+ <button class="w-full bg-indigo-500 hover:bg-indigo-600 text-white py-2 px-4 rounded-lg font-medium transition duration-200" onclick="showFullJourney()">
168
  See Full Journey
169
  </button>
170
  </div>
 
182
  </div>
183
 
184
  <div class="bg-gray-50 rounded-lg p-3 mb-3">
185
+ <p class="text-sm" id="ai-recommendation">"Based on your current progress, I recommend focusing on these high-leverage tasks to move toward $10k MRR:"</p>
186
  </div>
187
 
188
+ <button class="w-full bg-gradient-to-r from-purple-500 to-indigo-500 hover:from-purple-600 hover:to-indigo-600 text-white py-2 px-4 rounded-lg font-medium transition duration-200 flex items-center justify-center" onclick="showAIChatModal()">
189
  <i class="fas fa-comment-dots mr-2"></i> Chat with AI
190
  </button>
191
  </div>
 
194
  <div class="mb-6">
195
  <div class="flex justify-between items-center mb-3">
196
  <h2 class="font-bold text-lg">Priority Tasks</h2>
197
+ <button class="text-sm text-indigo-500" onclick="showAllTasks('priority')">View All</button>
198
  </div>
199
 
200
+ <div class="space-y-3" id="priority-tasks">
201
  <!-- Task 1 -->
202
  <div class="task-card bg-white rounded-lg shadow-md p-4 border-l-4 border-blue-500">
203
  <div class="flex justify-between items-start mb-2">
 
211
  <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">UX</span>
212
  </div>
213
  <div class="flex space-x-2">
214
+ <button class="text-blue-500 text-sm" onclick="shareTask('Optimize pricing page conversion')"><i class="fas fa-share-alt"></i></button>
215
+ <button class="text-green-500 text-sm" onclick="completeTask(this, 25)"><i class="fas fa-check-circle"></i></button>
216
  </div>
217
  </div>
218
  </div>
 
230
  <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded-full">CONTENT</span>
231
  </div>
232
  <div class="flex space-x-2">
233
+ <button class="text-blue-500 text-sm" onclick="shareTask('Create case study for top customer')"><i class="fas fa-share-alt"></i></button>
234
+ <button class="text-green-500 text-sm" onclick="completeTask(this, 15)"><i class="fas fa-check-circle"></i></button>
235
  </div>
236
  </div>
237
  </div>
 
242
  <div class="mb-6">
243
  <div class="flex justify-between items-center mb-3">
244
  <h2 class="font-bold text-lg">Tasks to Delegate</h2>
245
+ <button class="text-sm text-indigo-500" onclick="showAllTasks('delegate')">View All</button>
246
  </div>
247
 
248
+ <div class="space-y-3" id="delegate-tasks">
249
  <!-- Task 1 -->
250
  <div class="task-card bg-white rounded-lg shadow-md p-4 border-l-4 border-gray-400">
251
  <div class="flex justify-between items-start mb-2">
 
259
  <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">DESIGN</span>
260
  </div>
261
  <div class="flex space-x-2">
262
+ <button class="text-blue-500 text-sm" onclick="assignTask('Update social media banners')"><i class="fas fa-user-plus"></i></button>
263
+ <button class="text-blue-500 text-sm" onclick="sendTask('Update social media banners')"><i class="fas fa-paper-plane"></i></button>
264
  </div>
265
  </div>
266
  </div>
 
271
  <!-- Bottom Navigation -->
272
  <nav class="fixed bottom-0 left-0 right-0 bg-white shadow-lg border-t border-gray-200 max-w-md mx-auto">
273
  <div class="flex justify-around p-3">
274
+ <a href="#" class="text-indigo-500 flex flex-col items-center" onclick="showHome()">
275
  <i class="fas fa-home text-xl"></i>
276
  <span class="text-xs mt-1">Home</span>
277
  </a>
278
+ <a href="#" class="text-gray-500 flex flex-col items-center" onclick="showJourney()">
279
  <i class="fas fa-map text-xl"></i>
280
  <span class="text-xs mt-1">Journey</span>
281
  </a>
282
+ <a href="#" class="text-gray-500 flex flex-col items-center" onclick="showAddTaskModal()">
283
  <div class="relative">
284
  <i class="fas fa-plus-circle text-3xl text-indigo-500 floating" style="margin-top: -20px;"></i>
285
  </div>
286
  </a>
287
+ <a href="#" class="text-gray-500 flex flex-col items-center" onclick="showCommunity()">
288
  <i class="fas fa-users text-xl"></i>
289
  <span class="text-xs mt-1">Community</span>
290
  </a>
291
+ <a href="#" class="text-gray-500 flex flex-col items-center" onclick="showProfile()">
292
  <i class="fas fa-user text-xl"></i>
293
  <span class="text-xs mt-1">Profile</span>
294
  </a>
295
  </div>
296
  </nav>
297
+
298
+ <!-- Modals -->
299
+ <!-- Edit Goal Modal -->
300
+ <div class="modal" id="edit-goal-modal">
301
+ <div class="modal-content">
302
+ <div class="flex justify-between items-center mb-4">
303
+ <h3 class="font-bold text-lg">Edit Goal</h3>
304
+ <button onclick="hideModal('edit-goal-modal')" class="text-gray-500"><i class="fas fa-times"></i></button>
305
+ </div>
306
+ <div class="mb-4">
307
+ <label class="block text-sm font-medium text-gray-700 mb-1">Goal Title</label>
308
+ <input type="text" id="edit-goal-title" class="w-full p-2 border border-gray-300 rounded-lg" value="Reach $10k MRR">
309
+ </div>
310
+ <div class="mb-4">
311
+ <label class="block text-sm font-medium text-gray-700 mb-1">Current Status</label>
312
+ <input type="text" id="edit-current-status" class="w-full p-2 border border-gray-300 rounded-lg" value="$3,200 MRR">
313
+ </div>
314
+ <div class="mb-4">
315
+ <label class="block text-sm font-medium text-gray-700 mb-1">Target Goal</label>
316
+ <input type="text" id="edit-target-goal" class="w-full p-2 border border-gray-300 rounded-lg" value="$10,000 MRR">
317
+ </div>
318
+ <div class="flex justify-end space-x-2">
319
+ <button onclick="deleteGoal()" class="px-4 py-2 bg-red-500 text-white rounded-lg">Delete</button>
320
+ <button onclick="saveGoal()" class="px-4 py-2 bg-indigo-500 text-white rounded-lg">Save</button>
321
+ </div>
322
+ </div>
323
+ </div>
324
+
325
+ <!-- AI Chat Modal -->
326
+ <div class="modal" id="ai-chat-modal">
327
+ <div class="modal-content">
328
+ <div class="flex justify-between items-center mb-4">
329
+ <h3 class="font-bold text-lg">AI Assistant</h3>
330
+ <button onclick="hideModal('ai-chat-modal')" class="text-gray-500"><i class="fas fa-times"></i></button>
331
+ </div>
332
+ <div class="mb-4 h-64 overflow-y-auto" id="chat-messages">
333
+ <div class="chat-message ai-message">
334
+ Hi there! I'm your SkyAI assistant. How can I help you with your goal today?
335
+ </div>
336
+ </div>
337
+ <div class="flex">
338
+ <input type="text" id="chat-input" class="flex-1 p-2 border border-gray-300 rounded-l-lg" placeholder="Ask me anything...">
339
+ <button onclick="sendChatMessage()" class="px-4 py-2 bg-indigo-500 text-white rounded-r-lg"><i class="fas fa-paper-plane"></i></button>
340
+ </div>
341
+ </div>
342
+ </div>
343
+
344
+ <!-- Add Task Modal -->
345
+ <div class="modal" id="add-task-modal">
346
+ <div class="modal-content">
347
+ <div class="flex justify-between items-center mb-4">
348
+ <h3 class="font-bold text-lg">Add New Task</h3>
349
+ <button onclick="hideModal('add-task-modal')" class="text-gray-500"><i class="fas fa-times"></i></button>
350
+ </div>
351
+ <div class="mb-4">
352
+ <label class="block text-sm font-medium text-gray-700 mb-1">Task Name</label>
353
+ <input type="text" id="task-name" class="w-full p-2 border border-gray-300 rounded-lg" placeholder="What needs to be done?">
354
+ </div>
355
+ <div class="mb-4">
356
+ <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
357
+ <textarea id="task-description" class="w-full p-2 border border-gray-300 rounded-lg" placeholder="Details about the task"></textarea>
358
+ </div>
359
+ <div class="mb-4">
360
+ <label class="block text-sm font-medium text-gray-700 mb-1">Priority</label>
361
+ <select id="task-priority" class="w-full p-2 border border-gray-300 rounded-lg">
362
+ <option value="high">High Impact</option>
363
+ <option value="medium">Medium Impact</option>
364
+ <option value="low">Low Impact</option>
365
+ </select>
366
+ </div>
367
+ <div class="mb-4">
368
+ <label class="block text-sm font-medium text-gray-700 mb-1">Action</label>
369
+ <select id="task-action" class="w-full p-2 border border-gray-300 rounded-lg">
370
+ <option value="do">Do (High Priority)</option>
371
+ <option value="delegate">Delegate</option>
372
+ </select>
373
+ </div>
374
+ <div class="mb-4">
375
+ <label class="block text-sm font-medium text-gray-700 mb-1">Category</label>
376
+ <select id="task-category" class="w-full p-2 border border-gray-300 rounded-lg">
377
+ <option value="ux">UX</option>
378
+ <option value="content">Content</option>
379
+ <option value="design">Design</option>
380
+ <option value="marketing">Marketing</option>
381
+ <option value="development">Development</option>
382
+ </select>
383
+ </div>
384
+ <button onclick="addNewTask()" class="w-full py-2 bg-indigo-500 text-white rounded-lg">Add Task</button>
385
+ </div>
386
+ </div>
387
+
388
+ <!-- Profile Modal -->
389
+ <div class="modal" id="profile-modal">
390
+ <div class="modal-content">
391
+ <div class="flex justify-between items-center mb-4">
392
+ <h3 class="font-bold text-lg">Your Profile</h3>
393
+ <button onclick="hideModal('profile-modal')" class="text-gray-500"><i class="fas fa-times"></i></button>
394
+ </div>
395
+ <div class="mb-4">
396
+ <label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
397
+ <input type="text" id="profile-name" class="w-full p-2 border border-gray-300 rounded-lg" value="Alex Founder">
398
+ </div>
399
+ <div class="mb-4">
400
+ <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
401
+ <input type="email" id="profile-email" class="w-full p-2 border border-gray-300 rounded-lg" value="[email protected]">
402
+ </div>
403
+ <div class="mb-4">
404
+ <label class="block text-sm font-medium text-gray-700 mb-1">Deepseek API Key</label>
405
+ <input type="password" id="api-key" class="w-full p-2 border border-gray-300 rounded-lg" placeholder="Enter your Deepseek API key">
406
+ <p class="text-xs text-gray-500 mt-1">This key is stored locally in your browser only</p>
407
+ </div>
408
+ <div class="mb-4">
409
+ <label class="block text-sm font-medium text-gray-700 mb-1">Current Streak</label>
410
+ <input type="number" id="profile-streak" class="w-full p-2 border border-gray-300 rounded-lg" value="7">
411
+ </div>
412
+ <div class="mb-4">
413
+ <label class="block text-sm font-medium text-gray-700 mb-1">Current Level</label>
414
+ <input type="number" id="profile-level" class="w-full p-2 border border-gray-300 rounded-lg" value="3">
415
+ </div>
416
+ <div class="mb-4">
417
+ <label class="block text-sm font-medium text-gray-700 mb-1">Current XP</label>
418
+ <input type="number" id="profile-xp" class="w-full p-2 border border-gray-300 rounded-lg" value="245">
419
+ </div>
420
+ <div class="mb-4">
421
+ <label class="block text-sm font-medium text-gray-700 mb-1">Max XP</label>
422
+ <input type="number" id="profile-max-xp" class="w-full p-2 border border-gray-300 rounded-lg" value="400">
423
+ </div>
424
+ <button onclick="saveProfile()" class="w-full py-2 bg-indigo-500 text-white rounded-lg">Save Profile</button>
425
+ </div>
426
+ </div>
427
+
428
+ <!-- Share Task Modal -->
429
+ <div class="modal" id="share-task-modal">
430
+ <div class="modal-content">
431
+ <div class="flex justify-between items-center mb-4">
432
+ <h3 class="font-bold text-lg">Share Task</h3>
433
+ <button onclick="hideModal('share-task-modal')" class="text-gray-500"><i class="fas fa-times"></i></button>
434
+ </div>
435
+ <div class="mb-4">
436
+ <label class="block text-sm font-medium text-gray-700 mb-1">Task</label>
437
+ <input type="text" id="share-task-name" class="w-full p-2 border border-gray-300 rounded-lg" readonly>
438
+ </div>
439
+ <div class="mb-4">
440
+ <label class="block text-sm font-medium text-gray-700 mb-1">Share Via</label>
441
+ <select id="share-method" class="w-full p-2 border border-gray-300 rounded-lg">
442
+ <option value="email">Email</option>
443
+ <option value="slack">Slack</option>
444
+ <option value="link">Copy Link</option>
445
+ </select>
446
+ </div>
447
+ <div class="mb-4" id="share-email-field">
448
+ <label class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
449
+ <input type="email" id="share-email" class="w-full p-2 border border-gray-300 rounded-lg" placeholder="[email protected]">
450
+ </div>
451
+ <div class="mb-4" id="share-message-field">
452
+ <label class="block text-sm font-medium text-gray-700 mb-1">Message</label>
453
+ <textarea id="share-message" class="w-full p-2 border border-gray-300 rounded-lg" placeholder="Optional message"></textarea>
454
+ </div>
455
+ <button onclick="confirmShareTask()" class="w-full py-2 bg-indigo-500 text-white rounded-lg">Share Task</button>
456
+ </div>
457
+ </div>
458
+
459
+ <!-- Full Journey Modal -->
460
+ <div class="modal" id="journey-modal">
461
+ <div class="modal-content">
462
+ <div class="flex justify-between items-center mb-4">
463
+ <h3 class="font-bold text-lg">Your Goal Journey</h3>
464
+ <button onclick="hideModal('journey-modal')" class="text-gray-500"><i class="fas fa-times"></i></button>
465
+ </div>
466
+ <div class="mb-4">
467
+ <h4 class="font-semibold mb-2" id="journey-goal-title">Reach $10k MRR</h4>
468
+ <div class="relative h-12 mb-6">
469
+ <div class="absolute top-1/2 left-0 right-0 h-2 bg-gray-200 transform -translate-y-1/2"></div>
470
+ <div class="absolute top-1/2 left-0 h-2 bg-indigo-500 transform -translate-y-1/2" style="width: 32%"></div>
471
+
472
+ <div class="absolute top-1/2 left-0 transform -translate-y-1/2 -translate-x-1/2">
473
+ <div class="w-6 h-6 bg-indigo-500 rounded-full flex items-center justify-center text-white text-xs">1</div>
474
+ <div class="text-xs text-center mt-1">Start</div>
475
+ </div>
476
+
477
+ <div class="absolute top-1/2 left-1/3 transform -translate-y-1/2 -translate-x-1/2">
478
+ <div class="w-6 h-6 bg-indigo-500 rounded-full flex items-center justify-center text-white text-xs">2</div>
479
+ <div class="text-xs text-center mt-1">$5k</div>
480
+ </div>
481
+
482
+ <div class="absolute top-1/2 left-2/3 transform -translate-y-1/2 -translate-x-1/2">
483
+ <div class="w-6 h-6 bg-gray-300 rounded-full flex items-center justify-center text-gray-600 text-xs">3</div>
484
+ <div class="text-xs text-center mt-1">$7.5k</div>
485
+ </div>
486
+
487
+ <div class="absolute top-1/2 right-0 transform -translate-y-1/2 translate-x-1/2">
488
+ <div class="w-6 h-6 bg-gray-300 rounded-full flex items-center justify-center text-gray-600 text-xs">4</div>
489
+ <div class="text-xs text-center mt-1">Goal</div>
490
+ </div>
491
+ </div>
492
+ </div>
493
+ <div class="mb-4">
494
+ <h4 class="font-semibold mb-2">Milestones</h4>
495
+ <div class="space-y-3">
496
+ <div class="flex items-start">
497
+ <div class="w-6 h-6 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-500 mr-2 mt-1">
498
+ <i class="fas fa-check text-xs"></i>
499
+ </div>
500
+ <div>
501
+ <h5 class="font-medium">Started the journey</h5>
502
+ <p class="text-sm text-gray-600">You set your goal to reach $10k MRR</p>
503
+ <p class="text-xs text-gray-500">3 days ago</p>
504
+ </div>
505
+ </div>
506
+ <div class="flex items-start">
507
+ <div class="w-6 h-6 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-500 mr-2 mt-1">
508
+ <i class="fas fa-check text-xs"></i>
509
+ </div>
510
+ <div>
511
+ <h5 class="font-medium">Reached $3k MRR</h5>
512
+ <p class="text-sm text-gray-600">You hit your first milestone</p>
513
+ <p class="text-xs text-gray-500">1 day ago</p>
514
+ </div>
515
+ </div>
516
+ <div class="flex items-start">
517
+ <div class="w-6 h-6 bg-gray-100 rounded-full flex items-center justify-center text-gray-400 mr-2 mt-1">
518
+ <i class="fas fa-lock text-xs"></i>
519
+ </div>
520
+ <div>
521
+ <h5 class="font-medium text-gray-500">Reach $5k MRR</h5>
522
+ <p class="text-sm text-gray-500">Next milestone</p>
523
+ </div>
524
+ </div>
525
+ </div>
526
+ </div>
527
+ <button onclick="hideModal('journey-modal')" class="w-full py-2 bg-indigo-500 text-white rounded-lg">Close</button>
528
+ </div>
529
+ </div>
530
  </div>
531
 
532
  <script>
533
+ // App State
534
+ const appState = {
535
+ currentView: 'home',
536
+ tasks: [
537
+ {
538
+ id: 1,
539
+ name: "Optimize pricing page conversion",
540
+ description: "Current conversion: 2.1% → Target: 4.5%",
541
+ priority: "high",
542
+ action: "do",
543
+ category: "ux",
544
+ completed: false
545
+ },
546
+ {
547
+ id: 2,
548
+ name: "Create case study for top customer",
549
+ description: "Will help with sales conversations",
550
+ priority: "medium",
551
+ action: "do",
552
+ category: "content",
553
+ completed: false
554
+ },
555
+ {
556
+ id: 3,
557
+ name: "Update social media banners",
558
+ description: "Consistent branding across platforms",
559
+ priority: "low",
560
+ action: "delegate",
561
+ category: "design",
562
+ completed: false
563
+ }
564
+ ],
565
+ goal: {
566
+ title: "Reach $10k MRR",
567
+ current: "$3,200 MRR",
568
+ target: "$10,000 MRR",
569
+ progress: 32
570
+ },
571
+ user: {
572
+ name: "Alex Founder",
573
+ email: "[email protected]",
574
+ level: 3,
575
+ xp: 245,
576
+ maxXp: 400,
577
+ streak: 7,
578
+ apiKey: ""
579
+ },
580
+ chatMessages: [
581
+ {
582
+ sender: "ai",
583
+ content: "Hi there! I'm your SkyAI assistant. How can I help you with your goal today?"
584
+ }
585
+ ],
586
+ currentTaskToShare: null
587
+ };
588
+
589
+ // Initialize the app
590
  document.addEventListener('DOMContentLoaded', function() {
591
+ loadStateFromLocalStorage();
592
+ renderCurrentView();
593
+ updateXPBar();
594
+
595
+ // Set up event listeners for share method change
596
+ document.getElementById('share-method').addEventListener('change', function() {
597
+ const method = this.value;
598
+ const emailField = document.getElementById('share-email-field');
599
+ const messageField = document.getElementById('share-message-field');
600
+
601
+ if (method === 'email') {
602
+ emailField.style.display = 'block';
603
+ messageField.style.display = 'block';
604
+ } else if (method === 'slack') {
605
+ emailField.style.display = 'none';
606
+ messageField.style.display = 'block';
607
+ } else {
608
+ emailField.style.display = 'none';
609
+ messageField.style.display = 'none';
610
+ }
611
+ });
612
+ });
613
+
614
+ // Load state from localStorage
615
+ function loadStateFromLocalStorage() {
616
+ const savedState = localStorage.getItem('skyaiState');
617
+ if (savedState) {
618
+ Object.assign(appState, JSON.parse(savedState));
619
+ }
620
+ updateUIFromState();
621
+ }
622
+
623
+ // Save state to localStorage
624
+ function saveStateToLocalStorage() {
625
+ localStorage.setItem('skyaiState', JSON.stringify(appState));
626
+ }
627
+
628
+ // Update UI from app state
629
+ function updateUIFromState() {
630
+ // Update user info
631
+ document.getElementById('username').textContent = appState.user.name;
632
+ document.getElementById('user-level').textContent = appState.user.level;
633
+ document.getElementById('current-xp').textContent = appState.user.xp;
634
+ document.getElementById('max-xp').textContent = appState.user.maxXp;
635
+ document.getElementById('streak-count').textContent = appState.user.streak;
636
+
637
+ // Update goal info
638
+ document.getElementById('current-goal-title').textContent = appState.goal.title;
639
+ document.getElementById('current-goal-description').textContent = `Current: ${appState.goal.current} → Goal: ${appState.goal.target}`;
640
+ document.getElementById('goal-progress-bar').style.width = `${appState.goal.progress}%`;
641
+
642
+ // Update profile form
643
+ document.getElementById('profile-name').value = appState.user.name;
644
+ document.getElementById('profile-email').value = appState.user.email;
645
+ document.getElementById('api-key').value = appState.user.apiKey;
646
+ document.getElementById('profile-streak').value = appState.user.streak;
647
+ document.getElementById('profile-level').value = appState.user.level;
648
+ document.getElementById('profile-xp').value = appState.user.xp;
649
+ document.getElementById('profile-max-xp').value = appState.user.maxXp;
650
+
651
+ // Update edit goal form
652
+ document.getElementById('edit-goal-title').value = appState.goal.title;
653
+ document.getElementById('edit-current-status').value = appState.goal.current;
654
+ document.getElementById('edit-target-goal').value = appState.goal.target;
655
+
656
+ // Update XP bar
657
+ updateXPBar();
658
+
659
+ // Update tasks
660
+ renderTasks();
661
+ }
662
+
663
+ // Update XP bar
664
+ function updateXPBar() {
665
+ const percentage = (appState.user.xp / appState.user.maxXp) * 100;
666
+ document.getElementById('xp-bar').style.width = `${percentage}%`;
667
+ }
668
+
669
+ // Render tasks
670
+ function renderTasks() {
671
+ const priorityTasksContainer = document.getElementById('priority-tasks');
672
+ const delegateTasksContainer = document.getElementById('delegate-tasks');
673
+
674
+ // Clear existing tasks
675
+ priorityTasksContainer.innerHTML = '';
676
+ delegateTasksContainer.innerHTML = '';
677
+
678
+ // Filter and render tasks
679
+ appState.tasks.filter(task => !task.completed).forEach(task => {
680
+ const taskElement = createTaskElement(task);
681
+ if (task.action === 'do') {
682
+ priorityTasksContainer.appendChild(taskElement);
683
+ } else {
684
+ delegateTasksContainer.appendChild(taskElement);
685
+ }
686
+ });
687
+ }
688
+
689
+ // Create task element
690
+ function createTaskElement(task) {
691
+ const taskCard = document.createElement('div');
692
+ taskCard.className = 'task-card bg-white rounded-lg shadow-md p-4 border-l-4';
693
+
694
+ // Set border color based on priority
695
+ if (task.priority === 'high') {
696
+ taskCard.classList.add('border-blue-500');
697
+ } else if (task.priority === 'medium') {
698
+ taskCard.classList.add('border-orange-500');
699
+ } else {
700
+ taskCard.classList.add('border-gray-400');
701
+ }
702
+
703
+ // Priority badge text and color
704
+ let priorityText, priorityBg;
705
+ if (task.priority === 'high') {
706
+ priorityText = 'HIGH IMPACT';
707
+ priorityBg = 'bg-blue-100 text-blue-800';
708
+ } else if (task.priority === 'medium') {
709
+ priorityText = 'MEDIUM IMPACT';
710
+ priorityBg = 'bg-orange-100 text-orange-800';
711
+ } else {
712
+ priorityText = 'LOW IMPACT';
713
+ priorityBg = 'bg-gray-100 text-gray-800';
714
+ }
715
+
716
+ // Action badge text and color
717
+ const actionText = task.action === 'do' ? 'DO' : 'DELEGATE';
718
+ const actionBg = task.action === 'do' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800';
719
+
720
+ // Category badge text and color
721
+ let categoryText, categoryBg;
722
+ switch(task.category) {
723
+ case 'ux':
724
+ categoryText = 'UX';
725
+ categoryBg = 'bg-yellow-100 text-yellow-800';
726
+ break;
727
+ case 'content':
728
+ categoryText = 'CONTENT';
729
+ categoryBg = 'bg-purple-100 text-purple-800';
730
+ break;
731
+ case 'design':
732
+ categoryText = 'DESIGN';
733
+ categoryBg = 'bg-blue-100 text-blue-800';
734
+ break;
735
+ case 'marketing':
736
+ categoryText = 'MARKETING';
737
+ categoryBg = 'bg-green-100 text-green-800';
738
+ break;
739
+ case 'development':
740
+ categoryText = 'DEV';
741
+ categoryBg = 'bg-indigo-100 text-indigo-800';
742
+ break;
743
+ default:
744
+ categoryText = task.category.toUpperCase();
745
+ categoryBg = 'bg-gray-100 text-gray-800';
746
+ }
747
+
748
+ // XP value for completing the task
749
+ const xpValue = task.priority === 'high' ? 25 : task.priority === 'medium' ? 15 : 10;
750
+
751
+ // Build task card HTML
752
+ taskCard.innerHTML = `
753
+ <div class="flex justify-between items-start mb-2">
754
+ <h3 class="font-medium">${task.name}</h3>
755
+ <span class="text-xs ${priorityBg} px-2 py-1 rounded-full">${priorityText}</span>
756
+ </div>
757
+ <p class="text-sm text-gray-600 mb-3">${task.description}</p>
758
+ <div class="flex justify-between items-center">
759
+ <div class="flex space-x-2">
760
+ <span class="text-xs ${actionBg} px-2 py-1 rounded-full">${actionText}</span>
761
+ <span class="text-xs ${categoryBg} px-2 py-1 rounded-full">${categoryText}</span>
762
+ </div>
763
+ <div class="flex space-x-2">
764
+ <button class="text-blue-500 text-sm" onclick="shareTask('${task.name}')"><i class="fas fa-share-alt"></i></button>
765
+ ${task.action === 'do' ?
766
+ `<button class="text-green-500 text-sm" onclick="completeTask(this, ${xpValue})"><i class="fas fa-check-circle"></i></button>` :
767
+ `<button class="text-blue-500 text-sm" onclick="sendTask('${task.name}')"><i class="fas fa-paper-plane"></i></button>`
768
+ }
769
+ </div>
770
+ </div>
771
+ `;
772
+
773
+ return taskCard;
774
+ }
775
+
776
+ // Modal functions
777
+ function showModal(modalId) {
778
+ document.getElementById(modalId).style.display = 'flex';
779
+ }
780
+
781
+ function hideModal(modalId) {
782
+ document.getElementById(modalId).style.display = 'none';
783
+ }
784
+
785
+ // Navigation functions
786
+ function showHome() {
787
+ appState.currentView = 'home';
788
+ renderCurrentView();
789
+ }
790
+
791
+ function showJourney() {
792
+ showModal('journey-modal');
793
+ }
794
+
795
+ function showCommunity() {
796
+ appState.currentView = 'community';
797
+ renderCurrentView();
798
+ // In a real app, we would fetch and display community content here
799
+ alert('Community feature coming soon!');
800
+ showHome(); // Fall back to home for now
801
+ }
802
+
803
+ function showProfile() {
804
+ showModal('profile-modal');
805
+ }
806
+
807
+ function renderCurrentView() {
808
+ // In a real app, we would render different views here
809
+ // For this demo, we're mainly using modals, so we just ensure home is shown
810
+ document.getElementById('main-content').style.display = 'block';
811
+ }
812
+
813
+ // Goal functions
814
+ function showEditGoalModal() {
815
+ showModal('edit-goal-modal');
816
+ }
817
+
818
+ function saveGoal() {
819
+ appState.goal.title = document.getElementById('edit-goal-title').value;
820
+ appState.goal.current = document.getElementById('edit-current-status').value;
821
+ appState.goal.target = document.getElementById('edit-target-goal').value;
822
+
823
+ // Calculate new progress (simplified for demo)
824
+ const currentValue = parseFloat(appState.goal.current.replace(/[^0-9.]/g, ''));
825
+ const targetValue = parseFloat(appState.goal.target.replace(/[^0-9.]/g, ''));
826
+ appState.goal.progress = Math.min(100, Math.round((currentValue / targetValue) * 100));
827
+
828
+ updateUIFromState();
829
+ saveStateToLocalStorage();
830
+ hideModal('edit-goal-modal');
831
+
832
+ // Update AI recommendation
833
+ updateAIRecommendation();
834
+ }
835
+
836
+ function deleteGoal() {
837
+ if (confirm('Are you sure you want to delete this goal?')) {
838
+ appState.goal = {
839
+ title: "New Goal",
840
+ current: "Current status",
841
+ target: "Target goal",
842
+ progress: 0
843
+ };
844
+ updateUIFromState();
845
+ saveStateToLocalStorage();
846
+ hideModal('edit-goal-modal');
847
+ }
848
+ }
849
+
850
+ function showFullJourney() {
851
+ document.getElementById('journey-goal-title').textContent = appState.goal.title;
852
+ showModal('journey-modal');
853
+ }
854
+
855
+ function selectMapNode(index) {
856
  const nodes = document.querySelectorAll('.map-node');
857
+ nodes.forEach(node => node.classList.remove('active'));
858
+ nodes[index].classList.add('active');
859
+
860
+ // In a real app, we might show details for this milestone
861
+ }
862
+
863
+ // Task functions
864
+ function showAddTaskModal() {
865
+ showModal('add-task-modal');
866
+ }
867
+
868
+ function addNewTask() {
869
+ const name = document.getElementById('task-name').value;
870
+ const description = document.getElementById('task-description').value;
871
+ const priority = document.getElementById('task-priority').value;
872
+ const action = document.getElementById('task-action').value;
873
+ const category = document.getElementById('task-category').value;
874
+
875
+ if (!name) {
876
+ alert('Please enter a task name');
877
+ return;
878
+ }
879
+
880
+ const newTask = {
881
+ id: Date.now(), // Simple unique ID
882
+ name,
883
+ description: description || 'No description',
884
+ priority,
885
+ action,
886
+ category,
887
+ completed: false
888
+ };
889
+
890
+ appState.tasks.push(newTask);
891
+ renderTasks();
892
+ saveStateToLocalStorage();
893
+ hideModal('add-task-modal');
894
+
895
+ // Reset form
896
+ document.getElementById('task-name').value = '';
897
+ document.getElementById('task-description').value = '';
898
+ }
899
+
900
+ function completeTask(button, xp) {
901
+ const taskCard = button.closest('.task-card');
902
+ const taskName = taskCard.querySelector('h3').textContent;
903
+
904
+ // Find and mark task as completed
905
+ const task = appState.tasks.find(t => t.name === taskName);
906
+ if (task) {
907
+ task.completed = true;
908
+ }
909
+
910
+ // Add XP
911
+ appState.user.xp += xp;
912
+
913
+ // Check for level up
914
+ if (appState.user.xp >= appState.user.maxXp) {
915
+ appState.user.level += 1;
916
+ appState.user.xp = appState.user.xp - appState.user.maxXp;
917
+ appState.user.maxXp = Math.round(appState.user.maxXp * 1.5);
918
+ alert(`Level Up! You're now level ${appState.user.level}`);
919
+ }
920
+
921
+ // Update streak (simplified for demo)
922
+ appState.user.streak += 1;
923
+
924
+ // Animate completion
925
+ taskCard.classList.add('opacity-50');
926
+ setTimeout(() => {
927
+ renderTasks();
928
+ updateUIFromState();
929
+ saveStateToLocalStorage();
930
+ }, 300);
931
+ }
932
+
933
+ function shareTask(taskName) {
934
+ appState.currentTaskToShare = taskName;
935
+ document.getElementById('share-task-name').value = taskName;
936
+ showModal('share-task-modal');
937
+ }
938
+
939
+ function confirmShareTask() {
940
+ const method = document.getElementById('share-method').value;
941
+ const taskName = appState.currentTaskToShare;
942
+
943
+ let message = `I'd like to share this task with you: ${taskName}`;
944
+ if (method === 'email') {
945
+ const email = document.getElementById('share-email').value;
946
+ if (!email) {
947
+ alert('Please enter an email address');
948
+ return;
949
+ }
950
+ message += `\n\nSent to: ${email}`;
951
+ }
952
+
953
+ const userMessage = document.getElementById('share-message').value;
954
+ if (userMessage) {
955
+ message += `\n\nMessage: ${userMessage}`;
956
+ }
957
+
958
+ alert(`Task shared via ${method}!\n\n${message}`);
959
+ hideModal('share-task-modal');
960
+
961
+ // In a real app, we would actually send the email or Slack message here
962
+ }
963
+
964
+ function assignTask(taskName) {
965
+ alert(`Task "${taskName}" assigned to a team member!`);
966
+ // In a real app, we would have a proper assignment flow
967
+ }
968
+
969
+ function sendTask(taskName) {
970
+ alert(`Task "${taskName}" sent to external tool!`);
971
+ // In a real app, we would integrate with actual tools
972
+ }
973
+
974
+ function showAllTasks(type) {
975
+ alert(`Showing all ${type} tasks`);
976
+ // In a real app, we would navigate to a task list view
977
+ }
978
+
979
+ // Profile functions
980
+ function saveProfile() {
981
+ appState.user.name = document.getElementById('profile-name').value;
982
+ appState.user.email = document.getElementById('profile-email').value;
983
+ appState.user.apiKey = document.getElementById('api-key').value;
984
+ appState.user.streak = parseInt(document.getElementById('profile-streak').value);
985
+ appState.user.level = parseInt(document.getElementById('profile-level').value);
986
+ appState.user.xp = parseInt(document.getElementById('profile-xp').value);
987
+ appState.user.maxXp = parseInt(document.getElementById('profile-max-xp').value);
988
+
989
+ updateUIFromState();
990
+ saveStateToLocalStorage();
991
+ hideModal('profile-modal');
992
+ }
993
+
994
+ // AI functions
995
+ function showAIChatModal() {
996
+ // Render chat messages
997
+ const chatContainer = document.getElementById('chat-messages');
998
+ chatContainer.innerHTML = '';
999
+
1000
+ appState.chatMessages.forEach(message => {
1001
+ const messageDiv = document.createElement('div');
1002
+ messageDiv.className = `chat-message ${message.sender === 'user' ? 'user-message' : 'ai-message'}`;
1003
+ messageDiv.textContent = message.content;
1004
+ chatContainer.appendChild(messageDiv);
1005
  });
1006
 
1007
+ showModal('ai-chat-modal');
1008
+ document.getElementById('chat-input').focus();
1009
+ }
1010
+
1011
+ function sendChatMessage() {
1012
+ const input = document.getElementById('chat-input');
1013
+ const message = input.value.trim();
1014
+
1015
+ if (!message) return;
1016
+
1017
+ // Add user message to chat
1018
+ appState.chatMessages.push({
1019
+ sender: 'user',
1020
+ content: message
1021
  });
1022
 
1023
+ // Clear input
1024
+ input.value = '';
1025
+
1026
+ // Show "AI is typing" indicator
1027
+ const chatContainer = document.getElementById('chat-messages');
1028
+ const typingIndicator = document.createElement('div');
1029
+ typingIndicator.className = 'chat-message ai-message';
1030
+ typingIndicator.textContent = 'AI is typing...';
1031
+ chatContainer.appendChild(typingIndicator);
1032
+ chatContainer.scrollTop = chatContainer.scrollHeight;
1033
+
1034
+ // Process message with AI (simulated for demo)
1035
  setTimeout(() => {
1036
+ // Remove typing indicator
1037
+ chatContainer.removeChild(typingIndicator);
1038
+
1039
+ // Add AI response
1040
+ const aiResponse = getAIResponse(message);
1041
+ appState.chatMessages.push({
1042
+ sender: 'ai',
1043
+ content: aiResponse
1044
+ });
1045
+
1046
+ // Update chat UI
1047
+ const messageDiv = document.createElement('div');
1048
+ messageDiv.className = 'chat-message ai-message';
1049
+ messageDiv.textContent = aiResponse;
1050
+ chatContainer.appendChild(messageDiv);
1051
+ chatContainer.scrollTop = chatContainer.scrollHeight;
1052
+
1053
+ saveStateToLocalStorage();
1054
+ }, 1000);
1055
+ }
1056
+
1057
+ function getAIResponse(message) {
1058
+ // In a real app, this would call the Deepseek API
1059
+ // For demo purposes, we're using simple pattern matching
1060
+
1061
+ // Check if API key is set
1062
+ if (!appState.user.apiKey) {
1063
+ return "Please set your Deepseek API key in your profile to use the full AI capabilities. For now, I can only provide basic responses.";
1064
+ }
1065
+
1066
+ // Simple pattern matching for demo purposes
1067
+ const lowerMessage = message.toLowerCase();
1068
+
1069
+ if (lowerMessage.includes('hello') || lowerMessage.includes('hi')) {
1070
+ return "Hello! How can I assist you with your business goals today?";
1071
+ } else if (lowerMessage.includes('goal') || lowerMessage.includes('target')) {
1072
+ return `Based on your current goal to ${appState.goal.title}, I recommend focusing on high-impact activities that directly contribute to this outcome. Have you considered optimizing your conversion funnel?`;
1073
+ } else if (lowerMessage.includes('task') || lowerMessage.includes('prioritize')) {
1074
+ return "For maximum impact, prioritize tasks that directly affect your revenue or customer acquisition. Delegate or automate lower-impact tasks when possible.";
1075
+ } else if (lowerMessage.includes('help') || lowerMessage.includes('advice')) {
1076
+ return "I'd be happy to help! Could you provide more details about what you're working on? For example, are you looking for marketing, product, or operational advice?";
1077
+ } else if (lowerMessage.includes('mrr') || lowerMessage.includes('revenue')) {
1078
+ return "To increase your MRR, focus on: 1) Improving conversion rates, 2) Reducing churn, and 3) Expanding your offerings. Would you like me to generate specific tactics for any of these areas?";
1079
+ } else {
1080
+ return "I'm here to help you achieve your business goals. Could you clarify or provide more details about your question?";
1081
+ }
1082
+ }
1083
+
1084
+ function updateAIRecommendation() {
1085
+ // In a real app, this would call the Deepseek API with the current goal
1086
+ // For demo, we're using a simple template
1087
+ document.getElementById('ai-recommendation').textContent =
1088
+ `"Based on your current progress toward ${appState.goal.title}, I recommend focusing on high-leverage activities that will move you from ${appState.goal.current} to ${appState.goal.target}."`;
1089
+ }
1090
+
1091
+ // Handle Enter key in chat
1092
+ document.getElementById('chat-input').addEventListener('keypress', function(e) {
1093
+ if (e.key === 'Enter') {
1094
+ sendChatMessage();
1095
+ }
1096
  });
1097
  </script>
1098
  <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/sky-ai-goals-game" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- App Overview and Objectives Skyai is a mobile-first app (with web support) designed to help entrepreneurs and founders accomplish meaningful business goals using AI and community collaboration. Users input their current state and end goal, and Skyai identifies high-leverage tasks to focus on, while offering options to delegate lower-priority tasks externally. The experience is gamified with levels, XP, streaks, and a visual adventure route. Target Audience Entrepreneurs Founders Solo business builders Early-stage startup teams Core Features and Functionality Goal Setup: Users input a simple "where you're at" and "where you want to go" prompt. AI Task Prioritization: Smart assistant filters for only high-leverage tasks to do, and suggests others to delegate. External Delegation: Export/share tasks to collaborators or tools (e.g., email, Slack). Gamified Progress: XP, streaks, levels, and a visual adventure route showing milestones. Social Sharing: Users can post goal wins, progress, and behind-the-scenes videos; app pulls from existing social posts or allows manual sharing. In-App Feed: Community feed showing achievements, shared learnings, and motivational content. High-Level Technical Stack Recommendations Frontend: React Native (mobile), React (web via Expo or shared codebase) Backend: Supabase (auth, database, file storage) AI: OpenAI API (task filtering, delegation suggestions) Analytics: PostHog or Amplitude (simple, scalable event tracking) Social Integration: Native sharing; future OAuth integrations to fetch public posts Conceptual Data Model User: ID, email, XP, level, streaks, saved goals, social handles Goal: Title, current status, desired outcome, associated tasks, progress Task: Description, category (do, delegate), status, linked user or external tool Post/Share: Type (goal, video, update), source (manual or fetched), visibility User Interface Design Principles Mobile-first, touch-friendly UI Game-style visual maps for goal journey Minimalist and playful design with micro-animations Encouraging copy and feedback loops (level-up animations, streak rewards) Security Considerations Supabase handles secure authentication (email/magic links) User data encryption at rest and in transit Privacy-first defaults for shared posts and videos Development Phases or Milestones MVP: Core goal input and task prioritization Task delegation via sharing Visual map with milestone indicators Gamification: XP and level tracking Phase 2: In-app social feed and sharing Video uploads and goal tutorials OAuth-based post fetching from social accounts Phase 3: AI agents for in-app task execution Real-time collaboration Marketplace for hiring or team support Potential Challenges and Solutions Overcomplexity early on: Keep the MVP lean and fun; expand only once core loop is sticky. AI accuracy: Use guided prompts to improve input quality. User retention: Gamify with streaks, unlockables, and social encouragement.
 
 
1
+ App Overview and Objectives Skyai is a mobile-first app (with web support) designed to help entrepreneurs and founders accomplish meaningful business goals using AI and community collaboration. Users input their current state and end goal, and Skyai identifies high-leverage tasks to focus on, while offering options to delegate lower-priority tasks externally. The experience is gamified with levels, XP, streaks, and a visual adventure route. Target Audience Entrepreneurs Founders Solo business builders Early-stage startup teams Core Features and Functionality Goal Setup: Users input a simple "where you're at" and "where you want to go" prompt. AI Task Prioritization: Smart assistant filters for only high-leverage tasks to do, and suggests others to delegate. External Delegation: Export/share tasks to collaborators or tools (e.g., email, Slack). Gamified Progress: XP, streaks, levels, and a visual adventure route showing milestones. Social Sharing: Users can post goal wins, progress, and behind-the-scenes videos; app pulls from existing social posts or allows manual sharing. In-App Feed: Community feed showing achievements, shared learnings, and motivational content. High-Level Technical Stack Recommendations Frontend: React Native (mobile), React (web via Expo or shared codebase) Backend: Supabase (auth, database, file storage) AI: OpenAI API (task filtering, delegation suggestions) Analytics: PostHog or Amplitude (simple, scalable event tracking) Social Integration: Native sharing; future OAuth integrations to fetch public posts Conceptual Data Model User: ID, email, XP, level, streaks, saved goals, social handles Goal: Title, current status, desired outcome, associated tasks, progress Task: Description, category (do, delegate), status, linked user or external tool Post/Share: Type (goal, video, update), source (manual or fetched), visibility User Interface Design Principles Mobile-first, touch-friendly UI Game-style visual maps for goal journey Minimalist and playful design with micro-animations Encouraging copy and feedback loops (level-up animations, streak rewards) Security Considerations Supabase handles secure authentication (email/magic links) User data encryption at rest and in transit Privacy-first defaults for shared posts and videos Development Phases or Milestones MVP: Core goal input and task prioritization Task delegation via sharing Visual map with milestone indicators Gamification: XP and level tracking Phase 2: In-app social feed and sharing Video uploads and goal tutorials OAuth-based post fetching from social accounts Phase 3: AI agents for in-app task execution Real-time collaboration Marketplace for hiring or team support Potential Challenges and Solutions Overcomplexity early on: Keep the MVP lean and fun; expand only once core loop is sticky. AI accuracy: Use guided prompts to improve input quality. User retention: Gamify with streaks, unlockables, and social encouragement.
2
+ Make the app fully functional where all the buttons work and i can put my deepseek api key in my profile to use the ai capabilities