Update index.html

index.html

@@ -4,30 +4,51 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Advanced Chatbot</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="stylesheet" type="text/css" href="style.css">
 </head>
+
 <body>
-    <div class="container">
-        <!-- Left Sidebar (Blue Heading Area) -->
-        <div class="sidebar">
-            <h1>Chatbot</h1>
-            <div class="header-icons">
-                <i class="fas fa-sign-in-alt icon" id="loginBtn" title="Login"></i>
-                <i class="fas fa-sync-alt icon" id="startNewBtn" title="Start New"></i>
-            </div>
-        </div>
+    <div class="container-fluid h-100">
+        <div class="row justify-content-center h-100">
+            <div class="col-md-8 col-xl-6 chat">
+                <div class="card">
+                    <!-- Sidebar with Header -->
+                    <div class="card-header msg_head">
+                        <div class="d-flex bd-highlight">
+                            <div class="img_cont">
+                                <img src="https://i.ibb.co/fSNP7Rz/icons8-chatgpt-512.png" class="rounded-circle user_img">
+                                <span class="online_icon"></span>
+                            </div>
+                            <div class="user_info">
+                                <span>Chatbot</span>
+                                <p>Ask your questions!</p>
+                            </div>
+                            <div class="header-icons ml-auto">
+                                <i class="fas fa-sign-in-alt icon" id="loginBtn" title="Login"></i>
+                                <i class="fas fa-sync-alt icon" id="startNewBtn" title="Start New"></i>
+                            </div>
+                        </div>
+                    </div>
 
-        <!-- Right Side (Chat Area) -->
-        <div class="chat-section">
-            <div class="chat-history" id="chatHistory">
-                <!-- Chat history will be loaded here -->
-            </div>
-            <div class="input-container">
-                <textarea id="userInput" rows="1" placeholder="Type your message..."></textarea>
-                <button id="sendMessageBtn" onclick="sendMessage()">Send</button>
-                <i class="fas fa-microphone icon" id="voiceInputBtn" title="Voice Input"></i>
+                    <!-- Chat History Area -->
+                    <div class="card-body msg_card_body" id="chatHistory">
+                        <!-- Chat history will be dynamically loaded here -->
+                    </div>
+
+                    <!-- Message Input Area -->
+                    <div class="card-footer">
+                        <form id="messageArea" class="input-group">
+                            <textarea id="userInput" rows="1" class="form-control type_msg" placeholder="Type your message..."></textarea>
+                            <div class="input-group-append">
+                                <button id="sendMessageBtn" class="input-group-text send_btn"><i class="fas fa-location-arrow"></i></button>
+                            </div>
+                            <i class="fas fa-microphone icon" id="voiceInputBtn" title="Voice Input"></i>
+                        </form>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -35,4 +56,3 @@
     <script src="script.js"></script>
 </body>
 </html>
-