From 014ff82daaeb6a95f2da685e91f7c54af59acbf8 Mon Sep 17 00:00:00 2001
From: tobi <hello@kabi.tk>
Date: Sat, 3 Aug 2024 22:18:19 +0200
Subject: [PATCH] updates and adding 2024 content

---
 index.html             |  78 ++++++++++---
 timetable/eventData.js | 247 +++++++++++++++++++++++++++++++++++++++++
 timetable/index.html   |  37 ++++++
 timetable/scripts.js   |  97 ++++++++++++++++
 timetable/styles.css   | 207 ++++++++++++++++++++++++++++++++++
 5 files changed, 652 insertions(+), 14 deletions(-)
 create mode 100644 timetable/eventData.js
 create mode 100644 timetable/index.html
 create mode 100644 timetable/scripts.js
 create mode 100644 timetable/styles.css

diff --git a/index.html b/index.html
index 7d4dd17..4d5e939 100644
--- a/index.html
+++ b/index.html
@@ -22,15 +22,16 @@
 				<!-- Header -->
 
 					<header id="header">
-
-					<div class="dropdown">
+					
+					<!--LANGUAGE SELECTOR IS DISABLED - re-enable it when new camp is in planning process! -->
+					<!--<div class="dropdown">
 					  <button class="dropbtn">Languages</button>
 					  <div class="dropdown-content">
 						<a href="index.html">🇩🇪 Deutsch</a>
-						<!--<a href="index_fr.html">🇫🇷 Français</a>-->
+						<a href="index_fr.html">🇫🇷 Français</a>
 						<a href="index_en.html">🇺🇸 English</a>
 					  </div>
-					</div>
+					</div>-->
 
 						<div class="content">
 							<div class="inner">
@@ -41,17 +42,18 @@
 						<nav>
 							<ul>
 								<li><a href="#announce">Was?</a></li>
-								<li><a href="#date">Wann/wo?</a></li>
-								<li><a href="#rsvp">Anmeldung</a></li>
-								<li><a href="#campinfos">CampInfos</a></li>
-								<li><a href="#y2023">Archiv</a></li>
+								<!--<li><a href="#date">Wann/wo?</a></li>-->
+								<!--<li><a href="#rsvp">Anmeldung</a></li>-->
+								<!--<li><a href="#campinfos">CampInfos</a></li>-->
+								<li><a href="#2025">2025?</a></li>
+								<li><a href="#y2024">Archiv</a></li>
 
 								<!--<li><a href="">Online MeetUp</a></li>-->
 								<!--<li><a href="#contact">Kontakt</a></li>-->
 							</ul>
 						
 						</nav>
-						<!-- The secong line of bottons is for the camp details and onside information -->
+						<!-- The secong line of buttons is for the camp details and onside information -->
 						<!--<nav>
 							<a href="https://fedi.camp/lagerfeuer" class="button primary">zum Lagerfeuer</a>
 							<p style="color: rgb(106, 255, 0); font-weight: bold">Nächstes Online Meet-Up am Samstag, 06.04.24 um 21 Uhr.</p>
@@ -65,13 +67,10 @@
 
 						<!-- Announcement -->
 							<article id="announce">
-								<h2 class="major">FediCamp 2024</h2>
-								<h3>Es ist wieder so weit. Das FediCamp geht in die dritte Runde!</h3>
+								<h2 class="major">FediCamp Konzept</h2>
 
-								<p>Nachdem wir in den Jahren 2022 und 2023 das sehr schöne, entspannte und interessante FediCamp durchgeführt haben, soll es dieses Jahr wieder so sein.</p>
+								<p>Das Fedicamp ist ein Treffen von Personen, die sich über das Fediverse kennengelernt haben.</p>
 
