brandon/spotify-gui.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

design and color changes

Browse Source
This commit is contained in:
Brandon4466
2024-05-01 00:08:41 -07:00
parent 555dae121c
commit bd5845dd04
2 changed files with 17 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
templates/webapp.html
View File

@@ -234,17 +234,11 @@
const color = colorThief.getColor(img);
document.body.style.backgroundColor = 'rgb(' + color + ')';
getLuminance(color);
document.getElementById('progress_container').style.backgroundColor = 'rgb(' + color + ')';
lightColor = [color[0] + 50, color[1] + 50, color[2] + 50]
document.getElementById('progress_bar').style.backgroundColor = 'rgb(' + lightColor + ')';
} else {
img.addEventListener('load', function() {
const color = colorThief.getColor(img);
document.body.style.backgroundColor = 'rgb(' + color + ')';
getLuminance(color);
document.getElementById('progress_container').style.backgroundColor = 'rgb(' + color + ')';
lightColor = [color[0] + 50, color[1] + 50, color[2] + 50]
document.getElementById('progress_bar').style.backgroundColor = 'rgb(' + lightColor + ')';
});
}
}
@@ -253,18 +247,24 @@
document.getElementById('name').style.color = 'black';
document.getElementById('artist').style.color = 'black';
document.getElementById('lyric').style.color = 'black';
document.getElementbyId('previous').style.filter = 'invert(100%)';
document.getElementbyId('playpause').style.filter = 'invert(100%)';
document.getElementbyId('next').style.filter = 'invert(100%)';
document.getElementbyId('like').style.filter = 'invert(100%)';
document.getElementById('previous').style.filter = 'invert(100%)';
document.getElementById('playpause').style.filter = 'invert(100%)';
document.getElementById('next').style.filter = 'invert(100%)';
document.getElementById('like').style.filter = 'invert(100%)';
document.getElementById('progress_container').style.backgroundColor = 'rgb(' + color + ')';
darkColor = [color[0] - 75, color[1] - 75, color[2] - 75]
document.getElementById('progress_bar').style.backgroundColor = 'rgb(' + darkColor + ')';
} else {
document.getElementById('name').style.color = 'white';
document.getElementById('artist').style.color = 'white';
document.getElementById('lyric').style.color = 'white';
document.getElementbyId('previous').style.filter = '';
document.getElementbyId('playpause').style.filter = '';
document.getElementbyId('next').style.filter = '';
document.getElementbyId('like').style.filter = '';
document.getElementById('previous').style.filter = '';
document.getElementById('playpause').style.filter = '';
document.getElementById('next').style.filter = '';
document.getElementById('like').style.filter = '';
document.getElementById('progress_container').style.backgroundColor = 'rgb(' + color + ')';
lightColor = [color[0] + 75, color[1] + 75, color[2] + 75]
document.getElementById('progress_bar').style.backgroundColor = 'rgb(' + lightColor + ')';
}
}
// function getLuminance() {