Upload 4 files

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+static/juitlogo.png filter=lfs diff=lfs merge=lfs -text
+static/userlogo.png filter=lfs diff=lfs merge=lfs -text

static/style.css

@@ -0,0 +1,463 @@
+body, html {
+	height: 100%;
+	margin: 0;
+	background: var(--bg-color);
+	background: linear-gradient(to right, var(--gradient-start), var(--gradient-mid), var(--gradient-end));
+	color: var(--text-color);
+}
+:root {
+	--bg-color: rgb(44, 47, 59);
+	--gradient-start: rgb(38, 51, 61);
+	--gradient-mid: rgb(50, 55, 65);
+	--gradient-end: rgb(33, 33, 78);
+	--card-bg: rgba(0, 0, 0, 0.4);
+	--text-color: white;
+	--msg-bg: rgb(82, 172, 255);
+	--msg-send-bg: #58cc71;
+	--placeholder-color: #ccc;
+	--input-bg: rgba(0,0,0,0.3);
+	--border-color: white;
+}
+.light-mode {
+    --bg-color: #e6e6e6; /* Cool light grey background */
+    --gradient-start: #dcdcdc; /* Softer gradient transition */
+    --gradient-mid: #e6e6e6;
+    --gradient-end: #cfcfcf;
+    --card-bg: rgba(255, 255, 255, 0.95); /* Slightly more opaque for clarity */
+    --text-color: #222; /* Darker text for better contrast */
+    --msg-bg: #3498db; /* Incoming message bubble color */
+    --msg-send-bg: #2ecc71; /* Sent message bubble color */
+    --placeholder-color: #666; /* Darker placeholder text for readability */
+    --input-bg: rgba(255, 255, 255, 0.85);
+    --border-color: #444; /* Slightly softer black for a modern look */
+    
+    background: linear-gradient(
+        to bottom, 
+        var(--gradient-start), 
+        var(--gradient-mid), 
+        var(--gradient-end)
+    ) !important;
+    color: var(--text-color) !important;
+}
+/* Light Mode - Ensure theme toggle button is dark */
+/* Theme Toggle Button */
+#themeToggle {
+    position: absolute;
+    right: 15px;
+    top: 10px;
+    font-size: 14px;
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: all 0.3s ease-in-out;
+}
+.dark-mode {
+    --bg-color: #1a1a1a; /* Slightly darker for better contrast */
+    --gradient-start: #2c2f36;
+    --gradient-mid: #343a40;
+    --gradient-end: #23272a;
+    --card-bg: rgba(0, 0, 0, 0.6); /* More opacity to make text more readable */
+    --text-color: #f8f8f8; /* Slightly off-white for less strain */
+    --msg-bg: #3498db;
+    --msg-send-bg: #2ecc71;
+    --placeholder-color: #bbb;
+    --input-bg: rgba(0,0,0,0.5);
+    --border-color: #777;
+    
+    background: linear-gradient(to right, var(--gradient-start), var(--gradient-mid), var(--gradient-end)) !important;
+    color: var(--text-color) !important;
+}
+.dark-mode .msg_container {
+    background-color: var(--msg-bg) !important;
+    color: #ffffff !important; /* Ensure text is visible */
+}
+
+.dark-mode .msg_container_send {
+    background-color: var(--msg-send-bg) !important;
+    color: #ffffff !important;
+}
+.dark-mode .type_msg::placeholder {
+    color: rgba(255, 255, 255, 0.7) !important; /* Make it more readable */
+}
+
+/* Dark Mode - Light button */
+.dark-mode #themeToggle {
+    background-color: #ddd !important;
+    color: black !important;
+    border: 1px solid #333 !important;
+}
+
+/* Light Mode - Dark button */
+.light-mode #themeToggle {
+    background-color: #333 !important;
+    color: white !important;
+    border: 1px solid #000 !important;
+}
+
+
+
+.light-mode .user_info span,
+.light-mode .user_info p {
+    color: var(--text-color) !important;
+}
+
+.light-mode .type_msg {
+    background-color: var(--input-bg) !important;
+    color: var(--text-color) !important;
+    border: 1px solid var(--border-color) !important;
+}
+
+/* Placeholder text */
+.light-mode .type_msg::placeholder {
+    color: var(--placeholder-color) !important;
+}
+
+/* Chat container */
+.light-mode .card {
+    background-color: var(--card-bg) !important;
+    border: 1px solid var(--border-color);
+}
+
+.light-mode .msg_container {
+    background-color: var(--msg-bg) !important;
+    color: #fff !important; /* White text for better contrast */
+}
+
+.light-mode .msg_container_send {
+    background-color: var(--msg-send-bg) !important;
+    color: #fff !important;
+}
+
+::placeholder {
+	color: var(--placeholder-color);
+	opacity: 1;
+}
+
+/* Chat Container */
+.chat {
+    height: 85vh; /* Adjust as needed */
+    max-height: 700px; /* Ensures it doesn't get too large */
+}
+.card {
+	height: calc(100% - 40px);
+	max-height: calc(100% - 40px);
+	overflow: hidden;
+	position: relative;
+	background-color: var(--card-bg) !important;
+	border-radius: 15px !important;
+}
+
+/* Message Box */
+.msg_card_body {
+
+    max-height: 70vh; /* Adjust based on screen size */
+    overflow-y: auto; /* Enable scrolling */
+}
+
+
+/* Predictive Text */
+.predictive-text {
+	position: absolute;
+	background-color: var(--input-bg);
+	border: 1px solid var(--border-color);
+	border-radius: 10px;
+	padding: 5px;
+	z-index: 999;
+	cursor: pointer;
+	max-height: 150px;
+	overflow-y: auto;
+	width: calc(100% - 22px);
+	bottom: 65px;
+	left: 10px;
+	color: var(--text-color);
+}
+
+.predictive-text p {
+	margin: 5px 0;
+	padding: 5px;
+	cursor: pointer;
+	transition: background-color 0.3s;
+	border-radius: 5px;
+}
+
+.predictive-text p:hover {
+	background-color: rgba(255, 255, 255, 0.2);
+}
+
+.predictive-text p:not(:last-child) {
+	border-bottom: 1px solid #555;
+}
+
+/* Input Fields */
+input[type="text"] {
+	white-space: normal;
+	overflow-wrap: break-word;
+	word-wrap: break-word;
+	width: 100%;
+	padding: 10px;
+	height: auto;
+	background-color: var(--input-bg) !important;
+	color: var(--text-color) !important;
+	border: 0 !important;
+}
+
+::placeholder {
+	white-space: normal;
+	overflow-wrap: break-word;
+	word-wrap: break-word;
+	color: var(--placeholder-color);
+}
+
+
+
+	a {
+	  text-decoration: underline !important;
+	  color: blue; /* Keeps the default link color */
+	}
+  
+	.attach_btn, .send_btn, .search_btn {
+		border-radius: 15px !important;
+		background-color: var(--input-bg) !important;
+		border: 0 !important;
+		color: var(--text-color) !important;
+		cursor: pointer;
+	}
+	
+	/* User Info */
+	.user_info span {
+		font-size: 20px;
+		color: var(--text-color);
+	}
+	
+	.user_info p {
+		font-size: 10px;
+		color: rgba(255, 255, 255, 0.6);
+	}
+
+
+	
+.chat{
+	margin-top: auto;
+	margin-bottom: auto;
+}
+.card{
+	min-height: 100%;
+    max-height: 90vh;
+}
+.contacts_body{
+	padding:  0.75rem 0 !important;
+	overflow-y: auto;
+	white-space: nowrap;
+}
+.msg_card_body{
+	overflow-y: auto;
+}
+.card-header{
+	border-radius: 15px 15px 0 0 !important;
+	border-bottom: 0 !important;
+}
+.card-footer{
+border-radius: 0 0 15px 15px !important;
+	border-top: 0 !important;
+}
+.container{
+	display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+.msg_card_body {
+    flex-grow: 1;
+}
+.search{
+	border-radius: 15px 0 0 15px !important;
+	background-color: rgba(0,0,0,0.3) !important;
+	border:0 !important;
+	color:white !important;
+}
+.search:focus{
+	 box-shadow:none !important;
+   outline:0px !important;
+}
+.type_msg{
+	background-color: rgba(0,0,0,0.3) !important;
+	border:0 !important;
+	color:white !important;
+	height: 60px !important;
+	overflow-y: auto;
+}
+	.type_msg:focus{
+	 box-shadow:none !important;
+   outline:0px !important;
+}
+.attach_btn{
+	border-radius: 15px 0 0 15px !important;
+	background-color: rgba(0,0,0,0.3) !important;
+	border:0 !important;
+	color: white !important;
+	cursor: pointer;
+}
+.send_btn{
+	border-radius: 0 15px 15px 0 !important;
+	background-color: rgba(0,0,0,0.3) !important;
+	border:0 !important;
+	color: white !important;
+	cursor: pointer;
+}
+.search_btn{
+	border-radius: 0 15px 15px 0 !important;
+	background-color: rgba(0,0,0,0.3) !important;
+	border:0 !important;
+	color: white !important;
+	cursor: pointer;
+}
+.contacts{
+	list-style: none;
+	padding: 0;
+}
+.contacts li{
+	width: 100% !important;
+	padding: 5px 10px;
+	margin-bottom: 15px !important;
+}
+.active{
+	background-color: rgba(0,0,0,0.3);
+}
+.user_img{
+	height: 70px;
+	width: 70px;
+	border:1.5px solid #f5f6fa;
+
+}
+.user_img_msg{
+	height: 40px;
+	width: 40px;
+	border:1.5px solid #f5f6fa;
+
+}
+.img_cont{
+	position: relative;
+	height: 70px;
+	width: 70px;
+}
+.img_cont_msg{
+	height: 40px;
+	width: 40px;
+}
+.online_icon{
+	position: absolute;
+	height: 15px;
+	width:15px;
+	background-color: #4cd137;
+	border-radius: 50%;
+	bottom: 0.2em;
+	right: 0.4em;
+	border:1.5px solid white;
+}
+.offline{
+	background-color: #c23616 !important;
+}
+.user_info{
+	margin-top: auto;
+	margin-bottom: auto;
+	margin-left: 15px;
+}
+.user_info span{
+	font-size: 20px;
+	color: white;
+}
+.user_info p{
+	font-size: 10px;
+	color: rgba(255,255,255,0.6);
+}
+.video_cam{
+	margin-left: 50px;
+	margin-top: 5px;
+}
+.video_cam span{
+	color: white;
+	font-size: 20px;
+	cursor: pointer;
+	margin-right: 20px;
+}.msg_cotainer {
+	background-color: var(--msg-bg);
+	padding: 10px;
+	border-radius: 25px;
+}
+
+.msg_cotainer_send {
+	background-color: var(--msg-send-bg);
+	padding: 10px;
+	border-radius: 25px;
+}
+.msg_time{
+	position: absolute;
+	left: 0;
+	bottom: -15px;
+	color: rgba(255,255,255,0.5);
+	font-size: 10px;
+}
+.msg_time_send{
+	position: absolute;
+	right:0;
+	bottom: -15px;
+	color: rgba(255,255,255,0.5);
+	font-size: 10px;
+}
+.msg_head{
+	position: relative;
+}
+#action_menu_btn{
+	position: absolute;
+	right: 10px;
+	top: 10px;
+	color: white;
+	cursor: pointer;
+	font-size: 20px;
+}.action_menu {
+	z-index: 1;
+	position: absolute;
+	padding: 15px 0;
+	background-color: var(--input-bg);
+	color: var(--text-color);
+	border-radius: 15px;
+	top: 30px;
+	right: 15px;
+	display: none;
+}
+
+.action_menu ul li {
+	width: 100%;
+	padding: 10px 15px;
+	margin-bottom: 5px;
+	cursor: pointer;
+}
+
+.action_menu ul li:hover {
+	background-color: rgba(0,0,0,0.2);
+}
+@media (max-width: 768px) {
+    .chat {
+        height: 75vh; /* Smaller on mobile */
+    }
+    .msg_card_body {
+        max-height: 60vh;
+    }
+}
+	
+
+	.predefined-text a {
+		color: #0a66c2; /* LinkedIn blue */
+		text-decoration: none;
+		font-weight: bold;
+		margin-right: 10px;
+	}
+	
+	.predefined-text a i {
+		margin-right: 5px;
+	}
+	
+	.predefined-text a:hover {
+		text-decoration: underline;
+	}
+	
+}