December 17th,2025 V.20

assets/js/main.js

@@ -1,74 +1,31 @@
-// FinMox Flow main.js
+document.addEventListener('DOMContentLoaded', function () {
+    const tabsContainer = document.querySelector('#human-in-loop-tabs');
+    if (!tabsContainer) return;
 
-document.addEventListener('DOMContentLoaded', function() {
+    const tabs = tabsContainer.querySelectorAll('.tab-button');
-    const chatContainer = document.getElementById('chat-container');
+    const contents = tabsContainer.querySelectorAll('.tab-content');
-    const chatToggle = document.getElementById('chat-toggle');
-    const closeChat = document.getElementById('close-chat');
-    const chatInput = document.getElementById('chat-input');
-    const sendChat = document.getElementById('send-chat');
-    const chatBody = document.getElementById('chat-body');
 
-    // Toggle chat window
+    tabs.forEach(tab => {
-    if (chatToggle) {
+        tab.addEventListener('click', () => {
-        chatToggle.addEventListener('click', function() {
+            const target = tab.getAttribute('data-tab');
-            chatContainer.style.display = (chatContainer.style.display === 'flex') ? 'none' : 'flex';
-        });
-    }
 
-    // Close chat window
+            // Deactivate all tabs and hide all content
-    if (closeChat) {
+            tabs.forEach(t => {
-        closeChat.addEventListener('click', function() {
+                t.classList.remove('active-tab', 'border-black', 'text-gray-900');
-            chatContainer.style.display = 'none';
+                t.classList.add('text-gray-500', 'border-transparent');
-        });
+            });
-    }
+            contents.forEach(c => {
+                c.classList.add('hidden');
+            });
 
-    // Send message
+            // Activate the clicked tab and show its content
-    const sendMessage = () => {
+            tab.classList.add('active-tab', 'border-black', 'text-gray-900');
-        const message = chatInput.value.trim();
+            tab.classList.remove('text-gray-500', 'border-transparent');
-        if (message === '') return;
+            
-
+            const activeContent = tabsContainer.querySelector(`#${target}`);
-        appendMessage(message, 'user');
+            if (activeContent) {
-        chatInput.value = '';
+                activeContent.classList.remove('hidden');
-
-        fetch('api/chat.php', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({ message: message })
-        })
-        .then(response => response.json())
-        .then(data => {
-            if (data.reply) {
-                appendMessage(data.reply, 'ai');
-            } else {
-                appendMessage('Sorry, something went wrong.', 'ai');
-            }
-        })
-        .catch(error => {
-            console.error('Error:', error);
-            appendMessage('Sorry, something went wrong.', 'ai');
-        });
-    };
-
-    if (sendChat) {
-        sendChat.addEventListener('click', sendMessage);
-    }
-
-    if (chatInput) {
-        chatInput.addEventListener('keypress', function(e) {
-            if (e.key === 'Enter') {
-                sendMessage();
             }
         });
-    }
+    });
-
+});
-    // Append message to chat body
-    const appendMessage = (message, sender) => {
-        const messageElement = document.createElement('div');
-        messageElement.classList.add('chat-message', `chat-message-${sender}`);
-        messageElement.textContent = message;
-        chatBody.appendChild(messageElement);
-        chatBody.scrollTop = chatBody.scrollHeight; // Scroll to bottom
-    };
-});

product.php

@@ -55,20 +55,29 @@
         <section class="mt-16 text-center">
             <h2 class="text-3xl font-bold">Human‑in‑the‑Loop Control</h2>
             <p class="mt-4 max-w-2xl mx-auto text-lg text-gray-600">You review, approve, and decide — FinMox handles the busy work. No automated hiring decisions.</p>
-            <div class="mt-10 grid grid-cols-3 gap-8 text-center">
+            
-                <div>
+            <div id="human-in-loop-tabs" class="mt-10 max-w-3xl mx-auto">
-                    <h3 class="text-xl font-bold">Automation</h3>
+                <!-- Tab Buttons -->
-                    <p class="mt-2 text-gray-600">FinMox automates the repeatable workflow steps so your team stays focused on decision-making.</p>
+                <div class="flex justify-center border-b border-gray-200">
+                    <button data-tab="automation" class="tab-button active-tab px-6 py-3 font-semibold text-lg border-b-2 border-black">Automation</button>
+                    <button data-tab="ai-outputs" class="tab-button px-6 py-3 font-semibold text-lg text-gray-500 border-b-2 border-transparent">AI Outputs</button>
+                    <button data-tab="security" class="tab-button px-6 py-3 font-semibold text-lg text-gray-500 border-b-2 border-transparent">Security</button>
                 </div>
-                <div>
+
-                    <h3 class="text-xl font-bold">AI Outputs</h3>
+                <!-- Tab Content -->
-                     <p class="mt-2 text-gray-600">Human-reviewed outputs ensure quality and alignment with your company culture.</p>
+                <div class="mt-8">
-                </div>
+                    <div id="automation" class="tab-content">
-                <div>
+                        <p class="text-gray-600">FinMox automates the repeatable workflow steps so your team stays focused on decision-making.</p>
-                    <h3 class="text-xl font-bold">Security</h3>
+                    </div>
-                     <p class="mt-2 text-gray-600">Built for intentional hiring with security and privacy at the forefront.</p>
+                    <div id="ai-outputs" class="tab-content hidden">
+                        <p class="text-gray-600">FinMox generates interview questions, summaries, and recommendations all reviewable and editable.</p>
+                    </div>
+                    <div id="security" class="tab-content hidden">
+                        <p class="text-gray-600">Human reviewed outputs, audit-friendly documentation, and compliance-aware design.</p>
+                    </div>
                 </div>
             </div>
+
             <a href="features.php" class="mt-12 inline-block bg-black text-white text-sm px-6 py-3 rounded-lg font-semibold">See How It Works →</a>
         </section>
     </main>
@@ -86,5 +95,6 @@
         </div>
     </footer>
 
+    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
 </body>
 </html>