Kristy Fournier
2d70c5306e
Moved remote JS files to local, (all under MIT liscense (i hope)) Added version number, plans for semantic versioning and better 'stable' releases
132 lines
No EOL
7.4 KiB
HTML
132 lines
No EOL
7.4 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="/static/styles.css">
|
|
<link rel="manifest" href="/static/manifest.json"/>
|
|
<link rel="shortcut icon" href="/static/favicon.ico">
|
|
<meta charset="utf-8">
|
|
<script src="/static/ext/sha256.min.js"></script>
|
|
<!-- above allows use of sha256() on http -->
|
|
<script src="/static/ext/socket.io.min.js"></script>
|
|
</head>
|
|
<body id="test-body">
|
|
<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 style="margin-top: 0px;">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>
|
|
<p class="italic">This shares the IP and URL you are currently connected to</p>
|
|
<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" enterkeyhint="done">
|
|
</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>
|
|
<input type="checkbox" title="duplicateallowcheck" id="duplicateallowesettingcheckbox"><label for="duplicateallowsettingcheck">Add duplicate songs</label><br>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<h2>Clear the playlist</h2>
|
|
<p class="italic" >Wipe the playlist, except the currently playing song. With PartyMode enabled, a second song will be added back randomly</p>
|
|
<button id="clear-button">Clear Playlist</button>
|
|
</div>
|
|
<p class="versionNumber italic">PartyJukebox is under an <a href="https://github.com/kristy-fournier/PartyJukebox/blob/main/LICENSE.md" target="_blank">AGPLV3</a> liscense. You can access the source code <a href=https://github.com/kristy-fournier/PartyJukebox target="_blank">here</a>.</p>
|
|
<p class="versionNumber">Release {{ REL_VER_NUM }}</p>
|
|
</div>
|
|
</div>
|
|
<!--All the buttons are down here but settings is just doing its own thing-->
|
|
<div id="controls" class="controls">
|
|
<img tabindex=0 class="control-button" id="playlist-button" src="/static/images/playlist.png" alt="Playlist"></img>
|
|
<img tabindex=0 class="control-button" id="play-pause-button" src="/static/images/play-pause.png" alt="Play pause"></img>
|
|
<img tabindex=0 class="control-button" id="skip-button" src="/static/images/skip.png" alt="Skip"></img>
|
|
<img tabindex=0 class="control-button" id="search-button" src="/static/images/search.png" alt="Search"></img>
|
|
</div>
|
|
<div class="settings-button-holder">
|
|
<img tabindex=0 class="settings-button control-button" id="settings-button" src="/static/images/settings.png" alt="settings"></img>
|
|
</div>
|
|
<script src="/static/ext/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="/static/scripts.js"></script>
|
|
</body>
|
|
</html> |