chat app

chat

HTML

<div class='phone-screen'>
      <div class='home-screen {{cbctl.homeScreenVisibleClass}}'>
        <div class='content'>
         <div class='top-bar'>
            <div class='signal'>
              <div class='dot full'></div>
              <div class='dot full'></div>
              <div class='dot full'></div>
              <div class='dot empty'></div>
              <div class='dot empty'></div>
              <div class='att'>
                AT&T
              </div>
              <div class='lte'>
                LTE
              </div>
            </div>
            <div class='battery'>
              <div class='percent'>
                74%
              </div>
              <div class='image'>
                <div class='outline'>
                  <div class='fill'>
                  
                  </div><div class='vertical-mid-hack'></div>
                </div>
              </div>
            </div>
          </div>
          <div class='date'>
            <div class='time'>
              11:43
            </div>
            <div class='date'>
              Tuesday, January 10
            </div>
          </div>
          <div class='slide-to-unlock' ng-click='cbctl.showApps()'>
            ^ click to unlock
          </div>
        </div>
      </div>
      <div class='apps {{cbctl.appsScreenVisibleClass}}'>
        <div class='content'>
          <div class='top-bar'>
            <div class='signal'>
              <div class='dot full'></div>
              <div class='dot full'></div>
              <div class='dot full'></div>
              <div class='dot empty'></div>
              <div class='dot empty'></div>
              <div class='att'>
                AT&T
              </div>
              <div class='lte'>
                LTE
              </div>
            </div>
            <div class='battery'>
              <div class='percent'>
                74%
              </div>
              <div class='image'>
                <div...

SCSS

html, body {
			height: 100%;
			width: 100%;
			margin: 0;
		}
    @font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 100;
  src: local('Open Sans'), local('OpenSans'), url('http://themes.googleusercontent.com/static/fonts/opensans/v5/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
		body {
			font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
			font-size: 14px;
      text-align: center;
      background-image: url(http://medialoot-medialootinc.netdna-ssl.com/images/thumbs/1600x1036_Seamless_Wood_Textures_Vol_1_800x518-1a.jpg);
     
		}
		.vertical-mid-hack {
			display: inline-block;
			vertical-align: middle;
			height: 100%;
		}
		.chat-box {
		  display: inline-block;
      vertical-align: middle;
		  box-shadow: -8px 8px 40px 10px;
			padding: 0 3px;
			width: 331px;
      border-top: 2px solid #aaa;
      border-bottom: 2px solid gray;
      border-right: 2px solid #eee;
      border-left: 2px solid gray;
      border-radius: 50px;
			background-color: #1C1C1C;
		}
    .chat-box .top-speaker {
      height: 98px;
      text-align: center;
      .content {
        display: inline-block;
        vertical-align: middle;
        
        .camera {
          display: inline-block;
          padding: 3px;
          border-radius: 10px;
          background-color: #1C1C1C;
          border-top: 3px solid black;
          border-bottom: 3px solid gray;
          border-right: 3px solid black;
          border-left: 3px solid white;
        }
        .speaker {
          display: inline-block;
          padding: 2px 25px;
          border-top: 2px solid black;
          border-bottom: 2px solid gray;
          border-right: 2px solid black;
          border-left: 2px solid white;
          border-radius: 10px;
          background-color: #1C1C1C;
        }
      }
    }
     .chat-box .home-button {
      height: 98px;
      text-align: center;
      .content {
        display: inline-block;
       ...

JavaScript

angular.module('chatBox', [])
.controller('chatBoxController', chatBoxController)
.service('chatMessageService', chatMessageService)
.service('chatMessageListService', chatMessageListService);

chatBoxController.$inject = ['chatMessageService', 'chatMessageListService']
function chatBoxController(chatMessageService, chatMessageListService) {
	var self = this;
  var left = 'left';
  var right = 'right';
  self.homeScreenVisibleClass = 'hidden';
  self.appsScreenVisibleClass = 'hidden';
  self.chatAppBoxVisibleClass = 'hidden';
  self.messageList = chatMessageListService.getAll();
  self.message = chatMessageService.getMessageObject();
  self.addRightMessage = addRightMessage;
  self.addLeftMessage = addLeftMessage;
  self.rightMessage = '';
  self.leftMessage = '';
  self.showHomeScreen = showHomeScreen;
  self.showApps = showApps;
  self.showMessagesApp = showMessagesApp;
  
  function hideMessagesApp() {
  	self.chatAppBoxVisibleClass = 'hidden force-hide';
  }
  function showMessagesApp() {
  	hideAppsScreen();
    self.chatAppBoxVisibleClass = 'visible fronter';
  }
  function showApps() {
  	hideHomeScreen();
    hideAppsScreen();
    self.appsScreenVisibleClass = 'visible front';
  }
  function hideAppsScreen() {
  	self.appsScreenVisibleClass = 'hidden force-hide';
  }
  function hideHomeScreen() {
  	self.homeScreenVisibleClass = 'hidden force-hide';
  }
  function showHomeScreen() {
  	self.homeScreenVisibleClass = 'visible front';
    hideMessagesApp();
    hideAppsScreen();
  }
  function addRightMessage() {
  	if(validMessage(self.rightMessage)) {
      self.message.side = right;
      self.message.text = self.rightMessage;
      chatMessageListService.addMessage(self.message);
      resetMessage();
    }
    self.rightMessage = '';
  }
  function addLeftMessage() {
  	if(validMessage(self.leftMessage)) {
      self.message.side = left;
      self.message.text = self.leftMessage;
      chatMessageListService.addMessage(self.message);
     ...