<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<body>
<div class="col-sm-3 col-sm-offset-4 frame">
<ul></ul>
<div>
<div class="msj-rta macro" style="margin:auto">
<div class="text text-r" style="background:whitesmoke !important">
<input class="mytext" placeholder="Type a message"/>
</div>
</div>
</div>
</div>
</body>
</html>
.mytext{
border:0;padding:10px;background:whitesmoke;
}
.text{
width:75%;display:flex;flex-direction:column;
}
.text > p:first-of-type{
width:100%;margin-top:0;margin-bottom:auto;line-height: 13px;font-size: 12px;
}
.text > p:last-of-type{
width:100%;text-align:right;color:silver;margin-bottom:-7px;margin-top:auto;
}
.text-l{
float:left;padding-right:10px;
}
.text-r{
float:right;padding-left:10px;
}
.avatar{
display:flex;
justify-content:center;
align-items:center;
width:25%;
float:left;
padding-right:10px;
}
.macro{
margin-top:5px;width:85%;border-radius:5px;padding:5px;display:flex;
}
.msj-rta{
float:right;background:whitesmoke;
}
.msj{
float:left;background:white;
}
.frame{
background:#e0e0de;
height:450px;
overflow:hidden;
padding:0;
}
.frame > div:last-of-type{
position:absolute;bottom:5px;width:100%;display:flex;
}
ul {
width:100%;
list-style-type: none;
padding:18px;
position:absolute;
bottom:32px;
display:flex;
flex-direction: column;
}
.msj:before{
width: 0;
height: 0;
content:"";
top:-5px;
left:-14px;
position:relative;
border-style: solid;
border-width: 0 13px 13px 0;
border-color: transparent #ffffff transparent transparent;
}
.msj-rta:after{
width: 0;
height: 0;
content:"";
top:-5px;
left:14px;
position:relative;
border-style: solid;
border-width: 13px 13px 0 0;
border-color: whitesmoke transparent transparent transparent;
}
input:focus{
outline: none;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #d4d4d4;
}
::-moz-placeholder { /* Firefox 19+ */
color: #d4d4d4;
}
:-ms-input-placeholder { /* IE 10+ */
color: #d4d4d4;
}
:-moz-placeholder { /* Firefox 18- */
color: #d4d4d4;
}
var me = {};
me.avatar = "https://lh3.googleusercontent.com/85iu3PPwSaMuS0tpDTuTdIBqZEAa8ondYU-C62_vhCKEUYz7RS_Yn9pmmighIkLVCv0grxM55m1xAi3xMQ5sheQVIcz2Y6zWWad9a3HmvmAsPVPjeViZM5B8EO--oWJR0rwIBfkHyQR9adJqa-DiVHIpIBXolAyrbX_IX3g7utQ_MJytOYFhXUMhTsX9V18ow6fb-keu84XmwSPSavvN6W3FZTl4pAMURfhHiPKoo1QQzRpKs5KN_qxBPv-6LqOanNi_H6gxIManW5VQJamM0Gz9U9mRJnyGQoKdziwOKjc7UHAmXtJ9L3qqwDZjySC8X7OS7nxsEp0eEk-I3L0uU4422Lq0nt7fxu9gA9o42HYYCEk8_Hbhj2FA3-4qSiB-LsaIYtRmT8hXXSuQk-SSAN2UezhvQET4M0gJnUyFY3x8UTg8wPJPCEmKJ8vK3MnN80bpsKzB3U70gkXGpsp4YzCDDEA8g9zDlhxeKFrQ-G4q92k-NUhlqxdJwEKm_N9q0jprKUDZP3Uep9glU2aaqAvCbLFPL0ZmsudaSgE5_MFlOaQgWO3uDvTFrOY9Rixr52OU7nPWzqkeHJ0QSU4NhDt6xxLTgdpLyBsA4ps9REw-pp4v5Vkh8xiN9IPIYJvNBC12m4xqrBwDc64Perra9wabZXXT118E0FZpgmazik8=w305-h386-no";
var you = {};
you.avatar = "https://lh3.googleusercontent.com/_h_5-y__Op8fIxGKdS8NUOw0f-3QIkTawsK-GVwaq1C_uDFpcyDvKjcDrtO-A9KB9O1gfI_6l-9VS2QGq7KpfXfcxHCD--FCtzcUHYTylbOn0a2fKFWcOmnkq91ZRjUOUVJZ5LvyCrEz08w6-E7HhNTkO7-i0A6KZTrNPoJff4xyHNh-qAd_-qOihOx-YYUfwpvQIivT1JvVXpnss8zuD9VBGf_PG7Nfcf0VmqfMPLZ_Gq1U2G254CZiaxjlAV5oxqSTv4Cbp56uaxGfgDsTor0Jb7GEpSUNDPuCoFEXM3Po9x75R0oPI3Zw5c9rEhxPBz2L67b8Lvlm4Bn8u3oJtH_6d5bag59S4XFVujGdhUHyOIprCKTjO8gJjEPzdDVWNeVZRA-m6Zjp5xPt0g_OLfFkQwE9sXy674In9UmJCvNTxtSUrcMAKcCVNvW8QWyUjyXsaREgPkWisbAU6Fd_yO2SG9H0Cu2RLBpL0oCnvIZXOsEJ4e6RIrkL3xTI10ToXBA2k9jPi7iWJgtpZxmpaR3LaqTc0efAIHNVAnYTlAfexUtdjYaGQwYOmnoorpKLj0rznUHLtFXgDiuJWDw370xYzk-UNFRAmZketZeTEbGB8QvlVuxuCDR67ODoWjR3ZTFxx3ty2ZCP6Z78TYNln_g2bbKJRtQASFIlLm3UhOo=w281-h327-no";
function formatAMPM(date) {
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0'+minutes : minutes;
var strTime = hours + ':' + minutes + ' ' + ampm;
return strTime;
}
//-- No use time. It is a javaScript effect.
function insertChat(who, text, time = 0){
var control = "";
var date = formatAMPM(new Date());
if (who == "me"){
control = '<li style="width:100%">' +
'<div class="msj macro">' +
'<div class="avatar"><img class="img-circle" style="width:100%;" src="'+ me.avatar +'" /></div>' +
'<div class="text text-l">' +
'<p>'+ text +'</p>' +
'<p><small>'+date+'</small></p>' +
'</div>' +
'</div>' +
'</li>';
}else{
control = '<li style="width:100%;">' +
'<div class="msj-rta macro">' +
'<div class="text text-r">' +
'<p>'+text+'</p>' +
'<p><small>'+date+'</small></p>' +
'</div>' +
'<div class="avatar" style="padding:0px 0px 0px 10px !important"><img class="img-circle" style="width:100%;" src="'+you.avatar+'" /></div>' +
'</li>';
}
setTimeout(
function(){
$("ul").append(control);
}, time);
}
function resetChat(){
$("ul").empty();
}
$(".mytext").on("keyup", function(e){
if (e.which == 13){
var text = $(this).val();
if (text !== ""){
insertChat("me", text);
$(this).val('');
}
}
});
//-- Clear Chat
resetChat();
//-- Print Messages
insertChat("me", "[Well This is very interesting...a sudden text!]", 0);
insertChat("you", "Hi! This is Mira, how are you?!", 1500);
insertChat("me", "[Dazed and confused.. looking at this unexpected text! I replied..]", 5500);
insertChat("me", "Mira from New Brunswich???", 10500);
insertChat("me", "[As I waited for her response which felt like a lifetime!, I could picture Mira rolling her eyes.. back and shrieking... “Ah… yeah?!?!.”]", 16000);
insertChat("me", "[A whole 10 minutes later]", 22500);
insertChat("you", "yes!", 32500);
insertChat("me", "[This simple text conversation turned into a stream of texts and eventually the next day we had what I like to call it ...the conversation of a lifetime!! We both connected instantaneously and our first conversation lasted for over 3 hours. Soon, we spoke everyday, sometimes multiple times a day for hours at a time. We spoke about everything, from hobbies and sports to which movies scared us the most. Our conversationsbecame second nature, as if we had known each other for our entire lives and beforewe knew we were inseparable.]", 42000);
//-- NOTE: No use time on insertChat.
