Mini app interface

<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,700" rel="stylesheet">
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css">

  

  <link rel="stylesheet" href="style.css">



  <div class="mobile-wrap block">
    <div class="mobile clearfix">
      <div class="header">
        <span class="ion-ios-navicon pull-left"><i></i></span>
        <span class="title">Home</span>
        <span class="ion-ios-search pull-right"></span>
        <div class="search">
        <form method="post">
          <input type="search" placeholder="Search Here">
        </form>
        </div>
      </div>
      <div class="sidebar">
        <div class="sidebar-overlay"></div>
        <div class="sidebar-content">
          <div class="top-head">
            <div class="name">John Dou</div>
            <div class="email">john_dou@gmail.com</div>
          </div>
          <div class="nav-left">
            <a href="#home"><span class="ion-ios-home-outline"></span> Home</a>
            <a href="#alarm"><span class="ion-ios-list-outline"></span> Alarm</a>
            <a href="#compose"><span class="ion-ios-compose-outline"></span> Compose</a>
            <a href="#chats"><span class="ion-ios-chatboxes-outline"></span> Chats</a>
            <a href="#profile"><span class="ion-ios-person-outline"></span> Profile</a>
            <a href="#settings"><span class="ion-ios-gear-outline"></span> Settings</a>
            <a href="#credits"><span class="ion-ios-information-outline"></span> Credits</a>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="html search">
          <div class="title bounceInDown animated">Search Result</div>
          <p class="flipInX animated">Sorry,<br>no matches found for <b class="key"></b></p>
        </div>
        <div class="html welcome visible">
          <div class="datetime">
            <div class="day lightSpeedIn animated">Thursday</div>
            <div class="date lightSpeedIn animated">June 18, 2015</div>
            <div class="time lightSpeedIn animated">08:00 AM</div>
          </div>
        </div>
        <div class="html alarm">
          <div class="forecast clearfix">
            <div class="datetime pull-left bounceInLeft animated">
              <div class="day">Thursday</div>
              <div class="date">June 18, 2015</div>
            </div>
            <div class="temperature pull-right bounceInRight animated">
              <div class="unit"><span class="ion-ios-sunny-outline"></span> 34<i>&deg;</i></div>
              <div class="location">Los Angeles, USA</div>
            </div>
          </div>
          <div class="alarm-list">
            <div class="note clearfix slideInRight animated">
              <div class="time pull-left">
                <div class="hour">9</div>
                <div class="shift">AM</div>
              </div>
              <div class="to-do pull-left">
                <div class="title">Finish HTML Coding</div>
                <div class="subject">Web UI</div>
              </div>
            </div>
            <div class="note clearfix slideInRight animated">
              <div class="time pull-left">
                <div class="hour">1</div>
                <div class="shift">PM</div>
              </div>
              <div class="to-do pull-left">
                <div class="title">Lunch Break</div>
                <div class="subject"></div>
              </div>
            </div>
            <div class="note clearfix slideInRight animated" data-revert="slideOutRight">
              <div class="time pull-left">
                <div class="hour">3</div>
                <div class="shift">PM</div>
              </div>
              <div class="to-do pull-left">
                <div class="title">Design Stand Up</div>
                <div class="subject">Hangouts</div>
                <div class="user-list clearfix">
                  <div class="user pull-left"><img src="https://raw.githubusercontent.com/khadkamhn/secret-project/master/img/usr-i.png"></div>
                  <div class="user pull-left"><img src="https://raw.githubusercontent.com/khadkamhn/secret-project/master/img/usr-ii.png"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="html compose">
          <div class="forms">
            <div class="group clearfix slideInRight animated">
              <label class="pull-left" for="compose-time"><span class="ion-ios-time-outline"></span> Time</label>
              <input class="pull-right" id="compose-time" type="time">
            </div>
            <div class="group clearfix slideInLeft animated">
              <label class="pull-left" for="compose-date"><span class="ion-ios-calendar-outline"></span> Date</label>
              <input class="pull-right" id="compose-date" type="date">
            </div>
            <div class="group clearfix slideInRight animated">
              <label class="pull-left" for="compose-title"><span class="ion-ios-paper-outline"></span> Title</label>
              <input class="pull-right" id="compose-title" type="text">
            </div>
            <div class="group clearfix slideInLeft animated">
              <label class="visible" for="compose-detail"><span class="ion-ios-list-outline"></span> Task</label>
              <textarea class="visible" id="compose-detail" rows="3"></textarea>
            </div>
            <div class="action flipInY animated">
              <button class="btn">Compose</button>
            </div>
          </div>
        </div>
        <div class="html chats">
          <div class="tabs-list clearfix">
            <a href="#" class="tab active">Users</a>
            <a href="#" class="tab">Messages</a>
            <a href="#" class="tab">Groups</a>
          </div>
          <div class="active-users">
            <div class="user clearfix rotateInDownLeft animated">
              <div class="photo pull-left">
                <img src="https://randomuser.me/api/portraits/men/99.jpg">
              </div>
              <div class="desc pull-left">
                <p class="name">Connor Hartigan</p>
                <p class="position">Web &amp; UI Designer</p>
              </div>
              <div class="idle pull-right"><span class="away"></span></div>
            </div>
            <div class="user clearfix rotateInDownRight animated">
              <div class="photo pull-left">
                <img src="https://randomuser.me/api/portraits/men/89.jpg">
              </div>
              <div class="desc pull-left">
                <p class="name">Jacob Lennon</p>
                <p class="position">Front-End Developer</p>
              </div>
              <div class="idle pull-right"><span class="offline"></span></div>
            </div>
            <div class="user clearfix rotateInDownLeft animated">
              <div class="photo pull-left">
                <img src="https://randomuser.me/api/portraits/men/79.jpg">
              </div>
              <div class="desc pull-left">
                <p class="name">Didier Mailly</p>
                <p class="position">Co-Founder</p>
              </div>
              <div class="idle pull-right"><span class="away"></span></div>
            </div>
            <div class="user clearfix rotateInDownRight animated">
              <div class="photo pull-left">
                <img src="https://randomuser.me/api/portraits/men/69.jpg">
              </div>
              <div class="desc pull-left">
                <p class="name">Miguel Cunha Ferreira</p>
                <p class="position">Sales Manager</p>
              </div>
              <div class="idle pull-right"><span class="online"></span></div>
            </div>
            <div class="user clearfix rotateInDownLeft animated">
              <div class="photo pull-left">
                <img src="https://randomuser.me/api/portraits/men/59.jpg">
              </div>
              <div class="desc pull-left">
                <p class="name">Eric Yuriev</p>
                <p class="position">App Developer</p>
              </div>
              <div class="idle pull-right"><span class="online"></span></div>
            </div>
            <div class="user clearfix rotateInDownRight animated">
              <div class="photo pull-left">
                <img src="https://randomuser.me/api/portraits/men/49.jpg">
              </div>
              <div class="desc pull-left">
                <p class="name">Theodore Clark</p>
                <p class="position">Project Manager</p>
              </div>
              <div class="idle pull-right"><span class="online"></span></div>
            </div>
          </div>
        </div>
        <div class="html settings">
          <div class="setting-list">
            <div class="gear clearfix slideInRight animated">
              <div class="title pull-left">General</div>
              <div class="action pull-right"><span class="ion-ios-arrow-right"></span></div>
            </div>
            <div class="gear clearfix slideInLeft animated">
              <div class="title pull-left"><label for="gear-notice">Notification</label></div>
              <div class="action pull-right"><input id="gear-notice" class="on-off" type="checkbox"><label for="gear-notice"></label></div>
            </div>
            <div class="gear clearfix slideInRight animated">
              <div class="title pull-left"><label for="gear-sound">Sound</label></div>
              <div class="action pull-right"><input id="gear-sound" class="on-off" type="checkbox" checked><label for="gear-sound"></label></div>
            </div>
            <div class="gear clearfix slideInLeft animated">
              <div class="title pull-left">Theme</div>
              <div class="action pull-right">Standard <span class="ion-ios-arrow-right"></span></div>
            </div>
            <div class="gear clearfix slideInRight animated">
              <div class="title pull-left">Support</div>
              <div class="action pull-right"><span class="ion-ios-arrow-right"></span></div>
            </div>
            <div class="gear clearfix slideInLeft animated">
              <div class="title pull-left">Privacy</div>
              <div class="action pull-right"><span class="ion-ios-arrow-right"></span></div>
            </div>
          </div>
        </div>
        <div class="html profile">
          <div class="photo flipInX animated">
            <img src="https://images.unsplash.com/photo-1597223557154-721c1cecc4b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80">
            <div class="social">
              <a href="https://facebook.com/khadkamhn" class="soc-item soc-count-1"><span class="ion-social-facebook"></span></a>
              <a href="https://twitter.com/khadkamhn" class="soc-item soc-count-2"><span class="ion-social-twitter"></span></a>
              <a href="https://github.com/khadkamhn" class="soc-item soc-count-3"><span class="ion-social-github"></span></a>
              <a href="https://pinterest.com/khadkamhn" class="soc-item soc-count-4"><span class="ion-social-pinterest"></span></a>
              <a href="https://np.linkedin.com/in/khadkamhn" class="soc-item soc-count-5"><span class="ion-social-linkedin"></span></a>
              <a href="https://codepen.io/khadkamhn" class="soc-item soc-count-6"><span class="ion-social-codepen"></span></a>
              <a href="skype:khadkamhn?userinfo" class="soc-item soc-count-7"><span class="ion-social-skype"></span></a>
              <a href="http://dribbble.com/khadkamhn" class="soc-item soc-count-8"><span class="ion-social-dribbble"></span></a>
            </div>
          </div>
          <div class="details">
            <p class="heading flipInY animated">
              <span class="name">John Dou</span><span class="position">Arhitector</span>
            </p>
            <p class="text fadeInUp animated">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum provident totam maiores. Dicta officia sunt facere possimus sed non suscipit magni minima alias. Assumenda natus, aperiam impedit commodi error voluptates.
         </p>
          </div>
        </div>
        <div class="html credits">
          <div class="title flipInY animated">I have been using the following assets to build this design</div>
          <div class="credit-ol">
            <div class="credit-li lightSpeedIn animated"><a href="https://www.google.com/fonts/specimen/Roboto" target="_blank">roboto</a> <span>for typography</span></div>
            <div class="credit-li lightSpeedIn animated"><a href="#" target="_blank">jquery</a> <span>for design/ui</span></div>
            <div class="credit-li lightSpeedIn animated"><a href="#" target="_blank">ionicons</a> <span>for icons</span></div>
            <div class="credit-li lightSpeedIn animated"><a href="#" target="_blank">ui faces</a> <span>for avatar</span></div>
            <div class="credit-li lightSpeedIn animated"><a href="#" target="_blank">animate.css</a> <span>for animation</span></div>
            <div class="credit-li lightSpeedIn animated"><a href="#" target="_blank">concept of design</a> <span>for layout</span></div>
            <div class="credit-li lightSpeedIn animated"><a href="#" target="_blank">unsplash.com</a> <span>for background</span></div>
          </div>
          <div class="text zoomInUp animated">I'm glad for using these resources and expecting same as time ahead</div>
        </div>
      </div>
      <div class="nav">
        <a href="#profile" class="nav-item nav-count-1"><i class="ion-ios-person-outline"></i><span class="invisible">Profile</span></a>
        <a href="#compose" class="nav-item nav-count-2"><i class="ion-ios-compose-outline"></i><span class="invisible">Compose</span></a>
        <a href="#chats" class="nav-item nav-count-3"><i class="ion-ios-chatboxes-outline"></i><span class="invisible">Chats</span></a>
        <a href="#alarm" class="nav-item nav-count-4"><i class="ion-ios-alarm-outline"></i><span class="invisible">Alarm</span></a>
        <a href="#toggle" class="mask"><i class="ion-ios-plus-empty"></i></a>
      </div>
    </div>
  </div>
 
  
  
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

body {
	background: teal;
	font: 300 18px/18px Roboto;
}

*,
:after,
:before {
	box-sizing: border-box;
}

.clearfix:after,
.clearfix:before {
	content: "";
	display: table;
}

.clearfix:after {
	clear: both;
	display: block;
}

.mobile-wrap {
	margin: auto;
	width: 300px;
	height: 534px;
	overflow: hidden;
	position: relative;
	background: url(https://raw.githubusercontent.com/khadkamhn/secret-project/master/img/background.jpg)
		center no-repeat;
	box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24),
		0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.mobile-wrap:before {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	content: "";
	position: absolute;
	background: rgba(90, 93, 165, 0.8);
	background: linear-gradient(
		to bottom,
		rgba(90, 93, 165, 1),
		rgba(0, 0, 0, 0.7)
	);
}

.mobile {
	z-index: 99;
	color: #fff;
	height: 100%;
	padding: 15px;
	position: relative;
}

.mobile .header {
	clear: both;
	overflow: hidden;
	position: relative;
}

.mobile .header > span {
	font-size: 24px;
	min-width: 24px;
}

.mobile .header > .title {
	font-size: 16px;
	line-height: 24px;
	margin-left: 15px;
}


.mobile .header .pull-right {
	float: right;
}
.mobile .header .ion-ios-search {
	z-index: 999;
	position: relative;
}

.mobile .header .ion-ios-arrow-back {
	min-width: 25px;
}

.mobile .header .ion-ios-navicon > i {
	height: 1px;
	width: 20px;
	margin-top: 5px;
	background: #fff;
	position: relative;
	display: inline-block;
}

.mobile .header .ion-ios-navicon > i:after,
.mobile .header .ion-ios-navicon > i:before {
	content: "";
	width: inherit;
	height: inherit;
	position: absolute;
	background: inherit;
}

.mobile .header .ion-ios-navicon > i:before {
	bottom: 12px;
}

.mobile .header .ion-ios-navicon > i:after {
	bottom: 6px;
}
.mobile .header .search {
	right: 0;
	top: 0;
	position: absolute;
}
.mobile .header .search input {
	width: 0;
	color: #fff;
	height: 24px;
	border: none;
	font-size: 16px;
	max-width: 150px;
	font-weight: 300;
	padding-right: 30px;
	font-family: inherit;
	background: transparent;
	transition: all 0.3s ease-in-out 0s;
	border-bottom: 1px solid transparent;
	-webkit-appearance: textfield;
}
.mobile .header .search input:focus {
	outline: none;
}
.mobile .header .search input::-webkit-search-decoration,
.mobile .header .search input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}
.mobile .header .search .search-visible {
	width: 100%;
	border-bottom-color: #aaa;
}
.nav {
	right: 15px;
	z-index: 20;
	width: 45px;
	bottom: 15px;
	height: 45px;
	display: block;
	position: absolute;
	line-height: 45px;
	border-radius: 50%;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
}

