GPT Chat Web: Index.html Template with Beautiful Design
This is a sample beautiful design for your index.html page:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>GPT Chat</title>
<link rel='stylesheet' href='style.css'> <!-- Đường dẫn đến file CSS -->
</head>
<body>
<div class='container'>
<header>
<h1>GPT Chat</h1>
</header>
<div class='chat-area'>
<div class='message'>
<div class='sender'>User</div>
<div class='content'>Hello!</div>
</div>
<div class='message'>
<div class='sender'>GPT</div>
<div class='content'>Hi there! How can I assist you today?</div>
</div>
<!-- Thêm các tin nhắn khác vào đây -->
</div>
<div class='input-area'>
<input type='text' placeholder='Type your message here...'>
<button>Send</button>
</div>
</div>
</body>
</html>
You can create a separate CSS file to customize the look and feel according to your preferences. Here is a sample CSS to get you started (save it as style.css):
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
margin-bottom: 20px;
}
.chat-area {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
height: 300px;
overflow-y: scroll;
}
.message {
margin-bottom: 10px;
}
.sender {
font-weight: bold;
}
.input-area {
display: flex;
}
input[type='text'] {
flex: 1;
padding: 5px;
border-radius: 5px 0 0 5px;
border: 1px solid #ccc;
}
button {
padding: 5px 10px;
border-radius: 0 5px 5px 0;
border: 1px solid #ccc;
background-color: #f2f2f2;
}
Note: This code is just a basic template. You can customize the appearance as you like by modifying the CSS.
原文地址: https://www.cveoy.top/t/topic/o7iO 著作权归作者所有。请勿转载和采集!