Update script.js

Added Demo notification to index page upon landing

script.js

@@ -1,106 +1,126 @@
 document.addEventListener("DOMContentLoaded", () => {
-  // Shopper Perks Carousel
+    // ================== DEMO NOTICE MODAL ==================
+    if (!sessionStorage.getItem("demoNoticeAcknowledged")) {
+        let modal = document.createElement("div");
+        modal.id = "demoModal";
+        modal.style.position = "fixed";
+        modal.style.left = "0";
+        modal.style.top = "0";
+        modal.style.width = "100%";
+        modal.style.height = "100%";
+        modal.style.background = "rgba(0, 0, 0, 0.7)";
+        modal.style.display = "flex";
+        modal.style.alignItems = "center";
+        modal.style.justifyContent = "center";
+        modal.style.zIndex = "1000";
+
+        let modalContent = document.createElement("div");
+        modalContent.style.background = "white";
+        modalContent.style.padding = "20px";
+        modalContent.style.borderRadius = "10px";
+        modalContent.style.textAlign = "center";
+        modalContent.style.width = "80%";
+        modalContent.style.maxWidth = "400px";
+
+        let heading = document.createElement("h2");
+        heading.innerText = "Demo Notice";
+
+        let message = document.createElement("p");
+        message.innerText =
+            "This site is for demonstration purposes only and is not a real e-commerce store. No purchases can be made.";
+
+        let closeButton = document.createElement("button");
+        closeButton.innerText = "I Understand";
+        closeButton.style.padding = "10px 20px";
+        closeButton.style.marginTop = "15px";
+        closeButton.style.border = "none";
+        closeButton.style.background = "#007bff";
+        closeButton.style.color = "white";
+        closeButton.style.fontSize = "16px";
+        closeButton.style.cursor = "pointer";
+        closeButton.style.borderRadius = "5px";
+
+        closeButton.addEventListener("click", function () {
+            modal.style.display = "none";
+            sessionStorage.setItem("demoNoticeAcknowledged", "true");
+        });
+
+        modalContent.appendChild(heading);
+        modalContent.appendChild(message);
+        modalContent.appendChild(closeButton);
+        modal.appendChild(modalContent);
+        document.body.appendChild(modal);
+    }
+
+    // ================== SHOPPER PERKS CAROUSEL ==================
     const perks = document.querySelectorAll(".perk-item");
     let currentIndexPerks = 0;
 
     function showNextPerk() {
-    // Hide all perks
         perks.forEach(perk => {
-      perk.classList.remove("visible"); // Hide by removing 'visible' class
+            perk.classList.remove("visible");
-      perk.style.display = "none"; // Set display to none
+            perk.style.display = "none";
         });
 
-    // Show the current perk
+        perks[currentIndexPerks].classList.add("visible");
-    perks[currentIndexPerks].classList.add("visible"); // Show current perk by adding 'visible' class
+        perks[currentIndexPerks].style.display = "block";
-    perks[currentIndexPerks].style.display = "block"; // Explicitly set display to block
 
-    console.log(`Showing perk ${currentIndexPerks}`); // Debugging line
-
-    // Move to the next perk, loop back to the start if at the end
         currentIndexPerks = (currentIndexPerks + 1) % perks.length;
     }
 
-  // Show the first perk initially
     showNextPerk();
-
-  // Set an interval to cycle through the perks every 2.25 seconds (2250ms)
     setInterval(showNextPerk, 2250);
 
-  // Customer Highlights Carousel
+    // ================== CUSTOMER HIGHLIGHTS CAROUSEL ==================
     const testimonials = document.querySelectorAll(".testimonial");
     let currentIndexTestimonials = 0;
 
-  console.log("Testimonials found: ", testimonials.length); // Debugging line
-
     function showNextTestimonial() {
-    // Hide all testimonials
         testimonials.forEach(testimonial => {
-      testimonial.classList.remove("visible"); // Remove 'visible' class
+            testimonial.classList.remove("visible");
-      testimonial.style.display = "none"; // Set display to none
+            testimonial.style.display = "none";
         });
 
-    // Show the current testimonial
+        testimonials[currentIndexTestimonials].classList.add("visible");
-    testimonials[currentIndexTestimonials].classList.add("visible"); // Add 'visible' class to show current testimonial
+        testimonials[currentIndexTestimonials].style.display = "block";
-    testimonials[currentIndexTestimonials].style.display = "block"; // Explicitly set display to block
 
-    console.log(`Showing testimonial ${currentIndexTestimonials}`); // Debugging line
-
-    // Move to the next testimonial, loop back to the start if at the end
         currentIndexTestimonials = (currentIndexTestimonials + 1) % testimonials.length;
     }
 
-  // Show the first testimonial initially
     showNextTestimonial();
-
-  // Set an interval to cycle through the testimonials every 3.5 seconds (3500ms)
     setInterval(showNextTestimonial, 3500);
 
-  // Featured Items Carousel
+    // ================== FEATURED ITEMS CAROUSEL ==================
     const featuredItems = document.querySelectorAll("#featured-images .featured-item");
     let currentIndex = 0;
 
     function showNextItem() {
-    // Remove the 'active' class from the current image
         featuredItems[currentIndex].classList.remove("active");
-
-    // Move to the next index, looping back to the start if necessary
         currentIndex = (currentIndex + 1) % featuredItems.length;
-
-    // Add the 'active' class to the next image
         featuredItems[currentIndex].classList.add("active");
     }
 
-  // Initially show the first image by adding 'active' class
     featuredItems[currentIndex].classList.add("active");
-
-  // Cycle through images every 3 seconds
     setInterval(showNextItem, 3000);
-});
 
-// Featured Items Carousel
+    // ================== UPDATED FEATURED ITEMS CAROUSEL ==================
-const featuredItems = document.querySelectorAll("#featured-images .featured-item");
+    let currentIndexFeatured = 0;
-let currentIndexFeatured = 0;
 
-function updateFeaturedImages() {
+    function updateFeaturedImages() {
         featuredItems.forEach((item, index) => {
-    // Hide the text inside each <a> tag by setting the text's display to 'none'
             const text = item.closest('a');
             if (text) text.style.display = (index === currentIndexFeatured ? "block" : "none");
 
-    // Show only the active image by setting display to block for the current image
             const image = item;
             image.style.display = (index === currentIndexFeatured ? "block" : "none");
         });
-}
+    }
 
-// Show next featured image
+    function showNextFeatured() {
-function showNextFeatured() {
+        currentIndexFeatured = (currentIndexFeatured + 1) % featuredItems.length;
-  currentIndexFeatured = (currentIndexFeatured + 1) % featuredItems.length; // Loop to the start
         updateFeaturedImages();
-}
+    }
 
-// Initialize featured items carousel by showing the first image
+    updateFeaturedImages();
-updateFeaturedImages();
+    setInterval(showNextFeatured, 3000);
-
+});
-// Set up automatic cycling every 3 seconds
-setInterval(showNextFeatured, 3000);