diff --git a/ChatService/public/.firebaserc b/ChatService/public/.firebaserc
new file mode 100644
index 0000000000000000000000000000000000000000..1ac6bc9d80d3e4c6237423fd68f641a43bdea14d
--- /dev/null
+++ b/ChatService/public/.firebaserc
@@ -0,0 +1,5 @@
+{
+ "projects": {
+ "kia": "chatservice-kia"
+ }
+}
\ No newline at end of file
diff --git a/ChatService/public/.gitignore b/ChatService/public/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..273c1665e010a0d82a052ecac6739cf044ce857c
--- /dev/null
+++ b/ChatService/public/.gitignore
@@ -0,0 +1 @@
+.firebaserc
\ No newline at end of file
diff --git a/ChatService/public/README.md b/ChatService/public/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..b3fe28deca62148291b5b3b3e35bce47c6468960
--- /dev/null
+++ b/ChatService/public/README.md
@@ -0,0 +1,102 @@
+Firebase Cloud Messaging Quickstart
+===================================
+
+The Firebase Cloud Messaging quickstart demonstrates how to:
+- Request permission to send app notifications to the user.
+- Receive FCM messages using the Firebase Cloud Messaging JavaScript SDK.
+
+Introduction
+------------
+
+[Read more about Firebase Cloud Messaging](https://firebase.google.com/docs/cloud-messaging/)
+
+Getting Started
+---------------
+
+1. Create your project on the [Firebase Console](https://console.firebase.google.com).
+1. You must have the [Firebase CLI](https://firebase.google.com/docs/cli/) installed. If you don't have it install it with `npm install -g firebase-tools` and then configure it with `firebase login`.
+1. On the command line run `firebase use --add` and select the Firebase project you have created.
+1. On the command line run `firebase serve -p 8081` using the Firebase CLI tool to launch a local server.
+1. Open [http://localhost:8081](http://localhost:8081) in your browser.
+4. Click **REQUEST PERMISSION** button to request permission for the app to send notifications to the browser.
+5. Use the generated Instance ID token (IID Token) to send an HTTP request to FCM that delivers the message to the web application, inserting appropriate values for [`YOUR-SERVER-KEY`](https://console.firebase.google.com/project/_/settings/cloudmessaging) and `YOUR-IID-TOKEN`.
+
+### HTTP
+```
+POST /fcm/send HTTP/1.1
+Host: fcm.googleapis.com
+Authorization: key=YOUR-SERVER-KEY
+Content-Type: application/json
+
+{
+ "notification": {
+ "title": "Portugal vs. Denmark",
+ "body": "5 to 1",
+ "icon": "firebase-logo.png",
+ "click_action": "http://localhost:8081"
+ },
+ "to": "YOUR-IID-TOKEN"
+}
+```
+
+### Fetch
+```js
+var key = 'YOUR-SERVER-KEY';
+var to = 'YOUR-IID-TOKEN';
+var notification = {
+ 'title': 'Portugal vs. Denmark',
+ 'body': '5 to 1',
+ 'icon': 'firebase-logo.png',
+ 'click_action': 'http://localhost:8081'
+};
+
+fetch('https://fcm.googleapis.com/fcm/send', {
+ 'method': 'POST',
+ 'headers': {
+ 'Authorization': 'key=' + key,
+ 'Content-Type': 'application/json'
+ },
+ 'body': JSON.stringify({
+ 'notification': notification,
+ 'to': to
+ })
+}).then(function(response) {
+ console.log(response);
+}).catch(function(error) {
+ console.error(error);
+})
+```
+
+### cURL
+```
+curl -X POST -H "Authorization: key=YOUR-SERVER-KEY" -H "Content-Type: application/json" -d '{
+ "notification": {
+ "title": "Portugal vs. Denmark",
+ "body": "5 to 1",
+ "icon": "firebase-logo.png",
+ "click_action": "http://localhost:8081"
+ },
+ "to": "YOUR-IID-TOKEN"
+}' "https://fcm.googleapis.com/fcm/send"
+```
+
+### App focus
+When the app has the browser focus, the received message is handled through
+the `onMessage` callback in `index.html`. When the app does not have browser
+focus then the `setBackgroundMessageHandler` callback in `firebase-messaging-sw.js`
+is where the received message is handled.
+
+The browser gives your app focus when both:
+
+1. Your app is running in the currently selected browser tab.
+2. The browser tab's window currently has focus, as defined by the operating system.
+
+Support
+-------
+
+https://firebase.google.com/support/
+
+License
+-------
+
+© Google, 2016. Licensed under an [Apache-2](../LICENSE) license.
diff --git a/ChatService/public/chat.html b/ChatService/public/chat.html
new file mode 100644
index 0000000000000000000000000000000000000000..fd7fdb8c47b095f62329d2593fe2e57d546eee30
--- /dev/null
+++ b/ChatService/public/chat.html
@@ -0,0 +1,52 @@
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<link rel="stylesheet" href="chatstyle.css">
+<script src="//cdn.bootcss.com/angular.js/1.4.3/angular.min.js"></script>
+<div class="container">
+ <div class="row">
+
+ <div class="col-sm-8">
+ <div class="chatbody">
+ <div class="panel panel-primary">
+ <div class="panel-body msg_container_base">
+
+ <div class="row msg_container base_sent">
+ <div class="col-md-10 col-xs-10">
+ <div class="messages msg_sent">
+ <p>that mongodb thing looks good, huh?
+ tiny master db, and huge document store</p>
+ <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
+ </div>
+ </div>
+ <div class="col-md-2 col-xs-2 avatar">
+ <!-- <img src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg" class=" img-responsive "> -->
+ </div>
+ </div>
+
+ <div class="row msg_container base_receive">
+ <div class="col-md-2 col-xs-2 avatar">
+ <!-- <img src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg" class=" img-responsive "> -->
+ </div>
+ <div class="col-md-10 col-xs-10">
+ <div class="messages msg_receive">
+ <p>that mongodb thing looks good, huh?
+ tiny master db, and huge document store</p>
+ <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ <div class="panel-footer">
+ <div class="input-group">
+ <input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Write your message here..." style="width:85%" />
+ <span class="input-group-btn">
+ <button class="btn btn-primary btn-sm" id="btn-chat"><i class="fa fa-send fa-1x" aria-hidden="true"></i></button>
+ </span>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/ChatService/public/firebase-logo.png b/ChatService/public/firebase-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..c498b958bb02961ead9bb0f2637ac2f6248af02d
Binary files /dev/null and b/ChatService/public/firebase-logo.png differ
diff --git a/ChatService/public/firebase-messaging-sw.js b/ChatService/public/firebase-messaging-sw.js
new file mode 100644
index 0000000000000000000000000000000000000000..d05db758f230a15bf4ec9d17f7d834da6ef65321
--- /dev/null
+++ b/ChatService/public/firebase-messaging-sw.js
@@ -0,0 +1,50 @@
+// Import and configure the Firebase SDK
+// These scripts are made available when the app is served or deployed on Firebase Hosting
+// If you do not serve/host your project using Firebase Hosting see https://firebase.google.com/docs/web/setup
+importScripts('/__/firebase/3.9.0/firebase-app.js');
+importScripts('/__/firebase/3.9.0/firebase-messaging.js');
+importScripts('/__/firebase/init.js');
+
+const messaging = firebase.messaging();
+
+/**
+ * Here is is the code snippet to initialize Firebase Messaging in the Service
+ * Worker when your app is not hosted on Firebase Hosting.
+
+ // [START initialize_firebase_in_sw]
+ // Give the service worker access to Firebase Messaging.
+ // Note that you can only use Firebase Messaging here, other Firebase libraries
+ // are not available in the service worker.
+ importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js');
+ importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js');
+
+ // Initialize the Firebase app in the service worker by passing in the
+ // messagingSenderId.
+ firebase.initializeApp({
+ 'messagingSenderId': 'YOUR-SENDER-ID'
+ });
+
+ // Retrieve an instance of Firebase Messaging so that it can handle background
+ // messages.
+ const messaging = firebase.messaging();
+ // [END initialize_firebase_in_sw]
+ **/
+
+
+// If you would like to customize notifications that are received in the
+// background (Web app is closed or not in browser focus) then you should
+// implement this optional method.
+// [START background_handler]
+messaging.setBackgroundMessageHandler(function(payload) {
+ console.log('[firebase-messaging-sw.js] Received background message ', payload);
+ // Customize notification here
+ const notificationTitle = 'Background Message Title';
+ const notificationOptions = {
+ body: 'Background Message body.',
+ icon: '/firebase-logo.png'
+ };
+
+ return self.registration.showNotification(notificationTitle,
+ notificationOptions);
+});
+// [END background_handler]
diff --git a/ChatService/public/firebase.json b/ChatService/public/firebase.json
new file mode 100644
index 0000000000000000000000000000000000000000..c2053b724f8b3a32e67f0608b133202838a9e87a
--- /dev/null
+++ b/ChatService/public/firebase.json
@@ -0,0 +1,8 @@
+{
+ "hosting": {
+ "public": "./",
+ "ignore": [
+ "firebase.json"
+ ]
+ }
+}
diff --git a/ChatService/public/index.html b/ChatService/public/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..0f1e333b902fab1104436240ba0a76beb3861687
--- /dev/null
+++ b/ChatService/public/index.html
@@ -0,0 +1,335 @@
+<!DOCTYPE html>
+<!--
+Copyright (c) 2016 Google Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<html>
+<head>
+ <meta charset=utf-8 />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Firebase Cloud Messaging Example</title>
+
+ <!-- Material Design Theming -->
+ <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.orange-indigo.min.css">
+ <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+ <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+ <link rel="stylesheet" href="style/main.css">
+ <link rel="stylesheet" href="style/chatstyle.css">
+ <script src="//cdn.bootcss.com/angular.js/1.4.3/angular.min.js"></script>
+ <link rel="manifest" href="/manifest.json">
+</head>
+<body>
+<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-header">
+
+ <!-- Header section containing title -->
+ <header class="mdl-layout__header mdl-color-text--white mdl-color--light-blue-700">
+ <div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
+ <div class="mdl-layout__header-row mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop">
+ <h3>Firebase Cloud Messaging</h3>
+ </div>
+ </div>
+ </header>
+
+ <main class="mdl-layout__content mdl-color--grey-100">
+ <div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
+
+ <!-- Container for the Table of content -->
+ <div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop">
+ <div class="mdl-card__supporting-text mdl-color-text--grey-600">
+ <!-- div to display the generated Instance ID token -->
+ <div id="token_div" style="display: none;">
+ <h4>Instance ID Token</h4>
+ <p id="token" style="word-break: break-all;"></p>
+ <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored"
+ onclick="deleteToken()">Delete Token</button>
+ </div>
+ <!-- div to display the UI to allow the request for permission to
+ notify the user. This is shown if the app has not yet been
+ granted permission to notify. -->
+ <div id="permission_div" style="display: none;">
+ <h4>Needs Permission</h4>
+ <p id="token"></p>
+ <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored"
+ onclick="requestPermission()">Request Permission</button>
+ </div>
+ <!-- div to display messages received by this app. -->
+ <div id="messages"></div>
+ </div>
+ </div>
+
+ </div>
+ </main>
+ <div class="container">
+ <div class="row">
+
+ <div class="col-sm-8">
+ <div class="chatbody">
+ <div class="panel panel-primary">
+ <div class="panel-body msg_container_base">
+
+ <div class="row msg_container base_sent">
+ <div class="col-md-10 col-xs-10">
+ <div class="messages msg_sent">
+ <p>that mongodb thing looks good, huh?
+ tiny master db, and huge document store</p>
+ <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
+ </div>
+ </div>
+ <div class="col-md-2 col-xs-2 avatar">
+ <!-- <img src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg" class=" img-responsive "> -->
+ </div>
+ </div>
+
+ <div class="row msg_container base_receive">
+ <div class="col-md-2 col-xs-2 avatar">
+ <!-- <img src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg" class=" img-responsive "> -->
+ </div>
+ <div class="col-md-10 col-xs-10">
+ <div class="messages msg_receive">
+ <p>that mongodb thing looks good, huh?
+ tiny master db, and huge document store</p>
+ <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ <div class="panel-footer">
+ <div class="input-group">
+ <input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Write your message here..." style="width:85%" />
+ <span class="input-group-btn">
+ <button class="btn btn-primary btn-sm" id="btn-chat"><i class="fa fa-send fa-1x" aria-hidden="true"></i></button>
+ </span>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+</div>
+
+<!-- Import and configure the Firebase SDK -->
+<!-- These scripts are made available when the app is served or deployed on Firebase Hosting -->
+<!-- If you do not serve/host your project using Firebase Hosting see https://firebase.google.com/docs/web/setup -->
+<script src="/__/firebase/3.9.0/firebase-app.js"></script>
+<script src="/__/firebase/3.9.0/firebase-messaging.js"></script>
+<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>
+<script>
+ // Initialize Firebase
+ // TODO: Replace with your project's customized code snippet
+ var config = {
+ apiKey: "AIzaSyAAjgP3DHtLCHGBgP5XDud8HTKkyw_0-vU",
+ authDomain: "chatservice-kia.firebaseapp.com",
+ databaseURL: "https://chatservice-kia.firebaseio.com",
+ projectId: "chatservice-kia",
+ storageBucket: "chatservice-kia.appspot.com",
+ messagingSenderId: "616813324575"
+ };
+ firebase.initializeApp(config);
+</script>
+<script>
+ // [START get_messaging_object]
+ // Retrieve Firebase Messaging object.
+ const messaging = firebase.messaging();
+ // [END get_messaging_object]
+
+ // IDs of divs that display Instance ID token UI or request permission UI.
+ const tokenDivId = 'token_div';
+ const permissionDivId = 'permission_div';
+
+ // [START refresh_token]
+ // Callback fired if Instance ID token is updated.
+ messaging.onTokenRefresh(function() {
+ messaging.getToken()
+ .then(function(refreshedToken) {
+ console.log('Token refreshed.');
+ // Indicate that the new Instance ID token has not yet been sent to the
+ // app server.
+ setTokenSentToServer(false);
+ // Send Instance ID token to app server.
+ sendTokenToServer(refreshedToken);
+ // [START_EXCLUDE]
+ // Display new Instance ID token and clear UI of all previous messages.
+ resetUI();
+ // [END_EXCLUDE]
+ })
+ .catch(function(err) {
+ console.log('Unable to retrieve refreshed token ', err);
+ showToken('Unable to retrieve refreshed token ', err);
+ });
+ });
+ // [END refresh_token]
+
+ // [START receive_message]
+ // Handle incoming messages. Called when:
+ // - a message is received while the app has focus
+ // - the user clicks on an app notification created by a sevice worker
+ // `messaging.setBackgroundMessageHandler` handler.
+ messaging.onMessage(function(payload) {
+ console.log("Message received. ", payload);
+ // [START_EXCLUDE]
+ // Update the UI to include the received message.
+ appendMessage(payload);
+ // [END_EXCLUDE]
+ });
+ // [END receive_message]
+
+ function resetUI() {
+ clearMessages();
+ showToken('loading...');
+ // [START get_token]
+ // Get Instance ID token. Initially this makes a network call, once retrieved
+ // subsequent calls to getToken will return from cache.
+ messaging.getToken()
+ .then(function(currentToken) {
+ if (currentToken) {
+ sendTokenToServer(currentToken);
+ updateUIForPushEnabled(currentToken);
+ } else {
+ // Show permission request.
+ console.log('No Instance ID token available. Request permission to generate one.');
+ // Show permission UI.
+ updateUIForPushPermissionRequired();
+ setTokenSentToServer(false);
+ }
+ })
+ .catch(function(err) {
+ console.log('An error occurred while retrieving token. ', err);
+ showToken('Error retrieving Instance ID token. ', err);
+ setTokenSentToServer(false);
+ });
+ }
+ // [END get_token]
+
+ function showToken(currentToken) {
+ // Show token in console and UI.
+ var tokenElement = document.querySelector('#token');
+ tokenElement.textContent = currentToken;
+ }
+
+ // Send the Instance ID token your application server, so that it can:
+ // - send messages back to this app
+ // - subscribe/unsubscribe the token from topics
+ function sendTokenToServer(currentToken) {
+ if (!isTokenSentToServer()) {
+ console.log('Sending token to server...');
+ // TODO(developer): Send the current token to your server.
+ setTokenSentToServer(true);
+ } else {
+ console.log('Token already sent to server so won\'t send it again ' +
+ 'unless it changes');
+ }
+
+ }
+
+ function isTokenSentToServer() {
+ return window.localStorage.getItem('sentToServer') == 1;
+ }
+
+ function setTokenSentToServer(sent) {
+ window.localStorage.setItem('sentToServer', sent ? 1 : 0);
+ }
+
+ function showHideDiv(divId, show) {
+ const div = document.querySelector('#' + divId);
+ if (show) {
+ div.style = "display: visible";
+ } else {
+ div.style = "display: none";
+ }
+ }
+
+ function requestPermission() {
+ console.log('Requesting permission...');
+ // [START request_permission]
+ messaging.requestPermission()
+ .then(function() {
+ console.log('Notification permission granted.');
+ // TODO(developer): Retrieve an Instance ID token for use with FCM.
+ // [START_EXCLUDE]
+ // In many cases once an app has been granted notification permission, it
+ // should update its UI reflecting this.
+ resetUI();
+ // [END_EXCLUDE]
+ })
+ .catch(function(err) {
+ console.log('Unable to get permission to notify.', err);
+ });
+ // [END request_permission]
+ }
+
+ function deleteToken() {
+ // Delete Instance ID token.
+ // [START delete_token]
+ messaging.getToken()
+ .then(function(currentToken) {
+ messaging.deleteToken(currentToken)
+ .then(function() {
+ console.log('Token deleted.');
+ setTokenSentToServer(false);
+ // [START_EXCLUDE]
+ // Once token is deleted update UI.
+ resetUI();
+ // [END_EXCLUDE]
+ })
+ .catch(function(err) {
+ console.log('Unable to delete token. ', err);
+ });
+ // [END delete_token]
+ })
+ .catch(function(err) {
+ console.log('Error retrieving Instance ID token. ', err);
+ showToken('Error retrieving Instance ID token. ', err);
+ });
+
+ }
+
+ // Add a message to the messages element.
+ function appendMessage(payload) {
+ const messagesElement = document.querySelector('#messages');
+ const dataHeaderELement = document.createElement('h5');
+ const dataElement = document.createElement('pre');
+ dataElement.style = 'overflow-x:hidden;'
+ dataHeaderELement.textContent = 'Received message:';
+ dataElement.textContent = JSON.stringify(payload, null, 2);
+ messagesElement.appendChild(dataHeaderELement);
+ messagesElement.appendChild(dataElement);
+ }
+
+ // Clear the messages element of all children.
+ function clearMessages() {
+ const messagesElement = document.querySelector('#messages');
+ while (messagesElement.hasChildNodes()) {
+ messagesElement.removeChild(messagesElement.lastChild);
+ }
+ }
+
+ function updateUIForPushEnabled(currentToken) {
+ showHideDiv(tokenDivId, true);
+ showHideDiv(permissionDivId, false);
+ showToken(currentToken);
+ }
+
+ function updateUIForPushPermissionRequired() {
+ showHideDiv(tokenDivId, false);
+ showHideDiv(permissionDivId, true);
+ }
+
+ resetUI();
+</script>
+</body>
+</html>
diff --git a/ChatService/public/manifest.json b/ChatService/public/manifest.json
new file mode 100644
index 0000000000000000000000000000000000000000..10b861e181d5c1f7af8fa483ca379220aca0d358
--- /dev/null
+++ b/ChatService/public/manifest.json
@@ -0,0 +1,5 @@
+{
+ "//_comment1": "Some browsers will use this to enable push notifications.",
+ "//_comment2": "It is the same for all projects, this is not your project's sender ID",
+ "gcm_sender_id": "103953800507"
+}
diff --git a/ChatService/public/script/firebase_init.js b/ChatService/public/script/firebase_init.js
new file mode 100644
index 0000000000000000000000000000000000000000..30417063dadccda746bb6313df7c3efb3c509205
--- /dev/null
+++ b/ChatService/public/script/firebase_init.js
@@ -0,0 +1,9 @@
+// Initialize Firebase
+var config = {
+ apiKey: "AIzaSyAAjgP3DHtLCHGBgP5XDud8HTKkyw_0-vU",
+ authDomain: "chatservice-kia.firebaseapp.com",
+ databaseURL: "https://chatservice-kia.firebaseio.com",
+ projectId: "chatservice-kia",
+ storageBucket: "chatservice-kia.appspot.com",
+ messagingSenderId: "616813324575"
+};
\ No newline at end of file
diff --git a/ChatService/public/style/chatstyle.css b/ChatService/public/style/chatstyle.css
new file mode 100644
index 0000000000000000000000000000000000000000..809d5d07dd09c8cb23759c77dc2e24f236b12171
--- /dev/null
+++ b/ChatService/public/style/chatstyle.css
@@ -0,0 +1,165 @@
+.chatperson{
+ display: block;
+ border-bottom: 1px solid #eee;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ white-space: nowrap;
+ overflow: hidden;
+ margin-bottom: 15px;
+ padding: 4px;
+}
+.chatperson:hover{
+ text-decoration: none;
+ border-bottom: 1px solid orange;
+}
+.namechat {
+ display: inline-block;
+ vertical-align: middle;
+}
+.chatperson .chatimg img{
+ width: 40px;
+ height: 40px;
+ background-image: url('http://i.imgur.com/JqEuJ6t.png');
+}
+.chatperson .pname{
+ font-size: 18px;
+ padding-left: 5px;
+}
+.chatperson .lastmsg{
+ font-size: 12px;
+ padding-left: 5px;
+ color: #ccc;
+}
+
+body{
+ height:400px;
+ position: fixed;
+ bottom: 0;
+}
+.col-md-2, .col-md-10{
+ padding:0;
+}
+.panel{
+ margin-bottom: 0px;
+}
+.chat-window{
+ bottom:0;
+ position:fixed;
+ float:right;
+ margin-left:10px;
+}
+.chat-window > div > .panel{
+ border-radius: 5px 5px 0 0;
+}
+.icon_minim{
+ padding:2px 10px;
+}
+.msg_container_base{
+ background: #e5e5e5;
+ margin: 0;
+ padding: 0 10px 10px;
+ max-height:300px;
+ overflow-x:hidden;
+}
+.top-bar {
+ background: #666;
+ color: white;
+ padding: 10px;
+ position: relative;
+ overflow: hidden;
+}
+.msg_receive{
+ padding-left:0;
+ margin-left:0;
+}
+.msg_sent{
+ padding-bottom:20px !important;
+ margin-right:0;
+}
+.messages {
+ background: white;
+ padding: 10px;
+ border-radius: 2px;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+ max-width:100%;
+}
+.messages > p {
+ font-size: 13px;
+ margin: 0 0 0.2rem 0;
+ }
+.messages > time {
+ font-size: 11px;
+ color: #ccc;
+}
+.msg_container {
+ padding: 10px;
+ overflow: hidden;
+ display: flex;
+}
+img {
+ display: block;
+ width: 100%;
+}
+.avatar {
+ position: relative;
+ width:50px;
+}
+.base_receive > .avatar:after {
+ content: "";
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 0;
+ height: 0;
+ border: 5px solid #FFF;
+ border-left-color: rgba(0, 0, 0, 0);
+ border-bottom-color: rgba(0, 0, 0, 0);
+}
+
+.base_sent {
+ justify-content: flex-end;
+ align-items: flex-end;
+}
+.base_sent > .avatar:after {
+ content: "";
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 0;
+ height: 0;
+ border: 5px solid white;
+ border-right-color: transparent;
+ border-top-color: transparent;
+ box-shadow: 1px 1px 2px rgba(black, 0.2); // not quite perfect but close
+}
+
+.msg_sent > time{
+ float: right;
+}
+
+
+
+.msg_container_base::-webkit-scrollbar-track
+{
+ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+ background-color: #F5F5F5;
+}
+
+.msg_container_base::-webkit-scrollbar
+{
+ width: 12px;
+ background-color: #F5F5F5;
+}
+
+.msg_container_base::-webkit-scrollbar-thumb
+{
+ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+ background-color: #555;
+}
+
+.btn-group.dropup{
+ position:fixed;
+ left:0px;
+ bottom:0;
+}
\ No newline at end of file
diff --git a/ChatService/public/style/main.css b/ChatService/public/style/main.css
new file mode 100644
index 0000000000000000000000000000000000000000..77515e7fa5c99ce7245ed9f7ce0125fe53ea8c5e
--- /dev/null
+++ b/ChatService/public/style/main.css
@@ -0,0 +1,54 @@
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+html, body {
+ font-family: 'Roboto', 'Helvetica', sans-serif;
+}
+a {
+ text-decoration: none;
+}
+li a {
+ text-decoration: underline;
+ color: #0288d1;
+}
+.mdl-grid {
+ max-width: 1024px;
+ margin: auto;
+}
+.mdl-layout__header-row {
+ padding: 0;
+}
+.quickstart-user-details-container {
+ margin-top: 20px;
+ line-height: 25px;
+}
+#quickstart-sign-in-status {
+ font-weight: bold;
+}
+pre {
+ overflow-x: scroll;
+ line-height: 18px;
+}
+code {
+ white-space: pre-wrap;
+ word-break: break-all;
+}
+h3 {
+ background: url('/firebase-logo.png') no-repeat;
+ background-size: 40px;
+ padding-left: 50px;
+ color: white;
+}