Move resources and control music

Public/festival/assets/festival.css

@@ -193,6 +193,37 @@ input[type=text] {
   grid-row: 5;
 }
 
+.music-control {
+    position: absolute;
+    bottom: 15px;
+    left: 15px;
+    height: 30px;
+    display: table;
+    line-height: 30px;
+    text-align: center;
+    cursor: pointer;
+}
+
+.player-icon {
+    height: 20px;
+    padding-top: 5px;
+}
+
+.player-text {
+    color: #fff;
+    display: table-cell;
+    vertical-align: middle;
+    padding-left: 5px;
+}
+
+#pause-button {
+    display: none;
+}
+
+#playing-text {
+    display: none;
+}
+
 @media only screen and (max-width: 800px) {
   .title-text {
     font-size: 18vw;

Public/festival/assets/festival.js

@@ -1,3 +1,5 @@
+var isPlaying = false;
+
 function showRegisterForm() {
     document.getElementById("text-container").style.top = '2%'
     document.getElementById("register-button").style.opacity = 0
@@ -5,8 +7,31 @@ function showRegisterForm() {
     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) {

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

@@ -59,6 +59,12 @@
         <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.html

@@ -59,6 +59,12 @@
         <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>

local-server.sh

@@ -0,0 +1 @@
+python3 -m http.server -d Public