Update chatbot.html

PenguinHubLearning · Sep 17, 2023 · e5c3f5d · e5c3f5d
1 parent dce63cb
commit e5c3f5d
Showing 1 changed file with 79 additions and 51 deletions.
diff --git a/chatbot.html b/chatbot.html
@@ -1,59 +1,88 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
 <head>
-  <title>Pengu</title>
-<style>
-body {
-background-color: #222;
-color: #fff;
-font-family: Arial, sans-serif;
-}
+    <meta charset="UTF-8">
+    <title>Pengu</title>
+    <style>
+        /* Reset some default styles */
+        body, html {
+            margin: 0;
+            padding: 0;
+            height: 100%;
+        }
 
-#chat-container {
-width: 500px;
-margin: 0 auto;
-padding: 20px;
-border: 1px solid #333;
-border-radius: 5px;
-background-color: #333;
-}
+        body {
+            background-color: #222;
+            color: #fff;
+            font-family: Arial, sans-serif;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
 
-#chat-box {
-height: 500px;
-overflow-y: scroll;
-border: 1px solid #333;
-padding: 25px;
-background-color: #444;
-}
+        #chat-container {
+            width: 100%;
+            height: 100%;
+            padding: 20px;
+            border-radius: 5px;
+            background-color: #333;
+            display: flex;
+            flex-direction: column;
+        }
 
-#user-input {
-width: 100%;
-padding: 10px;
-border: 1px solid #333;
-background-color: #444;
-color: #fff;
-}
+        #chat-box {
+            flex-grow: 1;
+            overflow-y: scroll;
+            border: 1px solid #333;
+            padding: 25px;
+            background-color: #444;
+            border-radius: 5px;
+        }
 
-.user {
-text-align: right;
-margin-bottom: 5px;
-}
+        #user-input {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #333;
+            background-color: #444;
+            color: #fff;
+            border-radius: 5px;
+        }
 
-.bot {
-text-align: left;
-margin-bottom: 5px;
-}
-</style>
+        .user {
+            text-align: right;
+            margin-bottom: 10px;
+            color: #3a86ff;
+        }
+
+        .bot {
+            text-align: left;
+            margin-bottom: 10px;
+            color: #ff6b6b;
+        }
+
+        /* Add some spacing between messages */
+        .user:last-child,
+        .bot:last-child {
+            margin-bottom: 0;
+        }
+
+        /* Style for the title */
+        h1 {
+            text-align: center;
+        }
+    </style>
 </head>
 <body>
-<div id="chat-container">
-<div id="chat-box">
-<p>Pengu : How can I help you?</p>
-</div>
-<input type="text" id="user-input" placeholder="Type your message...">
-</div>
-
-<script>
-const chatBox = document.getElementById("chat-box");
+    <h1></h1>
+    <div id="chat-container">
+        <div id="chat-box">
+            <p class="bot">Pengu : How can I help you?</p>
+        </div>
+        <input type="text" id="user-input" placeholder="Type your message...">
+    </div>
+
+    <script>
+       const chatBox = document.getElementById("chat-box");
 const userInput = document.getElementById("user-input");
 
 function appendMessage(message, sender) {
@@ -132,8 +161,7 @@
       setCookie("username", user, 365);
     }
   }
-}
-
-</script>
+}e
+    </script>
 </body>
 </html>