Better WEBUI #2687
Labels
Comments
|
I asked a AI. It creates me that. |
|
Really? |
|
@Screenmax1234 that are the response from gpt-4o: Below is an example of the HTML and CSS code which creates a similar UI, resembling the chat interface shown in the image. You can copy this code into one HTML file. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat UI</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #1a1a1a;
color: #fff;
margin: 0;
padding: 0;
display: flex;
height: 100vh;
}
.sidebar {
width: 25%;
background-color: #2c2c2c;
padding: 20px;
display: flex;
flex-direction: column;
border-right: 1px solid #444;
}
.sidebar h3 {
color: #a8a8a8;
font-size: 16px;
}
.sidebar ul {
list-style-type: none;
padding: 0;
margin: 10px 0 0 0;
}
.sidebar ul li {
padding: 10px;
cursor: pointer;
border-radius: 5px;
color: #fff;
}
.sidebar ul li.active, .sidebar ul li:hover {
background-color: #464646;
}
.chat-container {
flex: 1;
display: flex;
flex-direction: column;
background-color: #1a1a1a;
}
.chat-header {
padding: 15px;
background-color: #252525;
color: #fff;
border-bottom: 1px solid #444;
}
.chat-content {
flex: 1;
padding: 15px;
overflow-y: scroll;
display: flex;
flex-direction: column;
}
.message {
margin: 10px 0;
}
.message.user {
text-align: right;
}
.message.assistant {
text-align: left;
}
.message .text {
display: inline-block;
padding: 10px 15px;
border-radius: 10px;
max-width: 60%;
}
.message.user .text {
background: #4a90e2;
color: #fff;
}
.message.assistant .text {
background: #333;
color: #fff;
}
.chat-footer {
display: flex;
padding: 10px 15px;
background-color: #252525;
border-top: 1px solid #444;
}
.chat-footer input {
flex: 1;
padding: 10px;
border-radius: 5px;
border: none;
margin-right: 10px;
}
.chat-footer button {
padding: 10px 15px;
border: none;
background: #4a90e2;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="sidebar">
<h3>Chats</h3>
<ul>
<li class="active">Pinned</li>
<li>All</li>
</ul>
<ul>
<li>How to create glass effect</li>
<li>Explore NFT industry</li>
<li>AI help in the design process</li>
<li>What is a Web3 platform</li>
</ul>
</div>
<div class="chat-container">
<div class="chat-header">NFT</div>
<div class="chat-content">
<div class="message user">
<div class="text">Ok, show me some NFT examples</div>
</div>
<div class="message assistant">
<div class="text">Sure, here is an example of NFTs:</div>
</div>
<div class="message assistant">
<div class="text"><img src="placeholder.jpg" alt="NFT Example" style="width: 100%; border-radius: 8px; background: #555;"></div>
</div>
<div class="message user">
<div class="text">Test message 1 to demonstrate scroll behavior under the header</div>
</div>
<div class="message assistant">
<div class="text">Test message 2 to demonstrate scroll behavior under the header</div>
</div>
</div>
<div class="chat-footer">
<input type="text" placeholder="Type a message">
<button>Send</button>
</div>
</div>
</body>
</html>Explanation:
This file is responsive and adjusts for smaller screen sizes due to flexible container layout design ( |
|
Bumping this issue because it has been open for 7 days with no activity. Closing automatically in 7 days unless it becomes active again. |
|
Closing due to inactivity. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Maybe copy chatgpt website design?
The text was updated successfully, but these errors were encountered: