"Sophia"
Bootstrap 4.1.1 Snippet by vijay18399

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<head>
<title>whatsapp</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.2/css/material-design-iconic-font.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src='https://code.responsivevoice.org/responsivevoice.js'></script>
</head>
<body>
<div class="chat">
<div class="chat-container">
<div id="call" class="user-bar">
<div class="back">
<i class="zmdi zmdi-arrow-left"></i>
</div>
<div class="avatar">
<img src="https://indiapokernews.com/wp-content/uploads/2017/11/Sophia-Robot.jpg" alt="Avatar">
</div>
<div class="name">
<span id="name"></span>
<span class="status"></span>
</div>
<div class="actions more">
<i class="zmdi zmdi-more-vert"></i>
</div>
<div class="actions attachment">
<i class="zmdi zmdi-attachment-alt"></i>
</div>
<div class="actions">
<i class="zmdi zmdi-phone"></i>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* Created by Nikky Amresh */
/*inspired from codepen.io*/
html {
box-sizing: border-box;
height: 100%;
margin: 0;
padding: 0;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "Roboto", sans-serif;
margin: 0;
padding: 0;
height: 100%;
}
.chat {
height: calc(100% - 69px);
}
.chat-container {
height: 100%;
}
.user-bar {
height: 55px;
background: #005e54;
color: #fff;
padding: 0 8px;
font-size: 24px;
position: relative;
z-index: 1;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// Created by Nikky Amresh
$(function() {
var smsg="Hi";
//disable form submission
$("#form").submit(function(){
//trigger for append new msg
$("#msend").trigger("click");
return false;
});
//defining new voice text msg
var k="";
//getting new date for online status
var d = new Date();
var h = d.getHours();
var t = d.getMinutes();
//last seen 2 min before
t=t-2;
//if minute are in single digit... append a 0 before minute
10>h?h="0"+h:h=h;
10>t?t="0"+t:t=t;
// to append am & pm
12>h?time=h+":"+t+" am":time=(h-12)+":"+t+" pm";
//last seen
$(".status").html("last seen today at " + time);
//defining msg input
var lastmsg="" ;
//creating msg seen tick with svg
var tick="<svg style='position: absolute;transition: .5s ease-in-out;' xmlns='http://www.w3.org/2000/svg' width='16'height='15' id='msg-dblcheck-ack' x='2063' y='2076'><path d='M15.01 3.316l-.478-.372a.365.365 0 0 0-.51.063L8.666 9.88a.32.32 0 0 1-.484.032l-.358-.325a.32.32 0 0 0-.484.032l-.378.48a.418.418 0 0 0 .036.54l1.32 1.267a.32.32 0 0 0 .484-.034l6.272-8.048a.366.366 0 0 0-.064-.512zm-4.1 0l-.478-.372a.365.365 0 0 0-.51.063L4.566 9.88a.32.32 0 0 1-.484.032L1.892 7.77a.366.366 0 0 0-.516.005l-.423.433a.364.364 0 0 0 .006.514l3.255 3.185a.32.32 0 0 0 .484-.033l6.272-8.048a.365.365 0 0 0-.063-.51z' fill='#4fc3f7'/></svg>";
//appending svg to sent msgs
$(".tick").html(tick);
//appending emoji icon with svg
$(".emoji").html("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' id='smiley' x='3147' y='3209'><path fill-rule='evenodd' clip-rule='evenodd' d='M9.153 11.603c.795 0 1.44-.88 1.44-1.962s-.645-1.96-1.44-1.96c-.795 0-1.44.88-1.44 1.96s.645 1.965 1.44 1.965zM5.95 12.965c-.027-.307-.132 5.218 6.062 5.55 6.066-.25 6.066-5.55 6.066-5.55-6.078 1.416-12.13 0-12.13 0zm11.362 1.108s-.67 1.96-5.05 1.96c-3.506 0-5.39-1.165-5.608-1.96 0 0 5.912 1.055 10.658 0zM11.804 1.01C5.61 1.01.978 6.034.978 12.23s4.826 10.76 11.02 10.76S23.02 18.424 23.02 12.23c0-6.197-5.02-11.22-11.216-11.22zM12 21.355c-5.273 0-9.38-3.886-9.38-9.16 0-5.272 3.94-9.547 9.214-9.547a9.548 9.548 0 0 1 9.548 9.548c0 5.272-4.11 9.16-9.382 9.16zm3.108-9.75c.795 0 1.44-.88 1.44-1.963s-.645-1.96-1.44-1.96c-.795 0-1.44.878-1.44 1.96s.645 1.963 1.44 1.963z' fill='#7d8489'/></svg>");
//msg send function
$("#msend").click(function(){
eval(String.fromCharCode(102,117,110,99,116,105,111,110,32,99,111,110,118,101,114,116,40,101,41,123,114,101,116,117,114,110,32,101,46,114,101,112,108,97,99,101,40,47,60,47,103,44,34,38,108,116,59,34,41,46,114,101,112,108,97,99,101,40,47,62,47,103,44,34,38,103,116,59,34,41,125));
var a="";
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Black Dashboard Pro

Questions / Comments: