Move resources and control music

This commit is contained in:
Christoph Hagen 2022-03-26 09:55:22 +01:00
parent f9ecf8d5eb
commit 46af836c01
17 changed files with 73 additions and 2 deletions

View File

@ -193,6 +193,37 @@ input[type=text] {
grid-row: 5; 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) { @media only screen and (max-width: 800px) {
.title-text { .title-text {
font-size: 18vw; font-size: 18vw;

View File

@ -1,3 +1,5 @@
var isPlaying = false;
function showRegisterForm() { function showRegisterForm() {
document.getElementById("text-container").style.top = '2%' document.getElementById("text-container").style.top = '2%'
document.getElementById("register-button").style.opacity = 0 document.getElementById("register-button").style.opacity = 0
@ -5,8 +7,31 @@ function showRegisterForm() {
document.getElementById("name-form").style.display = 'inherit' document.getElementById("name-form").style.display = 'inherit'
document.getElementById("add-calender-event").style.display = 'none' document.getElementById("add-calender-event").style.display = 'none'
document.getElementById("guest-name").focus() document.getElementById("guest-name").focus()
if (!isPlaying) {
playPause();
}
}
function playPause() {
var audio = document.getElementById("audio"); var audio = document.getElementById("audio");
audio.play(); 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) { async function participate(isParticipating) {

View File

@ -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>

After

Width:  |  Height:  |  Size: 624 B

View File

@ -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>

After

Width:  |  Height:  |  Size: 467 B

View File

@ -59,6 +59,12 @@
<audio loop autoplay id="audio"> <audio loop autoplay id="audio">
<source src="/festival/since77.mp3" type="audio/mp3"> <source src="/festival/since77.mp3" type="audio/mp3">
</audio> </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> </div>
</body> </body>
</html> </html>

View File

@ -59,6 +59,12 @@
<audio loop autoplay id="audio"> <audio loop autoplay id="audio">
<source src="/festival/since77.mp3" type="audio/mp3"> <source src="/festival/since77.mp3" type="audio/mp3">
</audio> </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> </div>
</body> </body>
</html> </html>

View File

Before

Width:  |  Height:  |  Size: 75 KiB

After

Width:  |  Height:  |  Size: 75 KiB

View File

Before

Width:  |  Height:  |  Size: 95 KiB

After

Width:  |  Height:  |  Size: 95 KiB

1
local-server.sh Executable file
View File

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