Creating GPT-esque HTML Formatting
We types this in like dis
then it gives us like dis
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chat Window</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f6f6f6;
margin: 0;
padding: 0;
}
.chat-container {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
margin: 20px auto;
max-width: 600px;
padding: 20px;
}
.message {
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
}
.user-message {
background-color: #00bfff;
color: #fff;
float: right;
}
.bot-message {
background-color: #f6f6f6;
color: #333;
float: left;
}
.clearfix {
clear: both;
}
</style>
</head>
<body>
<div class="chat-container">
<div class="message user-message">Hello, ChatGPT!</div>
<div class="message bot-message">Hello! How can I assist you today?</div>
<div class="message user-message">Can you help me frame an HTML window to exactly mimic the layout, spacing, and coloring of this chat window format?</div>
<div class="message bot-message">Sure thing! Here's some code to get you started...</div>
<div class="clearfix"></div>
</div>
</body>
</html>
But that's not quite what we want
# ENABLE DARK MODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chat Window</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #222;
margin: 0;
padding: 0;
}
.chat-container {
background-color: #333;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
margin: 20px auto;
max-width: 600px;
padding: 20px;
}
.message {
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
}
.user-message {
background-color: #00bfff;
color: #fff;
float: right;
}
.bot-message {
background-color: #444;
color: #fff;
float: left;
}
.clearfix {
clear: both;
}
</style>
</head>
<body>
<div class="chat-container">
<div class="message user-message">Hello, ChatGPT!</div>
<div class="message bot-message">Hello! How can I assist you today?</div>
<div class="message user-message">Can you help me frame an HTML window to exactly mimic the layout, spacing, and coloring of this chat window format?</div>
<div class="message bot-message">Sure thing! Here's some code to get you started...</div>
<div class="clearfix"></div>
</div>
</body>
</html>
That's better...
NOTE: I put a / in-front of the background-color: #222; line to comment it out, as to keep this specific page background white for the demonstration.