Abc

api/chat.php

@@ -0,0 +1,7 @@
+<?php
+header('Content-Type: application/json');
+
+// In the future, this can be connected to a database or an AI service.
+$canned_response = "Thanks for your message! We've received it and will get back to you shortly. For now, feel free to browse our FAQ section.";
+
+echo json_encode(['reply' => $canned_response]);

assets/css/custom.css

@@ -0,0 +1,98 @@
+/* Chat Widget */
+.chat-widget-fab {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    width: 4rem;
+    height: 4rem;
+    border-radius: 50%;
+    background-color: #4F46E5;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+    transition: transform 0.2s ease-in-out;
+}
+
+.chat-widget-fab:hover {
+    transform: scale(1.1);
+}
+
+.chat-widget-container {
+    position: fixed;
+    bottom: 7rem;
+    right: 2rem;
+    width: 370px;
+    max-width: 90vw;
+    height: 70vh;
+    max-height: 600px;
+    background-color: #FFFFFF;
+    border-radius: 0.75rem;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    transform: scale(0.95);
+    opacity: 0;
+    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
+    transform-origin: bottom right;
+    display: none;
+}
+
+.chat-widget-container.open {
+    display: flex;
+    transform: scale(1);
+    opacity: 1;
+}
+
+.chat-header {
+    background-color: #4F46E5;
+    color: white;
+    padding: 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.chat-header h5 {
+    margin: 0;
+    font-weight: 600;
+}
+
+.chat-body {
+    flex-grow: 1;
+    padding: 1rem;
+    overflow-y: auto;
+    background-color: #F3F4F6;
+    display: flex;
+    flex-direction: column;
+}
+
+.chat-message {
+    max-width: 80%;
+    padding: 0.75rem 1rem;
+    border-radius: 1rem;
+    margin-bottom: 0.5rem;
+    word-wrap: break-word;
+}
+
+.chat-message.user {
+    background-color: #4F46E5;
+    color: white;
+    align-self: flex-end;
+    border-bottom-right-radius: 0.25rem;
+}
+
+.chat-message.bot {
+    background-color: #FFFFFF;
+    color: #374151;
+    align-self: flex-start;
+    border-bottom-left-radius: 0.25rem;
+}
+
+.chat-footer {
+    padding: 1rem;
+    border-top: 1px solid #E5E7EB;
+}

assets/js/main.js

@@ -0,0 +1,70 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const chatFab = document.getElementById('chat-fab');
+    const chatContainer = document.getElementById('chat-container');
+    const closeChat = document.getElementById('close-chat');
+    const chatForm = document.getElementById('chat-form');
+    const chatBody = document.getElementById('chat-body');
+    const chatInput = document.getElementById('chat-input');
+
+    chatFab.addEventListener('click', () => {
+        toggleChat();
+    });
+
+    closeChat.addEventListener('click', () => {
+        toggleChat();
+    });
+
+    function toggleChat() {
+        chatContainer.classList.toggle('open');
+    }
+
+    chatForm.addEventListener('submit', function (e) {
+        e.preventDefault();
+        const message = chatInput.value.trim();
+        if (message === '') return;
+
+        appendMessage(message, 'user');
+        chatInput.value = '';
+        chatBody.scrollTop = chatBody.scrollHeight;
+
+        // Show typing indicator
+        appendMessage('...', 'bot', true);
+        chatBody.scrollTop = chatBody.scrollHeight;
+
+        fetch('api/chat.php', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ message: message }),
+        })
+        .then(response => response.json())
+        .then(data => {
+            const typingIndicator = document.querySelector('.typing-indicator');
+            if (typingIndicator) {
+                typingIndicator.remove();
+            }
+            appendMessage(data.reply, 'bot');
+            chatBody.scrollTop = chatBody.scrollHeight;
+        })
+        .catch(error => {
+            console.error('Error:', error);
+            const typingIndicator = document.querySelector('.typing-indicator');
+            if (typingIndicator) {
+                typingIndicator.remove();
+            }
+            appendMessage('Sorry, something went wrong.', 'bot');
+            chatBody.scrollTop = chatBody.scrollHeight;
+        });
+    });
+
+    function appendMessage(text, type, isTyping = false) {
+        const messageDiv = document.createElement('div');
+        messageDiv.classList.add('chat-message', type);
+        if (isTyping) {
+            messageDiv.classList.add('typing-indicator');
+        }
+        messageDiv.textContent = text;
+        chatBody.appendChild(messageDiv);
+    }
+});