From 429a575d9806bfd1c97bfdf28daf4b4f89766f36 Mon Sep 17 00:00:00 2001
From: brandon <brandon@bbrunson.com>
Date: Fri, 30 May 2025 15:38:13 -0700
Subject: [PATCH] update design and color theming, still WIP

---
 index.html  | 29 +++++++++++++++--------------
 renderer.js | 28 ++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 14 deletions(-)
diff --git a/index.html b/index.html
index da0922e..0d1c3fe 100644
--- a/index.html
+++ b/index.html
@@ -3,50 +3,50 @@
 <head>
   <meta charset="UTF-8">
   <title>NotPlexApp</title>
-  <script src="https://unpkg.com/@ffmpeg/ffmpeg@0.11.8/dist/ffmpeg.min.js"></script>
+  <!-- <script src="https://unpkg.com/@ffmpeg/ffmpeg@0.11.8/dist/ffmpeg.min.js"></script> -->
   <style>
     html, body {
       margin: 0;
       padding: 0;
       height: 100%;
       font-family: Arial, sans-serif;
+      background-color: rgb(46, 46, 46); /* Dark grey background */
+      color: #eee;            /* Light text for contrast */
     }
     /* Tabs style */
     #tabs {
       display: flex;
-      background: #333;
+      background: #444; /* Darker grey for tab background */
     }
     #tabs button {
       flex: 1;
       padding: 10px;
       color: #fff;
-      background: #444;
+      background: #555; /* Dark grey button color */
       border: none;
       cursor: pointer;
       font-size: 16px;
     }
     #tabs button.active {
-      background: #222;
+      background: #333; /* Even darker for active state */
     }
     /* Content lists (item grids inside each section) */
     .content-list {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-      gap: 20px;
-      overflow-x: visible; /* ensure no horizontal scrolling */
-      /* Optional: force items to wrap into multiple rows */
+      gap: 0px;
+      overflow-x: visible;
       grid-auto-rows: auto;
     }
     /* Section‐container: stack each <section> as a row */
     .section-list {
       display: flex;
       flex-direction: column;
-      gap: 40px;              /* space between sections */
+      gap: 40px;
       padding: 20px;
       box-sizing: border-box;
-      height: calc(100% - 48px); /* adjust for tab height */
+      height: calc(100% - 48px);
       overflow-y: auto;
-      background-color: #f1f1f1;
     }
     .movie-item {
       cursor: pointer;
@@ -54,14 +54,15 @@
       flex-direction: column;
       align-items: center;
       text-align: center;
-      background: #fff;
-      padding: 10px;
-      box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
+      background: transparent; /* removed white background */
+      padding: 0;             /* removed padding */
+      box-shadow: none;       /* removed box-shadow */
     }
     .movie-item img {
-      width: 200px;
+      width: 180px; /* reduced width */
       height: auto;
       margin-bottom: 10px;
+      border-radius: 5px; /* added rounded corners */
     }
     /* Overlay for details/stream */
     #overlay {
diff --git a/renderer.js b/renderer.js
index c8791e7..0588b14 100644
--- a/renderer.js
+++ b/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;
+  }
 });
\ No newline at end of file
