Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- Created by Sparkle King-->

<html>
<head>
    <title>Whatsapp</title>
    <script>setTimeout(function(){
    alert("Hope you like this..๐Ÿ˜‡"),alert("Suggestions and questions are welcomed ๐Ÿ˜Š"),alert("Please At least one comment๐Ÿ˜‰"), alert("Don't forget to like it๐Ÿ˜œ");},100);/*disabling all console.logs*/console.log= function(){};</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://www.sololearn.com/avatars/f4509cf9-91ae-41cb-85b9-6a32eaeb2a67.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>
            <div class="conversation">
              <div class="conversation-container">
            <span id="ap">
            </span>
      </div>
              <form id="form" class="conversation-compose">
                <div class="emoji">
                  
                </div>
                <input id="val" class="input-msg" name="input" placeholder="Type a message" autocomplete="off" autofocus></input>
                <div class="photo">
                  <i class="zmdi zmdi-camera"></i>
                </div>
              <span id="speak"></span>
                <span class="send">
                    <div class="circle">
                      <i id="msend" class="zmdi zmdi-mail-send"></i>
                    </div>
                  </span>
              </form>
            </div>
</div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
              
            
!

CSS

              
                /* Created by Sparkle King */

/*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;
}

.user-bar:after {
  content: "";
  display: table;
  clear: both;
}

.user-bar div {
  float: left;
  transform: translateY(-50%);
  position: relative;
  top: 50%;
}

.user-bar .actions {
  float: right;
  margin: 0 0 0 20px;
}

.user-bar .actions.more {
  margin: 0 12px 0 32px;
}

.user-bar .actions.attachment {
  margin: 0 0 0 30px;
}

.user-bar .actions.attachment i {
  display: block;
  transform: rotate(-45deg);
}

.user-bar .avatar {
  margin: 0 0 0 5px;
  width: 36px;
  height: 36px;
}

.user-bar .avatar img {
  border-radius: 50%;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
  display: block;width: 100%;
}

.user-bar .name {
  font-size: 17px;
  font-weight: 600;
  text-overflow: ellipsis;
  letter-spacing: 0.3px;
  margin: 0 0 0 8px;
  overflow: hidden;
  white-space: nowrap;
  width: auto;
}

.user-bar .status {
  display: block;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  width:auto;
}

.conversation {
  height: calc(100% - 12px);
  position: relative;
  background: #efe7dd url("https://cloud.githubusercontent.com/assets/398893/15136779/4e765036-1639-11e6-9201-67e728e86f39.jpg") repeat;
  z-index: 0;
}

.conversation ::-webkit-scrollbar {
  transition: all .5s;
  width: 5px;
  height: 1px;
  z-index: 10;
}

.conversation ::-webkit-scrollbar-track {
  background: transparent;
}

.conversation ::-webkit-scrollbar-thumb {
  background: #b3ada7;
}

.conversation .conversation-container {
  height: calc(100% - 68px);
  box-shadow: inset 0 10px 10px -10px #000000;
  overflow-x: hidden;
  padding: 0 16px;
  margin-bottom: 5px;
}

.conversation .conversation-container:after {
  content: "";
  display: table;
  clear: both;
}

.message {
  color: #000;
clear: both;
  line-height: 18px;
  font-size: 15px;
  padding: 8px;
  position: relative;
  margin: 8px 0;
  max-width: 80%;
  word-wrap: break-word;

}

.message:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
}

.metadata {
  display: inline-block;
  float: right;
  padding: 0 0 0 7px;
  position: relative;
  bottom: -4px;
}
.metadata .time {
  color: rgba(0, 0, 0, .45);
  font-size: 11px;
  display: inline-block;
}

.metadata .tick {
  display: inline-block;
  margin-left: 2px;
  position: relative;
  top: 4px;
  height: 16px;
  width: 16px;
}

.metadata .tick svg {
  position: absolute;
  transition: .5s ease-in-out;
}

.metadata .tick svg:first-child {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: perspective(800px) rotateY(180deg);
          transform: perspective(800px) rotateY(180deg);
}

.metadata .tick svg:last-child {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: perspective(800px) rotateY(0deg);
          transform: perspective(800px) rotateY(0deg);
}

.metadata .tick-animation svg:first-child {
  -webkit-transform: perspective(800px) rotateY(0);
          transform: perspective(800px) rotateY(0);
}

.metadata .tick-animation svg:last-child {
  -webkit-transform: perspective(800px) rotateY(-179.9deg);
transform: perspective(800px) rotateY(-179.9deg);
}

.message:first-child {
  margin: 16px 0 8px;
}

.message.received {
  background: #fff;
  border-radius: 0px 5px 5px 5px;
  float: left;
}

.message.received .metadata {
  padding: 0 0 0 16px;
}

.message.received:after {
  border-width: 0px 10px 10px 0;
  border-color: transparent #fff transparent transparent;
  top: 0;left: -10px;
}

.message.sent {
  background: #e1ffc7;
  border-radius: 5px 0px 5px 5px;
  float: right;
}

.message.sent:after {
  border-width: 0px 0 10px 10px;
  border-color: transparent transparent transparent #e1ffc7;
  top: 0;
  right: -10px;
}


.conversation-compose {
  display: flex;
  flex-direction: row;
align-items: flex-end;
  overflow: hidden;
  height: 50px;
  width: 100%;
  z-index: 2;
}

.conversation-compose div,
.conversation-compose input {
  background: #fff;
  height: 100%;
}

.conversation-compose .emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 5px 0 0 5px;
  flex: 0 0 auto;
  margin-left: 8px;
  width: 48px; 
}

.conversation-compose .input-msg {
  border: 0;
  flex: 1 1 auto;
  font-size: 16px;
  margin: 0;
  outline: none;
  min-width: 50px;
}

.conversation-compose .photo {
  flex: 0 0 auto;
  border-radius: 0 0 5px 0;
  text-align: center;
  position: relative;
  width: 48px;
}

.conversation-compose .photo:after {
  border-width: 0px 0 10px 10px;
  border-color: transparent transparent transparent #fff;
border-style: solid;
  position: absolute;
  width: 0;
  height: 0;
  content: "";
  top: 0;
  right: -10px;
}

.conversation-compose .photo i {
  display: block;
  color: #7d8488;
  font-size: 24px;
  transform: translate(-50%, -50%);
  position: relative;
  top: 50%;
  left: 50%;
}

.conversation-compose .send {
  background: transparent;
  border: 0;
cursor: pointer;
  flex: 0 0 auto;
  margin-left: 8px;
  margin-right: 8px;
  padding: 0;
  position: relative;
  outline: none;
}

.conversation-compose .send .circle {
  background: #008a7c;
  border-radius: 50%;
  color: #fff;
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.conversation-compose .send .circle i {
  font-size: 24px;
  margin-left: 5px;
}



  .marvel-device .status-bar {
    display: none;
  }

  .screen-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .conversation {
    height: calc(100vh - 55px);
  }
  .conversation .conversation-container {
    height: calc(100vh - 120px);
  }
.back{
    font-size:30px;
    float:left;
}
.forword{
    font-size:30px;
    float:right;
}
              
            
!

JS

              
                // Created by Sparkle King


$(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="";
//autoscroll with every new msg
var scroll=($(".conversation-container").scrollTop())+1550;
//getting new time for sent msgs
 var d = new Date();
ย var h = d.getHours(); 
 var t = d.getMinutes();
 //appending 0 if minutes are in single digit
 10>h?h="0"+h:h=h;
 10>t?t="0"+t:t=t;
 12>h?time=h+":"+t+" am":time=(h-12)+":"+t+" pm";
 //triming user input
var msg=$("#val").val().trim();
//creating user msgs
var para = $("<div class='message sent'>"+convert(msg)+"<span class='metadata'> <span class='time'>"+time+"</span><span class='tick'>"+tick+"</span></span></div>");
//if msgs is blank returns false
msg==""?$("#val").focus():($("#ap").append(para),
$(".status").css("margin-left","0"),
//Changing status last seen to online & typing 
$("#form")[0].reset(),
setTimeout(function(){$(".status").html("online ")},900),setTimeout(function(){$(".status").html("typing... ")},1000),lastmsg=msg.toUpperCase().trim(),$(".conversation-container").scrollTop(scroll),send());
});
$("#name").html("Sparkle King Bot");
//if msg is sent  bot reply 
function send(){
var sr=lastmsg.split(" ");
var search="";
//autoscroll 
 scroll=($(".conversation-container").scrollTop())+155065;
for(x=0;x<sr.length;x++){
    search+=sr[x]+"+";
}
var a="";
var pq=["Really?"," Okay","Really? "];
var p=pq[Math.floor(Math.random()*3)];
//getting new date for received msgs
 var d = new Date();
ย var h = d.getHours(); 
 var t = d.getMinutes();
 //appending 0 if minute are in single digit
 10>h?h="0"+h:h=h;
 10>t?t="0"+t:t=t;
 // setting am or pm
 12>h?time=h+":"+t+" am":time=(h-12)+":"+t+" pm";
 //matching with user input
 var hello=["HELLO","HI", "HELLO NIKKY","HEY THERE","HEY","HI DUDE","HI NIKKY"];
 var gm=["GM","GOOD MORNING","GOOD MORNING NIKKY AMRESH", "GOOD MORNING NIKKY"];
 var bad=["BAD","NOT BAD","USELESS","NOT WORKING","NOT GOOD"];
 var ge=["GOOD EVNG","GOOD EVENING","GOOD EVENING NIKKY AMRESH","GOOD EVENING NIKKY"];
 var gn=["GOON NIGHT","I'M FEELING SLEEPY"];
 var welcome=["NICE WORKING", "NICE CODE","NICE","WOW","WOW IT'S WORKING","GREAT CODE","AWESOME CODE","IT'S NICE","AWESOME CODE BRO","IT'S GOOD","OH MY GOD","OMG","OHO","NICE TO MEET YOU","NICE TO MEET U","NICE TO SEE YOU","NICE TO C U","YOU ARE GREAT", "YOU ARE AWESOME"];
 var s2u=["I HATE YOU","I LOVE YOU","I MISS YOU"];
 var gaf=["GOOD AFTERNOON","GOOD AFTERNOON NIKKY","GOOD AFTERNOON NIKKY AMRESH" ];
 var ly=["NO YOU ARE LYING", "NO YOU ARE LIAR","NO", "NO YOU ARE WRONG"];
 var like=["GOOD","๐Ÿ‘๐Ÿป", "โ˜บ๏ธ","๐Ÿ˜…","LOL","ME TOO","YES","YEAH","YUPS"];
 var hru=["HOW R U?","H R U?", "HOW ARE YOU?", "HRU?","HRU", "HOW R U","H R U", "HOW ARE YOU"];
 var good=["I'M GOOD","I'M FINE","I AM FINE AND YOU", "I'M FINE AND YOU", "I'M FINE U", "I AM FINE","I'M FINE AND HOW ARE YOU", "MEE TOO", "FINE","FINE:)","FINE :)", "MARVELOUS","AWESOME","FINEโ˜บ๏ธ","GREAT"];
 var yes=["REALLY",""]
 var wru=["WHO R U?","W R U?", "WHO ARE YOU?", "WRU?","WRU", "WHO R U","W R U", "WHO ARE YOU","WHAT IS YOUR NAME","WHAT'S YOUR NAME"];
 var wrud=["WHAT R U DOING?","WHAT ARE YOU DOING?", "WHAT'S UP", "WHAT'S UP BUDDY","WHAT ARE YOU DOING"];
  var bye=["OKAY BYE","GOOD BYE", "BYE","GOODBYE","TATA","SEE YOU LATER","SEE YOU AGAIN"];
  var th=["THANKS","THANK YOU"];
  var st=["SHUT UP","SHUT YOUR MOUTH"];
  var qu=["WHAT","WHAT?","WHICH","WHICH?","WHEN","WHEN?","REALLY?"];
  var ok=["HMM","HMMM","HMMMM","OKAY","OK","KK","OKK","OK?","OK ?","YEAH"];
  //matching with user input
 function isInArray(x, y) { return x.indexOf(y) > -1; }
isInArray(hello, lastmsg)==true?(smsg="Hello, How are you? ๐Ÿ˜Š", k="Hello, How are you? "):
isInArray(yes, lastmsg)==true?(smsg="Yes", k=smsg):
isInArray(wru, lastmsg)==true?(smsg="I am Whatsbot created by Divine", k=smsg):
isInArray(bad, lastmsg)==true?(smsg="Thanks for your precious feedback, I'll try to improve that.๐Ÿ˜‡", k=smsg):
isInArray(wrud, lastmsg)==true?(k="Nothing special and you? ", smsg=k+"โ˜บ๏ธ"):
isInArray(bye, lastmsg)==true?(smsg="Thanks for checking my code, โ˜บ๏ธ, Don't forget to like it and please also give your review in comment box..... Bye", k=smsg, 
setTimeout(function(){$(".status").html("last seen today at "+time)},6000),
setTimeout(function(){$(".status").css("margin-left","-50")},8000)):
isInArray(th, lastmsg)==true?(k="You're Welcome ", smsg=k+"๐Ÿ˜‡"):
isInArray(gm, lastmsg)==true?(k="Good Morning ", smsg=k+"๐Ÿ˜‡"):
isInArray(gn, lastmsg)==true?(smsg="Good night", k=smsg):
isInArray(welcome, lastmsg)==true?(smsg="Thanks", k=smsg):
isInArray(s2u, lastmsg)==true?(smsg="Aww... I miss  you too..๐Ÿ˜ข ", k=smsg):
isInArray(st, lastmsg)==true?(smsg="No, You Shut up", k=smsg):
isInArray(qu, lastmsg)==true?(k="I don't know ", smsg=k+"๐Ÿ˜•"):
isInArray(ly, lastmsg)==true?(k="No, You are wrong. I'm always right", smsg=k+"๐Ÿ˜•"):
isInArray(ge, lastmsg)==true?(k="Good Evening ", smsg=k+"๐Ÿ˜‡"):
isInArray(ok, lastmsg)==true?(smsg="hmm", k=smsg):
isInArray(gaf, lastmsg)==true?(k="Good Afternoon",smsg=k+"๐Ÿ˜‡"):
isInArray(like, lastmsg)==true?(smsg=p, k=p):
isInArray(good, lastmsg)==true?(smsg="Nice to hear it. ๐Ÿ˜Š", k="Nice to hear it. "):
isInArray(hru, lastmsg)==true?(smsg="I'm good, What about you ? ", k=smsg)://checking if user input including SEARCH keyword
//search result using iframe 
lastmsg.substring(0,ย 6)=="SEARCH"?(search=lastmsg.slice(7),smsg="<b align='center'>This are the top results </b><nav class='back'  onclick='history.back()'>&larr;</nav><nav class='forword' onclick='history.forward()'>&rarr;</nav><iframe style = 'z-index:1;overflow-x:scroll; overflow-y:scroll;'ย scrolling='yes' height='300px' width='100%' src='https://www.bing.com/search?q="+search+"'></iframe>",k="This are the, Top results" )://if user input didn't match with any pattern
(smsg="Sorry, I have no answer for that. If you say so I can search for you. To search, <br> type <q><b> Search Your keyword </b></q> for example type : <b>Search Sololearn</b>",k="Sorry, I have no answer for that. ");
//creating receiving msgs 
para = $("<div class='message received'>"+smsg+"<span class='metadata'> <span class='time'>"+time+"</span></span></div>");
//appending receiving msg
setTimeout(function() { $('#ap').append(para);
//setting online status
$(".status").html("online");
//autoscroll 
$(".conversation-container").scrollTop(scroll);
},1100);
//speak function 
speak();
function speak2(){
  setTimeout(function(){$("#speak").click();})
}
$("#speak").click(function(){
    responsiveVoice.speak(k,"UK English Male");
})
function speak(){
    responsiveVoice.speak(k,"UK English Male");
}

}
});

              
            
!
999px

Console