-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
593 lines (516 loc) · 39.4 KB
/
index.html
File metadata and controls
593 lines (516 loc) · 39.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thalia Symposium 2025</title>
<link rel="shortcut icon" href="./resources/main_icon.png" type="image/x-icon">
<link rel="stylesheet" href="./output.css">
</head>
<body class="w-screen h-screen bg-gray-100 overflow-x-hidden">
<div id="main_container" class="w-full h-full bg-inherit border-t-3 border-pink-700">
<div id="mobile_side_bar"
class="flex justify-center absolute top-0 left-[-100%] md:hidden lg:hidden z-2 w-full h-full transition-[left] duration-350 ease-in-out">
<!-- options for better navigation within the side bar menu -->
<div id="mobile_side_bar_options" class="inline-block w-7/8 h-full bg-white border-t-3 border-pink-700">
<!-- home and selection buttons for the side bar -->
<div id="mobile_side_bar_options_top_container" class="flex items-center">
<!-- main logo fitted in the side bar -->
<a href="./index.html" class="flex-grow w-full h-auto">
<div id="mobile_logo" class="flex-grow w-full h-auto">
<img id="mobile_logo_button" src="./resources/main_logo.jpeg"
class="inline-block max-w-70 h-auto object-contain p-3 hover:cursor-pointer">
</div>
</a>
<!-- course selector button -->
<img src="./resources/options_courses_gray.png"
class="flex max-w-30 max-h-22 object-contain p-5 hover:cursor-pointer">
</div>
<!-- main side bar buttons -->
<div id="mobile_side_bar_content" class="block">
<a
href="https://ru.osiris-student.nl/onderwijscatalogus/extern/cursus?collegejaar=huidig&taal=en&cursuscode=NWI-IBC016">
<div
class="block border-t-1 p-5 border-gray-200 text-2xl hover:text-sky-600 hover:bg-sky-100 hover:cursor-pointer">
Open Courses </div>
</a>
<div id="mobile_portofolio_button"
class="block border-t-1 p-5 border-gray-200 text-2xl hover:text-sky-600 hover:bg-sky-100 hover:cursor-pointer">
Portfolio </div>
<div id="mobile_help_button"
class="block border-t-1 p-5 border-gray-200 text-2xl hover:text-sky-600 hover:bg-sky-100 hover:cursor-pointer">
Help </div>
<div id="mobile_settings_button"
class="block border-t-1 p-5 border-gray-200 text-2xl hover:text-sky-600 hover:bg-sky-100 hover:cursor-pointer">
Admin Tools </div>
</div>
</div>
<!-- slice that when pressed exits the side bar view -->
<div id="mobile_side_bar_exit" class="block w-1/8 h-full bg-none"></div>
</div>
<!-- curtain for fancy 'inactive' background while the sidebar is active -->
<div id="main_opacity_curtain"
class="z-1 absolute top-0 left-0 hidden md:hidden lg:hidden w-full h-full bg-black opacity-50 transition-[opacity] duration-350 ease-in-out">
</div>
<div id="easter_egg_opacity_curtain"
class="z-3 absolute top-0 left-0 hidden w-full h-full bg-black opacity-50 transition-[opacity] duration-350 ease-in-out">
</div>
<div id="easter_egg_curtain" class="z-4 absolute top-1/3 left-1/3 hidden">
<img id="easter_egg_img" src="./resources/easter_egg_1.jpg" class="block w-1/2 h-1/2 hover:cursor-pointer">
</div>
<div id="top_bar" class="z-0 block w-full h-auto bg-white">
<div id="top_bar_top_center"
class="block w-full lg:w-full xl:w-300 2xl:w-300 h-auto mr-0 ml-0 lg:mr-0 lg:ml-0 xl:mr-auto xl:ml-auto 2xl:mr-auto 2xl:ml-auto mt-0 mb-0">
<div id="top_bar_top_container" class="flex w-full h-auto pl-5 md:pl-0">
<a href="./index.html" class="hidden md:inline-block lg:inline-block flex-2 w-auto h-auto pr-1/2">
<div id="logo" class="hidden md:inline-block lg:inline-block flex-2 w-auto h-auto pr-1/2">
<img id="logo_button" src="./resources/main_logo.jpeg"
class="hidden md:block lg:block max-w-70 h-auto object-contain p-3 hover:cursor-pointer">
</div>
</a>
<!-- side bar for providing options for mobile users -->
<div id="top_side_bar" class="inline-block flex-2 md:hidden lg:hidden w-auto h-auto">
<img id="top_side_bar_button" src="./resources/main_side_bar.png"
class="block md:hidden lg:hidden max-w-30 max-h-15 object-contain p-3 hover:cursor-pointer">
</div>
<div id="options" class="flex flex-1.5 md:flex-1 lg:flex-1 items-center w-auto h-auto pr-5">
<!-- these images all seem set in stone, but thanks to evil rendering, they
scale just fine -->
<img id="courses_button" src="./resources/options_courses_gray.png"
class="hidden md:inline-block lg:inline-block max-w-30 max-h-15 object-contain p-3 hover:cursor-pointer">
<img src="./resources/options_tiler.png"
class="hidden md:hidden lg:inline-block max-w-30 max-h-8 object-contain">
<img id="beer_button" src="./resources/options_beer_gray.png"
class="inline-block md:inline-block lg:inline-block max-w-30 max-h-15 object-contain p-3 hover:cursor-pointer">
<img id="notification_button" src="./resources/options_notification_gray.png"
class="inline-block md:inline-block lg:inline-block max-w-30 max-h-15 object-contain p-3 hover:cursor-pointer">
<img src="./resources/options_tiler.png"
class="hidden md:hidden lg:inline-block max-w-30 max-h-8 object-contain">
<!-- profile block that grows and shrinks according to the current device dimensions -->
<div id="profile"
class="flex justify-center items-center w-auto h-full pr-2 hover:cursor-pointer hover:text-sky-600">
<div id="profile_icon"
class="inline-block p-3 rounded-xl text-center text-white md:text-xl sm:text-lg bg-pink-700">
<b>TU</b>
</div>
<span class="hidden md:hidden lg:inline p-2 md:text-lg sm:text-sm"> Thalia User </span>
</div>
<!-- for some reason, the options are put after the profile; such nice devs, right? -->
<img id="settings_button" src="./resources/options_settings_gray.png"
class="hidden md:inline-block lg:inline-block max-w-30 max-h-15 object-contain p-3 hover:cursor-pointer">
</div>
</div>
</div>
<div id="top_bar_border"
class="block w-full h-auto border-none md:border-1 md:border-gray-200 drop-shadow-none :drop-shadow-lg">
<div id="top_bar_bottom_center"
class="block w-full xl:w-300 2xl:w-300 h-auto mr-0 ml-0 lg:mr-0 lg:ml-0 xl:mr-auto xl:ml-auto 2xl:mr-auto 2xl:ml-auto mt-0 mb-0">
<div id="top_bar_bottom_container"
class="hidden md:flex md:justify-start lg:flex lg:justify-start w-full h-auto">
<div id="extras" class="w-full h-auto p-3 pl-5 md:text-xl sm:text-lg">
<a
href="https://ru.osiris-student.nl/onderwijscatalogus/extern/cursus?collegejaar=huidig&taal=en&cursuscode=NWI-IBC016">
<span class="hover:text-sky-600 hover:cursor-pointer"> Open Courses </span> </a>
<span id="protofolio_button" class="pl-3 hover:text-sky-600 hover:cursor-pointer"> Portfolio
<b>⌄</b> </span>
<span id="help_button" class="pl-3 hover:text-sky-600 hover:cursor-pointer"> Help <b>⌄</b>
</span>
</div>
</div>
</div>
</div>
</div>
<div id="content_container_center"
class="block w-full lg:w-full xl:w-300 h-auto mr-0 ml-0 lg:mr-0 lg:ml-0 xl:mr-auto xl:ml-auto 2xl:mr-auto 2xl:ml-auto mt-0 mb-0">
<div id="content_container"
class="z-0 block md:flex lg:flex md:gap-[5%] lg:gap-[5%] w-full h-auto bg-inherit p-5">
<div id="content_side_bar_container"
class="block md:iniline-block lg:iniline-block w-full md:w-2/3 lg:w-2/3">
<!-- actual content of the page -->
<div id="content_side_bar"
class="block w-full h-auto p-2 pb-10 bg-white border-2 border-white rounded-xl drop-shadow-none md:drop-shadow-sm lg:drop-shadow-sm">
<!-- content selector for filtering -->
<div id="selector"
class="flex justify-start items-center w-full h-auto border-b-1 border-gray-200 pt-2">
<span id="all" class="p-3 hover:text-sky-600 hover:cursor-pointer"> All </span>
<span id="speakers" class="p-3 hover:text-sky-600 hover:cursor-pointer"> Speakers </span>
<span id="talks" class="p-3 hover:text-sky-600 hover:cursor-pointer"> Talks </span>
<span id="companies" class="p-3 hover:text-sky-600 hover:cursor-pointer"> Companies </span>
</div>
<!-- course grid container for enlisting all the possible courses in an
orderly manner -->
<!-------------------->
<!-- just revert to javascript when anything in CSS decies to die -->
<div id="course_grid"
class="grid grid-cols-2 grid-rows-[auto] lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-3 gap-5 pt-5">
<!-- courses are denoted by course_<number>, the convention is kept for each
memeber that it contains in order to allow for future adjustments -->
<div id="course_1"
class="relative block w-full h-auto border-1 border-gray-100 rounded-xl course">
<a href="./johan.html">
<!-- the cover for the course to be displayed -->
<div id="course_1_cover" class="block w-full h-1/2">
<img src="./resources/johan.png"
class="grid_course w-full h-full object-cover rounded-t-xl">
</div>
<!-- information about the course, code and name -->
<div id="course_1_info" class="p-3 text-xl">
<span> Bio: Johan Jeuring </span>
<span class="block w-full h-auto text-sm text-gray-500"> Speaker • Johan Jeuring
</span>
</div>
</a>
</div>
<div id="course_2"
class="relative block w-full h-auto border-1 border-gray-100 rounded-xl course">
<a href="./marije.html">
<!-- the cover for the course to be displayed -->
<div id="course_2_cover" class="block w-full h-1/2">
<img src="./resources/marije2.png"
class="grid_course w-full h-full object-cover rounded-t-xl">
</div>
<!-- information about the course, code and name -->
<div id="course_2_info" class="p-3 text-xl">
<span> Bio: Marije Goudriaan </span>
<!-- only the part before the dot should be changed, the IP-<number> can be whatever
and should technically be the only one to get changed, here this is my birthday. -->
<span class="block w-full h-auto text-sm text-gray-500"> Speaker • Marije
Goudriaan
</span>
</div>
</a>
</div>
<div id="course_8"
class="relative block w-full h-auto border-1 border-gray-100 rounded-xl course">
<a href="./unal.html">
<!-- the cover for the course to be displayed -->
<div id="course_8_cover" class="block w-full h-1/2">
<img src="./resources/unal.jpg"
class="grid_course w-full h-full object-cover rounded-t-xl">
</div>
<!-- information about the course, code and name -->
<div id="course_8_info" class="p-3 text-xl">
<span> Bio: Ünal Aksu </span>
<!-- only the part before the dot should be changed, the IP-<number> can be whatever
and should technically be the only one to get changed, here this is my birthday. -->
<span class="block w-full h-auto text-sm text-gray-500"> Speaker • Ünal Aksu
</span>
</div>
</a>
</div>
<div id="course_9"
class="relative block w-full h-auto border-1 border-gray-100 rounded-xl course">
<a href="./cristiana.html">
<!-- the cover for the course to be displayed -->
<div id="course_9_cover" class="block w-full h-1/2">
<img src="./resources/3000997.png"
class="grid_course w-full h-full object-cover rounded-t-xl">
</div>
<!-- information about the course, code and name -->
<div id="course_9_info" class="p-3 text-xl">
<span> Bio: Cristiana dell'Erba </span>
<!-- only the part before the dot should be changed, the IP-<number> can be whatever
and should technically be the only one to get changed, here this is my birthday. -->
<span class="block w-full h-auto text-sm text-gray-500"> Speaker • Cristiana
dell'Erba
</span>
</div>
</a>
</div>
<div id="course_3"
class="relative block w-full h-auto border-1 border-gray-100 rounded-xl course">
<a href="./luca.html">
<!-- the cover for the course to be displayed -->
<div id="course_3_cover" class="block w-full h-1/2">
<img src="./resources/luca1.png"
class="grid_course w-full h-full object-cover rounded-t-xl">
</div>
<!-- information about the course, code and name -->
<div id="course_3_info" class="p-3 text-xl">
<span> Bio: Luca Consoli </span>
<!-- only the part before the dot should be changed, the IP-<number> can be whatever
and should technically be the only one to get changed, here this is my birthday. -->
<span class="block w-full h-auto text-sm text-gray-500"> Speaker • Luca Consoli
</span>
</div>
</a>
</div>
<div id="course_7"
class="relative block w-full h-auto border-1 border-gray-100 rounded-xl course">
<!-- the cover for the course to be displayed -->
<a href="./ai-in-education.html">
<div id="course_7_cover" class="block w-full h-1/2">
<img src="./resources/aiinedu.jpeg"
class="grid_course w-full h-full object-cover rounded-t-xl">
</div>
<!-- information about the course, code and name -->
<div id="course_7_info" class="p-3 text-xl">
<span> Talk: AI in Education </span>
<!-- only the part before the dot should be changed, the IP-<number> can be whatever
and should technically be the only one to get changed, here this is my birthday. -->
<span class="block w-full h-auto text-sm text-gray-500"> Speaker •
Johan Jeuring </span>
</div>
</a>
</div>
<div id="course_10"
class="relative block w-full h-auto border-1 border-gray-100 rounded-xl course">
<a href="./genai-teaching.html">
<!-- the cover for the course to be displayed -->
<div id="course_10_cover" class="block w-full h-1/2">
<img src="./resources/nav-ai.jpg"
class="grid_course w-full h-full object-cover rounded-t-xl">
</div>
<!-- information about the course, code and name -->
<div id="course_10_info" class="p-3 text-xl">
<span> Talk: Navigating (Generative) AI in Education </span>
<!-- only the part before the dot should be changed, the IP-<number> can be whatever
and should technically be the only one to get changed, here this is my birthday. -->
<span class="block w-full h-auto text-sm text-gray-500"> Speaker • Luca Consoli
</span>
</div>
</a>
</div>
<div id="course_11"
class="relative block w-full h-auto border-1 border-gray-100 rounded-xl course">
<a href="./use-of-ai.html">
<!-- the cover for the course to be displayed -->
<div id="course_11_cover" class="block w-full h-1/2">
<img src="./resources/use-ai.jpg"
class="grid_course w-full h-full object-cover rounded-t-xl">
</div>
<!-- information about the course, code and name -->
<div id="course_11_info" class="p-3 text-xl">
<span> Talk: How is AI used by students? </span>
<!-- only the part before the dot should be changed, the IP-<number> can be whatever
and should technically be the only one to get changed, here this is my birthday. -->
<span class="block w-full h-auto text-sm text-gray-500"> Speaker • Cristiana
dell'Erba
</span>
</div>
</a>
</div>
<div id="course_12"
class="relative block w-full h-auto border-1 border-gray-100 rounded-xl course">
<a href="./learning-analytics.html">
<!-- the cover for the course to be displayed -->
<div id="course_12_cover" class="block w-full h-1/2">
<img src="./resources/blog_e-Learning-analytics.jpg"
class="grid_course w-full h-full object-cover rounded-t-xl">
</div>
<!-- information about the course, code and name -->
<div id="course_12_info" class="p-3 text-xl">
<span> Talk: From Digital Footprints to Learning Insights </span>
<!-- only the part before the dot should be changed, the IP-<number> can be whatever
and should technically be the only one to get changed, here this is my birthday. -->
<span class="block w-full h-auto text-sm text-gray-500"> Speaker • Marije
Goudriaan
</span>
</div>
</a>
</div>
<div id="course_4"
class="relative block w-full h-auto border-1 border-gray-100 rounded-xl course">
<a href="./nedap.html">
<!-- the cover for the course to be displayed -->
<div id="course_4_cover" class="block w-full h-1/2">
<img src="./resources/nedap.webp"
class="grid_course w-full h-full object-cover rounded-t-xl">
</div>
<!-- information about the course, code and name -->
<div id="course_4_info" class="p-3 text-xl">
<span> Sponsor: Nedap </span>
<!-- only the part before the dot should be changed, the IP-<number> can be whatever
and should technically be the only one to get changed, here this is my birthday. -->
<span class="block w-full h-auto text-sm text-gray-500"> NWI-IP1104-2025-KW3-V •
2024/2025 </span>
</div>
</a>
</div>
<div id="course_6"
class="relative block w-full h-auto border-1 border-gray-100 rounded-xl course">
<!-- the cover for the course to be displayed -->
<div id="course_6_cover" class="block w-full h-1/2">
<img src="./resources/test_cover.jpg"
class="grid_course w-full h-full object-cover rounded-t-xl">
</div>
<!-- information about the course, code and name -->
<div id="course_6_info" class="p-3 text-xl">
<span> More Info will be announced soon! </span>
<!-- only the part before the dot should be changed, the IP-<number> can be whatever
and should technically be the only one to get changed, here this is my birthday. -->
<span class="block w-full h-auto text-sm text-gray-500"> NWI-IP1104-2025-KW3-V •
2024/2025 </span>
</div>
</div>
</div>
</div>
</div>
<!-- right sidebar for displaying announcements and the calendar -->
<div id="info_side_bar"
class="block md:iniline-block lg:iniline-block mt-7 md:mt-0 lg:mt-0 w-full md:w-1/3 lg:w-1/3 h-auto">
<!-- current announcements in place -->
<div id="announcements"
class="block w-full h-auto p-5 bg-white border-2 border-white rounded-xl drop-shadow-none md:drop-shadow-sm lg:drop-shadow-sm">
<!-- title for the announcement block-->
<span class="block pb-5 text-base"> <b>General Event Info</b> </span>
<!-- actual announcement to be displayed -->
<div id="announcement" class="block p-7 border-1 border-gray-200 text-lg rounded-xl">
On the 16th of April at the Burghardt, we're hosting a day of talks on Computer-Assisted
Education from partners and professors,
with lunch provided and a borrel at the end of the talks. <br> You'll also get a chance to
chat with people from our partner companies during the lunch! <br>
Please arrive before 11:30, as you won't be able to enter the venue after that time. We look
forward to seeing you!
</div>
</div>
<!-- schedule for the symposium activities -->
<!------------------------------------------->
<!-- the atrocities commited here shall remain unbeknownst to
man kind and its relatives -->
<div id="schedule"
class="block w-full h-auto mt-7 p-5 bg-white border-2 border-white rounded-xl drop-shadow-none md:drop-shadow-sm lg:drop-shadow-sm">
<!-- title for the schedule block-->
<span class="block pb-5 text-base"> <b>Schedule</b> </span>
<!-- day marker -->
<div id="current_day" class="block p-4 border-1 border-gray-200 text-base rounded-xl">
<b>Wednesday, April 16, 2025</b>
</div>
<!-- toggleable list of upcomming events -->
<div id="upcomming"
class="block mt-4 p-4 w-full h-auto bg-inherit border-1 border-gray-200 rounded-xl text-base">
<div id="upcomming_title"
class="sticky top-0 flex flex-row p-3 pl-0 bg-inherit rounded-b-xl">
<span class="basis-24/25"> <b>Upcoming events</b> </span>
<img id="upcomming_button" src="./resources/options_list.png"
class="basis-1/25 max-w-4 max-h-auto object-contain rotate-90 hover:cursor-pointer transition-[rotate] duration-200 ease-in-out"></img>
</div>
<!-- list of all upcomming events in a simple grid pattern -->
<div id="event_list"
class="grid grid-cols-1 w-full grid-rows-[auto] border-t-1 border-gray-200">
<!-- this date should always stay the same, after all it should be just the symposium date -->
<div id="event_1" class="flex items-center w-full h-auto p-5 bg-inherit event">
<div class="inline-block w-auto h-full p-2">
<span class="block p-1 text-lg border-b-1 border-gray-200"> APR </span>
<span class="flex justify-center p-1 text-lg"> <b>16</b> </span>
</div>
<!-- actual info about the event, simply change the time and name of the event -->
<div class="inline-block w-auto h-full p-2 pt-3">
<span class="block text-md"> <b>10:00 - 10:30</b> </span>
<span class="block text-lg"> <b>Walk-In </b></span>
<span class="block text-md"> 2425 Thalia Symposium (KW3 V) </span>
</div>
</div>
<!-- this date should always stay the same, after all it should be just the symposium date -->
<div id="event_1" class="flex items-center w-full h-auto p-5 bg-inherit event">
<div class="inline-block w-auto h-full p-2">
<span class="block p-1 text-lg border-b-1 border-gray-200"> APR </span>
<span class="flex justify-center p-1 text-lg"> <b>16</b> </span>
</div>
<!-- actual info about the event, simply change the time and name of the event -->
<div class="inline-block w-auto h-full p-2 pt-3">
<span class="block text-md"> <b>10:30 - 10:40</b> </span>
<span class="block text-lg"> <b>Opening </b></span>
<span class="block text-md"> 2425 Thalia Symposium (KW3 V) </span>
</div>
</div>
<!-- this date should always stay the same, after all it should be just the symposium date -->
<div id="event_2" class="flex items-center w-full h-auto p-5 bg-inherit event">
<div class="inline-block w-auto h-full p-2">
<span class="block p-1 text-lg border-b-1 border-gray-200"> APR </span>
<span class="flex justify-center p-1 text-lg"> <b>16</b> </span>
</div>
<!-- actual info about the event, simply change the time and name of the event -->
<div class="inline-block w-auto h-full p-2 pt-3">
<span class="block text-md"> <b>10:40 - 11:30</b> </span>
<span class="block text-lg"> <b>Talk 1: AI in Education </b></span>
<span class="block text-md"> 2425 Thalia Symposium (KW3 V) </span>
</div>
</div>
<!-- this date should always stay the same, after all it should be just the symposium date -->
<div id="event_3" class="flex items-center w-full h-auto p-5 bg-inherit event">
<div class="inline-block w-auto h-full p-2">
<span class="block p-1 text-lg border-b-1 border-gray-200"> APR </span>
<span class="flex justify-center p-1 text-lg"> <b>16</b> </span>
</div>
<!-- actual info about the event, simply change the time and name of the event -->
<div class="inline-block w-auto h-full p-2 pt-3">
<span class="block text-md"> <b>11:40 - 12:30</b> </span>
<span class="block text-lg"> <b>Talk 2: Navigating AI in Education </b></span>
<span class="block text-md"> 2425 Thalia Symposium (KW3 V) </span>
</div>
</div>
<!-- this date should always stay the same, after all it should be just the symposium date -->
<div id="event_4" class="flex items-center w-full h-auto p-5 bg-inherit event">
<div class="inline-block w-auto h-full p-2">
<span class="block p-1 text-lg border-b-1 border-gray-200"> APR </span>
<span class="flex justify-center p-1 text-lg"> <b>16</b> </span>
</div>
<!-- actual info about the event, simply change the time and name of the event -->
<div class="inline-block w-auto h-full p-2 pt-3">
<span class="block text-md"> <b>12:30 - 13:50</b> </span>
<span class="block text-lg"> <b>Lunch + Market </b></span>
<span class="block text-md"> 2425 Thalia Symposium (KW3 V) </span>
</div>
</div>
<!-- this date should always stay the same, after all it should be just the symposium date -->
<div id="event_5" class="flex items-center w-full h-auto p-5 bg-inherit event">
<div class="inline-block w-auto h-full p-2">
<span class="block p-1 text-lg border-b-1 border-gray-200"> APR </span>
<span class="flex justify-center p-1 text-lg"> <b>16</b> </span>
</div>
<!-- actual info about the event, simply change the time and name of the event -->
<div class="inline-block w-auto h-full p-2 pt-3">
<span class="block text-md"> <b>13:50 - 14:40</b> </span>
<span class="block text-lg"> <b>Talk 3: How is AI used by students? </b></span>
<span class="block text-md"> 2425 Thalia Symposium (KW3 V) </span>
</div>
</div>
<div id="event_7" class="flex items-center w-full h-auto p-5 bg-inherit event">
<div class="inline-block w-auto h-full p-2">
<span class="block p-1 text-lg border-b-1 border-gray-200"> APR </span>
<span class="flex justify-center p-1 text-lg"> <b>16</b> </span>
</div>
<!-- actual info about the event, simply change the time and name of the event -->
<div class="inline-block w-auto h-full p-2 pt-3">
<span class="block text-md"> <b>14:50 - 15:20</b> </span>
<span class="block text-lg"> <b>Coffee Break </b></span>
<span class="block text-md"> 2425 Thalia Symposium (KW3 V) </span>
</div>
</div>
<!-- this date should always stay the same, after all it should be just the symposium date -->
<div id="event_6" class="flex items-center w-full h-auto p-5 bg-inherit event">
<div class="inline-block w-auto h-full p-2">
<span class="block p-1 text-lg border-b-1 border-gray-200"> APR </span>
<span class="flex justify-center p-1 text-lg"> <b>16</b> </span>
</div>
<!-- actual info about the event, simply change the time and name of the event -->
<div class="inline-block w-auto h-full p-2 pt-3">
<span class="block text-md"> <b>15:20 - 16:30</b> </span>
<span class="block text-lg"> <b>Talk 4: From Digital Footprints to Learning
Insights </b></span>
<span class="block text-md"> 2425 Thalia Symposium (KW3 V) </span>
</div>
</div>
<div id="event_9" class="flex items-center w-full h-auto p-5 bg-inherit event">
<div class="inline-block w-auto h-full p-2">
<span class="block p-1 text-lg border-b-1 border-gray-200"> APR </span>
<span class="flex justify-center p-1 text-lg"> <b>16</b> </span>
</div>
<!-- actual info about the event, simply change the time and name of the event -->
<div class="inline-block w-auto h-full p-2 pt-3">
<span class="block text-md"> <b>16:30 - 19:00</b> </span>
<span class="block text-lg"> <b>Borrel </b></span>
<span class="block text-md"> 2425 Thalia Symposium (KW3 V) </span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="./index2.js"></script>
</body>
</html>