Update index.html

index.html

@@ -77,11 +77,11 @@
              transform: translateY(-20px); /* Start slightly up */
              opacity: 0;
              transition: all 0.3s ease;
-         }
+        }
         .modal.active .modal-content {
              transform: translateY(0); /* Slide into place */
              opacity: 1;
-         }
+        }
 
         /* Ripple Effect Styles */
         /* Apply to the clickable elements within the countdown */
@@ -132,25 +132,25 @@
             animation: float 15s ease-in-out infinite alternate;
         }
 
-         /* Add variations for different particles */
-         .particle:nth-child(2n) {
-             width: 3px;
-             height: 3px;
-             background-color: rgba(0, 163, 165, 0.6); /* Teal color */
-             animation-duration: 20s;
-         }
-         .particle:nth-child(3n) {
-             width: 7px;
-             height: 7px;
-             background-color: rgba(138, 123, 113, 0.6); /* Warmgrey color */
-             animation-duration: 25s;
-         }
-         .particle:nth-child(4n) {
-              width: 4px;
-              height: 4px;
-              background-color: rgba(171, 138, 92, 0.6); /* Sandstone color */
-              animation-duration: 18s;
-         }
+           /* Add variations for different particles */
+           .particle:nth-child(2n) {
+               width: 3px;
+               height: 3px;
+               background-color: rgba(0, 163, 165, 0.6); /* Teal color */
+               animation-duration: 20s;
+           }
+           .particle:nth-child(3n) {
+               width: 7px;
+               height: 7px;
+               background-color: rgba(138, 123, 113, 0.6); /* Warmgrey color */
+               animation-duration: 25s;
+           }
+           .particle:nth-child(4n) {
+                width: 4px;
+                height: 4px;
+                background-color: rgba(171, 138, 92, 0.6); /* Sandstone color */
+                animation-duration: 18s;
+           }
 
 
         /* Basic float keyframes (used as a fallback/starting point) */
@@ -178,15 +178,78 @@
             transition: width 1s linear; /* Smooth transition for the bar */
         }
 
-         /* Countdown Digit Animation (Subtle Scale) */
-         .countdown-digit > div { /* Target the inner div with the number */
-             transition: transform 0.3s ease-out; /* Smooth transition */
-         }
-         /* Optional: Add a class in JS to trigger animation on update */
-         .countdown-digit > div.animate-scale {
-             transform: scale(1.1);
-         }
+           /* Countdown Digit Animation (Subtle Scale) */
+           .countdown-digit > div { /* Target the inner div with the number */
+               transition: transform 0.3s ease-out; /* Smooth transition */
+           }
+           /* Optional: Add a class in JS to trigger animation on update */
+           .countdown-digit > div.animate-scale {
+               transform: scale(1.1);
+           }
+
+        /* Recent Streams Section Styling (New) */
+        #recentStreamsSection {
+            max-width: 800px;
+            margin-top: 2rem; /* Spacing from main content */
+            padding: 1.5rem;
+            background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent dark background */
+            border-radius: 12px;
+            border: 1px solid rgba(0, 163, 165, 0.2); /* Teal border */
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+            text-align: left;
+        }
+
+        #recentStreamsList {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+
+        #recentStreamsList li {
+            background-color: rgba(51, 51, 51, 0.7); /* Charcoal with transparency */
+            border-radius: 8px;
+            padding: 1rem;
+            margin-bottom: 0.75rem;
+            display: flex;
+            flex-direction: column; /* Stack elements on small screens */
+            align-items: flex-start;
+            gap: 0.5rem;
+            transition: background-color 0.3s ease;
+        }
+
+        #recentStreamsList li:hover {
+            background-color: rgba(51, 51, 51, 0.9);
+        }
+
+        #recentStreamsList li:last-child {
+            margin-bottom: 0;
+        }
+
+        #recentStreamsList li a {
+            font-weight: bold;
+            color: #f88d0d; /* Gold for stream titles */
+            text-decoration: none;
+            font-size: 1.1rem;
+            transition: color 0.3s ease;
+        }
 
