localhost-llm commited on
Commit
46410be
·
verified ·
1 Parent(s): 3a0c4f5

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +613 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Follow Up
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: follow-up
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: pink
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,613 @@
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>Follow-Up Calendar</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
9
+ <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
10
+ <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
12
+ <style>
13
+ .calendar-day:hover {
14
+ transform: scale(1.05);
15
+ transition: transform 0.2s ease;
16
+ }
17
+ .event-dot {
18
+ width: 8px;
19
+ height: 8px;
20
+ border-radius: 50%;
21
+ }
22
+ .modal-overlay {
23
+ background-color: rgba(0, 0, 0, 0.5);
24
+ }
25
+ .fade-in {
26
+ animation: fadeIn 0.3s ease-in-out;
27
+ }
28
+ @keyframes fadeIn {
29
+ from { opacity: 0; }
30
+ to { opacity: 1; }
31
+ }
32
+ @media (max-width: 640px) {
33
+ .month-grid {
34
+ grid-template-columns: repeat(7, minmax(0, 1fr));
35
+ }
36
+ .week-grid {
37
+ grid-template-columns: repeat(1, minmax(0, 1fr));
38
+ }
39
+ .week-day-header {
40
+ display: none;
41
+ }
42
+ .week-day-mobile {
43
+ display: flex;
44
+ justify-content: space-between;
45
+ align-items: center;
46
+ padding: 0.5rem;
47
+ border-bottom: 1px solid #e5e7eb;
48
+ }
49
+ }
50
+ </style>
51
+ </head>
52
+ <body>
53
+ <div id="root"></div>
54
+
55
+ <script type="text/babel">
56
+ const { useState, useEffect } = React;
57
+
58
+ const FollowUpCalendar = () => {
59
+ const [currentDate, setCurrentDate] = useState(new Date());
60
+ const [events, setEvents] = useState([]);
61
+ const [showModal, setShowModal] = useState(false);
62
+ const [selectedDate, setSelectedDate] = useState(null);
63
+ const [newEvent, setNewEvent] = useState({
64
+ title: '',
65
+ description: '',
66
+ time: '09:00',
67
+ type: 'meeting'
68
+ });
69
+ const [viewMode, setViewMode] = useState('month'); // 'month' or 'week'
70
+ const [selectedEvent, setSelectedEvent] = useState(null);
71
+
72
+ // Sample initial events
73
+ useEffect(() => {
74
+ const sampleEvents = [
75
+ {
76
+ id: 1,
77
+ title: 'Client Meeting',
78
+ description: 'Discuss project requirements with ABC Corp',
79
+ date: new Date(new Date().setDate(new Date().getDate() + 1)),
80
+ time: '10:30',
81
+ type: 'meeting'
82
+ },
83
+ {
84
+ id: 2,
85
+ title: 'Follow-up Call',
86
+ description: 'Check on product delivery status',
87
+ date: new Date(new Date().setDate(new Date().getDate() + 3)),
88
+ time: '14:00',
89
+ type: 'call'
90
+ },
91
+ {
92
+ id: 3,
93
+ title: 'Email Reminder',
94
+ description: 'Send proposal to XYZ Inc',
95
+ date: new Date(new Date().setDate(new Date().getDate() - 2)),
96
+ time: '11:15',
97
+ type: 'email'
98
+ }
99
+ ];
100
+ setEvents(sampleEvents);
101
+ }, []);
102
+
103
+ const navigateMonth = (direction) => {
104
+ const newDate = new Date(currentDate);
105
+ newDate.setMonth(newDate.getMonth() + direction);
106
+ setCurrentDate(newDate);
107
+ };
108
+
109
+ const navigateWeek = (direction) => {
110
+ const newDate = new Date(currentDate);
111
+ newDate.setDate(newDate.getDate() + (direction * 7));
112
+ setCurrentDate(newDate);
113
+ };
114
+
115
+ const getDaysInMonth = () => {
116
+ const year = currentDate.getFullYear();
117
+ const month = currentDate.getMonth();
118
+ const firstDay = new Date(year, month, 1);
119
+ const lastDay = new Date(year, month + 1, 0);
120
+
121
+ const daysInMonth = lastDay.getDate();
122
+ const startingDay = firstDay.getDay();
123
+
124
+ const days = [];
125
+
126
+ // Add empty cells for days before the first day of the month
127
+ for (let i = 0; i < startingDay; i++) {
128
+ days.push(null);
129
+ }
130
+
131
+ // Add days of the month
132
+ for (let i = 1; i <= daysInMonth; i++) {
133
+ const date = new Date(year, month, i);
134
+ days.push(date);
135
+ }
136
+
137
+ return days;
138
+ };
139
+
140
+ const getWeekDays = () => {
141
+ const weekStart = new Date(currentDate);
142
+ weekStart.setDate(weekStart.getDate() - weekStart.getDay());
143
+
144
+ const weekDays = [];
145
+ for (let i = 0; i < 7; i++) {
146
+ const day = new Date(weekStart);
147
+ day.setDate(day.getDate() + i);
148
+ weekDays.push(day);
149
+ }
150
+
151
+ return weekDays;
152
+ };
153
+
154
+ const getEventsForDate = (date) => {
155
+ if (!date) return [];
156
+ return events.filter(event =>
157
+ event.date.getDate() === date.getDate() &&
158
+ event.date.getMonth() === date.getMonth() &&
159
+ event.date.getFullYear() === date.getFullYear()
160
+ );
161
+ };
162
+
163
+ const handleDateClick = (date) => {
164
+ if (!date) return;
165
+ setSelectedDate(date);
166
+ setShowModal(true);
167
+ setNewEvent({
168
+ title: '',
169
+ description: '',
170
+ time: '09:00',
171
+ type: 'meeting'
172
+ });
173
+ };
174
+
175
+ const handleEventClick = (event, e) => {
176
+ e.stopPropagation();
177
+ setSelectedEvent(event);
178
+ };
179
+
180
+ const handleAddEvent = () => {
181
+ if (!newEvent.title || !selectedDate) return;
182
+
183
+ const event = {
184
+ id: events.length + 1,
185
+ title: newEvent.title,
186
+ description: newEvent.description,
187
+ date: new Date(selectedDate),
188
+ time: newEvent.time,
189
+ type: newEvent.type
190
+ };
191
+
192
+ setEvents([...events, event]);
193
+ setShowModal(false);
194
+ };
195
+
196
+ const handleDeleteEvent = (id) => {
197
+ setEvents(events.filter(event => event.id !== id));
198
+ setSelectedEvent(null);
199
+ };
200
+
201
+ const isToday = (date) => {
202
+ if (!date) return false;
203
+ const today = new Date();
204
+ return date.getDate() === today.getDate() &&
205
+ date.getMonth() === today.getMonth() &&
206
+ date.getFullYear() === today.getFullYear();
207
+ };
208
+
209
+ const getEventTypeColor = (type) => {
210
+ switch (type) {
211
+ case 'meeting': return 'bg-blue-500';
212
+ case 'call': return 'bg-green-500';
213
+ case 'email': return 'bg-purple-500';
214
+ case 'task': return 'bg-yellow-500';
215
+ default: return 'bg-gray-500';
216
+ }
217
+ };
218
+
219
+ const getEventTypeIcon = (type) => {
220
+ switch (type) {
221
+ case 'meeting': return 'fa-users';
222
+ case 'call': return 'fa-phone';
223
+ case 'email': return 'fa-envelope';
224
+ case 'task': return 'fa-check-circle';
225
+ default: return 'fa-calendar';
226
+ }
227
+ };
228
+
229
+ const renderMonthView = () => {
230
+ const days = getDaysInMonth();
231
+ const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
232
+
233
+ return (
234
+ <div className="bg-white rounded-lg shadow overflow-hidden">
235
+ <div className="grid grid-cols-7 gap-1 p-2 bg-gray-100">
236
+ {weekdays.map(day => (
237
+ <div key={day} className="text-center font-medium text-gray-600 py-2 text-xs sm:text-sm">
238
+ {day}
239
+ </div>
240
+ ))}
241
+ </div>
242
+ <div className="grid month-grid grid-cols-7 gap-1 p-2">
243
+ {days.map((date, index) => {
244
+ const dateEvents = getEventsForDate(date);
245
+
246
+ return (
247
+ <div
248
+ key={index}
249
+ onClick={() => handleDateClick(date)}
250
+ className={`calendar-day min-h-16 sm:min-h-24 p-1 sm:p-2 border rounded-lg cursor-pointer transition-all ${date ? 'hover:bg-gray-50' : 'bg-gray-50'} ${isToday(date) ? 'border-blue-400 border-2' : 'border-gray-200'}`}
251
+ >
252
+ {date && (
253
+ <>
254
+ <div className="flex justify-between items-center mb-1">
255
+ <span className={`font-medium text-xs sm:text-sm ${isToday(date) ? 'text-blue-600' : 'text-gray-700'}`}>
256
+ {date.getDate()}
257
+ </span>
258
+ {dateEvents.length > 0 && (
259
+ <div className="flex space-x-1">
260
+ {dateEvents.slice(0, 2).map(event => (
261
+ <div
262
+ key={event.id}
263
+ className={`event-dot ${getEventTypeColor(event.type)}`}
264
+ />
265
+ ))}
266
+ {dateEvents.length > 2 && <span className="text-xs text-gray-500 hidden sm:inline">+{dateEvents.length - 2}</span>}
267
+ </div>
268
+ )}
269
+ </div>
270
+ <div className="space-y-1 overflow-hidden hidden sm:block">
271
+ {dateEvents.slice(0, 2).map(event => (
272
+ <div
273
+ key={event.id}
274
+ onClick={(e) => handleEventClick(event, e)}
275
+ className={`text-xs p-1 rounded truncate ${getEventTypeColor(event.type)} text-white`}
276
+ >
277
+ {event.time} {event.title}
278
+ </div>
279
+ ))}
280
+ </div>
281
+ </>
282
+ )}
283
+ </div>
284
+ );
285
+ })}
286
+ </div>
287
+ </div>
288
+ );
289
+ };
290
+
291
+ const renderWeekView = () => {
292
+ const weekDays = getWeekDays();
293
+
294
+ return (
295
+ <div className="bg-white rounded-lg shadow overflow-hidden">
296
+ <div className="grid week-day-header grid-cols-7 gap-1 p-2 bg-gray-100">
297
+ {weekDays.map(day => {
298
+ const dateEvents = getEventsForDate(day);
299
+
300
+ return (
301
+ <div key={day} className="text-center">
302
+ <div className="font-medium text-gray-600 text-xs sm:text-sm">
303
+ {day.toLocaleDateString('en-US', { weekday: 'short' })}
304
+ </div>
305
+ <div
306
+ className={`mx-auto w-6 h-6 sm:w-8 sm:h-8 flex items-center justify-center rounded-full text-xs sm:text-sm ${isToday(day) ? 'bg-blue-500 text-white' : 'text-gray-700'}`}
307
+ >
308
+ {day.getDate()}
309
+ </div>
310
+ </div>
311
+ );
312
+ })}
313
+ </div>
314
+ <div className="grid week-grid grid-cols-1 sm:grid-cols-7 gap-2 sm:gap-4 p-2 sm:p-4 min-h-96">
315
+ {weekDays.map(day => {
316
+ const dateEvents = getEventsForDate(day);
317
+
318
+ return (
319
+ <div key={day} className="border rounded-lg">
320
+ <div
321
+ onClick={() => handleDateClick(day)}
322
+ className={`week-day-mobile sm:hidden ${isToday(day) ? 'bg-blue-50' : ''}`}
323
+ >
324
+ <span className="font-medium">
325
+ {day.toLocaleDateString('en-US', { weekday: 'short' })}, {day.getDate()}
326
+ </span>
327
+ {dateEvents.length > 0 && (
328
+ <span className="text-xs bg-gray-200 px-2 py-1 rounded-full">
329
+ {dateEvents.length} event{dateEvents.length !== 1 ? 's' : ''}
330
+ </span>
331
+ )}
332
+ </div>
333
+ <div
334
+ onClick={() => handleDateClick(day)}
335
+ className={`p-2 cursor-pointer ${isToday(day) ? 'border-blue-400' : 'border-gray-200'}`}
336
+ >
337
+ <div className="space-y-2">
338
+ {dateEvents.length > 0 ? (
339
+ dateEvents.map(event => (
340
+ <div
341
+ key={event.id}
342
+ onClick={(e) => handleEventClick(event, e)}
343
+ className={`p-2 rounded-lg ${getEventTypeColor(event.type)} text-white`}
344
+ >
345
+ <div className="flex items-center">
346
+ <i className={`fas ${getEventTypeIcon(event.type)} mr-2 text-xs sm:text-sm`}></i>
347
+ <div className="truncate">
348
+ <div className="font-medium text-xs sm:text-sm">{event.title}</div>
349
+ <div className="text-xs">{event.time}</div>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ ))
354
+ ) : (
355
+ <div className="text-gray-400 text-center py-4 text-xs sm:text-sm">No events</div>
356
+ )}
357
+ </div>
358
+ </div>
359
+ </div>
360
+ );
361
+ })}
362
+ </div>
363
+ </div>
364
+ );
365
+ };
366
+
367
+ return (
368
+ <div className="min-h-screen bg-gray-100 p-2 sm:p-4 md:p-8">
369
+ <div className="max-w-6xl mx-auto">
370
+ <div className="flex flex-col sm:flex-row justify-between items-center mb-4 sm:mb-6">
371
+ <h1 className="text-xl sm:text-2xl md:text-3xl font-bold text-gray-800 mb-2 sm:mb-0">
372
+ Follow-Up Calendar
373
+ </h1>
374
+ <div className="flex space-x-2 sm:space-x-4">
375
+ <button
376
+ onClick={() => setViewMode('month')}
377
+ className={`px-3 py-1 sm:px-4 sm:py-2 rounded-lg text-xs sm:text-sm ${viewMode === 'month' ? 'bg-blue-500 text-white' : 'bg-white text-gray-700'}`}
378
+ >
379
+ Month
380
+ </button>
381
+ <button
382
+ onClick={() => setViewMode('week')}
383
+ className={`px-3 py-1 sm:px-4 sm:py-2 rounded-lg text-xs sm:text-sm ${viewMode === 'week' ? 'bg-blue-500 text-white' : 'bg-white text-gray-700'}`}
384
+ >
385
+ Week
386
+ </button>
387
+ </div>
388
+ </div>
389
+
390
+ <div className="bg-white rounded-lg shadow p-2 sm:p-4 mb-4 sm:mb-6">
391
+ <div className="flex flex-col sm:flex-row justify-between items-center mb-3 sm:mb-4">
392
+ <div className="flex items-center space-x-2 sm:space-x-4 mb-2 sm:mb-0">
393
+ <button
394
+ onClick={viewMode === 'month' ? () => navigateMonth(-1) : () => navigateWeek(-1)}
395
+ className="p-1 sm:p-2 rounded-full hover:bg-gray-100"
396
+ >
397
+ <i className="fas fa-chevron-left text-gray-600 text-sm sm:text-base"></i>
398
+ </button>
399
+ <h2 className="text-lg sm:text-xl font-semibold text-gray-800">
400
+ {currentDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}
401
+ </h2>
402
+ <button
403
+ onClick={viewMode === 'month' ? () => navigateMonth(1) : () => navigateWeek(1)}
404
+ className="p-1 sm:p-2 rounded-full hover:bg-gray-100"
405
+ >
406
+ <i className="fas fa-chevron-right text-gray-600 text-sm sm:text-base"></i>
407
+ </button>
408
+ <button
409
+ onClick={() => setCurrentDate(new Date())}
410
+ className="px-2 py-1 sm:px-3 sm:py-1 text-xs sm:text-sm bg-gray-200 rounded-lg hover:bg-gray-300"
411
+ >
412
+ Today
413
+ </button>
414
+ </div>
415
+ <button
416
+ onClick={() => {
417
+ setSelectedDate(new Date());
418
+ setShowModal(true);
419
+ }}
420
+ className="px-3 py-1 sm:px-4 sm:py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 flex items-center text-xs sm:text-sm"
421
+ >
422
+ <i className="fas fa-plus mr-1 sm:mr-2 text-xs sm:text-sm"></i>
423
+ Add Event
424
+ </button>
425
+ </div>
426
+
427
+ {viewMode === 'month' ? renderMonthView() : renderWeekView()}
428
+ </div>
429
+
430
+ <div className="bg-white rounded-lg shadow p-2 sm:p-4">
431
+ <h3 className="text-base sm:text-lg font-semibold text-gray-800 mb-2 sm:mb-4">Upcoming Follow-Ups</h3>
432
+ <div className="space-y-2 sm:space-y-3">
433
+ {events
434
+ .filter(event => event.date >= new Date())
435
+ .sort((a, b) => a.date - b.date)
436
+ .slice(0, 5)
437
+ .map(event => (
438
+ <div
439
+ key={event.id}
440
+ onClick={() => setSelectedEvent(event)}
441
+ className={`p-2 sm:p-3 rounded-lg cursor-pointer ${getEventTypeColor(event.type)} text-white`}
442
+ >
443
+ <div className="flex justify-between items-center">
444
+ <div>
445
+ <div className="font-medium text-xs sm:text-sm">{event.title}</div>
446
+ <div className="text-xs">{event.date.toLocaleDateString()} at {event.time}</div>
447
+ </div>
448
+ <i className={`fas ${getEventTypeIcon(event.type)} text-xs sm:text-sm`}></i>
449
+ </div>
450
+ </div>
451
+ ))}
452
+ {events.filter(event => event.date >= new Date()).length === 0 && (
453
+ <div className="text-center py-4 text-gray-500 text-xs sm:text-sm">No upcoming follow-ups</div>
454
+ )}
455
+ </div>
456
+ </div>
457
+ </div>
458
+
459
+ {/* Add Event Modal */}
460
+ {showModal && (
461
+ <div className="fixed inset-0 flex items-center justify-center z-50 modal-overlay fade-in p-2 sm:p-4">
462
+ <div className="bg-white rounded-lg shadow-xl w-full max-w-md mx-2 sm:mx-4">
463
+ <div className="p-4 sm:p-6">
464
+ <div className="flex justify-between items-center mb-3 sm:mb-4">
465
+ <h3 className="text-lg sm:text-xl font-semibold text-gray-800">
466
+ {selectedDate?.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}
467
+ </h3>
468
+ <button
469
+ onClick={() => setShowModal(false)}
470
+ className="text-gray-500 hover:text-gray-700"
471
+ >
472
+ <i className="fas fa-times"></i>
473
+ </button>
474
+ </div>
475
+
476
+ <div className="space-y-3 sm:space-y-4">
477
+ <div>
478
+ <label className="block text-xs sm:text-sm font-medium text-gray-700 mb-1">Event Type</label>
479
+ <div className="grid grid-cols-4 gap-1 sm:gap-2">
480
+ {['meeting', 'call', 'email', 'task'].map(type => (
481
+ <button
482
+ key={type}
483
+ onClick={() => setNewEvent({...newEvent, type})}
484
+ className={`p-1 sm:p-2 rounded-lg flex flex-col items-center text-xs ${newEvent.type === type ? getEventTypeColor(type) + ' text-white' : 'bg-gray-100 text-gray-700'}`}
485
+ >
486
+ <i className={`fas ${getEventTypeIcon(type)} mb-1 text-xs sm:text-sm`}></i>
487
+ <span className="capitalize">{type}</span>
488
+ </button>
489
+ ))}
490
+ </div>
491
+ </div>
492
+
493
+ <div>
494
+ <label className="block text-xs sm:text-sm font-medium text-gray-700 mb-1">Title</label>
495
+ <input
496
+ type="text"
497
+ value={newEvent.title}
498
+ onChange={(e) => setNewEvent({...newEvent, title: e.target.value})}
499
+ className="w-full px-2 sm:px-3 py-1 sm:py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 text-xs sm:text-sm"
500
+ placeholder="Enter event title"
501
+ />
502
+ </div>
503
+
504
+ <div>
505
+ <label className="block text-xs sm:text-sm font-medium text-gray-700 mb-1">Time</label>
506
+ <input
507
+ type="time"
508
+ value={newEvent.time}
509
+ onChange={(e) => setNewEvent({...newEvent, time: e.target.value})}
510
+ className="w-full px-2 sm:px-3 py-1 sm:py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 text-xs sm:text-sm"
511
+ />
512
+ </div>
513
+
514
+ <div>
515
+ <label className="block text-xs sm:text-sm font-medium text-gray-700 mb-1">Description</label>
516
+ <textarea
517
+ value={newEvent.description}
518
+ onChange={(e) => setNewEvent({...newEvent, description: e.target.value})}
519
+ className="w-full px-2 sm:px-3 py-1 sm:py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 text-xs sm:text-sm"
520
+ rows="3"
521
+ placeholder="Enter event details"
522
+ ></textarea>
523
+ </div>
524
+
525
+ <div className="flex justify-end space-x-2 sm:space-x-3 pt-3 sm:pt-4">
526
+ <button
527
+ onClick={() => setShowModal(false)}
528
+ className="px-3 sm:px-4 py-1 sm:py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 text-xs sm:text-sm"
529
+ >
530
+ Cancel
531
+ </button>
532
+ <button
533
+ onClick={handleAddEvent}
534
+ className="px-3 sm:px-4 py-1 sm:py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 text-xs sm:text-sm"
535
+ >
536
+ Add Event
537
+ </button>
538
+ </div>
539
+ </div>
540
+ </div>
541
+ </div>
542
+ </div>
543
+ )}
544
+
545
+ {/* Event Detail Modal */}
546
+ {selectedEvent && (
547
+ <div className="fixed inset-0 flex items-center justify-center z-50 modal-overlay fade-in p-2 sm:p-4">
548
+ <div className="bg-white rounded-lg shadow-xl w-full max-w-md mx-2 sm:mx-4">
549
+ <div className="p-4 sm:p-6">
550
+ <div className="flex justify-between items-center mb-3 sm:mb-4">
551
+ <h3 className="text-lg sm:text-xl font-semibold text-gray-800">
552
+ {selectedEvent.title}
553
+ </h3>
554
+ <button
555
+ onClick={() => setSelectedEvent(null)}
556
+ className="text-gray-500 hover:text-gray-700"
557
+ >
558
+ <i className="fas fa-times"></i>
559
+ </button>
560
+ </div>
561
+
562
+ <div className={`p-3 sm:p-4 rounded-lg mb-3 sm:mb-4 ${getEventTypeColor(selectedEvent.type)} text-white`}>
563
+ <div className="flex items-center mb-1 sm:mb-2">
564
+ <i className={`fas ${getEventTypeIcon(selectedEvent.type)} mr-2 text-sm sm:text-xl`}></i>
565
+ <span className="capitalize font-medium text-xs sm:text-sm">{selectedEvent.type}</span>
566
+ </div>
567
+ <div className="text-xs sm:text-sm">
568
+ {selectedEvent.date.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })} at {selectedEvent.time}
569
+ </div>
570
+ </div>
571
+
572
+ <div className="mb-3 sm:mb-4">
573
+ <h4 className="text-xs sm:text-sm font-medium text-gray-700 mb-1">Description</h4>
574
+ <p className="text-gray-800 text-xs sm:text-sm">{selectedEvent.description || 'No description provided'}</p>
575
+ </div>
576
+
577
+ <div className="flex justify-end space-x-2 sm:space-x-3 pt-3 sm:pt-4">
578
+ <button
579
+ onClick={() => handleDeleteEvent(selectedEvent.id)}
580
+ className="px-3 sm:px-4 py-1 sm:py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 text-xs sm:text-sm"
581
+ >
582
+ Delete
583
+ </button>
584
+ <button
585
+ onClick={() => {
586
+ setSelectedDate(selectedEvent.date);
587
+ setNewEvent({
588
+ title: selectedEvent.title,
589
+ description: selectedEvent.description,
590
+ time: selectedEvent.time,
591
+ type: selectedEvent.type
592
+ });
593
+ setSelectedEvent(null);
594
+ setShowModal(true);
595
+ }}
596
+ className="px-3 sm:px-4 py-1 sm:py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 text-xs sm:text-sm"
597
+ >
598
+ Edit
599
+ </button>
600
+ </div>
601
+ </div>
602
+ </div>
603
+ </div>
604
+ )}
605
+ </div>
606
+ );
607
+ };
608
+
609
+ const root = ReactDOM.createRoot(document.getElementById('root'));
610
+ root.render(<FollowUpCalendar />);
611
+ </script>
612
+ <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=localhost-llm/follow-up" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
613
+ </html>
prompts.txt ADDED
File without changes