Annoucement Web -Depreciated

templates/index.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Church Announcements</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      height: 100%;
+      background: #000;
+    }
+    .slideshow-container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+    /* Both images overlap exactly */
+    .slideshow-container img {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      transition: opacity 1s ease-in-out;
+      opacity: 0;
+    }
+    /* The active image is visible */
+    .slideshow-container img.active {
+      opacity: 1;
+    }
+  </style>
+</head>
+<body>
+  <div class="slideshow-container">
+    <img id="slide1" src="" alt="Announcement Slide">
+    <img id="slide2" src="" alt="Announcement Slide">
+  </div>
+  <!-- Include Socket.IO client library -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.min.js"></script>
+  <script>
+    const socket = io();
+    // Two image elements for crossfade
+    const slide1 = document.getElementById("slide1");
+    const slide2 = document.getElementById("slide2");
+    let currentVisible = 1;  // track which image is currently visible
+
+    socket.on('sync_slide', function(data) {
+      console.log("sync_slide received:", data);
+      const newUrl = data.slide_url;
+      // Determine which image is hidden and which is visible.
+      let currentImg = currentVisible === 1 ? slide1 : slide2;
+      let nextImg = currentVisible === 1 ? slide2 : slide1;
+      
+      // Preload the new image.
+      const preloadedImage = new Image();
+      preloadedImage.onload = function() {
+        // When loaded, set the source of the hidden image.
+        nextImg.src = newUrl;
+        // Force a reflow to ensure the transition applies.
+        void nextImg.offsetWidth;
+        // Fade in the hidden image and fade out the visible one.
+        nextImg.classList.add("active");
+        currentImg.classList.remove("active");
+        // Update the tracking variable.
+        currentVisible = currentVisible === 1 ? 2 : 1;
+      };
+      preloadedImage.onerror = function() {
+        console.error("Error loading image:", newUrl);
+      };
+      preloadedImage.src = newUrl;
+    });
+  </script>
+</body>
+</html>