Update index.html

index.html

@@ -16,7 +16,8 @@
             display: flex;
             flex-direction: row;
             min-height: 100vh;
-            background-color: #f0f0f0;
+            background-color: #000;
+            color: #fff;
         }
         /* Sidebar styling */
         .sidebar {
@@ -55,7 +56,7 @@
             position: absolute;
             top: 0;
             width: 100%;
-            background-color: #333;
+            background-color: #444;
             color: white;
             text-align: center;
             padding: 10px;
@@ -226,20 +227,20 @@
         fetchSlides();
 
         // Grok Chat script
-        const API_KEY = "xai-hOb0j9QUXVVQMe86ULxWrvyWQQm2LqnWVdxh5hanvqsiVDsXcSPY9EA7YAM5uLCXaThgJscWxxFCHJFy";
-        const BASE_URL = "https://api.x.ai/v1";
-
         const promptIcon = document.getElementById('promptIcon');
         const promptBox = document.getElementById('promptBox');
         const promptText = document.getElementById('promptText');
         const queryButton = document.getElementById('queryButton');
         const responseBox = document.getElementById('responseBox');
         const responseText = document.getElementById('responseText');
+        let isPromptBoxVisible = false;
 
         promptIcon.addEventListener('click', () => {
-            const slideText = slides[currentIndex]?.text || "Default prompt";
-            promptBox.style.display = "block";
-            promptText.value = slideText;
+            isPromptBoxVisible = !isPromptBoxVisible;
+            promptBox.style.display = isPromptBoxVisible ? "block" : "none";
+            if (!isPromptBoxVisible) {
+                responseBox.style.display = "none";
+            }
         });
 
         queryButton.addEventListener('click', async () => {