symposium-website/luca.html at main · svthalia/symposium-website · GitHub

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
<!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="course_banner"
        class="z-0 w-full h-50 overflow-hidden pr-0 pl-0 md:pr-0 md:pl-0 lg:pr-5 lg:pl-5 2xl:pl-5 2xl:pr-5">

        <!-- the actual course cover that should change based on the selected course -->
        <img id="course_img_banner" src="./resources/banner-wide-low-density-max-size.jpg"
          class="z-0 block w-full h-full object-cover">

        <!-- the course name to be displayed ontop the cover-->
        <span class="z-1 relative left-5 bottom-20 hidden w-auto h-auto md:text-xl 2xl:text-5xl text-white course_name">
          Speaker Bio: Luca Consoli </span>
      </div>

      <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">

        <!-- the content and links to other pages -->
        <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">

            <!-- course info container for dsiplaying the information about the selected course -->
            <div id="course_info" class="w-full h-auto p-3 pt-5 text-2xl">

              <!-- the title for the shown announcement including author -->
              <div id="course_title" class="block w-full h-auto pb-2 text-3xl text-sky-600"> Bio: Luca Consoli </div>
              <div id="course_author" class="block w-full h-auto pb-5 text-sm text-gray-800"> Symposium Team posted on
                Mar 24, 2025 13:49</div>

              <!-- the actual text for the course -->
              <div id="course_text" class="block w-full h-auto">
                After my PhD in theoretical physics, I turned my attention to the ethical and societal implications of
                science and technology. My current research and teaching activities focus on the embedding of scientific
                practices in ‘the broader context’. <br><br> This means both inside and outside the scientific
                community. As far
                as the first one is concerned, I am interested in questions of scientific ethics (what do scientists
                themselves consider ‘good science’ and why?), using as a virtue-ethical approach. <br>As far as the
                second
                one is concerned, relevant issues for me are the role of normativity in expertise and the concepts of
                RRI (Responsible Research and Innovation) and ELSA (Ethical / Legal / Societal aspects of Science and
                Technology). <br><br>The ethical implications of (Gen)AI have become a prominent topic both in my
                teaching and
                my research.


              </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="./info.js"></script>
</body>

</html>