<html>
<head>
<meta charset="utf-8">
<title>Chat</title>
<link rel="stylesheet" href="chat.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>
<body>
<div class="contener">
<div class="leftChat">
<div class="header">
<div class="myImage">
<img class="redaImage" src="https://clarity-enhanced.net/wp-content/themes/clarity-enhanced/assets/img/bootstrap-chat-app-assets/filip.jpg">
</div>
<h3>Mohamed Reda</h3>
<div class="forFeatures">
<span class="icon"><i class="fas fa-bars"></i></span>
<span class="icon"><i class="fas fa-retweet"></i></span>
<span class="icon"><i class="fas fa-cog"></i></span>
</div>
</div>
<div class="search">
<span class = "icon"><i class="fas fa-search"></i></span>
<input class="searchInput" placeholder="Search here.....">
</div>
<div id="onlineUsers">
<div class="users">
<div class="imageForUser">
<img class="imageUsers" src="https://clarity-enhanced.net/wp-content/themes/clarity-enhanced/assets/img/bootstrap-chat-app-assets/robocop.jpg" style="width: 50px; height: 50px; border-radius: 50%;">
</div>
<div class="nameAndCapchn">
<h3>AbdelRahman Fawzy</h3>
<p>Hay,You ara arrredted!</p>
</div>
<div class="timeConversation"><span>13:21</span></div>
<div class="buttonDelete"><button class="Delete">Delete</button></div>
</div>
<div class="users">
<div class="imageForUser">
<img class="imageUsers" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_01.jpg" style="width: 50px; height: 50px; border-radius: 50%;">
</div>
<div class="nameAndCapchn">
<h3>Ahmed Meshref</h3>
<p>Wanna grab a beer?</p>
</div>
<div class="timeConversation"><span>13:21</span></div>
<div class="buttonDelete"><button class="Delete">Delete</button></div>
</div>
<div class="users">
<div class="imageForUser">
<img class="imageUsers" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_02.jpg" style="width: 50px; height: 50px; border-radius: 50%;">
</div>
<div class="nameAndCapchn">
<h3>Mahmoud Ali</h3>
<p>Seen that canned piece ?</p>
</div>
<div class="timeConversation"><span>13:21</span></div>
<div class="buttonDelete"><button class="Delete">Delete</button></div>
</div>
<div class="users">
<div class="imageForUser">
<img class="imageUsers" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_03.jpg" style="width: 50px; height: 50px; border-radius: 50%;">
</div>
<div class="nameAndCapchn">
<h3>AbdelRahman Bl</h3>
<p>Im studying spanish...</p>
</div>
<div class="timeConversation"><span>13:21</span></div>
<div class="buttonDelete"><button class="Delete">Delete</button></div>
</div>
<div class="users">
<div class="imageForUser">
<img class="imageUsers" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_07.jpg" style="width: 50px; height: 50px; border-radius: 50%;">
</div>
<div class="nameAndCapchn">
<h3>Hamada Goda</h3>
<p>I'm not sure...</p>
</div>
<div class="timeConversation"><span>13:21</span></div>
<div class="buttonDelete"><button class="Delete">Delete</button></div>
</div>
<div class="users">
<div class="imageForUser">
<img class="imageUsers" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_09.jpg" style="width: 50px; height: 50px; border-radius: 50%;">
</div>
<div class="nameAndCapchn">
<h3>Omar Mahmoud</h3>
<p> Hi, wanna see something?</p>
</div>
<div class="timeConversation"><span>13:21</span></div>
<div class="buttonDelete"><button class="Delete">Delete</button></div>
</div>
<div class="users">
<div class="imageForUser">
<img class="imageUsers" src="https://clarity-enhanced.net/wp-content/themes/clarity-enhanced/assets/img/bootstrap-chat-app-assets/rick.jpg" style="width: 50px; height: 50px; border-radius: 50%;">
</div>
<div class="nameAndCapchn">
<h3>Taher Ashraf</h3>
<p>Hay,You ara arrredted!</p>
</div>
<div class="timeConversation"><span>13:21</span></div>
<div class="buttonDelete"><button class="Delete">Delete</button></div>
</div>
<div class="users">
<div class="imageForUser">
<img class="imageUsers" src="https://clarity-enhanced.net/wp-content/themes/clarity-enhanced/assets/img/bootstrap-chat-app-assets/rick.jpg" style="width: 50px; height: 50px; border-radius: 50%;">
</div>
<div class="nameAndCapchn">
<h3>AbdelRahman Hassan</h3>
<p>Wanna grab a beer?!</p>
</div>
<div class="timeConversation"><span>13:21</span></div>
<div class="buttonDelete"><button class="Delete">Delete</button></div>
</div>
<div class="users">
<div class="imageForUser">
<img class="imageUsers" src="https://clarity-enhanced.net/wp-content/themes/clarity-enhanced/assets/img/bootstrap-chat-app-assets/termy.jpg" style="width: 50px; height: 50px; border-radius: 50%;">
</div>
<div class="nameAndCapchn">
<h3>Ahmed Reda</h3>
<p>Hay,You ara arrredted!</p>
</div>
<div class="timeConversation"><span>13:21</span></div>
<div class="buttonDelete"><button class="Delete">Delete</button></div>
</div>
<div class="users">
<div class="imageForUser">
<img class="imageUsers" src="https://clarity-enhanced.net/wp-content/themes/clarity-enhanced/assets/img/bootstrap-chat-app-assets/real-terminator.png" style="width: 50px; height: 50px; border-radius: 50%;">
</div>
<div class="nameAndCapchn">
<h3>Amed Opied</h3>
<p>Hay,You ara arrredted!</p>
</div>
<div class="timeConversation"><span>13:21</span></div>
<div class="buttonDelete"><button class="Delete">Delete</button></div>
</div>
</div>
</div>
<div class="rightChat">
<div class ="header">
<div class="leftContentForImage">
<img class="myImgForReda" src="https://clarity-enhanced.net/wp-content/themes/clarity-enhanced/assets/img/bootstrap-chat-app-assets/robocop.jpg">
</div>
<div class="forContent" style="padding: 0 8px; width: calc(100% - 50px)">
<div class="another" style="display: flex; justify-content: space-between;">
<h3>AbdelRahman Fawzy</h3>
<div class="forFeatures">
<span class="icon"><i class='fas fa-phone-alt'></i></span>
<span class="icon" style="margin-left: 15px"><i class='fas fa-comment-alt'></i></span>
<span class="icon" style="margin-left: 15px"><i class='fas fa-video'></i></span>
</div>
</div>
<p style="margin-top: 3px; color:gray; font-size: 15px;">Layin' down the law since like before Christ...</p>
</div>
</div>
<div id="contenerMessages">
<div class="messages">
<div class="messageSender">
<div class="myImage"><img src="https://clarity-enhanced.net/wp-content/themes/clarity-enhanced/assets/img/bootstrap-chat-app-assets/filip.jpg"></div>
<div class="message-content">
<span>Hello AbelRahman
Layin' down the law since like before Christ...
Layin' down the law since like before Christ...
</span>
</div>
</div>
<div class="messageRecever">
<div class="myImage"><img src="https://clarity-enhanced.net/wp-content/themes/clarity-enhanced/assets/img/bootstrap-chat-app-assets/robocop.jpg"></div>
<div class="message-content">
<span>Hello Mohamed
Layin' down the law since like before Christ...
Layin' down the law since like before Christ...
Layin' down the law since like before Christ...
Layin' down the law since like before Christ...
</span>
</div>
</div>
</div>
</div>
<div class="write_message">
<i class='far fa-smile'></i>
<input id= 'myInput' placeholder="Type Your Message here.....">
<i class='fas fa-microphone'></i>
<button id="myButton" ><i class='fas fa-play'></i></button>
</div>
</div>
<!--<script src="jquery-3.4.1.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="chat.JS"></script>
</body>
</html>* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: #0099cc;
font-family: 'Roboto', sans-serif;
}
.contener{
width: 1100px;
height: 600px;
max-height: 1000px;
background-color: #FFF;
margin: 50px auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
display: flex;
box-sizing: border-box;
position: relative;
max-height: 1000px;
}
.contener .leftChat
{
width: 30%;
height: 100%;
border-right: solid 1px red; /* #595959;*/
box-sizing: border-box;
}
.contener .leftChat .header
{
width: 100%;
height: auto;
background: #eae6e6;
display: flex;
flex-direction:row;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
padding: 15px 10px;
}
.contener .leftChat .header .myImage .redaImage
{
width: 50px;
height: 50px;
border-radius: 50%;
flex-grow: 1;
}
.contener .leftChat .header .myImage image{
width: 100%;
height: 100%;
}
.contener .leftChat .header h3
{
margin: 5px;
font-size: 17px;
color: #423939;
flex-grow: 1;
}
.contener .leftChat .header .forFeatures
{
margin-top: 5px;
}
.fa-bars:hover , .fa-retweet:hover , .fa-cog:hover
{
color:#009dcc ;
}
.contener .leftChat .search
{
width: 100%;
background: #e4d2d2;
display: flex;
padding: 10px;
padding-left: 5px;
}
.searchInput
{
width: 600px;
border-radius: 25px;
border-width: 0;
padding: 9px;
}
.contener .leftChat #onlineUsers
{
width: 100%;
height: auto;
min-height: 460px;
max-height: 460px;
overflow-y: auto;
direction: rtl;
}
.contener .leftChat .users
{
width: 100%;
height: auto;
background: #DDD;
display: flex;
padding: 10px;
position: relative;
margin-top: 7px;
direction: ltr;
}
hr
{
margin: 5px auto;
width: 60%;
}
.contener .leftChat .users:hover
{
/*background-color:#009dcc;
color: #FFF;*/
cursor: pointer;
}
.contener .leftChat .users .buttonDelete .Delete
{
position: absolute;
top: 33px;
right: 7px;
width: 57px;
padding: 5px 3px;
background: #ca1010;
color: #FFF;
border: none;
font-weight: bold;
cursor: pointer;
outline: none;
border-radius:5px;
}
.contener .leftChat .users .nameAndCapchn
{
margin: 3px 15;
}
.contener .leftChat .users .nameAndCapchn h3
{
font-size: 15px;
color : #423939;
margin:5px;
}
.contener .leftChat .users .nameAndCapchn p
{
margin-top: 5px;
color: grey;
font-size: 14px;
margin:5px;
}
.contener .leftChat .users .timeConversation
{
margin-left: 30px;
font-size: 13px;
}
.contener .rightChat
{
width: 70%;
height: 100%;
box-sizing: border-box;
position: relative;
}
.contener .rightChat .header
{
width: 100%;
height: auto;
background-color: #eae6e6;
display: flex;
flex-direction:row;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
padding: 15px 10px;
}
.contener .rightChat .header .leftContentForImage .myImgForReda
{
width: 50px;
height: 50px;
border-radius: 50%;
}
.contener .rightChat .header h3
{
font-weight: bold;
color: #423939;
font-size: 17px;
}
.contener .rightChat .header .capshn
{
position: absolute;
top: 20px;
left: 70px;
color: gray;
font-size: 15px;
}
.icon {
color: gray;
font-size: 18px;
cursor: pointer;
margin: 7px;
}
#contenerMessages
{
min-height: 460px;
max-height: 460px;
overflow-y: auto;
background-image: url("https://lh3.googleusercontent.com/MWDK33g6g-Y36qZxtWpyKUlZ0iAGW5PKpQJw2KiK1s-Hw5cKnHs4diqTX3gZYxPZlGT_cmV0X8FaPK4dqihHpfmfA7oGGBMmJylAbahByvtl9eEOKOvlBMSM5puWRtFZiCpTU-bwoqwgIsgjJ_j8IgKjtQB92Y2vlpMuKKLXjVwfkFnsK-xbi8VFyAL-pNi_ZSX4ljrwlbjsvGpOJsHnLk3DHPuaK-0nPy3MFIGd5XsTJkeqOuTbjAUN9gYrDuU4W4GI7SVxmF3C6kpayPeVTxkIQYXX0h167hB9ikUNLkE8macSA9tUHi2dpHBauxnPv_-iyLRT3sWjDJE9w0B94uE_xq6n2r1jZ7bjsexBP3XyddmQNdZGne-xSQGh4-Njiz1jkv4YsQ79cUrbwaeupj_e-4D_SEwmk_zRyDWtU7e-nkgL8ZuxrKE_ZwV651piLTtfrwFTgOs55yvedVx3xCLjYUIh41UbHb86qJ1i3-gM-jFVQZ-_cxSZO4pBiLlUAvPavcoDYv1zLX9bfcPr5wHzdfh9bbxthbDh9EALn01sGgCVDORqo_NpSN5We858eSJFsyNtYbf0OaeicvCkJXK5AG7GokkbNRr7zFT_kyu3yWfH1tw-tyn435HY2KQ748HuK-H5GqX_Q8j4uR3smqwGVpQoywPqGDmpNPsAW7shkcAHCJgvAYEytbB6cA=w388-h689-no");
background-repeat: no-repeat;
background-size: 100%;
}
.messages
{
width: 100%;
box-sizing: border-box;
}
.rightChat .messages .messageSender , .messageRecever
{
display: flex;
padding: 10px;
}
.messageRecever
{
display: flex;
justify-content: flex-end;
}
.rightChat .messages .myImage
{
display: flex;
align-items: flex-end;
}
.rightChat .messages .message-content
{
background-color:#eae6e6;
width: 320px;
height: auto;
box-sizing: border-box;
color: #525151;
font-family: Arial, Helvetica, sans-serif;
display: flex;
border-radius: 10px;
border-bottom-right-radius: 0;
margin-left: 10px;
padding: 10px;
}
.rightChat .messages .messageRecever .message-content
{
background-color:#009dcc;
color: #FFF;
border-radius: 10px;
border-bottom-right-radius: 0;
opacity: 0.9;
}
.rightChat .messages img
{
width: 50px;
height: 50px;
border-radius: 50%;
}
.write_message
{
width: 100%;
height: 60px;
background-color: #eae6e6;
position: absolute;
bottom: 1px;
display: flex;
}
.fa-smile,.fa-microphone
{
font-size: 30px;
padding: 15px;
color: gray;
cursor: pointer;
}
.fa-microphone
{
margin-left: 10px
}
.fa-smile:hover , .fa-microphone:hover
{
color: gray;
}
#myInput
{
height: 40px;
margin-top: 10px;
width: 600px;
border-radius: 25px;
border-width: 0;
padding: 10px;
}
input:focus
{
outline: none;
}
#myButton
{
width: 30px;
height: 30px;
margin: 15px;
background: none;
border-width: 0;
outline: none;
}
.fa-play
{
font-size: 33px;
margin: -3px -7px;
color: gray;
cursor: pointer;
}
.clear_right
{
clear: right;
}
#demo
{
margin-left: 10px;
}
#demo2
{
float: right;
margin-right: 10px;
}
.myDiv
{
width: 500px;
height: 200px;
box-sizing: border-box;
background: red
}var myButton = document.getElementById("myButton");
var myInput = document.getElementById("myInput");
var demo = document.getElementById("demo");
var demo2= document.getElementById("demo2");
var contenerMessages =document.getElementById("contenerMessages");
myButton.onclick = function() {
if(myInput.value!="")
{
contenerMessages.innerHTML += `
<div class="messages">
<div class="messageSender">
<div class="myImage"><img src="https://clarity-enhanced.net/wp-content/themes/clarity-enhanced/assets/img/bootstrap-chat-app-assets/filip.jpg"></div>
<div class="message-content">
<span>${myInput.value}
</span>
</div>
</div>
<div class="messageRecever">
<div class="myImage"><img src="https://clarity-enhanced.net/wp-content/themes/clarity-enhanced/assets/img/bootstrap-chat-app-assets/robocop.jpg"></div>
<div class="message-content">
<span>${"Hello"}</span>
</div>
</div>
</div>
<div>
`
myInput.value="";
}
}
var onlineUsers = document.getElementById("onlineUsers");
removeButton = document.getElementsByClassName("Delete");
onlineUsers.onclick = function() {
if(event.target.className == "Delete")
{
$(event.target.parentElement.parentElement).fadeOut("slow");
//event.target.parentElement.parentElement.fadeOut("slow");
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.