Kristy Fournier
b1f1a38748
Changing the settings on mobile actually works as intended also other rearranging of the backend or whatever
103 lines
No EOL
5.1 KiB
HTML
103 lines
No EOL
5.1 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>
|
|
<!--Cookie Popup(does it matter if im not tracking them? i have no idea)-->
|
|
<script type="text/javascript" src="https://cookieconsent.popupsmart.com/src/js/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="search.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">Hit settings icon to refresh the code</p>
|
|
<div id="qrcode" alt="QR code to the remote URL"></div>
|
|
</div>
|
|
</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="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="scripts.js"></script>
|
|
</body>
|
|
</html> |