From 5d115dd2f04e5a5f8aaca67d0eff3b0c8f54ec8d Mon Sep 17 00:00:00 2001 From: Flatlogic Bot Date: Tue, 4 Nov 2025 15:42:43 +0000 Subject: [PATCH] 1.0 --- assets/css/custom.css | 149 ++++++++++++++++++++++++++++++++ assets/js/main.js | 64 ++++++++++++++ index.php | 191 +++++++++++------------------------------- 3 files changed, 260 insertions(+), 144 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..374c0e6 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,149 @@ + +html, body { + height: 100%; + margin: 0; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + background-color: #F9F9F9; +} + +body { + display: flex; + align-items: center; + justify-content: center; +} + +.chat-container { + width: 100%; + max-width: 800px; + height: 90vh; + max-height: 1000px; + background: #FFFFFF; + border-radius: 16px; + border: 1px solid #E5E5E5; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; + overflow: hidden; +} + +.chat-header { + padding: 16px 20px; + background: #FFFFFF; + color: #000000; + font-weight: 600; + text-align: center; + border-bottom: 1px solid #F0F0F0; + flex-shrink: 0; +} + +.chat-body { + flex-grow: 1; + padding: 30px 20px; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 24px; +} + +.chat-greeting { + text-align: center; + margin: auto 0; + padding: 20px; +} + +.chat-greeting h1 { + font-weight: 700; + font-size: 2.5rem; + margin-bottom: 1rem; +} + +.chat-greeting p { + font-size: 1.1rem; + color: #6c757d; +} + +.chat-message { + display: flex; + align-items: flex-start; + gap: 16px; + max-width: 100%; + line-height: 1.6; +} + +.chat-message .avatar { + width: 40px; + height: 40px; + border-radius: 50%; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + font-weight: bold; +} + +.message-content { + padding-top: 8px; + color: #333; +} + +.message-user .avatar { + background-color: #E0E0E0; + color: #555; +} + +.message-bot .avatar { + background-color: #D0E6A5; + color: #4A5C2F; +} + +.chat-footer { + padding: 20px; + background-color: #fff; + border-top: 1px solid #F0F0F0; + flex-shrink: 0; +} + +.chat-input-container { + display: flex; + align-items: center; + border: 1px solid #E0E0E0; + border-radius: 12px; + padding: 8px 8px 8px 20px; + transition: border-color .2s; + background: #F9F9F9; +} + +.chat-input-container:focus-within { + border-color: #AAA; + background: #fff; +} + +.chat-footer .form-control { + border: none; + box-shadow: none; + flex-grow: 1; + padding: 10px 0; + background: transparent; +} + +.chat-footer .form-control:focus { + box-shadow: none; + border-color: transparent; +} + +.chat-footer .btn { + border-radius: 8px; + width: 40px; + height: 40px; + flex-shrink: 0; + background-color: #333; + border-color: #333; + display: flex; + align-items: center; + justify-content: center; +} +.chat-footer .btn:hover { + background-color: #000; + border-color: #000; +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..1fe071d --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,64 @@ +document.addEventListener('DOMContentLoaded', function () { + const sendBtn = document.getElementById('chat-send-btn'); + const chatInput = document.getElementById('chat-input'); + const chatBody = document.getElementById('chat-body'); + const chatGreeting = document.querySelector('.chat-greeting'); + + const appendMessage = (text, sender) => { + // Remove greeting if it exists + if (chatGreeting && chatGreeting.parentElement === chatBody) { + chatBody.removeChild(chatGreeting); + } + + const messageDiv = document.createElement('div'); + messageDiv.classList.add('chat-message', `message-${sender}`); + + const avatarDiv = document.createElement('div'); + avatarDiv.classList.add('avatar'); + + if (sender === 'bot') { + // Simple bot icon + avatarDiv.innerHTML = ''; + } else { + avatarDiv.textContent = 'U'; // Simple text avatar for user + } + + const contentDiv = document.createElement('div'); + contentDiv.classList.add('message-content'); + contentDiv.textContent = text; + + messageDiv.appendChild(avatarDiv); + messageDiv.appendChild(contentDiv); + + chatBody.appendChild(messageDiv); + chatBody.scrollTop = chatBody.scrollHeight; + }; + + const handleUserMessage = () => { + const messageText = chatInput.value.trim(); + if (messageText === '') return; + + appendMessage(messageText, 'user'); + chatInput.value = ''; + + // Simulate bot response + setTimeout(() => { + appendMessage('...', 'bot'); + }, 500); + + setTimeout(() => { + // remove the ... message + if(chatBody.lastChild.textContent.includes('...')){ + chatBody.lastChild.remove(); + } + appendMessage('This is a placeholder response. The backend is not yet connected.', 'bot'); + }, 1500); + }; + + sendBtn.addEventListener('click', handleUserMessage); + chatInput.addEventListener('keypress', function (e) { + if (e.key === 'Enter') { + handleUserMessage(); + } + }); +}); \ No newline at end of file diff --git a/index.php b/index.php index 7205f3d..a2354d0 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,53 @@ - - + - - - New Style - - - - - - - - - - - - - - - - - - - + + + + blu-magicai + + + + + + + + + + + + + + + -
-
-

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

+ +
+
+ AI Assistant +
+
+
+

Welcome to blu-magicai

+

Your friendly AI assistant is ready to chat.

+
+ +
+
+
+ + +
+
-
- + + + + - + \ No newline at end of file