-								<p>Wir treffen uns gemeinsam und lernen Leute persönlich kennen, die wir über eine lange Zeit aus dem Fediversum kennen. Gleichzeitig halten wir gegenseitig Vorträge, sitzen am Lagerfeuer und haben eine gute Zeit zusammen. Die Veranstaltung ist Chaos-nah, jede:r gestaltet und wir machen daraus was uns allen gefällt. Gleichzeitig gelten die entsprechenden Regeln - be excellent to each other!</p>
-								<h2 class="image left"><img src="images/fedilogo.png" alt="Fedilogo" /></h2>
 								<p>Das Fediverse ist ein Konzept, das eine Vielzahl von dezentralen sozialen Netzwerken umfasst, die miteinander verbunden sind. Es basiert auf offenen Protokollen wie ActivityPub, die es verschiedenen Plattformen ermöglichen, miteinander zu kommunizieren. Nutzer können in diesem Netzwerk auf verschiedenen Plattformen wie Mastodon, PeerTube, Pixelfed und anderen interagieren, Inhalte teilen und sich vernetzen. Das Fediverse fördert die individuelle Kontrolle über Daten und den Schutz der Privatsphäre, da Benutzer die Freiheit haben, ihre eigenen Server zu betreiben oder Plattformen zu wählen, die ihren Bedürfnissen entsprechen. Es bietet eine alternative, nicht kommerzielle und demokratische Art der sozialen Vernetzung, bei der die Nutzer die Kontrolle über ihre Online-Identität behalten.</p>
 
 								<h3>Lernen und lachen, chillen und grillen.</h3>
@@ -171,12 +170,62 @@
 
 							</article>
 
+							<!-- Show me the way-->
+							<article id="2025">
+								<h2 class="major">Gibe es ein FediCamp in 2025?</h2>
+								<h3>JA!</h3>
+								<p>Der Termin wird im Dezember festgelegt. Schaut gern hin und wieder auf der Website vorbei und kommt in den Matrix-Raum, um keine Informationen zu verpassen!</p>
+							</article>
+
+
+
+
+
+
 						<!-- ARCHIVE -->
+
+							<!--ARCHIVE 2024 -->
+							<article id="y2024">
+								<h2 class="major">Archiv</h2>
+								<h1>Berichte aus 2024</h1>
+								<p><b>Berichte und Fotos des ersten FediCamp im Jahre 2022 findet Ihr <a href="#y2022">hier</a>.</b></p>
+								<p><b>Berichte und Fotos des zweiten FediCamp im Jahre 2023 findet Ihr <a href="#y2023">hier</a>.</b></p>
+								<p><a href="fc24-fotos/index.html" class="button">Fotos 2024</a></p>
+								<p>Du warst Teilnehmende oder Teilnehmer? Dann kannst Du die Bilder (und noch mehr) auch im Original und ohne Blurring bekommen. Schreibe dazu eine Mail oder teile das im Matrix-Raum mit!</p><br>
+								<h2>Das Camp 2024 - Bericht</h2>
+								<p>Hier seht ihr Berichte der Teilnehmenden.</p>
+
+								<h3>raspel</h3>
+								<p><a href="https://social.tchncs.de/@raspel">@raspel@social.tchncs.de</a></p>
+								<p>Auch dieses Jahr ging es wieder zum Fedicamp nach Gedelitz. Wir sind am Sonntag morgens losgefahren. Der Weg führte uns über Hitzacker, Dömitz, weiter an der Elbuferstrasse entlang.
+
+								In Dömitz gab es eine Festung zu sehen. Wieder auf der westlichen Seite der Elbe haben wir die Reste der alten Eisenbahnbrücke angeschaut. Diesen Teil des Wendland kannte ich nicht. Alles perfekt für ausgedehnte Rad an oder auf dem Deich der Elbe entlang. Nach einem kurzen Stop bei Bekannten in Gorleben, erreichten wir unser Ziel in Gartow.
+								
+								Am Dienstag ging es nach Gedelitz. Lampen, Strom, Internet und all dieses Gedöns was für ein Gelingen erforderlich ist, wurde verlegt und aufgebaut. Erste Besucher kamen schon am Vortag. Das Wetter machte uns einen Strich durch die Rechnung. Es gab Gewitter und Starkregen. Die Wiese konnte das Wasser so schnell nicht aufnehmen. Zwei Anreisende hatten unterwegs Probleme mit ihren Rädern... Alles löste sich in Wohlgefallen auf. Für alle und mit allen wurde gekocht und gegesssen. Abends gab es viele Gespräche am Lagerfeuer.
+								
+								Die Tage vergehen wie im Flug... Leute kommen, Leute gehen, es gibt Vorträge und Exkursionen. Zuviele Begnungen, zuviele Ereignisse, ich kann sie gar nicht im Einzelnen wiedergeben. Es waren ungefähr 60 Erwachsene und sieben Kinder auf dem Camp. Manche waren die ganze Zeit dort, andere waren ein paar Tage dort, andere kamen nur für eine kurze Stippvisite vorbei. Alles in Allem einfach grandios wie so unterschiedliche Menschen so gut miteinander umgegangen sind, ohne Zank und Ärger. So etwas erlebt man selten.
+								
+								Schnell ist die Zeit auf der Wiese in Gedelitz vorbei. Es ist wieder Sonntag. Alle bauen ihre Zelte ab. Die Leute von der Orga bauen die Infrastruktur zurück. Die Küche, der Saal, die sanitären Anlagen müssen gereinigt werden.
+								
+								Es war einfach wunderbar! Bis zum nächsten Jahr!</p>
+
+
+								<h3>ÜckÜck & Flo</h3>
+								<p><a href="https://dresden.network/@ueckueck">@ueckueck@dresden.network</a></p>
+								<p><a href="https://dresden.network/@zwecki">@zwecki@dresden.network</a></p>
+								<p><a href="https://podcasts.homes/@rebootpolitics/episodes/im-mittelalter-warst-du-tot/chapters">Chapter 8 des Podcasts.</a></p>
+
+							</article>
+
+
+								
+
 							<!-- ARCHIVE 2023 -->
 							<article id="y2023">
 								<h2 class="major">Archiv</h2>
 								<h1>Berichte aus 2023</h1>
 								<p><b>Berichte und Fotos des ersten FediCamp im Jahre 2022 findet Ihr <a href="#y2022">hier</a>.</b></p>
