Update script.js

script.js

@@ -1,3 +1,58 @@
+const slideTitle = document.getElementById('slide-title');
+const slideImage = document.getElementById('slide-image');
+const prevBtn = document.getElementById('prev-btn');
+const nextBtn = document.getElementById('next-btn');
+const promptBox = document.getElementById('promptBox');
+const promptText = document.getElementById('promptText');
+const responseBox = document.getElementById('responseBox');
+const responseContent = document.getElementById('responseContent');
+const promptIcon = document.getElementById('promptIcon');
+const videoIcon = document.getElementById('videoIcon');
+const videoOverlay = document.getElementById('videoOverlay');
+const videoPlayer = document.getElementById('videoPlayer');
+const closeVideo = document.getElementById('closeVideo');
+const queryButton = document.getElementById('queryButton');
+const websiteIcon = document.getElementById('websiteIcon');
+const websiteLayer = document.getElementById('websiteLayer');
+const websiteFrame = document.getElementById('websiteFrame');
+const textboxIcon = document.getElementById('textboxIcon');
+const textboxLayer = document.getElementById('textboxLayer');
+const textboxContent = document.getElementById('textboxContent');
+
+let slides = [];
+let currentIndex = 0;
+let websiteVisible = false;
+let textboxVisible = false;
+
+async function fetchSlides() {
+    try {
+        const response = await fetch('config.json');
+        const data = await response.json();
+        slides = data.slides;
+        loadSlide(currentIndex);
+    } catch (error) {
+        console.error('Error loading slides:', error);
+    }
+}
+
+function loadSlide(index) {
+    if (!slides.length) return;
+    const slide = slides[index];
+    slideTitle.textContent = slide.id.replace('_', ' ');
+    slideImage.src = slide.image;
+    promptBox.style.display = 'none';
+    responseBox.style.display = 'none';
+    responseContent.innerHTML = '';
+    videoPlayer.src = '';
+    textboxLayer.style.transform = 'translateX(100%)';
+    textboxLayer.style.display = 'none';
+    textboxContent.innerHTML = '';
+    textboxVisible = false;
+    if (websiteVisible) {
+        toggleWebsiteLayer();
+    }
+}
+
 function toggleWebsiteLayer() {
     if (websiteVisible) {
         websiteLayer.style.display = 'none';
@@ -5,21 +60,72 @@ function toggleWebsiteLayer() {
     } else {
         const websiteURL = slides[currentIndex]?.website || '';
         if (websiteURL) {
-            websiteFrame.src = websiteURL;
-            websiteLayer.style.display = 'block';
+            window.open(websiteURL, '_blank');
+        } else {
+            console.warn('No website URL defined for this slide.');
         }
     }
     websiteVisible = !websiteVisible;
 }
 
+function toggleTextboxLayer() {
+    if (textboxVisible) {
+        textboxLayer.style.transform = 'translateX(100%)';
+        setTimeout(() => {
+            textboxLayer.style.display = 'none';
+        }, 300);
+        textboxContent.innerHTML = '';
+    } else {
+        const markdownText = slides[currentIndex]?.text || "No additional text available.";
+        textboxContent.innerHTML = marked(markdownText);
+        textboxLayer.style.display = 'block';
+        setTimeout(() => {
+            textboxLayer.style.transform = 'translateX(0)';
+        }, 10);
+    }
+    textboxVisible = !textboxVisible;
+}
+
+prevBtn.addEventListener('click', () => {
+    currentIndex = (currentIndex - 1 + slides.length) % slides.length;
+    loadSlide(currentIndex);
+});
+
 nextBtn.addEventListener('click', () => {
     currentIndex = (currentIndex + 1) % slides.length;
     loadSlide(currentIndex);
-    if (websiteVisible) toggleWebsiteLayer(); // Hide website layer on slide change
 });
 
-prevBtn.addEventListener('click', () => {
-    currentIndex = (currentIndex - 1 + slides.length) % slides.length;
-    loadSlide(currentIndex);
-    if (websiteVisible) toggleWebsiteLayer(); // Hide website layer on slide change
+promptIcon.addEventListener('click', () => {
+    const slideText = slides[currentIndex]?.text || "No prompt text available.";
+    promptBox.style.display = promptBox.style.display === 'block' ? 'none' : 'block';
+    promptText.value = slideText;
 });
+
+videoIcon.addEventListener('click', () => {
+    const videoURL = slides[currentIndex]?.video || '';
+    if (videoURL) {
+        videoPlayer.src = videoURL;
+        videoOverlay.style.display = 'flex';
+    }
+});
+
+closeVideo.addEventListener('click', () => {
+    videoOverlay.style.display = 'none';
+    videoPlayer.src = '';
+});
+
+websiteIcon.addEventListener('click', toggleWebsiteLayer);
+textboxIcon.addEventListener('click', toggleTextboxLayer);
+
+queryButton.addEventListener('click', async () => {
+    const userPrompt = promptText.value.trim();
+    if (!userPrompt) return;
+    responseBox.style.display = "block";
+    responseContent.innerHTML = "Processing...";
+    setTimeout(() => {
+        responseContent.innerHTML = "Response received: " + userPrompt;
+    }, 2000);
+});
+
+fetchSlides();