diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..52e8eaf --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,52 @@ +body { + background-color: #f8f9fa; +} + +.chat-container { + margin-top: 50px; + max-width: 800px; +} + +.chat-header { + background: linear-gradient(to right, #007bff, #0056b3); + color: white; + padding: 15px; + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; +} + +.chat-body { + height: 400px; + overflow-y: auto; + padding: 15px; + background-color: #ffffff; + border-bottom: 1px solid #ddd; +} + +.chat-footer { + padding: 15px; + background-color: #ffffff; + border-bottom-left-radius: 0.5rem; + border-bottom-right-radius: 0.5rem; +} + +.message { + margin-bottom: 15px; +} + +.message .bubble { + padding: 10px 15px; + border-radius: 1.1rem; + max-width: 75%; +} + +.message.user .bubble { + background-color: #007bff; + color: white; + margin-left: auto; +} + +.message.bot .bubble { + background-color: #e9ecef; + color: #333; +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..ec700ae --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,36 @@ +document.addEventListener('DOMContentLoaded', function () { + const chatBody = document.getElementById('chat-body'); + const chatInput = document.getElementById('chat-input'); + const sendButton = document.getElementById('send-button'); + + const appendMessage = (text, sender) => { + const messageDiv = document.createElement('div'); + messageDiv.classList.add('message', sender); + + const bubbleDiv = document.createElement('div'); + bubbleDiv.classList.add('bubble'); + bubbleDiv.textContent = text; + + messageDiv.appendChild(bubbleDiv); + chatBody.appendChild(messageDiv); + chatBody.scrollTop = chatBody.scrollHeight; + }; + + const handleUserMessage = () => { + const message = chatInput.value.trim(); + if (message) { + appendMessage(message, 'user'); + chatInput.value = ''; + setTimeout(() => { + appendMessage('This is a simple built-in reply.', 'bot'); + }, 500); + } + }; + + sendButton.addEventListener('click', handleUserMessage); + chatInput.addEventListener('keypress', function (e) { + if (e.key === 'Enter') { + handleUserMessage(); + } + }); +}); diff --git a/index.php b/index.php index 6f7ffab..322b94e 100644 --- a/index.php +++ b/index.php @@ -1,131 +1,39 @@ - - + - - - 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

+ +
+
+
+

Chat with our Bot

+
+
+
+
+ Hi, glad to see you here! How can I help you today? +
+
+
+
+
+ + +
+
+
-
- + + + - + \ No newline at end of file