Merge branch 'IT20201364_Thathsarani_R.P.H.S.R'

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/icon.svg

+<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><defs><style>.b{fill:#fff;}</style></defs><path class="b" d="M137.37,65.92C132.15,25.24,88.6,.83,51.06,17.52,17.46,32.45,4.26,72.81,22.59,104.71c.73,1.27,.75,2.26,.18,3.55-3.39,7.63-6.71,15.29-10.04,22.95-1.03,2.38-.85,4.02,.55,5.39,1.41,1.38,3.11,1.54,5.41,.54,7.66-3.33,15.34-6.64,22.97-10.02,1.3-.57,2.28-.57,3.55,.17,9.55,5.53,19.88,8.25,29.02,8.29,27.4,0,51.85-15.75,60.94-43.27,2.84-8.59,3.34-17.46,2.2-26.39Zm-8.27,14.36c-3.29,27.11-26.24,46.88-52.72,46.91-10.74,.02-20.59-2.83-29.57-8.7-1.7-1.11-3.34-1.24-5.18-.43-5.02,2.22-10.06,4.38-15.1,6.56-.54,.23-1.09,.43-1.63,.64l-.3-.37c2.16-4.97,4.17-10.01,6.55-14.87,1.47-3.02,1.35-5.41-.53-8.29-4.05-6.18-6.28-13.06-7.36-20.44C18.13,46.34,48.71,15.34,85.03,21.37c28.03,4.65,47.49,30.63,44.07,58.91Z"/><path class="b" d="M93.21,36.64c-5.21-2.73-10.82-3.67-15.47-3.78-17.75-.3-29.49,10.48-30.7,27.04-.12,1.64,.31,2.12,1.95,2.08,4.57-.1,9.15-.07,13.73-.01,1.17,.01,1.43-.39,1.67-1.52,.6-2.83,1.09-5.81,2.37-8.36,2.69-5.36,10.52-7.37,15.56-4.08,1.52,.99,2.89,2.72,3.57,4.42,2.08,5.17,.66,10.42-3.52,14.11-2.05,1.82-4.27,3.45-6.35,5.23-4.19,3.61-7.16,7.96-7.83,13.58-.29,2.46-.4,4.94-.6,7.4-.1,1.25,.68,1.36,1.63,1.35,4.32-.06,8.64-.13,12.96-.14,1.11,0,1.5-.41,1.49-1.51-.01-1.4-.06-2.83,.25-4.18,.87-3.82,3.49-6.5,6.35-8.91,2.51-2.12,5.22-4.01,7.8-6.06,9.39-7.49,11.52-28.07-4.87-36.68Z"/><path class="b" d="M75.91,100.23c-4.83-.06-8.65,3.67-8.68,8.46-.03,4.65,3.78,8.49,8.46,8.55,4.67,.05,8.56-3.77,8.57-8.41,0-4.79-3.64-8.54-8.34-8.6Z"/></svg>
\ No newline at end of file

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/script.js

+function updateEmotionTable(emotionPercentages) {
+    var tableBody = document.querySelector("#emotion-table tbody");
+    tableBody.innerHTML = "";
+    for (var emotion in emotionPercentages) {
+        var row = tableBody.insertRow();
+        var cell1 = row.insertCell(0);
+        var cell2 = row.insertCell(1);
+        cell1.textContent = emotion;
+        cell2.textContent = emotionPercentages[emotion] + "%";
+    }
+}
+
+function updateStressLevel(stressLevel) {
+    var stressLevelElement = document.querySelector("#stress-level");
+    stressLevelElement.textContent = stressLevel;
+}
+
+function startCounselling() {
+    window.location.href = '/process_route';
+}
+
+function resetCounselling() {
+    var xhr = new XMLHttpRequest();
+    xhr.open("POST", "/reset", true);
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+            // Redirect to the login page after resetting
+            window.location.href = '/login';
+        }
+    };
+    xhr.send();
+}
+
+const eventSource = new EventSource('/stream');
+const conversationElement = document.getElementById("conversation");
+
+eventSource.onmessage = function (event) {
+    const newMessage = event.data.trim();  // Trim any leading/trailing whitespace
+    if (newMessage) {
+        // Append the new message to the conversation list
+        appendMessageToConversation(newMessage);
+    }
+};
+
+function toggleRecords() {
+    const recordsElement = document.querySelector(".previous-stress-level");
+    recordsElement.classList.toggle("expanded");
+}
+
+function appendMessageToConversation(message) {
+    const conversationList = document.querySelector("#conversation ul");
+    const messageElement = document.createElement("li");
+    messageElement.classList.add("message");
+
+    messageElement.textContent = message;
+    conversationList.insertBefore(messageElement, conversationList.firstChild);
+}
+
+function togglePreviousRecords() {
+    const previousRecords = document.getElementById("previous-records");
+    if (previousRecords.style.display === "block") {
+        previousRecords.style.display = "none";
+    } else {
+        previousRecords.style.display = "block";
+    }
+}
\ No newline at end of file

IT20201364/static/script2.js

+document.addEventListener("DOMContentLoaded", function () {
+  // Get a reference to the conversation <div> element
+  const conversationDiv = document.getElementById("conversation");
+
+  // Function to add a message to the conversation
+  function addMessageToConversation(message, sender) {
+    // Create a <p> element for the message
+    const messageElement = document.createElement("p");
+
+    // Set the text content based on the sender
+    if (sender === "User") {
+      messageElement.textContent = "User: " + message;
+    } else {
+      messageElement.textContent = "zenBot: " + message;
+    }
+
+    // Append the <p> element to the conversation <div>
+    conversationDiv.appendChild(messageElement);
+
+    // Scroll the conversation <div> to the bottom to show the latest message
+    conversationDiv.scrollTop = conversationDiv.scrollHeight;
+  }
+
+  // Display a welcome message when the page loads
+  addMessageToConversation("Welcome to the Chat !", "zenBot");
+});

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;
+}