diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..7b57fdd --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,110 @@ + +@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Roboto:wght@400;500&display=swap'); + +body { + background-color: #F5F5F7; + color: #1D1D1F; + font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.chat-container { + width: 100%; + max-width: 800px; + height: 90vh; + background-color: #FFFFFF; + border-radius: 12px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; + overflow: hidden; +} + +.chat-header { + background: linear-gradient(90deg, #5E5DF0, #9D9BF5); + color: white; + padding: 16px; + text-align: center; + font-family: 'Playfair Display', Georgia, serif; + font-size: 1.5rem; + border-bottom: 1px solid #E5E5EA; +} + +.chat-box { + flex-grow: 1; + padding: 16px; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 12px; +} + +.chat-message { + padding: 12px 16px; + border-radius: 18px; + max-width: 75%; + line-height: 1.5; +} + +.user-message { + background-color: #5E5DF0; + color: white; + align-self: flex-end; + border-bottom-right-radius: 4px; +} + +.bot-message { + background-color: #E5E5EA; + color: #1D1D1F; + align-self: flex-start; + border-bottom-left-radius: 4px; +} + +.chat-input-form { + display: flex; + padding: 16px; + border-top: 1px solid #E5E5EA; + background-color: #FFFFFF; +} + +.chat-input { + flex-grow: 1; + border: 1px solid #D1D1D6; + border-radius: 20px; + padding: 10px 16px; + font-size: 1rem; + outline: none; + transition: border-color 0.2s; +} + +.chat-input:focus { + border-color: #5E5DF0; +} + +.send-button { + background: #5E5DF0; + border: none; + color: white; + border-radius: 50%; + width: 44px; + height: 44px; + margin-left: 12px; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + transition: background-color 0.2s; +} + +.send-button:hover { + background: #4a4ac4; +} + +.send-button svg { + width: 24px; + height: 24px; +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..a1c5f44 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,32 @@ + +document.addEventListener('DOMContentLoaded', () => { + const chatBox = document.getElementById('chat-box'); + const chatForm = document.getElementById('chat-form'); + const chatInput = document.getElementById('chat-input'); + + chatForm.addEventListener('submit', (e) => { + e.preventDefault(); + const message = chatInput.value.trim(); + if (message) { + addMessage(message, 'user'); + chatInput.value = ''; + // Simulate bot reply + setTimeout(() => { + addMessage('This is a placeholder reply.', 'bot'); + }, 1000); + } + }); + + function addMessage(message, sender) { + const messageElement = document.createElement('div'); + messageElement.classList.add('chat-message', `${sender}-message`); + messageElement.textContent = message; + chatBox.appendChild(messageElement); + chatBox.scrollTop = chatBox.scrollHeight; + } + + // Initial bot message + setTimeout(() => { + addMessage("Hi, I'm PulseDock. How can I help you today?", 'bot'); + }, 500); +}); diff --git a/index.php b/index.php index 7205f3d..105f0c3 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,37 @@ - - + - - - New Style - - - - - - - - - - - - - - - - - - - + + + ALTRUISTICXAI + + + + + + + + + + -
-
-

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

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