Hugging Face's logo

Spaces:
LauraMDB
/
mongodb-mastery-hub
Running

App Files Community
LauraMDB commited on
Commit
77ae598
·
verified ·
1 Parent(s): efa43a9

Manual changes saved

Browse files
Files changed (2) hide show
  1. index.html +52 -51
  2. script.js +24 -0
index.html CHANGED
@@ -43,57 +43,7 @@
43
  </a>
44
  </div>
45
  </section>
46
- <!-- Filters Section -->
47
- <section id="Filters" class="mb-8 bg-white p-6 rounded-lg shadow">
48
- <h2 class="text-xl font-semibold text-gray-800 mb-4">Filter Courses</h2>
49
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
50
- <div>
51
- <label class="block text-sm font-medium text-gray-700 mb-1">Language</label>
52
- <select class="filter-select w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500">
53
- <option value="">All Languages</option>
54
- <option value="English">English</option>
55
- <option value="French">French</option>
56
- <option value="Italian">Italian</option>
57
- <option value="Spanish">Spanish</option>
58
- <option value="Mandarin">Mandarin</option>
59
- </select>
60
- </div>
61
- <div>
62
- <label class="block text-sm font-medium text-gray-700 mb-1">Region</label>
63
- <select class="filter-select w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500">
64
- <option value="">All Regions</option>
65
- <option value="AMER">AMER</option>
66
- <option value="EMEA">EMEA</option>
67
- <option value="LATAM">LATAM</option>
68
- </select>
69
- </div>
70
- <div>
71
- <label class="block text-sm font-medium text-gray-700 mb-1">Time Zone</label>
72
- <select class="filter-select w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500">
73
- <option value="">All Time Zones</option>
74
- <option value="US">US</option>
75
- <option value="UK">UK</option>
76
- <option value="MX">MX</option>
77
- <option value="FR">FR</option>
78
- <option value="SG">SG</option>
79
- </select>
80
- </div>
81
- <div>
82
- <label class="block text-sm font-medium text-gray-700 mb-1">Course</label>
83
- <select class="filter-select w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500">
84
- <option value="">All Courses</option>
85
- <option value="MDB100">MDB100</option>
86
- <option value="MDB200">MDB200</option>
87
- <option value="MDB300">MDB300</option>
88
- <option value="DEV400">DEV400</option>
89
- <option value="DEV500">DEV500</option>
90
- <option value="DS120">DS120</option>
91
- <option value="DS110">DS110</option>
92
- <option value="DA610">DA610</option>
93
- </select>
94
- </div>
95
- </div>
96
- </section>
97
 
98
  <!-- Course Paths Section -->
99
  <section id="LP" class="mb-20">
@@ -257,6 +207,57 @@
257
  </div>
258
  </div>
259
  </section>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
260
  <!-- Calendar View Section -->
261
  <section id="Calendar" class="mb-20">
262
  <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Course Calendar</h2>
 
43
  </a>
44
  </div>
45
  </section>
46
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
47
 
48
  <!-- Course Paths Section -->
49
  <section id="LP" class="mb-20">
 
207
  </div>
208
  </div>
209
  </section>
210
+ <!-- Filters Section -->
211
+ <section id="Filters" class="mb-8 bg-white p-6 rounded-lg shadow">
212
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Filter Courses</h2>
213
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
214
+ <div>
215
+ <label class="block text-sm font-medium text-gray-700 mb-1">Language</label>
216
+ <select class="filter-select w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500">
217
+ <option value="">All Languages</option>
218
+ <option value="English">English</option>
219
+ <option value="French">French</option>
220
+ <option value="Italian">Italian</option>
221
+ <option value="Spanish">Spanish</option>
222
+ <option value="Mandarin">Mandarin</option>
223
+ </select>
224
+ </div>
225
+ <div>
226
+ <label class="block text-sm font-medium text-gray-700 mb-1">Region</label>
227
+ <select class="filter-select w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500">
228
+ <option value="">All Regions</option>
229
+ <option value="AMER">AMER</option>
230
+ <option value="EMEA">EMEA</option>
231
+ <option value="LATAM">LATAM</option>
232
+ </select>
233
+ </div>
234
+ <div>
235
+ <label class="block text-sm font-medium text-gray-700 mb-1">Time Zone</label>
236
+ <select class="filter-select w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500">
237
+ <option value="">All Time Zones</option>
238
+ <option value="US">US</option>
239
+ <option value="UK">UK</option>
240
+ <option value="MX">MX</option>
241
+ <option value="FR">FR</option>
242
+ <option value="SG">SG</option>
243
+ </select>
244
+ </div>
245
+ <div>
246
+ <label class="block text-sm font-medium text-gray-700 mb-1">Course</label>
247
+ <select class="filter-select w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500">
248
+ <option value="">All Courses</option>
249
+ <option value="MDB100">MDB100</option>
250
+ <option value="MDB200">MDB200</option>
251
+ <option value="MDB300">MDB300</option>
252
+ <option value="DEV400">DEV400</option>
253
+ <option value="DEV500">DEV500</option>
254
+ <option value="DS120">DS120</option>
255
+ <option value="DS110">DS110</option>
256
+ <option value="DA610">DA610</option>
257
+ </select>
258
+ </div>
259
+ </div>
260
+ </section>
261
  <!-- Calendar View Section -->
262
  <section id="Calendar" class="mb-20">
263
  <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Course Calendar</h2>
script.js CHANGED
@@ -313,7 +313,31 @@ const coursesData = [
313
  // Calendar functionality
314
  let currentMonth = new Date().getMonth();
315
  let currentYear = new Date().getFullYear();
 
 
 
 
 
316
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
317
  function renderCalendar() {
318
  const firstDay = new Date(currentYear, currentMonth, 1);
319
  const lastDay = new Date(currentYear, currentMonth + 1, 0);
 
313
  // Calendar functionality
314
  let currentMonth = new Date().getMonth();
315
  let currentYear = new Date().getFullYear();
316
+ const calendar = new Calendar('#calendar', {
317
+ defaultView: 'week',
318
+ template: {
319
+ time(event) {
320
+ const { start, end, title } = event;
321
 
322
+ return `<span style="color: white;">${formatTime(start)}~${formatTime(end)} ${title}</span>`;
323
+ },
324
+ allday(event) {
325
+ return `<span style="color: gray;">${event.title}</span>`;
326
+ },
327
+ },
328
+ calendars: [
329
+ {
330
+ id: 'cal1',
331
+ name: 'Personal',
332
+ backgroundColor: '#03bd9e',
333
+ },
334
+ {
335
+ id: 'cal2',
336
+ name: 'Work',
337
+ backgroundColor: '#00a9ff',
338
+ },
339
+ ],
340
+ });
341
  function renderCalendar() {
342
  const firstDay = new Date(currentYear, currentMonth, 1);
343
  const lastDay = new Date(currentYear, currentMonth + 1, 0);