Move resources and control music
This commit is contained in:
parent
f9ecf8d5eb
commit
46af836c01
@ -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;
|
@ -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");
|
||||
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) {
|
1
Public/festival/assets/pause.svg
Normal file
1
Public/festival/assets/pause.svg
Normal 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 |
1
Public/festival/assets/play.svg
Normal file
1
Public/festival/assets/play.svg
Normal 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 |
@ -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>
|
@ -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>
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 75 KiB |
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 95 KiB |
1
local-server.sh
Executable file
1
local-server.sh
Executable file
@ -0,0 +1 @@
|
||||
python3 -m http.server -d Public
|
Loading…
Reference in New Issue
Block a user