December 17th,2025 V.20
This commit is contained in:
parent
34145e80f5
commit
9d5bb77e52
@ -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
|
||||
};
|
||||
});
|
||||
});
|
||||
});
|
||||
BIN
assets/pasted-20251217-231721-0d7eeef8.png
Normal file
BIN
assets/pasted-20251217-231721-0d7eeef8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
32
product.php
32
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>
|
||||
<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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user