.mask {
	z-index: 21;
	color: #fff;
	width: inherit;
	height: inherit;
	cursor: pointer;
	font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
	border-radius: 50%;
	position: absolute;
	background: #f23363;
	transition: all 0.1s ease-in-out 0s;
}

.nav.active .mask {
	background: #cf0e3f;
	transform: rotate(-135deg);
}

.nav:after {
	top: 0;
	left: 0;
	content: "";
	width: inherit;
	height: inherit;
	border-radius: 50%;
	position: absolute;
	background: #f23363;
	transition: all 0.1s ease-in-out 0s;
}

.nav.active:after {
	top: -125px;
	left: -125px;
	width: 350px;
	height: 350px;
}

.nav-item {
	top: 0;
	left: 0;
	z-index: 19;
	width: 45px;
	height: 45px;
	color: #fff;
	font-size: 24px;
	transform: none;
	line-height: 45px;
	border-radius: 50%;
	position: absolute;
	text-align: center;
	transition: all 0.3s cubic-bezier(0.68, 1.55, 0.265, 1);
}

.nav.active .nav-count-1 {
	transform: translate(10px, -100px);
}

.nav.active .nav-count-2 {
	transform: translate(-35px, -80px);
}

.nav.active .nav-count-3 {
	transform: translate(-80px, -45px);
}