+        #recentStreamsList li a:hover {
+            color: #ffb74d; /* Lighter gold on hover */
+        }
+
+        #recentStreamsList li p {
+            color: #e0e0e0; /* Lighter text for dates/descriptions */
+            font-size: 0.9rem;
+        }
+
+        /* Responsive adjustments for recent streams */
+        @media (min-width: 768px) {
+            #recentStreamsList li {
+                flex-direction: row; /* Row layout on larger screens */
+                justify-content: space-between;
+                align-items: center;
+            }
+        }
 
     </style>
 </head>
@@ -199,13 +262,13 @@
         <div class="particle" style="top: 30%; left: 60%;"></div>
         <div class="particle" style="top: 70%; left: 10%;"></div>
         <div class="particle" style="top: 20%; left: 90%;"></div>
-         <div class="particle" style="top: 60%; left: 30%;"></div>
-         <div class="particle" style="top: 40%; left: 70%;"></div>
-         <div class="particle" style="top: 90%; left: 50%;"></div>
-         <div class="particle" style="top: 5%; left: 5%;"></div>
-         <div class="particle" style="top: 95%; left: 95%;"></div>
-         <div class="particle" style="top: 15%; left: 75%;"></div>
-         <div class="particle" style="top: 85%; left: 25%;"></div>
+           <div class="particle" style="top: 60%; left: 30%;"></div>
+           <div class="particle" style="top: 40%; left: 70%;"></div>
+           <div class="particle" style="top: 90%; left: 50%;"></div>
+           <div class="particle" style="top: 5%; left: 5%;"></div>
+           <div class="particle" style="top: 95%; left: 95%;"></div>
+           <div class="particle" style="top: 15%; left: 75%;"></div>
+           <div class="particle" style="top: 85%; left: 25%;"></div>
     </div>
 
 
@@ -261,12 +324,40 @@
 
             <div class="text-grey">
                  <p class="mt-2 text-sm">Stream will begin on: <span id="streamTimeDisplay" class="font-medium text-teal">Loading...</span> <span id="timezoneDisplay" class="font-medium text-eucalypt text-xs">(Your Local Time)</span></p>
-                 <p id="errorDisplay" class="mt-2 text-sm text-orange font-semibold"></p> </div>
+                 <p id="errorDisplay" class="mt-2 text-sm text-orange font-semibold"></p>
+            </div>
+
+            <div id="recentStreamsSection" class="w-full mx-auto px-4 sm:px-6 lg:px-8">
+                <h3 class="text-2xl font-display font-semibold mb-4 text-gold text-center">Past Streams</h3>
+                <ul id="recentStreamsList">
+                    <li class="p-4 bg-charcoal bg-opacity-70 rounded-lg mb-3 flex flex-col md:flex-row justify-between items-start md:items-center">
+                        <div>
+                            <a href="https://www.youtube.com/watch?v=oldstream1" target="_blank" class="text-gold hover:underline text-lg font-bold">Awesome Stream Replay 1</a>
+                            <p class="text-warmgrey text-sm">Streamed on: 2024-01-15</p>
+                        </div>
+                        <a href="https://www.youtube.com/watch?v=oldstream1" target="_blank" class="mt-2 md:mt-0 bg-teal hover:bg-opacity-80 text-white py-2 px-4 rounded-full text-sm transition duration-300">Watch Replay</a>
+                    </li>
+                    <li class="p-4 bg-charcoal bg-opacity-70 rounded-lg mb-3 flex flex-col md:flex-row justify-between items-start md:items-center">
+                        <div>
+                            <a href="https://www.youtube.com/watch?v=oldstream2" target="_blank" class="text-gold hover:underline text-lg font-bold">Deep Dive into Tech</a>
+                            <p class="text-warmgrey text-sm">Streamed on: 2023-11-20</p>
+                        </div>
+                        <a href="https://www.youtube.com/watch?v=oldstream2" target="_blank" class="mt-2 md:mt-0 bg-teal hover:bg-opacity-80 text-white py-2 px-4 rounded-full text-sm transition duration-300">Watch Replay</a>
+                    </li>
+                    <li class="p-4 bg-charcoal bg-opacity-70 rounded-lg flex flex-col md:flex-row justify-between items-start md:items-center">
+                        <div>
+                            <a href="https://www.youtube.com/watch?v=oldstream3" target="_blank" class="text-gold hover:underline text-lg font-bold">Gaming Marathon Highlights</a>
+                            <p class="text-warmgrey text-sm">Streamed on: 2023-09-01</p>
+                        </div>
+                        <a href="https://www.youtube.com/watch?v=oldstream3" target="_blank" class="mt-2 md:mt-0 bg-teal hover:bg-opacity-80 text-white py-2 px-4 rounded-full text-sm transition duration-300">Watch Replay</a>
+                    </li>
+                </ul>
+            </div>
         </div>
     </main>
 
     <footer class="py-6 text-center text-warmgrey text-sm relative z-10">
