|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" >
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" />
|
|
|
|
|
<title>Document</title>
|
|
|
|
|
<style>
|
|
|
|
|
.Messages{
|
|
|
|
|
|
|
|
|
|
.header {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
border-bottom: 1px solid whitesmoke;
|
|
|
|
|
position:fixed;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header__left {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header__left span {
|
|
|
|
|
padding: 10px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header__middle {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex: 0.7;
|
|
|
|
|
align-items: center;
|
|
|
|
|
background-color: whitesmoke;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.material-icons {
|
|
|
|
|
color: gray;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header__middle input {
|
|
|
|
|
border: none;
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
outline: none;
|
|
|
|
|
font-size: medium;
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header__right {
|
|
|
|
|
display: flex;
|
|
|
|
|
padding-right: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header__right span {
|
|
|
|
|
padding: 10px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.sidebarOption {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border-top-right-radius: 20px;
|
|
|
|
|
border-bottom-right-radius: 20px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
color: #818181;
|
|
|
|
|
margin-top:100px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sidebarOption .material-icons {
|
|
|
|
|
padding: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sidebarOption h3 {
|
|
|
|
|
flex: 1;
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color:#000000;
|
|
|
|
|
}
|
|
|
|
|
.sidebarOption:hover,
|
|
|
|
|
.sidebarOption:hover h3{
|
|
|
|
|
width:100px;
|
|
|
|
|
}
|
|
|
|
|
<!--.sidebarOption:hover,-->
|
|
|
|
|
<!--.sidebarOption:hover h3,-->
|
|
|
|
|
.sidebarOption:hover .material-icons,
|
|
|
|
|
<!--.sidebarOption__active,-->
|
|
|
|
|
.sidebarOption__active h3,
|
|
|
|
|
.sidebarOption__active .material-icons {
|
|
|
|
|
background-color: #fcecec;
|
|
|
|
|
color: #c04b37;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.material-icons {
|
|
|
|
|
color: gray;
|
|
|
|
|
border-radius:50%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header__middle input {
|
|
|
|
|
border: none;
|
|
|
|
|
width: 10%;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
outline: none;
|
|
|
|
|
font-size: medium;
|
|
|
|
|
border-radius:50%;
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
.compose {
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
text-transform: capitalize;
|
|
|
|
|
color: gray;
|
|
|
|
|
padding: 8px;
|
|
|
|
|
border-radius: 30px;
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
outline: none;
|
|
|
|
|
border: none;
|
|
|
|
|
transition: background-color 0.3s, color 0.3s;
|
|
|
|
|
box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.75);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.compose span {
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
}
|
|
|
|
|
.compose.active {
|
|
|
|
|
background-color: #43A6C6;
|
|
|
|
|
color: black; /* Highlighted text color */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.compose:hover {
|
|
|
|
|
opacity: 0.9; /* Optional hover effect */
|
|
|
|
|
}
|
|
|
|
|
.emailRow__options {
|
|
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
.emailRow__options .material-icons,
|
|
|
|
|
input {
|
|
|
|
|
margin: 5px;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
.emailRow {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center; /* Ensure proper spacing between elements */
|
|
|
|
|
height: 70px; /* Increased height for better visibility */
|
|
|
|
|
margin-left: -20px;
|
|
|
|
|
/* Add padding inside the row for spacing */
|
|
|
|
|
border: 2px solid whitesmoke;
|
|
|
|
|
background-color: white;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
margin-top: 20px; /* Adjusted margin for spacing */
|
|
|
|
|
margin-bottom: 10px; /* Spaced out between rows */
|
|
|
|
|
border-radius: 5px; /* Slight rounding for a modern look */
|
|
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add subtle shadow for better contrast */
|
|
|
|
|
width: calc(100% - 40px); /* Make room for consistent padding */
|
|
|
|
|
transition: box-shadow 0.3s, transform 0.3s; /* Smooth hover transition */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Hover effect for the email row */
|
|
|
|
|
.emailRow:hover {
|
|
|
|
|
border: 2px solid lightgray;
|
|
|
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
|
|
|
|
|
transform: translateY(-2px); /* Slight lift effect on hover */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Style for the button inside the row */
|
|
|
|
|
.emailRow__button {
|
|
|
|
|
border: 1px solid lightgray;
|
|
|
|
|
box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.75);
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
background-color: #f9f9f9;
|
|
|
|
|
transition: background-color 0.3s, box-shadow 0.3s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Hover effect for the button */
|
|
|
|
|
.emailRow__button:hover {
|
|
|
|
|
background-color: #e6f7ff; /* Light blue for hover */
|
|
|
|
|
box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.3); /* Stronger shadow */
|
|
|
|
|
border-color: #0095f6;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Additional child elements remain unaffected */
|
|
|
|
|
.emailRow__message {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex: 0.8;
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.emailRow__message h4 {
|
|
|
|
|
width: 400px;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
padding-left: 5px;
|
|
|
|
|
padding-right: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.emailRow {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between; /* Ensure proper spacing between elements */
|
|
|
|
|
height: 50px;
|
|
|
|
|
padding: 10px 15px; /* Small padding for spacing within the row */
|
|
|
|
|
border: 1px solid lightgray;
|
|
|
|
|
background-color: white;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
margin: 0;
|
|
|
|
|
margin-top:30px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Hover effect for the email row */
|
|
|
|
|
.emailRow:hover {
|
|
|
|
|
border: 1px solid lightblue; /* Subtle border change on hover */
|
|
|
|
|
background-color: #f9f9f9; /* Light background change */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Button inside the row */
|
|
|
|
|
.emailRow__button {
|
|
|
|
|
border: 1px solid lightgray;
|
|
|
|
|
border-radius: 3px; /* Subtle rounding for the button */
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
padding: 5px 10px;
|
|
|
|
|
background-color: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Button hover effect */
|
|
|
|
|
.emailRow__button:hover {
|
|
|
|
|
background-color: #e6f7ff;
|
|
|
|
|
border-color: #0078d4;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Ensure child elements fit within the row */
|
|
|
|
|
.emailRow__message h4 {
|
|
|
|
|
width: 350px; /* Adjust as needed to fit content */
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Titles and text are aligned with appropriate sizing */
|
|
|
|
|
.emailRow__title {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.emailRow__time {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: gray;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.emailRow__description {
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Remove spacing between rows */
|
|
|
|
|
.emailRow + .emailRow {
|
|
|
|
|
margin-top: 0; /* No extra space between rows */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Header */
|
|
|
|
|
.compose-header {
|
|
|
|
|
background-color: #f5f5f5;
|
|
|
|
|
padding: 12px 16px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
cursor: grab; /* For drag-and-drop effect */
|
|
|
|
|
border-bottom: 1px solid #ddd;
|
|
|
|
|
margin-top:500px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.compose-header:hover {
|
|
|
|
|
background-color: #eaeaea;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.compose-title {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #333;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.compose-close {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
color: #666;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition: color 0.2s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.compose-close:hover {
|
|
|
|
|
color: #000;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Body */
|
|
|
|
|
.compose-body {
|
|
|
|
|
padding: 12px 16px;
|
|
|
|
|
flex-grow: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
|
|
gap: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Input Fields */
|
|
|
|
|
.compose-input {
|
|
|
|
|
width: 100%;
|
|
|
|
|
border: 1px solid #ddd;
|
|
|
|
|
padding: 8px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.compose-input:focus {
|
|
|
|
|
border-color: #4285f4;
|
|
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Buttons */
|
|
|
|
|
.compose-button {
|
|
|
|
|
padding: 8px 16px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition: background-color 0.3s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.compose-button.send {
|
|
|
|
|
background-color: #4285f4;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.compose-button.send:hover {
|
|
|
|
|
background-color: #357ae8;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.compose-button.discard {
|
|
|
|
|
background-color: #f5f5f5;
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.compose-button.discard:hover {
|
|
|
|
|
background-color: #eaeaea;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sidebar__compose {
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
text-transform: capitalize;
|
|
|
|
|
color: gray;
|
|
|
|
|
padding: 15px;
|
|
|
|
|
border-radius: 30px;
|
|
|
|
|
background-color: white;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
outline: none;
|
|
|
|
|
border: none;
|
|
|
|
|
box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.75);
|
|
|
|
|
}
|
|
|
|
|
.sidebar__compose span {
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
}
|
|
|
|
|
.sidebar__compose:hover{
|
|
|
|
|
background-color:#87CEFA;
|
|
|
|
|
transition-duration: 0.4s;}
|
|
|
|
|
|
|
|
|
|
.sidebarOption:hover {
|
|
|
|
|
background-color: #6699CC;
|
|
|
|
|
color:black;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sidebarOption__active {
|
|
|
|
|
background-color: #6699CC;
|
|
|
|
|
color: black;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
width:100px;
|
|
|
|
|
}
|
|
|
|
|
.material-icons-black span {
|
|
|
|
|
color: black;
|
|
|
|
|
}
|
|
|
|
|
.search {
|
|
|
|
|
margin-left: 100px;
|
|
|
|
|
margin-top: -30px;
|
|
|
|
|
background-color: #F1F4F8;
|
|
|
|
|
border-radius: 50px;
|
|
|
|
|
width: 400px;
|
|
|
|
|
padding: 5px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
.search input {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
outline: none;
|
|
|
|
|
border: none;
|
|
|
|
|
text-indent: 15px;
|
|
|
|
|
width: 85%;
|
|
|
|
|
}
|
|
|
|
|
.search button {
|
|
|
|
|
outline: none;
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
padding: 8px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
.header__right span{
|
|
|
|
|
padding:20px;
|
|
|
|
|
cursor:pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.email-checkbox + label {
|
|
|
|
|
margin-right: 15px;
|
|
|
|
|
}
|
|
|
|
|
#emailCheckbox {
|
|
|
|
|
display: none; /* Hidden by default */
|
|
|
|
|
position: absolute; /* Position it relative to its container */
|
|
|
|
|
top: 100%; /* Position it just below the input field */
|
|
|
|
|
left: 0; /* Align it with the left of the input field */
|
|
|
|
|
z-index: 10; /* Ensure it appears above other elements */
|
|
|
|
|
background-color: white; /* Background color for better visibility */
|
|
|
|
|
border: 1px solid #ccc; /* Add a border for separation */
|
|
|
|
|
padding: 10px; /* Add some spacing inside the dropdown */
|
|
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
|
|
|
|
|
width: auto; /* Adjust width as needed */
|
|
|
|
|
height:auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#dropdownIcon {
|
|
|
|
|
position: relative; /* Position it relative to its container */
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.email-input-container {
|
|
|
|
|
position: relative; /* The dropdown will be positioned relative to this container */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<div class="Messages ">
|
|
|
|
|
<form id="messageForm " style="" >
|
|
|
|
|
{% csrf_token %}
|
|
|
|
|
<input type="hidden" id="user_id" name="user_id" value="{{ user_id }}">
|
|
|
|
|
<input type="hidden" id="current_user_id" name="current_user_id" value="{{ current_user_id }}">
|
|
|
|
|
<div class="header" style="margin-top:80px;width:75.5%; margin-left:300px;">
|
|
|
|
|
<h2 style="margin-left:60px;">Messages</h2>
|
|
|
|
|
<div class="search">
|
|
|
|
|
<input type="text" placeholder="Search">
|
|
|
|
|
<button><i class="ri-search-2-line"></i></button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="header__right" style="margin-right:400px;">
|
|
|
|
|
<span class="material-icons">apps</span>
|
|
|
|
|
<span class="material-icons">notifications</span>
|
|
|
|
|
<span class="material-icons">account_circle</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="main__body" style="margin-left: 300px; margin-top: 120px; position: sticky; top: 0; z-index: 10; background-color: white;">
|
|
|
|
|
<div class="" style="margin-top:50px;">
|
|
|
|
|
<button class="sidebar__compose" id="compose" onclick="showCompose(event)" style="display: block; margin-bottom: 20px;">
|
|
|
|
|
<span class="material-icons"> add </span>Compose
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<div class="sidebarOption-container" style="position: sticky; top: 0;">
|
|
|
|
|
<div class="sidebarOption sidebarOption__active" style="width:100px;" id="inboxButton" onclick="setActiveBox(this); renderInbox(); HideMessageDetails()">
|
|
|
|
|
<span class="material-icons" style="color:black;"> inbox </span>
|
|
|
|
|
<h3>Inbox</h3>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="sidebarOption" id="sentButton" style="margin-top:-32px; margin-left:130px;" onclick="setActiveBox(this); renderSentMessages(); HideMessageDetails()">
|
|
|
|
|
<span class="material-icons" style="color:black"> near_me </span>
|
|
|
|
|
<h3>Sent</h3>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="sidebarOption" style="margin-top:-37px; margin-left:250px;" onclick="setActiveBox(this)">
|
|
|
|
|
<span class="material-icons" style="color:black">delete</span>
|
|
|
|
|
<h3>Trash</h3>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div id="InboxContainer" style="display:block;margin-left: 40px; "></div>
|
|
|
|
|
|
|
|
|
|
<div id="MessageDetailsContainer" style="display: none; height:auto; padding: 20px; border: 1px solid #ddd; margin-left: 0px; margin-top:20px; border:none; width:100%; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; border-radius:20px;">
|
|
|
|
|
<button id="BackToInboxButton" onclick="backToInbox(event)" style="margin-bottom: 10px;">Back to Inbox</button>
|
|
|
|
|
<div id="MessageDetails" style="height: auto;"></div>
|
|
|
|
|
<div id="ConversationThread" style="height:auto;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
<div class="compose-container" id="ComposeContainer"
|
|
|
|
|
style="display: none; position: fixed; top:230px; bottom: 10%; right: 5%; width: 30%; height:58%; background-color: #fff; border-radius: 30px; box-shadow: 3px 3px 3px 3px rgba(0.5, 0.5, 0.5, 0.5); padding: 30px; z-index: 1000; margin-top: 50px;">
|
|
|
|
|
|
|
|
|
|
<div class="container" style="padding: 20px;width:100%">
|
|
|
|
|
<form id="ComposeMessage" method="post" action="{% url 'send_message' %}?user_id={{ user_id }}">
|
|
|
|
|
{% csrf_token %}
|
|
|
|
|
|
|
|
|
|
<div class="fixed" style="margin-buttom:10px; width:100%">
|
|
|
|
|
<div class="compose-header" style="display: flex; margin-left:-50px; space-between; align-items: center; background-color:#F0F8FF; width:128%; margin-top:-50px;">
|
|
|
|
|
|
|
|
|
|
<span style="font-size: 18px; font-weight: bold; margin-left:20px;" >New Message</span>
|
|
|
|
|
<div class="compose-close" id="Closebutton" onclick="CloseCompose(event)" style="font-size: 30px; margin-left:290px; color: red; cursor: pointer;">×</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="compose-body" >
|
|
|
|
|
<div class="" style="position: relative;">
|
|
|
|
|
<div id="emailBarsContainer" style="margin-top: 10px; display: flex; flex-wrap: wrap;"></div>
|
|
|
|
|
<input type="text" id="toField" placeholder="Select Emails" readonly style="width: 128%; text-indent: 10px; border: none; border-bottom: 1px solid #d3d3d3; height:40px;margin-left:-50px; padding-right: 30px; cursor: pointer;">
|
|
|
|
|
<span id="dropdownIcon" class="dropdown-icon" style="position: absolute; top: 50%; left: 370px; transform: translateY(-50%); cursor: pointer;">▼</span>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="emailCheckbox" style="display: none; margin-top:10px;position: absolute;width: 80%;z-index: 100; background: #ffffff; border: 1px solid #d3d3d3;border-radius: 5px;
|
|
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);padding: 10px; margin-top: 5px;overflow-y: auto; max-height: 150px;
|
|
|
|
|
">
|
|
|
|
|
{% for team in teams %}
|
|
|
|
|
<label style="display: block; margin-bottom: 10px;">
|
|
|
|
|
<input type="checkbox" value="{{ team }}" class="email-checkbox"> {{ team }}
|
|
|
|
|
</label>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<input type="text" id="subject" style="width: 128%; height:40px; margin-top: 0px; border: none; border-bottom: 1px solid #d3d3d3;margin-left:-50px;text-indent: 10px;" class="compose-input" placeholder="Subject">
|
|
|
|
|
|
|
|
|
|
<textarea id="Message" style="width: 128%; height: 220px; margin-top: 1px; text-indent: 10px; border: none;padding-top: 10px; border-bottom: 1px solid #d3d3d3;margin-left:-50px;border-bottom:1px solid solid black"
|
|
|
|
|
class="compose-input" placeholder="Message"></textarea>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Footer -->
|
|
|
|
|
<div class="" style="display: flex; justify-content: space-between; align-items: center; margin-top:20px; margin-right:100px;">
|
|
|
|
|
<button type="button" class="compose-button send" id="sendButton"
|
|
|
|
|
style="margin-left:-30px; border-radius: 10px; color:white; background:#1F51FF;font-size:17px; border: none; width:70px; height:30px; font-weight:bold; letter-spacing:1px;"
|
|
|
|
|
onclick="sendMessage(event)">Send</button>
|
|
|
|
|
|
|
|
|
|
<button class="compose-button discard" id="Discardbutton" style="margin-left:50px; border-radius: 10px; border: none; position:fixed; color:white; background:#1F51FF;font-size:17px; width:80px; height:30px; font-weight:bold; letter-spacing:1px;" onclick="CloseCompose(event)">Discard</button>
|
|
|
|
|
|
|
|
|
|
<i class="fa-solid fa-paperclip" onclick="document.getElementById('attachment').click();" style="color: #1F51FF; margin-right:90px; font-size:23px; cursor: pointer;"></i>
|
|
|
|
|
<input type="file" id="attachment" name="attachment" style="display: none;" accept=".pdf,.doc,.docx,.txt">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<form id="ComposeReply" method="post" action="{% url 'send_reply' %}?user_id={{ user_id }}">
|
|
|
|
|
<div id="ComposeBox" style="display: none;padding: 20px; margin-top: 20px; border: 1px solid #ccc;">
|
|
|
|
|
<h3>Reply to: ${message.sender_id || message.recipient_id}</h3>
|
|
|
|
|
<input type="text" id="toField" name="toField" value="${message.sender_id || message.recipient_id}" readonly style="width: 100%; margin-bottom: 10px;" />
|
|
|
|
|
<textarea id="subject" name="subject" rows="2" placeholder="Subject" style="width: 100%; margin-bottom: 10px;"></textarea>
|
|
|
|
|
<textarea id="message" name="message" rows="4" placeholder="Message" style="width: 100%; margin-bottom: 10px;"></textarea>
|
|
|
|
|
<input type="file" id="attachment" name="attachment" accept=".pdf,.doc,.docx"><br>
|
|
|
|
|
<button type="button" onclick="sendReply(event, '${message.message_id}')">Send</button>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
