115 lines
3.7 KiB
HTML
115 lines
3.7 KiB
HTML
---
|
|
layout: default
|
|
---
|
|
{% include relBase.html %}
|
|
{% include navmenu.html %}
|
|
<div id="player">
|
|
<div id="info">
|
|
<div id="controls">
|
|
<div class="container">
|
|
<button id="mu_pause">Play</button><br /><br />
|
|
{% if page.previous != nil %}
|
|
<a href="{{ relBase }}{{ page.previous.url }}" title="Previous Track"> <img
|
|
src="{{ relBase }}/assets/img/icons/rewind.svg" title="Previous Track" /> </a>
|
|
{% endif %}
|
|
<a id="download" title="Download This Track!" href="{{ page.mp3 }}"> <img
|
|
src="{{ relBase }}/assets/img/icons/download.svg" title="Download Track" /> </a>
|
|
{% if page.next != nil %}
|
|
<a href="{{ relBase }}{{ page.next.url }}" title="Next Track"> <img
|
|
src="{{ relBase }}/assets/img/icons/fastforward.svg" title="Next Track" /> </a>{% endif %}
|
|
<br /><br />{% include liberapay.html %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="trackcontainer">
|
|
|
|
<h1>{{ page.title }}</h1>
|
|
<p style="margin-bottom: 0px;">{% for c in page.categories %}{{ c }}{% unless forloop.last %} | {% endunless %}{% endfor %}<br />{{ page.date | date: '%Y - %B' }}
|
|
|
|
<br />
|
|
<span id="tracktime" style="font-weight: normal;"> </span></p>
|
|
{% include cookiemonster.html %}
|
|
</div>
|
|
|
|
<div id="timer">
|
|
{{ page.content }}
|
|
<img src="{{ page.image }}" alt="cover art for {{ page.title }}" width="100%" />
|
|
</div>
|
|
</div>
|
|
<audio data-matomo-title="{{ page.title }}" preload="true" autoplay="true"
|
|
ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime) + ' / ' + Math.floor(this.duration) + ' Seconds';">
|
|
<source src="{{ page.mp3 }}" type="audio/mpeg" />
|
|
<source src="{{ page.ogg }}" type="audio/ogg" />
|
|
<h1>Your browser isn't ready for so much hotness. Use the download-link instead.</h1>.
|
|
</audio>
|
|
<script type="text/javascript">
|
|
function loadUrl(newLocation) {
|
|
window.location = newLocation;
|
|
return false;
|
|
}
|
|
var mu = document.getElementsByTagName("audio")[0];
|
|
var anim = document.getElementById("wallpaper");
|
|
var pauseButton = document.getElementById("mu_pause");
|
|
function muFade() {
|
|
mu.classList.add("stopfade");
|
|
anim.classList.add("stopfade");
|
|
}
|
|
mu.addEventListener('ended', function () {
|
|
// only functional if "loop" is removed
|
|
mu.pause();
|
|
mu.currentTime = 0;
|
|
{% if page.previous != nil %}
|
|
loadUrl('{{ relBase }}{{ page.previous.url }}'); return false;
|
|
{% endif %}
|
|
// qq IE10
|
|
muFade();
|
|
});
|
|
pauseButton.addEventListener("click", function () {
|
|
mu.classList.toggle("stopfade");
|
|
if (mu.paused) {
|
|
mu.play();
|
|
pauseButton.innerHTML = "Pause";
|
|
} else {
|
|
mu.pause();
|
|
pauseButton.innerHTML = "Resume";
|
|
}
|
|
});
|
|
</script>
|
|
<style type="text/css">
|
|
body {
|
|
background-image:url('{{ page.image }}') ;
|
|
background-size: 200%;
|
|
background-repeat: repeat;
|
|
}
|
|
#navigation {
|
|
opacity: 1;
|
|
}
|
|
|
|
#wallpaper {
|
|
background-image: url(/assets/img/world2.svg);
|
|
-webkit-animation: AnimationName 30s ease infinite;
|
|
-moz-animation: AnimationName 30s ease infinite;
|
|
animation: AnimationName 30s ease infinite;
|
|
height: fit-content;
|
|
@-webkit-keyframes AnimationName {
|
|
0%{background-position:0% 91%}
|
|
50%{background-position:100% 10%}
|
|
100%{background-position:0% 91%}
|
|
}
|
|
@-moz-keyframes AnimationName {
|
|
0%{background-position:0% 91%}
|
|
50%{background-position:100% 10%}
|
|
100%{background-position:0% 91%}
|
|
}
|
|
@keyframes AnimationName {
|
|
0%{background-position:0% 91%}
|
|
50%{background-position:100% 10%}
|
|
100%{background-position:0% 91%}
|
|
}
|
|
}
|
|
.stopfade {
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
</style>
|