UI improvements

index.html

@@ -108,10 +108,10 @@ <h1 style="display: inline-block; background-color: transparent;" class="text-ce
       </button>
     </div>
   </div>
-
+  
   <div class="absolute-centre glow" id="glow"></div>
 
-  <audio onplay="analyse()" onpause="stopAnalysis()" onended="location.reload()" id="audio" crossorigin="anonymous"></audio>
+  <audio onplay="analyse()" onpause="stopAnalysis()" onended="stop()" id="audio" crossorigin="anonymous"></audio>
 
   <div id="controls" style="opacity: 0; pointer-events: none;" class="bottom column">
     <div id="tooltip" class="tooltip"></div>

player.js

@@ -390,7 +390,7 @@ function uploadFile() {
                 if (error) {
                   console.error(error);
                 }
-                  
+
                 else {
                   console.log("Material Design Palette:", palette);
 
@@ -633,6 +633,33 @@ function play() {
   }
 }
 
+function stop() {
+  document.getElementById("controls").style.transition = "1s ease";
+  document.getElementById("controls").style.opacity = "0";
+
+  document.getElementById("navbar").style.transition = "1s ease";
+  document.getElementById("navbar").style.backgroundColor = localStorage.getItem("colour");
+
+  document.getElementById("settings").style.transition = "1s ease";
+  document.getElementById("settings").style.backgroundColor = localStorage.getItem("colour");
+
+  document.getElementById("upload1").style.transition = "1s ease";
+  document.getElementById("upload1").style.backgroundColor = localStorage.getItem("colour");
+
+  document.getElementById("upload2").style.transition = "1s ease";
+  document.getElementById("upload2").style.backgroundColor = localStorage.getItem("colour");
+
+  document.getElementById("about").style.transition = "1s ease";
+  document.getElementById("about").style.backgroundColor = localStorage.getItem("colour");
+
+  document.getElementById("cover-art").style.transition = "1s ease";
+  document.getElementById("cover-art").style.opacity = "0";
+
+  setTimeout(() => {
+    location.reload();
+  }, 1000);
+}
+
 function repeat() {
   if (document.getElementById("audio").loop == true) {
     document.getElementById("audio").loop = false;
@@ -783,9 +810,8 @@ document.addEventListener("keyup", (e) => {
   }
 
   else if (e.key == "s" && notEditingTitle) {
-    // Stop
     if (document.getElementById("audio").src) {
-      location.reload();
+      stop();
     }
   }