"tchat card"
Bootstrap 3.0.0 Snippet by MohamedSamiKhiari

<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 class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/tanjalehner/pen/bgzpQx?limit=all&page=91&q=contact+" /> <style class="cp-pen-styles">/* ------ GENERAl LAYOUT ------ */ * { font-family: 'Roboto', sans-serif; margin: 0px; padding: 0px; box-sizing: border-box; } body { background: #dbdbdb; } i { width: 60px; margin: auto; } /* ------ FONTS ------ */ .font-name { color: #000000; font-size: 1em; font-weight: inherit; padding-bottom: 3px; } .font-preview { color: #444444; font-size: 0.9em; font-weight: inherit; } .font-online { color: #777777; font-size: 0.8em; font-weight: inherit; } .green-background { background: #009688; height: 130px; width: 100%; position: fixed; top: 0; z-index: -100; } .wrap { display: flex; height: 100vh; min-width: 600px; max-width: 1200px; margin: auto; box-shadow: 0 2px 2px #aaaaaa; } /* ------ LEFT SIDE ------ */ .left { width: 400px; } .profile { width: 100%; height: 60px; background: #eeeeee; border-right: 1px solid #dbdbdb; display: flex; justify-content: space-between; } .profile img { width: 40px; height: 40px; margin: 10px; border-radius: 50%; } .icons { color: #777777; display: flex; } .wrap-search { width: 100%; height: 45px; background: #fbfbfb; display: flex; } .search { width: calc(100% - 20px); height: 30px; background: #ffffff; margin: auto; border: 1px solid #eeeeee; border-radius: 5px; display: flex; } .search i { widht: 60px; } .search i, .wrap-message i { color: #aaaaaa; text-align: center; } .input-search { width: 100%; border: none; } .input-search:focus { outline: none; } .contact-list { background-color: #ffffff; width: 100%; height: calc(100% - 105px); overflow-y: auto; } .contact, .active-contact, .new-message-contact { height: 70px; background-color: #ffffff; display: flex; } .contact img, .active-contact img, .new-message-contact img { width: 50px; height: 50px; margin: 10px; border-radius: 50%; } .active-contact { background-color: #ebebeb; } .contact:hover, .new-message-contact:hover { background-color: #f5f5f5; } .new-message-contact { font-weight: bold; } .contact-preview { width: 100%; height: 70px; border-bottom: 1px solid #eeeeee; display: flex; overflow: hidden; } .contact-text { height: 40px; margin: auto 0; overflow: hidden; } .contact-time { width: 55px; color: rgba(0,0,0,0.4); font-size: 0.8em; display: flex; flex-direction: column; justify-content: space-between; padding: 10px; border-bottom: 1px solid #eeeeee; } .new-message { background: #09d261; border-radius: 50%; width: 20px; height: 20px; display: flex; margin: auto; flex-direction: column; color: white; } .new-message p { margin: auto; } /* ------ RIGHT SIDE ------ */ .right { min-width: calc(100% - 400px); } .chat-head { background-color: #eeeeee; width: 100%; height: 60px; display: flex; } .chat-head img { width: 40px; height: 40px; margin: 10px; border-radius: 50%; } .chat-head i { color: #aaaaaa; width: 60px; margin: auto; text-align: center; } #close-contact-information { display: none; } .chat-name { width: 100%; margin: auto; } .wrap-chat { height: calc(100% - 120px); display: flex; } .chat { background-color: #e5ddd5; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1089577/background.png); width: 100%; padding: 0px 10%; padding-top: 7px; overflow-y: auto; } .information { width: 100%; position: relative; background: #f7f7f7; display: none; flex-direction: column; overflow: auto; } .information div { background: #ffffff; padding: 10px; margin-bottom: 20px; } .information img { width: 200px; height: 200px; margin: 20px auto; border-radius: 50%; float: left; } .information h1 { color: #009688; font-size: 14px; margin-bottom: 5px; } .listGroups { display: flex; margin: 0px !important; } .listGroups img { width: 40px; height: 40px; margin: 0px 10px 0px 0px; } .listGroups p { margin: auto 0px; } /* ------ CHAT ------ */ .chat-bubble { border-radius: 7px; box-shadow: 0 2px 2px rgba(0,0,0,0.05); padding: 5px 7px; width: 350px; max-width: 100%; position: relative; } .you { background: #ffffff; margin: 0px auto 10px 0px; } .me { background: #dcf8c6; margin: 0px 0px 10px auto; } .your-mouth { width: 0; height: 0; border-bottom: 10px solid white; border-left: 10px solid transparent; position: absolute; bottom: 10px; left: -10px; } .my-mouth { width: 0; height: 0; border-bottom: 10px solid #dcf8c6; border-right: 10px solid transparent; position: absolute; bottom: 10px; left: 100%; } .content { margin: 0.5em 0; line-height: 120%; font-size: 0.9em; } .content img { width: 100%; } .time { color: rgba(0,0,0,0.4); font-size: 0.6em; text-align: right; margin-top: -10px; } .pink { color: #EE33AA; } .green { color: #44FF66; } .orange { color: #FF8811; } .wrap-message { width: 100%; height: 60px; background: #f1f1f1; display: flex; } .message { width: 100%; height: 45px; background: #ffffff; margin: auto; border: 1px solid #eeeeee; border-radius: 5px; display: flex; } .input-message { width: 100%; margin: 0px 10px; border: none; } .input-message:focus { outline: none; } /* ------ SCROLLBAR ------ */ body::-webkit-scrollbar, .contact-list::-webkit-scrollbar, .chat::-webkit-scrollbar, .information::-webkit-scrollbar { width: 0.4em; height: 0.4em; } body::-webkit-scrollbar-thumb, .contact-list::-webkit-scrollbar-thumb, .chat::-webkit-scrollbar-thumb, .information::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.2); } /* ------ MEDIA QUERIES ------ */ @media (min-width: 1200px) { .wrap { margin-bottom: 2vh; margin-top: 25px; height: calc(98vh - 25px); } } @media (max-width: 600px) { .wrap { height: calc(100vh - 0.4em); } } </style></head><body> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <script src="https://use.fontawesome.com/1c6f725ec5.js"></script> </head> <body> <div class="green-background"></div> <div class="wrap"> <section class="left"> <div class="profile"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1089577/user.jpg"> <div class="icons"> <i class="fa fa-commenting fa-lg" aria-hidden="true"></i> <i class="fa fa-bars fa-lg" aria-hidden="true"></i> </div> </div> <div class="wrap-search"> <div class="search"> <i class="fa fa-search fa" aria-hidden="true"></i> <input type="text" class="input-search" placeholder="Suchen oder neuen Chat beginnen"> </div> </div> <div class="contact-list"></div> </section> <section class="right"> <div class="chat-head"> <img alt="profilepicture"> <div class="chat-name"> <h1 class="font-name"></h1> <p class="font-online"></p> </div> <i class="fa fa-search fa-lg" aria-hidden="true"></i> <i class="fa fa-paperclip fa-lg" aria-hidden="true"></i> <i class="fa fa-bars fa-lg" aria-hidden="true" id="show-contact-information"></i> <i class="fa fa-times fa-lg" aria-hidden="true" id="close-contact-information"></i> </div> <div class="wrap-chat"> <div class="chat"></div> <div class="information"></div> </div> <div class="wrap-message"> <i class="fa fa-smile-o fa-lg" aria-hidden="true"></i> <div class="message"> <input type="text" class="input-message" placeholder="Schreibe eine Nachricht"> </div> <i class="fa fa-microphone fa-lg" aria-hidden="true"></i> </div> </section> </div> </body> </html> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script >//contacts var WhatsApp = (function (app) { function Contact (name,img,online) { this.id = contactList.length; this.name = name; this.img = img; this.online = online; this.messages = new Array(); this.newmsg = 0; this.groups = new Array(); contactList.push(this); } Contact.prototype.addMessage = function (msg) { this.messages.push(msg); } Contact.prototype.addGroup = function (group) { this.groups.push(group); } appContacts = Contact; return appContacts; })(WhatsApp || {}); //groups var WhatsApp = (function (app) { function Group (name,img) { this.id = contactList.length; this.name = name; this.img = img; this.members = new Array(); this.messages = new Array(); this.newmsg = 0; contactList.push(this); } Group.prototype.addMember = function (contact) { this.members.push(contact); } Group.prototype.addMessage = function (msg) { this.messages.push(msg); } appGroups = Group; return appGroups; })(WhatsApp || {}); //messages var WhatsApp = (function (app) { function Message (text,name,time,type,group) { this.text = text; this.name = name, this.time = time; this.type = type; this.group = group; } appMessages = Message; return appMessages; })(WhatsApp || {}); //subject /** * Created by Tanja on 02.01.2017. */ var WhatsApp = (function(app) { function Subject() { this.observers = []; }; Subject.prototype.subscribe = function(item) { this.observers.push(item); }; Subject.prototype.unsubscribeAll = function() { this.observers.length = 0; }; Subject.prototype.notifyObservers = function() { this.observers.forEach(elem => {elem.notify();}) }; app.Subject = Subject; return app; })(WhatsApp || {}); //model /** * Created by Tanja on 02.01.2017. */ var currentChat; var contactList = new Array(); var WhatsApp = (function ToDoModel (app) { var subject = new app.Subject(); var Model = { start : function() { $.getJSON("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1089577/contacts2.json", function (data) { for (var i=0; i<data.elements.length; i++) {if (window.CP.shouldStopExecution(4)){break;} var e = data.elements[i]; if (e.online == undefined) { var group = new appGroups(e.name,e.img); for (var j = 0; j < e.members.length; j++) {if (window.CP.shouldStopExecution(1)){break;} group.addMember(contactList[e.members[j].contact]); contactList[e.members[j].contact].addGroup(group); } window.CP.exitedLoop(1); for (var j = 0; j < e.messages.length; j++) {if (window.CP.shouldStopExecution(2)){break;} var m = e.messages[j]; var message = new appMessages(m.text, m.name, m.time, m.type, true); group.addMessage(message); } window.CP.exitedLoop(2); } else { var contact = new appContacts(e.name, e.img, e.online); for (var j = 0; j < e.messages.length; j++) {if (window.CP.shouldStopExecution(3)){break;} var m = e.messages[j]; var message = new appMessages(m.text, m.name, m.time, m.type, false); contact.addMessage(message); } window.CP.exitedLoop(3); } } window.CP.exitedLoop(4); subject.notifyObservers(); }); }, writeMessage : function() { var msg = new appMessages($(".input-message").val(),"",new Date().getHours() + ":" + new Date().getMinutes(),true); WhatsApp.View.printMessage(msg); currentChat.addMessage(msg); $(".input-message").val(""); $("#" + currentChat.id).addClass("active-contact"); subject.notifyObservers(); }, getMessage : function (text,id,name) { if (name == undefined) { var msg = new appMessages(text, contactList[id].name, new Date().getHours() + ":" + new Date().getMinutes(), false, false); } else { var msg = new appMessages(text, name, new Date().getHours() + ":" + new Date().getMinutes(), false, true); } contactList[id].addMessage(msg); contactList[id].online = new Date().getHours() + ":" + new Date().getMinutes(); if(contactList[id] == currentChat) { WhatsApp.View.printMessage(msg); WhatsApp.View.printContact(contactList[id]); } else { contactList[id].newmsg ++; WhatsApp.View.printContact(contactList[id]); } }, register : function(...args) { subject.unsubscribeAll(); args.forEach(elem => { subject.subscribe(elem); }) } }; app.Model = Model; return app; })(WhatsApp || {}); //view /** * Created by Tanja on 02.01.2017. */ var first = true; var WhatsApp = (function ToDoView(app) { var view = { printContact : function (c) { $("#" + c.id).remove(); var lastmsg = c.messages[c.messages.length - 1]; if (c.newmsg == 0) { var html = $("<div class='contact' id='" + c.id + "'><img src='" + c.img + "' alt='profilpicture'><div class='contact-preview'><div class='contact-text'><h1 class='font-name'>" + c.name + "</h1><p class='font-preview'>" + lastmsg.text + "</p></div></div><div class='contact-time'><p>" + lastmsg.time + "</p></div></div>"); } else { var html = $("<div class='contact new-message-contact' id='" + c.id + "'><img src='" + c.img + "' alt='profilpicture'><div class='contact-preview'><div class='contact-text'><h1 class='font-name'>" + c.name + "</h1><p class='font-preview'>" + lastmsg.text + "</p></div></div><div class='contact-time'><p>" + lastmsg.time + "</p><div class='new-message' id='nm" + c.id + "'><p>" + c.newmsg + "</p></div></div></div>"); } var that = c; $(".contact-list").prepend(html); WhatsApp.Ctrl.addClick(html, that); } , printChat : function (cg) { WhatsApp.View.closeContactInformation(); $(".chat-head img").attr("src",cg.img); $(".chat-name h1").text(cg.name); if(cg.members == undefined) { $(".chat-name p").text("zuletzt online um " + cg.online); // Nachrichten konfigurieren $(".chat-bubble").remove(); for (var i=0; i<cg.messages.length; i++) {if (window.CP.shouldStopExecution(5)){break;} WhatsApp.View.printMessage(cg.messages[i]); } window.CP.exitedLoop(5); currentChat = cg; } else { var listMembers = ""; for (var i=0; i<cg.members.length; i++) {if (window.CP.shouldStopExecution(6)){break;} listMembers += cg.members[i].name; if (i < cg.members.length - 1) { listMembers += ", "; } } window.CP.exitedLoop(6); $(".chat-name p").text(listMembers); // Nachrichten konfigurieren $(".chat-bubble").remove(); for (var i=0; i<cg.messages.length; i++) {if (window.CP.shouldStopExecution(7)){break;} WhatsApp.View.printMessage(cg.messages[i]); } window.CP.exitedLoop(7); currentChat = cg; } }, printMessage : function (gc) { if (gc.group) { if (gc.type) { $(".chat").append("<div class='chat-bubble me'><div class='my-mouth'></div><div class='content'>" + gc.text + "</div><div class='time'>" + gc.time + "</div></div>"); } else { $(".chat").append("<div class='chat-bubble you'><div class='your-mouth'></div><h4>" + gc.name + "</h4><div class='content'>" + gc.text + "</div><div class='time'>" + gc.time + "</div></div>"); } } else { if (gc.type) { $(".chat").append("<div class='chat-bubble me'><div class='my-mouth'></div><div class='content'>" + gc.text + "</div><div class='time'>" + gc.time + "</div></div>"); } else { $(".chat").append("<div class='chat-bubble you'><div class='your-mouth'></div><div class='content'>" + gc.text + "</div><div class='time'>" + gc.time + "</div></div>"); } } }, showContactInformation : function () { $(".chat-head i").hide(); $(".information").css("display", "flex"); $("#close-contact-information").show(); if (currentChat.members == undefined) { $(".information").append("<img src='" + currentChat.img + "'><div><h1>Name:</h1><p>" + currentChat.name + "</p></div><div id='listGroups'><h1>Gemeinsame Gruppen:</h1></div>"); for (var i = 0; i < currentChat.groups.length; i++) {if (window.CP.shouldStopExecution(9)){break;} html = $("<div class='listGroups'><img src='" + currentChat.groups[i].img + "'><p>" + currentChat.groups[i].name + "</p></div>"); $("#listGroups").append(html); $(html).click(function (e) { for (var i = 0; i < contactList.length; i++) {if (window.CP.shouldStopExecution(8)){break;} if (($(currentChat).find("p").text()) == contactList[i].name) { $(".active-contact").removeClass("active-contact"); $("#" + contactList[i].id).addClass("active-contact"); WhatsApp.Groups.printChat(contactList[i]); } } window.CP.exitedLoop(8); }); } window.CP.exitedLoop(9); } else { $(".information").append("<img src='" + currentChat.img + "'><div><h1>Name:</h1><p>" + currentChat.name + "</p></div><div id='listGroups'><h1>Mitglieder:</h1></div>"); for (var i = 0; i < currentChat.members.length; i++) {if (window.CP.shouldStopExecution(11)){break;} html = $("<div class='listGroups'><img src='" + currentChat.members[i].img + "'><p>" + currentChat.members[i].name + "</p></div>"); $("#listGroups").append(html); $(html).click(function (e) { for (var i = 0; i < contactList.length; i++) {if (window.CP.shouldStopExecution(10)){break;} if (($(currentChat).find("p").text()) == contactList[i].name) { $(".active-contact").removeClass("active-contact"); $("#" + contactList[i].id).addClass("active-contact"); WhatsApp.Contacts.printChat(contactList[i]); } } window.CP.exitedLoop(10); }); } window.CP.exitedLoop(11); } }, closeContactInformation : function () { $(".chat-head i").show(); $("#close-contact-information").hide(); $(".information >").remove(); $(".information").hide(); }, //Observer-Methode notify: function () { if (first) { first = false; for (var i = 0; i < contactList.length; i++) {if (window.CP.shouldStopExecution(12)){break;} WhatsApp.View.printContact(contactList[i]); currentChat = contactList[i]; } window.CP.exitedLoop(12); first = false; } else { WhatsApp.View.printContact(currentChat); } } } app.View = view; return app; })(WhatsApp); //controller /** * Created by Tanja on 02.01.2017. */ var start = true; var WhatsApp = (function ToDoCtrl(app) { $(document).ready(function () { app.Model.start(); }); var Ctrl = { addClick : function (html, that) { $(html).click(function(e) { $(".active-contact").removeClass("active-contact"); $(this).addClass("active-contact"); $(this).removeClass("new-message-contact"); $("#nm" + that.id).remove(); that.newmsg = 0; WhatsApp.View.printChat(that); }); }, //Observer-Methode notify : function() { if (start) { $(".input-message").keyup(function(ev) { if(ev.which == 13 || ev.keyCode == 13) { app.Model.writeMessage(); } }); $("#show-contact-information").on("click",function(){ WhatsApp.View.showContactInformation(); }); $("#close-contact-information").on("click",function(){ WhatsApp.View.closeContactInformation(); }); start = false; } } }; app.Ctrl = Ctrl; return app; })(WhatsApp); WhatsApp.Model.register(WhatsApp.View, WhatsApp.Ctrl); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: