Hugging Face's logo

Spaces:
oaxacagold
/
oaxaca-space
Running

App Files Community
oaxacagold commited on
Commit
e99159f
·
verified ·
1 Parent(s): abf541e

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +816 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Oaxaca Space
3
- emoji: 💻
4
- colorFrom: pink
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: oaxaca-space
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,816 @@
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>BrewTask - Food & Kombucha Business Task Manager</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
+ <style>
10
+ .task-card {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .task-card:hover {
14
+ transform: translateY(-2px);
15
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
16
+ }
17
+ .dropzone {
18
+ min-height: 200px;
19
+ transition: background-color 0.3s;
20
+ }
21
+ .dropzone.active {
22
+ background-color: rgba(167, 243, 208, 0.3);
23
+ }
24
+ .priority-low {
25
+ border-left: 4px solid #10B981;
26
+ }
27
+ .priority-medium {
28
+ border-left: 4px solid #F59E0B;
29
+ }
30
+ .priority-high {
31
+ border-left: 4px solid #EF4444;
32
+ }
33
+ .ai-suggestion {
34
+ animation: pulse 2s infinite;
35
+ }
36
+ @keyframes pulse {
37
+ 0% { background-color: rgba(236, 253, 245, 1); }
38
+ 50% { background-color: rgba(236, 253, 245, 0.5); }
39
+ 100% { background-color: rgba(236, 253, 245, 1); }
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="bg-gray-50 font-sans">
44
+ <div class="container mx-auto px-4 py-8">
45
+ <!-- Header -->
46
+ <header class="flex justify-between items-center mb-8">
47
+ <div class="flex items-center">
48
+ <i class="fas fa-coffee text-3xl text-amber-800 mr-3"></i>
49
+ <h1 class="text-3xl font-bold text-gray-800">BrewTask</h1>
50
+ </div>
51
+ <div class="flex space-x-4">
52
+ <button id="analyticsBtn" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">
53
+ <i class="fas fa-chart-bar mr-2"></i>Analytics
54
+ </button>
55
+ <button id="settingsBtn" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition">
56
+ <i class="fas fa-cog mr-2"></i>Settings
57
+ </button>
58
+ </div>
59
+ </header>
60
+
61
+ <!-- Main Content -->
62
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
63
+ <!-- Sidebar -->
64
+ <div class="lg:col-span-1 bg-white rounded-xl shadow p-6">
65
+ <div class="mb-6">
66
+ <h2 class="text-xl font-semibold text-gray-700 mb-4">Business Areas</h2>
67
+ <ul class="space-y-2">
68
+ <li><button class="category-btn w-full text-left px-4 py-2 rounded-lg hover:bg-green-50 transition" data-category="all"><i class="fas fa-list-ul mr-2 text-green-600"></i>All Tasks</button></li>
69
+ <li><button class="category-btn w-full text-left px-4 py-2 rounded-lg hover:bg-green-50 transition" data-category="kombucha"><i class="fas fa-wine-bottle mr-2 text-purple-600"></i>Kombucha Production</button></li>
70
+ <li><button class="category-btn w-full text-left px-4 py-2 rounded-lg hover:bg-green-50 transition" data-category="coffee"><i class="fas fa-coffee mr-2 text-amber-600"></i>Coffee Truck</button></li>
71
+ <li><button class="category-btn w-full text-left px-4 py-2 rounded-lg hover:bg-green-50 transition" data-category="marketing"><i class="fas fa-bullhorn mr-2 text-blue-600"></i>Marketing</button></li>
72
+ <li><button class="category-btn w-full text-left px-4 py-2 rounded-lg hover:bg-green-50 transition" data-category="inventory"><i class="fas fa-boxes mr-2 text-orange-600"></i>Inventory</button></li>
73
+ <li><button class="category-btn w-full text-left px-4 py-2 rounded-lg hover:bg-green-50 transition" data-category="admin"><i class="fas fa-file-invoice-dollar mr-2 text-gray-600"></i>Admin</button></li>
74
+ </ul>
75
+ </div>
76
+
77
+ <div class="mb-6">
78
+ <h2 class="text-xl font-semibold text-gray-700 mb-4">Quick Actions</h2>
79
+ <button id="quickTaskBtn" class="w-full mb-3 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition flex items-center justify-center">
80
+ <i class="fas fa-plus mr-2"></i>Add Task
81
+ </button>
82
+ <button id="aiSuggestBtn" class="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center justify-center">
83
+ <i class="fas fa-robot mr-2"></i>AI Suggestions
84
+ </button>
85
+ </div>
86
+
87
+ <div class="mb-6">
88
+ <h2 class="text-xl font-semibold text-gray-700 mb-4">Task Filters</h2>
89
+ <select id="priorityFilter" class="w-full mb-3 px-4 py-2 border rounded-lg">
90
+ <option value="all">All Priorities</option>
91
+ <option value="high">High Priority</option>
92
+ <option value="medium">Medium Priority</option>
93
+ <option value="low">Low Priority</option>
94
+ </select>
95
+ <select id="statusFilter" class="w-full px-4 py-2 border rounded-lg">
96
+ <option value="all">All Statuses</option>
97
+ <option value="todo">To Do</option>
98
+ <option value="in-progress">In Progress</option>
99
+ <option value="done">Completed</option>
100
+ </select>
101
+ </div>
102
+
103
+ <div class="p-4 bg-green-50 rounded-lg">
104
+ <h3 class="font-medium text-green-800 mb-2">AI Assistant</h3>
105
+ <p class="text-sm text-green-700 mb-3">Need help prioritizing? Ask our AI assistant for task recommendations.</p>
106
+ <button id="askAIBtn" class="w-full px-3 py-1 bg-green-100 text-green-800 text-sm rounded hover:bg-green-200 transition">
107
+ <i class="fas fa-comment-dots mr-1"></i>Ask AI
108
+ </button>
109
+ </div>
110
+ </div>
111
+
112
+ <!-- Task Boards -->
113
+ <div class="lg:col-span-3 space-y-6">
114
+ <!-- Task Input -->
115
+ <div class="bg-white rounded-xl shadow p-6">
116
+ <div class="flex items-center mb-4">
117
+ <i class="fas fa-tasks text-xl text-green-600 mr-2"></i>
118
+ <h2 class="text-xl font-semibold text-gray-700">Add New Task</h2>
119
+ </div>
120
+ <form id="taskForm" class="space-y-4">
121
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
122
+ <div>
123
+ <label for="taskTitle" class="block text-sm font-medium text-gray-700 mb-1">Task Title</label>
124
+ <input type="text" id="taskTitle" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500" placeholder="E.g., Brew new batch of kombucha" required>
125
+ </div>
126
+ <div>
127
+ <label for="taskCategory" class="block text-sm font-medium text-gray-700 mb-1">Category</label>
128
+ <select id="taskCategory" class="w-full px-4 py-2 border rounded-lg">
129
+ <option value="kombucha">Kombucha Production</option>
130
+ <option value="coffee">Coffee Truck</option>
131
+ <option value="marketing">Marketing</option>
132
+ <option value="inventory">Inventory</option>
133
+ <option value="admin">Admin</option>
134
+ </select>
135
+ </div>
136
+ </div>
137
+
138
+ <div>
139
+ <label for="taskDescription" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
140
+ <textarea id="taskDescription" rows="3" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500" placeholder="Provide details about the task..."></textarea>
141
+ </div>
142
+
143
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
144
+ <div>
145
+ <label for="taskPriority" class="block text-sm font-medium text-gray-700 mb-1">Priority</label>
146
+ <select id="taskPriority" class="w-full px-4 py-2 border rounded-lg">
147
+ <option value="low">Low</option>
148
+ <option value="medium">Medium</option>
149
+ <option value="high">High</option>
150
+ </select>
151
+ </div>
152
+ <div>
153
+ <label for="taskDueDate" class="block text-sm font-medium text-gray-700 mb-1">Due Date</label>
154
+ <input type="date" id="taskDueDate" class="w-full px-4 py-2 border rounded-lg">
155
+ </div>
156
+ <div>
157
+ <label for="taskAssignee" class="block text-sm font-medium text-gray-700 mb-1">Assignee</label>
158
+ <select id="taskAssignee" class="w-full px-4 py-2 border rounded-lg">
159
+ <option value="me">Myself</option>
160
+ <option value="team">Team</option>
161
+ <option value="vendor">Vendor</option>
162
+ </select>
163
+ </div>
164
+ </div>
165
+
166
+ <div class="flex items-center justify-between">
167
+ <div class="flex items-center space-x-4">
168
+ <div class="flex items-center">
169
+ <input type="checkbox" id="taskReminder" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded">
170
+ <label for="taskReminder" class="ml-2 block text-sm text-gray-700">Set Reminder</label>
171
+ </div>
172
+ <div class="flex items-center">
173
+ <input type="checkbox" id="taskCalendar" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded">
174
+ <label for="taskCalendar" class="ml-2 block text-sm text-gray-700">Add to Calendar</label>
175
+ </div>
176
+ </div>
177
+ <button type="submit" class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">
178
+ <i class="fas fa-plus mr-2"></i>Add Task
179
+ </button>
180
+ </div>
181
+ </form>
182
+ </div>
183
+
184
+ <!-- AI Suggestions Panel (hidden by default) -->
185
+ <div id="aiSuggestionsPanel" class="bg-white rounded-xl shadow p-6 hidden">
186
+ <div class="flex items-center justify-between mb-4">
187
+ <div class="flex items-center">
188
+ <i class="fas fa-robot text-xl text-blue-600 mr-2"></i>
189
+ <h2 class="text-xl font-semibold text-gray-700">AI Task Suggestions</h2>
190
+ </div>
191
+ <button id="closeAIBtn" class="text-gray-500 hover:text-gray-700">
192
+ <i class="fas fa-times"></i>
193
+ </button>
194
+ </div>
195
+ <div class="space-y-3">
196
+ <div class="ai-suggestion p-4 rounded-lg border border-blue-200">
197
+ <div class="flex justify-between items-start">
198
+ <div>
199
+ <h3 class="font-medium text-blue-800">Schedule kombucha second fermentation</h3>
200
+ <p class="text-sm text-gray-600 mt-1">Based on your production cycle, it's time to start the second fermentation for batch #KB-0423.</p>
201
+ </div>
202
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Add Task</button>
203
+ </div>
204
+ </div>
205
+ <div class="ai-suggestion p-4 rounded-lg border border-blue-200">
206
+ <div class="flex justify-between items-start">
207
+ <div>
208
+ <h3 class="font-medium text-blue-800">Restock coffee beans inventory</h3>
209
+ <p class="text-sm text-gray-600 mt-1">Inventory levels for Colombian beans are below optimal. Suggested reorder quantity: 25kg.</p>
210
+ </div>
211
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Add Task</button>
212
+ </div>
213
+ </div>
214
+ <div class="ai-suggestion p-4 rounded-lg border border-blue-200">
215
+ <div class="flex justify-between items-start">
216
+ <div>
217
+ <h3 class="font-medium text-blue-800">Post weekend specials on social media</h3>
218
+ <p class="text-sm text-gray-600 mt-1">Engagement is highest on Fridays. Suggested content: Behind-the-scenes kombucha brewing.</p>
219
+ </div>
220
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Add Task</button>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </div>
225
+
226
+ <!-- Task Boards -->
227
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
228
+ <!-- To Do Column -->
229
+ <div class="dropzone bg-gray-50 rounded-xl shadow p-4" data-status="todo">
230
+ <div class="flex items-center justify-between mb-4">
231
+ <h3 class="font-semibold text-gray-700 flex items-center">
232
+ <span class="w-3 h-3 bg-gray-400 rounded-full mr-2"></span>
233
+ To Do
234
+ </h3>
235
+ <span class="px-2 py-1 bg-gray-200 text-gray-700 text-xs rounded-full">5</span>
236
+ </div>
237
+ <div id="todo-tasks" class="space-y-3">
238
+ <!-- Sample Task Cards -->
239
+ <div class="task-card priority-high bg-white p-4 rounded-lg shadow-sm cursor-move" draggable="true" data-id="1" data-priority="high" data-category="kombucha">
240
+ <div class="flex justify-between items-start mb-2">
241
+ <h4 class="font-medium">Brew new kombucha batch</h4>
242
+ <div class="flex space-x-2">
243
+ <button class="text-gray-400 hover:text-gray-600"><i class="fas fa-ellipsis-v"></i></button>
244
+ </div>
245
+ </div>
246
+ <p class="text-sm text-gray-600 mb-3">Need to start primary fermentation for ginger-lemon flavor by EOD.</p>
247
+ <div class="flex justify-between items-center text-xs">
248
+ <span class="px-2 py-1 bg-purple-100 text-purple-800 rounded-full">Kombucha</span>
249
+ <span class="text-red-500"><i class="fas fa-clock mr-1"></i>Due Today</span>
250
+ </div>
251
+ </div>
252
+
253
+ <div class="task-card priority-medium bg-white p-4 rounded-lg shadow-sm cursor-move" draggable="true" data-id="2" data-priority="medium" data-category="coffee">
254
+ <div class="flex justify-between items-start mb-2">
255
+ <h4 class="font-medium">Restock coffee truck supplies</h4>
256
+ <div class="flex space-x-2">
257
+ <button class="text-gray-400 hover:text-gray-600"><i class="fas fa-ellipsis-v"></i></button>
258
+ </div>
259
+ </div>
260
+ <p class="text-sm text-gray-600 mb-3">Need more oat milk and paper cups for weekend rush.</p>
261
+ <div class="flex justify-between items-center text-xs">
262
+ <span class="px-2 py-1 bg-amber-100 text-amber-800 rounded-full">Coffee Truck</span>
263
+ <span class="text-yellow-600"><i class="fas fa-clock mr-1"></i>Due in 2 days</span>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ </div>
268
+
269
+ <!-- In Progress Column -->
270
+ <div class="dropzone bg-gray-50 rounded-xl shadow p-4" data-status="in-progress">
271
+ <div class="flex items-center justify-between mb-4">
272
+ <h3 class="font-semibold text-gray-700 flex items-center">
273
+ <span class="w-3 h-3 bg-yellow-400 rounded-full mr-2"></span>
274
+ In Progress
275
+ </h3>
276
+ <span class="px-2 py-1 bg-gray-200 text-gray-700 text-xs rounded-full">3</span>
277
+ </div>
278
+ <div id="in-progress-tasks" class="space-y-3">
279
+ <div class="task-card priority-high bg-white p-4 rounded-lg shadow-sm cursor-move" draggable="true" data-id="3" data-priority="high" data-category="marketing">
280
+ <div class="flex justify-between items-start mb-2">
281
+ <h4 class="font-medium">Create social media posts</h4>
282
+ <div class="flex space-x-2">
283
+ <button class="text-gray-400 hover:text-gray-600"><i class="fas fa-ellipsis-v"></i></button>
284
+ </div>
285
+ </div>
286
+ <p class="text-sm text-gray-600 mb-3">Content for Instagram and Facebook about new kombucha flavors.</p>
287
+ <div class="flex justify-between items-center text-xs">
288
+ <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full">Marketing</span>
289
+ <span class="text-red-500"><i class="fas fa-clock mr-1"></i>Due Tomorrow</span>
290
+ </div>
291
+ </div>
292
+
293
+ <div class="task-card priority-low bg-white p-4 rounded-lg shadow-sm cursor-move" draggable="true" data-id="4" data-priority="low" data-category="inventory">
294
+ <div class="flex justify-between items-start mb-2">
295
+ <h4 class="font-medium">Update inventory spreadsheet</h4>
296
+ <div class="flex space-x-2">
297
+ <button class="text-gray-400 hover:text-gray-600"><i class="fas fa-ellipsis-v"></i></button>
298
+ </div>
299
+ </div>
300
+ <p class="text-sm text-gray-600 mb-3">Record latest shipments and current stock levels.</p>
301
+ <div class="flex justify-between items-center text-xs">
302
+ <span class="px-2 py-1 bg-orange-100 text-orange-800 rounded-full">Inventory</span>
303
+ <span class="text-green-600"><i class="fas fa-clock mr-1"></i>Due in 5 days</span>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ </div>
308
+
309
+ <!-- Done Column -->
310
+ <div class="dropzone bg-gray-50 rounded-xl shadow p-4" data-status="done">
311
+ <div class="flex items-center justify-between mb-4">
312
+ <h3 class="font-semibold text-gray-700 flex items-center">
313
+ <span class="w-3 h-3 bg-green-400 rounded-full mr-2"></span>
314
+ Done
315
+ </h3>
316
+ <span class="px-2 py-1 bg-gray-200 text-gray-700 text-xs rounded-full">2</span>
317
+ </div>
318
+ <div id="done-tasks" class="space-y-3">
319
+ <div class="task-card bg-white p-4 rounded-lg shadow-sm opacity-70" data-id="5" data-priority="medium" data-category="admin">
320
+ <div class="flex justify-between items-start mb-2">
321
+ <h4 class="font-medium">Pay vendor invoices</h4>
322
+ <div class="flex space-x-2">
323
+ <button class="text-gray-400 hover:text-gray-600"><i class="fas fa-ellipsis-v"></i></button>
324
+ </div>
325
+ </div>
326
+ <p class="text-sm text-gray-600 mb-3">Completed payments for coffee bean suppliers and bottle vendors.</p>
327
+ <div class="flex justify-between items-center text-xs">
328
+ <span class="px-2 py-1 bg-gray-100 text-gray-800 rounded-full">Admin</span>
329
+ <span class="text-gray-500"><i class="fas fa-check-circle mr-1"></i>Completed</span>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ </div>
337
+ </div>
338
+
339
+ <!-- Modals -->
340
+ <!-- Analytics Modal -->
341
+ <div id="analyticsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
342
+ <div class="bg-white rounded-xl shadow-xl w-full max-w-4xl max-h-[90vh] overflow-y-auto">
343
+ <div class="p-6">
344
+ <div class="flex justify-between items-center mb-6">
345
+ <h2 class="text-2xl font-bold text-gray-800">Business Analytics</h2>
346
+ <button id="closeAnalyticsModal" class="text-gray-500 hover:text-gray-700">
347
+ <i class="fas fa-times"></i>
348
+ </button>
349
+ </div>
350
+
351
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
352
+ <div class="bg-green-50 p-4 rounded-lg">
353
+ <h3 class="font-medium text-green-800 mb-2">Tasks Completed</h3>
354
+ <p class="text-3xl font-bold text-green-600">42</p>
355
+ <p class="text-sm text-green-700 mt-1">+12% from last week</p>
356
+ </div>
357
+ <div class="bg-blue-50 p-4 rounded-lg">
358
+ <h3 class="font-medium text-blue-800 mb-2">Overdue Tasks</h3>
359
+ <p class="text-3xl font-bold text-blue-600">3</p>
360
+ <p class="text-sm text-blue-700 mt-1">-2 from last week</p>
361
+ </div>
362
+ <div class="bg-purple-50 p-4 rounded-lg">
363
+ <h3 class="font-medium text-purple-800 mb-2">Kombucha Batches</h3>
364
+ <p class="text-3xl font-bold text-purple-600">8</p>
365
+ <p class="text-sm text-purple-700 mt-1">In production this week</p>
366
+ </div>
367
+ </div>
368
+
369
+ <div class="mb-8">
370
+ <h3 class="text-lg font-semibold text-gray-700 mb-4">Task Completion Rate</h3>
371
+ <div class="bg-white p-4 rounded-lg border">
372
+ <div class="h-64">
373
+ <!-- Chart would go here -->
374
+ <div class="flex items-center justify-center h-full bg-gray-100 rounded">
375
+ <p class="text-gray-500">Task completion chart visualization</p>
376
+ </div>
377
+ </div>
378
+ </div>
379
+ </div>
380
+
381
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
382
+ <div>
383
+ <h3 class="text-lg font-semibold text-gray-700 mb-4">Tasks by Category</h3>
384
+ <div class="bg-white p-4 rounded-lg border">
385
+ <div class="h-64">
386
+ <!-- Chart would go here -->
387
+ <div class="flex items-center justify-center h-full bg-gray-100 rounded">
388
+ <p class="text-gray-500">Category distribution pie chart</p>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </div>
393
+ <div>
394
+ <h3 class="text-lg font-semibold text-gray-700 mb-4">Priority Distribution</h3>
395
+ <div class="bg-white p-4 rounded-lg border">
396
+ <div class="h-64">
397
+ <!-- Chart would go here -->
398
+ <div class="flex items-center justify-center h-full bg-gray-100 rounded">
399
+ <p class="text-gray-500">Priority distribution bar chart</p>
400
+ </div>
401
+ </div>
402
+ </div>
403
+ </div>
404
+ </div>
405
+ </div>
406
+ </div>
407
+ </div>
408
+
409
+ <!-- Settings Modal -->
410
+ <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
411
+ <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
412
+ <div class="p-6">
413
+ <div class="flex justify-between items-center mb-6">
414
+ <h2 class="text-2xl font-bold text-gray-800">Settings</h2>
415
+ <button id="closeSettingsModal" class="text-gray-500 hover:text-gray-700">
416
+ <i class="fas fa-times"></i>
417
+ </button>
418
+ </div>
419
+
420
+ <div class="space-y-6">
421
+ <div>
422
+ <h3 class="text-lg font-semibold text-gray-700 mb-3">Notifications</h3>
423
+ <div class="space-y-4">
424
+ <div class="flex items-center justify-between">
425
+ <div>
426
+ <h4 class="font-medium text-gray-800">Email Notifications</h4>
427
+ <p class="text-sm text-gray-600">Receive task reminders via email</p>
428
+ </div>
429
+ <label class="relative inline-flex items-center cursor-pointer">
430
+ <input type="checkbox" class="sr-only peer" checked>
431
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
432
+ </label>
433
+ </div>
434
+ <div class="flex items-center justify-between">
435
+ <div>
436
+ <h4 class="font-medium text-gray-800">WhatsApp Notifications</h4>
437
+ <p class="text-sm text-gray-600">Receive task reminders via WhatsApp</p>
438
+ </div>
439
+ <label class="relative inline-flex items-center cursor-pointer">
440
+ <input type="checkbox" class="sr-only peer" checked>
441
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
442
+ </label>
443
+ </div>
444
+ <div class="flex items-center justify-between">
445
+ <div>
446
+ <h4 class="font-medium text-gray-800">SMS Notifications</h4>
447
+ <p class="text-sm text-gray-600">Receive urgent task reminders via SMS</p>
448
+ </div>
449
+ <label class="relative inline-flex items-center cursor-pointer">
450
+ <input type="checkbox" class="sr-only peer">
451
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
452
+ </label>
453
+ </div>
454
+ </div>
455
+ </div>
456
+
457
+ <div>
458
+ <h3 class="text-lg font-semibold text-gray-700 mb-3">Integrations</h3>
459
+ <div class="space-y-4">
460
+ <div class="flex items-center justify-between">
461
+ <div class="flex items-center">
462
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Google_Calendar_icon_%282020%29.svg/1200px-Google_Calendar_icon_%282020%29.svg.png" class="w-8 h-8 mr-3" alt="Google Calendar">
463
+ <div>
464
+ <h4 class="font-medium text-gray-800">Google Calendar</h4>
465
+ <p class="text-sm text-gray-600">Sync tasks with your calendar</p>
466
+ </div>
467
+ </div>
468
+ <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition text-sm">
469
+ Connect
470
+ </button>
471
+ </div>
472
+ <div class="flex items-center justify-between">
473
+ <div class="flex items-center">
474
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/WhatsApp.svg/1200px-WhatsApp.svg.png" class="w-8 h-8 mr-3" alt="WhatsApp">
475
+ <div>
476
+ <h4 class="font-medium text-gray-800">WhatsApp Business</h4>
477
+ <p class="text-sm text-gray-600">Send reminders via WhatsApp</p>
478
+ </div>
479
+ </div>
480
+ <button class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition text-sm">
481
+ Connect
482
+ </button>
483
+ </div>
484
+ <div class="flex items-center justify-between">
485
+ <div class="flex items-center">
486
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Telegram_logo.svg/1200px-Telegram_logo.svg.png" class="w-8 h-8 mr-3" alt="Telegram">
487
+ <div>
488
+ <h4 class="font-medium text-gray-800">Telegram</h4>
489
+ <p class="text-sm text-gray-600">Send reminders via Telegram</p>
490
+ </div>
491
+ </div>
492
+ <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition text-sm">
493
+ Connect
494
+ </button>
495
+ </div>
496
+ </div>
497
+ </div>
498
+
499
+ <div>
500
+ <h3 class="text-lg font-semibold text-gray-700 mb-3">AI Assistant</h3>
501
+ <div class="space-y-4">
502
+ <div class="flex items-center justify-between">
503
+ <div>
504
+ <h4 class="font-medium text-gray-800">AI Task Suggestions</h4>
505
+ <p class="text-sm text-gray-600">Get smart suggestions for your tasks</p>
506
+ </div>
507
+ <label class="relative inline-flex items-center cursor-pointer">
508
+ <input type="checkbox" class="sr-only peer" checked>
509
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
510
+ </label>
511
+ </div>
512
+ <div class="flex items-center justify-between">
513
+ <div>
514
+ <h4 class="font-medium text-gray-800">Priority Assistant</h4>
515
+ <p class="text-sm text-gray-600">Let AI help prioritize your tasks</p>
516
+ </div>
517
+ <label class="relative inline-flex items-center cursor-pointer">
518
+ <input type="checkbox" class="sr-only peer" checked>
519
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
520
+ </label>
521
+ </div>
522
+ </div>
523
+ </div>
524
+ </div>
525
+ </div>
526
+ </div>
527
+ </div>
528
+
529
+ <!-- Task Detail Modal -->
530
+ <div id="taskDetailModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
531
+ <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
532
+ <div class="p-6">
533
+ <div class="flex justify-between items-center mb-6">
534
+ <h2 class="text-2xl font-bold text-gray-800">Task Details</h2>
535
+ <button id="closeTaskDetailModal" class="text-gray-500 hover:text-gray-700">
536
+ <i class="fas fa-times"></i>
537
+ </button>
538
+ </div>
539
+
540
+ <div class="space-y-6">
541
+ <div>
542
+ <h3 class="text-lg font-semibold text-gray-700 mb-2">Brew new kombucha batch</h3>
543
+ <div class="flex items-center space-x-4 text-sm mb-4">
544
+ <span class="px-2 py-1 bg-purple-100 text-purple-800 rounded-full">Kombucha</span>
545
+ <span class="text-red-500"><i class="fas fa-clock mr-1"></i>Due Today</span>
546
+ <span class="text-gray-600">Created: 2 days ago</span>
547
+ </div>
548
+ <p class="text-gray-700">Need to start primary fermentation for ginger-lemon flavor by EOD. Follow the standard recipe but increase ginger by 20% based on customer feedback from last batch.</p>
549
+ </div>
550
+
551
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
552
+ <div>
553
+ <h4 class="font-medium text-gray-700 mb-2">Priority</h4>
554
+ <span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm">High</span>
555
+ </div>
556
+ <div>
557
+ <h4 class="font-medium text-gray-700 mb-2">Assignee</h4>
558
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Myself</span>
559
+ </div>
560
+ <div>
561
+ <h4 class="font-medium text-gray-700 mb-2">Due Date</h4>
562
+ <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Today, 5:00 PM</span>
563
+ </div>
564
+ <div>
565
+ <h4 class="font-medium text-gray-700 mb-2">Status</h4>
566
+ <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm">In Progress</span>
567
+ </div>
568
+ </div>
569
+
570
+ <div>
571
+ <h4 class="font-medium text-gray-700 mb-3">Reminders</h4>
572
+ <div class="space-y-2">
573
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
574
+ <div>
575
+ <i class="fas fa-bell text-yellow-500 mr-2"></i>
576
+ <span>1 hour before due time</span>
577
+ </div>
578
+ <button class="text-red-500 hover:text-red-700">
579
+ <i class="fas fa-trash"></i>
580
+ </button>
581
+ </div>
582
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
583
+ <div>
584
+ <i class="fas fa-envelope text-blue-500 mr-2"></i>
585
+ <span>Email reminder sent yesterday</span>
586
+ </div>
587
+ <button class="text-red-500 hover:text-red-700">
588
+ <i class="fas fa-trash"></i>
589
+ </button>
590
+ </div>
591
+ </div>
592
+ <button class="mt-3 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition text-sm">
593
+ <i class="fas fa-plus mr-2"></i>Add Reminder
594
+ </button>
595
+ </div>
596
+
597
+ <div>
598
+ <h4 class="font-medium text-gray-700 mb-3">Comments</h4>
599
+ <div class="space-y-3 mb-4">
600
+ <div class="flex items-start space-x-3">
601
+ <div class="flex-shrink-0">
602
+ <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white">JD</div>
603
+ </div>
604
+ <div class="bg-gray-50 p-3 rounded-lg flex-1">
605
+ <div class="flex justify-between items-center mb-1">
606
+ <span class="font-medium text-sm">Jane Doe</span>
607
+ <span class="text-xs text-gray-500">2 hours ago</span>
608
+ </div>
609
+ <p class="text-sm text-gray-700">Don't forget to check the pH levels before starting the fermentation.</p>
610
+ </div>
611
+ </div>
612
+ </div>
613
+ <div class="flex items-center space-x-3">
614
+ <div class="flex-shrink-0">
615
+ <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white">Y</div>
616
+ </div>
617
+ <div class="flex-1">
618
+ <textarea class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500" placeholder="Add a comment..."></textarea>
619
+ </div>
620
+ </div>
621
+ </div>
622
+
623
+ <div class="flex justify-end space-x-3">
624
+ <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition">
625
+ <i class="fas fa-edit mr-2"></i>Edit
626
+ </button>
627
+ <button class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">
628
+ <i class="fas fa-check mr-2"></i>Mark Complete
629
+ </button>
630
+ </div>
631
+ </div>
632
+ </div>
633
+ </div>
634
+ </div>
635
+
636
+ <script>
637
+ // DOM Elements
638
+ const analyticsBtn = document.getElementById('analyticsBtn');
639
+ const settingsBtn = document.getElementById('settingsBtn');
640
+ const quickTaskBtn = document.getElementById('quickTaskBtn');
641
+ const aiSuggestBtn = document.getElementById('aiSuggestBtn');
642
+ const askAIBtn = document.getElementById('askAIBtn');
643
+ const closeAIBtn = document.getElementById('closeAIBtn');
644
+ const closeAnalyticsModal = document.getElementById('closeAnalyticsModal');
645
+ const closeSettingsModal = document.getElementById('closeSettingsModal');
646
+ const closeTaskDetailModal = document.getElementById('closeTaskDetailModal');
647
+
648
+ const analyticsModal = document.getElementById('analyticsModal');
649
+ const settingsModal = document.getElementById('settingsModal');
650
+ const taskDetailModal = document.getElementById('taskDetailModal');
651
+ const aiSuggestionsPanel = document.getElementById('aiSuggestionsPanel');
652
+
653
+ const taskForm = document.getElementById('taskForm');
654
+ const priorityFilter = document.getElementById('priorityFilter');
655
+ const statusFilter = document.getElementById('statusFilter');
656
+ const categoryBtns = document.querySelectorAll('.category-btn');
657
+
658
+ // Event Listeners
659
+ analyticsBtn.addEventListener('click', () => analyticsModal.classList.remove('hidden'));
660
+ settingsBtn.addEventListener('click', () => settingsModal.classList.remove('hidden'));
661
+ quickTaskBtn.addEventListener('click', () => {
662
+ document.getElementById('taskTitle').focus();
663
+ window.scrollTo(0, 0);
664
+ });
665
+ aiSuggestBtn.addEventListener('click', () => aiSuggestionsPanel.classList.remove('hidden'));
666
+ askAIBtn.addEventListener('click', () => aiSuggestionsPanel.classList.remove('hidden'));
667
+
668
+ closeAIBtn.addEventListener('click', () => aiSuggestionsPanel.classList.add('hidden'));
669
+ closeAnalyticsModal.addEventListener('click', () => analyticsModal.classList.add('hidden'));
670
+ closeSettingsModal.addEventListener('click', () => settingsModal.classList.add('hidden'));
671
+ closeTaskDetailModal.addEventListener('click', () => taskDetailModal.classList.add('hidden'));
672
+
673
+ // Close modals when clicking outside
674
+ window.addEventListener('click', (e) => {
675
+ if (e.target === analyticsModal) analyticsModal.classList.add('hidden');
676
+ if (e.target === settingsModal) settingsModal.classList.add('hidden');
677
+ if (e.target === taskDetailModal) taskDetailModal.classList.add('hidden');
678
+ });
679
+
680
+ // Task Form Submission
681
+ taskForm.addEventListener('submit', (e) => {
682
+ e.preventDefault();
683
+
684
+ const title = document.getElementById('taskTitle').value;
685
+ const category = document.getElementById('taskCategory').value;
686
+ const description = document.getElementById('taskDescription').value;
687
+ const priority = document.getElementById('taskPriority').value;
688
+ const dueDate = document.getElementById('taskDueDate').value;
689
+ const assignee = document.getElementById('taskAssignee').value;
690
+ const reminder = document.getElementById('taskReminder').checked;
691
+ const calendar = document.getElementById('taskCalendar').checked;
692
+
693
+ // In a real app, you would add the task to your database/state
694
+ console.log('New Task:', {
695
+ title, category, description, priority, dueDate, assignee, reminder, calendar
696
+ });
697
+
698
+ // Reset form
699
+ taskForm.reset();
700
+
701
+ // Show success message
702
+ alert('Task added successfully!');
703
+ });
704
+
705
+ // Filter Tasks
706
+ priorityFilter.addEventListener('change', filterTasks);
707
+ statusFilter.addEventListener('change', filterTasks);
708
+
709
+ categoryBtns.forEach(btn => {
710
+ btn.addEventListener('click', () => {
711
+ const category = btn.dataset.category;
712
+ filterTasksByCategory(category);
713
+
714
+ // Update active state
715
+ categoryBtns.forEach(b => b.classList.remove('bg-green-100', 'text-green-800'));
716
+ btn.classList.add('bg-green-100', 'text-green-800');
717
+ });
718
+ });
719
+
720
+ function filterTasks() {
721
+ const priority = priorityFilter.value;
722
+ const status = statusFilter.value;
723
+
724
+ // In a real app, you would filter your task list based on these values
725
+ console.log('Filtering by:', { priority, status });
726
+ }
727
+
728
+ function filterTasksByCategory(category) {
729
+ // In a real app, you would filter your task list based on category
730
+ console.log('Filtering by category:', category);
731
+ }
732
+
733
+ // Drag and Drop Functionality
734
+ const taskCards = document.querySelectorAll('.task-card');
735
+ const dropzones = document.querySelectorAll('.dropzone');
736
+
737
+ taskCards.forEach(task => {
738
+ task.addEventListener('dragstart', dragStart);
739
+ task.addEventListener('dragend', dragEnd);
740
+
741
+ // Add click event to show task details
742
+ task.addEventListener('click', () => {
743
+ taskDetailModal.classList.remove('hidden');
744
+ });
745
+ });
746
+
747
+ dropzones.forEach(zone => {
748
+ zone.addEventListener('dragover', dragOver);
749
+ zone.addEventListener('dragenter', dragEnter);
750
+ zone.addEventListener('dragleave', dragLeave);
751
+ zone.addEventListener('drop', drop);
752
+ });
753
+
754
+ let draggedTask = null;
755
+
756
+ function dragStart() {
757
+ draggedTask = this;
758
+ setTimeout(() => this.classList.add('opacity-30'), 0);
759
+ }
760
+
761
+ function dragEnd() {
762
+ this.classList.remove('opacity-30');
763
+ }
764
+
765
+ function dragOver(e) {
766
+ e.preventDefault();
767
+ }
768
+
769
+ function dragEnter(e) {
770
+ e.preventDefault();
771
+ this.classList.add('active');
772
+ }
773
+
774
+ function dragLeave() {
775
+ this.classList.remove('active');
776
+ }
777
+
778
+ function drop() {
779
+ this.classList.remove('active');
780
+
781
+ // Get the status from the dropzone
782
+ const newStatus = this.dataset.status;
783
+
784
+ // In a real app, you would update the task status in your database/state
785
+ console.log(`Moving task ${draggedTask.dataset.id} to ${newStatus}`);
786
+
787
+ // Move the task visually
788
+ this.querySelector(`#${newStatus}-tasks`).appendChild(draggedTask);
789
+
790
+ // Update task UI based on new status
791
+ if (newStatus === 'done') {
792
+ draggedTask.classList.add('opacity-70');
793
+ draggedTask.classList.remove('cursor-move');
794
+ draggedTask.draggable = false;
795
+ } else {
796
+ draggedTask.classList.remove('opacity-70');
797
+ draggedTask.classList.add('cursor-move');
798
+ draggedTask.draggable = true;
799
+ }
800
+ }
801
+
802
+ // Initialize due date to today
803
+ document.getElementById('taskDueDate').valueAsDate = new Date();
804
+
805
+ // Sample AI suggestion click handler
806
+ document.querySelectorAll('.ai-suggestion button').forEach(btn => {
807
+ btn.addEventListener('click', function() {
808
+ const suggestionText = this.parentElement.parentElement.querySelector('h3').textContent;
809
+ document.getElementById('taskTitle').value = suggestionText;
810
+ aiSuggestionsPanel.classList.add('hidden');
811
+ document.getElementById('taskTitle').focus();
812
+ });
813
+ });
814
+ </script>
815
+ <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=oaxacagold/oaxaca-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
816
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Develop a versatile drag and drop to-do list app to manage tasks like scheduling, inventory, marketing, and productivity for food and kombucha kits, coffee truck ops. Create a WhatsApp-inspired React to-do app for food plus Kombucha business ops with AI task suggestions, Twilio reminders (WhatsApp/email), drag-and-drop sorting, and an analytics dashboard. Integrate task reminders into a React app using Twilio API for WhatsApp and email notifications. Include bot-specific task handling capabilities. Advanced AI priority assistant features to suggest deadlines, categorize tasks, and recommend actions, with a user-friendly interface. Send SMS messages with Twilio. Send messages with Telegram. Add AI features using OpenAI. Additional Features Natural language processing to extract key action items from description Priority scoring system that considers deadline proximity and business impact Integration Suggestions Calendar Sync with Google Calendar for staff scheduling and availability.