.nav.active .nav-count-4 {
	transform: translate(-100px, 0);
}

.pull-left {
  cursor: pointer;
}

.pull-right {
	float: right;
}

.html,
.invisible {
	display: none;
}

.html.visible,
.visible {
	display: block;
}

.sidebar .sidebar-content,
.sidebar .sidebar-overlay {
	top: 0;
	left: 0;
	bottom: 0;
	position: absolute;
	transition: all 0.3s ease-in-out 0s;
}

.sidebar .sidebar-overlay {
	right: 0;
	opacity: 0;
	width: 100%;
	z-index: 999;
	transform: scale(0);
	background: rgba(0, 0, 0, 0.4);
}

.sidebar .sidebar-content {
	width: 80%;
	color: #333;
	padding: 15px;
	z-index: 9999;
	background: #fff;
	transform: translateX(-100%);
}

.sidebar.active .sidebar-content {
	transform: translateX(0);
}

.sidebar.active .sidebar-overlay {
	opacity: 1;
	transform: scale(1);
}

.sidebar .sidebar-content .top-head .name {
	font-size: 28px;
	font-weight: 400;
	margin-bottom: 5px;
}

.sidebar .sidebar-content .top-head .email {
	font-size: 13px;
	margin-bottom: 50px;
}

.sidebar .sidebar-content .nav-left > a {
	color: #333;
	display: block;
	font-size: 16px;
	padding: 10px 0;
	line-height: 24px;
	vertical-align: top;
	text-decoration: none;
}

