Move resources and control music

Public/festival/assets/festival-info.css

@@ -0,0 +1,59 @@
+
+.list-title {
+    font-size: 56px;
+    color: white;
+    top: 20px;
+    left: 5%;
+    width: 90%;
+    position: relative;
+}
+
+.selector-box {
+    position: relative;
+    width: 90%;
+    left: 5%;
+    top: 20px;
+    bottom: 20px;
+    height: 60px;
+}
+
+.selector-button {
+    position: absolute;
+    padding: 10px 0px;
+    border: thin solid rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.1);
+    text-align: center;
+    color: white;
+    top: 0%;
+    width: 33%;
+    margin: 0;
+    margin-top: 10px;
+    
+}
+
+.left-button {
+    left: 0%;
+    border-radius: 15px 0px 0px 15px;
+}
+
+.middle-button {
+    left: 33%;
+}
+
+.right-button {
+    left: 66%;
+    border-radius: 0px 15px 15px 0px;
+}
+
+
+.member-list {
+    font-size: 24px;
+    color: white;
+    top: 80px;
+    left: 5%;
+    position: absolute;
+    width: 90%;
+    bottom: 15px;
+    overflow-y: auto;
+  }
+  

Public/festival/assets/festival-info.js

@@ -0,0 +1,33 @@
+function loadList(name, source) {
+
+    document.getElementById("left-button").style.backgroundColor = 'rgba(255, 255, 255, 0.1)'
+    document.getElementById("middle-button").style.backgroundColor = 'rgba(255, 255, 255, 0.1)'
+    document.getElementById("right-button").style.backgroundColor = 'rgba(255, 255, 255, 0.1)'
+    source.style.backgroundColor = 'rgba(255, 255, 255, 0.3)'
+
+    var txtFile = new XMLHttpRequest();
+    var allText = "Liste nicht geladen";
+    txtFile.onreadystatechange = function () {
+        if (txtFile.readyState === XMLHttpRequest.DONE && txtFile.status == 200) {
+            allText = txtFile.responseText.split("\n").join("<br>");
+        }
+        document.getElementById("remote-content").innerHTML = allText;
+    }
+    var list = '/festival/lists/' + name;
+    txtFile.open("GET", list, true);
+    txtFile.send(null);
+}
+
+function loadCount() {
+    var txtFile = new XMLHttpRequest();
+    var allText = "";
+    txtFile.onreadystatechange = function () {
+        if (txtFile.readyState === XMLHttpRequest.DONE && txtFile.status == 200) {
+            allText = txtFile.responseText;
+        }
+        document.getElementById("left-button").innerHTML = "Registered (" + allText + ")";
+    }
+    var list = '/festival/api/count' + name;
+    txtFile.open("GET", list, true);
+    txtFile.send(null);
+}

Public/festival/assets/festival.js

