Create script.js

script.js

@@ -0,0 +1,67 @@
+let data; // Placeholder for slide configuration
+let currentIndex = 0;
+
+const slideTitle = document.getElementById("slide-title");
+const slideImage = document.getElementById("slide-image");
+const contentArea = document.getElementById("content-area");
+
+const textIcon = document.getElementById("text-icon");
+const imageIcon = document.getElementById("image-icon");
+const videoIcon = document.getElementById("video-icon");
+
+const prevBtn = document.getElementById("prev-btn");
+const nextBtn = document.getElementById("next-btn");
+
+// Fetch configuration from the JSON file
+async function loadConfig() {
+    const response = await fetch('slide_config.json');
+    data = await response.json();
+    loadSlide(currentIndex);
+}
+
+function loadSlide(index) {
+    const slide = data.slides[index];
+    slideTitle.textContent = slide.id.replace("_", " ");
+    slideImage.src = slide.image;
+
+    const existingText = document.getElementById("slide-text");
+    if (existingText) existingText.remove();
+
+    const existingVideo = document.getElementById("slide-video");
+    if (existingVideo) existingVideo.remove();
+}
+
+textIcon.addEventListener("click", () => {
+    const slide = data.slides[currentIndex];
+    const textOverlay = document.createElement("div");
+    textOverlay.id = "slide-text";
+    textOverlay.textContent = slide.text;
+    contentArea.appendChild(textOverlay);
+});
+
+imageIcon.addEventListener("click", () => {
+    loadSlide(currentIndex);
+});
+
+videoIcon.addEventListener("click", () => {
+    const slide = data.slides[currentIndex];
+    const videoEmbed = document.createElement("iframe");
+    videoEmbed.id = "slide-video";
+    videoEmbed.src = slide.video;
+    videoEmbed.frameBorder = "0";
+    videoEmbed.allow = "autoplay; encrypted-media";
+    contentArea.appendChild(videoEmbed);
+});
+
+prevBtn.addEventListener("click", () => {
+    currentIndex = (currentIndex - 1 + data.slides.length) % data.slides.length;
+    loadSlide(currentIndex);
+});
+
+nextBtn.addEventListener("click", () => {
+    currentIndex = (currentIndex + 1) % data.slides.length;
+    loadSlide(currentIndex);
+});
+
+// Load configuration and initialize the app
+loadConfig();