Move resources and control music
This commit is contained in:
parent
f9ecf8d5eb
commit
46af836c01
@ -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;
|
||||||
@ -1671,4 +1702,4 @@ input[type=text] {
|
|||||||
-webkit-animation-name: blinkOff;
|
-webkit-animation-name: blinkOff;
|
||||||
animation-name: blinkOff;
|
animation-name: blinkOff;
|
||||||
}
|
}
|
||||||
/*# sourceMappingURL=festival.css.map */
|
/*# sourceMappingURL=festival.css.map */
|
@ -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) {
|
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">
|
<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>
|
@ -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>
|
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