Change mail provider to custom built one

Give Kudos in README

Update eq if currently listening to or not

Preview spotify logo

Add header

Give room for header

change color of status for contrast

Update currentStatus

Test height proporty

change colors + margin

Add gradient to eq

Add background to bars

Give transparency fill to bars

Re-add background to bars to evaluate interactions

Fix background for all bars to apply gradients

Fix syntax error

Zoom in background for gradient scroll

Slow animation of gradient

Set gradient animation to run first, then sound

Modify zoom of bar background

absolute bar travel time

remove alternate animation for bars

uncenter start background position

remove sound animation for debug

Zoom out background

remove random.radient

Remove debug

Only randomize sound animation duration

Speed up and add more bars

Actually speed them up

ZOOOOOM

change bar animation to ease

Slow down bar speeds

Update README.md

set bar animation to ease-out

Set bars to ease in

Speed up gradient animation

Speed up gradient animation

Get only last played song if not listening

Fix syntax error on itemIndex declaration

Generate random bezier for bar animations

Expand speed window for bars

Pan time window to favor fast

add preview and prepare for PR

Add preview and prepare for PR

change preview.mp4 to .gif

README.md

@@ -9,7 +9,7 @@
 
 &nbsp;<p align="center">This repository is [unlicense](https://choosealicense.com/licenses/unlicense/)[d], feel free to fork!<br><br>
 [![Linkedin](https://img.shields.io/badge/linked-in-369?style=flat-square&logo=linkedin&logoColor=white&color=blue)](https://www.linkedin.com/in/andrew-novac)
-[![E-Mail](https://img.shields.io/badge/email-reveal-2a8?style=flat-square&logo=gmail&logoColor=white)](https://mailhide.io/e/5ck1H)
+[![E-Mail](https://img.shields.io/badge/email-reveal-2a8?style=flat-square&logo=gmail&logoColor=white)](https://mail.novac.dev/)
 [![Visits](https://komarev.com/ghpvc/?username=novatorem&logo=GitHub&label=github%20visits&color=336699&logoColor=white&style=flat-square)](https://github.com/novatorem)
 
   </p>

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)

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}}
             </style>
 
-            <!-- <div class="currentStatus">{{status}}</div> -->
+            <!-- <div class="currentStatus" color="white">{{status}}</div> -->
 
             <div class="main">
                 <a class="art" href="{}" target="_blank">
@@ -134,4 +151,4 @@
 
         </div>
     </foreignObject>
-</svg>
+</svg>

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;