Update static/index.html
Browse files- static/index.html +53 -7
static/index.html
CHANGED
|
@@ -274,15 +274,61 @@ span.material-symbols-rounded {
|
|
| 274 |
height: calc(100vh - 5rem);
|
| 275 |
overflow-y: auto;
|
| 276 |
}
|
| 277 |
-
</style>
|
| 278 |
-
</head>
|
| 279 |
-
<body>
|
| 280 |
-
<div class="message-box">
|
| 281 |
|
| 282 |
-
|
| 283 |
-
|
| 284 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 285 |
<span>Hello there! <br> How can I help you today.</span>
|
|
|
|
| 286 |
</div>
|
| 287 |
<!-- Chats container -->
|
| 288 |
<div class="chat-container"></div>
|
|
|
|
| 274 |
height: calc(100vh - 5rem);
|
| 275 |
overflow-y: auto;
|
| 276 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
| 277 |
|
| 278 |
+
.messagebar {
|
| 279 |
+
position: fixed;
|
| 280 |
+
bottom: 0;
|
| 281 |
+
height: 5rem;
|
| 282 |
+
width: 100%;
|
| 283 |
+
display: flex;
|
| 284 |
+
align-items: center;
|
| 285 |
+
justify-content: center;
|
| 286 |
+
border-top: 1px solid #494b59;
|
| 287 |
+
background-color: #33343f;
|
| 288 |
+
}
|
| 289 |
+
.messagebar .bar-wrapper {
|
| 290 |
+
background-color: #494b59;
|
| 291 |
+
border-radius: 5px;
|
| 292 |
+
width: 60vw;
|
| 293 |
+
padding: 10px;
|
| 294 |
+
display: flex;
|
| 295 |
+
align-items: center;
|
| 296 |
+
justify-content: space-between;
|
| 297 |
+
}
|
| 298 |
+
.bar-wrapper input {
|
| 299 |
+
width: 100%;
|
| 300 |
+
padding: 5px;
|
| 301 |
+
border: none;
|
| 302 |
+
outline: none;
|
| 303 |
+
font-size: 14px;
|
| 304 |
+
background: none;
|
| 305 |
+
color: #ccc;
|
| 306 |
+
}
|
| 307 |
+
.bar-wrapper input::placeholder {
|
| 308 |
+
color: #ccc;
|
| 309 |
+
}
|
| 310 |
+
.messagebar button {
|
| 311 |
+
display: flex;
|
| 312 |
+
align-items: center;
|
| 313 |
+
justify-content: center;
|
| 314 |
+
background: none;
|
| 315 |
+
border: none;
|
| 316 |
+
color: #fff;
|
| 317 |
+
cursor: pointer;
|
| 318 |
+
}
|
| 319 |
+
.message-box {
|
| 320 |
+
height: calc(100vh - 5rem);
|
| 321 |
+
overflow-y: auto;
|
| 322 |
+
}
|
| 323 |
+
</style>
|
| 324 |
+
</head>
|
| 325 |
+
<body>
|
| 326 |
+
<div class="chatbox-wrapper">
|
| 327 |
+
<div class="message-box">
|
| 328 |
+
<div class="chat response">
|
| 329 |
+
<img src="img/chatbot.jpg">
|
| 330 |
<span>Hello there! <br> How can I help you today.</span>
|
| 331 |
+
</div>
|
| 332 |
</div>
|
| 333 |
<!-- Chats container -->
|
| 334 |
<div class="chat-container"></div>
|