Update static/test.js

static/test.js

@@ -215,21 +215,35 @@ function showSection(sectionId) {
 // Function to show the selected section and hide the others
 // Main navigation and shared utility functions
 function showSection(sectionId) {
+    // Show the selected section (in case it was hidden)
+    const activeSection = document.getElementById(sectionId);
+    if (activeSection) {
+        activeSection.style.display = 'block';
+        // Scroll to the section smoothly
+        activeSection.scrollIntoView({ 
+            behavior: 'smooth',
+            block: 'start' // Aligns the section at the top of the viewport
+        });
+    }
+}
+
+
+function showCards() {
+    // Show cards section
+    document.querySelector('.cards').style.display = 'grid'; // or 'flex' depending on your layout
+    
     // Hide all tool sections
     const sections = document.querySelectorAll('.tool-section');
     sections.forEach(section => {
         section.style.display = 'none';
     });
-
-    // Show the selected section
-    const activeSection = document.getElementById(sectionId);
-    if (activeSection) {
-        activeSection.style.display = 'block';
-        activeSection.scrollIntoView({ behavior: 'smooth' });
-    }
+    
+    // Scroll to top
+    window.scrollTo({ top: 0, behavior: 'smooth' });
 }
 
-// Initialize the page
+
+
 document.addEventListener('DOMContentLoaded', () => {
     // Set up card click handlers
     document.querySelectorAll('.card').forEach(card => {
@@ -239,6 +253,13 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     });
 
+    // Hide all tool sections by default
+    const sections = document.querySelectorAll('.tool-section');
+    sections.forEach(section => {
+        section.style.display = 'none';
+    });
+});
+
     // Show first section by default
     showSection('document-image-analysis');