.sidebar .sidebar-content .nav-left > a > span {
	color: #aaa;
	font-size: 24px;
	min-width: 40px;
	display: inline-block;
}

.html.chats,
.html.search,
.html.compose,
.html.credits,
.html.settings,
.html.welcome {
	margin-top: 50px;
}

.on-off {
	display: none;
}

.on-off + label {
	width: 30px;
	height: 10px;
	position: relative;
	border-radius: 5px;
	background: #dedee0;
	display: inline-block;
	transition: all 0.3s ease-in-out 0s;
}

.on-off + label:after {
	left: 0;
	top: -2px;
	width: 15px;
	content: "";
	height: 15px;
	position: absolute;
	border-radius: 50%;
	background: #bebdc2;
	transition: all 0.3s ease-in-out 0s;
}

.on-off:checked + label {
	background: #fd99b3;
}

.on-off:checked + label:after {
	left: 15px;
	background: #fb3666;
}

.btn {
	color: #eee;
	width: 100%;
	border: none;
	font-size: 16px;
	padding: 12px 24px;
	background: #cf0e3f;
	border-radius: 30px;
}
.search .title {
	font-size: 24px;
}
.search .title p {
	margin: 0;
	font-size: 16px;
	line-height: 18px;
}
.welcome .datetime .date,
.welcome .datetime .day {
	margin-bottom: 15px;
}

.welcome .datetime .day {
	font-size: 28px;
	-webkit-animation-duration: 0.2s;
	animation-duration: 0.2s;
}

.welcome .datetime .date {
	-webkit-animation-duration: 0.35s;
	animation-duration: 0.35s;
}

.forecast {
	margin-top: 30px;
}

.forecast .temperature {
	text-align: right;
}

.forecast .datetime .day,
.forecast .temperature .unit {
	font-size: 28px;
	min-height: 33px;
}

.forecast .datetime .date,
.forecast .temperature .location {
	color: #ccc;
	font-size: 12px;
}

.forecast .temperature .unit > i {
	top: -2px;
	font-style: normal;
	position: relative;
}

.forecast .animated {
	-webkit-animation-duration: 0.2s;
	animation-duration: 0.2s;
}

.alarm-list {
	margin-top: 50px;
}

.alarm-list .note {
	padding: 10px 0;
}

.alarm-list .note:nth-child(1) {
	-webkit-animation-duration: 0.2s;
	animation-duration: 0.2s;
}

.alarm-list .note:nth-child(2) {
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
}

.alarm-list .note:nth-child(3) {
	-webkit-animation-duration: 0.4s;
	animation-duration: 0.4s;
}

.alarm-list .note .time {
	min-width: 35px;
	margin-right: 30px;
}

.alarm-list .note .time > .shift,
.alarm-list .note .to-do > .subject {
	color: #ccc;
	font-size: 11px;
}

.alarm-list .note .time {
	text-align: center;
}

.alarm-list .note .to-do > .title {
	font-size: 14px;
}

.alarm-list .note:not(:last-child) {
	position: relative;
}

.alarm-list .note:not(:last-child):before {
	bottom: 0;
	width: 82%;
	content: "";
	right: -15px;
	position: absolute;
	border-bottom: 1px solid rgba(170, 170, 170, 0.5);
}

.user-list .user {
	width: 30px;
	height: 30px;
	margin: 4px;
	overflow: hidden;
	border-radius: 50%;
	display: inline-block;
	border: 1px solid #bbb;
}

