Update static/test.js

static/test.js

@@ -1,82 +1,49 @@
-// Function to show the selected section
-function showSection(sectionId) {
-    // Hide all sections
-    document.querySelectorAll('.tool-section').forEach(section => {
-        section.classList.add('hidden');
-    });
-
-    // Hide cards view
-    document.querySelector('.cards').classList.add('hidden');
 
-    // Show the selected section
-    const sectionToShow = document.getElementById(sectionId);
-    if (sectionToShow) {
-        sectionToShow.classList.remove('hidden');
-        sectionToShow.scrollIntoView({ behavior: 'smooth', block: 'start' });
+// Function to show the selected section and hide the others
+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 toggleSection(card) {
-  const sectionId = card.getAttribute('data-section');
-  const section = document.getElementById(sectionId);
-  
-  // Check if this is the currently shown section
-  const isAlreadyShown = !section.classList.contains('hidden');
-  
-  // Hide all sections first
-  document.querySelectorAll('.tool-section').forEach(sec => {
-    sec.classList.add('hidden');
-  });
-  
-  // Toggle this section
-  if (!isAlreadyShown) {
-    section.classList.remove('hidden');
-    section.scrollIntoView({ behavior: 'smooth', block: 'start' });
-  }
-  
-  // Update active card styling
-  document.querySelectorAll('.card').forEach(c => {
-    c.classList.remove('active');
-  });
-  
-  if (!isAlreadyShown) {
-    card.classList.add('active');
-  }
-}
 
-// Function to go back to cards view
 function showCards() {
-    document.querySelectorAll('.tool-section').forEach(section => {
-        section.classList.add('hidden');
+    // 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';
     });
-    document.querySelector('.cards').classList.remove('hidden');
+    
+    // Scroll to top
     window.scrollTo({ top: 0, behavior: 'smooth' });
 }
 
-// Only one DOMContentLoaded
-document.addEventListener('DOMContentLoaded', function() {
-    // Hide all tool sections at the start
-    document.querySelectorAll('.tool-section').forEach(section => {
-        section.classList.add('hidden');
-    });
-
-    // Show only cards initially
-    showCards();
-
+document.addEventListener('DOMContentLoaded', () => {
     // Set up card click handlers
     document.querySelectorAll('.card').forEach(card => {
         card.addEventListener('click', function() {
-            const sectionId = this.getAttribute('data-section');
+            const sectionId = this.getAttribute('onclick').match(/'([^']+)'/)[1];
             showSection(sectionId);
         });
     });
 
-    // If you have a "Back to cards" button somewhere
-    const backButtons = document.querySelectorAll('.back-to-cards');
-    backButtons.forEach(button => {
-        button.addEventListener('click', showCards);
+    // 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');
 
     // Helper functions
     function preventDefaults(e) {