g4borg/soundboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: using jinja extension for html, adding logger

Browse Source
This commit is contained in:
Gabor Körber
2024-01-09 10:31:43 +01:00
parent fa22be6e0e
commit 35c979e30c
7 changed files with 74 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
templates/index.html
View File

@@ -1,32 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Play</title>
<script>
function play(hash) {
fetch("/play/" + hash);
}
function stop() {
fetch("/stop");
}
</script>
</head>
<body>
<div class="container">
<div class="categories">
<span class="category">Category 1</span>
<!-- More categories -->
<button class="more">More</button>
</div>
<div class="soundclips">
{% for clip in clips %}
<button onclick="play('{{clip.hash}}')">{{clip.file_name}}</button>
{% endfor %}
</div>
<div class="player">
<button onclick="stop()">Stop.</button>
</div>
</div>
</body>
</html>

47
templates/index.jinja Normal file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.17.11/dist/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.17.11/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.17.11/dist/js/uikit-icons.min.js"></script>
<title>Play</title>
<script>
function play(hash) {
fetch("/play/" + hash);
}
function stop() {
fetch("/stop");
}
</script>
</head>
<body>
<div id="main" class="uk-container">
<div id="categories">
<span class="category">Category 1</span>
<!-- More categories -->
<button class="more">More</button>
</div>
<div class="uk-text-center" uk-grid>
<div id="soundclips">
{% for clip in clips %}
<button class="uk-button uk-button-default" onclick="play('{{clip.hash}}')">{{clip.file_name}}</button>
{% endfor %}
</div>
</div>
<div class="player">
<button onclick="stop()">Stop.</button>
</div>
</div>
</body>
</html>