Add festival website frontend

Public/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: 20px;
+    left: 5%;
+    position: relative;
+    width: 90%;
+    height: 75%;
+    overflow-y: auto;
+  }
+  

Public/assets/festival-info.js

@@ -0,0 +1,19 @@
+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 = '/lists/' + name;
+    txtFile.open("GET", list, true);
+    txtFile.send(null);
+}

Public/assets/festival.js

@@ -0,0 +1,64 @@
+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()
+    var audio = document.getElementById("audio");
+    audio.play();
+}
+
+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 downloadEvent(file) {
+    window.location= "files/" + file
+}

Public/assets/festival.scss

@@ -0,0 +1,274 @@
+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;
+}
+
+.member-list {
+  font-size: 24px;
+  color: white;
+  top: 20%;
+  left: 5%;
+  position: absolute;
+  width: 90%;
+  height: 75%;
+  overflow-y: auto;
+}
+
+.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;
+  display: none;
+}
+
+@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-en.html

@@ -0,0 +1,128 @@
+<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=8"></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="downloadEvent('festival-en.ics')">Add to calendar</div>
+        </div>
+        <audio loop autoplay id="audio">
+            <source src="audio/since77.mp3" type="audio/mp3">
+        </audio>
+    </div>
+</body>
+</html>

Public/festival.html

@@ -0,0 +1,128 @@
+<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=8"></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="downloadEvent('festival.ics')">Kalendereintrag</div>
+        </div>
+        <audio loop autoplay id="audio">
+            <source src="audio/since77.mp3" type="audio/mp3">
+        </audio>
+    </div>
+</body>
+</html>

Public/info.html

@@ -0,0 +1,54 @@
+<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=0"></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>
+    </div>
+</body>
+</html>