myxelium/RandomMemerBot
1
0
Fork 0
mirror of https://github.com/Myxelium/RandomMemerBot.git synced 2026-04-11 17:49:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added next play time to html page

Browse Source
This commit is contained in:
Myx
2023-10-14 20:27:09 +02:00
parent 507edc1dea
commit c51bc4bb32
5 changed files with 91 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
client/web/client.js
View File

@@ -1,3 +1,14 @@
function loadNextPlaybackTime() {
fetch('/nextplaybacktime')
.then(response => response.text())
.then(data => {
const nextPlaybackTime = document.getElementById('nextPlaybackTime');
nextPlaybackTime.textContent = `Playing next time: ${data}`;
}
)
.catch(error => console.error('Error:', error));
}
function loadFiles() {
// Fetch the JSON data from the /sounds endpoint
fetch('/sounds')
@@ -51,6 +62,7 @@ function loadFiles() {
// Call loadFiles when the script is loaded
loadFiles();
loadNextPlaybackTime();
document.getElementById('uploadForm').addEventListener('submit', function(event) {
event.preventDefault();

34
client/web/index.html
View File

@@ -11,22 +11,32 @@
<body style="background-color: #333;">
<div class="grid-container">
<div class="grid-x grid-padding-x align-center-middle" style="height: 100vh;">
<div class="cell small-12 medium-6 large-4">
<form id="uploadForm" enctype="multipart/form-data">
<div class="callout">
<h3>Upload Sound</h3>
<div class="input-group">
<span class="input-group-label">File:</span>
<input class="input-group-field" type="file" id="myFile">
<img src="logo.svg" alt="Logo" style="display: block; margin-left: auto; margin-right: auto; width: 50%;">
<div class="grid-x grid-padding-x align-center" style="height: 100vh;">
<div class="cell small-12 medium-6 large-4" style="height: 100%">
<div style="position: fixed;">
<form id="uploadForm" enctype="multipart/form-data" >
<div class="callout">
<h3>Upload Sound</h3>
<div class="input-group">
<span class="input-group-label">File:</span>
<input class="input-group-field" type="file" id="myFile">
</div>
<button class="button expanded" type="submit">Upload</button>
</div>
<button class="button expanded" type="submit">Upload</button>
</div>
</form>
</form>
<div class="callout">
<h3>Info</h3>
<div id="nextPlaybackTime"></div>
</div>
</div>
</div>
<div class="cell small-12 medium-6 large-4">
<div class="callout">
<h3>Uploaded Files</h3>
<div style="height:200px;overflow:auto;">
<div style="min-height:209px;max-height:100vh;overflow: auto;">
<ul id="fileList" class="vertical menu"></ul>
</div>
</div>

47
client/web/logo.svg Normal file
View File

@@ -0,0 +1,47 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 800 600" version="1.1" xml:space="preserve" viewBox="3.74 2 352.76 101">
<style type="text/css">
.st0{fill:#FCFCFC;}
.st1{fill:none;stroke:#F9F9F9;stroke-width:7;stroke-miterlimit:10;}
</style>
<path class="st0" d="m22 36c2-1 5-1 7 2 1 2 2 5 2 7 0 3-1 7-6 6 7 1 4 9 6 14-3 0-7 1-8-1-3-2 1-7-2-10-2-2-6-2-9-3 1 5-2 9 0 14-2 0-6 1-6 0-5-9 0-19-1-29 6-3 11 0 17 0zm-9 12c4-1 7 3 10 0 2-2 2-5 1-7-3-2-8-3-9-1-2 1-1 5-2 8z"/>
<path class="st0" d="m54 42c4-2 7 2 7 4 2 6 1 13 1 19-7 2-14 0-21 0-2 0-5-2-6-5 0-3-2-6 2-9 6-4 12 1 18 0 0-8-10-5-15-6v-4c4-2 9 2 14 1zm-6 12c-2-2-5-1-6 1 0 2-1 4 0 5 3 2 7 2 11 2 1-6 1-8-5-8z"/>
<path class="st0" d="m85 42c5-2 8 4 8 8-1 5 1 11-2 15 0 1-6 1-6 0-3-5 1-12-1-18-1-3-5-2-9-2 1 7-3 13-2 20h-6c-2-7-1-15-1-23 6-2 13 0 19 0z"/>
<path class="st0" d="m123 34c2 10-1 21 0 31-9-2-19 4-26-5 1-6-3-16 6-19 4-1 9 3 13 0 1-1-1-5 0-7 1-1 5 0 7 0zm-19 20c-2 7 5 7 10 8 0-5 0-11 2-16-3 1-7-2-10-1-3 2 0 6-2 9z"/>
<path class="st0" d="m147 42c5 0 8 3 8 8-1 5 2 11-3 13-7 4-17 4-23-1-5-4-4-14 1-19 4-4 11-1 17-1zm-13 14c0 1 0 3 1 4 3 2 7 4 10 1 3-4 4-10 1-14-1-2-5-4-9-1-2 3-2 7-3 10z"/>
<path class="st0" d="m178 42c3-1 6 1 7 4v19c-2 0-5 0-7 1-3-6 2-12 1-19-1-2-3-1-4-1 1 7-3 13-2 19h-5c-1-3-1-7 0-10s3-6 2-10h-4c1 7-3 13-2 20h-5c-2-8-1-15-1-23 7-3 13 0 20 0z"/>
<path class="st0" d="m198 35c2 8 4 15 3 23 3-7 8-14 7-22h8c1 10-3 19 0 29-2 0-6 1-6 0-3-5 0-11 0-17-3 5-3 12-6 17-1 1-5 1-5 0-4-6-3-13-3-20-1 7-3 13-1 20h-5c-3-9 1-19-1-29 3-1 6-1 9-1z"/>
<path class="st0" d="m240 42c7 0 9 9 5 13-5 3-12 0-17 0-2 0-2 5 1 6 5 1 9 1 14 1v3c-8-1-19 4-22-5-2-5-3-13 1-17 5-4 12 0 18-1zm-12 9c4 0 10 5 12 0 2-6-5-6-9-6-2 1-2 4-3 6z"/>
<path class="st0" d="m270 42c5-2 8 4 8 8 1 5-3 10 0 15-3 0-5 0-8 1-1-6 1-13 1-19 0-1-3-1-3-1-2 6-4 12-3 19h-5c-2-7 3-13 2-20h-3c-3 6-2 13-2 20-2 0-5 1-5 0-5-7 0-15-1-23 6-2 13 0 19 0z"/>
<path class="st0" d="m302 42c6 0 8 7 6 11-4 6-13 2-19 1 0 2-1 5 0 6 4 3 11 1 16 2v3c-7 0-16 2-22-3-4-4 0-11-1-17 5-6 13-2 20-3zm-12 9c3 1 5 1 8 2s5-3 4-5c-2-3-8-5-11-2 0 1-3 3-1 5z"/>
<image transform="translate(313 41)" width="25" height="25" overflow="visible" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAACXBIWXMAAAsSAAALEgHS3X78AAAA GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEdJREFUeNrs0EEKACAIRFGNuf+J hVrZMgSbIJh/AB+jW6GImNYItw8eEcbxbLCBjbDz6goATl3SAZ69S4gQIUKECPkGWQIMAF0fFA6H LamFAAAAAElFTkSuQmCC">
</image>
<path class="st1" d="m191.5 71.5-0.5 28h162v-94h-162v22.8"/>
<path class="st1" d="m191 78"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB