<div class="chat99-container">
<div class="chat99-sidebar hide">
<button class="btn btn-primary chat99-mobil-show" onclick="Chat99SidebarToggle()" style="position:absolute; z-index:45; right:-23px; top:13px">
<i class="fas fa-stream"></i>
</button>
<div class="chat99-fixed pt-2">
<div class="d-flex bd-highlight">
<div class="p-2 w-100 bd-highlight">
<input type="text" id="chat99-search" placeholder="Kullanıcı Ara ..." />
</div>
<div class="p-2 flex-shrink-1 bd-highlight">
</div>
</div>
</div>
<div class="chat99-content">
<div class="d-flex bd-highlight chat99-user" onclick="Chat99UserClick(this)" data-chatid="@item.Id" data-email="@item.Email 435" data-username="@item.UserName gd34534">
<div class="p-2 flex-shrink-1 bd-highlight">
<img class="chat99-user-icon" src="#" />
</div>
<div class="p-2 w-100 bd-highlight">
<span class="chat99-username">User Firstname AAA</span>
<span class="chat99-message new">Last message text areasf...</span>
</div>
</div>
<div class="d-flex bd-highlight chat99-user" onclick="Chat99UserClick(this)" data-chatid="@item.Id" data-email="@item.Email 435" data-username="@item.UserName gd34534">
<div class="p-2 flex-shrink-1 bd-highlight">
<img class="chat99-user-icon" src="#" />
</div>
<div class="p-2 w-100 bd-highlight">
<span class="chat99-username">User Firstname AAA</span>
<span class="chat99-message new">Last message text areasf...</span>
</div>
</div>
<div class="d-flex bd-highlight chat99-user" onclick="Chat99UserClick(this)" data-chatid="@item.Id" data-email="@item.Email 435" data-username="@item.UserName gd34534">
<div class="p-2 flex-shrink-1 bd-highlight">
<img class="chat99-user-icon" src="#" />
</div>
<div class="p-2 w-100 bd-highlight">
<span class="chat99-username">User Firstname AAA</span>
<span class="chat99-message new">Last message text areasf...</span>
</div>
</div>
<div class="d-flex bd-highlight chat99-user" onclick="Chat99UserClick(this)" data-chatid="@item.Id" data-email="@item.Email 435" data-username="@item.UserName gd34534">
<div class="p-2 flex-shrink-1 bd-highlight">
<img class="chat99-user-icon" src="#" />
</div>
<div class="p-2 w-100 bd-highlight">
<span class="chat99-username">User Firstname AAA</span>
<span class="chat99-message new">Last message text areasf...</span>
</div>
</div>
<div class="d-flex bd-highlight chat99-user" onclick="Chat99UserClick(this)" data-chatid="@item.Id" data-email="@item.Email 435" data-username="@item.UserName gd34534">
<div class="p-2 flex-shrink-1 bd-highlight">
<img class="chat99-user-icon" src="#" />
</div>
<div class="p-2 w-100 bd-highlight">
<span class="chat99-username">User Firstname AAA</span>
<span class="chat99-message new">Last message text areasf...</span>
</div>
</div>
<div class="d-flex bd-highlight chat99-user" onclick="Chat99UserClick(this)" data-chatid="@item.Id" data-email="@item.Email 435" data-username="@item.UserName gd34534">
<div class="p-2 flex-shrink-1 bd-highlight">
<img class="chat99-user-icon" src="#" />
</div>
<div class="p-2 w-100 bd-highlight">
<span class="chat99-username">User Firstname AAA</span>
<span class="chat99-message new">Last message text areasf...</span>
</div>
</div>
<div class="d-flex bd-highlight chat99-user" onclick="Chat99UserClick(this)" data-chatid="@item.Id" data-email="@item.Email 435" data-username="@item.UserName gd34534">
<div class="p-2 flex-shrink-1 bd-highlight">
<img class="chat99-user-icon" src="#" />
</div>
<div class="p-2 w-100 bd-highlight">
<span class="chat99-username">User Firstname AAA</span>
<span class="chat99-message new">Last message text areasf...</span>
</div>
</div>
<div class="d-flex bd-highlight chat99-user" onclick="Chat99UserClick(this)" data-chatid="@item.Id" data-email="@item.Email 435" data-username="@item.UserName gd34534">
<div class="p-2 flex-shrink-1 bd-highlight">
<img class="chat99-user-icon" src="#" />
</div>
<div class="p-2 w-100 bd-highlight">
<span class="chat99-username">User Firstname AAA</span>
<span class="chat99-message new">Last message text areasf...</span>
</div>
</div>
<div class="d-flex bd-highlight chat99-user" onclick="Chat99UserClick(this)" data-chatid="@item.Id" data-email="@item.Email 435" data-username="@item.UserName gd34534">
<div class="p-2 flex-shrink-1 bd-highlight">
<img class="chat99-user-icon" src="#" />
</div>
<div class="p-2 w-100 bd-highlight">
<span class="chat99-username">User Firstname AAA</span>
<span class="chat99-message new">Last message text areasf...</span>
</div>
</div>
<div class="d-flex bd-highlight chat99-user" onclick="Chat99UserClick(this)" data-chatid="@item.Id" data-email="@item.Email 435" data-username="@item.UserName gd34534">
<div class="p-2 flex-shrink-1 bd-highlight">
<img class="chat99-user-icon" src="#" />
</div>
<div class="p-2 w-100 bd-highlight">
<span class="chat99-username">User Firstname AAA</span>
<span class="chat99-message new">Last message text areasf...</span>
</div>
</div>
<div class="d-flex bd-highlight chat99-user" onclick="Chat99UserClick(this)" data-chatid="@item.Id" data-email="@item.Email 435" data-username="@item.UserName gd34534">
<div class="p-2 flex-shrink-1 bd-highlight">
<img class="chat99-user-icon" src="#" />
</div>
<div class="p-2 w-100 bd-highlight">
<span class="chat99-username">User Firstname AAA</span>
<span class="chat99-message new">Last message text areasf...</span>
</div>
</div>
<div class="d-flex bd-highlight chat99-user">
<div class="p-2 flex-shrink-1 bd-highlight">
<img class="chat99-user-icon" src="#" />
</div>
<div class="p-2 w-100 bd-highlight">
<span class="chat99-username" onclick="Chat99UserClick(this)" data-chatid="@item.Id" data-email="@item.Email" data-username="@item.UserName">User Firstname AAA</span>
<span class="chat99-message new">Last message text areasf...</span>
</div>
</div>
</div>
</div>
<div class="chat99-body full">
<div class="chat99-body-container">
<div class="chat99-fixed w-100 d-block">
<div class="d-flex bd-highlight">
<div class="p-0 w-100 bd-highlight">
<div class="d-flex flex-row bd-highlight">
<div class="bd-highlight ps-5 pe-3">
<div class="chat99-fixed-center">
<img class="chat99-user-icon" src="#" />
</div>
</div>
<div class="bd-highlight">
<div class="chat99-fixed-center">
<span id="chat99-select-username">User Firstname Lastname</span>
</div>
</div>
</div>
</div>
<div class="flex-shrink-1 bd-highlight">
<div class="chat99-fixed-center">
<button class="btn btn-danger chat99-btn">
<i class="far fa-trash-alt"></i>
</button>
</div>
</div>
</div>
</div>
<div class="chat99-content" id="chat99-messages">
<div class="d-flex flex-row bd-highlight chat99-message">
<div class="p-2 bd-highlight">
<div class="chat99-msg">
<span class="chat99-msg-text">DFH fghfgd h d</span>
<span class="chat99-msg-date">12.11.2027 11:21</span>
</div>
</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight chat99-message">
<div class="p-2 bd-highlight">
<div class="chat99-msg">
<span class="chat99-msg-text">DFH fghfgd hdfgd hfdhdfg fdhdfgh df hfdhfgdh dfhfdghdf hfdhhdfhdfhdfh dfhdfhfdh d</span>
<span class="chat99-msg-date">12.11.2027 11:21</span>
</div>
</div>
</div>
<div class="d-flex flex-row bd-highlight chat99-message">
<div class="p-2 bd-highlight">
<div class="chat99-msg">
<span class="chat99-msg-text">DFH fghfgd hdfgd hfdhdfg fdhdfgh df hfdhfgdh dfhfdghdf hfdhhdfhdfhdfh dfhdfhfdh d</span>
<span class="chat99-msg-date">12.11.2027 11:21</span>
</div>
</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight chat99-message">
<div class="p-2 bd-highlight">
<div class="chat99-msg">
<span class="chat99-msg-text">DFH fghfgd hdfgd hfdhdfg fdhdfgh df hfdhfgdh dfhfdghdf hfdhhdfhdfhdfh dfhdfhfdh d</span>
<span class="chat99-msg-date">12.11.2027 11:21</span>
</div>
</div>
</div>
<div class="d-flex flex-row bd-highlight chat99-message">
<div class="p-2 bd-highlight">
<div class="chat99-msg">
<span class="chat99-msg-text">DFH fghfgd hdfgd hfdhdfg fdhdfgh df hfdhfgdh dfhfdghdf hfdhhdfhdfhdfh dfhdfhfdh d</span>
<span class="chat99-msg-date">12.11.2027 11:21</span>
</div>
</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight chat99-message">
<div class="p-2 bd-highlight">
<div class="chat99-msg">
<span class="chat99-msg-text">DFH fghfgd hdfgd hfdhdfg fdhdfgh df hfdhfgdh dfhfdghdf hfdhhdfhdfhdfh dfhdfhfdh d</span>
<span class="chat99-msg-date">12.11.2027 11:21</span>
</div>
</div>
</div>
<div class="d-flex flex-row bd-highlight chat99-message">
<div class="p-2 bd-highlight">
<div class="chat99-msg">
<span class="chat99-msg-text">DFH fghfgd hdfgd hfdhdfg fdhdfgh df hfdhfgdh dfhfdghdf hfdhhdfhdfhdfh dfhdfhfdh d</span>
<span class="chat99-msg-date">12.11.2027 11:21</span>
</div>
</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight chat99-message">
<div class="p-2 bd-highlight">
<div class="chat99-msg">
<span class="chat99-msg-text">DFH fghfgd hdfgd hfdhdfg fdhdfgh df hfdhfgdh dfhfdghdf hfdhhdfhdfhdfh dfhdfhfdh d</span>
<span class="chat99-msg-date">12.11.2027 11:21</span>
</div>
</div>
</div>
</div>
<div class="chat99-fixed chat99-new-message d-block" style="bottom:0px; top:initial;">
<div class="d-flex bd-highlight">
<div class="p-0 w-100 bd-highlight">
<textarea id="chat99-new-msg-text" placeholder="new message"></textarea>
</div>
<div class="p-0 flex-shrink-1 bd-highlight">
<div class="chat99-fixed-center">
<button class="btn btn-primary chat99-btn" onclick="Chat99PostMessage()">
<i class="far fa-paper-plane"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="clear:both"></div>
</div>
:root {
--chat99-height: 100vh;
--chat99-fixed: 65px;
--chat99-side-width: 305px;
--chat99-color-a1: #2c3e50;
--chat99-color-a2: #f5f5f5;
--chat99-color-a3: #e6eaea;
--chat99-color-a4: blue;
}
.chat99-container {
width: 100%;
margin: 0px;
padding: 0px;
position: relative;
min-height: var(--chat99-height);
max-height: var(--chat99-height);
}
.chat99-sidebar {
position: relative;
float: left;
background-color: var(--chat99-color-a1);
max-height: 100%;
padding-top: var(--chat99-fixed);
width: var(--chat99-side-width);
}
.chat99-sidebar .chat99-fixed {
background-color: var(--chat99-color-a1);
}
.chat99-body {
width: 100%;
position: relative;
padding-top: var(--chat99-fixed);
padding-bottom: var(--chat99-fixed);
max-height: 100%;
overflow: hidden;
margin-left: var(--chat99-side-width);
width: calc(100% - var(--chat99-side-width));
}
.chat99-sidebar.hide {
width: 0px !important;
max-width: 0px !important;
}
.chat99-body.full {
width: 100% !important;
margin-left: 0px !important;
}
.chat99-body-container {
min-width: 320px;
}
#chat99-search {
background-color: var(--chat99-color-a1);
color: #fff;
border: none;
width: 100%;
display: block;
padding: 7px;
margin: 0px;
}
#chat99-search:focus {
background-color: #32465a;
outline: none;
}
.chat99-fixed {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: var(--chat99-fixed);
background-color: var(--chat99-color-a2);
}
.chat99-content {
width: 100%;
min-height: calc(var(--chat99-height) - var(--chat99-fixed));
max-height: calc(var(--chat99-height) - var(--chat99-fixed));
overflow: auto;
}
#chat99-messages {
max-height: calc(
var(--chat99-height) - var(--chat99-fixed) - var(--chat99-fixed)
);
min-height: calc(
var(--chat99-height) - var(--chat99-fixed) - var(--chat99-fixed)
);
background-color: var(--chat99-color-a3);
overflow-x:hidden;
}
.chat99-sidebar .chat99-content {
padding-top: 20px;
padding-bottom: 50px;
}
.chat99-hide {
max-width: 0px;
display: none;
}
.chat99-user-icon {
width: 47px;
}
.chat99-user {
border-bottom: 1px solid #32465a;
color: #fff;
cursor: pointer;
}
.chat99-user.active {
background-color: #32465a;
}
.chat99-user:hover {
background-color: #32465a;
}
.chat99-username,
.chat99-message {
display: block;
width: 100%;
}
.chat99-username {
font-size: 1.1rem;
font-weight: 500;
}
.chat99-message {
font-size: 0.9rem;
opacity: 0.9;
}
.chat99-message.new {
color:yellow
}
.chat99-fixed-center{
display:flex;
align-items:center;
justify-content:center;
height:var(--chat99-fixed);
}
#chat99-select-username{
font-size:1.2rem;
max-height:var(--chat99-fixed);
overflow:hidden;
}
.chat99-mobil-show {
display: block !important;
}
.chat99-btn{
border-radius:50%;
width:40px;
height:40px;
margin:10px;
}
@media only screen and (min-width: 680px) {
.chat99-mobil-show {
display: none !important;
}
}
.chat99-msg {
width: 85%;
max-width: 370px;
background-color: #fff;
padding: 10px;
border-radius: 0px 15px 15px 15px;
}
.flex-row-reverse .chat99-msg {
margin-left: 15%;
border-radius: 15px 15px 0px 15px;
background-color: #868b8e;
color: #fff;
}
.chat99-msg-text {
display: block;
width: 100%;
margin-bottom: 15px;
min-width:250px;
}
.chat99-msg-date {
display: block;
width: 100%;
font-size: 0.8rem;
text-align: right;
}
.chat99-selectuser-name {
line-height: 40px;
font-size: large;
margin-left: 10px;
color: #000;
}
.chat99-new-message textarea {
border: none;
resize: none;
padding: 10px;
width: 100%;
display: block;
height: var(--chat99-fixed);
background-color: transparent;
}
.chat99-new-message textarea:focus {
background-color: transparent;
outline: none !important;
border: none !important;
inline: none !important;
}
.chat99-new-message textarea::-webkit-scrollbar {
display: none;
}
/******************************************************/
var chat57UserIcon =
"data:image/png;base64,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";
$(document).ready(function () {
$(".chat99-user-icon").attr("src", chat57UserIcon);
Chat99Control();
$(window).resize(function () {
/*search elementi secilince mobilde ekran boyutu degistiginden slider kapaniyordu, focus olup olmadigi kontrol edilir*/
if (!$("#chat99-search").is(":focus")) {
Chat99Control();
}
});
$("#chat99-search").keyup(function () {
var findValue = $(this).val().trim().toUpperCase();
if (findValue.length > 0) {
$(".chat99-user").removeClass("d-flex").hide();
$.each($(".chat99-user"), function (index_, element_) {
var findName=$(element_).data('username').toUpperCase().indexOf(findValue);
var findMail=$(element_).data('email').toUpperCase().indexOf(findValue);
if (findName > -1 || findMail >-1) {
$(element_).addClass("d-flex").show();
}
});
} else {
$(".chat99-user").addClass("d-flex").show();
}
});
});
function Chat99Control() {
if ($(".chat99-container").eq(0).width() > 680) {
Chat99SidebarToggle(true);
} else {
Chat99SidebarToggle(false);
}
}
function Chat99SidebarToggle(isShow = null) {
if (isShow != null) {
if (isShow) {
$(".chat99-sidebar").removeClass("hide");
$(".chat99-body").removeClass("full");
} else {
$(".chat99-sidebar").addClass("hide");
$(".chat99-body").addClass("full");
}
} else {
$(".chat99-sidebar").toggleClass("hide");
$(".chat99-body").toggleClass("full");
}
}
function Chat99UserClick(this_user) {
$(this_user).find(".chat99-message").first().removeClass("new");
$("#chat99-select-username").text(
$(this_user).find(".chat99-username").first().text()
);
$('.chat99-user.active').removeClass('active');
$(this_user).addClass('active');
}
function Chat99PostMessage() {
var msg = $("#chat99-new-msg-text").val();
msg = msg.trim();
if (msg.length > 0) {
Chat99CreateMsg($("#chat99-new-msg-text").val(), "now");
$("#chat99-new-msg-text").val("");
}
Chat99ScrollToBottom();
}
function Chat99CreateMsg(message_, date_, isMy_=true) {
if (isMy_) {
$("#chat99-messages").append(
'<div class="d-flex flex-row-reverse bd-highlight chat57-message"><div class="p-2 bd-highlight"><div class="chat99-msg"><span class="chat99-msg-text">' +
message_ +
'</span><span class="chat99-msg-date">' +
date_ +
"</span></div></div></div>"
);
} else {
$('#').append('<div class="d-flex flex-row bd-highlight mb-3"><div class="p-2 bd-highlight"><div class="chat99-msg"><span class="chat99-msg-text">'+message_+'</span><span class="chat99-msg-date">'+date_+'</span></div></div></div>');
}
}
function Chat99ScrollToBottom() {
var div = $('#chat99-messages');
div.animate({
scrollTop: div[0].scrollHeight
}, 700);
}