southfox/AAII
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[style] improve style

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

12
static/index.html
View file

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

15
static/style.css
View file

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