@@ -0,0 +1,89 @@
+var isPlaying = false;
+
+function showRegisterForm() {
+    document.getElementById("text-container").style.top = '2%'
+    document.getElementById("register-button").style.opacity = 0
+    document.getElementById("participation-buttons").style.display = 'inline-block'
+    document.getElementById("name-form").style.display = 'inherit'
+    document.getElementById("add-calender-event").style.display = 'none'
+    document.getElementById("guest-name").focus()
+    if (!isPlaying) {
+        playPause();
+    }
+}
+
+function playPause() {
+    var audio = document.getElementById("audio");
+    var playButton = document.getElementById("play-button");
+    var pauseButton = document.getElementById("pause-button");
+    var playText = document.getElementById("playing-text");
+    var pauseText = document.getElementById("paused-text");
+    if (isPlaying) {
+        audio.pause();
+        playButton.style.display = "inherit";
+        pauseButton.style.display = "none";
+        playText.style.display = "none";
+        pauseText.style.display = "table-cell";
+    } else {
+        audio.play();
+        playButton.style.display = "none";
+        pauseButton.style.display = "inherit";
+        playText.style.display = "table-cell";
+        pauseText.style.display = "none";
+    }
+    isPlaying = !isPlaying;
+}
+
+async function participate(isParticipating) {
+    let value = document.getElementById("guest-name").value
+    if (!value) {
+        return
+    }
+    let name = value.trim()
+    document.getElementById("participation-buttons").style.display = 'none'
+    document.getElementById("name-form").style.display = 'none'
+    console.log("Registering: " + name);
+    if (isParticipating) {
+        let registered = await performRequest(name, "register")
+        if (registered) {
+            document.getElementById("registered-text").style.display = 'inherit'
+            document.getElementById("add-calender-event").style.display = 'inherit'
+        } else {
+            document.getElementById("error-text").style.display = 'inherit'
+        }
+    } else {
+        let declined = await performRequest(name, "decline")
+        if (declined) {
+            document.getElementById("declined-text").style.display = 'inherit'
+        } else {
+            document.getElementById("error-text").style.display = 'inherit'
+        }
+    }
+}
+
+function handleErrors(response) {
+    if (!response.ok) throw new Error(response.status);
+    return response.text();
+}
+
+function catchErrors(error) {
+    console.log(error);
+    return "Failed";
+}
+
+async function performRequest(name, path) {
+    let text = await fetch("/festival/api/" + path, {
+        method: 'POST',
+        body: name
+    }).then(handleErrors).catch(catchErrors);
+    if (text == "Success") {
+        console.log("Registered: " + name);
+        return true;
+    }
+    console.log("Failed to register: " + text);
+    return false;
+}
+
+function download(file) {
+    window.location = file
+}

Public/festival/assets/festival.scss

