<!DOCTYPE html>

<html class=''>
<head>
	<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,300' rel='stylesheet' type='text/css'>
</head>
<body>
	<div id="frame">
		<div id="sidepanel">
			<div id="profile">
				<div class="wrap">
					<img id="profile-img" src="" class="online" alt="" />
					<p>Loading Account Name </p>
					<i class="fa fa-chevron-down expand-button" aria-hidden="true"></i>
					<div class="hamburger-menu">
						<span></span>
						<span></span>
						<span></span>
					</div>
				</div>
			</div>
			<div id="search">
				<label for=""><i class="fa fa-search" aria-hidden="true"></i></label>
				<input type="text" placeholder="Search contacts..." />
			</div>
			<div id="contacts">
				<ul hidden>
					<li class="contact active">
						<div class="wrap">
							<div class="meta">
								<p class="name"><i class="fa fa-plus fa-fw fa-bounce"></i>  New Chat</p>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div id="bottom-bar">
			</div>
		</div>
		<div class="content">
			<div class="contact-profile">
				<img src="assets/images/Blue_purple_colorful_smart_brain_logo.png" alt="" />
				<p>Violet</p>
			</div>
			<div class="messages">
				<ul id="chat-history">

				</ul>
				<p hidden id="loading" style="position: absolute;top: 50%;transform: translate(-50%, -50%);left: 50%;">Loading Chat</p>
				<p id="emptyChat" style="position: absolute;top: 50%;transform: translate(-50%, -50%);left: 50%;">Send your message to start conversation</p>
			</div>
			<div class="message-input">
				<div class="wrap">
					<input id="message-input" type="text" placeholder="Write your message..." />
					<button class="submit"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
				</div>
			</div>
		</div>
	</div>
</body>
