CodePen Embed - 5 Живой чат / Live chat

	<div class="ui">
		<div class="left-menu">
				<form action="#" class="search">
					<input placeholder="search..." type="search" name="" id="">
					<input type="submit" value="&#xf002;">
				</form>
				<menu class="list-friends">
					<li>
						<img width="50" height="50" src="http://cs625730.vk.me/v625730358/1126a/qEjM1AnybRA.jpg">
						<div class="info">
							<div class="user">Юния Гапонович</div>
							<div class="status on"> online</div>
						</div>
					</li>
					<li>
						<img width="50" height="50" src="http://lorempixel.com/50/50/people/1">
						<div class="info">
							<div class="user">Name Fam</div>
							<div class="status on"> online</div>
						</div>
					</li>
					<li>
						<img width="50" height="50" src="http://lorempixel.com/50/50/people/2">
						<div class="info">
							<div class="user">Name Fam</div>
							<div class="status off">left 3 min age</div>
						</div>
					</li>
					<li>
						<img width="50" height="50" src="http://lorempixel.com/50/50/people/3">
						<div class="info">
							<div class="user">Name Fam</div>
							<div class="status on"> online</div>
						</div>
					</li>
					<li>
						<img width="50" height="50" src="http://lorempixel.com/50/50/people/4">
						<div class="info">
							<div class="user">Name Fam</div>
							<div class="status off">left 4 min age</div>
						</div>
					</li>
					<li>
						<img width="50" height="50" src="http://lorempixel.com/50/50/people/5">
						<div class="info">
							<div class="user">Name Fam</div>
							<div class="status off">left 12 min age</div>
						</div>
					</li>
					<li>
						<img width="50" height="50" src="http://lorempixel.com/50/50/people/6">
						<div class="info">
							<div class="user">Name Fam</div>
							<div class="status off">left 13 min age</div>
						</div>
					</li>
					<li>
						<img width="50" height="50" src="http://lorempixel.com/50/50/people/7">
						<div class="info">
							<div class="user">Name Fam</div>
							<div class="status on">online</div>
						</div>
					</li>
					<li>
						<img width="50" height="50" src="http://lorempixel.com/50/50/people/8">
						<div class="info">
							<div class="user">Name Fam</div>
							<div class="status off">left 6 min age</div>
						</div>
					</li>
					<li>
						<img width="50" height="50" src="http://lorempixel.com/50/50/people/9">
						<div class="info">
							<div class="user">Name Fam</div>
							<div class="status on">online</div>
						</div>
					</li>
					<li>
						<img width="50" height="50" src="http://lorempixel.com/50/50/people/10">
						<div class="info">
							<div class="user">Name Fam</div>
							<div class="status off">left 1 min age</div>
						</div>
					</li>
					<li>
						<img width="50" height="50" src="http://lorempixel.com/50/50/people/0">
						<div class="info">
							<div class="user">Name Fam</div>
							<div class="status on">online</div>
						</div>
					</li>
					<li>
						<img width="50" height="50" src="http://lorempixel.com/50/50/people/99">
						<div class="info">
							<div class="user">Name Fam</div>
							<div class="status off">left 23 min age</div>
						</div>
					</li>
				</menu>
		</div>
		<div class="chat">
			<div class="top">
				<div class="avatar">
					<img width="50" height="50" src="http://cs625730.vk.me/v625730358/1126a/qEjM1AnybRA.jpg">
				</div>
				<div class="info">
					<div class="name">Юния Гапонович</div>
					<div class="count">already 1 902 messages</div>
				</div>
				<i class="fa fa-star"></i>
			</div>
			<ul class="messages">
				<li class="i">
					<div class="head">
						<span class="time">10:13 AM, Today</span>
						<span class="name">Буль</span>
					</div>
					<div class="message">Привет!</div>
				</li>
				<li class="i">
					<div class="head">
						<span class="time">10:13 AM, Today</span>
						<span class="name">Буль</span>
					</div>
					<div class="message">)</div>
				</li>
				<li class="i">
					<div class="head">
						<span class="time">10:14 AM, Today</span>
						<span class="name">Буль</span>
					</div>
					<div class="message">М не счастья..</div>
				</li>
				<li class="friend-with-a-SVAGina">
					<div class="head">
						<span class="name">Юния</span>
						<span class="time">10:15 AM, Today</span>
					</div>
					<div class="message">чего тебе?</div>
				</li>
			</ul>
			<div class="write-form">
				<textarea placeholder="Type your message" name="e" id="texxt"  rows="2"></textarea>
				<i class="fa fa-picture-o"></i>
				<i class="fa fa-file-o"></i>
				<span class="send">Send</span>
			</div>
		</div>
	</div>

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,600,800,400);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
*{
	// transition: all .1s;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html{
	height: 100vh;
}
body{
	&:extend(html);
	overflow: hidden;
	font-family: 'Open Sans', sans-serif;
	background-image: linear-gradient(to bottom left,rgba(255, 255, 255, .6),transparent 60%,rgba(0, 0, 0, .6)),linear-gradient(to top left, #a0d3e4, #97d1e7);
}
@cof:1;
.ui{
	margin: 10px auto;
	width: 745px *@cof;
	height: 555px *@cof;
	background-color: #fff;
	border-radius: 3px;
	box-shadow: 0 0 25px darken(#61b2d0,10);
	flex-direction: row;
	display: flex;
	overflow: hidden;


	.search input{
		outline: none;
		border: none;
		background: none;
	}
	.search{
		position: relative;

		input[type=submit]{
			font-family: 'FontAwesome';
			position: absolute;
			right: 25px;
			top: 27px;
			color: white;
		}
		input[type=search]{
			background-color: #696c75;
			border-radius: 3px;
			padding: 10px;//
			width: 90%;
			box-sizing: border-box;
			@mr:10px;
			margin: 1.5*@mr @mr;
			color: #fff;
		}
	}


	.left-menu{
		width: 29%;
		box-sizing: content-box;
		padding-right: 1%;
		height: 100%;
		background: #434753;
	}
	.chat{
		width: 70%;
		height: 100%;
		background: #f1f5f8;

		.info{
			display: inline-flex;
			flex-direction: column;
			vertical-align: 40px;
			width: ~'calc(100% - 65px - 50px)';

			.name{
				font-weight: 600;
				color: #434753;
				height: 50%;
			}
			.count{
				color: #6d738d;
			}
		}
		i.fa{
			color: #d6d9de;
			vertical-align: 25px;
		}
	}

.avatar>img,
.list-friends img{
		border-radius: 50%;
		border: 3px solid #696c75;
	}
.list-friends{
	list-style: none;
	font-size: 13px;
	// overflow-y: scroll;
	height: 88%;
	& img{
		margin: 5px;
	}
	&>li{
		display: flex;
		margin: 0 0 10px 10px;
     user-select:none;        
	}
	.info{
		flex: 1;
	}
	.user{
		color: #fff;
		margin-top: 12px;
	}
	.status{
		position: relative;
		margin-left: 14px;
		color: #a8adb3;
	}
	.off:after,
	.on:after{
		content: '';
		left: -12px;
		top: 8px;
		position: absolute;
		height: 7px;
		width: 7px;
		border-radius: 50%;
	}
	.off:after{
		background: #fd8064;
	}
	.on:after{
		background: #62bf6e;
	}
}
.top{
	height: 70px;
}
.messages{
	height: ~'calc(100% - 70px - 150px)';
	list-style: none;
	border: 2px solid #fff;
	border-left: none;
	border-right: none;

	li{
		margin: 10px;
		transition: all .5s;

		&:after{
			content: '';
			clear: both;
			display: block;
		}
		.head{
			font-size: 13px;
		}
		.name{
			font-weight: 600;
			position: relative;
			

			&:after{
				content: '';
				position: absolute;
				height: 8px;
				width: 8px;
				border-radius: 50%;
				top: 6px;

			}
		}
		.time{
			color: #b7bccf;
		}
		.message{
			margin-top: 20px;
			color: #fff;
			font-size: 15px;
			border-radius: 3px;
			padding: 20px;
			line-height: 25px;
			max-width: 500px;
			word-wrap: break-word;
			position: relative;


			&:before{
				content: '';
				position: absolute;
				width: 0px;
				height: 0px;
				top: -12px;
				
				border-bottom: 12px solid #62bf6e;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
			}
		}
	}

	li.friend-with-a-SVAGina{
		.name{
			margin-left: 20px;

			&:after{
				background-color: #62bf6e;
				left: -20px;
				top: 6px;
			}
		}
		.message{
			background-color: #62bf6e;
			float: left;


			&:before{
				left: 16px;
				border-bottom-color: #62bf6e;
			}
		}
	}
	li.i{
		.head{
			text-align: right;
		}
		.name{
			margin-right: 20px;

			&:after{
				background-color: #7bc4ef;
				right: -20px;
				top: 6px;

			}
		}
		.message{
			background-color: #7bc4ef;
			float: right;


			&:before{
				right: 16px;
				border-bottom-color: #7bc4ef;
			}
		}
	}



}
.write-form{
	height: 150px;
	textarea{
     height:75px;
		margin: 17px 5%;
		width: 90%;
		outline: none;
		padding: 15px;
		border: none;
		border-radius: 3px;
		resize: none;
		&:before{
			content: '';
			clear: both;

		}
	}
}
.avatar>img{
	border-color: #62bf6e;
	margin: 10px;
	margin-right: 5px;

}
.avatar{
	display: inline-block;
}


.send{
	color: #7ac5ef;
	text-transform: uppercase;
	font-weight: 700;
	float: right;
	margin-right: 5%;
	cursor: pointer;
  user-select:none;
}
i.fa-file-o{
	margin-left: 15px;
}
i.fa-picture-o{
	margin-left: 5%;
}



}

View Compiled

#scr:https://dribbble.com/shots/1818748-Appon-Chat-Widget
conf =
	cursorcolor:"#696c75"
	cursorwidth:"4px"
	cursorborder :"none"

lol =
	cursorcolor:"#cdd2d6"
	cursorwidth:"4px"
	cursorborder :"none"

NYLM=["Уходи дверь закрой","У меня теперь другой","Все для тебя","Мне не нужен больше твой номер в книжке записной","Владимирский централ, ветер сука","Ты ушол, а я текла","Ты пришол в красный день календаря","бла бла",")","умри","ой все.","ой все.","ой все.","Ты говоришь ТОЧНЕЕ пишешьСя сам с собой"]

getRandomInt = (min, max)->
	return Math.floor(Math.random() * (max - min + 1)) + min;

claerResizeScroll=()->
	$ "#texxt"
		.val("")
	$ ".messages"
		.getNiceScroll 0
			.resize()
	$ ".messages"
		.getNiceScroll 0
			.doScrollTop 999999,999


insertI = ()->
	innerText = $.trim($("#texxt").val())
	if (innerText != "")
			$ ".messages"
				.append "<li class=\"i\"><div class=\"head\"><span class=\"time\">#{new Date().getHours()}:#{new Date().getMinutes()} AM, Today</span><span class=\"name\"> Буль</span></div><div class=\"message\">#{innerText}</div></li>"
			claerResizeScroll()

			otvet = setInterval ()->
				$ ".messages"
					.append "<li class=\"friend-with-a-SVAGina\"><div class=\"head\"><span class=\"name\">Юния  </span><span class=\"time\">#{new Date().getHours()}:#{new Date().getMinutes()} AM, Today</span></div><div class=\"message\">#{NYLM[getRandomInt(0,NYLM.length-1)]}</div></li>"
				claerResizeScroll()
				clearInterval otvet
			,getRandomInt 2500,500

$ document
	.ready ()->
		$ ".list-friends"
			.niceScroll conf

		$ ".messages"
			.niceScroll lol
				# .doScrollTop 999999,1

		$ "#texxt"
			.keypress (e)->
				if e.keyCode==13
					insertI()
					return false

		$ ".send"
			.click ()->
				insertI()

View Compiled

Run Pen

This Pen is owned by DNRB on CodePen.

See more by @retyui on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript