diff --git a/assets/css/chatbot.css b/assets/css/chatbot.css
new file mode 100644
index 0000000..6ca4f33
--- /dev/null
+++ b/assets/css/chatbot.css
@@ -0,0 +1,130 @@
+/* assets/css/chatbot.css */
+#chat-widget-container {
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+ z-index: 1000;
+}
+
+#chat-icon {
+ width: 60px;
+ height: 60px;
+ background-color: #007bff;
+ border-radius: 50%;
+ color: white;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+ transition: background-color 0.3s;
+}
+
+#chat-icon:hover {
+ background-color: #0056b3;
+}
+
+#chat-icon svg {
+ width: 30px;
+ height: 30px;
+}
+
+#chat-window {
+ display: none;
+ position: fixed;
+ bottom: 90px;
+ right: 20px;
+ width: 350px;
+ max-width: 90vw;
+ height: 500px;
+ max-height: 70vh;
+ background-color: white;
+ border-radius: 10px;
+ box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+ display: none;
+ flex-direction: column;
+ overflow: hidden;
+}
+
+#chat-window.open {
+ display: flex;
+}
+
+#chat-header {
+ background-color: #007bff;
+ color: white;
+ padding: 15px;
+ font-weight: bold;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+#close-chat {
+ cursor: pointer;
+ background: none;
+ border: none;
+ color: white;
+ font-size: 20px;
+}
+
+#chat-messages {
+ flex-grow: 1;
+ padding: 15px;
+ overflow-y: auto;
+ background-color: #f9f9f9;
+ display: flex;
+ flex-direction: column;
+}
+
+#chat-input-container {
+ padding: 15px;
+ border-top: 1px solid #eee;
+ display: flex;
+}
+
+#chat-input {
+ flex-grow: 1;
+ border: 1px solid #ccc;
+ border-radius: 20px;
+ padding: 10px 15px;
+ font-size: 14px;
+ margin-right: 10px;
+}
+
+#chat-send {
+ background-color: #007bff;
+ color: white;
+ border: none;
+ border-radius: 50%;
+ width: 40px;
+ height: 40px;
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+#chat-send:hover {
+ background-color: #0056b3;
+}
+
+.chat-message {
+ padding: 10px 15px;
+ border-radius: 18px;
+ margin-bottom: 10px;
+ max-width: 80%;
+ word-wrap: break-word;
+}
+
+.chat-message.user {
+ background-color: #007bff;
+ color: white;
+ align-self: flex-end;
+}
+
+.chat-message.bot {
+ background-color: #e9e9eb;
+ color: #333;
+ align-self: flex-start;
+}
diff --git a/assets/js/chatbot.js b/assets/js/chatbot.js
new file mode 100644
index 0000000..ef59498
--- /dev/null
+++ b/assets/js/chatbot.js
@@ -0,0 +1,50 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const chatIcon = document.getElementById('chat-icon');
+ const chatWindow = document.getElementById('chat-window');
+ const closeChat = document.getElementById('close-chat');
+ const chatInput = document.getElementById('chat-input');
+ const chatSend = document.getElementById('chat-send');
+ const chatMessages = document.getElementById('chat-messages');
+
+ chatIcon.addEventListener('click', () => {
+ chatWindow.classList.toggle('open');
+ });
+
+ closeChat.addEventListener('click', () => {
+ chatWindow.classList.remove('open');
+ });
+
+ const addMessage = (message, sender) => {
+ const messageElement = document.createElement('div');
+ messageElement.classList.add('chat-message', sender);
+ messageElement.textContent = message;
+ chatMessages.appendChild(messageElement);
+ chatMessages.scrollTop = chatMessages.scrollHeight;
+ };
+
+ const handleSendMessage = () => {
+ const message = chatInput.value.trim();
+ if (message) {
+ addMessage(message, 'user');
+ chatInput.value = '';
+
+ // Placeholder bot response
+ setTimeout(() => {
+ addMessage("Thanks for your message! I'm just a prototype, but I'll be able to help soon.", 'bot');
+ }, 1000);
+ }
+ };
+
+ chatSend.addEventListener('click', handleSendMessage);
+
+ chatInput.addEventListener('keypress', (e) => {
+ if (e.key === 'Enter') {
+ handleSendMessage();
+ }
+ });
+
+ // Initial bot message
+ setTimeout(() => {
+ addMessage("Hello! How can I help you today?", 'bot');
+ }, 1500);
+});
diff --git a/index.php b/index.php
index 3c981d1..53f6a95 100644
--- a/index.php
+++ b/index.php
@@ -17,6 +17,7 @@
+