chat
This commit is contained in:
@@ -60,7 +60,15 @@ namespace Back.Controllers
|
|||||||
var UserID = claim.Value;
|
var UserID = claim.Value;
|
||||||
var user = await _servUser.GetUserByUserID(Convert.ToInt32(UserID));
|
var user = await _servUser.GetUserByUserID(Convert.ToInt32(UserID));
|
||||||
|
|
||||||
item.CompanyID = user.RolUsers.First().CompanyID.ToString();
|
if (string.IsNullOrEmpty(item.CompanyID))
|
||||||
|
{
|
||||||
|
item.CompanyID = user.RolUsers.First().CompanyID.ToString();
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
if(!await _servCompany.ExsistCompanyByComoanyIDandUserID(Convert.ToInt32(item.CompanyID), Convert.ToInt32(UserID)))
|
||||||
|
item.CompanyID = user.RolUsers.First().CompanyID.ToString();
|
||||||
|
}
|
||||||
var res = await _servTicket.NewTicket(item);
|
var res = await _servTicket.NewTicket(item);
|
||||||
return Ok(res != null);
|
return Ok(res != null);
|
||||||
}
|
}
|
||||||
|
@@ -129,7 +129,7 @@ namespace Back.Services
|
|||||||
//}
|
//}
|
||||||
ret.Company = new CompanyAuthenticationDTO
|
ret.Company = new CompanyAuthenticationDTO
|
||||||
{
|
{
|
||||||
ID = user.RolUsers.First().ID,
|
ID = user.RolUsers.First().CompanyID,
|
||||||
Name = user.RolUsers.First().Company.Name,
|
Name = user.RolUsers.First().Company.Name,
|
||||||
IsAdmin = user.RolUsers.First().IsAdmin,
|
IsAdmin = user.RolUsers.First().IsAdmin,
|
||||||
Logo = user.RolUsers.First().Company.Logo == null ? null : Convert.ToBase64String(user.RolUsers.First().Company.Logo)
|
Logo = user.RolUsers.First().Company.Logo == null ? null : Convert.ToBase64String(user.RolUsers.First().Company.Logo)
|
||||||
|
@@ -11,8 +11,10 @@ namespace Shared.DTOs
|
|||||||
{
|
{
|
||||||
public string? CompanyID { get; set; }
|
public string? CompanyID { get; set; }
|
||||||
[Required]
|
[Required]
|
||||||
|
[MinLength(3,ErrorMessage ="لطفا بیشتر بنویسید")]
|
||||||
public string Title { get; set; }
|
public string Title { get; set; }
|
||||||
[Required]
|
[Required]
|
||||||
|
[MinLength(3, ErrorMessage = "لطفا بیشتر بنویسید")]
|
||||||
public string Text { get; set; }
|
public string Text { get; set; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@@ -1,14 +1,12 @@
|
|||||||
@using Shared.DTOs
|
@using Shared.DTOs
|
||||||
|
|
||||||
<Modal @ref="modal" title="Modal title" IsVerticallyCentered="true">
|
<Modal @ref="modal" title=@Ticket.Title IsVerticallyCentered="true">
|
||||||
<BodyTemplate>
|
<BodyTemplate>
|
||||||
<div class="col-md-1">
|
<Lchat/>
|
||||||
This is a vertically centered modal.
|
|
||||||
</div>
|
|
||||||
</BodyTemplate>
|
</BodyTemplate>
|
||||||
<FooterTemplate>
|
<FooterTemplate>
|
||||||
<Button Color="ButtonColor.Secondary" @onclick="OnHideModalClick">Close</Button>
|
<Button Color="ButtonColor.Secondary" @onclick="OnHideModalClick">Close</Button>
|
||||||
<Button Color="ButtonColor.Primary">Save changes</Button>
|
<Button Color="ButtonColor.Danger" @onclick="OnHideModalClick">بستن</Button>
|
||||||
</FooterTemplate>
|
</FooterTemplate>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
||||||
@@ -22,17 +20,26 @@
|
|||||||
<Badge Color="@badgeColor" IndicatorType="BadgeIndicatorType.RoundedPill">@Ticket.MsgStatus</Badge>
|
<Badge Color="@badgeColor" IndicatorType="BadgeIndicatorType.RoundedPill">@Ticket.MsgStatus</Badge>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@if (!string.IsNullOrEmpty(Ticket.EndDate))
|
||||||
|
{
|
||||||
|
|
||||||
<div style="text-align:center;" class="col-md-2">
|
<div style="text-align:center;" class="col-md-2">
|
||||||
<p>تاریخ شروع <br /> @Ticket.CreateDate</p>
|
<p>تاریخ شروع <br /> @Ticket.CreateDate</p>
|
||||||
</div>
|
</div>
|
||||||
@if (!string.IsNullOrEmpty(Ticket.EndDate))
|
|
||||||
{
|
|
||||||
<div style="text-align:center;" class="col-md-2">
|
<div style="text-align:center;" class="col-md-2">
|
||||||
<p>تاریخ پایان <br /> @Ticket.EndDate</p>
|
<p>تاریخ پایان <br /> @Ticket.EndDate</p>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
|
||||||
|
<div style="text-align:center;" class="col-md-4">
|
||||||
|
<br /> <p>تاریخ شروع @Ticket.CreateDate</p>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</li>
|
</li>
|
||||||
|
32
TaxPayerFull/Layout/Lchat.razor
Normal file
32
TaxPayerFull/Layout/Lchat.razor
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
<div dir="ltr" class="chat">
|
||||||
|
|
||||||
|
<div class="messages" id="chat">
|
||||||
|
<div class="time">
|
||||||
|
Today at 11:41
|
||||||
|
</div>
|
||||||
|
<div class="message parker">
|
||||||
|
Hey, man! What's up, Mr Stark? 👋
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="message stark">
|
||||||
|
Kid, where'd you come from?
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="message parker">
|
||||||
|
Field trip! 🤣
|
||||||
|
</div>
|
||||||
|
<div class="message parker">
|
||||||
|
حل شد 🤣
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="message stark">
|
||||||
|
مشکل ما چی شد
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="input">
|
||||||
|
<input placeholder="Type your message here!" type="text">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@@ -21,6 +21,7 @@
|
|||||||
<link rel="stylesheet" href="assets/vendor/css/core.css" class="template-customizer-core-css" />
|
<link rel="stylesheet" href="assets/vendor/css/core.css" class="template-customizer-core-css" />
|
||||||
<link rel="stylesheet" href="assets/vendor/css/theme-default.css" class="template-customizer-theme-css" />
|
<link rel="stylesheet" href="assets/vendor/css/theme-default.css" class="template-customizer-theme-css" />
|
||||||
<link rel="stylesheet" href="assets/css/demo.css" />
|
<link rel="stylesheet" href="assets/css/demo.css" />
|
||||||
|
<link rel="stylesheet" href="assets/css/chatstyle.css" />
|
||||||
<!-- Vendors CSS -->
|
<!-- Vendors CSS -->
|
||||||
<link rel="stylesheet" href="assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
|
<link rel="stylesheet" href="assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
|
||||||
<link rel="stylesheet" href="assets/vendor/libs/apex-charts/apex-charts.css" />
|
<link rel="stylesheet" href="assets/vendor/libs/apex-charts/apex-charts.css" />
|
||||||
|
@@ -45,13 +45,13 @@
|
|||||||
<div>پشتیبانی</div>
|
<div>پشتیبانی</div>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
</li>
|
</li>
|
||||||
<li class="menu-item @cssActionItem[6]" @onclick="() => onClickcssActionItem(6)">
|
@* <li class="menu-item @cssActionItem[6]" @onclick="() => onClickcssActionItem(6)">
|
||||||
<NavLink href="#" class="menu-link">
|
<NavLink href="#" class="menu-link">
|
||||||
<i class="menu-icon tf-icons bx bx-copy"></i>
|
<i class="menu-icon tf-icons bx bx-copy"></i>
|
||||||
<div >سفارشات</div>
|
<div >سفارشات</div>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
</li>
|
</li> *@
|
||||||
<li class="menu-item @cssActionItem[7]" @onclick="() => onClickcssActionItem(7)">
|
<li class="menu-item @cssActionItem[6]" @onclick="() => onClickcssActionItem(6)">
|
||||||
<NavLink href="Setting" class="menu-link">
|
<NavLink href="Setting" class="menu-link">
|
||||||
<i class="menu-icon tf-icons bx bx-file"></i>
|
<i class="menu-icon tf-icons bx bx-file"></i>
|
||||||
<div>تنظیمات</div>
|
<div>تنظیمات</div>
|
||||||
@@ -61,7 +61,7 @@
|
|||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
@code{
|
@code{
|
||||||
string[] cssActionItem = { "active", "", "", "", "", "", "", "" };
|
string[] cssActionItem = { "active", "", "", "", "", "", "" };
|
||||||
|
|
||||||
}
|
}
|
||||||
@functions{
|
@functions{
|
||||||
|
@@ -4,6 +4,27 @@
|
|||||||
@using Shared.DTOs.Serch
|
@using Shared.DTOs.Serch
|
||||||
@layout PanelLayout
|
@layout PanelLayout
|
||||||
@inject HttpClientController hc;
|
@inject HttpClientController hc;
|
||||||
|
@inject UserAuthenticationDTO userinfo
|
||||||
|
<Modal @ref="modal" title="تیکت جدید" IsVerticallyCentered="true">
|
||||||
|
<BodyTemplate>
|
||||||
|
<form>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="exampleFormControlInput1">عنوان</label>
|
||||||
|
<InputText @bind-Value="newTitle" type="text" class="form-control" />
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="exampleFormControlTextarea1">توضیحات بیشتر</label>
|
||||||
|
<InputTextArea @bind-Value="newtext" class="form-control" rows="3" />
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</BodyTemplate>
|
||||||
|
<FooterTemplate>
|
||||||
|
<Button Color="ButtonColor.Secondary" @onclick="OnHideModalClick">Close</Button>
|
||||||
|
<Button Color="ButtonColor.Primary" @onclick="OnClickNewTicket">ثبت</Button>
|
||||||
|
</FooterTemplate>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
<div class="container-xxl flex-grow-1 container-p-y">
|
<div class="container-xxl flex-grow-1 container-p-y">
|
||||||
<h4 class="fw-bold py-3 mb-4">
|
<h4 class="fw-bold py-3 mb-4">
|
||||||
<span class="text-muted fw-light">متفرقه /</span> پشتیبانی
|
<span class="text-muted fw-light">متفرقه /</span> پشتیبانی
|
||||||
@@ -25,7 +46,7 @@
|
|||||||
<ul class="list-group fa-padding" style="border: 2px solid #0d6efd">
|
<ul class="list-group fa-padding" style="border: 2px solid #0d6efd">
|
||||||
<li class="list-group-item" data-toggle="modal" data-target="#issue">
|
<li class="list-group-item" data-toggle="modal" data-target="#issue">
|
||||||
<div class="row g-3">
|
<div class="row g-3">
|
||||||
<div class="col-md-2">
|
<div class="col-md-2">
|
||||||
<InputText @bind-Value="TicketID" placeholder="شناسه" style="text-align:center;" class="form-control" type="text" id="EconomicCode" />
|
<InputText @bind-Value="TicketID" placeholder="شناسه" style="text-align:center;" class="form-control" type="text" id="EconomicCode" />
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
@@ -33,24 +54,24 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
|
|
||||||
<button type="submit" onclick="@Submit" class="btn btn-primary">جستجو</button>
|
<button type="submit" @onclick="Submit" class="btn btn-primary">جستجو</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
|
|
||||||
<button type="submit" onclick="@Submit" class="btn btn-primary">جدید</button>
|
<button type="submit" @onclick="OnShowModalClick" class="btn btn-primary">جدید</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-12">
|
<div class="col-md-12">
|
||||||
<ul class="list-group fa-padding">
|
<ul class="list-group fa-padding">
|
||||||
@@ -90,16 +111,20 @@
|
|||||||
|
|
||||||
|
|
||||||
@code {
|
@code {
|
||||||
|
private Modal modal = default!;
|
||||||
// alert
|
// alert
|
||||||
AlertColor alertColor = AlertColor.Primary;
|
AlertColor alertColor = AlertColor.Primary;
|
||||||
IconName alertIconName = IconName.CheckCircleFill;
|
IconName alertIconName = IconName.CheckCircleFill;
|
||||||
bool Hidealert = true;
|
bool Hidealert = true;
|
||||||
string alertMessage = "";
|
string alertMessage = "";
|
||||||
|
|
||||||
|
#region bind
|
||||||
public string? TicketID { get; set; }
|
public string? TicketID { get; set; }
|
||||||
public string? Title { get; set; }
|
public string? Title { get; set; }
|
||||||
|
|
||||||
|
public string? newTitle { get; set; }
|
||||||
|
public string? newtext { get; set; }
|
||||||
|
#endregion
|
||||||
[Parameter, SupplyParameterFromQuery]
|
[Parameter, SupplyParameterFromQuery]
|
||||||
public int? PageIndex { get; set; }
|
public int? PageIndex { get; set; }
|
||||||
|
|
||||||
@@ -108,35 +133,76 @@
|
|||||||
protected override async Task OnParametersSetAsync()
|
protected override async Task OnParametersSetAsync()
|
||||||
{
|
{
|
||||||
if (PageIndex == null) PageIndex = 1;
|
if (PageIndex == null) PageIndex = 1;
|
||||||
request = new PagingDto<TicketDTO>(2, 10, new List<TicketDTO>()
|
await Search(PageIndex.Value);
|
||||||
{
|
|
||||||
new TicketDTO
|
|
||||||
{
|
|
||||||
CreateDate="1402/08/05",
|
|
||||||
CreateTime="20:10:10",
|
|
||||||
EndDate="1402/08/08",
|
|
||||||
EndTime="08:10:10",
|
|
||||||
MsgStatus="خوانده شده/ در حال بررسی",
|
|
||||||
Status=StatusTicket.optout,
|
|
||||||
TicketID=1,
|
|
||||||
Title="این یک تست برای یک تیکت است"
|
|
||||||
},
|
|
||||||
new TicketDTO
|
|
||||||
{
|
|
||||||
CreateDate="1402/08/05",
|
|
||||||
CreateTime="20:10:10",
|
|
||||||
EndDate="1402/08/08",
|
|
||||||
EndTime="08:10:10",
|
|
||||||
MsgStatus="خوانده شده/ در حال بررسی",
|
|
||||||
Status=StatusTicket.optout,
|
|
||||||
TicketID=1,
|
|
||||||
Title="این یک تست برای یک تیکت است"
|
|
||||||
}
|
|
||||||
});
|
|
||||||
await base.OnParametersSetAsync();
|
await base.OnParametersSetAsync();
|
||||||
}
|
}
|
||||||
private async Task Submit()
|
private async Task Submit()
|
||||||
{
|
{
|
||||||
var eeee = Title + " " + Title;
|
await Search(1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@functions {
|
||||||
|
private void ShowSuccessAlert(string msg)
|
||||||
|
{
|
||||||
|
Hidealert = false;
|
||||||
|
alertColor = AlertColor.Success;
|
||||||
|
alertIconName = IconName.CheckCircleFill;
|
||||||
|
alertMessage = msg;
|
||||||
|
}
|
||||||
|
|
||||||
|
private void ShowDangerAlert(string msg)
|
||||||
|
{
|
||||||
|
Hidealert = false;
|
||||||
|
alertColor = AlertColor.Danger;
|
||||||
|
alertIconName = IconName.ExclamationTriangleFill;
|
||||||
|
alertMessage = msg;
|
||||||
|
}
|
||||||
|
private async Task Search(int pi)
|
||||||
|
{
|
||||||
|
var rsp = await hc.Post<ItemSerchGetTicket>("Ticket/GetAll", new ItemSerchGetTicket
|
||||||
|
{
|
||||||
|
PageIndex = pi,
|
||||||
|
PageSize = 10,
|
||||||
|
TicketID = string.IsNullOrEmpty(TicketID) ? null : Convert.ToInt32(TicketID),
|
||||||
|
Title = Title
|
||||||
|
|
||||||
|
});
|
||||||
|
if (rsp.IsSuccessStatusCode)
|
||||||
|
{
|
||||||
|
request = await rsp.Content.ReadFromJsonAsync<PagingDto<TicketDTO>>();
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
ShowDangerAlert("خطایی در اجرای عملیات رخ داده");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
private async Task OnShowModalClick()
|
||||||
|
{
|
||||||
|
await modal.ShowAsync();
|
||||||
|
}
|
||||||
|
private async Task OnHideModalClick()
|
||||||
|
{
|
||||||
|
await modal.HideAsync();
|
||||||
|
}
|
||||||
|
private async Task OnClickNewTicket()
|
||||||
|
{
|
||||||
|
var rsp = await hc.Post<CTicketDto>("Ticket/NewTicket", new CTicketDto
|
||||||
|
{
|
||||||
|
CompanyID = userinfo.Company.ID.ToString(),
|
||||||
|
Text = newtext,
|
||||||
|
Title = newTitle
|
||||||
|
});
|
||||||
|
if (rsp.IsSuccessStatusCode)
|
||||||
|
{
|
||||||
|
ShowSuccessAlert("درخواست شما با موفقیت ثبت شد");
|
||||||
|
newtext = newTitle = string.Empty;
|
||||||
|
await Search(1);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
ShowDangerAlert("خطایی در اجرای عملیات رخ داده");
|
||||||
|
}
|
||||||
|
await modal.HideAsync();
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
247
TaxPayerFull/wwwroot/assets/css/chatstyle.css
Normal file
247
TaxPayerFull/wwwroot/assets/css/chatstyle.css
Normal file
@@ -0,0 +1,247 @@
|
|||||||
|
@import url("https://fonts.googleapis.com/css?family=Red+Hat+Display:400,500,900&display=swap");
|
||||||
|
body, html {
|
||||||
|
font-family: Red hat Display, sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.25em;
|
||||||
|
letter-spacing: 0.025em;
|
||||||
|
color: #333;
|
||||||
|
background: #F7F7F7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: calc(50% + 12rem);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pic {
|
||||||
|
width: 4rem;
|
||||||
|
height: 4rem;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
padding-left: 5rem;
|
||||||
|
height: 4.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.contact .pic {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.contact .name {
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 0.125rem;
|
||||||
|
}
|
||||||
|
.contact .message, .contact .seen {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.contact .badge {
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: absolute;
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
padding-top: 0.125rem;
|
||||||
|
border-radius: 1rem;
|
||||||
|
top: 0;
|
||||||
|
left: 2.5rem;
|
||||||
|
background: #333;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contacts {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
transform: translate(-6rem, -50%);
|
||||||
|
width: 24rem;
|
||||||
|
height: 32rem;
|
||||||
|
padding: 1rem 2rem 1rem 1rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 1rem 0 0 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
background: white;
|
||||||
|
box-shadow: 0 0 8rem 0 rgba(0, 0, 0, 0.1), 2rem 2rem 4rem -3rem rgba(0, 0, 0, 0.5);
|
||||||
|
transition: transform 500ms;
|
||||||
|
}
|
||||||
|
.contacts h2 {
|
||||||
|
margin: 0.5rem 0 1.5rem 5rem;
|
||||||
|
}
|
||||||
|
.contacts .fa-bars {
|
||||||
|
position: absolute;
|
||||||
|
left: 2.25rem;
|
||||||
|
color: #999;
|
||||||
|
transition: color 200ms;
|
||||||
|
}
|
||||||
|
.contacts .fa-bars:hover {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
.contacts .contact:last-child {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.contacts:hover {
|
||||||
|
transform: translate(-23rem, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
z-index: 2;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 1rem;
|
||||||
|
background: white;
|
||||||
|
box-shadow: 0 0 8rem 0 rgba(0, 0, 0, 0.1), 0rem 2rem 4rem -3rem rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
.chat .contact.bar {
|
||||||
|
flex-basis: 3.5rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin: 1rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.chat .messages {
|
||||||
|
padding: 1rem;
|
||||||
|
background: #F7F7F7;
|
||||||
|
flex-shrink: 2;
|
||||||
|
overflow-y: auto;
|
||||||
|
box-shadow: inset 0 2rem 2rem -2rem rgba(0, 0, 0, 0.05), inset 0 -2rem 2rem -2rem rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
.chat .messages .time {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
background: #EEE;
|
||||||
|
padding: 0.25rem 1rem;
|
||||||
|
border-radius: 2rem;
|
||||||
|
color: #999;
|
||||||
|
width: -webkit-fit-content;
|
||||||
|
width: -moz-fit-content;
|
||||||
|
width: fit-content;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.chat .messages .message {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
margin: 1rem;
|
||||||
|
background: #FFF;
|
||||||
|
border-radius: 1.125rem 1.125rem 1.125rem 0;
|
||||||
|
min-height: 2.25rem;
|
||||||
|
width: -webkit-fit-content;
|
||||||
|
width: -moz-fit-content;
|
||||||
|
width: fit-content;
|
||||||
|
max-width: 66%;
|
||||||
|
box-shadow: 0 0 2rem rgba(0, 0, 0, 0.075), 0rem 1rem 1rem -1rem rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
.chat .messages .message.parker {
|
||||||
|
margin: 1rem 1rem 1rem auto;
|
||||||
|
border-radius: 1.125rem 1.125rem 0 1.125rem;
|
||||||
|
background: #333;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
}
|
||||||
|
.chat .messages .message .typing {
|
||||||
|
display: inline-block;
|
||||||
|
width: 0.8rem;
|
||||||
|
height: 0.8rem;
|
||||||
|
margin-right: 0rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: #ccc;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.chat .messages .message .typing.typing-1 {
|
||||||
|
-webkit-animation: typing 3s infinite;
|
||||||
|
animation: typing 3s infinite;
|
||||||
|
}
|
||||||
|
.chat .messages .message .typing.typing-2 {
|
||||||
|
-webkit-animation: typing 3s 250ms infinite;
|
||||||
|
animation: typing 3s 250ms infinite;
|
||||||
|
}
|
||||||
|
.chat .messages .message .typing.typing-3 {
|
||||||
|
-webkit-animation: typing 3s 500ms infinite;
|
||||||
|
animation: typing 3s 500ms infinite;
|
||||||
|
}
|
||||||
|
.chat .input {
|
||||||
|
box-sizing: border-box;
|
||||||
|
flex-basis: 4rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 0.5rem 0 1.5rem;
|
||||||
|
}
|
||||||
|
.chat .input i {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
color: #666;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color 200ms;
|
||||||
|
}
|
||||||
|
.chat .input i:hover {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.chat .input input {
|
||||||
|
border: none;
|
||||||
|
background-image: none;
|
||||||
|
background-color: white;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
border-radius: 1.125rem;
|
||||||
|
flex-grow: 2;
|
||||||
|
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1), 0rem 1rem 1rem -1rem rgba(0, 0, 0, 0.2);
|
||||||
|
font-family: Red hat Display, sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0.025em;
|
||||||
|
}
|
||||||
|
.chat .input input:placeholder {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes typing {
|
||||||
|
0%, 75%, 100% {
|
||||||
|
transform: translate(0, 0.25rem) scale(0.9);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translate(0, -0.25rem) scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes typing {
|
||||||
|
0%, 75%, 100% {
|
||||||
|
transform: translate(0, 0.25rem) scale(0.9);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translate(0, -0.25rem) scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pic.stark {
|
||||||
|
background-image: url("https://vignette.wikia.nocookie.net/marvelcinematicuniverse/images/7/73/SMH_Mentor_6.png");
|
||||||
|
}
|
||||||
|
|
||||||
|
.pic.banner {
|
||||||
|
background-image: url("https://vignette.wikia.nocookie.net/marvelcinematicuniverse/images/4/4f/BruceHulk-Endgame-TravelingCapInPast.jpg");
|
||||||
|
}
|
||||||
|
|
||||||
|
.pic.thor {
|
||||||
|
background-image: url("https://vignette.wikia.nocookie.net/marvelcinematicuniverse/images/9/98/ThorFliesThroughTheAnus.jpg");
|
||||||
|
}
|
||||||
|
|
||||||
|
.pic.danvers {
|
||||||
|
background-image: url("https://vignette.wikia.nocookie.net/marvelcinematicuniverse/images/0/05/HeyPeterParker.png");
|
||||||
|
}
|
||||||
|
|
||||||
|
.pic.rogers {
|
||||||
|
background-image: url("https://vignette.wikia.nocookie.net/marvelcinematicuniverse/images/7/7c/Cap.America_%28We_Don%27t_Trade_Lives_Vision%29.png");
|
||||||
|
}
|
@@ -9,7 +9,7 @@
|
|||||||
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
|
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
|
||||||
<link rel="stylesheet" href="css/app.css" />
|
<link rel="stylesheet" href="css/app.css" />
|
||||||
<link rel="icon" type="image/png" href="favicon.png" />
|
<link rel="icon" type="image/png" href="favicon.png" />
|
||||||
<link href="Front.styles.css" rel="stylesheet" />
|
|
||||||
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet" />
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet" />
|
||||||
|
Reference in New Issue
Block a user