Update index.html

index.html

@@ -20,7 +20,7 @@
         }
         /* Sidebar styling */
         .sidebar {
-            width: 40px;
+            width: 60px;
             background-color: #333;
             color: white;
             display: flex;
@@ -29,13 +29,13 @@
             padding: 10px 0;
         }
         .prompt-icon {
-            margin: 20px 0;
+            margin-top: 100px;
             cursor: pointer;
             text-align: center;
         }
         .prompt-icon img {
-            width: 24px;
-            height: 24px;
+            width: 32px;
+            height: 32px;
             margin-bottom: 5px;
         }
         .prompt-icon span {
@@ -101,18 +101,51 @@
             object-fit: contain;
             display: block;
         }
+        /* Prompt box styling */
+        .prompt-box {
+            position: absolute;
+            top: 10%;
+            left: 10%;
+            background-color: rgba(255, 255, 255, 0.9);
+            color: #333;
+            padding: 15px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+            display: none;
+            z-index: 20;
+        }
+        .prompt-box textarea {
+            width: 100%;
+            height: 60px;
+            margin-bottom: 10px;
+            padding: 10px;
+            font-size: 14px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+        .prompt-box button {
+            padding: 5px 10px;
+            font-size: 14px;
+            background-color: #007bff;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
         /* Response box styling */
         .response-box {
             position: absolute;
-            top: 10%;
+            top: 30%;
             left: 10%;
-            background-color: rgba(255, 255, 255, 0.8);
+            background-color: rgba(255, 255, 255, 0.9);
             color: #333;
             padding: 15px;
             border: 1px solid #ccc;
             border-radius: 5px;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
             display: none;
+            z-index: 20;
         }
     </style>
 </head>
@@ -137,6 +170,10 @@
         <div class="main">
             <div class="content">
                 <img id="slide-image" src="images/01_mg.png" alt="Slide Image">
+                <div class="prompt-box" id="promptBox">
+                    <textarea id="promptText"></textarea>
+                    <button id="queryButton">Query Grok</button>
+                </div>
                 <div class="response-box" id="responseBox">
                     <p id="responseText"></p>
                 </div>
@@ -193,10 +230,22 @@
         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');
 
-        async function sendPrompt(prompt) {
+        promptIcon.addEventListener('click', () => {
+            const slideText = slides[currentIndex]?.text || "Default prompt";
+            promptBox.style.display = "block";
+            promptText.value = slideText;
+        });
+
+        queryButton.addEventListener('click', async () => {
+            const userPrompt = promptText.value.trim();
+            if (!userPrompt) return;
+
             responseBox.style.display = "block";
             responseText.textContent = "Loading...";
 
@@ -211,7 +260,7 @@
                         model: "grok-beta",
                         messages: [
                             { role: "system", content: "You are Grok, a chatbot inspired by the Hitchhiker's Guide to the Galaxy." },
-                            { role: "user", content: prompt }
+                            { role: "user", content: userPrompt }
                         ]
                     })
                 });
@@ -225,11 +274,6 @@
             } catch (error) {
                 responseText.textContent = `Error: ${error.message}`;
             }
-        }
-
-        promptIcon.addEventListener('click', () => {
-            const slideText = slides[currentIndex]?.text || "Default prompt";
-            sendPrompt(slideText);
         });
     </script>
 </body>