Kristy Fournier
b20f0ecad0
no more web references (so you don't need internet access on a closed network)
121 lines
No EOL
6.7 KiB
HTML
121 lines
No EOL
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Jukebox Controller</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="manifest" href="manifest.json" />
|
|
</head>
|
|
<body id="test-body">
|
|
<!--Cookie Popup(does it matter if im not tracking them? i have no idea)-->
|
|
<script type="text/javascript" src="/ext/popper.js"></script><script> window.start.init({Palette:"palette2",Mode:"floating left",Theme:"classic",LinkText:" Learn More!",Message:"This website uses cookies to save necessary data to your device, and no tracking is performed.",Time:"0",})</script>
|
|
|
|
<div class="intro">
|
|
<h1 id="title">Jukebox Remote</h1>
|
|
<p>Add songs to the shared playlist below!</p>
|
|
</div>
|
|
<h1 class="alert" id="alert"></h1>
|
|
<!-- this is the main body when PICKING songs to add to the playlist,
|
|
changes visibility with JS-->
|
|
<div class="songlist-mode" id="songlist-mode">
|
|
<div class="searchbox-holder">
|
|
<input type="text" autocomplete="off" placeholder="Search" id="songsearch" enterkeyhint="Search" class="searchbox"><button class="go-search" id="go-search">Go!</button>
|
|
</div>
|
|
<div class="songlist" id="songlist">
|
|
<h1>Search to find songs!</h1>
|
|
<!-- Placeholder for the song items
|
|
These are generated using javascript for search
|
|
|
|
<div class="item">
|
|
<img src="placeholder.png"></img>
|
|
<h3><span>Song title</span></h3>
|
|
<h4>Artist</h4>
|
|
</div>
|
|
|
|
-->
|
|
|
|
</div>
|
|
</div>
|
|
<!-- this is the opposite of the thing described above (looking at songs in queue) -->
|
|
<div class="playlist-mode" id="playlist-mode">
|
|
<div class="playlist" id="playlist">
|
|
<h1 id="playlist-alert"></h1>
|
|
<!-- The template for playlist items
|
|
<div class="item">
|
|
<img src="placeholder.png"></img>
|
|
<h3>Song title</h3>
|
|
<h4>Artist</h4>
|
|
<h5>Playing</h5>
|
|
</div>-->
|
|
</div>
|
|
</div>
|
|
<!-- Because settings involves no generation ( all the settings are known), it is filled out always, just dissapears-->
|
|
<div class="settings-mode" id="settings-mode">
|
|
<div class="settings" id="settings">
|
|
<h1>Client Settings (Saved to device)</h1>
|
|
<!--
|
|
<div class="item">
|
|
<h2 for="darkmode-button">Dark Mode:</h2>
|
|
<p class="italic">Opposite of light mode</p>
|
|
<button title="darkmode-button" id="darkmode-button">Off</button>
|
|
</div>
|
|
-->
|
|
<div class="item">
|
|
<h2 for="iptextbox">Server IP:</h2>
|
|
<p class="italic">IP of the device running the song server</p>
|
|
<input title="iptextbox" style="width:200px" type="text" id="iptextbox" enterkeyhint="Done">
|
|
</div>
|
|
<div class="item">
|
|
<h2 for="alerttimetextbox">Alert Time:</h2>
|
|
<p class="italic">How long alerts stay on screen for (seconds)</p>
|
|
<input title="alerttimetextbox" style="width:50px" type="text" id="alerttimetextbox" value="2" enterkeyhint="Done">
|
|
</div>
|
|
<h1>Server Settings (Saved to server)</h1>
|
|
<div class="item">
|
|
<h2 for="partymode-button">Party Mode:</h2>
|
|
<p class="italic">Add random songs to the queue when it is about to be empty</p>
|
|
<button title="partymode-button" id="partymode-button">N/A</button>
|
|
</div>
|
|
<div class="item">
|
|
<h2 for="volumerange">Volume:</h2>
|
|
<p class="italic">Volume of the music</p>
|
|
<input type="range" min="0" max="100" step="1" title="volumerange" id="volumerange">
|
|
</div>
|
|
<div class="item">
|
|
<h2>Share the remote:</h2>
|
|
<div id="qrcode" alt="QR code to the remote URL"></div>
|
|
</div>
|
|
<h1>Admin Settings</h1>
|
|
<p class="italic">Note: Admin password must have been set from the server</p>
|
|
<div class="item">
|
|
<h2>Admin Password:</h2>
|
|
<p class="italic">Enter to use admin restricted functions</p>
|
|
<input placeholder="Wordpass12" type="password" title="Admin password box" id="adminpasswordbox">
|
|
</div>
|
|
<div class=item>
|
|
<h2>Fine action control:</h2>
|
|
<p class="italic">A check means that action is avalible to everyone</p>
|
|
<div id="admincheckholder">
|
|
<input type="checkbox" title="addsongcheck" id="addsongsettingcheckbox"><label for="addsongsettingcheckbox">Add songs to queue</label><br>
|
|
<input type="checkbox" title="skipsongcheck" id="skipsongsettingcheckbox"><label for="skipsongsettingcheckbox">Skip songs</label><br>
|
|
<input type="checkbox" title="playpausecheck" id="playpausesettingcheckbox"><label for="playpausesettingcheckbox">Play/pause</label><br>
|
|
<input type="checkbox" title="partymodecheck" id="partymodesettingcheckbox"><label for="partymodesettingcheckbox">Toggle Party Mode</label><br>
|
|
<input type="checkbox" title="volumechangecheck" id="volumechangesettingcheckbox"><label for="volumechangesettingcheckbox">Change volume</label><br>
|
|
</div>
|
|
</div>
|
|
<p class="versionNumber">PartyJukebox is under an <a href="https://github.com/kristy-fournier/PartyJukebox/blob/main/LICENSE.md">AGPLV3</a> liscense. You can access the source code <a href=https://github.com/kristy-fournier/PartyJukebox>here</a>.</p>
|
|
</div>
|
|
</div>
|
|
<!--All the buttons are down here but settings is just doing its own thing-->
|
|
<img class="settings-button" id="settings-button" src="./images/settings.png" alt="settings"></img>
|
|
<div id="controls" class="controls">
|
|
<img class="control-button" id="playlist-button" src="./images/playlist.png" alt="Playlist"></img>
|
|
<img class="control-button" id="play-pause-button" src="./images/play-pause.png" alt="Play pause"></img>
|
|
<img class="control-button" id="skip-button" src="./images/skip.png" alt="Skip"></img>
|
|
<img class="control-button" id="search-button" src="./images/search.png" alt="Search"></img>
|
|
|
|
</div>
|
|
<script src="/ext/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="scripts.js"></script>
|
|
</body>
|
|
</html> |