Hugging Face's logo

Spaces:
kizashix
/
eventsync
Running

App Files Community
kizashix commited on
Commit
3771fe5
·
verified ·
1 Parent(s): f2e176e

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +468 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Eventsync
3
- emoji: 👁
4
- colorFrom: purple
5
- colorTo: pink
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: eventsync
3
+ emoji: 🐳
4
+ colorFrom: blue
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,468 @@
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>EventSync - Calendar Synchronization</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
+ /* Custom scrollbar */
11
+ ::-webkit-scrollbar {
12
+ width: 8px;
13
+ }
14
+ ::-webkit-scrollbar-track {
15
+ background: #f1f1f1;
16
+ }
17
+ ::-webkit-scrollbar-thumb {
18
+ background: #888;
19
+ border-radius: 4px;
20
+ }
21
+ ::-webkit-scrollbar-thumb:hover {
22
+ background: #555;
23
+ }
24
+
25
+ /* Animation for notifications */
26
+ @keyframes slideIn {
27
+ from { transform: translateX(100%); }
28
+ to { transform: translateX(0); }
29
+ }
30
+
31
+ .notification {
32
+ animation: slideIn 0.3s ease-out;
33
+ }
34
+
35
+ /* Calendar day hover effect */
36
+ .calendar-day:hover {
37
+ transform: scale(1.05);
38
+ transition: transform 0.2s;
39
+ }
40
+
41
+ /* Loading spinner */
42
+ .spinner {
43
+ animation: spin 1s linear infinite;
44
+ }
45
+
46
+ @keyframes spin {
47
+ 0% { transform: rotate(0deg); }
48
+ 100% { transform: rotate(360deg); }
49
+ }
50
+ </style>
51
+ </head>
52
+ <body class="bg-gray-50 font-sans">
53
+ <!-- Header -->
54
+ <header class="bg-indigo-600 text-white shadow-lg">
55
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
56
+ <div class="flex items-center space-x-2">
57
+ <i class="fas fa-calendar-alt text-2xl"></i>
58
+ <h1 class="text-2xl font-bold">EventSync</h1>
59
+ </div>
60
+ <nav class="hidden md:flex space-x-6">
61
+ <a href="#" class="hover:text-indigo-200 transition">Dashboard</a>
62
+ <a href="#" class="hover:text-indigo-200 transition">Calendar</a>
63
+ <a href="#" class="hover:text-indigo-200 transition">Settings</a>
64
+ <a href="#" class="hover:text-indigo-200 transition">Help</a>
65
+ </nav>
66
+ <div class="flex items-center space-x-4">
67
+ <button class="md:hidden text-white focus:outline-none">
68
+ <i class="fas fa-bars text-xl"></i>
69
+ </button>
70
+ <div class="relative">
71
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-10 h-10 rounded-full cursor-pointer border-2 border-white">
72
+ <div class="absolute -top-1 -right-1 bg-green-400 w-3 h-3 rounded-full"></div>
73
+ </div>
74
+ </div>
75
+ </div>
76
+ </header>
77
+
78
+ <!-- Mobile Menu -->
79
+ <div class="md:hidden bg-indigo-700 text-white hidden" id="mobileMenu">
80
+ <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
81
+ <a href="#" class="py-2 border-b border-indigo-600">Dashboard</a>
82
+ <a href="#" class="py-2 border-b border-indigo-600">Calendar</a>
83
+ <a href="#" class="py-2 border-b border-indigo-600">Settings</a>
84
+ <a href="#" class="py-2">Help</a>
85
+ </div>
86
+ </div>
87
+
88
+ <!-- Main Content -->
89
+ <main class="container mx-auto px-4 py-8">
90
+ <div class="flex flex-col lg:flex-row gap-8">
91
+ <!-- Sidebar -->
92
+ <aside class="lg:w-1/4 bg-white rounded-lg shadow-md p-6 h-fit">
93
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">Connected Calendars</h2>
94
+
95
+ <div class="space-y-4 mb-6">
96
+ <div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
97
+ <div class="flex items-center space-x-3">
98
+ <i class="fab fa-google text-red-500 text-xl"></i>
99
+ <span class="font-medium">Google Calendar</span>
100
+ </div>
101
+ <span class="text-green-500 text-sm font-medium">Connected</span>
102
+ </div>
103
+
104
+ <div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
105
+ <div class="flex items-center space-x-3">
106
+ <i class="fab fa-microsoft text-blue-600 text-xl"></i>
107
+ <span class="font-medium">Outlook</span>
108
+ </div>
109
+ <span class="text-green-500 text-sm font-medium">Connected</span>
110
+ </div>
111
+
112
+ <div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
113
+ <div class="flex items-center space-x-3">
114
+ <i class="fab fa-apple text-gray-800 text-xl"></i>
115
+ <span class="font-medium">iCloud</span>
116
+ </div>
117
+ <button class="text-indigo-600 text-sm font-medium hover:underline">Connect</button>
118
+ </div>
119
+ </div>
120
+
121
+ <div class="mb-6">
122
+ <h3 class="text-lg font-medium mb-3 text-gray-800">Sync Settings</h3>
123
+ <div class="space-y-3">
124
+ <label class="flex items-center space-x-2 cursor-pointer">
125
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 rounded" checked>
126
+ <span>Auto-sync every 15 minutes</span>
127
+ </label>
128
+ <label class="flex items-center space-x-2 cursor-pointer">
129
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 rounded" checked>
130
+ <span>Notify about conflicts</span>
131
+ </label>
132
+ <label class="flex items-center space-x-2 cursor-pointer">
133
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 rounded">
134
+ <span>Auto-resolve simple conflicts</span>
135
+ </label>
136
+ </div>
137
+ </div>
138
+
139
+ <button class="w-full bg-indigo-600 text-white py-2 px-4 rounded-lg hover:bg-indigo-700 transition flex items-center justify-center space-x-2">
140
+ <i class="fas fa-sync-alt"></i>
141
+ <span>Sync Now</span>
142
+ </button>
143
+ </aside>
144
+
145
+ <!-- Main Dashboard -->
146
+ <div class="lg:w-3/4">
147
+ <!-- Status Cards -->
148
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
149
+ <div class="bg-white rounded-lg shadow p-6 flex items-center space-x-4">
150
+ <div class="bg-green-100 p-3 rounded-full">
151
+ <i class="fas fa-calendar-check text-green-600 text-xl"></i>
152
+ </div>
153
+ <div>
154
+ <p class="text-gray-500 text-sm">Synced Events</p>
155
+ <h3 class="text-2xl font-bold">142</h3>
156
+ </div>
157
+ </div>
158
+
159
+ <div class="bg-white rounded-lg shadow p-6 flex items-center space-x-4">
160
+ <div class="bg-blue-100 p-3 rounded-full">
161
+ <i class="fas fa-exclamation-triangle text-blue-600 text-xl"></i>
162
+ </div>
163
+ <div>
164
+ <p class="text-gray-500 text-sm">Current Conflicts</p>
165
+ <h3 class="text-2xl font-bold">3</h3>
166
+ </div>
167
+ </div>
168
+
169
+ <div class="bg-white rounded-lg shadow p-6 flex items-center space-x-4">
170
+ <div class="bg-purple-100 p-3 rounded-full">
171
+ <i class="fas fa-clock text-purple-600 text-xl"></i>
172
+ </div>
173
+ <div>
174
+ <p class="text-gray-500 text-sm">Last Sync</p>
175
+ <h3 class="text-xl font-bold">2 min ago</h3>
176
+ </div>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- Conflict Resolution Section -->
181
+ <div class="bg-white rounded-lg shadow-md overflow-hidden mb-8">
182
+ <div class="bg-indigo-600 text-white px-6 py-4 flex justify-between items-center">
183
+ <h2 class="text-xl font-semibold">Event Conflicts</h2>
184
+ <span class="bg-white text-indigo-600 px-3 py-1 rounded-full text-sm font-medium">3 New</span>
185
+ </div>
186
+
187
+ <div class="divide-y divide-gray-200">
188
+ <!-- Conflict 1 -->
189
+ <div class="p-6">
190
+ <div class="flex justify-between items-start mb-3">
191
+ <h3 class="font-medium text-lg text-gray-800">Team Meeting Conflict</h3>
192
+ <span class="bg-red-100 text-red-800 px-2 py-1 rounded text-xs font-medium">High Priority</span>
193
+ </div>
194
+
195
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
196
+ <div class="border-l-4 border-blue-500 pl-3">
197
+ <p class="text-sm text-gray-500">Google Calendar</p>
198
+ <p class="font-medium">Mon, Jun 5 • 2:00-3:30 PM</p>
199
+ </div>
200
+ <div class="border-l-4 border-red-500 pl-3">
201
+ <p class="text-sm text-gray-500">Outlook</p>
202
+ <p class="font-medium">Mon, Jun 5 • 2:30-4:00 PM</p>
203
+ </div>
204
+ <div class="border-l-4 border-gray-500 pl-3">
205
+ <p class="text-sm text-gray-500">Suggested Resolution</p>
206
+ <p class="font-medium">Mon, Jun 5 • 4:00-5:30 PM</p>
207
+ </div>
208
+ </div>
209
+
210
+ <div class="flex flex-wrap gap-3">
211
+ <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition flex items-center space-x-2">
212
+ <i class="fas fa-check"></i>
213
+ <span>Accept Suggestion</span>
214
+ </button>
215
+ <button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition flex items-center space-x-2">
216
+ <i class="fas fa-pencil-alt"></i>
217
+ <span>Custom Time</span>
218
+ </button>
219
+ <button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 transition flex items-center space-x-2">
220
+ <i class="fas fa-times"></i>
221
+ <span>Ignore Conflict</span>
222
+ </button>
223
+ </div>
224
+ </div>
225
+
226
+ <!-- Conflict 2 -->
227
+ <div class="p-6">
228
+ <div class="flex justify-between items-start mb-3">
229
+ <h3 class="font-medium text-lg text-gray-800">Dentist Appointment</h3>
230
+ <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs font-medium">Medium Priority</span>
231
+ </div>
232
+
233
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
234
+ <div class="border-l-4 border-blue-500 pl-3">
235
+ <p class="text-sm text-gray-500">Google Calendar</p>
236
+ <p class="font-medium">Wed, Jun 7 • 9:00-10:00 AM</p>
237
+ </div>
238
+ <div class="border-l-4 border-gray-500 pl-3">
239
+ <p class="text-sm text-gray-500">iCloud</p>
240
+ <p class="font-medium">Wed, Jun 7 • 10:30-11:30 AM</p>
241
+ </div>
242
+ <div class="border-l-4 border-gray-500 pl-3">
243
+ <p class="text-sm text-gray-500">Suggested Resolution</p>
244
+ <p class="font-medium">Wed, Jun 7 • 10:30-11:30 AM</p>
245
+ </div>
246
+ </div>
247
+
248
+ <div class="flex flex-wrap gap-3">
249
+ <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition flex items-center space-x-2">
250
+ <i class="fas fa-check"></i>
251
+ <span>Accept Suggestion</span>
252
+ </button>
253
+ <button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition flex items-center space-x-2">
254
+ <i class="fas fa-pencil-alt"></i>
255
+ <span>Custom Time</span>
256
+ </button>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </div>
261
+
262
+ <!-- Calendar Preview -->
263
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
264
+ <div class="bg-indigo-600 text-white px-6 py-4">
265
+ <h2 class="text-xl font-semibold">Upcoming Events</h2>
266
+ </div>
267
+
268
+ <div class="p-6">
269
+ <!-- Month Navigation -->
270
+ <div class="flex justify-between items-center mb-6">
271
+ <button class="text-indigo-600 hover:text-indigo-800 transition">
272
+ <i class="fas fa-chevron-left"></i>
273
+ </button>
274
+ <h3 class="text-xl font-semibold text-gray-800">June 2023</h3>
275
+ <button class="text-indigo-600 hover:text-indigo-800 transition">
276
+ <i class="fas fa-chevron-right"></i>
277
+ </button>
278
+ </div>
279
+
280
+ <!-- Calendar Grid -->
281
+ <div class="grid grid-cols-7 gap-2 mb-4">
282
+ <div class="text-center font-medium text-gray-500 py-2">Sun</div>
283
+ <div class="text-center font-medium text-gray-500 py-2">Mon</div>
284
+ <div class="text-center font-medium text-gray-500 py-2">Tue</div>
285
+ <div class="text-center font-medium text-gray-500 py-2">Wed</div>
286
+ <div class="text-center font-medium text-gray-500 py-2">Thu</div>
287
+ <div class="text-center font-medium text-gray-500 py-2">Fri</div>
288
+ <div class="text-center font-medium text-gray-500 py-2">Sat</div>
289
+ </div>
290
+
291
+ <div class="grid grid-cols-7 gap-2">
292
+ <!-- Calendar days would be generated dynamically in a real app -->
293
+ <!-- Week 1 -->
294
+ <div class="calendar-day bg-gray-100 rounded-lg p-2 h-24 text-right">28</div>
295
+ <div class="calendar-day bg-gray-100 rounded-lg p-2 h-24 text-right">29</div>
296
+ <div class="calendar-day bg-gray-100 rounded-lg p-2 h-24 text-right">30</div>
297
+ <div class="calendar-day bg-gray-100 rounded-lg p-2 h-24 text-right">31</div>
298
+ <div class="calendar-day bg-white border border-indigo-200 rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">
299
+ 1
300
+ <div class="text-left text-xs mt-1 space-y-1 overflow-hidden">
301
+ <div class="bg-blue-100 text-blue-800 px-1 rounded truncate">Meeting 9am</div>
302
+ </div>
303
+ </div>
304
+ <div class="calendar-day bg-white border border-indigo-200 rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">
305
+ 2
306
+ <div class="text-left text-xs mt-1 space-y-1 overflow-hidden">
307
+ <div class="bg-green-100 text-green-800 px-1 rounded truncate">Lunch 12pm</div>
308
+ </div>
309
+ </div>
310
+ <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">3</div>
311
+
312
+ <!-- Week 2 -->
313
+ <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">4</div>
314
+ <div class="calendar-day bg-white border border-indigo-200 rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">
315
+ 5
316
+ <div class="text-left text-xs mt-1 space-y-1 overflow-hidden">
317
+ <div class="bg-red-100 text-red-800 px-1 rounded truncate">Team Meeting 2pm</div>
318
+ <div class="bg-purple-100 text-purple-800 px-1 rounded truncate">Call 4pm</div>
319
+ </div>
320
+ </div>
321
+ <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">6</div>
322
+ <div class="calendar-day bg-white border border-indigo-200 rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">
323
+ 7
324
+ <div class="text-left text-xs mt-1 space-y-1 overflow-hidden">
325
+ <div class="bg-yellow-100 text-yellow-800 px-1 rounded truncate">Dentist 10am</div>
326
+ </div>
327
+ </div>
328
+ <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">8</div>
329
+ <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">9</div>
330
+ <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">10</div>
331
+
332
+ <!-- Week 3 -->
333
+ <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">11</div>
334
+ <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">12</div>
335
+ <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">13</div>
336
+ <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">14</div>
337
+ <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">15</div>
338
+ <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">16</div>
339
+ <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">17</div>
340
+
341
+ <!-- Week 4 -->
342
+ <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">18</div>
343
+ <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">19</div>
344
+ <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">20</div>
345
+ <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">21</div>
346
+ <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">22</div>
347
+ <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">23</div>
348
+ <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">24</div>
349
+
350
+ <!-- Week 5 -->
351
+ <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">25</div>
352
+ <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">26</div>
353
+ <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">27</div>
354
+ <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">28</div>
355
+ <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">29</div>
356
+ <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">30</div>
357
+ <div class="calendar-day bg-gray-100 rounded-lg p-2 h-24 text-right">1</div>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </main>
364
+
365
+ <!-- Notification -->
366
+ <div class="fixed bottom-4 right-4 space-y-3" id="notificationArea">
367
+ <div class="notification bg-white rounded-lg shadow-lg p-4 w-80 border-l-4 border-green-500 flex justify-between items-start">
368
+ <div>
369
+ <p class="font-medium text-gray-800">Sync Completed</p>
370
+ <p class="text-sm text-gray-600">3 events updated across all calendars</p>
371
+ </div>
372
+ <button class="text-gray-400 hover:text-gray-600">
373
+ <i class="fas fa-times"></i>
374
+ </button>
375
+ </div>
376
+ </div>
377
+
378
+ <!-- Footer -->
379
+ <footer class="bg-gray-100 border-t border-gray-200 py-6 mt-12">
380
+ <div class="container mx-auto px-4">
381
+ <div class="flex flex-col md:flex-row justify-between items-center">
382
+ <div class="flex items-center space-x-2 mb-4 md:mb-0">
383
+ <i class="fas fa-calendar-alt text-indigo-600 text-xl"></i>
384
+ <span class="text-lg font-semibold text-gray-800">EventSync</span>
385
+ </div>
386
+ <div class="flex space-x-6">
387
+ <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Privacy</a>
388
+ <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Terms</a>
389
+ <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Contact</a>
390
+ </div>
391
+ </div>
392
+ <div class="mt-4 text-center md:text-left text-sm text-gray-500">
393
+ © 2023 EventSync. All rights reserved.
394
+ </div>
395
+ </div>
396
+ </footer>
397
+
398
+ <script>
399
+ // Mobile menu toggle
400
+ document.querySelector('.md\\:hidden button').addEventListener('click', function() {
401
+ const menu = document.getElementById('mobileMenu');
402
+ menu.classList.toggle('hidden');
403
+ });
404
+
405
+ // Close notification
406
+ document.querySelector('#notificationArea button').addEventListener('click', function() {
407
+ this.closest('.notification').style.opacity = '0';
408
+ setTimeout(() => {
409
+ this.closest('.notification').remove();
410
+ }, 300);
411
+ });
412
+
413
+ // Calendar day click handler
414
+ document.querySelectorAll('.calendar-day').forEach(day => {
415
+ day.addEventListener('click', function() {
416
+ // In a real app, this would show event details
417
+ console.log('Day clicked:', this.textContent.trim());
418
+ });
419
+ });
420
+
421
+ // Conflict resolution buttons
422
+ document.querySelectorAll('.flex-wrap button').forEach(button => {
423
+ button.addEventListener('click', function() {
424
+ const action = this.textContent.trim();
425
+ const conflictTitle = this.closest('.p-6').querySelector('h3').textContent;
426
+
427
+ if (action === 'Accept Suggestion') {
428
+ showToast(`Accepted resolution for: ${conflictTitle}`);
429
+ } else if (action === 'Custom Time') {
430
+ // In a real app, this would open a time picker
431
+ showToast(`Opening custom time selector for: ${conflictTitle}`);
432
+ } else if (action === 'Ignore Conflict') {
433
+ showToast(`Ignored conflict for: ${conflictTitle}`);
434
+ }
435
+ });
436
+ });
437
+
438
+ // Helper function to show toast notifications
439
+ function showToast(message) {
440
+ const toast = document.createElement('div');
441
+ toast.className = 'notification bg-white rounded-lg shadow-lg p-4 w-80 border-l-4 border-blue-500 flex justify-between items-start';
442
+ toast.innerHTML = `
443
+ <div>
444
+ <p class="font-medium text-gray-800">Action Taken</p>
445
+ <p class="text-sm text-gray-600">${message}</p>
446
+ </div>
447
+ <button class="text-gray-400 hover:text-gray-600">
448
+ <i class="fas fa-times"></i>
449
+ </button>
450
+ `;
451
+
452
+ document.getElementById('notificationArea').prepend(toast);
453
+
454
+ // Auto-remove after 5 seconds
455
+ setTimeout(() => {
456
+ toast.style.opacity = '0';
457
+ setTimeout(() => toast.remove(), 300);
458
+ }, 5000);
459
+
460
+ // Add click handler to close button
461
+ toast.querySelector('button').addEventListener('click', function() {
462
+ toast.style.opacity = '0';
463
+ setTimeout(() => toast.remove(), 300);
464
+ });
465
+ }
466
+ </script>
467
+ <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=kizashix/eventsync" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
468
+ </html>