-        <p>© <span id="currentYear"></span> Live Stream Countdown. All rights reserved.</p>
+        <p>© <span id="currentYear"></span> Live Stream Countdown. All rights reserved. | <a href="recent-streams.html" class="text-teal hover:text-eucalypt transition duration-300">Recent Streams</a></p>
     </footer>
 
     <div id="adminModal" class="modal fixed inset-0 flex items-center justify-center p-4 z-50">
@@ -283,9 +374,9 @@
             <p class="mb-4 text-warmgrey text-left">
                 This countdown is controlled by a Google Sheet. To update the stream date, time, or URL, you need to edit the sheet directly.
             </p>
-             <p class="mb-4 text-orange text-sm text-left font-semibold">
-                 Remember: After editing the sheet, you MUST re-publish it to the web (as CSV) for changes to appear here on the page.
-             </p>
+               <p class="mb-4 text-orange text-sm text-left font-semibold">
+                   Remember: After editing the sheet, you MUST re-publish it to the web (as CSV) for changes to appear here on the page.
+               </p>
 
             <a id="editSheetLink" href="https://docs.google.com/spreadsheets/d/1Qj4NF2jjrG7wnpvYDqu6Dvi59GDaIO8pzr_DLWJif-8/edit?gid=0#gid=0" target="_blank" class="inline-block w-full bg-teal hover:bg-opacity-80 text-white py-3 rounded font-bold transition duration-300 ease-in-out transform hover:scale-105">
                 Edit Google Sheet
@@ -295,7 +386,7 @@
         </div>
     </div>
 
-    <audio id="countdownEndSound" src="https://www.soundjay.com/button/sounds/button-1.mp3" preload="auto"></audio>
+    <audio id="countdownEndSound" src="https://github.com/selli106/avlink/raw/refs/heads/main/ding-36029.mp3" preload="auto"></audio>
 
 
     <script>
@@ -312,6 +403,14 @@
         // Threshold for pre-stream message (in milliseconds)
         const preStreamThreshold = 5 * 60 * 1000; // 5 minutes
 
+        // New: Recent Streams Data (You'd ideally fetch this from a sheet/database too)
+        const recentStreams = [
+            { title: "Awesome Stream Replay 1", date: "2024-01-15", url: "https://www.youtube.com/watch?v=oldstream1" },
+            { title: "Deep Dive into Tech", date: "2023-11-20", url: "https://www.youtube.com/watch?v=oldstream2" },
+            { title: "Gaming Marathon Highlights", date: "2023-09-01", url: "https://www.youtube.com/watch?v=oldstream3" },
+            // Add more recent streams here
+        ];
+
 
         // --- DOM Elements ---
         const adminBtn = document.getElementById('adminBtn');
@@ -336,6 +435,7 @@
         const preStreamMessageElement = document.getElementById('preStreamMessage');
         const countdownEndSound = document.getElementById('countdownEndSound');
         const progressBar = document.getElementById('progressBar');
+        const recentStreamsList = document.getElementById('recentStreamsList'); // New element
 
 
         // Elements for effects
