rootandClaude Opus 5.5
7cdfbef160
Web: live Stem Now status that tracks every queued song (albums too), right-click menus with Stem Now, Songs and Genres pages, a Stems Only filter in place of the sidebar section, Random sort, several pooled Plex servers and libraries, themes plus custom CSS, a reorganised settings page that loads without a refresh, saved mixes, karaoke and synced lyrics, stem playlists and offline downloads. iOS: Random in every sort menu, a Stems Only toggle (sort menu and Settings), and several music libraries pooled from the signed-in server. Settings now persists karaoke and speed across launches. stemd writes a status file that stemserve serves at /api/queue. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
59 lines
2.1 KiB
HTML
59 lines
2.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
<meta name="theme-color" content="#0d0e12">
|
|
<title>Stemify</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<style id="theme"></style>
|
|
<style id="custom-css"></style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<aside id="nav">
|
|
<div class="brand">stemify</div>
|
|
<form id="search"><input type="search" name="q" placeholder="Search" autocomplete="off"></form>
|
|
<a href="#/albums" data-nav="albums">Albums</a>
|
|
<a href="#/artists" data-nav="artists">Artists</a>
|
|
<a href="#/songs" data-nav="songs">Songs</a>
|
|
<a href="#/genres" data-nav="genres">Genres</a>
|
|
<a href="#/playlists" data-nav="playlists">Playlists</a>
|
|
<a href="#/downloads" data-nav="downloads">Downloads</a>
|
|
<div id="live" hidden></div>
|
|
<a href="#/settings" data-nav="settings" class="settings-link">Settings</a>
|
|
</aside>
|
|
<main id="view"></main>
|
|
<aside id="drawer" hidden></aside>
|
|
</div>
|
|
<footer id="player" class="empty">
|
|
<div class="np">
|
|
<img id="np-art" alt="">
|
|
<div class="np-text"><div id="np-title"></div><div id="np-sub"></div></div>
|
|
</div>
|
|
<div class="center">
|
|
<div class="transport">
|
|
<button id="b-shuffle" class="side" title="Shuffle (S)"></button>
|
|
<button id="b-prev" title="Previous"></button>
|
|
<button id="b-play" class="play" title="Play (Space)"></button>
|
|
<button id="b-next" title="Next"></button>
|
|
<button id="b-repeat" class="side" title="Repeat (R)"></button>
|
|
</div>
|
|
<div class="seek">
|
|
<span id="t-pos">0:00</span>
|
|
<canvas id="wave"></canvas>
|
|
<span id="t-dur">0:00</span>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<select id="speed" title="Speed ([ and ])"></select>
|
|
<button id="b-mixer" class="pill" title="Mixer (M)"></button>
|
|
<button id="b-lyrics" class="pill" title="Lyrics (L)"></button>
|
|
<button id="b-queue" class="pill" title="Queue (Q)"></button>
|
|
<input id="volume" type="range" min="0" max="1" step="0.01" title="Volume">
|
|
</div>
|
|
</footer>
|
|
<script type="module" src="app.js"></script>
|
|
</body>
|
|
</html>
|