Feature: Implement store open/closed status with override

This commit introduces functionality to display the store's open/closed status based on a schedule, with an override mechanism for holidays or emergencies.

Changes include:
- : Added IDs to hours paragraphs for easier manipulation.
- : Refactored  to be more robust and moved its logic to  to prevent race conditions. Removed  for status updates from . Fixed lightbox navigation.
- : Added  (boolean) and  (string) fields to allow overriding the default status.
- : Consolidated all status logic. It now acts as a gatekeeper:
  - If  in  is , it displays  and ensures hours are visible.
  - If  is , it runs the scheduled open/closed logic (originally from ) and updates the status every minute, ensuring hours are always visible.
- : Reverted accidental changes and ensured only necessary status-related styles were added.

This ensures:
- The store's current open/closed status is always displayed.
- An override message can be shown for special closures.
- Store hours are always visible.

index.html

@@ -112,9 +112,9 @@
 
 <p class="has-text-centered is-size-1">Shop Hours</p>
 <p id="status" class="has-text-centered"></p>
-<p class="has-text-centered">Tuesday - Friday: 10:00 - 5:00</p>
+<p id="hours-tuesday-friday" class="has-text-centered">Tuesday - Friday: 10:00 - 5:00</p>
-<p class="has-text-centered">Saturday:         9:00 - 3:00</p>
+<p id="hours-saturday" class="has-text-centered">Saturday:         9:00 - 3:00</p>
-<p class="has-text-centered">Sunday - Monday:  Closed</p>
+<p id="hours-sunday-monday" class="has-text-centered">Sunday - Monday:  Closed</p>
 
 <iframe style="border:none;width:100%;" id="contact-us-vjz40v" src="https://forms.beachpartyballoons.com/forms/contact-us-vjz40v"></iframe><script type="text/javascript" onload="initEmbed('contact-us-vjz40v')" src="https://forms.beachpartyballoons.com/widgets/iframe.min.js"></script>  
 

script.js

