update design and color theming, still WIP

renderer.js

@@ -383,6 +383,8 @@ window.addEventListener('DOMContentLoaded', () => {
       });
       sectionAlpha.appendChild(gridAlpha);
       moviesListEl.appendChild(sectionAlpha);
+      // Update background gradient based on the movies list
+      updateAppBackground();
     });
   }
 
@@ -550,6 +552,8 @@ window.addEventListener('DOMContentLoaded', () => {
     });
     sectionAlpha.appendChild(gridAlpha);
     showsListEl.appendChild(sectionAlpha);
+    // Update background gradient based on TV shows count
+    updateAppBackground();
   }
 
   // Updated function to stream the episode without calling getEpisodeDetails
@@ -846,4 +850,28 @@ window.addEventListener('DOMContentLoaded', () => {
     const mediaId = videoElement.dataset.mediaId; // Retrieve mediaId from the video element
     connectToSyncSession(sessionId, mediaId, "movie", videoElement);
   });
+
+  // Updated: Use multiple radial gradients so that three corners are fixed grey and the top right is variable red.
+  function updateAppBackground() {
+    // Count movie and TV show items.
+    const movieCount = document.querySelectorAll('#movies-list .movie-item').length;
+    const showCount  = document.querySelectorAll('#shows-list .movie-item').length;
+    const totalItems = movieCount + showCount;
+    
+    // Calculate red and purple saturation values (spread out scale)
+    const redSaturation = Math.min(10 + totalItems / 80, 100);
+    // const purpleSaturation = Math.min(10 + totalItems / 1000, 100);
+
+    // console.log(redSaturation);
+    // i want it to have different stages. like 1-1000 items red gradient top right. 1000-2500 blue gradient bottom
+    // left. 2500+ green gradient bottom right.
+    
+    const gradient = 
+      'radial-gradient(circle farthest-side at 0% 100%, rgb(28, 28, 28) 0%, rgba(28, 28, 28, 0) 100%),' +
+      'radial-gradient(circle farthest-side at 100% 100%, rgb(38, 38, 38) 0%, rgba(38, 38, 38, 0) 100%),' +
+      `radial-gradient(circle farthest-side at 100% 0%, hsl(0, ${redSaturation}%, 30%) 0%, rgba(255, 0, 0, 0) 100%),` +
+      'radial-gradient(circle farthest-side at 0% 0%, rgb(51, 51, 51) 0%, rgba(51, 51, 51, 0) 100%)';
+    
+    document.body.style.background = gradient;
+  }
 });