diff --git a/api/chat.php b/api/chat.php new file mode 100644 index 0000000..a117d67 --- /dev/null +++ b/api/chat.php @@ -0,0 +1,9 @@ + $canned_response]); diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..9cd04d4 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,141 @@ + +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); + +body { + font-family: 'Inter', sans-serif; + background-color: #F3F4F6; +} + +.chat-widget-button { + position: fixed; + bottom: 2rem; + right: 2rem; + background-color: #4F46E5; + color: white; + width: 60px; + height: 60px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); + transition: transform 0.2s ease-in-out; +} + +.chat-widget-button:hover { + transform: scale(1.1); +} + +.chat-widget-button svg { + width: 32px; + height: 32px; +} + +.chat-popup { + display: none; + position: fixed; + bottom: 6.5rem; + right: 2rem; + width: 375px; + max-width: 90vw; + height: 70vh; + max-height: 600px; + background: #FFFFFF; + border-radius: 0.75rem; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + flex-direction: column; + overflow: hidden; + transform: translateY(20px); + opacity: 0; + transition: opacity 0.3s ease, transform 0.3s ease; +} + +.chat-popup.show { + display: flex; + opacity: 1; + transform: translateY(0); +} + +.chat-header { + background: #4F46E5; + color: white; + padding: 1rem; + display: flex; + justify-content: space-between; + align-items: center; +} + +.chat-header h5 { + margin: 0; + font-weight: 600; +} + +.chat-header .btn-close { + filter: invert(1) grayscale(100%) brightness(200%); +} + +.chat-area { + flex-grow: 1; + padding: 1rem; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.chat-message { + display: flex; + align-items: flex-end; + gap: 0.5rem; + max-width: 85%; +} + +.chat-message .avatar { + width: 40px; + height: 40px; + border-radius: 50%; + object-fit: cover; +} + +.chat-message .message-content { + padding: 0.75rem 1rem; + border-radius: 0.5rem; + line-height: 1.5; +} + +.user-message { + align-self: flex-end; + flex-direction: row-reverse; +} + +.user-message .message-content { + background-color: #4F46E5; + color: white; +} + +.bot-message { + align-self: flex-start; +} + +.bot-message .message-content { + background-color: #E5E7EB; + color: #111827; +} + +.chat-input-area { + padding: 1rem; + border-top: 1px solid #E5E7EB; +} + +.chat-input-area .form-control:focus { + border-color: #4F46E5; + box-shadow: 0 0 0 0.25rem rgba(79, 70, 229, 0.25); +} + +.hero { + background-size: cover; + background-position: center; + color: white; + text-shadow: 0 2px 4px rgba(0,0,0,0.5); +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..275c6bb --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,66 @@ +document.addEventListener('DOMContentLoaded', function () { + const chatPopup = document.getElementById('chat-popup'); + const chatOpenButton = document.getElementById('chat-open-button'); + const chatCloseButton = document.getElementById('chat-close-button'); + const chatArea = document.getElementById('chat-area'); + const chatForm = document.getElementById('chat-form'); + const chatInput = document.getElementById('chat-input'); + + const toggleChat = () => { + chatPopup.classList.toggle('show'); + }; + + chatOpenButton.addEventListener('click', toggleChat); + chatCloseButton.addEventListener('click', toggleChat); + + const addMessage = (sender, message) => { + const messageWrapper = document.createElement('div'); + const avatarUrl = sender === 'user' ? 'https://picsum.photos/seed/avatar-user/100/100' : 'https://picsum.photos/seed/avatar-bot/100/100'; + const avatarAlt = sender === 'user' ? 'User Avatar' : 'Chatbot Avatar'; + const messageClass = sender === 'user' ? 'user-message' : 'bot-message'; + + messageWrapper.className = `chat-message ${messageClass}`; + messageWrapper.innerHTML = ` + ${avatarAlt} +
+ ${message} +
+ `; + chatArea.appendChild(messageWrapper); + chatArea.scrollTop = chatArea.scrollHeight; + }; + + chatForm.addEventListener('submit', function (e) { + e.preventDefault(); + const userMessage = chatInput.value.trim(); + if (userMessage === '') return; + + addMessage('user', userMessage); + chatInput.value = ''; + + setTimeout(() => { + fetch('api/chat.php', { + method: 'POST', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', + }, + body: `message=${encodeURIComponent(userMessage)}` + }) + .then(response => response.json()) + .then(data => { + if (data.reply) { + addMessage('bot', data.reply); + } + }) + .catch(error => { + console.error('Error:', error); + addMessage('bot', 'Sorry, something went wrong. Please try again later.'); + }); + }, 500); // Simulate bot thinking + }); + + // Initial bot message + setTimeout(() => { + addMessage('bot', 'Hello! How can I help you today?'); + }, 1000); +}); diff --git a/index.php b/index.php index e13ae95..eb444e2 100644 --- a/index.php +++ b/index.php @@ -1,131 +1,49 @@ - - + - - - New Style - - - - + + + Chat Page + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

Flatlogic AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

+ +
+
+

Welcome to our Support Chat

+

Ask us anything! Our bot is here to help you 24/7.

+
-
- + + +
+
+
Chat with us
+ +
+
+
+
+ + +
+
+
+ + +
+ + + + +
+ + + - + \ No newline at end of file