Update index.html

index.html

@@ -22,6 +22,10 @@
             <img src="website-icon.png" alt="Website Icon">
             <span>Website</span>
         </div>
+        <div class="textbox-icon" id="textboxIcon">
+            <img src="textbox-icon.png" alt="Textbox Icon">
+            <span>Textbox</span>
+        </div>
     </div>
 
     <!-- Main Container -->
@@ -46,6 +50,9 @@
                 <div class="website-layer" id="websiteLayer" style="display: none;">
                     <iframe id="websiteFrame" src="" frameborder="0"></iframe>
                 </div>
+                <div class="textbox-layer" id="textboxLayer" style="display: none;">
+                    <div id="textboxContent"></div>
+                </div>
             </div>
         </div>
         <div class="video-overlay" id="videoOverlay" style="display: none;">
@@ -72,10 +79,14 @@
         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 {
@@ -97,6 +108,9 @@
             responseBox.style.display = 'none';
             responseContent.innerHTML = '';
             videoPlayer.src = '';
+            textboxLayer.style.display = 'none';
+            textboxContent.innerHTML = '';
+            textboxVisible = false;
             if (websiteVisible) {
                 toggleWebsiteLayer();
             }
@@ -117,6 +131,18 @@
             websiteVisible = !websiteVisible;
         }
 
+        function toggleTextboxLayer() {
+            if (textboxVisible) {
+                textboxLayer.style.display = 'none';
+                textboxContent.innerHTML = '';
+            } else {
+                const markdownText = slides[currentIndex]?.text || "No additional text available.";
+                textboxContent.innerHTML = marked(markdownText);
+                textboxLayer.style.display = 'block';
+            }
+            textboxVisible = !textboxVisible;
+        }
+
         prevBtn.addEventListener('click', () => {
             currentIndex = (currentIndex - 1 + slides.length) % slides.length;
             loadSlide(currentIndex);
@@ -147,6 +173,7 @@
         });
 
         websiteIcon.addEventListener('click', toggleWebsiteLayer);
+        textboxIcon.addEventListener('click', toggleTextboxLayer);
 
         queryButton.addEventListener('click', async () => {
             const userPrompt = promptText.value.trim();