@@ -359,11 +459,11 @@
                 errorDisplay.textContent = '';
 
                 const response = await fetch(csvUrl);
-                 if (!response.ok) {
-                     // Attempt to read body for more specific error if possible, otherwise use status
-                     const errorBody = await response.text().catch(() => `Status: ${response.status}`);
-                     throw new Error(`HTTP error fetching sheet: ${response.status} - ${errorBody.substring(0, 100)}...`); // Limit error body length
-                 }
+                   if (!response.ok) {
+                       // Attempt to read body for more specific error if possible, otherwise use status
+                       const errorBody = await response.text().catch(() => `Status: ${response.status}`);
+                       throw new Error(`HTTP error fetching sheet: ${response.status} - ${errorBody.substring(0, 100)}...`); // Limit error body length
+                   }
                 const data = await response.text();
                 const rows = data.split("\n").map(row => row.split(",").map(cell => cell.trim())); // Split rows and cells, trim whitespace
 
@@ -385,16 +485,16 @@
 
                 if (dateString && urlString) {
                     // Only update if both values are found and are different from current settings
-                     if (dateString !== currentCountdownDateString || urlString !== currentStreamTargetUrl) {
-                        currentCountdownDateString = dateString;
-                        currentStreamTargetUrl = urlString;
-                        console.log("Settings fetched successfully:", { date: currentCountdownDateString, url: currentStreamTargetUrl });
-                        // Restart countdown with new settings
-                        startCountdown(currentCountdownDateString, currentStreamTargetUrl);
-                     } else {
-                         console.log("Settings fetched, no changes detected.");
-                         // Continue the existing countdown if no changes
-                     }
+                       if (dateString !== currentCountdownDateString || urlString !== currentStreamTargetUrl) {
+                           currentCountdownDateString = dateString;
+                           currentStreamTargetUrl = urlString;
+                           console.log("Settings fetched successfully:", { date: currentCountdownDateString, url: currentStreamTargetUrl });
+                           // Restart countdown with new settings
+                           startCountdown(currentCountdownDateString, currentStreamTargetUrl);
+                       } else {
+                           console.log("Settings fetched, no changes detected.");
+                           // Continue the existing countdown if no changes
+                       }
 
                 } else {
                     errorDisplay.textContent = 'Error: Settings (countdown_date or stream_url) not found in Google Sheet.';
@@ -410,12 +510,12 @@
             } catch (error) {
                 errorDisplay.textContent = 'Error fetching settings. Check sheet URL and publish status.';
                 console.error("Failed to fetch settings from Google Sheet:", error);
-                 // Indicate error to user and stop countdown on fetch error
-                 countdownDisplay.textContent = "Error fetching settings.";
-                 clearInterval(countdownInterval);
-                 streamReady.classList.add('hidden');
-                 preStreamMessageElement.classList.add('hidden'); // Hide pre-stream message
-                 progressBar.style.width = '0%'; // Reset progress bar
+                   // Indicate error to user and stop countdown on fetch error
+                   countdownDisplay.textContent = "Error fetching settings.";
+                   clearInterval(countdownInterval);
+                   streamReady.classList.add('hidden');
+                   preStreamMessageElement.classList.add('hidden'); // Hide pre-stream message
+                   progressBar.style.width = '0%'; // Reset progress bar
             }
         }
 
