[style] improve style

This commit is contained in:
SouthFox 2024-08-13 17:13:14 +08:00
parent 6c5e4e4bff
commit a0170e9041
2 changed files with 14 additions and 13 deletions

View file

@ -10,13 +10,13 @@
</head>
<body>
<div class="container bg-white rounded-lg shadow-md">
<h1 class="text-3xl font-bold mb-4 text-center">AAII</h1>
<div class="chat" id="chatContainer">
<div class="container bg-white rounded-lg shadow-md flex flex-col">
<h1 class="flex-none text-3xl font-bold mb-4 text-center">AAII</h1>
<div class="chat break-all" id="chatContainer">
</div>
<div class="flex">
<textarea type="text" id="userInput" placeholder="Type your message here..." class="outline-none"></textarea>
<button class="send-button" id="sendButton" >Send</button>
<div class="flex-none flex">
<textarea type="text" id="userInput" placeholder="Type your message here..." class="outline-none flex-auto"></textarea>
<button class="send-button flex-none" id="sendButton" >Send</button>
</div>
<div class="typing-indicator" id="typingIndicator">
</div>

View file

@ -10,14 +10,16 @@ h1 {
margin-bottom: 0.5rem;
}
pre code {
display: block;
overflow-x: scroll;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: calc(100vh - 60px);
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f4f4;
margin: 0;
@ -26,20 +28,19 @@ body {
}
.container {
margin-top: 0;
width: 90%;
max-width: 500px;
margin: 10px auto 0;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
padding: 20px;
padding: 1rem;
transition: all 0.3s;
height: 100dvh;
}
.chat {
flex-grow: 1;
overflow-y: auto;
height: 400px;
margin-bottom: 20px;
border-bottom: 2px solid #e2e2e2;
}