.user-list .user > img {
	width: 100%;
}

.compose .forms .group {
	margin-bottom: 15px;
}

.compose .forms .group > label {
	padding: 6px 0;
	min-width: 40px;
	display: inline-block;
}

.compose .forms .group > label > span {
	min-width: 20px;
	display: inline-block;
}

.compose .forms .group input,
.compose .forms .group textarea {
	color: #fff;
	border: none;
	resize: none;
	min-width: 185px;
	background: 0 0;
	padding: 5px 10px 1px;
	border-bottom: 1px solid rgba(170, 170, 170, 0.6);
}

.compose .forms .visible {
	width: 100%;
	display: block !important;
}

.compose .forms .action {
	margin-top: 50px;
}

.compose .forms .group:nth-child(1) {
	-webkit-animation-duration: 0.1s;
	animation-duration: 0.1s;
}

.compose .forms .group:nth-child(2) {
	-webkit-animation-duration: 0.2s;
	animation-duration: 0.2s;
}

.compose .forms .group:nth-child(3) {
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
}

.compose .forms .group:nth-child(4) {
	-webkit-animation-duration: 0.4s;
	animation-duration: 0.4s;
}

.chats .tabs-list {
	margin-bottom: 15px;
}

.chats .tabs-list .tab {
	float: left;
	color: #aaa;
	font-size: 12px;
	font-weight: 400;
	margin-right: 15px;
	padding-bottom: 2px;
	text-decoration: none;
	text-transform: uppercase;
	border-bottom: 2px solid transparent;
}

.chats .tabs-list .tab.active,
.chats .tabs-list .tab:hover {
	color: #fff;
	border-bottom: 2px solid;
}

.chats .active-users .user {
	padding: 5px 0;
	cursor: default;
}

.chats .active-users .photo {
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 3px 2px rgba(0, 0, 0, 0.4);
}

.chats .active-users .photo img {
	width: 100%;
}

.chats .active-users .desc {
	margin-left: 15px;
}

.chats .active-users .desc p {
	margin: 0;
	font-size: 14px;
}

.chats .active-users .desc .name {
	font-weight: 400;
}

.chats .active-users .desc .position {
	color: #aaa;
	font-size: 12px;
}

.chats .active-users .user .idle {
	height: 40px;
	position: relative;
}

.chats .active-users .user .idle > span {
	top: 50%;
	right: 0;
	width: 15px;
	height: 15px;
	margin-top: -7.5px;
	position: absolute;
	border-radius: 50%;
	display: inline-block;
	border: 1px solid #fff;
}

.chats .active-users .user .idle > .online {
	background: #2ecc71;
}

.chats .active-users .user .idle > .offline {
	background: #95a5a6;
}

.chats .active-users .user .idle > .away {
	background: #f2ca27;
}

.chats .active-users .user:nth-child(1) {
	-webkit-animation-duration: 0.18s;
	animation-duration: 0.18s;
}

.chats .active-users .user:nth-child(2) {
	-webkit-animation-duration: 0.25s;
	animation-duration: 0.25s;
}

.chats .active-users .user:nth-child(3) {
	-webkit-animation-duration: 0.35s;
	animation-duration: 0.35s;
}

.chats .active-users .user:nth-child(4) {
	-webkit-animation-duration: 0.4s;
	animation-duration: 0.4s;
}

.chats .active-users .user:nth-child(5) {
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
}

.chats .active-users .user:nth-child(6) {
	-webkit-animation-duration: 0.6s;
	animation-duration: 0.6s;
}

.chats .active-users .user .idle > span:before {
	right: 20px;
	bottom: -2px;
	display: none;
	padding: 0 5px;
	font-size: 12px;
	position: absolute;
	border-radius: 2px;
	content: attr(class);
	background: rgba(0, 0, 0, 0.4);
	text-transform: capitalize;
}

.chats .active-users .user:hover .idle > span:before {
	display: block;
	-webkit-animation: fadeInRight 0.4s;
	animation: fadeInRight 0.4s;
}

.profile {
	margin-top: 40px;
}

.profile .photo {
	margin: auto;
	width: 150px;
	height: 150px;
	overflow: hidden;
	position: relative;
	border-radius: 50%;
	border: 6px solid #ccc;
}

