added left side pane with transition, content to be added

.syncedlyrics/musixmatch_token.json

@@ -1 +1 @@
-{"token": "2405094b2701c575f2a99e2a27bcc795a1413ae719c296da64cae9", "expiration_time": 1715289885}
+{"token": "2405132d7b80d1a072129196642e3c2675e8f036f7663fa58037a0", "expiration_time": 1715576057}

templates/webapp.html

@@ -8,9 +8,8 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>
 <style>
     .animated-background {
-        transition: background-color 1s ease-in-out; /* add a transition effect */
+        transition: background-color 1s ease-in-out, margin-left 0.5s; /* add a transition effect */
         background-color: var(--color); /* initial background color */
-        transition: margin-left 0.5s; /* add a transition effect */
     }
     .progress-container {
         position: fixed;
@@ -105,6 +104,17 @@
         <div class="total">
             <div class="leftside" id="leftpage">
                 <a href="javascript:void(0)" onclick="closeNav()">Close</a>
+                <div class="total">
+                    <div class="left">
+
+                    </div>
+                    <div class="middle">
+                        <input type="range" id="volume">
+                    </div>
+                    <div class="right">
+
+                    </div>
+                </div>
             </div>
             <span onclick="openNav()">Swipe</span>
             <div class="left">
@@ -130,11 +140,6 @@
                 <p id="lyric" class="lyrics">{{ data['lyric'] }}</p>
             </div>
         </div>
-    <div style="padding-top: 5px;">
-        <div id="progress_container" class="progress-container">
-            <div id="progress_bar" class="progress-bar"></div>
-        </div>
-    </div>
     <script>
         let id, is_playing, is_liked, duration_ms, canvas_url, lyrics, progress_ms;
         // Function to update the values every second
@@ -276,16 +281,19 @@
             songText = document.querySelector('.song-text');
             artistText = document.querySelector('.artist-text');
             buttonsDiv = document.querySelector('.buttons');
+            lyricsDiv = document.querySelector('.lyrics');
             if (Math.sqrt(0.299 * (color[0] ** 2) + 0.587 * (color[1] ** 2) + 0.114 * (color[2] ** 2)) > 170) {
                 songText.style.color = 'black';
                 artistText.style.color = 'black';
                 buttonsDiv.style.filter = 'invert(100%)';
+                lyricsDiv.style.color = 'black';
                 darkColor = [color[0] - 75, color[1] - 75, color[2] - 75]
                 document.getElementById('progress_bar').style.backgroundColor = 'rgb(' + darkColor + ')';
             } else {
                 songText.style.color = 'white';
                 artistText.style.color = 'white';
                 buttonsDiv.style.filter = '';
+                lyricsDiv.style.color = 'white';
                 lightColor = [color[0] + 75, color[1] + 75, color[2] + 75]
                 document.getElementById('progress_bar').style.backgroundColor = 'rgb(' + lightColor + ')';
             }
@@ -362,4 +370,11 @@
         });
     </script>
 </body>
+<footer>
+    <div style="padding-top: 5px;">
+        <div id="progress_container" class="progress-container">
+            <div id="progress_bar" class="progress-bar"></div>
+        </div>
+    </div>
+</footer>
 </html>

todo.txt

@@ -15,3 +15,6 @@ CANT GET LYRICS VAR TO BE ACCESSED OUTSIDE OF FUNCTION. AHHHH
 
 MAKE album/canvas 33.3%, middle 33.3%, lyrics 33.3% to make sure nothing
 moves around if the album switches to a canvas
+
+have animation for going to left side page not push content to the right, have it
+move the content (album, controls, song info, etc.) to the bottom with a nice animation.