88 lines
3.2 KiB
HTML
88 lines
3.2 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>
|
|
|
|
|
|
|
|
<button id="toggleFileManagerButton" onclick="toggleFileManager()">Toggle File Manager</button>
|
|
|
|
<div id="fileManager" style="display:none; margin-top:20px;">
|
|
<h2>File Manager</h2>
|
|
|
|
<h2>Upload File</h2>
|
|
<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>
|
|
|
|
<h3>Edit RFID Mapping</h3>
|
|
<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>
|
|
|
|
<h3>Move / Rename File</h3>
|
|
<label for="moveFrom">From:</label>
|
|
<input type="text" id="moveFrom" placeholder="/oldname.mp3"/>
|
|
<label for="moveTo">To:</label>
|
|
<input type="text" id="moveTo" placeholder="/newname.mp3"/>
|
|
<button onclick="moveFile()">Move/Rename</button>
|
|
|
|
<h3>Delete File</h3>
|
|
<label for="deleteFile">Filename:</label>
|
|
<input type="text" id="deleteFile" placeholder="/song.mp3"/>
|
|
<button onclick="deleteFile()">Delete</button>
|
|
</div>
|
|
|
|
<script src="/script.js"></script>
|
|
</body>
|
|
</html>
|