Giao diện HTML cho Chat GPT: Nâng cao và đẹp mắt
Dưới đây là một mẫu giao diện đẹp nâng cao cho trang index.html của bạn:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Chat GPT</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.chatbox {
background-color: #f2f2f2;
border-radius: 10px;
padding: 10px;
margin-bottom: 10px;
}
.user-message {
background-color: #e2f7cb;
border-radius: 10px;
padding: 10px;
margin-bottom: 10px;
}
.bot-message {
background-color: #fff;
border-radius: 10px;
padding: 10px;
margin-bottom: 10px;
}
.input-container {
display: flex;
margin-top: 20px;
}
.input-container input {
flex-grow: 1;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
outline: none;
}
.input-container button {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
border: none;
margin-left: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class='container'>
<h1>Chat GPT</h1>
<div class='chatbox'>
<div class='bot-message'>
<p>Hello! How can I assist you today?</p>
</div>
<div class='user-message'>
<p>Hi, I have a question about your product.</p>
</div>
<div class='bot-message'>
<p>Sure, what would you like to know?</p>
</div>
</div>
<div class='input-container'>
<input type='text' id='user-input' placeholder='Type your message...'>
<button id='send-button'>Send</button>
</div>
</div>
<script>
const sendButton = document.getElementById('send-button');
const userInput = document.getElementById('user-input');
const chatbox = document.querySelector('.chatbox');
sendButton.addEventListener('click', () => {
const userMessage = userInput.value.trim();
if (userMessage !== '') {
const userMessageElement = document.createElement('div');
userMessageElement.classList.add('user-message');
userMessageElement.innerHTML = `<p>${userMessage}</p>`;
chatbox.appendChild(userMessageElement);
// Perform GPT chatbot logic here
userInput.value = ''; // Clear input field after sending message
}
});
</script>
</body>
</html>
Đây là một mẫu giao diện đơn giản với một hộp chat và một input để người dùng nhập tin nhắn. Bạn có thể tùy chỉnh các phần tử và CSS theo ý muốn của mình để tạo giao diện phù hợp với nhu cầu của bạn.
原文地址: https://www.cveoy.top/t/topic/o7iT 著作权归作者所有。请勿转载和采集!