diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..2e1a8c7 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,90 @@ +/* Chat Widget */ +.chat-widget-button { + position: fixed; + bottom: 20px; + right: 20px; + width: 60px; + height: 60px; + border-radius: 50%; + background-color: #0D6EFD; + color: white; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + box-shadow: 0 4px 8px rgba(0,0,0,0.2); + z-index: 1000; +} + +.chat-widget { + display: none; + position: fixed; + bottom: 100px; + right: 20px; + width: 350px; + max-width: 90%; + background-color: #fff; + border-radius: 15px; + box-shadow: 0 4px 12px rgba(0,0,0,0.15); + z-index: 1000; + flex-direction: column; +} + +.chat-widget-header { + background: linear-gradient(to right, #0D6EFD, #4DA8FF); + color: white; + padding: 1rem; + border-top-left-radius: 15px; + border-top-right-radius: 15px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.chat-widget-header h5 { + margin: 0; +} + +.chat-widget-close { + cursor: pointer; + font-size: 1.2rem; +} + +.chat-widget-body { + height: 300px; + overflow-y: auto; + padding: 1rem; + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.chat-message { + padding: 0.5rem 1rem; + border-radius: 1.25rem; + max-width: 80%; + word-wrap: break-word; +} + +.chat-message.user { + background-color: #0D6EFD; + color: white; + align-self: flex-end; + border-bottom-right-radius: 0.25rem; +} + +.chat-message.bot { + background-color: #E9ECEF; + color: #333; + align-self: flex-start; + border-bottom-left-radius: 0.25rem; +} + +.chat-widget-footer { + padding: 1rem; + border-top: 1px solid #E9ECEF; +} + +.chat-widget-footer .form-control { + border-radius: 1.5rem; +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..07cb031 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,45 @@ +document.addEventListener('DOMContentLoaded', function() { + const chatWidgetButton = document.getElementById('chat-widget-button'); + const chatWidget = document.getElementById('chat-widget'); + const closeButton = document.getElementById('chat-widget-close'); + const chatBody = document.getElementById('chat-widget-body'); + const chatInput = document.getElementById('chat-input'); + const sendButton = document.getElementById('send-button'); + + chatWidgetButton.addEventListener('click', () => { + chatWidget.style.display = 'flex'; + chatWidgetButton.style.display = 'none'; + }); + + closeButton.addEventListener('click', () => { + chatWidget.style.display = 'none'; + chatWidgetButton.style.display = 'block'; + }); + + const sendMessage = () => { + const message = chatInput.value.trim(); + if (message) { + addMessage(message, 'user'); + chatInput.value = ''; + setTimeout(() => { + addMessage('Thanks for your message! An agent will be with you shortly.', 'bot'); + }, 1000); + } + }; + + sendButton.addEventListener('click', sendMessage); + + chatInput.addEventListener('keypress', (e) => { + if (e.key === 'Enter') { + sendMessage(); + } + }); + + function addMessage(text, type) { + const messageElement = document.createElement('div'); + messageElement.classList.add('chat-message', type); + messageElement.textContent = text; + chatBody.appendChild(messageElement); + chatBody.scrollTop = chatBody.scrollHeight; + } +}); diff --git a/index.php b/index.php index 7205f3d..f4f369e 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,51 @@ - - + - - - New Style - - - - - - - - - - - - - - - - - - - + + + vbvb + + + + + + + + + + + -
-
-

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 Support

+

Click the chat bubble in the corner to start a conversation.

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