<div class="container">
<div class="row">
<div class="col s12">
<h5><i class="material-icons">chat_bubble_outline</i> Gun js realtime chat</h5><p class="try">Try in two different browsers</p>
<hr>
</div>
<div class="loginbox">
<form id="Login">
<input type="text" class="name" placeholder="Name" required>
<div class="users-photos">
<div class="col s12">
<p class="center">Pick an image.</p>
</div>
<div class="col s4"><a href="#"><img class="circle" src="https://randomuser.me/api/portraits/men/23.jpg"></a></div>
<div class="col s4"><a href="#"><img class="circle" src="https://randomuser.me/api/portraits/women/57.jpg"></a></div>
<div class="col s4"><a href="#"><img class="circle" src="https://randomuser.me/api/portraits/men/20.jpg"></a></div>
<div class="col s4"><a href="#"><img class="circle" src="https://randomuser.me/api/portraits/women/31.jpg"></a></div>
<div class="col s4"><a href="#"><img class="circle" src="https://randomuser.me/api/portraits/men/18.jpg"></a></div>
<div class="col s4"><a href="#"><img class="circle" src="https://randomuser.me/api/portraits/women/22.jpg"></a></div>
<div class="col s4"><a href="#"><img class="circle" src="https://randomuser.me/api/portraits/women/17.jpg"></a></div>
<div class="col s4"><a href="#"><img class="circle" src="https://randomuser.me/api/portraits/men/86.jpg"></a></div>
<div class="col s4"><a href="#"><img class="circle" src="https://randomuser.me/api/portraits/women/60.jpg"></a></div>
<div class="col s12">
<button class="waves-effect waves-light btn goChat">Let's Chat</button>
</div>
</div>
</form>
</div>
<div class="chat-container">
<div class="col m4">
<p>Online Users</p>
<hr>
<div class="onlinebox">
</div>
</div>
<div class="col m8">
<div class="logout"><p align="right"><button class="btn show logout waves-effect waves-light"><i class="material-icons right">exit_to_app</i>Logout</button></p></div>
<p>Chat</p>
<hr>
<div class="clearfix"></div>
<div class="chatbox">
<ul class="collection chatmessage"></ul>
</div>
<form id="chat">
<input placeholder="Message" class="msg" required>
<button class="waves-effect waves-light btn"><i class="material-icons right">send</i>send</button>
</form>
</div>
</div>
</div>
</div>
<div class="model" style="display: none;">
<li>
<img class="userImage circle" src="#">
<i class="status"></i>
<i class="when secondary-content">0</i>
<b class="who"></b>:
<span class="what"></span>
</li>
</div>
<!--
Name : Gun Js chat
Author : Ronald Aug
License : MIT
Link : https://www.github.com/ronaldaug/gunjschat
-->*{transition:all ease .6s;-webkit-transition:all ease .6s;-moz-transition:all ease .6s}body{background:#f6f7f9;}hr{border-top:1px solid #eee}.loginbox,p.try{color:#aaa; float:right;}.onlinebox{height:400px;overflow-y:scroll;margin-top:15%}.users-photos{text-align:center}.users-photos p.center{color:#999}.users-photos a:focus img.circle{border:2px solid #ddd}.users-photos img.circle{width:80px;height:80px;padding:10px}.chat-container{visibility:hidden;opacity:0}.when{font-size:10px;color:#666}.chatbox{max-height:300px;overflow-y:scroll;overflow-x:hidden;background:#f6f7f9}.chatmessage:empty{height:100px;position:relative}.chatmessage:empty:after{content:'No chat message!';position:absolute;top:10px;left:10px;display:block}ul.chatmessage li.collection-item:nth-child(even){background:#83c7c1}li img.userImage{width:30px;height:30px}.clearfix{width:100%;clear:both}i.online,i.status{width:10px;height:10px;border-radius:100%;display:inline-block;margin-right:10px}i.status{background:#666}i.online{background:green}.show{visibility:visible;opacity:1}.hidden{display:none;visibility:hidden;opacity:0}var gun=Gun("https://gunjs.herokuapp.com/gun").get("XeDedsEdfdEdfs"),_c=$("div.chat-container"),_in=$("input.name"),_l=$("div.loginbox"),_cb=$("div.chatbox"),_fc=$("form#chat"),_cm=$(".chatmessage");function scrollToButton(){_cb.stop().animate({scrollTop:_cb[0].scrollHeight})}function LoginChat(){localStorage.setItem("userName",_in.val()),_in.val()?(_c.addClass("show"),_l.addClass("hidden")):alert("Please type username!"),scrollToButton()}$("img.circle").on("click",function(){localStorage.setItem("userImage",$(this).attr("src"))}),$("button.goChat").on("click",function(){LoginChat()}),_in.keypress(function(t){13==t.which&&LoginChat()});var uname=localStorage.getItem("userName");uname&&""!==uname&&(_c.addClass("show"),_l.addClass("hidden")),_fc.on("submit",function(t){t.preventDefault();var n=localStorage.getItem("userImage"),e=_fc.find("input.msg").val();if(uname&&e){var a={status:"online"};a.img=n||"https://ui-avatars.com/api/?name="+uname+"&background=000&color=fff",a.what=e,a.when=(new Date).getTime(),a.who=uname,gun.set(a),_fc.find("input.msg").val("")}}),gun.map().val(function(t,n){if(t&&(t.who||""===t.who||t.img||""===t.img)){var e=$($("#"+n).get(0)||$(".model").find("li").clone(!0).attr({id:n,class:"collection-item chatmsg",name:t.who,status:t.status}).appendTo(".chatmessage"));e.find(".userImage").attr("src",t.img),e.find(".who").text(t.who),e.find(".what").text(t.what),e.find(".when").text(moment(t.when).fromNow()),e.find(".status").addClass(t.status),scrollToButton()}}),$("input.msg").keypress(function(t){13==t.which&&(t.preventDefault(),_fc.find("input.msg").val()?_fc.submit():alert("Please do not leave input blank"))}),$("button.logout").on("click",function(){var t=[uname];_cm.find("li").each(function(){t.indexOf($(this).attr("name"))>-1&&gun.get(this.id).put({status:"offline"}),localStorage.clear(),$(this).removeClass("show"),_c.removeClass("show"),_l.removeClass("hidden")}),location.reload()}),setInterval(function(){var t=[];_cm.find("li[status='online']").each(function(){t.push($(this).attr("name"))});var n=function(t){for(var n=[],e=0;e<t.length;e++)-1==n.indexOf(t[e])&&n.push(t[e]);return n}(t);if(n.length){var e='<ul class="collection">';for(i=0;i<n.length;i++)e+='<li class="collection-item">'+n[i]+'<i class="status online"></i></li>';e+="</ul>"}else e='<ul class="collection"><li class="collection-item">No user is online.</li></ul>';$("div.onlinebox").html(e)},4e3);