From ea7db3e6fed3a6d7d963008b40b3c4863d46d788 Mon Sep 17 00:00:00 2001
From: Maksim Pischulenok <pischule@outlook.com>
Date: Sun, 8 Jun 2025 13:30:53 +0300
Subject: [PATCH] Add dynamic background image synchronization with main image

- Define CSS variable for background image in root element
- Create updateBackgroundImage function to sync background with main image
- Modify refreshImage to update both main and background images
- Maintain consistent gradient overlay for both images
- Keep existing 5-minute refresh interval
---
 static/index.html | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/static/index.html b/static/index.html
index 5aeb415..b4d7e05 100644
--- a/static/index.html
+++ b/static/index.html
@@ -6,6 +6,9 @@
     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📺</text></svg>">
     <title>memes-tv</title>
     <style>
+        :root {
+            --bg-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('_.jpeg');
+        }
         * {
             margin: 0;
             padding: 0;
@@ -27,7 +30,7 @@
             left: 0;
             width: 100%;
             height: 100%;
-            background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('_.jpeg');
+            background-image: var(--bg-image);
             background-size: cover;
             background-position: center;
             background-repeat: no-repeat;
@@ -49,10 +52,20 @@
 </body>
 <script>
     const img = document.getElementById('image');
+    
+    function updateBackgroundImage(url) {
+      // Update the background image with the same URL as the main image
+      document.documentElement.style.setProperty(
+        '--bg-image', 
+        `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('${url}')`
+      );
+    }
 
     function refreshImage() {
       // Add timestamp to URL to bypass cache
-      img.src = img.src.split('?')[0] + '?t=' + new Date().getTime();
+      const newSrc = img.src.split('?')[0] + '?t=' + new Date().getTime();
+      img.src = newSrc;
+      updateBackgroundImage(newSrc);
     }
 
     // Refresh every 5 minutes