.profile .photo img {
	width: 100%;
	border-radius: 50%;
	transition: all 0.2s ease-in-out 0s;
}

.profile .photo .social {
	top: 50%;
	left: 50%;
	width: 30px;
	z-index: 99;
	height: 30px;
	margin-top: -15px;
	margin-left: -15px;
	position: absolute;
	transform: scale(0);
	transition: all 0.4s ease-in-out 0s;
}

.profile .photo .social .soc-item {
	top: 0;
	left: 0;
	z-index: 19;
	width: 35px;
	height: 35px;
	color: #eee;
	font-size: 24px;
	transform: none;
	line-height: 35px;
	border-radius: 50%;
	position: absolute;
	text-align: center;
	transition: all 0.3s cubic-bezier(0.68, 1.55, 0.265, 1);
}

.profile .photo .social .soc-item:hover {
	color: #fff;
}

.profile .photo:after {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	content: "";
	position: absolute;
	border-radius: 50%;
	transform: scale(0);
	background: rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease-in-out 0s;
}

.profile .photo:hover img {
	transform: scale(0.5) rotate(10deg);
}

.profile .photo:hover .social,
.profile .photo:hover:after {
	transform: scale(1);
}

.profile .photo:hover .social .soc-count-1 {
	transform: translate(0, -50px);
}

.profile .photo:hover .social .soc-count-2 {
	transform: translate(-35px, -35px);
}

.profile .photo:hover .social .soc-count-3 {
	transform: translate(-50px, 0);
}

.profile .photo:hover .social .soc-count-4 {
	transform: translate(-35px, 35px);
}

.profile .photo:hover .social .soc-count-5 {
	transform: translate(0, 50px);
}

.profile .photo:hover .social .soc-count-6 {
	transform: translate(35px, 35px);
}

.profile .photo:hover .social .soc-count-7 {
	transform: translate(50px, 0);
}

.profile .photo:hover .social .soc-count-8 {
	transform: translate(35px, -35px);
}

.profile .details .heading {
	padding: 5px;
	margin: 10px 0;
	text-align: center;
	border-radius: 15px;
	background: rgba(0, 0, 0, 0.4);
}

.profile .details .heading > .name {
	font-size: 18px;
	font-weight: 400;
	padding-right: 5px;
}

.profile .details .heading > .position {
	font-size: 12px;
	padding-left: 5px;
	vertical-align: 1px;
	border-left: 1px solid;
}

.profile .details .text {
	margin: 0;
	color: #ccc;
	line-height: 24px;
	text-align: center;
	-webkit-animation-duration: 0.4s;
	animation-duration: 0.4s;
}

.setting-list {
	margin-left: -15px;
	margin-right: -15px;
}

.setting-list .gear {
	padding: 10px 15px;
	font-size: 14px;
	font-weight: 400;
}

.setting-list .gear:not(:last-child) {
	border-bottom: 1px solid rgba(170, 170, 170, 0.4);
}

.setting-list .gear > .action {
	color: #aaa;
}

.setting-list .gear:nth-child(1) {
	-webkit-animation-duration: 0.1s;
	animation-duration: 0.1s;
}

.setting-list .gear:nth-child(2) {
	-webkit-animation-duration: 0.2s;
	animation-duration: 0.2s;
}

.setting-list .gear:nth-child(3) {
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
}

.setting-list .gear:nth-child(4) {
	-webkit-animation-duration: 0.4s;
	animation-duration: 0.4s;
}

.setting-list .gear:nth-child(5) {
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
}

.setting-list .gear:nth-child(6) {
	-webkit-animation-duration: 0.6s;
	animation-duration: 0.6s;
}

.credits .title {
	line-height: 24px;
	text-align: center;
}

.credits .credit-ol {
	margin: 20px 0;
	counter-reset: credits;
}

.credits .credit-li {
	line-height: 30px;
	position: relative;
	padding-left: 20px;
}

.credits .credit-li:before {
	top: 0;
	left: 0;
	position: absolute;
	content: counter(credits);
	counter-increment: credits;
}

.credits .credit-li:nth-child(1) {
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
}

.credits .credit-li:nth-child(2) {
	-webkit-animation-duration: 0.4s;
	animation-duration: 0.4s;
}

.credits .credit-li:nth-child(3) {
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
}

