diff --git a/README.md b/README.md
index 5641b43..06c9304 100644
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@
This repository is [unlicense](https://choosealicense.com/licenses/unlicense/)[d], feel free to fork!
[](https://www.linkedin.com/in/andrew-novac)
-[](https://mailhide.io/e/5ck1H)
+[](https://mail.novac.dev/)
[](https://github.com/novatorem)
diff --git a/api/spotify.py b/api/spotify.py
index d44f9d5..327ee5c 100644
--- a/api/spotify.py
+++ b/api/spotify.py
@@ -75,10 +75,15 @@ def barGen(barCount):
barCSS = ""
left = 1
for i in range(1, barCount + 1):
- anim = random.randint(1000, 1350)
+ anim = random.randint(500, 1000)
+ # below code generates random cubic-bezier values
+ x1 = random.random()
+ y1 = random.random()*2
+ x2 = random.random()
+ y2 = random.random()*2
barCSS += (
- ".bar:nth-child({}) {{ left: {}px; animation-duration: {}ms; }}".format(
- i, left, anim
+ ".bar:nth-child({}) {{ left: {}px; animation-duration: 15s, {}ms; animation-timing-function: ease, cubic-bezier({},{},{},{}); }}".format(
+ i, left, anim, x1, y1, x2, y2
)
)
left += 4
@@ -106,8 +111,8 @@ def makeSVG(data, background_color, border_color):
barCSS = barGen(barCount)
if data == {} or data["item"] == "None" or data["item"] is None:
- # contentBar = "" #Shows/Hides the EQ bar if no song is currently playing
- currentStatus = "Was playing:"
+ #contentBar = "" #Shows/Hides the EQ bar if no song is currently playing
+ currentStatus = "Recently played:"
recentPlays = recentlyPlayed()
recentPlaysLength = len(recentPlays["items"])
itemIndex = random.randint(0, recentPlaysLength - 1)
diff --git a/api/templates/spotify-dark.html.j2 b/api/templates/spotify-dark.html.j2
index b16c77f..824a67c 100644
--- a/api/templates/spotify-dark.html.j2
+++ b/api/templates/spotify-dark.html.j2
@@ -9,6 +9,7 @@
.currentStatus {
float: left;
+ color: #f7f7f7;
font-size: 24px;
position: static;
margin-top: -5px;
@@ -72,10 +73,15 @@
.bar {
width: 3px;
bottom: 1px;
- height: 3px;
+ height: 15px;
position: absolute;
- background: #1DB954cc;
- animation: sound 0ms -800ms linear infinite alternate;
+ background: #5433FF; /* fallback for old browsers */
+ background: -webkit-linear-gradient(to right, #20BDFF, #ab66ff, #5433FF, #20BDFF); /* Chrome 10-25, Safari 5.1-6 */
+ background: linear-gradient(to right, #20BDFF, #ab66ff, #5433FF, #20BDFF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+ background-size: 200% 100%;
+ background-position: 0% 50%;
+ background-attachment: fixed;
+ animation: gradient 15s ease infinite, sound 0ms -800ms ease-in infinite alternate;
}
.spotify-logo {
@@ -93,23 +99,34 @@
div {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
}
+
+ @keyframes gradient {
+ 0% {
+ background-position: 0% 50%;
+ }
+ 50% {
+ background-position: 100% 50%;
+ }
+ 100% {
+ background-position: 0% 50%;
+ }
+ }
@keyframes sound {
0% {
height: 3px;
opacity: .35;
}
-
100% {
height: 15px;
- opacity: 0.95;
+ opacity: 0.95
}
}
{{barCSS|safe}}
-
+
-
\ No newline at end of file
+
diff --git a/api/templates/spotify.html.j2 b/api/templates/spotify.html.j2
index 31801e1..1ef46e0 100644
--- a/api/templates/spotify.html.j2
+++ b/api/templates/spotify.html.j2
@@ -70,10 +70,15 @@
.bar {
width: 3px;
bottom: 1px;
- height: 3px;
+ height: 15px;
position: absolute;
- background: #1DB954cc;
- animation: sound 0ms -800ms linear infinite alternate;
+ background: #78ff8c; /* fallback for old browsers */
+ background: -webkit-linear-gradient(to right, #7ad8ff, #5eff69, #78ff8c, #7ad8ff); /* Chrome 10-25, Safari 5.1-6 */
+ background: linear-gradient(to right, #7ad8ff, #5eff69, #78ff8c, #7ad8ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+ background-size: 200% 100%;
+ background-position: 0% 50%;
+ background-attachment: fixed;
+ animation: gradient 15s ease infinite, sound 0ms -800ms ease-in infinite alternate;
}
.spotify-logo {
@@ -91,6 +96,18 @@
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
}
+ @keyframes gradient {
+ 0% {
+ background-position: 0% 50%;
+ }
+ 50% {
+ background-position: 100% 50%;
+ }
+ 100% {
+ background-position: 0% 50%;
+ }
+ }
+
@keyframes sound {
0% {
height: 3px;
diff --git a/preview.gif b/preview.gif
new file mode 100644
index 0000000..03181fb
Binary files /dev/null and b/preview.gif differ