From 71e751e48cf280e6fcb967069680863d1f6c1f61 Mon Sep 17 00:00:00 2001 From: santic-zombie Date: Thu, 2 Apr 2020 10:19:10 +0300 Subject: [PATCH] new UI --- css/style.css | 113 +++++++++++++++++++++++++++++++++++++++++--------- index.html | 23 +++++++--- js/audio.js | 4 +- js/radio.js | 23 +++++++--- 4 files changed, 130 insertions(+), 33 deletions(-) diff --git a/css/style.css b/css/style.css index 78bb2dc..36b4212 100644 --- a/css/style.css +++ b/css/style.css @@ -16,43 +16,85 @@ body { overflow: auto; } -#song{ - width: 400px; - height: 340px; +#RadioBox{ + width: 410px; + height: 350px; background-color: rgba(0, 0, 0, 0.7); border-radius: 10px; color: #fff; } -.btn { - width: 100px; - height: 60px; - border-radius: 5px; +.tagBOX{ + width: 410px; + height: 150px; +} + +.tagA { + width: 400px; + height: 20px; + border-radius: 5px 5px 0 0; border: #f54e4e; - background-color: #f54e4e; + background-color: #000; color: #fff; transition: 0.5s ease all; outline: none; cursor: pointer; text-align: center; - margin: auto; - justify-content : center; + margin-left: auto; + margin-right: auto +} +.tagA:hover { + color: #000; + background-color: #fff; } -.btn:hover { - color: #f54e4e; +.tagB { + width: 400px; + height: 20px; + border-radius: 0; + border: #f54e4e; background-color: #fff; + color: #000; + transition: 0.5s ease all; + outline: none; + text-align: center; + margin-left: auto; + margin-right: auto } -.btn-wrap { - max-width: 250px; - margin: auto; - display: -webkit-flex; - display: -moz-flex; - display: -ms-flex; - display: -o-flex; - display: flex; +.tagC { + width: 400px; + height: 20px; + border-radius: 0; + border: #f54e4e; + background-color: #000; + color: #fff; + transition: 0.5s ease all; + outline: none; + cursor: pointer; + text-align: center; + margin-left: auto; + margin-right: auto +} + +.tagC:hover { + color: #000; + background-color: #fff; +} + +.tagD { + width: 400px; + height: 20px; + 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 } h1::before { @@ -82,6 +124,37 @@ h1 { margin:10px 50px; } +.btn { + width: 100px; + height: 60px; + border-radius: 5px; + border: #f54e4e; + background-color: #000; + color: #fff; + transition: 0.5s ease all; + outline: none; + cursor: pointer; + text-align: center; + margin: auto; + justify-content : center; + +} + +.btn:hover { + color: #000; + background-color: #fff; +} + +.btn-wrap { + max-width: 250px; + margin: auto; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; +} + DIV { text-align: center } diff --git a/index.html b/index.html index 5ead3a7..1dab60b 100755 --- a/index.html +++ b/index.html @@ -18,13 +18,26 @@
-
+

Just Radio

-
-
- -
title
 +
Stopped
+
+
+
+ +
+
ArtistName
+
+ +
+
SongName
+

@@ -46,7 +59,7 @@
- +
diff --git a/js/audio.js b/js/audio.js index cb2600c..724ace4 100644 --- a/js/audio.js +++ b/js/audio.js @@ -6,13 +6,13 @@ audio.volume = 0.01; var play = document.getElementById('play'); play.addEventListener('click', function() { - $("#myPlay").text("Now playing:"); + $("#PlayStat").text("Now playing"); audio.play(); }, false); var pause = document.getElementById('pause'); pause.addEventListener('click', function() { - $("#myPlay").text("Paused"); + $("#PlayStat").text("Paused"); audio.pause(); }, false); diff --git a/js/radio.js b/js/radio.js index 93baa95..b9a7788 100644 --- a/js/radio.js +++ b/js/radio.js @@ -40,9 +40,9 @@ function show() if (MPDartist == '' && MPDCurr != MPDfile) { MPDartist = MPDfile.replace(/\s-.*/,'').replace(/^\s*/,'').replace(/\s*$/,''); MPDsong = MPDfile.replace(/^.*\s-/,'').replace(/^\s*/,'').replace(/\s*$/,''); - getLastFM_url(MPDartist, MPDsong); + getLastFM_info(MPDartist, MPDsong); } else if (MPDCurr != MPDfile) { - getLastFM_url(MPDartist, MPDsong); + getLastFM_info(MPDartist, MPDsong); } MPDCurr = MPDfile; }); @@ -55,15 +55,26 @@ $(document).ready( } ); -function getLastFM_url(FMartist, FMsong) +function getLastFM_info(FMartist, FMsong) { lastfm.artist.getInfo({artist: FMartist}, {success: function(data){ console.log(data.artist.url); // формируем ссылку на артиста в LastFM - document.querySelector('a[name="lastFMlink"]').setAttribute('href', data.artist.url); - // выводим название артиста и трека ссылкой - $('#title').html(FMartist+' - '+FMsong); + document.querySelector('form[name="artistURL"]').setAttribute('action', data.artist.url); + // выводим название артиста + $("#artistName").text(FMartist); }, error: function(code, message){ console.log('Error #'+code+': '+message);} }); + + lastfm.track.getInfo({track: FMsong, artist: FMartist}, {success: function(data){ + console.log(data.track.url); + // формируем ссылку на артиста в LastFM + document.querySelector('form[name="songURL"]').setAttribute('action', data.track.url); + // выводим название трека + $("#songName").text(FMsong); + }, error: function(code, message){ + console.log('Error #'+code+': '+message);} + }); + }