static: remove old index.html + index2.html implementations
This commit is contained in:
parent
857638e9db
commit
170324134a
|
|
@ -1,126 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>sanic :: paused</title>
|
||||
<link rel="stylesheet" type="text/css" href="/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<!-- top navigation and playback control -->
|
||||
<header id="top-nav">
|
||||
<div class="navbox box">
|
||||
<button>sanic</button>
|
||||
<button>Config</button>
|
||||
</div>
|
||||
<div class="navbox box">
|
||||
<div>
|
||||
<button>⏮️</button>
|
||||
<button>⏯️</button>
|
||||
<button>⏹️</button>
|
||||
<button>⏭️</button>
|
||||
</div>
|
||||
<div>
|
||||
<label for="progress"></label>
|
||||
<input type="range" id="progress" name="progress" min="0" max="100" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbox box">
|
||||
<p>[ ] repeat</p>
|
||||
<p>[ ] shuffle</p>
|
||||
<label for="volume"></label>
|
||||
<input id="volume" name="volume" type="range" min="1" max="100" />
|
||||
</div>
|
||||
<div class="navbox box">
|
||||
<div>
|
||||
<label for="track"></label>
|
||||
<input id="track" name="track" type="text" value="artist - track" />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section id="playlist" class="box">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Position</th>
|
||||
<th>Artist</th>
|
||||
<th>Title</th>
|
||||
<th>Album</th>
|
||||
<th>Length</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>autoincremented number</td>
|
||||
<td>some artist</td>
|
||||
<td>some song</td>
|
||||
<td>some album</td>
|
||||
<td>some time</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section id="db" class="box">
|
||||
<!-- tabs -->
|
||||
<div id="tabs">
|
||||
<button class="tablink active" onclick="switchTab(event, 'folders')">Folders</button>
|
||||
<button class="tablink" onclick="switchTab(event, 'search')">Search</button>
|
||||
<button class="tablink" onclick="switchTab(event, 'playlists')">Playlists</button>
|
||||
</div>
|
||||
<!-- Folders tab -->
|
||||
<div id="tab-folders" class="tab active">
|
||||
<nav>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
<!-- Search tab -->
|
||||
<div id="tab-search" class="tab">
|
||||
<form>
|
||||
<input type="text" />
|
||||
<button>Search</button>
|
||||
</form>
|
||||
</div>
|
||||
<!-- Playlists tab -->
|
||||
<div id="tab-playlists" class="tab">
|
||||
<ul>
|
||||
<li>Playlist 1</li>
|
||||
<li>Playlist 2</li>
|
||||
<li>Playlist 3</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Tab results -->
|
||||
<div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Artist</th>
|
||||
<th>Title</th>
|
||||
<th>Album</th>
|
||||
<th>Length</th>
|
||||
<th>Filename</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>some artist</td>
|
||||
<td>some song</td>
|
||||
<td>some album</td>
|
||||
<td>some time</td>
|
||||
<td>some filename</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- informational footer -->
|
||||
<footer id="bottom" class="box">
|
||||
<p>sanic mpd web ui - by XenGi and coon © 2023</p>
|
||||
</footer>
|
||||
<script src="/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
function switchTab(event, tabname) {
|
||||
for (let tab in document.getElementsByClassName("tab")) {
|
||||
tab.style.display = "none";
|
||||
}
|
||||
for (let button in document.getElementsByClassName("tablink")) {
|
||||
button.className = button.className.replace(" active", "");
|
||||
}
|
||||
|
||||
|
||||
document.getElementById(tabname).style.display = "block";
|
||||
event.currentTarget.className += " active";
|
||||
}
|
||||
|
|
@ -1,153 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title>WebSocket</title>
|
||||
<link rel="stylesheet" type="text/css" href="style2.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="config">
|
||||
<button disabled>sanic</button>
|
||||
<button>Config</button>
|
||||
</div>
|
||||
<div class="playback-controls">
|
||||
<div>
|
||||
<button>⏮️</button>
|
||||
<button>⏯️</button>
|
||||
<button>⏹️</button>
|
||||
<button>⏭️</button>
|
||||
</div>
|
||||
<label for="progress"></label>
|
||||
<input type="range" id="progress" name="progress" min="0" max="100" />
|
||||
</div>
|
||||
<div class="playlist-controls">
|
||||
<div>
|
||||
<label for="repeat">repeat</label>
|
||||
<input type="checkbox" id="repeat" name="repeat" />
|
||||
<label for="shuffle">shuffle</label>
|
||||
<input type="checkbox" id="shuffle" name="shuffle" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="fade">fade</label>
|
||||
<button>-</button>
|
||||
<input type="number" id="fade" name="fade" min="0" />
|
||||
<button>+</button>
|
||||
</div>
|
||||
<label for="volume"></label>
|
||||
<input id="volume" name="volume" type="range" min="1" max="100" />
|
||||
</div>
|
||||
<div class="track-info">
|
||||
<p>Now playing: 00:00:00/100:00:00</p>
|
||||
|
||||
<label for="track">track</label>
|
||||
<input type="text" id="track" name="track" disabled />
|
||||
</div>
|
||||
</header>
|
||||
<div class="playlist">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Position</th>
|
||||
<th>Title</th>
|
||||
<th>Artist</th>
|
||||
<th>Genre</th>
|
||||
<th>Album</th>
|
||||
<th>Time</th>
|
||||
<th>Disc</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Chakra</td>
|
||||
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
|
||||
<td>undefined</td>
|
||||
<td>undefined</td>
|
||||
<td>undefined</td>
|
||||
<td>9:29</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Chakra</td>
|
||||
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
|
||||
<td>undefined</td>
|
||||
<td>undefined</td>
|
||||
<td>undefined</td>
|
||||
<td>9:29</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Chakra</td>
|
||||
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
|
||||
<td>undefined</td>
|
||||
<td>undefined</td>
|
||||
<td>undefined</td>
|
||||
<td>9:29</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Chakra</td>
|
||||
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
|
||||
<td>undefined</td>
|
||||
<td>undefined</td>
|
||||
<td>undefined</td>
|
||||
<td>9:29</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>Chakra</td>
|
||||
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
|
||||
<td>undefined</td>
|
||||
<td>undefined</td>
|
||||
<td>undefined</td>
|
||||
<td>9:29</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>Chakra</td>
|
||||
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
|
||||
<td>undefined</td>
|
||||
<td>undefined</td>
|
||||
<td>undefined</td>
|
||||
<td>9:29</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>Chakra</td>
|
||||
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
|
||||
<td>undefined</td>
|
||||
<td>undefined</td>
|
||||
<td>undefined</td>
|
||||
<td>9:29</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<section class="db">
|
||||
<div class="tabs"></div>
|
||||
<div class="result"></div>
|
||||
</section>
|
||||
<footer class="footer">
|
||||
<p id="console"></p>
|
||||
</footer>
|
||||
<script>
|
||||
const loc = window.location;
|
||||
const proto = loc.protocol === "https:" ? "wss:" : "ws:"
|
||||
const ws = new WebSocket(proto + "//" + loc.host + "/ws")
|
||||
|
||||
ws.onopen = function() {
|
||||
console.log("Connected")
|
||||
}
|
||||
|
||||
ws.onmessage = function(evt) {
|
||||
const out = document.getElementById("console");
|
||||
out.innerHTML += evt.data + "<br>";
|
||||
// TODO: react on MPD communication here
|
||||
// TODO: react on yt-dlp communication here
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
:root {
|
||||
--main-bg-color: #ddd;
|
||||
--main-color: #333;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
}
|
||||
|
||||
header {
|
||||
min-height:64px;
|
||||
background-color: var(--main-color);
|
||||
border: 1px solid var(--main-bg-color);
|
||||
}
|
||||
|
||||
footer {
|
||||
min-height:24px;
|
||||
}
|
||||
|
||||
.box {
|
||||
background-color: var(--main-color);
|
||||
border: 1px solid var(--main-bg-color);
|
||||
}
|
||||
|
||||
header .box {
|
||||
float: left;
|
||||
padding: 1em;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
main {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
/* tab controls */
|
||||
.tabs {
|
||||
overflow: hidden; /* what does this do? */
|
||||
}
|
||||
.tabs button {
|
||||
float: left;
|
||||
}
|
||||
.tabs button:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
.tabs button.active {
|
||||
background-color: #ccc;
|
||||
}
|
||||
.tab {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* table */
|
||||
thead {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
/* navigation */
|
||||
|
||||
|
||||
|
||||
|
||||
/* player controls */
|
||||
#player-controls {
|
||||
border: 1px solid blue;
|
||||
}
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
body {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 128px 100px 300px 32px;
|
||||
gap: 0 0;
|
||||
grid-auto-flow: row;
|
||||
grid-template-areas: "header" "playlist" "db" "footer";
|
||||
}
|
||||
|
||||
header {
|
||||
display: grid;
|
||||
grid-template-columns: 128px 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
gap: 0 0;
|
||||
grid-auto-flow: row;
|
||||
grid-template-areas: "config playback-controls playlist-controls track-info";
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
div, header, footer, section {
|
||||
border: dotted 1px;
|
||||
}
|
||||
|
||||
header .config {
|
||||
grid-area: config;
|
||||
}
|
||||
|
||||
header .playback-controls {
|
||||
grid-area: playback-controls;
|
||||
}
|
||||
|
||||
header .playlist-controls {
|
||||
grid-area: playlist-controls;
|
||||
}
|
||||
|
||||
header .track-info {
|
||||
grid-area: track-info;
|
||||
}
|
||||
|
||||
footer {
|
||||
grid-area: footer;
|
||||
}
|
||||
|
||||
section.db {
|
||||
display: grid;
|
||||
grid-template-columns: 0.7fr 1.3fr;
|
||||
grid-template-rows: 1fr;
|
||||
gap: 0 0;
|
||||
grid-auto-flow: row;
|
||||
grid-template-areas: "tabs result";
|
||||
grid-area: db;
|
||||
}
|
||||
|
||||
.db .tabs {
|
||||
grid-area: tabs;
|
||||
}
|
||||
|
||||
.db .result {
|
||||
grid-area: result;
|
||||
}
|
||||
|
||||
.playlist {
|
||||
overflow: auto;
|
||||
}
|
||||
Loading…
Reference in a new issue