Hugging Face's logo

Spaces:
ksdeexith
/
my-generative-test-project
Running

App Files Community
ksdeexith commited on
Commit
588a1e5
·
verified ·
1 Parent(s): 6c7df63

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1329 -18
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: My Generative Test Project
3
- emoji: 📈
4
- colorFrom: red
5
- colorTo: yellow
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: my-generative-test-project
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1330 @@
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>Smart Calendar - Auto Schedule from Emails</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
+ .calendar-day:hover .day-number {
11
+ transform: scale(1.2);
12
+ background-color: #3b82f6;
13
+ color: white;
14
+ }
15
+ .event-dot {
16
+ width: 8px;
17
+ height: 8px;
18
+ border-radius: 50%;
19
+ display: inline-block;
20
+ margin-right: 4px;
21
+ }
22
+ .email-preview {
23
+ transition: all 0.2s ease;
24
+ }
25
+ .email-preview:hover {
26
+ transform: translateY(-2px);
27
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
28
+ }
29
+ .scheduling-animation {
30
+ animation: pulse 2s infinite;
31
+ }
32
+ @keyframes pulse {
33
+ 0% { opacity: 0.6; }
34
+ 50% { opacity: 1; }
35
+ 100% { opacity: 0.6; }
36
+ }
37
+ </style>
38
+ </head>
39
+ <body class="bg-gray-100 font-sans">
40
+ <div class="flex h-screen overflow-hidden">
41
+ <!-- Sidebar -->
42
+ <div class="hidden md:flex md:flex-shrink-0">
43
+ <div class="flex flex-col w-64 bg-indigo-700 text-white">
44
+ <div class="flex items-center justify-center h-16 px-4 bg-indigo-800">
45
+ <div class="flex items-center">
46
+ <i class="fas fa-calendar-alt text-2xl mr-2"></i>
47
+ <span class="text-xl font-bold">Smart Calendar</span>
48
+ </div>
49
+ </div>
50
+ <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto">
51
+ <div class="space-y-1">
52
+ <button id="today-btn" class="flex items-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-800 rounded-md">
53
+ <i class="fas fa-calendar-day mr-3"></i>
54
+ Today
55
+ </button>
56
+ <button id="schedule-btn" class="flex items-center w-full px-4 py-2 text-sm font-medium text-indigo-100 hover:bg-indigo-600 rounded-md">
57
+ <i class="fas fa-robot mr-3"></i>
58
+ Auto Schedule
59
+ </button>
60
+ <button id="email-btn" class="flex items-center w-full px-4 py-2 text-sm font-medium text-indigo-100 hover:bg-indigo-600 rounded-md">
61
+ <i class="fas fa-envelope mr-3"></i>
62
+ Email Integration
63
+ </button>
64
+ <button id="settings-btn" class="flex items-center w-full px-4 py-2 text-sm font-medium text-indigo-100 hover:bg-indigo-600 rounded-md">
65
+ <i class="fas fa-cog mr-3"></i>
66
+ Settings
67
+ </button>
68
+ </div>
69
+
70
+ <div class="mt-8">
71
+ <h3 class="px-4 text-xs font-semibold text-indigo-200 uppercase tracking-wider">
72
+ Calendars
73
+ </h3>
74
+ <div class="mt-2 space-y-1">
75
+ <div class="flex items-center px-4 py-2 text-sm text-indigo-100 hover:bg-indigo-600 rounded-md cursor-pointer">
76
+ <span class="w-3 h-3 mr-3 bg-red-500 rounded-full"></span>
77
+ Work
78
+ </div>
79
+ <div class="flex items-center px-4 py-2 text-sm text-indigo-100 hover:bg-indigo-600 rounded-md cursor-pointer">
80
+ <span class="w-3 h-3 mr-3 bg-blue-500 rounded-full"></span>
81
+ Personal
82
+ </div>
83
+ <div class="flex items-center px-4 py-2 text-sm text-indigo-100 hover:bg-indigo-600 rounded-md cursor-pointer">
84
+ <span class="w-3 h-3 mr-3 bg-green-500 rounded-full"></span>
85
+ Meetings
86
+ </div>
87
+ </div>
88
+ </div>
89
+
90
+ <div class="mt-auto mb-4 px-4">
91
+ <div class="bg-indigo-800 rounded-lg p-4">
92
+ <div class="flex items-center">
93
+ <div class="flex-shrink-0">
94
+ <i class="fas fa-lightbulb text-yellow-300 text-xl"></i>
95
+ </div>
96
+ <div class="ml-3">
97
+ <p class="text-sm font-medium text-indigo-100">
98
+ <span id="ai-tip">AI Tip: Click "Auto Schedule" to analyze your emails and create events</span>
99
+ </p>
100
+ </div>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ </div>
107
+
108
+ <!-- Main content -->
109
+ <div class="flex flex-col flex-1 overflow-hidden">
110
+ <!-- Top navigation -->
111
+ <div class="flex items-center justify-between h-16 px-4 bg-white border-b border-gray-200">
112
+ <div class="flex items-center">
113
+ <button id="mobile-menu-btn" class="md:hidden text-gray-500 focus:outline-none">
114
+ <i class="fas fa-bars text-xl"></i>
115
+ </button>
116
+ <h1 class="ml-4 text-xl font-semibold text-gray-900" id="current-month-year">June 2023</h1>
117
+ </div>
118
+ <div class="flex items-center space-x-4">
119
+ <div class="relative">
120
+ <button id="view-dropdown-btn" class="flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200">
121
+ <span id="current-view">Week</span>
122
+ <i class="fas fa-chevron-down ml-2 text-xs"></i>
123
+ </button>
124
+ <div id="view-dropdown" class="hidden absolute right-0 mt-2 w-32 bg-white rounded-md shadow-lg z-10">
125
+ <div class="py-1">
126
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 view-option" data-view="day">Day</a>
127
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 view-option" data-view="week">Week</a>
128
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 view-option" data-view="month">Month</a>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ <div class="flex space-x-2">
133
+ <button id="prev-btn" class="p-1 text-gray-500 hover:text-gray-700 focus:outline-none">
134
+ <i class="fas fa-chevron-left"></i>
135
+ </button>
136
+ <button id="next-btn" class="p-1 text-gray-500 hover:text-gray-700 focus:outline-none">
137
+ <i class="fas fa-chevron-right"></i>
138
+ </button>
139
+ </div>
140
+ <button id="add-event-btn" class="flex items-center px-3 py-1 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700">
141
+ <i class="fas fa-plus mr-1"></i>
142
+ Add Event
143
+ </button>
144
+ </div>
145
+ </div>
146
+
147
+ <!-- Calendar content -->
148
+ <div class="flex flex-1 overflow-hidden">
149
+ <!-- Calendar view -->
150
+ <div class="flex-1 overflow-y-auto p-4" id="calendar-container">
151
+ <div class="bg-white rounded-lg shadow overflow-hidden">
152
+ <!-- Month view -->
153
+ <div id="month-view" class="">
154
+ <div class="grid grid-cols-7 gap-px bg-gray-200">
155
+ <!-- Day headers -->
156
+ <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase">Sun</div>
157
+ <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase">Mon</div>
158
+ <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase">Tue</div>
159
+ <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase">Wed</div>
160
+ <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase">Thu</div>
161
+ <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase">Fri</div>
162
+ <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase">Sat</div>
163
+ </div>
164
+ <div class="grid grid-cols-7 gap-px bg-gray-200" id="month-days">
165
+ <!-- Days will be populated by JavaScript -->
166
+ </div>
167
+ </div>
168
+
169
+ <!-- Week view (hidden by default) -->
170
+ <div id="week-view" class="hidden">
171
+ <div class="grid grid-cols-8 gap-px bg-gray-200">
172
+ <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase">Time</div>
173
+ <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase">Sun</div>
174
+ <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase">Mon</div>
175
+ <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase">Tue</div>
176
+ <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase">Wed</div>
177
+ <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase">Thu</div>
178
+ <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase">Fri</div>
179
+ <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase">Sat</div>
180
+ </div>
181
+ <div class="grid grid-cols-8 gap-px bg-gray-200" id="week-hours">
182
+ <!-- Hours will be populated by JavaScript -->
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Day view (hidden by default) -->
187
+ <div id="day-view" class="hidden">
188
+ <div class="bg-gray-100 py-2 text-center text-sm font-medium text-gray-700" id="day-view-header">
189
+ Sunday, June 4, 2023
190
+ </div>
191
+ <div class="divide-y divide-gray-200" id="day-hours">
192
+ <!-- Hours will be populated by JavaScript -->
193
+ </div>
194
+ </div>
195
+ </div>
196
+ </div>
197
+
198
+ <!-- Email sidebar (hidden by default) -->
199
+ <div id="email-sidebar" class="hidden w-96 border-l border-gray-200 bg-white overflow-y-auto">
200
+ <div class="p-4 border-b border-gray-200">
201
+ <div class="flex items-center justify-between">
202
+ <h2 class="text-lg font-medium text-gray-900">Email Integration</h2>
203
+ <button id="close-email-btn" class="text-gray-500 hover:text-gray-700">
204
+ <i class="fas fa-times"></i>
205
+ </button>
206
+ </div>
207
+ <div class="mt-4">
208
+ <div class="flex items-center">
209
+ <div class="flex-1">
210
+ <div class="relative rounded-md shadow-sm">
211
+ <input type="text" id="email-search" class="block w-full pr-10 sm:text-sm border-gray-300 rounded-md" placeholder="Search emails...">
212
+ <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
213
+ <i class="fas fa-search text-gray-400"></i>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ <button id="refresh-emails-btn" class="ml-2 p-2 text-blue-600 hover:text-blue-800">
218
+ <i class="fas fa-sync-alt"></i>
219
+ </button>
220
+ </div>
221
+ </div>
222
+ </div>
223
+
224
+ <div class="divide-y divide-gray-200" id="email-list">
225
+ <!-- Email preview items will be added here -->
226
+ <div class="email-preview p-4 hover:bg-gray-50 cursor-pointer">
227
+ <div class="flex items-start">
228
+ <div class="flex-shrink-0 pt-1">
229
+ <span class="inline-flex items-center justify-center h-8 w-8 rounded-full bg-blue-500">
230
+ <span class="text-sm font-medium leading-none text-white">JD</span>
231
+ </span>
232
+ </div>
233
+ <div class="ml-3 flex-1">
234
+ <div class="flex items-center justify-between">
235
+ <h3 class="text-sm font-medium text-gray-900">John Doe</h3>
236
+ <span class="text-xs text-gray-500">10:30 AM</span>
237
+ </div>
238
+ <p class="text-sm text-gray-900 font-medium mt-1">Meeting about project timeline</p>
239
+ <p class="text-sm text-gray-500 mt-1">Hi, let's meet tomorrow at 2pm to discuss the project timeline. Please bring your...</p>
240
+ <div class="mt-2 flex items-center">
241
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">
242
+ <i class="fas fa-clock mr-1"></i> Schedule suggested
243
+ </span>
244
+ </div>
245
+ </div>
246
+ </div>
247
+ </div>
248
+
249
+ <div class="email-preview p-4 hover:bg-gray-50 cursor-pointer">
250
+ <div class="flex items-start">
251
+ <div class="flex-shrink-0 pt-1">
252
+ <span class="inline-flex items-center justify-center h-8 w-8 rounded-full bg-purple-500">
253
+ <span class="text-sm font-medium leading-none text-white">AS</span>
254
+ </span>
255
+ </div>
256
+ <div class="ml-3 flex-1">
257
+ <div class="flex items-center justify-between">
258
+ <h3 class="text-sm font-medium text-gray-900">Acme Suppliers</h3>
259
+ <span class="text-xs text-gray-500">Yesterday</span>
260
+ </div>
261
+ <p class="text-sm text-gray-900 font-medium mt-1">Your order #45678 is ready</p>
262
+ <p class="text-sm text-gray-500 mt-1">Dear customer, your order is ready for pickup between 9am-5pm this Friday...</p>
263
+ <div class="mt-2 flex items-center">
264
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
265
+ <i class="fas fa-check-circle mr-1"></i> Event created
266
+ </span>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </div>
271
+
272
+ <div class="email-preview p-4 hover:bg-gray-50 cursor-pointer">
273
+ <div class="flex items-start">
274
+ <div class="flex-shrink-0 pt-1">
275
+ <span class="inline-flex items-center justify-center h-8 w-8 rounded-full bg-red-500">
276
+ <span class="text-sm font-medium leading-none text-white">TM</span>
277
+ </span>
278
+ </div>
279
+ <div class="ml-3 flex-1">
280
+ <div class="flex items-center justify-between">
281
+ <h3 class="text-sm font-medium text-gray-900">Team Meeting</h3>
282
+ <span class="text-xs text-gray-500">Jun 1</span>
283
+ </div>
284
+ <p class="text-sm text-gray-900 font-medium mt-1">Weekly team sync</p>
285
+ <p class="text-sm text-gray-500 mt-1">Reminder: We have our weekly team sync every Wednesday at 11am. This week we'll...</p>
286
+ <div class="mt-2 flex items-center">
287
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">
288
+ <i class="fas fa-exclamation-circle mr-1"></i> Needs review
289
+ </span>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ </div>
295
+
296
+ <div class="p-4 border-t border-gray-200">
297
+ <button id="connect-email-btn" class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
298
+ <i class="fab fa-google mr-2"></i> Connect Gmail Account
299
+ </button>
300
+ </div>
301
+ </div>
302
+
303
+ <!-- Auto-schedule panel (hidden by default) -->
304
+ <div id="schedule-panel" class="hidden w-96 border-l border-gray-200 bg-white overflow-y-auto">
305
+ <div class="p-4 border-b border-gray-200">
306
+ <div class="flex items-center justify-between">
307
+ <h2 class="text-lg font-medium text-gray-900">Auto Schedule</h2>
308
+ <button id="close-schedule-btn" class="text-gray-500 hover:text-gray-700">
309
+ <i class="fas fa-times"></i>
310
+ </button>
311
+ </div>
312
+ <p class="mt-1 text-sm text-gray-500">AI-powered scheduling from your emails</p>
313
+ </div>
314
+
315
+ <div class="p-4">
316
+ <div class="rounded-lg bg-blue-50 p-4">
317
+ <div class="flex">
318
+ <div class="flex-shrink-0">
319
+ <i class="fas fa-robot text-blue-400 text-xl"></i>
320
+ </div>
321
+ <div class="ml-3">
322
+ <h3 class="text-sm font-medium text-blue-800">How it works</h3>
323
+ <div class="mt-2 text-sm text-blue-700">
324
+ <p>Our AI will analyze your emails for:</p>
325
+ <ul class="list-disc pl-5 mt-1 space-y-1">
326
+ <li>Meeting requests</li>
327
+ <li>Appointments</li>
328
+ <li>Deadlines</li>
329
+ <li>Time-sensitive tasks</li>
330
+ </ul>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+
336
+ <div class="mt-6">
337
+ <label class="block text-sm font-medium text-gray-700">Schedule preferences</label>
338
+ <div class="mt-2 space-y-4">
339
+ <div class="flex items-start">
340
+ <div class="flex items-center h-5">
341
+ <input id="pref-meetings" name="pref-meetings" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" checked>
342
+ </div>
343
+ <div class="ml-3 text-sm">
344
+ <label for="pref-meetings" class="font-medium text-gray-700">Create events for meetings</label>
345
+ <p class="text-gray-500">Automatically add calendar events for meeting requests</p>
346
+ </div>
347
+ </div>
348
+
349
+ <div class="flex items-start">
350
+ <div class="flex items-center h-5">
351
+ <input id="pref-deadlines" name="pref-deadlines" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" checked>
352
+ </div>
353
+ <div class="ml-3 text-sm">
354
+ <label for="pref-deadlines" class="font-medium text-gray-700">Create reminders for deadlines</label>
355
+ <p class="text-gray-500">Add reminders for project deadlines and deliverables</p>
356
+ </div>
357
+ </div>
358
+
359
+ <div class="flex items-start">
360
+ <div class="flex items-center h-5">
361
+ <input id="pref-confirm" name="pref-confirm" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
362
+ </div>
363
+ <div class="ml-3 text-sm">
364
+ <label for="pref-confirm" class="font-medium text-gray-700">Confirm before scheduling</label>
365
+ <p class="text-gray-500">Show me events before they're added to my calendar</p>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </div>
370
+
371
+ <div class="mt-6">
372
+ <label for="work-hours" class="block text-sm font-medium text-gray-700">Preferred work hours</label>
373
+ <div class="mt-2 grid grid-cols-2 gap-4">
374
+ <div>
375
+ <label for="start-time" class="block text-xs font-medium text-gray-500">Start time</label>
376
+ <select id="start-time" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
377
+ <option>8:00 AM</option>
378
+ <option selected>9:00 AM</option>
379
+ <option>10:00 AM</option>
380
+ </select>
381
+ </div>
382
+ <div>
383
+ <label for="end-time" class="block text-xs font-medium text-gray-500">End time</label>
384
+ <select id="end-time" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
385
+ <option>4:00 PM</option>
386
+ <option>5:00 PM</option>
387
+ <option selected>6:00 PM</option>
388
+ </select>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </div>
393
+
394
+ <div class="p-4 border-t border-gray-200 mt-auto">
395
+ <button id="run-schedule-btn" class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 scheduling-animation">
396
+ <i class="fas fa-magic mr-2"></i> Run Auto Schedule
397
+ </button>
398
+ </div>
399
+ </div>
400
+ </div>
401
+ </div>
402
+ </div>
403
+
404
+ <!-- Event modal (hidden by default) -->
405
+ <div id="event-modal" class="hidden fixed inset-0 overflow-y-auto z-50">
406
+ <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
407
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
408
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
409
+ </div>
410
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
411
+ <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
412
+ <div>
413
+ <div class="mt-3 text-center sm:mt-0 sm:text-left">
414
+ <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
415
+ Add New Event
416
+ </h3>
417
+ <div class="mt-4">
418
+ <div class="mb-4">
419
+ <label for="event-title" class="block text-sm font-medium text-gray-700">Event title</label>
420
+ <input type="text" id="event-title" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
421
+ </div>
422
+ <div class="grid grid-cols-2 gap-4 mb-4">
423
+ <div>
424
+ <label for="event-start" class="block text-sm font-medium text-gray-700">Start</label>
425
+ <input type="datetime-local" id="event-start" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
426
+ </div>
427
+ <div>
428
+ <label for="event-end" class="block text-sm font-medium text-gray-700">End</label>
429
+ <input type="datetime-local" id="event-end" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
430
+ </div>
431
+ </div>
432
+ <div class="mb-4">
433
+ <label for="event-description" class="block text-sm font-medium text-gray-700">Description</label>
434
+ <textarea id="event-description" rows="3" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"></textarea>
435
+ </div>
436
+ <div class="mb-4">
437
+ <label for="event-color" class="block text-sm font-medium text-gray-700">Color</label>
438
+ <select id="event-color" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
439
+ <option value="blue" class="text-blue-600">Blue</option>
440
+ <option value="red" class="text-red-600">Red</option>
441
+ <option value="green" class="text-green-600">Green</option>
442
+ <option value="purple" class="text-purple-600">Purple</option>
443
+ <option value="yellow" class="text-yellow-600">Yellow</option>
444
+ </select>
445
+ </div>
446
+ </div>
447
+ </div>
448
+ </div>
449
+ <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
450
+ <button type="button" id="save-event-btn" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
451
+ Save
452
+ </button>
453
+ <button type="button" id="cancel-event-btn" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:w-auto sm:text-sm">
454
+ Cancel
455
+ </button>
456
+ <button type="button" id="delete-event-btn" class="hidden mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
457
+ Delete
458
+ </button>
459
+ </div>
460
+ </div>
461
+ </div>
462
+ </div>
463
+
464
+ <!-- Mobile menu (hidden by default) -->
465
+ <div id="mobile-menu" class="hidden fixed inset-0 z-40 md:hidden">
466
+ <div class="fixed inset-0 bg-gray-600 bg-opacity-75" aria-hidden="true"></div>
467
+ <div class="fixed inset-y-0 left-0 max-w-xs w-full bg-indigo-700">
468
+ <div class="flex items-center justify-center h-16 px-4 bg-indigo-800">
469
+ <div class="flex items-center">
470
+ <i class="fas fa-calendar-alt text-2xl mr-2 text-white"></i>
471
+ <span class="text-xl font-bold text-white">Smart Calendar</span>
472
+ </div>
473
+ </div>
474
+ <div class="flex flex-col h-full py-4 overflow-y-auto">
475
+ <div class="space-y-1 px-4">
476
+ <button class="flex items-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-800 rounded-md">
477
+ <i class="fas fa-calendar-day mr-3"></i>
478
+ Today
479
+ </button>
480
+ <button class="flex items-center w-full px-4 py-2 text-sm font-medium text-indigo-100 hover:bg-indigo-600 rounded-md">
481
+ <i class="fas fa-robot mr-3"></i>
482
+ Auto Schedule
483
+ </button>
484
+ <button class="flex items-center w-full px-4 py-2 text-sm font-medium text-indigo-100 hover:bg-indigo-600 rounded-md">
485
+ <i class="fas fa-envelope mr-3"></i>
486
+ Email Integration
487
+ </button>
488
+ <button class="flex items-center w-full px-4 py-2 text-sm font-medium text-indigo-100 hover:bg-indigo-600 rounded-md">
489
+ <i class="fas fa-cog mr-3"></i>
490
+ Settings
491
+ </button>
492
+ </div>
493
+
494
+ <div class="mt-8 px-4">
495
+ <h3 class="text-xs font-semibold text-indigo-200 uppercase tracking-wider">
496
+ Calendars
497
+ </h3>
498
+ <div class="mt-2 space-y-1">
499
+ <div class="flex items-center px-4 py-2 text-sm text-indigo-100 hover:bg-indigo-600 rounded-md cursor-pointer">
500
+ <span class="w-3 h-3 mr-3 bg-red-500 rounded-full"></span>
501
+ Work
502
+ </div>
503
+ <div class="flex items-center px-4 py-2 text-sm text-indigo-100 hover:bg-indigo-600 rounded-md cursor-pointer">
504
+ <span class="w-3 h-3 mr-3 bg-blue-500 rounded-full"></span>
505
+ Personal
506
+ </div>
507
+ <div class="flex items-center px-4 py-2 text-sm text-indigo-100 hover:bg-indigo-600 rounded-md cursor-pointer">
508
+ <span class="w-3 h-3 mr-3 bg-green-500 rounded-full"></span>
509
+ Meetings
510
+ </div>
511
+ </div>
512
+ </div>
513
+
514
+ <div class="mt-auto mb-4 px-4">
515
+ <div class="bg-indigo-800 rounded-lg p-4">
516
+ <div class="flex items-center">
517
+ <div class="flex-shrink-0">
518
+ <i class="fas fa-lightbulb text-yellow-300 text-xl"></i>
519
+ </div>
520
+ <div class="ml-3">
521
+ <p class="text-sm font-medium text-indigo-100">
522
+ AI Tip: Click "Auto Schedule" to analyze your emails and create events
523
+ </p>
524
+ </div>
525
+ </div>
526
+ </div>
527
+ </div>
528
+ </div>
529
+ </div>
530
+ </div>
531
+
532
+ <script>
533
+ // Current date and view state
534
+ let currentDate = new Date();
535
+ let currentView = 'month';
536
+ let events = [
537
+ {
538
+ id: 1,
539
+ title: 'Team Meeting',
540
+ start: new Date(2023, 5, 5, 11, 0),
541
+ end: new Date(2023, 5, 5, 12, 0),
542
+ color: 'blue',
543
+ description: 'Weekly team sync with all departments'
544
+ },
545
+ {
546
+ id: 2,
547
+ title: 'Lunch with Sarah',
548
+ start: new Date(2023, 5, 7, 12, 30),
549
+ end: new Date(2023, 5, 7, 13, 30),
550
+ color: 'green',
551
+ description: 'Discuss new project collaboration'
552
+ },
553
+ {
554
+ id: 3,
555
+ title: 'Project Deadline',
556
+ start: new Date(2023, 5, 10, 17, 0),
557
+ end: new Date(2023, 5, 10, 17, 0),
558
+ color: 'red',
559
+ description: 'Submit final report to client'
560
+ },
561
+ {
562
+ id: 4,
563
+ title: 'Conference Call',
564
+ start: new Date(2023, 5, 12, 14, 0),
565
+ end: new Date(2023, 5, 12, 15, 0),
566
+ color: 'purple',
567
+ description: 'With international partners'
568
+ }
569
+ ];
570
+
571
+ // DOM elements
572
+ const currentMonthYearEl = document.getElementById('current-month-year');
573
+ const monthDaysEl = document.getElementById('month-days');
574
+ const weekHoursEl = document.getElementById('week-hours');
575
+ const dayHoursEl = document.getElementById('day-hours');
576
+ const dayViewHeaderEl = document.getElementById('day-view-header');
577
+ const currentViewEl = document.getElementById('current-view');
578
+ const viewDropdownBtn = document.getElementById('view-dropdown-btn');
579
+ const viewDropdown = document.getElementById('view-dropdown');
580
+ const viewOptions = document.querySelectorAll('.view-option');
581
+ const monthViewEl = document.getElementById('month-view');
582
+ const weekViewEl = document.getElementById('week-view');
583
+ const dayViewEl = document.getElementById('day-view');
584
+ const prevBtn = document.getElementById('prev-btn');
585
+ const nextBtn = document.getElementById('next-btn');
586
+ const todayBtn = document.getElementById('today-btn');
587
+ const addEventBtn = document.getElementById('add-event-btn');
588
+ const eventModal = document.getElementById('event-modal');
589
+ const saveEventBtn = document.getElementById('save-event-btn');
590
+ const cancelEventBtn = document.getElementById('cancel-event-btn');
591
+ const deleteEventBtn = document.getElementById('delete-event-btn');
592
+ const eventTitleEl = document.getElementById('event-title');
593
+ const eventStartEl = document.getElementById('event-start');
594
+ const eventEndEl = document.getElementById('event-end');
595
+ const eventDescriptionEl = document.getElementById('event-description');
596
+ const eventColorEl = document.getElementById('event-color');
597
+ const emailSidebar = document.getElementById('email-sidebar');
598
+ const emailBtn = document.getElementById('email-btn');
599
+ const closeEmailBtn = document.getElementById('close-email-btn');
600
+ const schedulePanel = document.getElementById('schedule-panel');
601
+ const scheduleBtn = document.getElementById('schedule-btn');
602
+ const closeScheduleBtn = document.getElementById('close-schedule-btn');
603
+ const runScheduleBtn = document.getElementById('run-schedule-btn');
604
+ const mobileMenuBtn = document.getElementById('mobile-menu-btn');
605
+ const mobileMenu = document.getElementById('mobile-menu');
606
+ const connectEmailBtn = document.getElementById('connect-email-btn');
607
+ const refreshEmailsBtn = document.getElementById('refresh-emails-btn');
608
+ const emailSearchEl = document.getElementById('email-search');
609
+
610
+ // Initialize calendar
611
+ function initCalendar() {
612
+ updateMonthYearDisplay();
613
+ renderMonthView();
614
+ renderWeekView();
615
+ renderDayView();
616
+ }
617
+
618
+ // Update month/year display
619
+ function updateMonthYearDisplay() {
620
+ const options = { year: 'numeric', month: 'long' };
621
+ currentMonthYearEl.textContent = currentDate.toLocaleDateString('en-US', options);
622
+ }
623
+
624
+ // Render month view
625
+ function renderMonthView() {
626
+ monthDaysEl.innerHTML = '';
627
+
628
+ const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
629
+ const lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
630
+
631
+ // Get the day of the week for the first day of the month (0-6, where 0 is Sunday)
632
+ const firstDayOfWeek = firstDayOfMonth.getDay();
633
+
634
+ // Get the day of the week for the last day of the month
635
+ const lastDayOfWeek = lastDayOfMonth.getDay();
636
+
637
+ // Calculate the number of days from the previous month to show
638
+ const daysFromPrevMonth = firstDayOfWeek;
639
+
640
+ // Calculate the number of days from the next month to show
641
+ const daysFromNextMonth = 6 - lastDayOfWeek;
642
+
643
+ // Calculate the total number of days to show (always 6 weeks)
644
+ const totalDays = daysFromPrevMonth + lastDayOfMonth.getDate() + daysFromNextMonth;
645
+
646
+ // Previous month
647
+ const prevMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1);
648
+ const daysInPrevMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 0).getDate();
649
+
650
+ // Next month
651
+ const nextMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1);
652
+
653
+ // Current date for comparison
654
+ const today = new Date();
655
+ const isCurrentMonth = currentDate.getMonth() === today.getMonth() && currentDate.getFullYear() === today.getFullYear();
656
+
657
+ for (let i = 0; i < totalDays; i++) {
658
+ const dayEl = document.createElement('div');
659
+ dayEl.className = 'calendar-day bg-white py-2 px-1 h-24 overflow-y-auto';
660
+
661
+ // Determine if this day is from previous, current, or next month
662
+ let day, month, year, isCurrentMonthDay, isToday = false;
663
+
664
+ if (i < daysFromPrevMonth) {
665
+ // Previous month
666
+ day = daysInPrevMonth - daysFromPrevMonth + i + 1;
667
+ month = prevMonth.getMonth();
668
+ year = prevMonth.getFullYear();
669
+ isCurrentMonthDay = false;
670
+ } else if (i < daysFromPrevMonth + lastDayOfMonth.getDate()) {
671
+ // Current month
672
+ day = i - daysFromPrevMonth + 1;
673
+ month = currentDate.getMonth();
674
+ year = currentDate.getFullYear();
675
+ isCurrentMonthDay = true;
676
+
677
+ // Check if this is today
678
+ if (isCurrentMonth && day === today.getDate()) {
679
+ isToday = true;
680
+ }
681
+ } else {
682
+ // Next month
683
+ day = i - (daysFromPrevMonth + lastDayOfMonth.getDate()) + 1;
684
+ month = nextMonth.getMonth();
685
+ year = nextMonth.getFullYear();
686
+ isCurrentMonthDay = false;
687
+ }
688
+
689
+ const date = new Date(year, month, day);
690
+
691
+ // Day number
692
+ const dayNumberEl = document.createElement('div');
693
+ dayNumberEl.className = `day-number text-right text-sm font-medium rounded-full w-6 h-6 flex items-center justify-center ml-auto ${isToday ? 'bg-blue-600 text-white' : isCurrentMonthDay ? 'text-gray-900' : 'text-gray-400'}`;
694
+ dayNumberEl.textContent = day;
695
+
696
+ // Events for this day
697
+ const dayEvents = events.filter(event => {
698
+ const eventDate = new Date(event.start);
699
+ return eventDate.getDate() === day &&
700
+ eventDate.getMonth() === month &&
701
+ eventDate.getFullYear() === year;
702
+ });
703
+
704
+ // Events container
705
+ const eventsEl = document.createElement('div');
706
+ eventsEl.className = 'mt-1 space-y-1';
707
+
708
+ dayEvents.forEach(event => {
709
+ const eventEl = document.createElement('div');
710
+ eventEl.className = 'text-xs truncate px-1 py-0.5 rounded';
711
+
712
+ // Set color based on event color
713
+ let bgColor, textColor;
714
+ switch(event.color) {
715
+ case 'blue':
716
+ bgColor = 'bg-blue-100';
717
+ textColor = 'text-blue-800';
718
+ break;
719
+ case 'red':
720
+ bgColor = 'bg-red-100';
721
+ textColor = 'text-red-800';
722
+ break;
723
+ case 'green':
724
+ bgColor = 'bg-green-100';
725
+ textColor = 'text-green-800';
726
+ break;
727
+ case 'purple':
728
+ bgColor = 'bg-purple-100';
729
+ textColor = 'text-purple-800';
730
+ break;
731
+ case 'yellow':
732
+ bgColor = 'bg-yellow-100';
733
+ textColor = 'text-yellow-800';
734
+ break;
735
+ default:
736
+ bgColor = 'bg-gray-100';
737
+ textColor = 'text-gray-800';
738
+ }
739
+
740
+ eventEl.className += ` ${bgColor} ${textColor}`;
741
+
742
+ // Add time if it's not an all-day event
743
+ let timeText = '';
744
+ if (event.start.getHours() !== 0 || event.start.getMinutes() !== 0) {
745
+ timeText = event.start.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) + ' ';
746
+ }
747
+
748
+ eventEl.textContent = timeText + event.title;
749
+ eventEl.dataset.eventId = event.id;
750
+ eventEl.addEventListener('click', (e) => {
751
+ e.stopPropagation();
752
+ openEditEventModal(event.id);
753
+ });
754
+
755
+ eventsEl.appendChild(eventEl);
756
+ });
757
+
758
+ dayEl.appendChild(dayNumberEl);
759
+ dayEl.appendChild(eventsEl);
760
+
761
+ // Add click event to create new event
762
+ dayEl.addEventListener('click', () => {
763
+ openNewEventModal(date);
764
+ });
765
+
766
+ monthDaysEl.appendChild(dayEl);
767
+ }
768
+ }
769
+
770
+ // Render week view
771
+ function renderWeekView() {
772
+ weekHoursEl.innerHTML = '';
773
+
774
+ // Get the start of the week (Sunday)
775
+ const startOfWeek = new Date(currentDate);
776
+ startOfWeek.setDate(currentDate.getDate() - currentDate.getDay());
777
+
778
+ // Create time column
779
+ for (let hour = 0; hour < 24; hour++) {
780
+ const timeCell = document.createElement('div');
781
+ timeCell.className = 'bg-gray-100 py-1 px-2 text-xs text-gray-500 text-right';
782
+ timeCell.textContent = hour === 0 ? '12 AM' : hour < 12 ? `${hour} AM` : hour === 12 ? '12 PM' : `${hour - 12} PM`;
783
+ weekHoursEl.appendChild(timeCell);
784
+
785
+ // Create day cells for this hour
786
+ for (let day = 0; day < 7; day++) {
787
+ const dayCell = document.createElement('div');
788
+ dayCell.className = 'bg-white py-1 px-1 h-12 overflow-hidden border-b border-gray-200';
789
+
790
+ const dayDate = new Date(startOfWeek);
791
+ dayDate.setDate(startOfWeek.getDate() + day);
792
+ dayDate.setHours(hour);
793
+
794
+ // Find events for this hour
795
+ const hourEvents = events.filter(event => {
796
+ const eventStart = new Date(event.start);
797
+ return eventStart.getDate() === dayDate.getDate() &&
798
+ eventStart.getMonth() === dayDate.getMonth() &&
799
+ eventStart.getFullYear() === dayDate.getFullYear() &&
800
+ eventStart.getHours() === hour;
801
+ });
802
+
803
+ hourEvents.forEach(event => {
804
+ const eventEl = document.createElement('div');
805
+ eventEl.className = 'text-xs truncate px-1 py-0.5 rounded mb-1';
806
+
807
+ // Set color based on event color
808
+ let bgColor, textColor;
809
+ switch(event.color) {
810
+ case 'blue':
811
+ bgColor = 'bg-blue-100';
812
+ textColor = 'text-blue-800';
813
+ break;
814
+ case 'red':
815
+ bgColor = 'bg-red-100';
816
+ textColor = 'text-red-800';
817
+ break;
818
+ case 'green':
819
+ bgColor = 'bg-green-100';
820
+ textColor = 'text-green-800';
821
+ break;
822
+ case 'purple':
823
+ bgColor = 'bg-purple-100';
824
+ textColor = 'text-purple-800';
825
+ break;
826
+ case 'yellow':
827
+ bgColor = 'bg-yellow-100';
828
+ textColor = 'text-yellow-800';
829
+ break;
830
+ default:
831
+ bgColor = 'bg-gray-100';
832
+ textColor = 'text-gray-800';
833
+ }
834
+
835
+ eventEl.className += ` ${bgColor} ${textColor}`;
836
+ eventEl.textContent = event.title;
837
+ eventEl.dataset.eventId = event.id;
838
+ eventEl.addEventListener('click', (e) => {
839
+ e.stopPropagation();
840
+ openEditEventModal(event.id);
841
+ });
842
+
843
+ dayCell.appendChild(eventEl);
844
+ });
845
+
846
+ // Add click event to create new event
847
+ dayCell.addEventListener('click', () => {
848
+ openNewEventModal(dayDate);
849
+ });
850
+
851
+ weekHoursEl.appendChild(dayCell);
852
+ }
853
+ }
854
+ }
855
+
856
+ // Render day view
857
+ function renderDayView() {
858
+ dayHoursEl.innerHTML = '';
859
+
860
+ // Set day header
861
+ const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
862
+ dayViewHeaderEl.textContent = currentDate.toLocaleDateString('en-US', options);
863
+
864
+ for (let hour = 0; hour < 24; hour++) {
865
+ const hourRow = document.createElement('div');
866
+ hourRow.className = 'flex';
867
+
868
+ // Time label
869
+ const timeLabel = document.createElement('div');
870
+ timeLabel.className = 'w-16 py-2 px-2 text-xs text-gray-500 text-right';
871
+ timeLabel.textContent = hour === 0 ? '12 AM' : hour < 12 ? `${hour} AM` : hour === 12 ? '12 PM' : `${hour - 12} PM`;
872
+ hourRow.appendChild(timeLabel);
873
+
874
+ // Hour content
875
+ const hourContent = document.createElement('div');
876
+ hourContent.className = 'flex-1 py-2 px-2 border-t border-gray-200 h-16';
877
+
878
+ const hourDate = new Date(currentDate);
879
+ hourDate.setHours(hour, 0, 0, 0);
880
+
881
+ // Find events for this hour
882
+ const hourEvents = events.filter(event => {
883
+ const eventStart = new Date(event.start);
884
+ return eventStart.getDate() === hourDate.getDate() &&
885
+ eventStart.getMonth() === hourDate.getMonth() &&
886
+ eventStart.getFullYear() === hourDate.getFullYear() &&
887
+ eventStart.getHours() === hour;
888
+ });
889
+
890
+ hourEvents.forEach(event => {
891
+ const eventEl = document.createElement('div');
892
+ eventEl.className = 'text-sm px-2 py-1 rounded mb-1';
893
+
894
+ // Set color based on event color
895
+ let bgColor, textColor;
896
+ switch(event.color) {
897
+ case 'blue':
898
+ bgColor = 'bg-blue-100';
899
+ textColor = 'text-blue-800';
900
+ break;
901
+ case 'red':
902
+ bgColor = 'bg-red-100';
903
+ textColor = 'text-red-800';
904
+ break;
905
+ case 'green':
906
+ bgColor = 'bg-green-100';
907
+ textColor = 'text-green-800';
908
+ break;
909
+ case 'purple':
910
+ bgColor = 'bg-purple-100';
911
+ textColor = 'text-purple-800';
912
+ break;
913
+ case 'yellow':
914
+ bgColor = 'bg-yellow-100';
915
+ textColor = 'text-yellow-800';
916
+ break;
917
+ default:
918
+ bgColor = 'bg-gray-100';
919
+ textColor = 'text-gray-800';
920
+ }
921
+
922
+ eventEl.className += ` ${bgColor} ${textColor}`;
923
+
924
+ // Add time if it's not an all-day event
925
+ let timeText = '';
926
+ if (event.start.getHours() !== 0 || event.start.getMinutes() !== 0) {
927
+ timeText = event.start.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) + ' ';
928
+ }
929
+
930
+ eventEl.textContent = timeText + event.title;
931
+ eventEl.dataset.eventId = event.id;
932
+ eventEl.addEventListener('click', (e) => {
933
+ e.stopPropagation();
934
+ openEditEventModal(event.id);
935
+ });
936
+
937
+ hourContent.appendChild(eventEl);
938
+ });
939
+
940
+ // Add click event to create new event
941
+ hourContent.addEventListener('click', () => {
942
+ openNewEventModal(hourDate);
943
+ });
944
+
945
+ hourRow.appendChild(hourContent);
946
+ dayHoursEl.appendChild(hourRow);
947
+ }
948
+ }
949
+
950
+ // Switch calendar view
951
+ function switchView(view) {
952
+ currentView = view;
953
+ currentViewEl.textContent = view.charAt(0).toUpperCase() + view.slice(1);
954
+
955
+ monthViewEl.classList.add('hidden');
956
+ weekViewEl.classList.add('hidden');
957
+ dayViewEl.classList.add('hidden');
958
+
959
+ if (view === 'month') {
960
+ monthViewEl.classList.remove('hidden');
961
+ } else if (view === 'week') {
962
+ weekViewEl.classList.remove('hidden');
963
+ } else if (view === 'day') {
964
+ dayViewEl.classList.remove('hidden');
965
+ }
966
+ }
967
+
968
+ // Open new event modal
969
+ function openNewEventModal(date) {
970
+ // Reset modal
971
+ document.getElementById('modal-title').textContent = 'Add New Event';
972
+ eventTitleEl.value = '';
973
+ eventDescriptionEl.value = '';
974
+ eventColorEl.value = 'blue';
975
+ deleteEventBtn.classList.add('hidden');
976
+
977
+ // Set default times
978
+ const startDate = new Date(date);
979
+ startDate.setHours(9, 0, 0, 0);
980
+
981
+ const endDate = new Date(startDate);
982
+ endDate.setHours(10, 0, 0, 0);
983
+
984
+ // Format for datetime-local input
985
+ const formatDateTimeLocal = (date) => {
986
+ const year = date.getFullYear();
987
+ const month = String(date.getMonth() + 1).padStart(2, '0');
988
+ const day = String(date.getDate()).padStart(2, '0');
989
+ const hours = String(date.getHours()).padStart(2, '0');
990
+ const minutes = String(date.getMinutes()).padStart(2, '0');
991
+ return `${year}-${month}-${day}T${hours}:${minutes}`;
992
+ };
993
+
994
+ eventStartEl.value = formatDateTimeLocal(startDate);
995
+ eventEndEl.value = formatDateTimeLocal(endDate);
996
+
997
+ // Show modal
998
+ eventModal.classList.remove('hidden');
999
+ }
1000
+
1001
+ // Open edit event modal
1002
+ function openEditEventModal(eventId) {
1003
+ const event = events.find(e => e.id === eventId);
1004
+ if (!event) return;
1005
+
1006
+ document.getElementById('modal-title').textContent = 'Edit Event';
1007
+ eventTitleEl.value = event.title;
1008
+ eventDescriptionEl.value = event.description;
1009
+ eventColorEl.value = event.color;
1010
+ deleteEventBtn.classList.remove('hidden');
1011
+
1012
+ // Format for datetime-local input
1013
+ const formatDateTimeLocal = (date) => {
1014
+ const year = date.getFullYear();
1015
+ const month = String(date.getMonth() + 1).padStart(2, '0');
1016
+ const day = String(date.getDate()).padStart(2, '0');
1017
+ const hours = String(date.getHours()).padStart(2, '0');
1018
+ const minutes = String(date.getMinutes()).padStart(2, '0');
1019
+ return `${year}-${month}-${day}T${hours}:${minutes}`;
1020
+ };
1021
+
1022
+ eventStartEl.value = formatDateTimeLocal(event.start);
1023
+ eventEndEl.value = formatDateTimeLocal(event.end);
1024
+
1025
+ // Set up delete button
1026
+ deleteEventBtn.onclick = () => {
1027
+ if (confirm('Are you sure you want to delete this event?')) {
1028
+ events = events.filter(e => e.id !== eventId);
1029
+ renderCalendar();
1030
+ eventModal.classList.add('hidden');
1031
+ }
1032
+ };
1033
+
1034
+ // Show modal
1035
+ eventModal.classList.remove('hidden');
1036
+ }
1037
+
1038
+ // Save event
1039
+ function saveEvent() {
1040
+ const title = eventTitleEl.value.trim();
1041
+ if (!title) {
1042
+ alert('Please enter an event title');
1043
+ return;
1044
+ }
1045
+
1046
+ const start = new Date(eventStartEl.value);
1047
+ const end = new Date(eventEndEl.value);
1048
+
1049
+ if (start >= end) {
1050
+ alert('End time must be after start time');
1051
+ return;
1052
+ }
1053
+
1054
+ const description = eventDescriptionEl.value;
1055
+ const color = eventColorEl.value;
1056
+
1057
+ // Check if we're editing an existing event
1058
+ const modalTitle = document.getElementById('modal-title').textContent;
1059
+ if (modalTitle === 'Edit Event') {
1060
+ // Find the event being edited
1061
+ const eventId = parseInt(deleteEventBtn.dataset.eventId);
1062
+ const eventIndex = events.findIndex(e => e.id === eventId);
1063
+
1064
+ if (eventIndex !== -1) {
1065
+ events[eventIndex] = {
1066
+ ...events[eventIndex],
1067
+ title,
1068
+ start,
1069
+ end,
1070
+ description,
1071
+ color
1072
+ };
1073
+ }
1074
+ } else {
1075
+ // Create new event
1076
+ const newId = events.length > 0 ? Math.max(...events.map(e => e.id)) + 1 : 1;
1077
+ events.push({
1078
+ id: newId,
1079
+ title,
1080
+ start,
1081
+ end,
1082
+ description,
1083
+ color
1084
+ });
1085
+ }
1086
+
1087
+ renderCalendar();
1088
+ eventModal.classList.add('hidden');
1089
+ }
1090
+
1091
+ // Render calendar based on current view
1092
+ function renderCalendar() {
1093
+ updateMonthYearDisplay();
1094
+
1095
+ if (currentView === 'month') {
1096
+ renderMonthView();
1097
+ } else if (currentView === 'week') {
1098
+ renderWeekView();
1099
+ } else if (currentView === 'day') {
1100
+ renderDayView();
1101
+ }
1102
+ }
1103
+
1104
+ // Event listeners
1105
+ prevBtn.addEventListener('click', () => {
1106
+ if (currentView === 'month') {
1107
+ currentDate.setMonth(currentDate.getMonth() - 1);
1108
+ } else if (currentView === 'week') {
1109
+ currentDate.setDate(currentDate.getDate() - 7);
1110
+ } else if (currentView === 'day') {
1111
+ currentDate.setDate(currentDate.getDate() - 1);
1112
+ }
1113
+ renderCalendar();
1114
+ });
1115
+
1116
+ nextBtn.addEventListener('click', () => {
1117
+ if (currentView === 'month') {
1118
+ currentDate.setMonth(currentDate.getMonth() + 1);
1119
+ } else if (currentView === 'week') {
1120
+ currentDate.setDate(currentDate.getDate() + 7);
1121
+ } else if (currentView === 'day') {
1122
+ currentDate.setDate(currentDate.getDate() + 1);
1123
+ }
1124
+ renderCalendar();
1125
+ });
1126
+
1127
+ todayBtn.addEventListener('click', () => {
1128
+ currentDate = new Date();
1129
+ renderCalendar();
1130
+ });
1131
+
1132
+ viewDropdownBtn.addEventListener('click', () => {
1133
+ viewDropdown.classList.toggle('hidden');
1134
+ });
1135
+
1136
+ viewOptions.forEach(option => {
1137
+ option.addEventListener('click', (e) => {
1138
+ e.preventDefault();
1139
+ const view = option.dataset.view;
1140
+ switchView(view);
1141
+ viewDropdown.classList.add('hidden');
1142
+ });
1143
+ });
1144
+
1145
+ saveEventBtn.addEventListener('click', saveEvent);
1146
+
1147
+ cancelEventBtn.addEventListener('click', () => {
1148
+ eventModal.classList.add('hidden');
1149
+ });
1150
+
1151
+ addEventBtn.addEventListener('click', () => {
1152
+ openNewEventModal(currentDate);
1153
+ });
1154
+
1155
+ emailBtn.addEventListener('click', () => {
1156
+ emailSidebar.classList.remove('hidden');
1157
+ schedulePanel.classList.add('hidden');
1158
+ });
1159
+
1160
+ closeEmailBtn.addEventListener('click', () => {
1161
+ emailSidebar.classList.add('hidden');
1162
+ });
1163
+
1164
+ scheduleBtn.addEventListener('click', () => {
1165
+ schedulePanel.classList.remove('hidden');
1166
+ emailSidebar.classList.add('hidden');
1167
+ });
1168
+
1169
+ closeScheduleBtn.addEventListener('click', () => {
1170
+ schedulePanel.classList.add('hidden');
1171
+ });
1172
+
1173
+ runScheduleBtn.addEventListener('click', () => {
1174
+ // Simulate AI scheduling
1175
+ runScheduleBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Analyzing emails...';
1176
+
1177
+ setTimeout(() => {
1178
+ // Create some sample events from "emails"
1179
+ events.push({
1180
+ id: events.length + 1,
1181
+ title: 'Client Call with John',
1182
+ start: new Date(2023, 5, 14, 14, 0),
1183
+ end: new Date(2023, 5, 14, 15, 0),
1184
+ color: 'blue',
1185
+ description: 'Discuss project requirements'
1186
+ });
1187
+
1188
+ events.push({
1189
+ id: events.length + 1,
1190
+ title: 'Deadline: Project Proposal',
1191
+ start: new Date(2023, 5, 16, 17, 0),
1192
+ end: new Date(2023, 5, 16, 17, 0),
1193
+ color: 'red',
1194
+ description: 'Submit final project proposal to client'
1195
+ });
1196
+
1197
+ runScheduleBtn.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Scheduling complete!';
1198
+
1199
+ setTimeout(() => {
1200
+ runScheduleBtn.innerHTML = '<i class="fas fa-magic mr-2"></i> Run Auto Schedule';
1201
+ renderCalendar();
1202
+ }, 1500);
1203
+ }, 2000);
1204
+ });
1205
+
1206
+ mobileMenuBtn.addEventListener('click', () => {
1207
+ mobileMenu.classList.remove('hidden');
1208
+ });
1209
+
1210
+ document.addEventListener('click', (e) => {
1211
+ if (!viewDropdownBtn.contains(e.target) && !viewDropdown.contains(e.target)) {
1212
+ viewDropdown.classList.add('hidden');
1213
+ }
1214
+
1215
+ if (!mobileMenuBtn.contains(e.target) && !mobileMenu.contains(e.target)) {
1216
+ mobileMenu.classList.add('hidden');
1217
+ }
1218
+ });
1219
+
1220
+ connectEmailBtn.addEventListener('click', () => {
1221
+ connectEmailBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Connecting...';
1222
+
1223
+ setTimeout(() => {
1224
+ connectEmailBtn.innerHTML = '<i class="fab fa-google mr-2"></i> Gmail Connected';
1225
+ connectEmailBtn.classList.remove('bg-blue-600', 'hover:bg-blue-700');
1226
+ connectEmailBtn.classList.add('bg-green-600', 'hover:bg-green-700');
1227
+
1228
+ // Add some sample emails
1229
+ const emailList = document.getElementById('email-list');
1230
+
1231
+ const newEmails = [
1232
+ {
1233
+ sender: 'Jane Smith',
1234
+ initials: 'JS',
1235
+ time: '2 hours ago',
1236
+ subject: 'Follow-up on our meeting',
1237
+ preview: 'Hi, just following up on our conversation yesterday about the marketing campaign. When would be a good time...',
1238
+ status: 'schedule suggested',
1239
+ statusColor: 'blue'
1240
+ },
1241
+ {
1242
+ sender: 'Tech Conference',
1243
+ initials: 'TC',
1244
+ time: '1 day ago',
1245
+ subject: 'Your ticket confirmation',
1246
+ preview: 'Thank you for registering for TechConf 2023! Your ticket is confirmed for June 20-22. We look forward...',
1247
+ status: 'event created',
1248
+ statusColor: 'green'
1249
+ }
1250
+ ];
1251
+
1252
+ newEmails.forEach(email => {
1253
+ const emailEl = document.createElement('div');
1254
+ emailEl.className = 'email-preview p-4 hover:bg-gray-50 cursor-pointer';
1255
+ emailEl.innerHTML = `
1256
+ <div class="flex items-start">
1257
+ <div class="flex-shrink-0 pt-1">
1258
+ <span class="inline-flex items-center justify-center h-8 w-8 rounded-full bg-${email.statusColor}-500">
1259
+ <span class="text-sm font-medium leading-none text-white">${email.initials}</span>
1260
+ </span>
1261
+ </div>
1262
+ <div class="ml-3 flex-1">
1263
+ <div class="flex items-center justify-between">
1264
+ <h3 class="text-sm font-medium text-gray-900">${email.sender}</h3>
1265
+ <span class="text-xs text-gray-500">${email.time}</span>
1266
+ </div>
1267
+ <p class="text-sm text-gray-900 font-medium mt-1">${email.subject}</p>
1268
+ <p class="text-sm text-gray-500 mt-1">${email.preview}</p>
1269
+ <div class="mt-2 flex items-center">
1270
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-${email.statusColor}-100 text-${email.statusColor}-800">
1271
+ <i class="fas fa-${email.status === 'event created' ? 'check-circle' : email.status === 'schedule suggested' ? 'clock' : 'exclamation-circle'} mr-1"></i> ${email.status}
1272
+ </span>
1273
+ </div>
1274
+ </div>
1275
+ </div>
1276
+ `;
1277
+
1278
+ emailList.prepend(emailEl);
1279
+ });
1280
+ }, 1500);
1281
+ });
1282
+
1283
+ refreshEmailsBtn.addEventListener('click', () => {
1284
+ refreshEmailsBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
1285
+
1286
+ setTimeout(() => {
1287
+ refreshEmailsBtn.innerHTML = '<i class="fas fa-sync-alt"></i>';
1288
+
1289
+ // In a real app, this would fetch new emails
1290
+ const notification = document.createElement('div');
1291
+ notification.className = 'bg-blue-50 border-l-4 border-blue-400 p-4 mb-4';
1292
+ notification.innerHTML = `
1293
+ <div class="flex">
1294
+ <div class="flex-shrink-0">
1295
+ <i class="fas fa-info-circle text-blue-400"></i>
1296
+ </div>
1297
+ <div class="ml-3">
1298
+ <p class="text-sm text-blue-700">No new emails found. Last checked: ${new Date().toLocaleTimeString()}</p>
1299
+ </div>
1300
+ </div>
1301
+ `;
1302
+
1303
+ const emailList = document.getElementById('email-list');
1304
+ emailList.prepend(notification);
1305
+
1306
+ setTimeout(() => {
1307
+ notification.remove();
1308
+ }, 3000);
1309
+ }, 1000);
1310
+ });
1311
+
1312
+ emailSearchEl.addEventListener('input', (e) => {
1313
+ const searchTerm = e.target.value.toLowerCase();
1314
+ const emailPreviews = document.querySelectorAll('.email-preview');
1315
+
1316
+ emailPreviews.forEach(preview => {
1317
+ const text = preview.textContent.toLowerCase();
1318
+ if (text.includes(searchTerm)) {
1319
+ preview.classList.remove('hidden');
1320
+ } else {
1321
+ preview.classList.add('hidden');
1322
+ }
1323
+ });
1324
+ });
1325
+
1326
+ // Initialize the calendar
1327
+ initCalendar();
1328
+ </script>
1329
+ <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=ksdeexith/my-generative-test-project" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1330
  </html>
prompts.txt ADDED
File without changes