<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sanic - Flexbox layout</title> <link rel="stylesheet" href="treeview.css"> <link rel="stylesheet" href="sanic.css"> <script src="sanic.js"></script> </head> <body> <div id="flexbox-container"> <div id="controls-top"> <div id="top-left-controls"> <button>Login</button> <button>Config</button> </div> <div id="playback-controls"> <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 id="queue-volume-controls"> <div id="queue-controls"> <div id="queue-playback-order-controls"> <div> <input type="checkbox" id="repeat" name="repeat"> <label for="repeat">repeat</label> </div> <div> <input type="checkbox" id="shuffle" name="shuffle"> <label for="shuffle">shuffle</label> </div> </div> <div id="queue-xfade-control"> <div> xfade </div> <div id="queue-xfade-buttons"> <button>-</button> <div id="xfade">00</div> <button>+</button> </div> </div> </div> <div id="volume-control"> <label for="volume"></label> <input id="volume" name="volume" type="range" min="1" max="100"> </div> </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> <div id="top-logo-container"> <div id="top-logo"> <img id="sanic-logo" alt="sanic logo" src="../img/sanic-logo.webp"> Sanic </div> </div> </div> <div id="queue"> <table id="queue-table"> <thead> <tr> <th>Position</th> <th>Artist</th> <th>Title</th> <th>Album</th> <th>Genre</th> <th>Time</th> </tr> </thead> <tbody> <tr class="odd"> <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>9:29</td> </tr> <tr class="even"> <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>9:29</td> </tr> <tr class="odd playing"> <td class="playing">3</td> <td>Chakra</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>undefined</td> <td>undefined</td> <td>9:29</td> </tr> <tr class="even"> <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>9:29</td> </tr> <tr class="odd"> <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>9:29</td> </tr> <tr class="even"> <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>9:29</td> </tr> <tr class="odd"> <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>9:29</td> </tr> </tbody> </table> </div> <div id="controls_bottom"> <div id="playlist_controls"> <ul class="tree"> <li> <details open> <summary>/</summary> <ul> <li> <details> <summary>00_music</summary> <ul> <li>autosort</li> <li>reimport</li> <li>unsortable</li> <li>youtube</li> </ul> </details> </li> <li> <details> <summary>01_incoming</summary> <ul> <li>coon</li> <li>cascha</li> <li>Xen</li> </ul> </details> </li> <li> <details> <summary>02_megablast</summary> <ul> <li>dnb</li> <li>mix</li> </ul> </details> </li> <li> <details> <summary>03_mfs</summary> <ul> <li>ambient</li> <li>electronic</li> </ul> </details> </li> </ul> </details> </li> </ul> </div> <div id="playlist_tracklist"> <table> <thead> <tr> <th>Artist</th> <th>Title</th> <th>Album</th> <th>Genre</th> <th>Time</th> </tr> </thead> <tbody> <tr class="odd"> <td>Chakra</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>undefined</td> <td>undefined</td> <td>9:29</td> </tr> <tr class="even"> <td>Chakra</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>undefined</td> <td>undefined</td> <td>9:29</td> </tr> <tr class="odd"> <td>Chakra</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>undefined</td> <td>undefined</td> <td>9:29</td> </tr> <tr class="even"> <td>Chakra</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>undefined</td> <td>undefined</td> <td>9:29</td> </tr> <tr class="odd"> <td>Chakra</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>undefined</td> <td>undefined</td> <td>9:29</td> </tr> <tr class="even"> <td>Chakra</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>undefined</td> <td>undefined</td> <td>9:29</td> </tr> <tr class="odd"> <td>Chakra</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>undefined</td> <td>undefined</td> <td>9:29</td> </tr> </tbody> </table> </div> </div> <div id="footer"> sanic mpd web ui 0.1.0 - by XenGi and coon © 2023 </div> </div> </body> </html>