update web interface

static/js/tabs.js

@@ -0,0 +1,72 @@
+// Tab functionality for commission rates
+document.addEventListener('DOMContentLoaded', function() {
+    const tabButtons = document.querySelectorAll('.tab-button');
+    const tabPanes = document.querySelectorAll('.tab-pane');
+    const tabsContainer = document.querySelector('.tabs-container');
+
+    // Function to switch tabs
+    function switchTab(tabId) {
+        // Hide all tab panes
+        tabPanes.forEach(pane => {
+            pane.classList.remove('active');
+        });
+
+        // Remove active class from all buttons
+        tabButtons.forEach(button => {
+            button.classList.remove('active');
+        });
+
+        // Show the selected tab pane
+        const selectedPane = document.getElementById(tabId);
+        if (selectedPane) {
+            selectedPane.classList.add('active');
+        }
+
+        // Activate the clicked button
+        const activeButton = document.querySelector(`[data-tab="${tabId}"]`);
+        if (activeButton) {
+            activeButton.classList.add('active');
+        }
+
+        // Update URL hash for deep linking without scrolling
+        if (history.replaceState) {
+            history.replaceState(null, null, '#' + tabId);
+        } else {
+            window.location.hash = tabId;
+        }
+
+        // Smoothly scroll to the top of the tabs container with offset
+        if (tabsContainer) {
+            const containerTop = tabsContainer.getBoundingClientRect().top + window.pageYOffset;
+            const offset = 100; // Adjust this value to control how much to scroll
+            window.scrollTo({
+                top: containerTop - offset,
+                behavior: 'smooth'
+            });
+        }
+    }
+
+    // Add click event listeners to all tab buttons
+    tabButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const tabId = this.getAttribute('data-tab');
+            switchTab(tabId);
+        });
+    });
+
+    // Check for hash in URL on page load
+    if (window.location.hash) {
+        const hash = window.location.hash.substring(1);
+        if (['stocks', 'options', 'futures', 'funds', 'other'].includes(hash)) {
+            switchTab(hash);
+        }
+    }
+
+    // Handle browser back/forward navigation
+    window.addEventListener('hashchange', function() {
+        const hash = window.location.hash.substring(1);
+        if (['stocks', 'options', 'futures', 'funds', 'other'].includes(hash)) {
+            switchTab(hash);
+        }
+    });
+});