@@ -436,16 +536,16 @@
 
             // Check if the parsed date is valid
             if (isNaN(targetTimestamp)) {
-                 errorDisplay.textContent = `Error: Invalid date format from sheet: ${dateString}`;
-                 console.error("Invalid date string received from Google Sheet:", dateString);
-                 countdownDisplay.textContent = "Error loading settings.";
-                 clearInterval(countdownInterval);
-                 streamReady.classList.add('hidden');
-                 preStreamMessageElement.classList.add('hidden'); // Hide pre-stream message
-                 progressBar.style.width = '0%'; // Reset progress bar
-                 streamTimeDisplay.textContent = "Invalid Date";
-                 timezoneDisplay.textContent = "";
-                 return; // Stop execution if date is invalid
+                   errorDisplay.textContent = `Error: Invalid date format from sheet: ${dateString}`;
+                   console.error("Invalid date string received from Google Sheet:", dateString);
+                   countdownDisplay.textContent = "Error loading settings.";
+                   clearInterval(countdownInterval);
+                   streamReady.classList.add('hidden');
+                   preStreamMessageElement.classList.add('hidden'); // Hide pre-stream message
+                   progressBar.style.width = '0%'; // Reset progress bar
+                   streamTimeDisplay.textContent = "Invalid Date";
+                   timezoneDisplay.textContent = "";
+                   return; // Stop execution if date is invalid
             }
 
             // Calculate the initial duration for the progress bar
@@ -467,38 +567,38 @@
 
             // Update the display below the countdown with the target time
             const options = {
-                 weekday: 'long',
-                 year: 'numeric',
-                 month: 'long',
-                 day: 'numeric',
-                 hour: '2-digit',
-                 minute: '2-digit',
-                 timeZoneName: 'short' // Show the user's local timezone abbreviation
+                   weekday: 'long',
+                   year: 'numeric',
+                   month: 'long',
+                   day: 'numeric',
+                   hour: '2-digit',
+                   minute: '2-digit',
+                   timeZoneName: 'short' // Show the user's local timezone abbreviation
             };
             // Use the Date object created from the string for consistent display
             // Note: This displays the target moment converted to the *user's* local time zone.
             try {
-                 streamTimeDisplay.textContent = targetDate.toLocaleString(undefined, options); // Use the parsed Date object
-                 timezoneDisplay.textContent = "(Your Local Time)"; // Indicate this is local time
+                   streamTimeDisplay.textContent = targetDate.toLocaleString(undefined, options); // Use the parsed Date object
+                   timezoneDisplay.textContent = "(Your Local Time)"; // Indicate this is local time
             } catch (e) {
-                 // Handle potential invalid date string parsing errors (less likely now with isNaN check)
-                 streamTimeDisplay.textContent = `Error formatting date: ${dateString}`;
-                 timezoneDisplay.textContent = "";
-                 console.error("Error formatting date string:", dateString, e);
+                   // Handle potential invalid date string parsing errors (less likely now with isNaN check)
+                   streamTimeDisplay.textContent = `Error formatting date: ${dateString}`;
+                   timezoneDisplay.textContent = "";
+                   console.error("Error formatting date string:", dateString, e);
             }
 
 
-             // Ensure the countdown display is visible if the date is in the future
-             if (targetTimestamp > new Date().getTime()) {
-                 countdownDisplay.classList.remove('hidden'); // Make sure grid is visible
-                 // Ensure individual elements are visible if the parent was hidden
-                 if(daysElement) daysElement.parentElement.classList.remove('hidden');
-                 if(hoursElement) hoursElement.parentElement.classList.remove('hidden'); // Removed extra ')'
-                 if(minutesElement) minutesElement.parentElement.classList.remove('hidden'); // Removed extra ')'
-                 if(secondsElement) secondsElement.parentElement.classList.remove('hidden'); // Removed extra ')'
+               // Ensure the countdown display is visible if the date is in the future
+               if (targetTimestamp > new Date().getTime()) {
+                   countdownDisplay.classList.remove('hidden'); // Make sure grid is visible
+                   // Ensure individual elements are visible if the parent was hidden
+                   if(daysElement) daysElement.parentElement.classList.remove('hidden');
+                   if(hoursElement) hoursElement.parentElement.classList.remove('hidden');
+                   if(minutesElement) minutesElement.parentElement.classList.remove('hidden');
+                   if(secondsElement) secondsElement.parentElement.classList.remove('hidden');
 
-                 streamReady.classList.add('hidden');
-             }
+                   streamReady.classList.add('hidden');
+               }
         }
 
 
