Client is now 100% hosted on the included files

no more web references (so you don't need internet access on a closed network)

Client/ext/popper.js

@@ -0,0 +1,134 @@
+function Pop() {
+  // var cssRuleFile = "/src/css/style.css"; // will be the link once this css file became available online
+  var cssRuleFile = "https://cookieconsent.popupsmart.com/src/css/style.css"; // will be the link once this css file became available online
+
+  let lnk = document.createElement("link");
+  lnk.setAttribute("rel", "stylesheet");
+  lnk.setAttribute("type", "text/css");
+  lnk.setAttribute("href", cssRuleFile);
+  document.getElementsByTagName("head")[0].appendChild(lnk);
+
+  let styl = "undefined";
+  var conDivObj;
+
+  var fadeInTime = 10; // If needed could be served as an customizable option to the user
+  var fadeOutTime = 10;
+
+  let cookie = {
+    name: "cookieconsent_status",
+    path: "/",
+    expiryDays: 365 * 24 * 60 * 60 * 5000,
+  };
+
+  let content = {
+    /// Add a field for link color
+    message:
+      "This website uses cookies to ensure you get the best experience on our website.",
+    btnText: "Got it!",
+    mode: "  banner bottom",
+    theme: " theme-classic",
+    palette: " palette1",
+    link: "Learn more",
+    href: "https://www.cookiesandyou.com",
+    target: "_blank",
+  };
+
+  let createPopUp = function () {
+    console.log(content);
+    if (typeof conDivObj === "undefined") {
+      conDivObj = document.createElement("DIV");
+      conDivObj.style.opacity = 0;
+      conDivObj.setAttribute("id", "spopupCont");
+    }
+    conDivObj.innerHTML =
+      '<div id="poper" class="window ' +
+      content.mode +
+      content.theme +
+      content.palette +
+      '"><span id="msg" class="message">' +
+      content.message +
+      '<a id="plcy-lnk" class="policylink" href="' +
+      content.href +
+      '"' +
+      " target=" +
+      content.target +
+      ">" +
+      content.link +
+      '</a></span><div id="btn" class="compliance"><a  id="cookie-btn" class="spopupbtnok" >' +
+      content.btnText +
+      '</a></div><span class="credit"><a href="https://popupsmart.com" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 60 60" fill="currentColor"><path id="popupsmart" d="M56.627,12.279a22.441,22.441,0,0,0-9.549-9.074c-4.122-2.088-8.951-3.2-15.722-3.2H28.644c-6.769,0-11.6,1.112-15.72,3.2a22.425,22.425,0,0,0-9.551,9.072C1.174,16.191,0,20.783,0,27.214v5.578c0,6.434,1.173,11.024,3.373,14.934A22.412,22.412,0,0,0,12.924,56.8c4.12,2.094,8.949,3.206,15.72,3.206h2.711c6.771,0,11.6-1.112,15.72-3.206a22.427,22.427,0,0,0,9.551-9.072c2.2-3.91,3.373-8.5,3.373-14.934V27.216C60,20.78,58.827,16.19,56.627,12.279ZM30,45.006c-.237,0-.473-.005-.708-.015l-.211-.012c-.14-.008-.28-.019-.419-.031-.123-.011-.245-.022-.367-.036l-.191-.024a14.979,14.979,0,0,1-2.672-.59V44.3a14.861,14.861,0,0,1-6.294-3.955,1.406,1.406,0,1,0-2.036,1.94,17.648,17.648,0,0,0,8.33,4.944v.354a5.214,5.214,0,1,1-10.428,0V30.046c0-.013,0-.026,0-.039a15,15,0,1,1,15,15Z" transform="translate(0 -0.005)"></path></svg><span>Powered by Popupsmart</span></a></span></div>';
+
+    document.body.appendChild(conDivObj);
+    fadeIn(conDivObj);
+
+    document
+      .getElementById("cookie-btn")
+      .addEventListener("click", function () {
+        saveCookie();
+        fadeOut(conDivObj);
+      });
+  };
+
+  let fadeOut = function (element) {
+    var op = 1;
+    var timer = setInterval(function () {
+      if (op <= 0.1) {
+        clearInterval(timer);
+        conDivObj.parentElement.removeChild(conDivObj);
+      }
+      element.style.opacity = op;
+      element.style.filter = "alpha(opacity=" + op * 100 + ")";
+      op -= op * 0.1;
+    }, fadeOutTime);
+  };
+  let fadeIn = function (element) {
+    var op = 0.1;
+    var timer = setInterval(function () {
+      if (op >= 1) {
+        clearInterval(timer);
+      }
+      element.style.opacity = op;
+      element.style.filter = "alpha(opacity=" + op * 100 + ")";
+      op += op * 0.1;
+    }, fadeInTime);
+  };
+
+  let checkCookie = function (key) {
+    var keyValue = document.cookie.match("(^|;) ?" + key + "=([^;]*)(;|$)");
+    return keyValue ? true : false;
+  };
+
+  let saveCookie = function () {
+    var expires = new Date();
+    expires.setTime(expires.getTime() + cookie.expiryDays);
+    document.cookie =
+      cookie.name +
+      "=" +
+      "ok" +
+      ";expires=" +
+      expires.toUTCString() +
+      "path=" +
+      cookie.path;
+  };
+
+  this.init = function (param) {
+    if (checkCookie(cookie.name)) return;
+
+    if (typeof param === "object") {
+      if ("ButtonText" in param) content.btnText = param.ButtonText;
+      if ("Mode" in param) content.mode = " " + param.Mode;
+      if ("Theme" in param) content.theme = " " + param.Theme;
+      if ("Palette" in param) content.palette = " " + param.Palette;
+      if ("Message" in param) content.message = param.Message;
+      if ("LinkText" in param) content.link = param.LinkText;
+      if ("Location" in param) content.href = param.Location;
+      if ("Target" in param) content.target = param.Target;
+      if ("Time" in param)
+        setTimeout(function () {
+          createPopUp();
+        }, param.Time * 1000);
+      else createPopUp();
+    }
+  };
+}
+window.start = new Pop();

Client/index.html

@@ -8,7 +8,7 @@
 </head>
 <body id="test-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>
+    <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>
@@ -27,7 +27,7 @@ changes visibility with JS-->
                 These are generated using javascript for search
 
             <div class="item">
-                <img src="search.png"></img>
+                <img src="placeholder.png"></img>
                 <h3><span>Song title</span></h3>
                 <h4>Artist</h4>
             </div>
@@ -83,8 +83,6 @@ changes visibility with JS-->
             </div>
             <div class="item">
                 <h2>Share the remote:</h2>
-                <!-- <p class="italic">Hit settings icon to refresh the code</p>
-                 You actually no longer need to do that, it does it anytime the ip changes -->
                 <div id="qrcode" alt="QR code to the remote URL"></div>
             </div>
             <h1>Admin Settings</h1>
@@ -111,13 +109,13 @@ changes visibility with JS-->
     <!--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="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="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="skip-button" src="./images/skip.png" alt="Skip"></img>
-        <img class="control-button" id="search-button" src="./images/search.png" alt="search"></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="/ext/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="scripts.js"></script>
 </body>
 </html>

readme.md

@@ -52,7 +52,6 @@ These are specific details on each section of the app, and how to use them
     - Running with `--directory (directoryOfmp3s)` allows for sound files to be in a different place
         - Default `"./sound/"`
         - _This setting might be kinda iffy on Linux. You're on Linux just go and edit it if you have issues_
-        - ~~__Make certain you only use forward slashes in your directory, even on Windows__~~ I think this should be fine now i'll check later
 - `songDatabase.db` stores all the information about each song in a SQLite database with tables `songs` and `meta`
 - `webbyBits.py` imports the database, runs all music playing, and accepts all commands from clients
     - Searches return matching songs
@@ -88,4 +87,7 @@ From left to right:
         - *Because the volume can be controlled in the client, for best usage set your device volume as high as possible and turn it down using this slider*
     - QR code to allow others to connect to and use the Remote
 
+## External Credits
+ - QR Code Generator: JS file found [here](https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js)
+ - Cookie Popup: JS file found [here](https://cookieconsent.popupsmart.com/src/js/popper.js)
 *See `LICENSE.md` for redistribution details.