66 lines
2.5 KiB
HTML
66 lines
2.5 KiB
HTML
<!DOCTYPE HTML><html>
|
|
<head>
|
|
<title>HannaBox</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta charset="UTF-8">
|
|
<link rel='stylesheet' href='/style.css' type='text/css' media='all' />
|
|
</head>
|
|
<body>
|
|
<h1>🎵 HannaBox 🎵</h1>
|
|
<span id="state"></span><br/><br/>
|
|
<span id="voltage"></span><br/>
|
|
<span id="uid"></span><br/>
|
|
<span id="heap"></span><br/>
|
|
|
|
<div>
|
|
<button class="prev-button" onclick="simpleGetCall('previous');"></button>
|
|
<button class="play-button" onclick="simpleGetCall('toggleplaypause');"></button>
|
|
<button class="next-button" onclick="simpleGetCall('next');"></button><br/><br/>
|
|
</div>
|
|
<div class="slidecontainer">
|
|
|
|
<input name="progress" type="range" min="0" max="100" value="0" class="slider" id="progressSlider"
|
|
onchange="postValue('progress',document.getElementById('progressSlider').value);lastChange = Date.now();userIsInteracting = false;"
|
|
oninput="userIsInteracting = true;"
|
|
>
|
|
<label for="progress" id="progressLabel"></label>
|
|
</div>
|
|
<div class="slidecontainer">
|
|
<input name="volume" type="range" min="0" max="15" value="7" class="slider" id="volumeSlider"
|
|
onchange="postValue('volume',document.getElementById('volumeSlider').value);lastChange = Date.now()"
|
|
>
|
|
<label for="volume">Vol</label>
|
|
</div>
|
|
<!--
|
|
<button onmouseup="simpleGetCall('stop');" ontouchend="simpleGetCall('stop');">Stop</button>
|
|
-->
|
|
|
|
<p class="playlist-container">
|
|
<h2>🎶 Playlist 🎶</h2>
|
|
%DIRECTORY%
|
|
</p>
|
|
|
|
<form id="uploadForm" method="POST" action="/upload" enctype="multipart/form-data">
|
|
<input type="file" name="data" id="uploadFile" accept=".mp3,.wav,.flac,.m4a,.ogg"/>
|
|
<input type="submit" name="upload" value="Upload" title="Upload Audio File" id="uploadButton"/>
|
|
<div id="uploadStatus"></div>
|
|
<div id="uploadProgress" style="display: none;">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="progressFill"></div>
|
|
</div>
|
|
<span id="progressText">0%</span>
|
|
</div>
|
|
</form>
|
|
|
|
<h2>Edit RFID Mapping</h2>
|
|
<form id="editMappingForm">
|
|
<label for="rfid">RFID:</label>
|
|
<input type="text" id="rfid" name="rfid" required><br>
|
|
<label for="song">Song:</label>
|
|
<input type="text" id="song" name="song" required><br>
|
|
<button type="button" onclick="editMapping()">Update Mapping</button>
|
|
</form>
|
|
|
|
<script src="/script.js"></script>
|
|
</body>
|
|
</html> |