@@ -510,7 +610,7 @@
             // --- Progress Bar Update ---
             let progressPercentage = 100; // Start full
             if (initialCountdownDuration > 0) {
-                 progressPercentage = Math.max(0, (distance / initialCountdownDuration) * 100);
+                   progressPercentage = Math.max(0, (distance / initialCountdownDuration) * 100);
             }
             progressBar.style.width = `${progressPercentage}%`;
 
@@ -524,11 +624,11 @@
 
                 // Ensure stream link is correctly set one last time
                 streamLink.href = streamTargetUrl;
-                 streamLink.target = "_blank"; // Ensure it opens in a new tab
+                   streamLink.target = "_blank"; // Ensure it opens in a new tab
 
                 streamTimeDisplay.textContent = "Stream should be live now!";
                 timezoneDisplay.textContent = ""; // Clear timezone note
-                 errorDisplay.textContent = ""; // Clear any lingering error messages
+                   errorDisplay.textContent = ""; // Clear any lingering error messages
 
                 // Play sound effect (if loaded and allowed by browser)
                 if (countdownEndSound) {
@@ -559,18 +659,18 @@
             // Update display elements, using ?.textContent for safety just in case
             // Add a temporary class to trigger animation
             const updateDigit = (element, value) => {
-                 const stringValue = value.toString().padStart(2, '0');
-                 if (element && element.textContent !== stringValue) {
-                     element.textContent = stringValue;
-                     // Trigger animation class
-                     element.classList.add('animate-scale');
-                     // Remove class after animation duration
-                     setTimeout(() => {
-                         element.classList.remove('animate-scale');
-                     }, 300); // Match CSS transition duration
-                 } else if (element) {
-                     element.textContent = stringValue; // Update even if value is same, just in case
-                 }
+                   const stringValue = value.toString().padStart(2, '0');
+                   if (element && element.textContent !== stringValue) {
+                       element.textContent = stringValue;
+                       // Trigger animation class
+                       element.classList.add('animate-scale');
+                       // Remove class after animation duration
+                       setTimeout(() => {
+                           element.classList.remove('animate-scale');
+                       }, 300); // Match CSS transition duration
+                   } else if (element) {
+                       element.textContent = stringValue; // Update even if value is same, just in case
+                   }
             };
 
             updateDigit(daysElement, days);
@@ -579,14 +679,14 @@
             updateDigit(secondsElement, seconds);
 
 
-            // Ensure countdown elements are visible if they were hidden after countdown ended previously
-             countdownDisplay.classList.remove('hidden');
-             streamReady.classList.add('hidden');
-             // Also make sure the individual number divs are not hidden if you added display:none to them
-             if(daysElement && daysElement.parentElement.classList.contains('hidden')) daysElement.parentElement.classList.remove('hidden');
-             if(hoursElement && hoursElement.parentElement.classList.contains('hidden')) hoursElement.parentElement.classList.remove('hidden');
-             if(minutesElement && minutesElement.parentElement.classList.contains('hidden')) minutesElement.parentElement.classList.remove('hidden');
-             if(secondsElement && secondsElement.parentElement.classList.contains('hidden')) secondsElement.parentElement.classList.remove('hidden');
+               // Ensure countdown elements are visible if they were hidden after countdown ended previously
+               countdownDisplay.classList.remove('hidden');
+               streamReady.classList.add('hidden');
+               // Also make sure the individual number divs are not hidden if you added display:none to them
+               if(daysElement && daysElement.parentElement.classList.contains('hidden')) daysElement.parentElement.classList.remove('hidden');
+               if(hoursElement && hoursElement.parentElement.classList.contains('hidden')) hoursElement.parentElement.classList.remove('hidden');
+               if(minutesElement && minutesElement.parentElement.classList.contains('hidden')) minutesElement.parentElement.classList.remove('hidden');
+               if(secondsElement && secondsElement.parentElement.classList.contains('hidden')) secondsElement.parentElement.classList.remove('hidden');
 
         }
 
@@ -633,68 +733,70 @@
 
             // Schedule the next animation cycle
             // Use a timeout slightly longer than the max animation duration