+								<p><b>Berichte und Fotos des dritten FediCamp im Jahre 2024 findet Ihr <a href="#y2024">hier</a>.</b></p>
 								<p><a href="fc23-fotos/index.html" class="button">Fotos 2023</a></p>
 								<p>Du warst Teilnehmende oder Teilnehmer? Dann kannst Du die Bilder (und noch mehr) auch im Original und ohne Blurring bekommen. Schreibe dazu eine Mail oder teile das im Matrix-Raum mit!</p><br>
 								<h2>Das Camp 2023 - Bericht</h2>
@@ -214,6 +263,7 @@
 								<h2 class="major">Archiv</h2>
 								<h1>Berichte aus 2022</h1>
 								<p><b>Berichte und Fotos des zweiten FediCamp im Jahre 2023 findet Ihr <a href="#y2023">hier</a>.</b></p>
+								<p><b>Berichte und Fotos des dritten FediCamp im Jahre 2024 findet Ihr <a href="#y2024">hier</a>.</b></p>
 								<p><a href="fc22-fotos/index.html" class="button">Fotos 2022</a></p>
 								<h2>Das Camp 2022 - Bericht</h2>
 
diff --git a/timetable/eventData.js b/timetable/eventData.js
new file mode 100644
index 0000000..8af2a8d
--- /dev/null
+++ b/timetable/eventData.js
@@ -0,0 +1,247 @@
+/*
+
+This is the only file to be modified for adding your session at FediCamp.
+
+Please follow the file structure as given in this example and commit your changes to the repo.
+That's it!
+
+If you have any questions, ask in the Matrix-Room or ask Tobi.
+If you aren't sure what to do, ask someone to help!
+
+You also can put the date & description about your session in the pad (Link in Matrix room).
+It will be merged, but maybe not in time.
+
+As locations, please only use the following:
+'Camp ground', 'Fire place', 'Lunch table', 'Stage room', 'Mobile'
+
+As start time please only use the following numbers:
+10, 12, 14, 16, 18, 20
+
+As days please only use the following days:
+'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
+
+
+*/
+
+const eventData = {
+  Wednesday: {
+    12: {
+      'Lunch table': {
+        event: 'Breakfast',
+        description: 'All-day breakfast',
+      },
+      /* other events */
+    },
+    14: {
+      'Camp ground': {
+        event: 'Microblog und Permacomputing',
+        description: 'Microblog und Permacomputing - Sustainability (CO2 etc.) - Überlegungen zu verschiedenen (ActivityPub) Ansätzen. Was ist mit dem Jonasschen Prinzip Verantwortung überhaupt drin? Ansprechperson für die Session ist @mro@digitalcourage.social',
+      },
+      /* other events */
+    },
+
+    18: {
+      'Camp ground': {
+        event: 'Diskussionsrunde Schnittstellen',
+        description: 'Diskussionsrunde zu offenen Schnittstellen und wie wir das Fediverse resilient gegen Großkonzerne machen. Ansprechperson für die Session ist @reticuleena@digitalcourage.social.',
+      },
+      'Lunch table': {
+        event: 'Foodbar',
+        description: 'Abendessen und Snacks. Planung findet am Veranstaltungstag statt.',
+      },
+      /* other events */
+    },
+    20: {
+      'Fire place': {
+        event: 'Bonfire',
+        description: 'Sit-in and talks around the fire.',
+      },
+    },
+  },
+  Thursday: {
+    10: {
+      'Lunch table': {
+        event: 'Breakfast & Coffee',
+        description: 'Join us for a fresh morning coffee & snacks.',
+      },
+      /* other events */
+    },
+    12: {
+      'Camp ground': {
+        event: 'Fediverse Charta II',
+        description: 'Workshop: Wir schreiben einen Entwurf einer „Fediverse-Charta“. Ansprechperson für die Session ist @reticuleena@digitalcourage.social.',
+      },
+    },
+    14: {
+      'Stage room': {
+        event: 'Moderationstreffen (FMT)',
+        description: 'Allgemeines Moderationstreffen mit den Initiatoren des etablierten turnusmäßigen Treffen der Moderator-/innen. Ansprechperson für die Session ist @w4ts0n@nerdculture.de.',
+      },
+    },
+    16: {
+      'Lunch table': {
+        event: 'Pen and Paper mit Tealk',
+        description:
+          'Zur Auswahl stehen Aborea, Cyberpunk RED, Durance und Warhammer 40k Wrath & Glory. Die Delux edition ist noch unangetastet. Empfohlene Spielerzahl: 3 bis 6 Spielende. Außerdem wir das allseits beliebte Muchkin dabei sein. Ansprechperson für diese Session ist @Tealk@rollenspiel.social.',
+      },
+      'Camp ground': {
+        event: 'Fck Uber',
+        description:
+          'So können wir mit dezentralen Netzwerken den großen Konzernen Marktanteile wegnehmen bei Branchen, die stark lokal ausgerichtet sind. Ansprechperson ist @clemensg@digitalcourage.social.',
+      },
+      'Mobile': {
+        event: 'Schweißworkshops',
+        description: 'Einführung ins Schweißen von @willHelm@links.potsda.mn. Maximal 2 Personen.',
+      },
+    },
+    18: {
+      'Camp ground': {
+        event: 'Erotik und nun?',
+        description: 'Diskussionsrunde: Erotik-Content im Fediverse. Und nun? Ansprechpartner für diese Sessionn ist Digitalcourage.',
+        /* other events */
+      },
+    },
+    20: {
+      'Camp ground': {
+        event: '300.000 Jahre Homo Sapiens ...',
+        description: '... 50.000 Jahre Sprache, 10.000 Jahre Sesshaftigkeit, 2.500 Jahre Literatur, 500 Jahre Buchdruck, 25 Jahre Web - welche Anfängerfehler passieren uns gerade. Ansprechperson für diese Session ist @mro@digitalcourage.social',
+      },
+    },
+    /* other times */
+  },
+  Friday: {
+    10: {
+      'Camp ground': {
+        event: 'Dinge selber machen',
+        description:'Dinge trotzdem selber machen (oder: Konsum oder Agency?). Vielleicht finden wir ja einen schönen Begriff statt >Agency<. Mit einem Ausflug zu Ivan Illich und den 📖 Tools for Convivality. Ansprechperson für diese Session ist @mro@digitalcourage.social',
+      },
+      'Lunch table': {
+        event: 'Breakfast & Coffee',
+        description: 'Join us for a fresh morning coffee & snacks.',
+      },
+    },
+    12: {
+      'Camp ground': {
+        event: 'Was ist möglich im Fediverse',
+        description: 'Über die Spezifikationen des ActivityPub-Protokolls. Einführung an drei konkreten Beispielen mit Spielkarten. Ansprechperson ist @sl007@digitalcourage.social.',
+      },
+      /* other events */
+    },
+    14: {
+      'Stage room': {
+        event: 'Gesund Kommerzialisieren',
+        description: 'Workshop: Gesund kommerzialisieren: nachhaltige Finanzierungskonzepte entwickeln, Billing automatisieren. Ansprechperson für die Session ist @reticuleena@digitalcourage.social.',
+      },
+      'Lunch table': {
+        event: 'Pen and Paper: Mausritter',
+        description:
+          'Dieses Mal ein fertiges Abenteuer, dass es zu den GRT gab. ACHTUNG: Es können nicht so viele Mäuse mitspielen! Thema: Ritterliche Abenteuer mit kleinen Mäusen; Dauer 3-4 Stunden. Ansprechperson für diese Session ist @ueckueck@dresden.network.',
+      },
+      /* other events */
+    },
+    16: {
+      'Stage room': {
+        event: 'Talk: Werbetracking erkennen',
+        description:
+          'Matthias Eberl zeigt, wie man mit der Netzwerkanalyse des Browsers nach Trackingeinbettungen suchen kann, wie man sie identifiziert und mit welchen Rechtsgrundlagen man dann mit meinem Beschwerdegenerator "Tracktor" dagegen vorgehen kann. Außerdem wird eine einfache Methode gezeigt, um Apps auf verdächtige Verbindungen zu prüfen. Ansprechperson für diese Session ist @rufposten@social.tchncs.de.',
+      },
+      'Lunch table': {
+        event: 'Ownhome',
+        description:
+          'Ansprechperson für diese Session ist Clemens',
+      },
+      /* other events */
+    },
+    18: {
+      'Camp ground': {
+        event: 'Fedimins Serverabkommen',
+        description:
+          'Workshop: Im Anschluss an den "Fediverse Charta" Workshop reden wir über das Serverabkommen von Fedimins, betrachten den aktuellen Stand und reden darüber. Ansprechperson für die Session ist @tealk@rollenspiel.social.',
+      },
+      /* other events */
+    },
+    20: {
+      'Fire place': {
+        event: 'Bonfire',
+        description: 'Sit-in and talks around the fire.',
+      },
+      'Lunch table': {
+        event: 'Tidying up',
+        description: 'Tidying up the kitchen and preparing for the next day.',
+      },
+      /* other events */
+    },
+    /* other times */
+  },
+  Saturday: {
+    12: {
+      'Stage room': {
+        event: 'Workshop Algorithmus',
+        description:
+          'Workshop: Der "wichtiges"-Algorithmus fehlt manchen. Wie ließe sich das gesellschaftsverträglich umsetzen? Ansprechperson für die Session ist @reticuleena@digitalcourage.social.',
+      },
+      /* other events */
+    },
+    14:{
+      'Mobile': {
+        event: 'Schweißworkshops',
+        description: 'Einführung ins Schweißen von @willHelm@links.potsda.mn. Maximal 2 Personen',
+      },
+      'Stage room': {
+        event: 'Flohmarkt',
+        description:
+          'Föderierte kleinanzeigen. Ansprechperson: @grindhold@chaos.social',
+      },
+    
+    },
+    16: {
+      'Camp ground': {
+        event: 'Lötworkshop',
+        description:
+          'Lernt löten. @hilde@dz.social wird durch den Workshop führen und Euch zeigen, wie das alles funktioniert. Lötkolben und weiteres benötigtes Werkzeug wird zur Verfügung gestellt.',
+      },
+      /* other events */
+    },
+    18: {
+      'Camp ground': {
+        event: 'Zu große Instanzen',
+        description: 'Diskusstionsrunde zum Thema große und zu große Instanzen.',
+      },
+      'Lunch table': {
+        event: 'Preparing BBQ',
+        description: 'Preparing BBQ & dinner.',
+      },
+      /* other events */
+    },
+    20: {
+      'Fire place': {
+        event: 'Bonfire',
+        description: 'Sit-in and talks around the fire.',
+      },
+      'Lunch table': {
+        event: 'Tidying up',
+        description: 'Tidying up the kitchen and preparing for the next day.',
+      },
+      /* other events */
+    },
+    /* other times */
+  },
+  Sunday: {
+    12: {
+      'Camp ground': {
+        event: 'Tearing down',
+        description: 'Clearing up the camp grounds.',
+      },
+      /* other events */
+    },
+    14: {
+      'Lunch table': {
+        event: 'Coffee',
+        description: "Let's have a last coffee before traveling home again.",
+      },
+      /* other events */
+    },
+    /* other times */
+  },
+  /* other days */
+};
diff --git a/timetable/index.html b/timetable/index.html
new file mode 100644
index 0000000..e320d35
--- /dev/null
+++ b/timetable/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Event Timetable</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div id="landscape-message">
+        <br><br>
+        <h1>FediCamp 2024 TimeTable</h1>
+        <img src="https://fedi.camp/images/fedicamp-logo2024.png" alt="FediCamp Logo" id="logo" />
+        <h2>Please Rotate Your Device</h2>
+        <p>For the best viewing experience, please switch to landscape mode.</p>
+
+    </div>
+
+    <div id="timetable">
+        <h1 id="headline">FediCamp 2024</h1>
+        <h2 id="subheadline">Time Table</h2>
+
+        <div id="slider-container">
+            <input type="range" min="0" max="4" value="0" id="slider" />
+            <div id="slider-day"></div>
+            <p id="slider-text">Slide to view other days</p>
+        </div>
+
+        <div id="tables-container"></div>
+    </div>
+
+    <div id="overlay"></div>
+
+    <script src="eventData.js"></script>
+    <script src="scripts.js"></script>
+</body>
+</html>
diff --git a/timetable/scripts.js b/timetable/scripts.js
new file mode 100644
index 0000000..d3f91ab
--- /dev/null
+++ b/timetable/scripts.js
@@ -0,0 +1,97 @@
+/*KABI Fancy Media and Communication */
+
+const locations = ['Camp ground', 'Fire place', 'Lunch table', 'Stage room', 'Mobile'];
+const days = ['Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+
+function generateDayTable(day, events) {
+    let table = `<table id="${day}" class="day-table"><tr><th>Time</th>`;
+
+    for (let location of locations) {
+        table += `<th>${location}</th>`;
+    }
+
+    table += '</tr>';
+
+    for (let hour = 10; hour <= 20; hour += 2) {
+        table += '<tr><td>' + (hour < 10 ? '0' + hour : hour) + ':00' + '</td>';
+        for (let location of locations) {
+            // Check if there is an event at this location and time
+            let event = events[day] && events[day][hour] && events[day][hour][location] ? events[day][hour][location] : '';
+            table += '<td>';
+            if (event) {
+                table += `<button class="event-button" data-day="${day}" data-hour="${hour}" data-location="${location}">${event.event}</button>`;
+            }
+            table += '</td>';
+        }
+        table += '</tr>';
+    }
+
+    table += '</table>';
+
+    return table;
+}
+
+// Doing the overlay shit
+function showDescription(day, hour, location) {
+    
+    let event = eventData[day][hour][location];
+    let description = event.description;
+
+    let overlay = document.getElementById('overlay');
+    overlay.style.display = 'block';
+
+    let content = document.createElement('div');
+    content.id = 'overlay-content';
+
+    let descriptionElement = document.createElement('p');
+    descriptionElement.innerText = description;
+
+    let closeButton = document.createElement('button');
+    closeButton.innerText = 'Close';
+    closeButton.addEventListener('click', hideOverlay);
+
+    content.appendChild(descriptionElement);
+    content.appendChild(closeButton);
+    overlay.appendChild(content);
+}
+
+
+function hideOverlay() {
+    let overlay = document.getElementById('overlay');
+    overlay.style.display = 'none';
+    overlay.innerHTML = '';
+}
+
+document.addEventListener('DOMContentLoaded', (event) => {
+    let tablesContainer = document.getElementById('tables-container');
+    for (let day of days) {
+        tablesContainer.innerHTML += generateDayTable(day, eventData);
+    }
+
+    let slider = document.getElementById('slider');
+    let sliderDay = document.getElementById('slider-day');
+
+    slider.addEventListener('input', (event) => {
+        for (let day of days) {
+            document.getElementById(day).style.display = 'none';
+        }
+
+        document.getElementById(days[event.target.value]).style.display = 'table';
+
+
+        sliderDay.innerText = days[event.target.value];
+    });
+
+
+    tablesContainer.addEventListener('click', (event) => {
+        if (event.target.matches('.event-button')) {
+            let day = event.target.getAttribute('data-day');
+            let hour = event.target.getAttribute('data-hour');
+            let location = event.target.getAttribute('data-location');
+            showDescription(day, hour, location);
+        }
+    });
+
+    // show the first table initially
+    slider.dispatchEvent(new Event('input'));
+});
diff --git a/timetable/styles.css b/timetable/styles.css
new file mode 100644
index 0000000..fa21f31
--- /dev/null
+++ b/timetable/styles.css
@@ -0,0 +1,207 @@
+body {
+    background-color: #F6F6F6;
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+}
+
+#landscape-message {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+#logo {
+    max-width: 100%;
+    height: auto;
+    margin-bottom: 20px;
+}
+
+#landscape-message h1 {
+    margin-top: 0;
+}
+
+#landscape-message p {
+    margin: 10px 0;
+}
+
+#timetable {
+    display: none;
+}
+
+@media (orientation: landscape) {
+    #landscape-message {
+        display: none;
+    }
+
+    #timetable {
+        display: block;
+    }
+}
+
+@media (max-height: 600px) {
+    #headline {
+        margin-top: 40px;
+    }
+}
+
+@media (max-height: 400px) {
+    #headline {
+        margin-top: 20px;
+    }
+}
+
+#timetable {
+    width: 90%;
+    margin: 0 auto;
+}
+
+#headline,
+#subheadline {
+    text-align: center;
+    color: #444;
+    margin-top: 40px;
+}
+
+#slider-container {
+    width: 60%;
+    margin: 20px auto;
+    text-align: center;
+    position: relative;
+    height: 50px;
+}
+
+#slider-text {
+    color: #444;
+    font-size: 0.8em;
+}
+
+#slider {
+    display: block;
+    width: 100%;
+    margin: 20px 0;
+    appearance: none;
+    background: #D3D3D3;
+    outline: none;
+    height: 30px;
+    border-radius: 20px;
+}
+
+#slider::-webkit-slider-thumb {
+    appearance: none;
+    width: 30px;
+    height: 30px;
+    background: #0066CC;
+    cursor: pointer;
+    border-radius: 50%;
+}
+
+#slider-day {
+    position: absolute;
+    width: 100%;
+    height: 50px;
+    top: 0;
+    left: 0;
+    background: transparent;
+    color: #000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: none;
+    pointer-events: none;
+    font-size: 1.2em;
+    margin-top: -7px;
+}
+
+.day-table {
+    width: 100%;
+    border-collapse: collapse;
+    display: none;
+    margin-bottom: 20px;
+    table-layout: fixed;
+}
+
+.day-table th,
+.day-table td {
+    border: 1px solid #FFFFFF;
+    padding: 10px;
+    text-align: center;
+    background-color: #ADD8E6;
+    height: 60px;
+    word-break: break-word;
+    width: 20%;
+}
+
+.day-table th {
+    background-color: #ddd;
+    color: #444;
+    text-transform: uppercase;
+}
+
+.event-button {
+    background: none;
+    color: inherit;
+    border: none;
+    padding: 0;
+    font: inherit;
+    cursor: pointer;
+    outline: inherit;
+}
+
+#overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: none;
+    z-index: 999;
+}
+
+#overlay-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 5px;
+    text-align: center;
+}
+
+#overlay-content p {
+    margin-bottom: 10px;
+}
+
+#overlay-content button {
+    padding: 10px 20px;
+    background-color: #0066CC;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+@media (max-width: 600px) {
+    #slider-container {
+        width: 90%;
+    }
+
+    .day-table,
+    .day-table th,
+    .day-table td {
+        font-size: 0.8em;
+    }
+
+    .day-table td {
+        height: auto;
+    }
+}