Hugging Face's logo

Spaces:
samihalawa
/
balance
Running

App Files Community
Luigi commited on
Commit
27a5a03
·
verified ·
1 Parent(s): e78472d

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +1839 -19
index.html CHANGED
@@ -1,19 +1,1839 @@
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="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>BALANΣE ACADEMIA</title>
7
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
8
+ <style>
9
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
10
+
11
+ body {
12
+ font-family: 'Inter', sans-serif;
13
+ background-color: #f7f9fc;
14
+ }
15
+
16
+ .timeline-dot {
17
+ position: absolute;
18
+ left: -8px;
19
+ width: 16px;
20
+ height: 16px;
21
+ background-color: #2563eb;
22
+ border-radius: 50%;
23
+ border: 3px solid white;
24
+ }
25
+
26
+ .timeline-line {
27
+ position: absolute;
28
+ left: 0;
29
+ width: 2px;
30
+ top: 16px;
31
+ bottom: 0;
32
+ background-color: #e5e7eb;
33
+ }
34
+
35
+ .event-card {
36
+ position: relative;
37
+ margin-left: 20px;
38
+ border-bottom: 1px solid #f0f0f0;
39
+ }
40
+
41
+ .event-card::before {
42
+ content: "";
43
+ position: absolute;
44
+ left: -20px;
45
+ height: 100%;
46
+ width: 2px;
47
+ background-color: #2563eb;
48
+ }
49
+
50
+ .location-tag-purple {
51
+ background-color: #a855f7;
52
+ color: white;
53
+ border-radius: 4px;
54
+ padding: 2px 8px;
55
+ font-size: 0.875rem;
56
+ }
57
+
58
+ .location-tag-orange {
59
+ background-color: #f97316;
60
+ color: white;
61
+ border-radius: 4px;
62
+ padding: 2px 8px;
63
+ font-size: 0.875rem;
64
+ }
65
+
66
+ .location-tag-blue {
67
+ background-color: #2563eb;
68
+ color: white;
69
+ border-radius: 4px;
70
+ padding: 2px 8px;
71
+ font-size: 0.875rem;
72
+ }
73
+
74
+ .dropdown-content {
75
+ display: none;
76
+ position: absolute;
77
+ background-color: white;
78
+ min-width: 160px;
79
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
80
+ z-index: 10;
81
+ border-radius: 8px;
82
+ top: 100%;
83
+ margin-top: 4px;
84
+ }
85
+
86
+ .dropdown-open .dropdown-content {
87
+ display: block;
88
+ }
89
+
90
+ .previous-events {
91
+ display: none;
92
+ }
93
+
94
+ .previous-events.visible {
95
+ display: block;
96
+ }
97
+
98
+ /* Modal styles */
99
+ .modal-backdrop {
100
+ position: fixed;
101
+ top: 0;
102
+ left: 0;
103
+ width: 100%;
104
+ height: 100%;
105
+ background-color: rgba(0, 0, 0, 0.5);
106
+ z-index: 50;
107
+ display: none;
108
+ }
109
+
110
+ .modal-backdrop.visible {
111
+ display: flex;
112
+ justify-content: center;
113
+ align-items: flex-start;
114
+ padding-top: 5vh;
115
+ }
116
+
117
+ .modal-content {
118
+ background-color: white;
119
+ border-radius: 8px;
120
+ width: 100%;
121
+ max-width: 600px;
122
+ max-height: 90vh;
123
+ overflow-y: auto;
124
+ box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
125
+ }
126
+
127
+ /* Bottom menu styles */
128
+ .bottom-menu {
129
+ position: fixed;
130
+ bottom: 0;
131
+ left: 0;
132
+ width: 100%;
133
+ background-color: white;
134
+ border-top-left-radius: 16px;
135
+ border-top-right-radius: 16px;
136
+ box-shadow: 0px -4px 20px rgba(0, 0, 0, 0.1);
137
+ transform: translateY(100%);
138
+ transition: transform 0.3s ease-in-out;
139
+ z-index: 40;
140
+ }
141
+
142
+ .bottom-menu.visible {
143
+ transform: translateY(0);
144
+ }
145
+
146
+ /* Calendar picker styles */
147
+ .calendar-picker {
148
+ position: absolute;
149
+ top: 100%;
150
+ left: 0;
151
+ background-color: white;
152
+ border-radius: 8px;
153
+ box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
154
+ width: 100%;
155
+ z-index: 20;
156
+ display: none;
157
+ }
158
+
159
+ .calendar-picker.visible {
160
+ display: block;
161
+ }
162
+
163
+ .calendar-grid {
164
+ display: grid;
165
+ grid-template-columns: repeat(7, 1fr);
166
+ gap: 8px;
167
+ }
168
+
169
+ .calendar-day {
170
+ text-align: center;
171
+ padding: 8px 0;
172
+ cursor: pointer;
173
+ }
174
+
175
+ .calendar-day:hover {
176
+ background-color: #f3f4f6;
177
+ border-radius: 4px;
178
+ }
179
+
180
+ .calendar-day.active {
181
+ background-color: #2563eb;
182
+ color: white;
183
+ border-radius: 4px;
184
+ }
185
+
186
+ .calendar-day.other-month {
187
+ color: #9ca3af;
188
+ }
189
+
190
+ .status-tag {
191
+ position: absolute;
192
+ top: 10px;
193
+ right: 10px;
194
+ background-color: #9ca3af;
195
+ color: white;
196
+ border-radius: 4px;
197
+ padding: 2px 6px;
198
+ font-size: 0.75rem;
199
+ }
200
+
201
+ /* Time picker styles */
202
+ .time-picker {
203
+ position: absolute;
204
+ background-color: white;
205
+ border-radius: 8px;
206
+ box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
207
+ width: 100%;
208
+ z-index: 20;
209
+ display: none;
210
+ max-height: 200px;
211
+ overflow-y: auto;
212
+ }
213
+
214
+ .time-picker.visible {
215
+ display: block;
216
+ }
217
+
218
+ .time-option {
219
+ padding: 8px 16px;
220
+ cursor: pointer;
221
+ }
222
+
223
+ .time-option:hover {
224
+ background-color: #f3f4f6;
225
+ }
226
+
227
+ /* Toggle switch style */
228
+ .switch {
229
+ position: relative;
230
+ display: inline-block;
231
+ width: 40px;
232
+ height: 24px;
233
+ }
234
+
235
+ .switch input {
236
+ opacity: 0;
237
+ width: 0;
238
+ height: 0;
239
+ }
240
+
241
+ .slider {
242
+ position: absolute;
243
+ cursor: pointer;
244
+ top: 0;
245
+ left: 0;
246
+ right: 0;
247
+ bottom: 0;
248
+ background-color: #ccc;
249
+ transition: .4s;
250
+ border-radius: 24px;
251
+ }
252
+
253
+ .slider:before {
254
+ position: absolute;
255
+ content: "";
256
+ height: 16px;
257
+ width: 16px;
258
+ left: 4px;
259
+ bottom: 4px;
260
+ background-color: white;
261
+ transition: .4s;
262
+ border-radius: 50%;
263
+ }
264
+
265
+ input:checked + .slider {
266
+ background-color: #2196F3;
267
+ }
268
+
269
+ input:checked + .slider:before {
270
+ transform: translateX(16px);
271
+ }
272
+
273
+ /* Alert styles */
274
+ .notification {
275
+ position: fixed;
276
+ top: 80px;
277
+ right: 20px;
278
+ padding: 12px 16px;
279
+ border-radius: 8px;
280
+ z-index: 100;
281
+ display: flex;
282
+ align-items: center;
283
+ opacity: 0;
284
+ transform: translateY(-20px);
285
+ transition: opacity 0.3s, transform 0.3s;
286
+ max-width: 400px;
287
+ }
288
+
289
+ .notification.show {
290
+ opacity: 1;
291
+ transform: translateY(0);
292
+ }
293
+
294
+ .notification-success {
295
+ background-color: #ecfdf5;
296
+ border: 1px solid #6ee7b7;
297
+ color: #065f46;
298
+ }
299
+
300
+ /* Responsive adjustments */
301
+ @media (max-width: 640px) {
302
+ .modal-content {
303
+ max-width: 100%;
304
+ height: 100%;
305
+ max-height: 100%;
306
+ border-radius: 0;
307
+ }
308
+
309
+ .modal-backdrop {
310
+ padding-top: 0;
311
+ }
312
+
313
+ .sidebar-visible .sidebar {
314
+ transform: translateX(0);
315
+ }
316
+
317
+ .notification {
318
+ top: 70px;
319
+ right: 10px;
320
+ left: 10px;
321
+ max-width: none;
322
+ }
323
+ }
324
+
325
+ /* Responsive header adjustments */
326
+ @media (max-width: 380px) {
327
+ .header-compact .brand-text {
328
+ display: none;
329
+ }
330
+ }
331
+ </style>
332
+ </head>
333
+ <body>
334
+ <!-- Success Notification -->
335
+ <div class="notification notification-success" id="notification">
336
+ <svg class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
337
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
338
+ </svg>
339
+ <span id="notification-message">La solicitud ha sido enviada de manera exitosa a la Academia.</span>
340
+ <button class="ml-auto" onclick="hideNotification()">
341
+ <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
342
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
343
+ </svg>
344
+ </button>
345
+ </div>
346
+
347
+ <!-- Top Header -->
348
+ <header class="fixed w-full bg-white shadow-sm z-30 flex items-center justify-between px-4 py-3 header-compact">
349
+ <div class="flex items-center">
350
+ <button class="mr-4 focus:outline-none" id="sidebar-toggle">
351
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
352
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
353
+ </svg>
354
+ </button>
355
+ <div class="flex items-center">
356
+ <span class="text-xl font-bold">BALANC</span>
357
+ <span class="text-xl font-bold text-yellow-500">Σ</span>
358
+ <span class="text-xs text-gray-500 ml-1 mt-2 tracking-wider brand-text">ACADEMIA</span>
359
+ </div>
360
+ </div>
361
+ <div class="flex items-center">
362
+ <button class="mr-4 focus:outline-none">
363
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
364
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
365
+ </svg>
366
+ </button>
367
+ <div class="relative">
368
+ <button class="flex items-center justify-center w-8 h-8 bg-blue-500 rounded-full text-white font-medium focus:outline-none">
369
+ JR
370
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="white">
371
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
372
+ </svg>
373
+ </button>
374
+ </div>
375
+ </div>
376
+ </header>
377
+
378
+ <!-- Main Container -->
379
+ <div class="flex min-h-screen pt-16" id="main-container">
380
+ <!-- Left Sidebar -->
381
+ <div class="w-60 bg-white h-full border-r border-gray-200 fixed left-0 overflow-y-auto z-20 transition-transform duration-300 transform-gpu -translate-x-full sm:translate-x-0" id="sidebar">
382
+ <nav class="p-4">
383
+ <a href="#" class="flex items-center py-2 px-4 bg-blue-50 border-l-4 border-blue-500 text-blue-500 font-medium">
384
+ <span>Home</span>
385
+ </a>
386
+
387
+ <div class="mt-4">
388
+ <span class="text-gray-700 font-medium">Cursos</span>
389
+ <a href="#" class="flex items-center py-2 px-4 ml-4 mt-2 text-gray-700 hover:bg-gray-50">
390
+ <span>Contabilidad financiera</span>
391
+ </a>
392
+ <a href="#" class="flex items-center py-2 px-4 ml-4 text-gray-700 hover:bg-gray-50">
393
+ <span>Historia</span>
394
+ </a>
395
+ <a href="#" class="flex items-center py-2 px-4 ml-4 text-gray-700 hover:bg-gray-50">
396
+ <span>Matemáticas</span>
397
+ </a>
398
+ </div>
399
+ </nav>
400
+ </div>
401
+
402
+ <!-- Main Content -->
403
+ <div class="w-full sm:ml-60 flex-1 p-4 md:p-6 transition-all duration-300" id="main-content">
404
+ <div class="bg-white rounded-lg shadow p-4 md:p-6 max-w-4xl mx-auto">
405
+ <!-- Header -->
406
+ <div class="flex items-center justify-between mb-4">
407
+ <h1 class="text-xl font-bold text-blue-500">PRÓXIMOS EVENTOS</h1>
408
+ <div class="flex space-x-2" id="filter-controls">
409
+ <button class="filter-button py-2 px-4 rounded-full font-medium text-sm"
410
+ data-filter="todos" data-active="true">
411
+ Todos
412
+ </button>
413
+ <div class="relative dropdown" id="eventTypeDropdown">
414
+ <button class="filter-type-button py-2 px-4 bg-white border border-gray-300 rounded-full text-gray-700 flex items-center text-sm"
415
+ data-type="any">
416
+ <span>Tipo de evento</span>
417
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
418
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
419
+ </svg>
420
+ </button>
421
+ <div class="dropdown-content">
422
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100" data-type="clase">Clase</a>
423
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100" data-type="examen">Examen</a>
424
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100" data-type="privado">Privado</a>
425
+ </div>
426
+ </div>
427
+ <div class="relative dropdown" id="locationDropdown">
428
+ <button class="filter-location-button py-2 px-4 bg-white border border-gray-300 rounded-full text-gray-700 flex items-center text-sm"
429
+ data-location="any">
430
+ <span>Local</span>
431
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
432
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
433
+ </svg>
434
+ </button>
435
+ <div class="dropdown-content">
436
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100" data-location="aguilera">Aguilera</a>
437
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100" data-location="chaminade">Chaminade</a>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ </div>
442
+
443
+ <!-- Week Navigation -->
444
+ <div class="flex items-center justify-between mb-6">
445
+ <button class="p-2 bg-gray-100 rounded-md focus:outline-none" id="prev-week">
446
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
447
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
448
+ </svg>
449
+ </button>
450
+ <span class="text-gray-700 font-medium" id="week-range">Semana 3 - 9 de Febrero</span>
451
+ <button class="p-2 bg-gray-100 rounded-md focus:outline-none" id="next-week">
452
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
453
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
454
+ </svg>
455
+ </button>
456
+ </div>
457
+
458
+ <!-- Day Selector -->
459
+ <div class="grid grid-cols-8 gap-2 mb-6" id="day-selector">
460
+ <button class="day-button py-2 px-4 bg-blue-500 text-white rounded focus:outline-none text-sm" data-day="all">
461
+ Todos
462
+ </button>
463
+ <button class="day-button py-2 flex flex-col items-center justify-center border border-gray-200 rounded focus:outline-none text-gray-500 text-sm" data-day="03">
464
+ <span>03</span>
465
+ <span class="text-xs">Lun</span>
466
+ </button>
467
+ <button class="day-button py-2 flex flex-col items-center justify-center border border-gray-200 rounded focus:outline-none text-gray-500 text-sm" data-day="04">
468
+ <span>04</span>
469
+ <span class="text-xs">Mar</span>
470
+ </button>
471
+ <button class="day-button py-2 flex flex-col items-center justify-center border border-gray-200 rounded focus:outline-none text-gray-500 text-sm" data-day="05">
472
+ <span>05</span>
473
+ <span class="text-xs">Mie</span>
474
+ </button>
475
+ <button class="day-button py-2 flex flex-col items-center justify-center border border-gray-200 rounded focus:outline-none text-gray-500 text-sm" data-day="06">
476
+ <span>06</span>
477
+ <span class="text-xs">Jue</span>
478
+ </button>
479
+ <button class="day-button py-2 flex flex-col items-center justify-center border border-gray-200 rounded focus:outline-none text-gray-500 text-sm" data-day="07">
480
+ <span>07</span>
481
+ <span class="text-xs">Vie</span>
482
+ </button>
483
+ <button class="day-button py-2 flex flex-col items-center justify-center border border-gray-200 rounded focus:outline-none text-gray-500 text-sm" data-day="08">
484
+ <span>08</span>
485
+ <span class="text-xs">Sab</span>
486
+ </button>
487
+ <button class="day-button py-2 flex flex-col items-center justify-center border border-gray-200 rounded focus:outline-none text-gray-500 text-sm" data-day="09">
488
+ <span>09</span>
489
+ <span class="text-xs">Dom</span>
490
+ </button>
491
+ </div>
492
+
493
+ <!-- Collapsible Section -->
494
+ <div class="flex justify-center mb-6">
495
+ <button class="text-blue-500 text-sm flex items-center focus:outline-none" id="loadPreviousButton">
496
+ Cargar eventos anteriores
497
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1 transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
498
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
499
+ </svg>
500
+ </button>
501
+ </div>
502
+
503
+ <!-- Previous Events (Hidden by default) -->
504
+ <div class="previous-events mb-8" id="previous-events">
505
+ <div class="bg-gray-50 p-4 rounded-lg">
506
+ <h3 class="font-medium text-gray-700 mb-2">Eventos anteriores</h3>
507
+ <ul class="text-sm text-gray-600">
508
+ <li class="py-1">• Revisión de proyectos - 31 Enero (15:00-17:00)</li>
509
+ <li class="py-1">• Examen de historia - 01 Febrero (10:00-12:00)</li>
510
+ <li class="py-1">• ICADE - Presentación curso - 01 Febrero (13:00-14:30)</li>
511
+ </ul>
512
+ </div>
513
+ </div>
514
+
515
+ <!-- Event Timeline -->
516
+ <div class="relative pl-4" id="events-container">
517
+ <!-- Events will be rendered here dynamically -->
518
+ </div>
519
+ </div>
520
+ </div>
521
+ </div>
522
+
523
+ <!-- Floating Action Button -->
524
+ <div class="fixed bottom-6 right-6 z-30">
525
+ <button class="w-12 h-12 bg-blue-500 rounded-full text-white shadow-lg flex items-center justify-center focus:outline-none hover:bg-blue-600 transition-colors" id="add-event-button">
526
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
527
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
528
+ </svg>
529
+ </button>
530
+ </div>
531
+
532
+ <!-- Bottom Menu (Hidden by default) -->
533
+ <div class="bottom-menu w-full" id="bottom-menu">
534
+ <div class="p-4 border-b border-gray-200">
535
+ <div class="font-medium text-lg text-center" id="bottom-menu-title">1° Clase - ICADE - Contabilidad financiera | 11:00 - 13:00</div>
536
+ </div>
537
+ <div class="p-4">
538
+ <button class="flex items-center w-full py-3 px-4 hover:bg-gray-100 rounded" id="edit-event-button">
539
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
540
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
541
+ </svg>
542
+ <span>Editar</span>
543
+ </button>
544
+ <button class="flex items-center w-full py-3 px-4 hover:bg-gray-100 rounded">
545
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
546
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
547
+ </svg>
548
+ <span>Documentos</span>
549
+ </button>
550
+ <button class="flex items-center w-full py-3 px-4 hover:bg-gray-100 rounded">
551
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
552
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
553
+ </svg>
554
+ <span>Pasar lista</span>
555
+ </button>
556
+ </div>
557
+ </div>
558
+
559
+ <!-- Edit Event Modal (Hidden by default) -->
560
+ <div class="modal-backdrop" id="edit-modal">
561
+ <div class="modal-content">
562
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center">
563
+ <h2 class="font-medium text-lg" id="edit-modal-title">Editar</h2>
564
+ <button class="text-gray-500 hover:text-gray-700" id="close-edit-modal">
565
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
566
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
567
+ </svg>
568
+ </button>
569
+ </div>
570
+ <div class="p-4">
571
+ <div class="mb-6" id="edit-event-info">
572
+ <h3 class="font-medium text-gray-800 mb-2">1° Clase - ICADE - Contabilidad financiera</h3>
573
+ <div class="bg-blue-50 p-4 rounded-lg border border-blue-100 flex items-start">
574
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500 mr-2 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
575
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
576
+ </svg>
577
+ <span class="text-blue-700 text-sm">Los cambios solicitados estarán sujetos a la aprobación por parte de la Academia.</span>
578
+ </div>
579
+ </div>
580
+
581
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
582
+ <div class="bg-gray-50 p-4 rounded-lg">
583
+ <h3 class="font-medium text-gray-700 mb-4">INFO</h3>
584
+
585
+ <div class="mb-4">
586
+ <label class="block text-gray-700 mb-2">Fecha <span class="text-red-500">*</span></label>
587
+ <div class="relative">
588
+ <div class="border border-gray-300 rounded-lg p-2 flex items-center cursor-pointer" id="date-selector">
589
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
590
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
591
+ </svg>
592
+ <span class="text-gray-700" id="selected-date">03/02/2025</span>
593
+ </div>
594
+ <div class="calendar-picker" id="calendar-picker">
595
+ <div class="p-2 bg-gray-100 flex items-center justify-between">
596
+ <button class="p-1 hover:bg-gray-200 rounded">
597
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
598
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
599
+ </svg>
600
+ </button>
601
+ <span class="font-medium">February 2025</span>
602
+ <button class="p-1 hover:bg-gray-200 rounded">
603
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
604
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
605
+ </svg>
606
+ </button>
607
+ </div>
608
+ <div class="p-2">
609
+ <div class="grid grid-cols-7 gap-1 mb-1">
610
+ <div class="text-center text-xs text-gray-500">Su</div>
611
+ <div class="text-center text-xs text-gray-500">Mo</div>
612
+ <div class="text-center text-xs text-gray-500">Tu</div>
613
+ <div class="text-center text-xs text-gray-500">We</div>
614
+ <div class="text-center text-xs text-gray-500">Th</div>
615
+ <div class="text-center text-xs text-gray-500">Fr</div>
616
+ <div class="text-center text-xs text-gray-500">Sa</div>
617
+ </div>
618
+ <div class="calendar-grid">
619
+ <!-- Calendar days will be generated by JS -->
620
+ <div class="calendar-day other-month">26</div>
621
+ <div class="calendar-day other-month">27</div>
622
+ <div class="calendar-day other-month">28</div>
623
+ <div class="calendar-day other-month">29</div>
624
+ <div class="calendar-day other-month">30</div>
625
+ <div class="calendar-day other-month">31</div>
626
+ <div class="calendar-day">1</div>
627
+
628
+ <div class="calendar-day">2</div>
629
+ <div class="calendar-day active">3</div>
630
+ <div class="calendar-day">4</div>
631
+ <div class="calendar-day">5</div>
632
+ <div class="calendar-day">6</div>
633
+ <div class="calendar-day">7</div>
634
+ <div class="calendar-day">8</div>
635
+
636
+ <div class="calendar-day">9</div>
637
+ <div class="calendar-day">10</div>
638
+ <div class="calendar-day">11</div>
639
+ <div class="calendar-day">12</div>
640
+ <div class="calendar-day">13</div>
641
+ <div class="calendar-day">14</div>
642
+ <div class="calendar-day">15</div>
643
+
644
+ <div class="calendar-day">16</div>
645
+ <div class="calendar-day">17</div>
646
+ <div class="calendar-day">18</div>
647
+ <div class="calendar-day">19</div>
648
+ <div class="calendar-day">20</div>
649
+ <div class="calendar-day">21</div>
650
+ <div class="calendar-day">22</div>
651
+
652
+ <div class="calendar-day">23</div>
653
+ <div class="calendar-day">24</div>
654
+ <div class="calendar-day">25</div>
655
+ <div class="calendar-day">26</div>
656
+ <div class="calendar-day">27</div>
657
+ <div class="calendar-day">28</div>
658
+ <div class="calendar-day other-month">1</div>
659
+
660
+ <div class="calendar-day other-month">2</div>
661
+ <div class="calendar-day other-month">3</div>
662
+ <div class="calendar-day other-month">4</div>
663
+ <div class="calendar-day other-month">5</div>
664
+ <div class="calendar-day other-month">6</div>
665
+ <div class="calendar-day other-month">7</div>
666
+ <div class="calendar-day other-month">8</div>
667
+ </div>
668
+ </div>
669
+ </div>
670
+ </div>
671
+ </div>
672
+
673
+ <div class="mb-4">
674
+ <label class="block text-gray-700 mb-2">Hora <span class="text-red-500">*</span></label>
675
+ <div class="relative">
676
+ <div class="border border-gray-300 rounded-lg p-2 flex items-center cursor-pointer" id="time-selector">
677
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
678
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
679
+ </svg>
680
+ <span class="text-gray-700" id="selected-time">14:00</span>
681
+ </div>
682
+ <div class="time-picker" id="time-picker">
683
+ <div class="time-option">08:00</div>
684
+ <div class="time-option">09:00</div>
685
+ <div class="time-option">10:00</div>
686
+ <div class="time-option">11:00</div>
687
+ <div class="time-option">12:00</div>
688
+ <div class="time-option">13:00</div>
689
+ <div class="time-option">14:00</div>
690
+ <div class="time-option">15:00</div>
691
+ <div class="time-option">16:00</div>
692
+ <div class="time-option">17:00</div>
693
+ <div class="time-option">18:00</div>
694
+ <div class="time-option">19:00</div>
695
+ <div class="time-option">20:00</div>
696
+ </div>
697
+ </div>
698
+ </div>
699
+
700
+ <div class="mb-4">
701
+ <label class="block text-gray-700 mb-2">Duración estimada <span class="text-red-500">*</span></label>
702
+ <div class="relative">
703
+ <select class="appearance-none border border-gray-300 rounded-lg p-2 w-full pr-8 focus:outline-none focus:ring-2 focus:ring-blue-500">
704
+ <option>2h</option>
705
+ <option>1h</option>
706
+ <option>1h 30m</option>
707
+ <option>2h 30m</option>
708
+ <option>3h</option>
709
+ </select>
710
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
711
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
712
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
713
+ </svg>
714
+ </div>
715
+ </div>
716
+ </div>
717
+
718
+ <div class="mb-4">
719
+ <label class="block text-gray-700 mb-2">Modalidad <span class="text-red-500">*</span></label>
720
+ <div class="relative">
721
+ <select class="appearance-none border border-gray-300 rounded-lg p-2 w-full pr-8 focus:outline-none focus:ring-2 focus:ring-blue-500">
722
+ <option>Presencial - Chaminade</option>
723
+ <option>Presencial - Aguilera</option>
724
+ <option>Virtual</option>
725
+ </select>
726
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
727
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
728
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
729
+ </svg>
730
+ </div>
731
+ </div>
732
+ </div>
733
+ </div>
734
+
735
+ <div class="bg-gray-50 p-4 rounded-lg">
736
+ <h3 class="font-medium text-gray-700 mb-4">OPCIONES</h3>
737
+
738
+ <!-- Empty for now, as per the reference images -->
739
+ </div>
740
+ </div>
741
+
742
+ <div class="mt-6 flex items-center">
743
+ <label class="inline-flex items-center cursor-pointer">
744
+ <span class="switch">
745
+ <input type="checkbox" id="cancel-request">
746
+ <span class="slider"></span>
747
+ </span>
748
+ <span class="ml-3 text-gray-700">¿Solicitar la cancelación de la clase?</span>
749
+ </label>
750
+ </div>
751
+ </div>
752
+ <div class="p-4 border-t border-gray-200 flex justify-end space-x-3">
753
+ <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition" id="cancel-edit-button">
754
+ Cancelar
755
+ </button>
756
+ <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition" id="save-edit-button">
757
+ Guardar
758
+ </button>
759
+ </div>
760
+ </div>
761
+ </div>
762
+
763
+ <script>
764
+ // Event template factory for more efficient token usage
765
+ const createEvent = (config) => {
766
+ const baseEvent = {
767
+ id: config.id || Math.floor(Math.random() * 10000),
768
+ date: config.date || "",
769
+ day: config.day || "",
770
+ type: config.type || "clase",
771
+ location: config.location || "chaminade",
772
+ title: config.title || "",
773
+ classNumber: config.classNumber || "1",
774
+ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
775
+ startTime: config.startTime || "11:00",
776
+ endTime: config.endTime || "13:00",
777
+ classroom: config.classroom || "01",
778
+ students: config.students || 25,
779
+ status: config.status || null,
780
+ longDescription: config.longDescription || null
781
+ };
782
+ return baseEvent;
783
+ };
784
+
785
+ // Event data using templates for efficiency
786
+ let eventData = [
787
+ // Monday - LUNES, 03 FEB
788
+ createEvent({
789
+ id: 1,
790
+ date: "LUNES, 03 FEB",
791
+ day: "03",
792
+ title: "ICADE - Contabilidad financiera",
793
+ startTime: "11:00",
794
+ endTime: "13:00"
795
+ }),
796
+ createEvent({
797
+ id: 2,
798
+ date: "LUNES, 03 FEB",
799
+ day: "03",
800
+ title: "ICADE - Matemáticas 2A",
801
+ status: "pendiente"
802
+ }),
803
+ createEvent({
804
+ id: 3,
805
+ date: "LUNES, 03 FEB",
806
+ day: "03",
807
+ type: "examen",
808
+ location: null,
809
+ title: "Examen de contabilidad",
810
+ classNumber: null,
811
+ startTime: "12:00",
812
+ endTime: "13:00",
813
+ classroom: null,
814
+ students: null,
815
+ longDescription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit."
816
+ }),
817
+ createEvent({
818
+ id: 4,
819
+ date: "LUNES, 03 FEB",
820
+ day: "03",
821
+ title: "ICADE - Contabilidad financiera",
822
+ classNumber: "1",
823
+ startTime: "14:00",
824
+ endTime: "16:00"
825
+ }),
826
+
827
+ // Private Events - LUNES, 03 FEB
828
+ createEvent({
829
+ id: 5,
830
+ date: "LUNES, 03 FEB",
831
+ day: "03",
832
+ type: "privado",
833
+ location: null,
834
+ title: "Cita médica - Revisión exámenes",
835
+ classNumber: null,
836
+ startTime: "08:00",
837
+ endTime: "09:00"
838
+ }),
839
+ createEvent({
840
+ id: 6,
841
+ date: "LUNES, 03 FEB",
842
+ day: "03",
843
+ type: "privado",
844
+ location: null,
845
+ title: "Reclamar pasaporte",
846
+ classNumber: null,
847
+ startTime: "10:00",
848
+ endTime: "11:00"
849
+ }),
850
+ createEvent({
851
+ id: 7,
852
+ date: "LUNES, 03 FEB",
853
+ day: "03",
854
+ type: "privado",
855
+ location: null,
856
+ title: "Comprar medicamentos",
857
+ classNumber: null,
858
+ startTime: "16:00",
859
+ endTime: "17:00"
860
+ }),
861
+ createEvent({
862
+ id: 8,
863
+ date: "LUNES, 03 FEB",
864
+ day: "03",
865
+ type: "privado",
866
+ location: null,
867
+ title: "Gestionar documentos para la inscripción de la universidad",
868
+ classNumber: null,
869
+ startTime: "18:00",
870
+ endTime: "19:00"
871
+ }),
872
+
873
+ // Thursday - JUEVES, 06 FEB
874
+ createEvent({
875
+ id: 9,
876
+ date: "JUEVES, 06 FEB",
877
+ day: "06",
878
+ title: "ICADE - Contabilidad financiera",
879
+ startTime: "14:00",
880
+ endTime: "15:00"
881
+ }),
882
+
883
+ // Tuesday - MARTES, 04 FEB
884
+ createEvent({
885
+ id: 10,
886
+ date: "MARTES, 04 FEB",
887
+ day: "04",
888
+ title: "ICADE - Matemáticas 2A",
889
+ classNumber: "2",
890
+ startTime: "11:00",
891
+ endTime: "13:00"
892
+ }),
893
+ createEvent({
894
+ id: 11,
895
+ date: "MARTES, 04 FEB",
896
+ day: "04",
897
+ title: "ICADE - Matemáticas 2A",
898
+ classNumber: "2",
899
+ startTime: "11:00",
900
+ endTime: "13:00"
901
+ }),
902
+
903
+ // VIERNES, 07 FEB
904
+ createEvent({
905
+ id: 12,
906
+ date: "VIERNES, 07 FEB",
907
+ day: "07",
908
+ type: "privado",
909
+ location: null,
910
+ title: "Preparar examen contabilidad financiera",
911
+ classNumber: null,
912
+ startTime: "10:00",
913
+ endTime: "12:00"
914
+ }),
915
+ createEvent({
916
+ id: 13,
917
+ date: "VIERNES, 07 FEB",
918
+ day: "07",
919
+ type: "privado",
920
+ location: null,
921
+ title: "Preparar segunda clase matemáticas",
922
+ classNumber: null,
923
+ startTime: "14:00",
924
+ endTime: "16:00"
925
+ }),
926
+
927
+ // VIERNES, 28 FEB (later week)
928
+ createEvent({
929
+ id: 14,
930
+ date: "VIERNES, 28 FEB",
931
+ day: "28",
932
+ title: "ICADE - Contabilidad financiera",
933
+ startTime: "11:00",
934
+ endTime: "13:00"
935
+ }),
936
+ createEvent({
937
+ id: 15,
938
+ date: "VIERNES, 28 FEB",
939
+ day: "28",
940
+ title: "ICADE - Matemáticas 2A",
941
+ startTime: "10:00",
942
+ endTime: "12:00",
943
+ students: 42
944
+ }),
945
+ createEvent({
946
+ id: 16,
947
+ date: "VIERNES, 28 FEB",
948
+ day: "28",
949
+ type: "examen",
950
+ location: null,
951
+ title: "Examen de historia",
952
+ classNumber: null,
953
+ startTime: "12:00",
954
+ endTime: "13:00",
955
+ classroom: null,
956
+ students: null,
957
+ longDescription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, ipsum dolor"
958
+ }),
959
+
960
+ // SÁBADO, 01 MARZO (later week)
961
+ createEvent({
962
+ id: 17,
963
+ date: "SÁBADO, 01 MARZO",
964
+ day: "01",
965
+ title: "ICADE - Contabilidad financiera",
966
+ classNumber: "2",
967
+ startTime: "14:00",
968
+ endTime: "16:00"
969
+ }),
970
+ createEvent({
971
+ id: 18,
972
+ date: "SÁBADO, 01 MARZO",
973
+ day: "01",
974
+ location: "aguilera",
975
+ title: "ICADE - Contabilidad financiera",
976
+ classNumber: "2",
977
+ startTime: "18:00",
978
+ endTime: "20:00",
979
+ longDescription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, dolor sit amet, consectetur adipiscing elit, lorem ipsum dolor sit amet, consectetur adipiscing elit"
980
+ })
981
+ ];
982
+
983
+ // Store of available weeks for navigation
984
+ const weekRanges = [
985
+ "Semana 3 - 9 de Febrero",
986
+ "Semana 10 - 16 de Febrero",
987
+ "Semana 17 - 23 de Febrero",
988
+ "Semana 24 de Febrero - 9 de Marzo"
989
+ ];
990
+ let currentWeekIndex = 0;
991
+
992
+ // Filter state
993
+ let filters = {
994
+ type: null, // null = show all types
995
+ location: null, // null = show all locations
996
+ day: null // null = show all days
997
+ };
998
+
999
+ // Store selected event for editing
1000
+ let selectedEvent = null;
1001
+
1002
+ // UI State
1003
+ let calendarPickerVisible = false;
1004
+ let timePickerVisible = false;
1005
+
1006
+ // Initialize the application
1007
+ document.addEventListener('DOMContentLoaded', function() {
1008
+ // Initialize UI components
1009
+ initializeDropdowns();
1010
+ initializeFilterButtons();
1011
+ initializeDaySelector();
1012
+ initializeLoadPreviousButton();
1013
+ initializeWeekNavigation();
1014
+ initializeEventListeners();
1015
+ initializeBottomMenu();
1016
+ initializeEditModal();
1017
+
1018
+ // Render events
1019
+ renderEventsForCurrentWeek();
1020
+ });
1021
+
1022
+ // Initialize dropdown functionality
1023
+ function initializeDropdowns() {
1024
+ const dropdowns = document.querySelectorAll('.dropdown');
1025
+
1026
+ dropdowns.forEach(dropdown => {
1027
+ const button = dropdown.querySelector('button');
1028
+ const content = dropdown.querySelector('.dropdown-content');
1029
+
1030
+ button.addEventListener('click', function(e) {
1031
+ e.stopPropagation();
1032
+ closeAllDropdowns();
1033
+ dropdown.classList.add('dropdown-open');
1034
+ });
1035
+
1036
+ // Handle dropdown item clicks
1037
+ if (content) {
1038
+ const items = content.querySelectorAll('a');
1039
+ items.forEach(item => {
1040
+ item.addEventListener('click', function(e) {
1041
+ e.preventDefault();
1042
+ e.stopPropagation();
1043
+
1044
+ const type = this.getAttribute('data-type');
1045
+ const location = this.getAttribute('data-location');
1046
+
1047
+ // Reset "Todos" button state
1048
+ document.querySelector('.filter-button').classList.remove('bg-blue-500', 'text-white');
1049
+ document.querySelector('.filter-button').classList.add('bg-white', 'border', 'border-gray-300', 'text-gray-700');
1050
+
1051
+ if (type) {
1052
+ updateTypeFilter(type);
1053
+ }
1054
+
1055
+ if (location) {
1056
+ updateLocationFilter(location);
1057
+ }
1058
+
1059
+ dropdown.classList.remove('dropdown-open');
1060
+ });
1061
+ });
1062
+ }
1063
+ });
1064
+
1065
+ // Close dropdowns when clicking elsewhere
1066
+ document.addEventListener('click', function() {
1067
+ closeAllDropdowns();
1068
+ });
1069
+ }
1070
+
1071
+ // Close all dropdown menus
1072
+ function closeAllDropdowns() {
1073
+ document.querySelectorAll('.dropdown').forEach(d => {
1074
+ d.classList.remove('dropdown-open');
1075
+ });
1076
+ }
1077
+
1078
+ // Initialize filter buttons
1079
+ function initializeFilterButtons() {
1080
+ document.querySelector('.filter-button').addEventListener('click', function() {
1081
+ // Reset all filters
1082
+ resetAllFilters();
1083
+ updateFilterButtons();
1084
+ updateTypeButtonUI('any');
1085
+ updateLocationButtonUI('any');
1086
+ renderEventsForCurrentWeek();
1087
+ });
1088
+ }
1089
+
1090
+ // Reset all filters except day
1091
+ function resetAllFilters() {
1092
+ filters.type = null;
1093
+ filters.location = null;
1094
+ }
1095
+
1096
+ // Initialize day selector
1097
+ function initializeDaySelector() {
1098
+ const dayButtons = document.querySelectorAll('.day-button');
1099
+
1100
+ dayButtons.forEach(button => {
1101
+ button.addEventListener('click', function() {
1102
+ const day = this.getAttribute('data-day');
1103
+
1104
+ if (day === 'all') {
1105
+ filters.day = null;
1106
+ } else {
1107
+ filters.day = day;
1108
+ }
1109
+
1110
+ updateDayButtons();
1111
+ renderEventsForCurrentWeek();
1112
+ });
1113
+ });
1114
+ }
1115
+
1116
+ // Initialize "Load Previous" button
1117
+ function initializeLoadPreviousButton() {
1118
+ const button = document.getElementById('loadPreviousButton');
1119
+ const previousEvents = document.getElementById('previous-events');
1120
+ const arrowIcon = button.querySelector('svg');
1121
+
1122
+ button.addEventListener('click', function() {
1123
+ previousEvents.classList.toggle('visible');
1124
+ arrowIcon.classList.toggle('rotate-180');
1125
+ });
1126
+ }
1127
+
1128
+ // Initialize week navigation
1129
+ function initializeWeekNavigation() {
1130
+ const prevWeekButton = document.getElementById('prev-week');
1131
+ const nextWeekButton = document.getElementById('next-week');
1132
+ const weekRangeText = document.getElementById('week-range');
1133
+
1134
+ weekRangeText.textContent = weekRanges[currentWeekIndex];
1135
+
1136
+ prevWeekButton.addEventListener('click', function() {
1137
+ if (currentWeekIndex > 0) {
1138
+ currentWeekIndex--;
1139
+ weekRangeText.textContent = weekRanges[currentWeekIndex];
1140
+ renderEventsForCurrentWeek();
1141
+ }
1142
+ });
1143
+
1144
+ nextWeekButton.addEventListener('click', function() {
1145
+ if (currentWeekIndex < weekRanges.length - 1) {
1146
+ currentWeekIndex++;
1147
+ weekRangeText.textContent = weekRanges[currentWeekIndex];
1148
+ renderEventsForCurrentWeek();
1149
+ }
1150
+ });
1151
+ }
1152
+
1153
+ // Initialize event listeners
1154
+ function initializeEventListeners() {
1155
+ // Responsive sidebar toggle
1156
+ const sidebarToggle = document.getElementById('sidebar-toggle');
1157
+ const sidebar = document.getElementById('sidebar');
1158
+ const mainContainer = document.getElementById('main-container');
1159
+
1160
+ sidebarToggle.addEventListener('click', function() {
1161
+ if (window.innerWidth < 640) {
1162
+ sidebar.classList.toggle('-translate-x-full');
1163
+ mainContainer.classList.toggle('sidebar-visible');
1164
+ }
1165
+ });
1166
+
1167
+ // Hide sidebar when clicking outside on mobile
1168
+ document.addEventListener('click', function(e) {
1169
+ if (window.innerWidth < 640 && !sidebar.contains(e.target) && e.target !== sidebarToggle) {
1170
+ sidebar.classList.add('-translate-x-full');
1171
+ mainContainer.classList.remove('sidebar-visible');
1172
+ }
1173
+ });
1174
+
1175
+ // Handle window resize
1176
+ window.addEventListener('resize', function() {
1177
+ if (window.innerWidth >= 640) {
1178
+ sidebar.classList.remove('-translate-x-full');
1179
+ }
1180
+ });
1181
+
1182
+ // Cancel request toggle styling
1183
+ const cancelRequest = document.getElementById('cancel-request');
1184
+ cancelRequest.addEventListener('change', function() {
1185
+ // Toggle styling is now handled by the CSS
1186
+ });
1187
+ }
1188
+
1189
+ // Initialize bottom menu
1190
+ function initializeBottomMenu() {
1191
+ const addEventButton = document.getElementById('add-event-button');
1192
+ const bottomMenu = document.getElementById('bottom-menu');
1193
+ const editEventButton = document.getElementById('edit-event-button');
1194
+
1195
+ // Open bottom menu when clicking on an event or the floating action button
1196
+ addEventButton.addEventListener('click', function() {
1197
+ // Use first event as default for demonstration
1198
+ const firstEvent = eventData[0];
1199
+ showBottomMenu(firstEvent);
1200
+ });
1201
+
1202
+ // Close bottom menu when clicking outside
1203
+ document.addEventListener('click', function(e) {
1204
+ if (bottomMenu.classList.contains('visible') &&
1205
+ !bottomMenu.contains(e.target) &&
1206
+ e.target !== addEventButton &&
1207
+ !e.target.closest('.event-card')) {
1208
+ bottomMenu.classList.remove('visible');
1209
+ }
1210
+ });
1211
+
1212
+ // Open edit modal when clicking edit button
1213
+ editEventButton.addEventListener('click', function() {
1214
+ bottomMenu.classList.remove('visible');
1215
+ openEditModal(selectedEvent);
1216
+ });
1217
+ }
1218
+
1219
+ // Show bottom menu for a specific event
1220
+ function showBottomMenu(event) {
1221
+ const bottomMenu = document.getElementById('bottom-menu');
1222
+ const bottomMenuTitle = document.getElementById('bottom-menu-title');
1223
+
1224
+ // Store selected event
1225
+ selectedEvent = event;
1226
+
1227
+ // Update menu title
1228
+ if (event.type === 'clase') {
1229
+ bottomMenuTitle.textContent = `${event.classNumber}° Clase - ${event.title} | ${event.startTime} - ${event.endTime}`;
1230
+ } else {
1231
+ bottomMenuTitle.textContent = `${event.title} | ${event.startTime} - ${event.endTime}`;
1232
+ }
1233
+
1234
+ // Show menu
1235
+ bottomMenu.classList.add('visible');
1236
+ }
1237
+
1238
+ // Show notification
1239
+ function showNotification(message, type = 'success') {
1240
+ const notification = document.getElementById('notification');
1241
+ const notificationMessage = document.getElementById('notification-message');
1242
+
1243
+ // Set message
1244
+ notificationMessage.textContent = message;
1245
+
1246
+ // Add appropriate class
1247
+ notification.className = 'notification';
1248
+ if (type === 'success') {
1249
+ notification.classList.add('notification-success');
1250
+ }
1251
+
1252
+ // Show notification
1253
+ notification.classList.add('show');
1254
+
1255
+ // Hide after 5 seconds
1256
+ setTimeout(hideNotification, 5000);
1257
+ }
1258
+
1259
+ // Hide notification
1260
+ function hideNotification() {
1261
+ const notification = document.getElementById('notification');
1262
+ notification.classList.remove('show');
1263
+ }
1264
+
1265
+ // Initialize edit modal
1266
+ function initializeEditModal() {
1267
+ const editModal = document.getElementById('edit-modal');
1268
+ const closeEditModalBtn = document.getElementById('close-edit-modal');
1269
+ const cancelEditBtn = document.getElementById('cancel-edit-button');
1270
+ const saveEditBtn = document.getElementById('save-edit-button');
1271
+ const dateSelector = document.getElementById('date-selector');
1272
+ const calendarPicker = document.getElementById('calendar-picker');
1273
+ const timeSelector = document.getElementById('time-selector');
1274
+ const timePicker = document.getElementById('time-picker');
1275
+
1276
+ // Close modal when clicking close button or cancel button
1277
+ closeEditModalBtn.addEventListener('click', closeEditModal);
1278
+ cancelEditBtn.addEventListener('click', closeEditModal);
1279
+
1280
+ // Handle save button click
1281
+ saveEditBtn.addEventListener('click', function() {
1282
+ // Check if cancellation was requested
1283
+ const cancelRequest = document.getElementById('cancel-request');
1284
+ if (cancelRequest.checked) {
1285
+ showNotification('La solicitud de cancelación ha sido enviada de manera exitosa a la Academia.');
1286
+ } else {
1287
+ showNotification('La solicitud de cambio ha sido enviada de manera exitosa a la Academia.');
1288
+ }
1289
+
1290
+ // Update event status to "pending approval" for demo purposes
1291
+ if (selectedEvent) {
1292
+ selectedEvent.status = 'pendiente';
1293
+ renderEventsForCurrentWeek();
1294
+ }
1295
+
1296
+ // Close modal
1297
+ closeEditModal();
1298
+ });
1299
+
1300
+ // Toggle calendar picker when clicking date selector
1301
+ dateSelector.addEventListener('click', function(e) {
1302
+ e.stopPropagation();
1303
+ if (timePickerVisible) {
1304
+ timePicker.classList.remove('visible');
1305
+ timePickerVisible = false;
1306
+ }
1307
+ calendarPicker.classList.toggle('visible');
1308
+ calendarPickerVisible = !calendarPickerVisible;
1309
+ });
1310
+
1311
+ // Toggle time picker when clicking time selector
1312
+ timeSelector.addEventListener('click', function(e) {
1313
+ e.stopPropagation();
1314
+ if (calendarPickerVisible) {
1315
+ calendarPicker.classList.remove('visible');
1316
+ calendarPickerVisible = false;
1317
+ }
1318
+ timePicker.classList.toggle('visible');
1319
+ timePickerVisible = !timePickerVisible;
1320
+ });
1321
+
1322
+ // Handle calendar day selection
1323
+ const calendarDays = document.querySelectorAll('.calendar-day');
1324
+ calendarDays.forEach(day => {
1325
+ day.addEventListener('click', function() {
1326
+ // Remove active class from all days
1327
+ calendarDays.forEach(d => d.classList.remove('active'));
1328
+
1329
+ // Add active class to selected day
1330
+ this.classList.add('active');
1331
+
1332
+ // Update selected date (mock implementation)
1333
+ const selectedDate = document.getElementById('selected-date');
1334
+ const day = this.textContent.padStart(2, '0');
1335
+ selectedDate.textContent = `${day}/02/2025`;
1336
+
1337
+ // Hide calendar picker
1338
+ calendarPicker.classList.remove('visible');
1339
+ calendarPickerVisible = false;
1340
+ });
1341
+ });
1342
+
1343
+ // Handle time selection
1344
+ const timeOptions = document.querySelectorAll('.time-option');
1345
+ timeOptions.forEach(option => {
1346
+ option.addEventListener('click', function() {
1347
+ // Update selected time
1348
+ const selectedTime = document.getElementById('selected-time');
1349
+ selectedTime.textContent = this.textContent;
1350
+
1351
+ // Hide time picker
1352
+ timePicker.classList.remove('visible');
1353
+ timePickerVisible = false;
1354
+ });
1355
+ });
1356
+
1357
+ // Close pickers when clicking outside
1358
+ document.addEventListener('click', function() {
1359
+ if (calendarPickerVisible) {
1360
+ calendarPicker.classList.remove('visible');
1361
+ calendarPickerVisible = false;
1362
+ }
1363
+ if (timePickerVisible) {
1364
+ timePicker.classList.remove('visible');
1365
+ timePickerVisible = false;
1366
+ }
1367
+ });
1368
+
1369
+ // Prevent closing when clicking inside pickers
1370
+ calendarPicker.addEventListener('click', function(e) {
1371
+ e.stopPropagation();
1372
+ });
1373
+ timePicker.addEventListener('click', function(e) {
1374
+ e.stopPropagation();
1375
+ });
1376
+ }
1377
+
1378
+ // Open edit modal for a specific event
1379
+ function openEditModal(event) {
1380
+ const editModal = document.getElementById('edit-modal');
1381
+ const editModalTitle = document.getElementById('edit-modal-title');
1382
+ const editEventInfo = document.getElementById('edit-event-info');
1383
+
1384
+ // Set modal title and event info
1385
+ editModalTitle.textContent = 'Editar';
1386
+
1387
+ if (event.type === 'clase') {
1388
+ editEventInfo.innerHTML = `
1389
+ <h3 class="font-medium text-gray-800 mb-2">${event.classNumber}° Clase - ${event.title}</h3>
1390
+ <div class="bg-blue-50 p-4 rounded-lg border border-blue-100 flex items-start">
1391
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500 mr-2 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1392
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
1393
+ </svg>
1394
+ <span class="text-blue-700 text-sm">Los cambios solicitados estarán sujetos a la aprobación por parte de la Academia.</span>
1395
+ </div>
1396
+ `;
1397
+ } else {
1398
+ editEventInfo.innerHTML = `
1399
+ <h3 class="font-medium text-gray-800 mb-2">${event.title}</h3>
1400
+ <div class="bg-blue-50 p-4 rounded-lg border border-blue-100 flex items-start">
1401
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500 mr-2 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1402
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
1403
+ </svg>
1404
+ <span class="text-blue-700 text-sm">Los cambios solicitados estarán sujetos a la aprobación por parte de la Academia.</span>
1405
+ </div>
1406
+ `;
1407
+ }
1408
+
1409
+ // Set form fields
1410
+ const selectedDate = document.getElementById('selected-date');
1411
+ const selectedTime = document.getElementById('selected-time');
1412
+
1413
+ selectedDate.textContent = `${event.day.padStart(2, '0')}/02/2025`;
1414
+ selectedTime.textContent = event.startTime;
1415
+
1416
+ // Reset cancel request toggle
1417
+ const cancelRequest = document.getElementById('cancel-request');
1418
+ cancelRequest.checked = false;
1419
+
1420
+ // Show modal
1421
+ editModal.classList.add('visible');
1422
+ }
1423
+
1424
+ // Close edit modal
1425
+ function closeEditModal() {
1426
+ const editModal = document.getElementById('edit-modal');
1427
+ editModal.classList.remove('visible');
1428
+ }
1429
+
1430
+ // Update type filter
1431
+ function updateTypeFilter(type) {
1432
+ if (type === 'any') {
1433
+ filters.type = null;
1434
+ } else {
1435
+ filters.type = type;
1436
+ }
1437
+
1438
+ updateTypeButtonUI(type);
1439
+ renderEventsForCurrentWeek();
1440
+ }
1441
+
1442
+ // Update location filter
1443
+ function updateLocationFilter(location) {
1444
+ if (location === 'any') {
1445
+ filters.location = null;
1446
+ } else {
1447
+ filters.location = location;
1448
+ }
1449
+
1450
+ updateLocationButtonUI(location);
1451
+ renderEventsForCurrentWeek();
1452
+ }
1453
+
1454
+ // Update type button UI
1455
+ function updateTypeButtonUI(type) {
1456
+ const typeButton = document.querySelector('.filter-type-button');
1457
+
1458
+ // Reset button to default state
1459
+ typeButton.classList.remove('bg-blue-500', 'text-white');
1460
+ typeButton.classList.add('bg-white', 'border', 'border-gray-300', 'text-gray-700');
1461
+
1462
+ // Update button text and style based on selected type
1463
+ if (type === 'clase') {
1464
+ typeButton.innerHTML = 'Clase <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>';
1465
+ typeButton.classList.remove('bg-white', 'border', 'border-gray-300', 'text-gray-700');
1466
+ typeButton.classList.add('bg-blue-500', 'text-white');
1467
+ } else if (type === 'examen') {
1468
+ typeButton.innerHTML = 'Examen <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>';
1469
+ typeButton.classList.remove('bg-white', 'border', 'border-gray-300', 'text-gray-700');
1470
+ typeButton.classList.add('bg-blue-500', 'text-white');
1471
+ } else if (type === 'privado') {
1472
+ typeButton.innerHTML = 'Privado <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>';
1473
+ typeButton.classList.remove('bg-white', 'border', 'border-gray-300', 'text-gray-700');
1474
+ typeButton.classList.add('bg-blue-500', 'text-white');
1475
+ } else {
1476
+ typeButton.innerHTML = 'Tipo de evento <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>';
1477
+ }
1478
+ }
1479
+
1480
+ // Update location button UI
1481
+ function updateLocationButtonUI(location) {
1482
+ const locationButton = document.querySelector('.filter-location-button');
1483
+
1484
+ // Reset button to default state
1485
+ locationButton.classList.remove('bg-blue-500', 'text-white');
1486
+ locationButton.classList.add('bg-white', 'border', 'border-gray-300', 'text-gray-700');
1487
+
1488
+ // Update button text and style based on selected location
1489
+ if (location === 'chaminade') {
1490
+ locationButton.innerHTML = 'Chaminade <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>';
1491
+ locationButton.classList.remove('bg-white', 'border', 'border-gray-300', 'text-gray-700');
1492
+ locationButton.classList.add('bg-blue-500', 'text-white');
1493
+ } else if (location === 'aguilera') {
1494
+ locationButton.innerHTML = 'Aguilera <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>';
1495
+ locationButton.classList.remove('bg-white', 'border', 'border-gray-300', 'text-gray-700');
1496
+ locationButton.classList.add('bg-blue-500', 'text-white');
1497
+ } else {
1498
+ locationButton.innerHTML = 'Local <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>';
1499
+ }
1500
+ }
1501
+
1502
+ // Update filter button states
1503
+ function updateFilterButtons() {
1504
+ const allButton = document.querySelector('.filter-button');
1505
+
1506
+ if (!filters.type && !filters.location) {
1507
+ allButton.classList.remove('bg-white', 'border', 'border-gray-300', 'text-gray-700');
1508
+ allButton.classList.add('bg-blue-500', 'text-white');
1509
+ } else {
1510
+ allButton.classList.remove('bg-blue-500', 'text-white');
1511
+ allButton.classList.add('bg-white', 'border', 'border-gray-300', 'text-gray-700');
1512
+ }
1513
+ }
1514
+
1515
+ // Update day button states
1516
+ function updateDayButtons() {
1517
+ const dayButtons = document.querySelectorAll('.day-button');
1518
+
1519
+ dayButtons.forEach(button => {
1520
+ const day = button.getAttribute('data-day');
1521
+
1522
+ // Reset all buttons first
1523
+ button.classList.remove('bg-blue-500', 'text-white');
1524
+
1525
+ if (day === 'all') {
1526
+ if (!filters.day) {
1527
+ button.classList.add('bg-blue-500', 'text-white');
1528
+ button.classList.remove('bg-white', 'border', 'border-gray-200', 'text-gray-500');
1529
+ } else {
1530
+ button.classList.add('bg-white', 'border', 'border-gray-200', 'text-gray-700');
1531
+ button.classList.remove('text-white', 'bg-blue-500');
1532
+ }
1533
+ } else {
1534
+ if (day === filters.day) {
1535
+ button.classList.add('bg-blue-500', 'text-white');
1536
+ button.classList.remove('bg-white', 'border', 'border-gray-200', 'text-gray-500');
1537
+ } else {
1538
+ button.classList.add('bg-white', 'border', 'border-gray-200', 'text-gray-500');
1539
+ button.classList.remove('text-white', 'bg-blue-500');
1540
+ }
1541
+ }
1542
+ });
1543
+ }
1544
+
1545
+ // Get events for the current week
1546
+ function getEventsForCurrentWeek() {
1547
+ // In a real application, this would filter by date range
1548
+ // For demo purposes, we'll use a different subset based on the week index
1549
+ if (currentWeekIndex === 0) {
1550
+ return eventData.filter(event =>
1551
+ event.day === "03" ||
1552
+ event.day === "04" ||
1553
+ event.day === "05" ||
1554
+ event.day === "06" ||
1555
+ event.day === "07" ||
1556
+ event.day === "08" ||
1557
+ event.day === "09"
1558
+ );
1559
+ } else if (currentWeekIndex === weekRanges.length - 1) {
1560
+ return eventData.filter(event =>
1561
+ event.day === "28" ||
1562
+ event.day === "01"
1563
+ );
1564
+ } else {
1565
+ // For other weeks, return an empty array (no events)
1566
+ return [];
1567
+ }
1568
+ }
1569
+
1570
+ // Filter events based on current filters
1571
+ function filterEvents(events) {
1572
+ return events.filter(event => {
1573
+ // Filter by type
1574
+ if (filters.type && event.type !== filters.type) {
1575
+ return false;
1576
+ }
1577
+
1578
+ // Filter by location (ignore for 'privado' and 'examen' types)
1579
+ if (filters.location && event.type !== 'privado' && event.type !== 'examen') {
1580
+ if (event.location !== filters.location) {
1581
+ return false;
1582
+ }
1583
+ }
1584
+
1585
+ // Filter by day
1586
+ if (filters.day && event.day !== filters.day) {
1587
+ return false;
1588
+ }
1589
+
1590
+ return true;
1591
+ });
1592
+ }
1593
+
1594
+ // Group events by date
1595
+ function groupEventsByDate(events) {
1596
+ const grouped = {};
1597
+
1598
+ events.forEach(event => {
1599
+ if (!grouped[event.date]) {
1600
+ grouped[event.date] = [];
1601
+ }
1602
+
1603
+ grouped[event.date].push(event);
1604
+ });
1605
+
1606
+ // Sort events by start time within each date
1607
+ for (const date in grouped) {
1608
+ grouped[date].sort((a, b) => {
1609
+ return a.startTime.localeCompare(b.startTime);
1610
+ });
1611
+ }
1612
+
1613
+ return grouped;
1614
+ }
1615
+
1616
+ // Render events for the current week
1617
+ function renderEventsForCurrentWeek() {
1618
+ const eventsContainer = document.getElementById('events-container');
1619
+ eventsContainer.innerHTML = '';
1620
+
1621
+ const weekEvents = getEventsForCurrentWeek();
1622
+ const filteredEvents = filterEvents(weekEvents);
1623
+
1624
+ if (filteredEvents.length === 0) {
1625
+ // Show "no events" message
1626
+ eventsContainer.innerHTML = `
1627
+ <div class="text-center py-8 text-gray-500">
1628
+ No hay eventos que coincidan con los filtros seleccionados.
1629
+ </div>
1630
+ `;
1631
+ return;
1632
+ }
1633
+
1634
+ const groupedEvents = groupEventsByDate(filteredEvents);
1635
+
1636
+ // Get unique dates and sort them
1637
+ const dates = Object.keys(groupedEvents).sort((a, b) => {
1638
+ // Extract day number for comparison
1639
+ const dayA = a.split(', ')[1].split(' ')[0];
1640
+ const dayB = b.split(', ')[1].split(' ')[0];
1641
+ return parseInt(dayA) - parseInt(dayB);
1642
+ });
1643
+
1644
+ // Used to track which day separators have been added
1645
+ const dayButtonsAdded = {};
1646
+
1647
+ // Render each date group
1648
+ dates.forEach((date, dateIndex) => {
1649
+ const events = groupedEvents[date];
1650
+ const dateParts = date.split(', ');
1651
+ const dayName = dateParts[0];
1652
+ const dayMonth = dateParts[1];
1653
+ const day = dayMonth.split(' ')[0]; // Extract the day number
1654
+
1655
+ // Add date separator for days other than the first one
1656
+ if (dateIndex > 0 && !dayButtonsAdded[day]) {
1657
+ let buttonText = '';
1658
+
1659
+ // Format based on date
1660
+ if (day === '01') {
1661
+ buttonText = 'Sábado 01 Marzo';
1662
+ } else if (day === '04') {
1663
+ buttonText = 'Martes 04 Febrero';
1664
+ } else if (day === '07') {
1665
+ buttonText = 'Viernes 07 Febrero';
1666
+ } else {
1667
+ buttonText = getSpanishDayNameLong(dayName) + ' ' + dayMonth;
1668
+ }
1669
+
1670
+ const separator = document.createElement('div');
1671
+ separator.className = 'my-6';
1672
+ separator.innerHTML = `
1673
+ <button class="py-2 px-4 bg-blue-500 text-white rounded-full focus:outline-none text-sm">
1674
+ ${buttonText}
1675
+ </button>
1676
+ `;
1677
+ eventsContainer.appendChild(separator);
1678
+
1679
+ // Mark this day as having a separator added
1680
+ dayButtonsAdded[day] = true;
1681
+ }
1682
+
1683
+ // Create event group container
1684
+ const eventGroup = document.createElement('div');
1685
+ eventGroup.className = 'mb-6 relative';
1686
+ eventGroup.innerHTML = `
1687
+ <div class="timeline-line"></div>
1688
+ `;
1689
+
1690
+ // Render each event in the group
1691
+ events.forEach((event, index) => {
1692
+ const eventElement = createEventElement(event, index === 0);
1693
+ eventGroup.appendChild(eventElement);
1694
+ });
1695
+
1696
+ eventsContainer.appendChild(eventGroup);
1697
+ });
1698
+
1699
+ // Add event listeners to event cards
1700
+ const eventCards = document.querySelectorAll('.event-card');
1701
+ eventCards.forEach(card => {
1702
+ card.addEventListener('click', function() {
1703
+ const eventId = this.getAttribute('data-event-id');
1704
+ const event = eventData.find(e => e.id === parseInt(eventId));
1705
+ if (event) {
1706
+ showBottomMenu(event);
1707
+ }
1708
+ });
1709
+ });
1710
+ }
1711
+
1712
+ // Convert short Spanish day name to long format
1713
+ function getSpanishDayNameLong(shortName) {
1714
+ const dayMap = {
1715
+ 'LUNES': 'Lunes',
1716
+ 'MARTES': 'Martes',
1717
+ 'MIÉRCOLES': 'Miércoles',
1718
+ 'JUEVES': 'Jueves',
1719
+ 'VIERNES': 'Viernes',
1720
+ 'SÁBADO': 'Sábado',
1721
+ 'DOMINGO': 'Domingo'
1722
+ };
1723
+
1724
+ return dayMap[shortName] || shortName;
1725
+ }
1726
+
1727
+ // Create an event element
1728
+ function createEventElement(event, isFirstInGroup) {
1729
+ const eventElement = document.createElement('div');
1730
+ eventElement.setAttribute('data-event-id', event.id);
1731
+
1732
+ // Determine the appropriate location tag
1733
+ let locationTag = '';
1734
+ if (event.location === 'chaminade') {
1735
+ locationTag = `<span class="location-tag-purple mr-2">Chaminade</span>`;
1736
+ } else if (event.location === 'aguilera') {
1737
+ locationTag = `<span class="location-tag-orange mr-2">Aguilera</span>`;
1738
+ } else if (event.type === 'privado') {
1739
+ locationTag = `<span class="location-tag-blue mr-2">Privado</span>`;
1740
+ }
1741
+
1742
+ // Determine the background class based on event type
1743
+ let bgClass = '';
1744
+ if (event.type === 'examen') {
1745
+ bgClass = 'bg-blue-50';
1746
+ } else {
1747
+ bgClass = 'bg-white';
1748
+ }
1749
+
1750
+ // Add status tag if event has pending status
1751
+ let statusTag = '';
1752
+ if (event.status === 'pendiente') {
1753
+ statusTag = `<span class="status-tag">Pendiente aprobación</span>`;
1754
+ }
1755
+
1756
+ // Build the inner HTML based on event type
1757
+ let innerContent = '';
1758
+
1759
+ if (event.type === 'privado') {
1760
+ innerContent = `
1761
+ <div class="mb-2">
1762
+ <span class="text-gray-800 font-medium">${event.title}</span>
1763
+ </div>
1764
+ <div class="text-gray-600 mb-2">
1765
+ ${event.description || ''}
1766
+ </div>
1767
+ <div class="flex items-center mt-3">
1768
+ <div class="flex items-center text-gray-500 text-sm">
1769
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1770
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
1771
+ </svg>
1772
+ ${event.startTime} - ${event.endTime}
1773
+ </div>
1774
+ </div>
1775
+ `;
1776
+ } else if (event.type === 'examen') {
1777
+ innerContent = `
1778
+ <div class="mb-2">
1779
+ <span class="text-gray-800 font-medium">${event.title}</span>
1780
+ </div>
1781
+ <div class="text-gray-600 mb-2">
1782
+ ${event.longDescription || event.description || ''}
1783
+ </div>
1784
+ <div class="flex items-center mt-3">
1785
+ <div class="flex items-center text-gray-500 text-sm">
1786
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1787
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
1788
+ </svg>
1789
+ ${event.startTime} - ${event.endTime}
1790
+ </div>
1791
+ </div>
1792
+ `;
1793
+ } else {
1794
+ innerContent = `
1795
+ <div class="flex items-center mb-2">
1796
+ ${locationTag}
1797
+ <span class="text-gray-800 font-medium">${event.title}</span>
1798
+ </div>
1799
+ <div class="text-gray-600 mb-2">
1800
+ <span class="text-gray-500">${event.classNumber}° Clase</span> - ${event.longDescription || event.description || ''}
1801
+ </div>
1802
+ <div class="flex items-center justify-between mt-3">
1803
+ <div class="flex items-center text-gray-500 text-sm">
1804
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1805
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
1806
+ </svg>
1807
+ ${event.startTime} - ${event.endTime}
1808
+ </div>
1809
+ <div class="flex items-center text-gray-500 text-sm">
1810
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1811
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
1812
+ </svg>
1813
+ Aula ${event.classroom}
1814
+ </div>
1815
+ <div class="flex items-center text-gray-500 text-sm">
1816
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1817
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
1818
+ </svg>
1819
+ ${event.students} alumnos
1820
+ </div>
1821
+ </div>
1822
+ `;
1823
+ }
1824
+
1825
+ eventElement.className = 'event-card mb-4 cursor-pointer';
1826
+ eventElement.innerHTML = `
1827
+ <div class="timeline-dot ${isFirstInGroup ? '' : 'mt-4'}"></div>
1828
+ <div class="text-gray-500 text-sm mb-1">${event.date}</div>
1829
+ <div class="${bgClass} rounded-lg border-t border-l border-r border-gray-200 p-4 relative">
1830
+ ${statusTag}
1831
+ ${innerContent}
1832
+ </div>
1833
+ `;
1834
+
1835
+ return eventElement;
1836
+ }
1837
+ </script>
1838
+ </body>
1839
+ </html>