.credits .credit-li:nth-child(4) {
	-webkit-animation-duration: 0.6s;
	animation-duration: 0.6s;
}

.credits .credit-li:nth-child(5) {
	-webkit-animation-duration: 0.7s;
	animation-duration: 0.7s;
}

.credits .credit-li:nth-child(6) {
	-webkit-animation-duration: 0.8s;
	animation-duration: 0.8s;
}

.credits .credit-li a {
	color: inherit;
	text-decoration: none;
	padding: 1px 5px;
	border-radius: 13px;
	transition: all 0.6s ease-in-out 0s;
}

.credits .credit-li:hover a {
	box-shadow: 150px 0 0 0 rgba(0, 0, 0, 0.4) inset;
}

.credits .credit-li span {
	font-size: 13px;
}

.credits .text {
	margin-top: 10px;
	line-height: 22px;
	text-align: center;
}

$(function() {
  App.init();
});
var App = {
  init: function() {
        this.datetime(), this.side.nav(), this.search.bar(), this.navigation(), this.hyperlinks(), setInterval("App.datetime();", 1e3)
  },
  datetime: function() {
        var e = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"),
              t = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"),
              a = new Date,
              i = a.getYear();
        1e3 > i && (i += 1900);
        var s = a.getDay(),
              n = a.getMonth(),
              r = a.getDate();
        10 > r && (r = "0" + r);
        var l = a.getHours(),
              c = a.getMinutes(),
              h = a.getSeconds(),
              o = "AM";
        l >= 12 && (o = "PM"), l > 12 && (l -= 12), 0 == l && (l = 12), 9 >= c && (c = "0" + c), 9 >= h && (h = "0" + h), $(".welcome .datetime .day").text(e[s]), $(".welcome .datetime .date").text(t[n] + " " + r + ", " + i), $(".welcome .datetime .time").text(l + ":" + c + ":" + h + " " + o)
  },
  title: function(e) {
        return $(".header>.title").text(e)
  },
  side: {
        nav: function() {
              this.toggle(), this.navigation()
        },
        toggle: function() {
              $(".ion-ios-navicon").on("touchstart click", function(e) {
                    e.preventDefault(), $(".sidebar").toggleClass("active"), $(".nav").removeClass("active"), $(".sidebar .sidebar-overlay").removeClass("fadeOut animated").addClass("fadeIn animated")
              }), $(".sidebar .sidebar-overlay").on("touchstart click", function(e) {
                    e.preventDefault(), $(".ion-ios-navicon").click(), $(this).removeClass("fadeIn").addClass("fadeOut")
              })
        },
        navigation: function() {
              $(".nav-left a").on("touchstart click", function(e) {
                    e.preventDefault();
                    var t = $(this).attr("href").replace("#", "");
                    $(".sidebar").toggleClass("active"), $(".html").removeClass("visible"), "home" == t || "" == t || null == t ? $(".html.welcome").addClass("visible") : $(".html." + t).addClass("visible"), App.title($(this).text())
              })
        }
  },
  search: {
        bar: function() {
              $(".header .ion-ios-search").on("touchstart click", function() {
                    var e = ($(".header .search input").hasClass("search-visible"), $(".header .search input").val());
                    return "" != e && null != e ? (App.search.html($(".header .search input").val()), !1) : ($(".nav").removeClass("active"), $(".header .search input").focus(), void $(".header .search input").toggleClass("search-visible"))
              }), $(".search form").on("submit", function(e) {
                    e.preventDefault(), App.search.html($(".header .search input").val())
              })
        },
        html: function(e) {
              $(".search input").removeClass("search-visible"), $(".html").removeClass("visible"), $(".html.search").addClass("visible"), App.title("Result"), $(".html.search").html($(".html.search").html()), $(".html.search .key").html(e), $(".header .search input").val("")
        }
  },
  navigation: function() {
        $(".nav .mask").on("touchstart click", function(e) {
              e.preventDefault(), $(this).parent().toggleClass("active")
        })
  },
  hyperlinks: function() {
        $(".nav .nav-item").on("click", function(e) {
              e.preventDefault();
              var t = $(this).attr("href").replace("#", "");
              $(".html").removeClass("visible"), $(".html." + t).addClass("visible"), $(".nav").toggleClass("active"), App.title($(this).text())
        })
  }
};