3 files changed, 30 insertions, 11 deletions
diff --git a/static/index.css b/static/index.css
index 7748957..8b552c2 100644
--- a/static/index.css
+++ b/static/index.css
@@ -17,8 +17,7 @@ body {
 .controls {
     background-color: rgb(0%, 0%, 0%, 0.5);
     height: 5%;
-    padding: 0px;
-    padding-top: 3px;
+    padding: 3px;
     padding-left: 10px;
     padding-right: 10px;
     border-radius: 10px 10px 0px 0px;
diff --git a/static/index.html b/static/index.html
index 4ebe902..20d5f41 100644
--- a/static/index.html
+++ b/static/index.html
@@ -6,10 +6,12 @@
     <body>
         <div class="Info">
             <h1> Rock culture exam </h1>
-            <h1 id="Artist" > Artist </h1>
-            <h1 id="Title" > Title  </h1>
-            <h1 id="Album" > Album </h1>
-            <h1 id="Start" > Start position </h1>
+            <div id="InfoBlock">
+                <h1 id="Artist"> Artist </h1>
+                <h1 id="Title"> Title  </h1>
+                <h1 id="Album"> Album </h1>
+                <h1 id="Start"> Start position </h1>
+            </div>
         </div>
         <div class="controls">
             <button onclick="Pause()" class="controlBtn"> 
@@ -21,6 +23,10 @@
             <button onclick="SetRandomSong()" class="controlBtn"> 
                 <h1 onclick="Pause" class="controlElem"> Next song </h1>
             </button>
+            <h1 id="Status" class="controlElem"> No music </h1>
+            <button onclick="ToggleInfo()" class="controlBtn"> 
+                <h1 onclick="Pause" class="controlElem" id="ToggleBtn"> Hide info </h1>
+            </button>
         </div>
         <audio id="mainAudio">
             <source type="audio/mpeg" />
diff --git a/static/index.js b/static/index.js
index 6cda2f7..237386c 100644
--- a/static/index.js
+++ b/static/index.js
@@ -1,3 +1,4 @@
+let isInfoShown = true;
 
 function GetSongs() {
     fetch("/api/getSongs").then(r => r.json().then(body => {
@@ -11,24 +12,37 @@ function SetRandomSong() {
         console.log(player);
         console.log(body);
         player.src = "/api/getSong?name=" + encodeURI(body.Name);
-        player.play();
 
-        document.getElementById("Artist").innerHTML = "Artist: " + body.Meta.Name;
-        document.getElementById("Title").innerHTML =  "Title: " + body.Meta.Author;
+        document.getElementById("Artist").innerHTML = "Artist: " + body.Meta.Author;
+        document.getElementById("Title").innerHTML =  "Title: " + body.Meta.Name;
         document.getElementById("Album").innerHTML =  "Album: " + body.Meta.Album;
         document.getElementById("Start").innerHTML =  "Start: " + body.Start + "s";
 
+        player.play();
+        document.getElementById("Status").innerHTML = "Playing";
     }));
 }
 
 function Pause() {
     const player = document.getElementById("mainAudio");
     player.pause();
-    console.log("Paused audio");
+    document.getElementById("Status").innerHTML = "Paused";
 }
 
 function Resume() {
     const player = document.getElementById("mainAudio");
     player.play();
-    console.log("Paused audio");
+    document.getElementById("Status").innerHTML = "Playing";
+}
+
+function ToggleInfo() {
+    if (isInfoShown) {
+        document.getElementById("InfoBlock").style.display = 'none';
+        document.getElementById("ToggleBtn").innerHTML = 'Show info';
+        isInfoShown = false;
+    } else {
+        document.getElementById("InfoBlock").style.display = 'block';
+        document.getElementById("ToggleBtn").innerHTML = 'Hide info';
+        isInfoShown = true;
+    }
 }