@@ -1,3 +1,4 @@
+let statusInterval;
 
 // Mobile NavBar
 document.addEventListener('DOMContentLoaded', () => {
@@ -68,12 +69,20 @@ document.addEventListener("DOMContentLoaded", function () {
             lightbox.className = "lightbox";
             lightbox.innerHTML = `
                 <a href="#" class="close">&times;</a>
+                <a href="#" class="prev">&lsaquo;</a>
+                <a href="#" class="next">&rsaquo;</a>
                 <img id="lightbox-img" src="" alt="">
                 <p id="lightbox-caption" class="caption" style="color: white; text-align: center; margin-top: 10px;"></p>
             `;
             document.body.appendChild(lightbox);
         }
 
+        // Ensure the close button listener is always attached when lightbox is opened
+        document.querySelector(".lightbox .close").addEventListener("click", function(event) {
+            event.preventDefault();
+            document.getElementById("lightbox").style.display = "none";
+        });
+
         let lightboxImg = document.getElementById("lightbox-img");
         let lightboxCaption = document.getElementById("lightbox-caption");
         let caption = images[currentIndex].parentElement.querySelector(".caption").textContent;
@@ -82,8 +91,8 @@ document.addEventListener("DOMContentLoaded", function () {
         lightboxCaption.textContent = caption;
         lightbox.style.display = "flex";
 
-        // document.getElementById("prev").onclick = () => navigateLightbox(-1);
+        document.querySelector(".lightbox .prev").onclick = () => navigateLightbox(-1);
-        // document.getElementById("next").onclick = () => navigateLightbox(1);
+        document.querySelector(".lightbox .next").onclick = () => navigateLightbox(1);
     }
 
     function navigateLightbox(direction) {
@@ -168,63 +177,13 @@ function scrollFunction() {
   }
 }
 
-// When the user clicks on the button, scroll to the top of the document
-function topFunction() {
-  document.body.scrollTop = 0; // For Safari
-  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
-} 
-
-
-//open/closed sign
-
-function updateBusinessHours() {
-    const now = new Date();
-    if (document.body.scrollTop > 130 || document.documentElement.scrollTop > 130) {
-        mybutton.style.display = "block";
-    } else {
-        mybutton.style.display = "none";
-    }
-}
-
 // When the user clicks on the button, scroll to the top of the document
 function topFunction() {
     document.body.scrollTop = 0; // For Safari
     document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE, and Opera
 }
 
-// Open/closed sign function
+// The open/closed sign function is now in update.js
-function checkStatus() {
-    const now = new Date();
-    const checkHour = now.getHours();
-    let isOpen = false;
-
-    // Define days of operation
-    const daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
-    const currentDay = daysOfWeek[now.getDay()];
-
-    const operatingHours = {
-        "Saturday": { start: 9, end: 15 },
-        "Tuesday": { start: 10, end: 17 },
-        "Wednesday": { start: 10, end: 17 },
-        "Thursday": { start: 10, end: 17 }
-    };
-
-    if (currentDay === "Sunday") {
-        isOpen = false; // Store is closed on Sundays
-    } else if (operatingHours[currentDay]) {
-        const { start, end } = operatingHours[currentDay];
-        isOpen = checkHour >= start && checkHour < end;
-    }
-
-    // Update the status in the HTML
-    const statusElement = document.getElementById("status");
-    if (statusElement) {
-        statusElement.textContent = isOpen ? "We are currently OPEN" : "We are currently CLOSED";
-    }
-}
-
-// Update status every second
-setInterval(checkStatus, 1000);
 
 function injectPlausibleScript() {
         const plausibleDomain = "beachpartyballoons.com";
@@ -250,5 +209,5 @@ function injectPlausibleScript() {
         console.log('Plausible script and function have been injected into the head.');
     }
 
-    // Run the function when the window loads.
+    // Run the function when the DOM is ready.
-    window.onload = injectPlausibleScript;
+    document.addEventListener('DOMContentLoaded', injectPlausibleScript);

update.js

@@ -1,24 +1,72 @@
 document.addEventListener('DOMContentLoaded', () => {
     const message = document.getElementById('message');
-  
+    const statusElement = document.getElementById('status');
+    const hoursTuesdayFriday = document.getElementById('hours-tuesday-friday');
+    const hoursSaturday = document.getElementById('hours-saturday');
+    const hoursSundayMonday = document.getElementById('hours-sunday-monday');
+
+    let statusInterval;
+
+    function checkStatus() {
+        const now = new Date();
+        const checkHour = now.getHours();
+        let isOpen = false;
+
+        const daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+        const currentDay = daysOfWeek[now.getDay()];
+
+        const operatingHours = {
+            "Sunday": { start: 0, end: 0 },
+            "Monday": { start: 0, end: 0 },
+            "Tuesday": { start: 10, end: 17 },
+            "Wednesday": { start: 10, end: 17 },
+            "Thursday": { start: 10, end: 17 },
+            "Friday": { start: 10, end: 17 },
+            "Saturday": { start: 9, end: 15 }
+        };
+
+        if (operatingHours[currentDay]) {
+            const { start, end } = operatingHours[currentDay];
+            isOpen = checkHour >= start && checkHour < end;
+        }
+
+        if (statusElement) {
+            statusElement.textContent = isOpen ? "We are currently OPEN" : "We are currently CLOSED";
+        }
+    }
 
     fetch('update.json')
         .then(response => response.json())
         .then(data => {
-  
+            const update = data[0];
-            const update = data[0]; 
 
-            message.textContent = update.message;
+            // Handle the top message
-           
+            if (update.message && update.message.trim() !== "") {
-           const updateElement = document.querySelector('.update'); // safer than getElementsByClassName
+                message.textContent = update.message;
-if (update.message === "") {
+            } else {
-  updateElement.style.display = "none";
+                const updateElement = document.querySelector('.update');
-}
+                if (updateElement) {
+                    updateElement.style.display = "none";
+                }
+            }
 
+            // Handle the closed override and regular status
+            if (update.isClosed) {
+                if (statusInterval) {
+                    clearInterval(statusInterval);
+                }
+                if (statusElement) {
+                    statusElement.textContent = update.closedMessage;
+                }
+            } else {
+                checkStatus(); // Initial check
+                statusInterval = setInterval(checkStatus, 60000); // Update every minute
+            }
         })
         .catch(error => {
             console.error('Error fetching data:', error);
-            businessCard.innerHTML = '<p>Error loading data.  Check the console.</p>'; // Display an error message
+            if (statusElement) {
+                statusElement.textContent = 'Error loading status.';
+            }
         });
 });
-

update.json

@@ -1,5 +1,7 @@
 [
 {
-    "message": ""
+    "message": "",
+    "isClosed": false,
+    "closedMessage": "We are temporarily closed. Please check back later for updates."
 }
-]
+]