diff --git a/css/msgbox.css b/css/msgbox.css index 96ed1b7..be922f6 100644 --- a/css/msgbox.css +++ b/css/msgbox.css @@ -8,7 +8,7 @@ right: 20px; text-align: center; border-radius: 10px; - background-color: rgba(0, 0, 0, 0.7); + background-color: rgba(60, 60, 60, 0.9); } #jGrowl{ margin: 0 12px 0 12px; diff --git a/css/style.css b/css/style.css index cea358b..a3ed0d5 100644 --- a/css/style.css +++ b/css/style.css @@ -12,15 +12,15 @@ body { display: flex; align-items: center; align-content: center; - justify-content: center; + justify-content: left; overflow: auto; } #RadioBox{ width: 450px; - height: 490px; - background-color: rgba(0, 0, 0, 0.7); - border-radius: 10px; + height: 100%; + background-color: rgba(60, 60, 60, 0.9); + /* border-radius: 10px; */ padding: 0 5px; color: #fff; } @@ -52,7 +52,7 @@ body { .tagB { width: 100%; - //height: 20px; + /* height: 20px; */ border-radius: 0 0 5px 5px; border: #f54e4e; background-color: #fff; @@ -136,12 +136,56 @@ h1 { //margin: auto; } +.mute_btn:hover { + color: #000; + background-color: #fff; +} + .volume-wrap { align-items: center; justify-content: center; display: flex; } +.tcon { + width: 100%; + border-radius: 5px 5px 0 0; + border: #f54e4e; + background-color: #000; + color: #fff; + transition: 0.5s ease all; + outline: none; + text-align: center; + margin-left: auto; + margin-right: auto; +} + +.tlist { + width: 100%; + height: 35%; + border-radius: 0 0 5px 5px; + border: #f54e4e; + background-color: #fff; + color: #000; + transition: 0.5s ease all; + outline: none; + text-align: center; + margin-left: auto; + margin-right: auto; + overflow: auto; +} + +.list_el { + border-bottom: 2px double #000; + background-color: #d3d3d3; + color: #000; +} + +.list_el:nth-child(odd) { + border-bottom: 2px double #000; + background-color: #fff; + color: #000; +} DIV { text-align: center diff --git a/index.html b/index.html index 77ba26b..c4dd93b 100755 --- a/index.html +++ b/index.html @@ -74,6 +74,14 @@ +
+ +
+ Last played tracks +
+
+
+
diff --git a/js/audio.js b/js/audio.js index 64b40cc..e007f60 100644 --- a/js/audio.js +++ b/js/audio.js @@ -24,7 +24,7 @@ $("#volume").mousemove(function(){ var copyClipBoard = document.getElementById('buff'); copyClipBoard.addEventListener('click', function () { - var MsgText = $('

Trackname copied to clipboard

'); + var MsgText = $('

Track name copied to clipboard

'); PopUpMsg(MsgText); //нашли наш контейнер var ta = document.getElementById('trackname'); @@ -49,11 +49,11 @@ copyClipBoard.addEventListener('click', function () { .toggleClass('fas fa-volume-up') .toggleClass('fas fa-volume-mute'); if (audio.muted === false) { - var MsgText = $('

Mute Sound

'); + var MsgText = $('

Mute sound

'); PopUpMsg(MsgText); audio.muted = true; } else { - var MsgText = $('

unmute Sound

'); + var MsgText = $('

Unmute sound

'); PopUpMsg(MsgText); audio.muted = false; } diff --git a/js/radio.js b/js/radio.js index d2b2255..ea2b31a 100644 --- a/js/radio.js +++ b/js/radio.js @@ -33,10 +33,12 @@ function show() getArtistURL(MPDartist); $("#trackname span").text(MPDartist+" - "+MPDsong); getYouTubeRequest(MPDfile); + addText(MPDfile); } else if (MPDCurr != MPDfile) { getArtistURL(MPDartist); $("#trackname span").text(MPDartist+" - "+MPDsong); getYouTubeRequest(MPDfile); + addText(MPDfile); } MPDCurr = MPDfile; }); @@ -88,3 +90,10 @@ function showResults(results) { document.querySelector('a[name="YouTubeURL"]').setAttribute('href', "https://www.youtube.com/watch?v="+YouURL); console.log("https://www.youtube.com/watch?v="+YouURL); } + +function addText(MPDfile) { + let last_track = document.createElement('div'); + last_track.className = "list_el"; + last_track.innerHTML = MPDfile; + track_list.prepend(last_track); +}