File: /home/codo66ho/public_html/chat.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Emtiyz AI Chatbot</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f7f7f7;
padding: 2rem;
max-width: 600px;
margin: auto;
}
h1 {
text-align: center;
color: #0077b6;
}
.chat-box {
border: 1px solid #ccc;
background: white;
padding: 1rem;
border-radius: 8px;
height: 400px;
overflow-y: auto;
margin-bottom: 1rem;
}
.message {
margin: 0.5rem 0;
}
.message.user {
text-align: right;
color: #333;
}
.message.ai {
text-align: left;
color: #0077b6;
}
form {
display: flex;
}
input[type="text"] {
flex: 1;
padding: 0.5rem;
font-size: 1rem;
}
button {
padding: 0.5rem 1rem;
background: #0077b6;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Emtiyz AI</h1>
<div class="chat-box" id="chatBox"></div>
<form id="chatForm">
<input type="text" id="userInput" placeholder="Ask something..." required />
<button type="submit">Send</button>
</form>
<script>
const chatBox = document.getElementById('chatBox');
const chatForm = document.getElementById('chatForm');
const userInput = document.getElementById('userInput');
function appendMessage(sender, text) {
const message = document.createElement('div');
message.classList.add('message', sender);
message.textContent = text;
chatBox.appendChild(message);
chatBox.scrollTop = chatBox.scrollHeight;
}
chatForm.addEventListener('submit', async (e) => {
e.preventDefault();
const question = userInput.value.trim();
if (!question) return;
appendMessage('user', question);
userInput.value = '';
try {
const response = await fetch('https://emtiyz-ai.onrender.com/chat/', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ question })
});
const data = await response.json();
appendMessage('ai', data.response);
} catch (err) {
appendMessage('ai', '❌ Error: Could not connect to server.');
}
});
</script>
</body>
</html>