soundboard/templates/index.jinja

47 lines
1.2 KiB
Django/Jinja

<!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>