-            setTimeout(animateParticles, 30000); // 30 seconds
+            setTimeout(animateParticles, 30 * 1000); // Rerun animation every 30 seconds
         }
 
+        // Populate recent streams
+        function populateRecentStreams() {
+            if (!recentStreamsList) return; // Exit if the element doesn't exist
 
-        // --- Event Listeners & Initialization ---
+            recentStreamsList.innerHTML = ''; // Clear existing content
 
-        // Set current year in footer
-        currentYear.textContent = new Date().getFullYear();
+            recentStreams.forEach(stream => {
+                const listItem = document.createElement('li');
+                listItem.className = 'p-4 bg-charcoal bg-opacity-70 rounded-lg mb-3 flex flex-col md:flex-row justify-between items-start md:items-center';
 
-        // Fetch settings and start countdown on page load
-        document.addEventListener('DOMContentLoaded', () => {
-            fetchSettings(sheetCsvUrl); // Initial fetch
-
-            // Set interval to refetch settings periodically
-            setInterval(() => {
-                 fetchSettings(sheetCsvUrl);
-            }, fetchInterval);
-
-            // Add ripple effect listener to each countdown digit
-            countdownDigits.forEach(digit => {
-                digit.addEventListener('click', createRipple);
+                listItem.innerHTML = `
+                    <div>
+                        <a href="${stream.url}" target="_blank" class="text-gold hover:underline text-lg font-bold">${stream.title}</a>
+                        <p class="text-warmgrey text-sm">Streamed on: ${stream.date}</p>
+                    </div>
+                    <a href="${stream.url}" target="_blank" class="mt-2 md:mt-0 bg-teal hover:bg-opacity-80 text-white py-2 px-4 rounded-full text-sm transition duration-300">Watch Replay</a>
+                `;
+                recentStreamsList.appendChild(listItem);
             });
+        }
 
-            // Start particle animation
-            animateParticles();
-        });
 
+        // --- Event Listeners and Initial Calls ---
 
-        // Admin Modal functionality
+        // Admin Modal
         adminBtn.addEventListener('click', () => {
             adminModal.classList.add('active');
-             messageArea.textContent = ''; // Clear any old messages
+            messageArea.textContent = ''; // Clear message when opening
+            editSheetLink.href = googleSheetEditUrl; // Ensure link is set
         });
 
         closeModal.addEventListener('click', () => {
             adminModal.classList.remove('active');
-             messageArea.textContent = ''; // Clear message when closing
         });
 
-         // Ensure the link in the modal has the correct URL (it's hardcoded in HTML, but good practice to confirm)
-         // This also sets target="_blank" to ensure it opens in a new tab
-        if(editSheetLink) { // Check if element exists
-            editSheetLink.href = googleSheetEditUrl;
-            editSheetLink.target = "_blank";
-        }
-
-
-        // Close modal when clicking outside
-        adminModal.addEventListener('click', (e) => {
-            if (e.target === adminModal) {
+        // Close modal if clicking outside content
+        adminModal.addEventListener('click', (event) => {
+            if (event.target === adminModal) {
                 adminModal.classList.remove('active');
-                 messageArea.textContent = ''; // Clear message when closing
             }
         });
 
-        // Prevent modal content clicks from closing modal
-         if(adminModal.querySelector('.modal-content')) {
-             adminModal.querySelector('.modal-content').addEventListener('click', (e) => {
-                 e.stopPropagation(); // Stop click from bubbling up to modal overlay
-             });
-         }
+
+        // Ripple effect event listeners
+        countdownDigits.forEach(digit => {
+            digit.addEventListener('click', createRipple);
+        });
+
+        // Set current year in footer
+        document.getElementById('currentYear').textContent = new Date().getFullYear();
+
+        // Initial fetch and set up recurring fetch
+        fetchSettings(sheetCsvUrl);
+        setInterval(() => fetchSettings(sheetCsvUrl), fetchInterval);
+
+        // Start particle animation
+        animateParticles();
+
+        // Populate recent streams on load
+        populateRecentStreams();
 
     </script>
 </body>
-</html>
+</html>