cccb/sanic
cccb/sanic
11
1
Fork 0
Code Issues 5 Pull requests Packages Projects 1 Releases Activity
sanic/static/index.html
XenGi 912a42c450
finish work on sse
2024-08-09 10:00:21 +02:00

232 lines
8.4 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Sanic</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="treeview.css">
<link rel="icon" href="favicon.ico" sizes="16x16 32x32 48x48 64x64" type="image/png">
</head>
<body>
<dialog id="save-playlist">
<h1>Save Playlist</h1>
<button class="close">&times;</button>
<form method="dialog">
<label for="control-playlist-name">Name</label>
<input type="text" id="control-playlist-name" name="playlist-name" autofocus>
<button>Save</button>
</form>
</dialog>
<main>
<div id="nav">
<div id="control-admin">
<button id="connection-state">&#x274C; Disconnected</button> <!-- ❌ Cross Mark -->
<button>Config</button>
<button id="control-update-db" data-jobid="" disabled="disabled"><span class="loader"></span> Update DB</button>
</div><!--/#control-admin-->
<div>
<div class="spaced">
<button id="control-previous">&#x23EE;&#xFE0E;</button> <!-- ⏮️ Last Track Button -->
<button id="control-stop">&#x23F9;&#xFE0E;</button> <!-- ⏹️ Stop Button -->
<button id="control-play-pause">&#x23F5;&#xFE0E;</button> <!-- ▶️ Play or ⏸️ Pause Button -->
<button id="control-next">&#x23ED;&#xFE0E;</button> <!-- ⏭️ Next Track Button -->
</div><!--/.spaced-->
<div class="spaced">
<label for="control-progress"></label>
<input type="range" id="control-progress" name="progress" min="0" step="1" />
</div>
</div>
<div>
<div class="spaced">
<button id="control-repeat" data-state="off">&#x1F518; repeat</button> <!-- 🔘 Radio Button -->
<button id="control-shuffle" data-state="off">&#x1F518; shuffle</button> <!-- 🔘 Radio Button -->
</div><!--/.spaced-->
<div class="spaced">
<label for="control-xfade">xfade</label>
<div>
<button id="control-xfade-minus">&#x2796;</button> <!-- ➖ Minus -->
<input type="number" id="control-xfade" name="xfade" value="00" />
<button id="control-xfade-plus">&#x2795;</button> <!-- ➕ Plus -->
</div>
</div><!--/.spaced-->
<div class="spaced">
<button id="control-volume-down">&#x1F509;</button> <!-- 🔉 Speaker with sound wave -->
<input id="control-volume" name="volume" type="range" min="0" max="100" value="50" />
<button id="control-volume-up">&#x1F50A;</button> <!-- 🔊 Speaker with sound waves -->
</div><!--/.spaced-->
</div>
<div class="wide">
<div>
<label for="control-track">Now playing:</label>
<!--<input type="text" id="control-track" name="track" disabled="disabled" />-->
<div class="marquee" id="control-track" data-songid="">
<span></span>
</div>
</div>
<div>
<label for="control-time">Time:</label>
<input type="text" id="control-time" name="time" value="00:00:00/00:00:00" disabled="disabled" />
</div>
</div>
<div id="sanic-logo">
<div><!-- TODO: try to remove this div -->
<img alt="sanic logo" src="img/sanic-logo.webp" />
Sanic &copy; 2023
</div>
</div><!--/#sanic-logo-->
</div>
<div id="queue">
<table>
<thead>
<tr>
<th>Pos</th>
<th>Artists</th>
<th>Track</th>
<th>Album</th>
<th>Length</th>
<th>Actions</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div><!--/#queue-->
<div id="browser">
<div id="tabs">
<a id="tab-browser" class="active" href="#">File Browser</a>
<a id="tab-search" href="#">Search</a>
<a id="tab-playlists" href="#">Playlists</a>
</div><!--/#tabs-->
<div id="file-browser">
<div>
<ul id="tree">
<li>
<input type="checkbox"/>
<span>00_music</span>
<ul>
<li>
<input checked type="checkbox"/>
<span>autosort</span>
</li>
<li>
<input checked type="checkbox"/>
<span>reimport</span>
</li>
<li>
<input checked type="checkbox"/>
<span>unsortable</span>
</li>
<li>
<input checked type="checkbox"/>
<span>youtube</span>
</li>
</ul>
</li>
<li>
<input checked type="checkbox"/>
<span>01_incoming</span>
<ul>
<li>
<input checked type="checkbox"/>
<span>coon</span>
<ul>
<li>
<input type="checkbox"/>
<span>Rick Astley - Never Gonna Give You Up</span>
</li>
<li>
<input type="checkbox"/>
<span>Nyan Cat</span>
</li>
</ul>
</li>
<li>
<input type="checkbox"/>
<span>cascha</span>
</li>
<li>
<input type="checkbox"/>
<span>XenGi</span>
</li>
</ul>
</li>
<li>
<input type="checkbox"/>
<span>02_megablast</span>
<ul>
<li>
<input checked type="checkbox"/>
<span>dnb</span>
</li>
<li>
<input checked type="checkbox"/>
<span>mix</span>
</li>
</ul>
</li>
<li>
<input type="checkbox"/>
<span>03_mfs</span>
<ul>
<li>
<input checked type="checkbox"/>
<span>ambient</span>
</li>
<li>
<input checked type="checkbox"/>
<span>electronic</span>
</li>
</ul>
</li>
</ul>
</div>
<div>
actions
</div>
</div><!--/#file-browser-->
<div id="search" style="display: none">
<div>
<input type="text" id="control-search-pattern" name="pattern">
<button id="control-search-submit">Search</button>
</div>
<div>
actions
</div>
</div><!--/#search-->
<div id="playlist-browser" style="display: none">
<label for="control-playlist-list"></label>
<select id="control-playlist-list" size="15">
</select><!--/#control-playlist-list-->
<div>
<button id="control-refresh-playlists">&#x1F504; Refresh</button><!-- 🔄 Counterclockwise Arrows Button -->
<button id="control-replace-playlist">&#x2934;&#xFE0F; Replace</button><!-- ⤴️ Arrow Pointing Rightwards Then Curving Upwards -->
<button id="control-attach-playlist">&#x2B06; Attach</button><!-- ⬆️ Up Arrow -->
<button id="control-save-playlist">&#x1F4BE; Save</button><!-- 💾 Floppy Disk -->
<button id="control-delete-playlist">&#x1F5D1;&#xFE0F; Delete</button><!-- 🗑️ Wastebasket -->
</div>
</div><!--/#playlist-browser-->
</div><!--/#browser-->
<div id="result">
<table>
<thead>
<tr>
<th>Artist</th>
<th>Title</th>
<th>Album</th>
<th>Genre</th>
<th>Time</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div><!--/#result-->
<footer>
<a href="https://gitlab.com/XenGi/sanic"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 92"><defs><clipPath id="a"><path d="M0 .113h91.887V92H0Zm0 0"/></clipPath></defs><g clip-path="url(#a)"><path style="stroke:none;fill-rule:nonzero;fill:#ffffff;fill-opacity:1" d="M90.156 41.965 50.036 1.848a5.913 5.913 0 0 0-8.368 0l-8.332 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.043 7.043 0 0 1 1.673 7.277l10.183 10.184a7.026 7.026 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.045 7.045 0 0 1-9.961 0 7.038 7.038 0 0 1-1.532-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.034 7.034 0 0 1 2.308-1.539V33.926a7.001 7.001 0 0 1-2.308-1.535 7.049 7.049 0 0 1-1.516-7.7L29.242 14.273 1.734 41.777a5.918 5.918 0 0 0 0 8.371L41.855 90.27a5.92 5.92 0 0 0 8.368 0l39.933-39.934a5.925 5.925 0 0 0 0-8.371"/></g></svg></a> Sanic MPD Web UI 0.1.0 - by XenGi and coon &copy; 2023
</footer>
</main>
<script src="index.js"></script>
<script src="sse.js"></script>
</body>
</html>
Reference in a new issue View git blame Copy permalink