127 lines
4.6 KiB
JavaScript
127 lines
4.6 KiB
JavaScript
document.addEventListener("DOMContentLoaded", () => {
|
|
// ================== 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() {
|
|
perks.forEach(perk => {
|
|
perk.classList.remove("visible");
|
|
perk.style.display = "none";
|
|
});
|
|
|
|
perks[currentIndexPerks].classList.add("visible");
|
|
perks[currentIndexPerks].style.display = "block";
|
|
|
|
currentIndexPerks = (currentIndexPerks + 1) % perks.length;
|
|
}
|
|
|
|
showNextPerk();
|
|
setInterval(showNextPerk, 2250);
|
|
|
|
// ================== CUSTOMER HIGHLIGHTS CAROUSEL ==================
|
|
const testimonials = document.querySelectorAll(".testimonial");
|
|
let currentIndexTestimonials = 0;
|
|
|
|
function showNextTestimonial() {
|
|
testimonials.forEach(testimonial => {
|
|
testimonial.classList.remove("visible");
|
|
testimonial.style.display = "none";
|
|
});
|
|
|
|
testimonials[currentIndexTestimonials].classList.add("visible");
|
|
testimonials[currentIndexTestimonials].style.display = "block";
|
|
|
|
currentIndexTestimonials = (currentIndexTestimonials + 1) % testimonials.length;
|
|
}
|
|
|
|
showNextTestimonial();
|
|
setInterval(showNextTestimonial, 3500);
|
|
|
|
// ================== FEATURED ITEMS CAROUSEL ==================
|
|
const featuredItems = document.querySelectorAll("#featured-images .featured-item");
|
|
let currentIndex = 0;
|
|
|
|
function showNextItem() {
|
|
featuredItems[currentIndex].classList.remove("active");
|
|
currentIndex = (currentIndex + 1) % featuredItems.length;
|
|
featuredItems[currentIndex].classList.add("active");
|
|
}
|
|
|
|
featuredItems[currentIndex].classList.add("active");
|
|
setInterval(showNextItem, 3000);
|
|
|
|
// ================== UPDATED FEATURED ITEMS CAROUSEL ==================
|
|
let currentIndexFeatured = 0;
|
|
|
|
function updateFeaturedImages() {
|
|
featuredItems.forEach((item, index) => {
|
|
const text = item.closest('a');
|
|
if (text) text.style.display = (index === currentIndexFeatured ? "block" : "none");
|
|
|
|
const image = item;
|
|
image.style.display = (index === currentIndexFeatured ? "block" : "none");
|
|
});
|
|
}
|
|
|
|
function showNextFeatured() {
|
|
currentIndexFeatured = (currentIndexFeatured + 1) % featuredItems.length;
|
|
updateFeaturedImages();
|
|
}
|
|
|
|
updateFeaturedImages();
|
|
setInterval(showNextFeatured, 3000);
|
|
});
|