Update script.js

script.js

@@ -1,29 +1,28 @@
 // Theme Toggle
-const themeSwitch = document.getElementById('theme-switch');
-themeSwitch.addEventListener('click', () => {
+const themeToggle = document.getElementById('theme-toggle');
+themeToggle.addEventListener('click', () => {
     document.body.classList.toggle('light');
-    themeSwitch.textContent = document.body.classList.contains('light') ? '☀️' : '🌙';
 });
 
 // Query Submission
 document.getElementById('submit-query').addEventListener('click', () => {
     const query = document.getElementById('query-input').value.trim();
     if (!query) {
-        alert('Please enter a query.');
+        showFeedback('Please enter a query.', 'error');
         return;
     }
 
-    // Simulate loading state
+    // Show loading state
     const responseOutput = document.getElementById('response-output');
     const contextOutput = document.getElementById('context-output');
-    responseOutput.innerHTML = '<p class="loading">Generating response...</p>';
-    contextOutput.innerHTML = '<p class="loading">Retrieving context...</p>';
+    responseOutput.innerHTML = '<p class="loading">Processing...</p>';
+    contextOutput.innerHTML = '<p class="loading">Retrieving...</p>';
 
-    // Simulate API response (replace with actual backend integration)
+    // Simulate API call (replace with actual backend integration)
     setTimeout(() => {
-        responseOutput.innerHTML = `<p>Response to: ${query}</p>`;
+        responseOutput.innerHTML = `<p>Response for: ${query}</p>`;
         contextOutput.innerHTML = `<p>Context for: ${query}</p>`;
-    }, 1500);
+    }, 1200);
 });
 
 // Apply Settings
@@ -33,18 +32,45 @@ document.getElementById('apply-settings').addEventListener('click', () => {
     const temperature = document.getElementById('temperature').value;
     const contextLength = document.getElementById('context-length').value;
 
-    // Simulate settings application
-    const settingsOutput = `Settings applied: Model=${model}, Top-K=${topK}, Temperature=${temperature}, Context Length=${contextLength}`;
-    console.log(settingsOutput);
-    alert(settingsOutput);
+    const settings = `Model: ${model}, Top-K: ${topK}, Temperature: ${temperature}, Context Length: ${contextLength}`;
+    showFeedback(`Settings updated: ${settings}`, 'success');
 });
 
-// Smooth scroll for better UX
-document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-    anchor.addEventListener('click', (e) => {
-        e.preventDefault();
-        document.querySelector(anchor.getAttribute('href')).scrollIntoView({
-            behavior: 'smooth'
-        });
-    });
-});
+// Feedback Function
+function showFeedback(message, type) {
+    const feedback = document.createElement('div');
+    feedback.className = `feedback feedback-${type}`;
+    feedback.textContent = message;
+    document.body.appendChild(feedback);
+    setTimeout(() => {
+        feedback.style.opacity = '0';
+        setTimeout(() => feedback.remove(), 300);
+    }, 2000);
+}
+
+// Dynamic Loading Styles
+const style = document.createElement('style');
+style.textContent = `
+    .loading {
+        opacity: 0.7;
+        font-style: italic;
+    }
+    .feedback {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        padding: 12px 24px;
+        border-radius: 8px;
+        color: #fff;
+        font-size: 0.9em;
+        transition: opacity 0.3s;
+        z-index: 1000;
+    }
+    .feedback-success {
+        background: #00c4ff;
+    }
+    .feedback-error {
+        background: #ff4d4d;
+    }
+`;
+document.head.appendChild(style);