From 9a32bc2a90e193faa532ba8d2bbcfbf4208beca0 Mon Sep 17 00:00:00 2001 From: Flatlogic Bot Date: Thu, 25 Sep 2025 18:34:18 +0000 Subject: [PATCH] 2.O --- assets/css/custom.css | 87 +++++++++++++++++++++++ assets/js/main.js | 56 +++++++++++++++ index.php | 161 ++++++++++-------------------------------- 3 files changed, 179 insertions(+), 125 deletions(-) create mode 100644 assets/css/custom.css create mode 100644 assets/js/main.js diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..cb24760 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,87 @@ + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + background-color: #f8f9fa; +} + +.chat-widget-button { + position: fixed; + bottom: 20px; + right: 20px; + width: 60px; + height: 60px; + border-radius: 50%; + background-color: #007bff; + color: white; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + box-shadow: 0 4px 8px rgba(0,0,0,0.2); + transition: all 0.3s; +} + +.chat-widget-button:hover { + transform: scale(1.1); + box-shadow: 0 6px 12px rgba(0,0,0,0.3); +} + +.chat-widget { + display: none; + position: fixed; + bottom: 100px; + right: 20px; + width: 350px; + max-width: 90%; + height: 500px; + background-color: #ffffff; + border-radius: 0.5rem; + box-shadow: 0 4px 16px rgba(0,0,0,0.2); + flex-direction: column; +} + +.chat-header { + background: linear-gradient(to right, #007bff, #0056b3); + color: white; + padding: 1rem; + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; + text-align: center; +} + +.chat-body { + flex-grow: 1; + padding: 1rem; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.chat-message { + padding: 0.5rem 1rem; + border-radius: 0.5rem; + max-width: 80%; + line-height: 1.5; +} + +.user-message { + background-color: #007bff; + color: white; + align-self: flex-end; +} + +.bot-message { + background-color: #e9ecef; + color: #333; + align-self: flex-start; +} + +.chat-footer { + padding: 1rem; + border-top: 1px solid #dee2e6; +} + +.chat-footer .form-control { + border-radius: 0.5rem; +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..b1a3880 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,56 @@ + +document.addEventListener('DOMContentLoaded', () => { + const chatWidgetButton = document.getElementById('chat-widget-button'); + const chatWidget = document.getElementById('chat-widget'); + const chatCloseButton = document.getElementById('chat-close-button'); + const chatForm = document.getElementById('chat-form'); + const chatBody = document.getElementById('chat-body'); + const chatInput = document.getElementById('chat-input'); + + chatWidgetButton.addEventListener('click', () => { + chatWidget.style.display = 'flex'; + chatWidgetButton.style.display = 'none'; + }); + + chatCloseButton.addEventListener('click', () => { + chatWidget.style.display = 'none'; + chatWidgetButton.style.display = 'block'; + }); + + chatForm.addEventListener('submit', (e) => { + e.preventDefault(); + const userInput = chatInput.value.trim(); + if (userInput === '') return; + + addMessage(userInput, 'user'); + chatInput.value = ''; + + setTimeout(() => { + const botResponse = getBotResponse(userInput); + addMessage(botResponse, 'bot'); + }, 500); + }); + + function addMessage(text, sender) { + const messageElement = document.createElement('div'); + messageElement.classList.add('chat-message', `${sender}-message`); + messageElement.textContent = text; + chatBody.appendChild(messageElement); + chatBody.scrollTop = chatBody.scrollHeight; + } + + function getBotResponse(userInput) { + const lowerInput = userInput.toLowerCase(); + if (lowerInput.includes('hello') || lowerInput.includes('hi')) { + return 'Hello there! How can I help you today?'; + } else if (lowerInput.includes('help')) { + return 'I can answer simple questions. Try asking me about pricing or features.'; + } else if (lowerInput.includes('pricing')) { + return 'Our pricing is very competitive. Please visit our pricing page for more details.'; + } else if (lowerInput.includes('feature')) { + return 'We have a wide range of features to meet your needs.'; + } else { + return "I'm sorry, I don't understand. Can you please rephrase?"; + } + } +}); diff --git a/index.php b/index.php index 6f7ffab..c474580 100644 --- a/index.php +++ b/index.php @@ -1,131 +1,42 @@ - - + - - - New Style - - - - + + + Chat Page + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

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 Chat Page

+

Click the button below to start a conversation with our bot.

-
- + +
+ +
+ +
+
+
Chat with us
+ +
+
+
Hello! How can I help you?
+
+
+
+ + +
+
+
+ + - + \ No newline at end of file