[style] improve style
This commit is contained in:
parent
6c5e4e4bff
commit
a0170e9041
2 changed files with 14 additions and 13 deletions
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue