December 17th,2025 V.20

This commit is contained in:
Flatlogic Bot 2025-12-17 23:17:36 +00:00
parent 34145e80f5
commit 9d5bb77e52
3 changed files with 46 additions and 79 deletions

View File

@ -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 chatContainer = document.getElementById('chat-container');
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');
const tabs = tabsContainer.querySelectorAll('.tab-button');
const contents = tabsContainer.querySelectorAll('.tab-content');
// Toggle chat window
if (chatToggle) {
chatToggle.addEventListener('click', function() {
chatContainer.style.display = (chatContainer.style.display === 'flex') ? 'none' : 'flex';
});
}
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const target = tab.getAttribute('data-tab');
// Close chat window
if (closeChat) {
closeChat.addEventListener('click', function() {
chatContainer.style.display = 'none';
});
}
// Deactivate all tabs and hide all content
tabs.forEach(t => {
t.classList.remove('active-tab', 'border-black', 'text-gray-900');
t.classList.add('text-gray-500', 'border-transparent');
});
contents.forEach(c => {
c.classList.add('hidden');
});
// Send message
const sendMessage = () => {
const message = chatInput.value.trim();
if (message === '') return;
appendMessage(message, 'user');
chatInput.value = '';
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();
// Activate the clicked tab and show its content
tab.classList.add('active-tab', 'border-black', 'text-gray-900');
tab.classList.remove('text-gray-500', 'border-transparent');
const activeContent = tabsContainer.querySelector(`#${target}`);
if (activeContent) {
activeContent.classList.remove('hidden');
}
});
}
// 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
};
});
});
});

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

View File

@ -55,20 +55,29 @@
<section class="mt-16 text-center">
<h2 class="text-3xl font-bold">HumanintheLoop 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>
<h3 class="text-xl font-bold">Automation</h3>
<p class="mt-2 text-gray-600">FinMox automates the repeatable workflow steps so your team stays focused on decision-making.</p>
<div id="human-in-loop-tabs" class="mt-10 max-w-3xl mx-auto">
<!-- Tab Buttons -->
<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>
<p class="mt-2 text-gray-600">Human-reviewed outputs ensure quality and alignment with your company culture.</p>
</div>
<div>
<h3 class="text-xl font-bold">Security</h3>
<p class="mt-2 text-gray-600">Built for intentional hiring with security and privacy at the forefront.</p>
<!-- Tab Content -->
<div class="mt-8">
<div id="automation" class="tab-content">
<p class="text-gray-600">FinMox automates the repeatable workflow steps so your team stays focused on decision-making.</p>
</div>
<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>