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>