<!DOCTYPE html> <html> <meta charset="utf-8"> <title>Private Playlist</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="theme-color" content="#f44336"> <link rel="stylesheet" href="/libs/music/player.d/w3.css"> <style> @font-face{ font-family: 'CMU Typewriter Text w'; src: url(/cmunbtl.woff); } body, h1, h2, h3, h4 { font-family: 'CMU Typewriter Text w', 'CMU Typewriter Text', 'TeX Gyre Cursor', 'FreeMono', 'Courier New', Courier, monospace; font-variant-ligatures: none; } .w3-sidenav ul li {padding-left: 2px;} #playlist li {word-break: break-all;} .ellipsis {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} </style> <style> @media (prefers-color-scheme: dark) { * { scrollbar-color: #2a2c2e #1c1e1f; } .w3-sidenav a:hover { background-color: rgb(39, 41, 43); } .w3-pale-yellow, .w3-hover-pale-yellow:hover { color: rgb(232, 230, 227) !important; background-color: rgb(75, 75, 0) !important; } html, body, input, textarea, select, button { background-color: #181a1b; color: #e8e6e3; } .w3-light-grey, .w3-hover-light-grey:hover { color: rgb(232, 230, 227) !important; background-color: rgb(28, 30, 31) !important; } .w3-blue, .w3-hover-blue:hover { color: rgb(255, 255, 255) !important; background-color: rgb(9, 102, 175) !important; } #bufferbar.w3-progressbar { background-color: rgb(61, 61, 61) !important; } .w3-progress-container { background-color: rgb(28, 30, 31); } .w3-hoverable tbody tr:hover, .w3-ul.w3-hoverable li:hover { background-color: rgb(39, 41, 43); } .w3-red, .w3-hover-red:hover { background-color: rgb(163, 19, 9)!important; } } </style> <nav class="w3-sidenav w3-collapse w3-light-grey w3-animate-left w3-card-2" style="z-index: 3; width: 250px; display: none;" id="mySidenav"> <header class="w3-container w3-dark-grey"> <h2>Folders <a href="javascript:void(0)" onclick="w3_close()" class="w3-right w3-xlarge w3-hide-large w3-closenav" title="close sidenav">×</a></h2> </header> <ul class="w3-ul" style="margin-bottom: 120px;" id="folderlist"> </ul> </nav> <div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor: pointer; display: none;" id="myOverlay"></div> <div class="w3-main" style="margin-left:250px;"> <header class="w3-container w3-red w3-top"> <h2 class="ellipsis"><span class="w3-opennav w3-xlarge w3-left w3-hide-large" onclick="w3_open()" id="openNav">☰</span> <span id="server-name">Private Cloud Music</span></h2> </header> <header class="w3-container w3-yellow"><h2 class="ellipsis">You can't see me</h2></header> <ul class="w3-ul w3-hoverable w3-pale-yellow" id="subfolderlist"> </ul> <ul class="w3-ul w3-hoverable" style="margin-bottom: 120px;" id="playlist"> </ul> </div> <div class="w3-bottom" style="z-index: 6;"> <div class="w3-panel w3-brown"> <div class="w3-row"> <div class="w3-col s2 w3-container w3-left-align"> <p><span id="curTime">0:00</span></p> </div> <div class="w3-col s8 w3-container w3-center"> <p id="nowPlaying" class="ellipsis">Not playing at all.</p> <audio></audio> </div> <div class="w3-col s2 w3-container w3-right-align"> <p><span id="totalTime">0:00</span></p> </div> </div> <div class="w3-container"> <pcm-progress id="progress-bar"></pcm-progress> </div> <div class="w3-container w3-center" style="padding:6px 0px;"> <button class="w3-btn w3-tiny" id="btn-prev"><<</button> <button class="w3-btn w3-tiny" id="btn-play">Play</button> <button class="w3-btn w3-tiny" id="btn-next">>></button> <button class="w3-btn w3-tiny" id="btn-loop">Loop</button> <button class="w3-btn w3-tiny" id="btn-order">Order</button> </div> </div> </div> <script src="/libs/music/player.d/progress-bar.js"></script> <script src="/libs/music/player.d/pcm.js"></script> <script> function w3_open() { document.getElementById("mySidenav").style.display = "block"; document.getElementById("myOverlay").style.display = "block"; } function w3_close() { document.getElementById("mySidenav").style.display = "none"; document.getElementById("myOverlay").style.display = "none"; } </script> </html>