<!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>