Make project REUSE compliant

initial commit

a lot more stuff

Make project REUSE compliant

start working on implementing audio

templates/song.html

@@ -0,0 +1,53 @@
+{% extends "base.html" %}
+{% block style %}
+<link rel="stylesheet" href="/post/page.css"/>
+<link rel="stylesheet" href="/song.css"/>
+{% endblock style %}
+{% block title %}
+{{ page.title }}
+{% endblock title %}
+{% block content %}
+<div id="player">
+    {% if page.extra.cover %}
+        <img id="cover" src="{{ page.extra.cover }}"/>
+    {% endif %}
+    <h1 id="title">
+        {{ page.title }}
+    </h1>
+    <div id="controls">
+        <button id="playbutton">▶</button>
+        <input type="range" class="seek" id="seek" max="1" value="0" step="0.001">
+    </div>
+    <audio id="audio" controls src="{{ page.extra.src }}" style="display:none" preload="metadata">
+</div>
+<div id="page_content">
+{{ page.content | safe }}
+</div>
+<script>
+    const audio = document.getElementById("audio");
+    const playbutton = document.getElementById("playbutton");
+    const seek = document.getElementById("seek");
+    seek.value = 0.0;
+    let playing = false;
+
+    playbutton.addEventListener("click", () => {
+        if (playing) {
+            audio.pause();
+            playbutton.textContent = "▶";
+        } else {
+            audio.play();
+            playbutton.textContent = "⏸";
+        }
+        playing = !playing;
+    });
+    audio.addEventListener("timeupdate", () => {
+        const progress = (audio.currentTime / audio.duration);
+        seek.value = progress;
+    });
+
+    seek.addEventListener("change", () => {
+        audio.currentTime = audio.duration * seek.value;
+    });
+    
+</script>
+{% endblock content %}