Create css files.

IT20201364/static/chat.css

+.navbar {
+
+    background-color: #0b0b45;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+#container-1 {
+
+    position: absolute;
+    right: 55%;
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
+    overflow-y: auto;
+    max-height: 500px;
+    top: 15%;
+
+
+}
+
+/* #container-2 {
+
+    max-width: 600px;
+    position: absolute;
+    left: 55%;
+    top: 20%;
+
+} */
+
+/* Conversation */
+#conversation {
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
+    max-width: 600px;
+    overflow-y: auto;
+    max-height: 470px; /* Limit conversation box height for scrolling */
+    position: absolute;
+    left: 55%;
+    top: 15%;
+    height: 470px;
+    background-image: url(../static/chat-bg2.jpg);
+
+
+}
+
+/* Customize the scrollbar track */
+::-webkit-scrollbar {
+    width: 12px;
+  }
+  
+  /* Customize the scrollbar thumb */
+  ::-webkit-scrollbar-thumb {
+    background: gainsboro;
+    border-radius: 6px;
+  }
+  
+  /* Customize the scrollbar track */
+  ::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 6px;
+  }
+  
+  /* Optional: Add some hover effects */
+  ::-webkit-scrollbar-thumb:hover {
+    background: gray;
+  }
+
+
+  #cont {
+    position: absolute;
+    right: 45%;
+    top: 0%;
+  }
+  
+
+

IT20201364/static/login.css

+body {
+
+    font-family: 'Inter', sans-serif;
+}
+
+.navbar {
+
+    background-color: #0b0b45;
+}
+
+.container {
+    position: absolute;
+    top: 25%;
+    bottom: 25%;
+    left: 10%;
+    right: 75%;
+}
+
+#cover {
+
+    background-color: white;
+    width: 35%;
+    height: 91%;
+    top: 2.6%;
+    position: absolute;
+    left: 50%;
+    background-image: url(../static/cover.svg);
+   
+}
\ No newline at end of file

IT20201364/static/style.css

+/* Reset some default styles */
+body, h1, h2, p, ul, li, table, th, td {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+/* Basic page styles */
+body {
+    /* font-family: Arial, sans-serif; */
+    background-color: #f2f2f2;
+    font-family: 'Inter', sans-serif;
+}
+
+header {
+    text-align: center;
+    background-color: #333;
+    color: white;
+    padding: 10px;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+}
+
+/* Buttons */
+.start-button, .btn-danger, .toggle-button {
+    background-color: #007BFF;
+    border: none;
+    border-radius: 50px;
+    padding: 15px 30px;
+    color: #ffffff;
+    font-size: 18px;
+    cursor: pointer;
+    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
+    transition: background-color 0.3s, box-shadow 0.3s;
+}
+
+.start-button:hover, .btn-danger:hover, .toggle-button:hover {
+    background-color: #0056b3;
+    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
+}
+
+/* Tables */
+.table-wrapper {
+    background-color: white;
+    border-radius: 10px;
+    padding: 20px;
+    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
+    margin-top: 20px;
+    overflow-x: auto; /* Enable horizontal scrolling if necessary */
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+th, td {
+    padding: 12px;
+    text-align: left;
+    border: 1px solid #ddd;
+}
+
+th {
+    background-color: #f2f2f2;
+}
+
+/* Conversation */
+.conversation {
+    background-color: white;
+    border-radius: 10px;
+    padding: 20px;
+    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
+    margin-top: 20px;
+    max-width: 600px;
+    overflow-y: auto;
+    height: 300px; /* Limit conversation box height for scrolling */
+}
+
+/* Previous Records */
+.previous-stress-level {
+    background-color: white;
+    border-radius: 10px;
+    padding: 20px;
+    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
+    margin-top: 20px;
+    max-width: 600px;
+    overflow-x: auto; /* Enable horizontal scrolling if necessary */
+    display: none; /* Initially hidden */
+    max-width: 80%;
+
+}
+
+.previous-stress-level table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+.previous-stress-level th, .previous-stress-level td {
+    padding: 8px;
+    text-align: left;
+    border: 1px solid #ddd;
+}
+
+.previous-stress-level th {
+    background-color: #f2f2f2;
+}
+
+/* Add a toggle button style for the expandable section */
+.toggle-button {
+    background-color: palevioletred;
+    color: #ffffff;
+    margin-bottom: 10px;
+}
+
+/* Style for message list and individual messages */
+#message-list {
+    padding: 0;
+    list-style: none;
+}
+
+.message {
+    margin-bottom: 10px;
+    padding: 10px;
+    border-radius: 10px;
+    background-color: #d1d1d1;
+    max-width: 80%;
+}
+
+/* Style for AI and User messages */
+.message.AI {
+    background-color: #007BFF;
+    color: #ffffff;
+}
+
+.message.User {
+    background-color: #33cc33;
+    color: #ffffff;
+}
+
+/* Style for message timestamp (if applicable) */
+.message .timestamp {
+    font-size: 12px;
+    color: #777;
+}