Update index.html

index.html

@@ -61,138 +61,6 @@
         </div>
     </div>
 
-    <script>
-        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';
-                websiteFrame.src = '';
-            } else {
-                const websiteURL = slides[currentIndex]?.website || '';
-                if (websiteURL) {
-                    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);
-        });
-
-        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();
-    </script>
+    <script src="script.js"></script>
 </body>
 </html>