santic
/
radio
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

new UI

Browse Source
master
santic-zombie 5 years ago
parent 485716e10a
commit 71e751e48c
4 changed files with 130 additions and 33 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 113
      css/style.css
  2. 21
      index.html
  3. 4
      js/audio.js
  4. 23
      js/radio.js

113
css/style.css
Unescape View File

@ -16,43 +16,85 @@ body {
overflow: auto; overflow: auto;
} }
#song{ #RadioBox{
width: 400px; width: 410px;
height: 340px; height: 350px;
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7);
border-radius: 10px; border-radius: 10px;
color: #fff; color: #fff;
} }
.btn { .tagBOX{
width: 100px; width: 410px;
height: 60px; height: 150px;
border-radius: 5px; }
.tagA {
width: 400px;
height: 20px;
border-radius: 5px 5px 0 0;
border: #f54e4e; border: #f54e4e;
background-color: #f54e4e; background-color: #000;
color: #fff; color: #fff;
transition: 0.5s ease all; transition: 0.5s ease all;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
margin: auto; margin-left: auto;
justify-content : center; margin-right: auto
}
.tagA:hover {
color: #000;
background-color: #fff;
} }
.btn:hover { .tagB {
color: #f54e4e; width: 400px;
height: 20px;
border-radius: 0;
border: #f54e4e;
background-color: #fff; background-color: #fff;
color: #000;
transition: 0.5s ease all;
outline: none;
text-align: center;
margin-left: auto;
margin-right: auto
} }
.btn-wrap { .tagC {
max-width: 250px; width: 400px;
margin: auto; height: 20px;
display: -webkit-flex; border-radius: 0;
display: -moz-flex; border: #f54e4e;
display: -ms-flex; background-color: #000;
display: -o-flex; color: #fff;
display: flex; 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 { h1::before {
@ -82,6 +124,37 @@ h1 {
margin:10px 50px; 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 { DIV {
text-align: center text-align: center
} }

21
index.html
Unescape View File

@ -18,13 +18,26 @@
<body> <body>
<div class="parent"> <div class="parent">
<div id="song"> <div id="RadioBox">
<h1>Just Radio</h1> <h1>Just Radio</h1>
<div id="myPlay">-</div> <div id="PlayStat">Stopped</div>
<br>
<a name="lastFMlink" href="" target="_blank"><div id="title">title</div></a> <div class="tagWindow">
<form name="artistURL" action="" target="_blank">
<button class="tagA">
Artist
</button>
</form>
<div id="artistName" class="tagB">ArtistName</div>
<form name="songURL" action="" target="_blank">
<button class="tagC">
Song
</button>
</form>
<div id="songName" class="tagD">SongName</div>
</div>
<br> <br>

4
js/audio.js
Unescape View File

@ -6,13 +6,13 @@ audio.volume = 0.01;
var play = document.getElementById('play'); var play = document.getElementById('play');
play.addEventListener('click', function() { play.addEventListener('click', function() {
$("#myPlay").text("Now playing:"); $("#PlayStat").text("Now playing");
audio.play(); audio.play();
}, false); }, false);
var pause = document.getElementById('pause'); var pause = document.getElementById('pause');
pause.addEventListener('click', function() { pause.addEventListener('click', function() {
$("#myPlay").text("Paused"); $("#PlayStat").text("Paused");
audio.pause(); audio.pause();
}, false); }, false);

23
js/radio.js
Unescape View File

@ -40,9 +40,9 @@ function show()
if (MPDartist == '' && MPDCurr != MPDfile) { if (MPDartist == '' && MPDCurr != MPDfile) {
MPDartist = MPDfile.replace(/\s-.*/,'').replace(/^\s*/,'').replace(/\s*$/,''); MPDartist = MPDfile.replace(/\s-.*/,'').replace(/^\s*/,'').replace(/\s*$/,'');
MPDsong = 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) { } else if (MPDCurr != MPDfile) {
getLastFM_url(MPDartist, MPDsong); getLastFM_info(MPDartist, MPDsong);
} }
MPDCurr = MPDfile; 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){ lastfm.artist.getInfo({artist: FMartist}, {success: function(data){
console.log(data.artist.url); console.log(data.artist.url);
// формируем ссылку на артиста в LastFM // формируем ссылку на артиста в LastFM
document.querySelector('a[name="lastFMlink"]').setAttribute('href', data.artist.url); document.querySelector('form[name="artistURL"]').setAttribute('action', data.artist.url);
// выводим название артиста и трека ссылкой // выводим название артиста
$('#title').html(FMartist+' - '+FMsong); $("#artistName").text(FMartist);
}, error: function(code, message){ }, error: function(code, message){
console.log('Error #'+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);}
});
} }

Write Preview
Loading…
Cancel
Save