@@ -0,0 +1,262 @@
+html {
+  font-family: -apple-system, BlinkMacSystemFont, "SF Hello", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
+  font-weight: 200;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: #2D212D;
+}
+
+.wrapper {
+  padding: 0; margin: 0;
+  min-height: 100%;
+  background: linear-gradient(160deg, #784141, #271c27);
+}
+
+.texts {
+  padding: 5%;
+  width: 90%;
+  color: white;
+  display: -ms-grid;
+  display: grid;
+  row-gap: 10px;
+  -webkit-column-gap: 0px;
+  column-gap: 0px;
+  grid-template-columns: 100%;
+  justify-items: center;
+  position: absolute;
+  top: 20%;
+  -webkit-transition-duration: 500ms;
+  transition-duration: 500ms;
+}
+
+.title-text {
+  font-size: 144px;
+  -ms-grid-row: 1;
+  grid-row: 1;
+}
+
+.normal-text {
+  font-size: 56px;
+  -ms-grid-column: 1;
+  grid-column: 1;
+  font-weight: 100;
+}
+
+.date-text {
+  -ms-grid-row: 2;
+  grid-row: 2;
+}
+
+.location-text {
+  -ms-grid-row: 3;
+  grid-row: 3;
+}
+
+.site-title {
+  font-size: 56px;
+  color: white;
+  top: 20px;
+  left: 5%;
+  width: 90%;
+  position: absolute;
+}
+
+.button {
+  padding: 10px 40px;
+  border: thin solid rgba(255, 255, 255, 0.2);
+  border-radius: 15px;
+  background: rgba(255, 255, 255, 0.1);
+  min-width: 100px;
+  text-align: center;
+}
+
+.half-button {
+  padding: 10px 20px;
+  min-width: 80px;
+}
+
+.button:hover {
+  border: thin solid rgba(255, 255, 255, 0.4);
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.register-button {
+  -ms-grid-row: 4;
+  grid-row: 4;
+  margin-top: 20px;
+  -webkit-transition-duration: 300ms;
+  transition-duration: 300ms;
+}
+
+.participation-buttons {
+  -ms-grid-row: 5;
+  grid-row: 5;
+  -ms-grid-column: 1;
+  grid-column: 1;
+  display: none;
+}
+
+.not-participate-button {
+  margin-right: 10px;
+}
+
+.participate-button {
+  margin-left: 10px;
+}
+
+.name-form {
+  -ms-grid-row: 4;
+  grid-row: 4;
+  -ms-grid-column: 1;
+  grid-column: 1;
+  margin-top: 20px;
+  display: none;
+}
+
+input[type=text] {
+  background-color: rgba(255, 255, 255, 0.3);
+  font-size: 56px;
+  color: white;
+  border: thin solid rgba(255, 255, 255, 0.2);
+  border-radius: 15px;
+  padding: 10px 10px;
+  font-family: -apple-system, BlinkMacSystemFont, "SF Hello", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
+  font-weight: 100;
+}
+
+::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+  color: rgb(211, 211, 211);
+  opacity: 1; /* Firefox */
+}
+
+:-ms-input-placeholder { /* Internet Explorer 10-11 */
+  color: rgb(211, 211, 211);
+}
+
+::-ms-input-placeholder { /* Microsoft Edge */
+  color: rgb(211, 211, 211);
+}
+
+.final-text {
+  -ms-grid-row: 4;
+  grid-row: 4;
+  margin: 40px 0;
+}
+
+.registered-text {
+  display: none;
+}
+
+.declined-text {
+  display: none;
+}
+
+.error-text {
+  display: none;
+}
+
+.add-calender-event {
+  -ms-grid-row: 5;
+  grid-row: 5;
+}
+
+@media only screen and (max-width: 800px) {
+  .title-text {
+    font-size: 18vw;
+  }
+  .normal-text {
+    font-size: 7vw;
+  }
+  input[type=text] {
+    font-size: 7vw;
+  }
+}
+
+@media only screen and (min-aspect-ratio: 1/1) {
+  .title-text {
+    font-size: 12vh;
+  }
+  .normal-text {
+    font-size: 4vh;
+  }
+  input[type=text] {
+    font-size: 4vh;
+  }
+}
+
+@keyframes blinkOff {
+  from { opacity: 1.0; }
+  to   { opacity: 0.0; }
+}
+
+@keyframes blinkOn {
+  from { opacity: 0.0; }
+  to   { opacity: 1.0; }
+}
+
+.bokeh {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  overflow: hidden;
+}
+
+$bokehCount: 50;
+$bokehBaseSize: 5rem;
+$bokehBaseDuration: 0.6s;
+$colorSet: (
+#f8f2e7,
+#e0c5a5,
+#ffe0a9,
+#ebe1b2,
+rgb(255, 255, 217),
+rgb(222, 208, 162),
+rgb(230, 185, 123),
+);
+.bokeh div {
+  position: absolute;
+  overflow: hidden;
+  border-radius: 50%;
+  animation-direction: alternate;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+
+  @for $i from 1 through $bokehCount {
+    $childSize: random(12) * 0.4rem + $bokehBaseSize;
+    $childLeft: random(120) * 1% - 20%;
+    $childColor: nth($colorSet, random(length($colorSet)));
+    $childDuration: $bokehBaseDuration + random(100) * 0.01s;
+
+    $childDown: (random(250) * 0.1rem);
+    $cFirstOpacity:  0.3 + random(20) * 0.01;
+    $cSecondOpacity: 0.2 + random(20) * 0.01;
+    $cFirstBlur:  0.1rem + random(10) * 0.1rem;
+    $cSecondBlur: 0.6rem + random(20) * 0.1rem;
+    &:nth-child(#{(2*$i)-1}) {
+      width: $childSize;
+      height: $childSize;
+      top: -$childSize;
+      left: $childLeft;
+      color: rgba($childColor, $cFirstOpacity);
+      box-shadow: 0 $childDown $cFirstBlur currentColor;
+      animation-duration: $childDuration;
+      animation-name: blinkOn;
+    }
+    &:nth-child(#{2*$i}) {
+      width: $childSize;
+      height: $childSize;
+      top: -$childSize;
+      left: $childLeft;
+      color: rgba($childColor, $cSecondOpacity);
+      box-shadow: 0 $childDown $cSecondBlur currentColor;
+      animation-duration: $childDuration;
+      animation-name: blinkOff;
+    }
+  }
+}

Public/festival/assets/pause.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 271.95 271.95" style="enable-background:new 0 0 271.953 271.953" xml:space="preserve"><g fill="#fff"><path d="M135.98 271.95c75.1 0 135.97-60.88 135.97-135.97S211.07 0 135.98 0 0 60.88 0 135.98s60.88 135.97 135.98 135.97zm0-250.2c62.98 0 114.22 51.25 114.22 114.23S198.96 250.2 135.98 250.2 21.76 198.96 21.76 135.98 72.99 21.76 135.98 21.76z"/><path d="M110.7 200.11a13.6 13.6 0 0 0 13.6-13.6V83.18a13.6 13.6 0 1 0-27.2 0v103.35a13.6 13.6 0 0 0 13.6 13.6zM165.1 200.11a13.6 13.6 0 0 0 13.6-13.6V83.18a13.6 13.6 0 1 0-27.2 0v103.35a13.6 13.6 0 0 0 13.6 13.6z"/></g></svg>

Public/festival/assets/play.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 485 485" style="enable-background:new 0 0 485 485" xml:space="preserve"><g fill="#fff"><path d="M414 71C368.2 25.2 307.3 0 242.5 0S116.8 25.2 71 71 0 177.7 0 242.5 25.2 368.2 71 414s106.7 71 171.5 71 125.7-25.2 171.5-71 71-106.7 71-171.5S459.8 116.8 414 71zM242.5 455C125.3 455 30 359.7 30 242.5S125.3 30 242.5 30 455 125.3 455 242.5 359.7 455 242.5 455z"/><path d="m181.1 336.6 162.8-94.1-162.8-94.1z"/></g></svg>

Public/festival/festival-en.html

@@ -0,0 +1,70 @@
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width initial-scale=1" />
+    <!-- Prevent search engine indexing -->
+    <meta name="robots" content="noindex" />
+    
+    <link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" type="image/vnd.microsoft.icon" href="/icons/festival.ico" />
+    <link rel="apple-touch-icon" href="/icons/festival.png" />
+    <link rel="icon" href="/icons/festival.png">
+    
+    <title>CC Festival</title>
+    <meta name="author" content="Christoph Hagen & Charlotte Strohofer" />
+    <meta property="og:title" content="CC Festival" />
+    <meta property="og:description" content="Presented by Charlotte & Christoph">
+    <link rel="canonical" href="https://christophhagen.de/festival-en.html" />
+    
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+    <link rel="stylesheet" type="text/css" href="assets/festival.css">
+    <script src="assets/festival.js?v=9"></script>
+</head>
+<body>
+    <div class="wrapper">
+        <div class="bokeh">
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+        </div>
+        <div class="texts" id="text-container">
+            <div class="title-text">CC Festival</div>
+            <div class="date-text normal-text">30 July 2022&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;2 pm</div>
+            <div class="location-text normal-text">Geiselwind, Germany</div>
+            <div class="register-button button normal-text" id="register-button" onclick="showRegisterForm()">Register</div>
+            <form class="name-form" id="name-form">
+                <input type="text" id="guest-name" name="fname" placeholder="Enter your name">
+            </form>
+            <div class="participation-buttons" id="participation-buttons">
+                <span class="not-participate-button button half-button normal-text" id="not-participate-button" onclick="participate(false)">Decline</span>
+                <span class="participate-button button half-button normal-text" id="participate-button" onclick="participate(true)">Register</span>
+            </div>
+            <div class="error-text normal-text final-text" id="error-text">Registration failed</div>
+            <div class="registered-text normal-text final-text" id="registered-text">Registration successful</div>
+            <div class="declined-text normal-text final-text" id="declined-text">Invitation declined</div>
+            <div class="add-calender-event button normal-text" id="add-calender-event" onclick="download('/festival/festival-en.ics')">Add to calendar</div>
+        </div>
+        <audio loop autoplay id="audio">
+            <source src="/festival/since77.mp3" type="audio/mp3">
+        </audio>
+        <div class="music-control" onclick="playPause()">
+            <img src="assets/play.svg" class="player-icon" id="play-button"/>
+            <img src="assets/pause.svg" class="player-icon" id="pause-button"/>
+            <div class="player-text" id="playing-text">Paul Kalkbrenner - Since 77</div>
+            <div class="player-text" id="paused-text">Play music</div>
+        </div>
+    </div>
+</body>
+</html>

Public/festival/festival-en.ics

@@ -0,0 +1,35 @@
+BEGIN:VCALENDAR
+VERSION:2.0
+PRODID:-//christophhagen.de
+CALSCALE:GREGORIAN
+BEGIN:VTIMEZONE
+TZID:Europe/Berlin
+LAST-MODIFIED:20201011T015911Z
+TZURL:http://tzurl.org/zoneinfo-outlook/Europe/Berlin
+X-LIC-LOCATION:Europe/Berlin
+BEGIN:DAYLIGHT
+TZNAME:CEST
+TZOFFSETFROM:+0100
+TZOFFSETTO:+0200
+DTSTART:19700329T020000
+RRULE:FREQ=YEARLY;BYMONTH=3;BYDAY=-1SU
+END:DAYLIGHT
+BEGIN:STANDARD
+TZNAME:CET
+TZOFFSETFROM:+0200
+TZOFFSETTO:+0100
+DTSTART:19701025T030000
+RRULE:FREQ=YEARLY;BYMONTH=10;BYDAY=-1SU
+END:STANDARD
+END:VTIMEZONE
+BEGIN:VEVENT
+DTSTAMP:20211002T121707Z
+UID:20211002T121707Z-230813577@christophhagen.de
+DTSTART;TZID=Europe/Berlin:20220730T140000
+DTEND;TZID=Europe/Berlin:20220731T120000
+SUMMARY:CC Festival
+URL:https://christophhagen.de/festival-en
+DESCRIPTION:A summer party
+LOCATION:Scheinfelder Straße 10\, 96160 Geiselwind, Germany
+END:VEVENT
+END:VCALENDAR

Public/festival/festival-info.html

@@ -0,0 +1,55 @@
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width initial-scale=1" />
+    <!-- Prevent search engine indexing -->
+    <meta name="robots" content="noindex" />
+    
+    <link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" type="image/vnd.microsoft.icon" href="/icons/festival.ico" />
+    <link rel="apple-touch-icon" href="/icons/festival.png" />
+    <link rel="icon" href="/icons/festival.png">
+    
+    <title>CC Festival</title>
+    <meta name="author" content="Christoph Hagen & Charlotte Strohofer" />
+    <meta property="og:title" content="CC Festival: Übersicht" />
+    <meta property="og:description" content="Ereignisse und Rückmeldungen">
+    <link rel="canonical" href="https://christophhagen.de/events.html" />
+    
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+    <link rel="stylesheet" type="text/css" href="assets/festival.css">
+    <link rel="stylesheet" type="text/css" href="assets/festival-info.css">
+    <script src="assets/festival.js?v=9"></script>
+    <script src="assets/festival-info.js?v=1"></script>
+</head>
+<body>
+    <div class="wrapper">
+        <div class="bokeh">
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+        </div>
+        <!-- <div class="list-title" id="title">Events</div> -->
+        <div class="selector-box">
+            <span class="left-button selector-button" id='left-button' onclick="loadList('registered.txt', this)">Registriert</span>
+            <span class="middle-button selector-button" id='middle-button' onclick="loadList('declined.txt', this)">Abgelehnt</span>
+            <span class="right-button selector-button" id='right-button' onclick="loadList('events.txt', this)">Ereignisse</span>
+        </div>
+        <div class="member-list" id="remote-content">Liste nicht geladen</div>
+        <script>loadList('registered.txt', document.getElementById('left-button'))</script>
+        <script>loadCount()</script>
+    </div>
+</body>
+</html>

Public/festival/festival.html

@@ -0,0 +1,70 @@
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width initial-scale=1" />
+    <!-- Prevent search engine indexing -->
+    <meta name="robots" content="noindex" />
+    
+    <link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" type="image/vnd.microsoft.icon" href="/icons/festival.ico" />
+    <link rel="apple-touch-icon" href="/icons/festival.png" />
+    <link rel="icon" href="/icons/festival.png">
+    
+    <title>CC Festival</title>
+    <meta name="author" content="Christoph Hagen & Charlotte Strohofer" />
+    <meta property="og:title" content="CC Festival" />
+    <meta property="og:description" content="Presented by Charlotte & Christoph">
+    <link rel="canonical" href="https://christophhagen.de/festival.html" />
+    
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+    <link rel="stylesheet" type="text/css" href="assets/festival.css">
+    <script src="assets/festival.js?v=9"></script>
+</head>
+<body>
+    <div class="wrapper">
+        <div class="bokeh">
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+            <div></div> <div></div> <div></div> <div></div> <div></div>
+        </div>
+        <div class="texts" id="text-container">
+            <div class="title-text">CC Festival</div>
+            <div class="date-text normal-text">30.Juli 2022&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;14:00 Uhr</div>
+            <div class="location-text normal-text">Geiselwind</div>
+            <div class="register-button button normal-text" id="register-button" onclick="showRegisterForm()">Registrieren</div>
+            <form class="name-form" id="name-form">
+                <input type="text" id="guest-name" name="fname" placeholder="Namen eingeben">
+            </form>
+            <div class="participation-buttons" id="participation-buttons">
+                <span class="not-participate-button button half-button normal-text" id="not-participate-button" onclick="participate(false)">Ablehnen</span>
+                <span class="participate-button button half-button normal-text" id="participate-button" onclick="participate(true)">Zusagen</span>
+            </div>
+            <div class="error-text normal-text final-text" id="error-text">Registrierung fehlgeschlagen</div>
+            <div class="registered-text normal-text final-text" id="registered-text">Registrierung erfolgreich</div>
+            <div class="declined-text normal-text final-text" id="declined-text">Einladung abgelehnt</div>
+            <div class="add-calender-event button normal-text" id="add-calender-event" onclick="download('/festival/festival.ics')">Kalendereintrag</div>
+        </div>
+        <audio loop autoplay id="audio">
+            <source src="/festival/since77.mp3" type="audio/mp3">
+        </audio>
+        <div class="music-control" onclick="playPause()">
+            <img src="assets/play.svg" class="player-icon" id="play-button"/>
+            <img src="assets/pause.svg" class="player-icon" id="pause-button"/>
+            <div class="player-text" id="playing-text">Paul Kalkbrenner - Since 77</div>
+            <div class="player-text" id="paused-text">Musik starten</div>
+        </div>
+    </div>
+</body>
+</html>

Public/festival/festival.ics

@@ -0,0 +1,35 @@
+BEGIN:VCALENDAR
+VERSION:2.0
+PRODID:-//christophhagen.de
+CALSCALE:GREGORIAN
+BEGIN:VTIMEZONE
+TZID:Europe/Berlin
+LAST-MODIFIED:20201011T015911Z
+TZURL:http://tzurl.org/zoneinfo-outlook/Europe/Berlin
+X-LIC-LOCATION:Europe/Berlin
+BEGIN:DAYLIGHT
+TZNAME:CEST
+TZOFFSETFROM:+0100
+TZOFFSETTO:+0200
+DTSTART:19700329T020000
+RRULE:FREQ=YEARLY;BYMONTH=3;BYDAY=-1SU
+END:DAYLIGHT
+BEGIN:STANDARD
+TZNAME:CET
+TZOFFSETFROM:+0200
+TZOFFSETTO:+0100
+DTSTART:19701025T030000
+RRULE:FREQ=YEARLY;BYMONTH=10;BYDAY=-1SU
+END:STANDARD
+END:VTIMEZONE
+BEGIN:VEVENT
+DTSTAMP:20211002T121707Z
+UID:20211002T121707Z-230813577@christophhagen.de
+DTSTART;TZID=Europe/Berlin:20220730T140000
+DTEND;TZID=Europe/Berlin:20220731T120000
+SUMMARY:CC Festival
+URL:https://christophhagen.de/festival
+DESCRIPTION:A summer party
+LOCATION:Scheinfelder Straße 10\, 96160 Geiselwind
+END:VEVENT
+END:VCALENDAR