Some chat design, reverted asset management - added klingon

3 files changed, 64 insertions, 19 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index 38ecd23..47a8141 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -21,7 +21,7 @@ body {
     height: 100%;

     width: 100%;

     overflow: hidden;

-    background-color: #0B1D33;

+    background-color: #0c1d34;

     color: #426A91;

     margin: 0;

     padding: 0;

@@ -55,7 +55,7 @@ FLICKITY
     height: -webkit-calc(100vh - 75px);

     height: -o-calc(100vh - 75px);

     height: calc(100vh - 75px);

-    background: #0B1D33;

+    background: #0c1d34;

     counter-increment: carousel-cell;

 }

 

@@ -99,12 +99,40 @@ GENERAL TABS
 CHAT WINDOW

 **********/

 .ChatWindow {

+    position: relative;

+    margin: 5px;

+    height: 100%;

+}

+

+.ChatMessages {

     height: 100%;

+    width: 100%;

+}

+

+.ChatMessage {

+    display: block;

     position: relative;

+    border-radius: 25px;

+    min-width: 100px;

+    max-width: 50%;

+    width: auto;

+    height: auto;

+    word-wrap: break-word;

+    padding: 10px;

+}

+

+.ServerChatMessage {

+    text-align: center;

 }

 

-.ChatResponses {

+.MessageSent {

+    float: right;

+    background-color: #12213b;

+}

 

+.MessageReceived {

+    float: left;

+    background-color: #13223c;

 }

 

 .ChatInput {

@@ -115,7 +143,7 @@ CHAT WINDOW
     z-index: 600;

     width: 100%;

     height: 40px;

-    border:none;

+    border: none;

     color: #FFF;

     background-color: #13223C;

 }

@@ -124,7 +152,6 @@ CHAT WINDOW
     display: none;

 }

 

-

 /*****

 NAVBAR

 *****/

@@ -138,7 +165,7 @@ NAVBAR
     left: 0;

     height: 75px;

     width: 100%;

-    background-color: #13223C;

+    background-color: #13223c;

 }

 

 .NavbarIconWrap {

@@ -159,14 +186,14 @@ NAVBAR
     left: 0;

     width: 20% !important;

     height: 2px;

-    background: #FF00A2;

+    background: #eb12b5;

 }

 

 .ActiveTab {

     -webkit-transition: -moz-transform .3s ease-out;

     -moz-transition: -webkit-transform .3s ease-out;

 

-    filter: invert(16%) sepia(77%) saturate(6174%) hue-rotate(316deg) brightness(107%) contrast(110%);

-    -webkit-filter: invert(16%) sepia(77%) saturate(6174%) hue-rotate(316deg) brightness(107%) contrast(110%);

-    -moz-filter: invert(16%) sepia(77%) saturate(6174%) hue-rotate(316deg) brightness(107%) contrast(110%);

+    filter: invert(19%) sepia(93%) saturate(4612%) hue-rotate(303deg) brightness(98%) contrast(101%);

+    -webkit-filter: invert(19%) sepia(93%) saturate(4612%) hue-rotate(303deg) brightness(98%) contrast(101%);

+    -moz-filter: invert(19%) sepia(93%) saturate(4612%) hue-rotate(303deg) brightness(98%) contrast(101%);

 }

diff --git a/assets/js/chat.js b/assets/js/chat.js
index c715fbd..bf13a32 100644
--- a/assets/js/chat.js
+++ b/assets/js/chat.js
@@ -32,7 +32,7 @@ if (localStorage.getItem('KeysGenerated') === null || localStorage.getItem('Keys
 

 var ChatTextInput = $("#ChatTextInput");

 var SubscribeTextInput = $("#SubscribeTextInput");

-var ChatResponses = $("#ChatResponses");

+var ChatMessages = $("#ChatMessages");

 

 var WebSocket = new WebSocket('wss://marvinborner.ddnss.de:1337');

 WebSocket.onopen = function () {

@@ -41,17 +41,21 @@ WebSocket.onopen = function () {
 WebSocket.onmessage = function (e) {

     var MessageObject = JSON.parse(e.data);

     if (MessageObject.ServerMessage === false) {

-        ChatResponses.append(MessageObject.Username + " - " + MessageObject.Message + "<br>");

+        if (MessageObject.WasHimself === true) { //MessageObject.Username

+            ChatMessages.append("<div class='ChatMessage MessageSent'>" + MessageObject.Message + "</div><br><br>");

+        } else if (MessageObject.WasHimself === false) {

+            ChatMessages.append("<div class='ChatMessage MessageReceived'>" + MessageObject.Message + "</div><br><br>");

+        }

     } else if (MessageObject.ServerMessage === true) {

         if (MessageObject.ServerMessageType === "GroupJoin") {

             if (MessageObject.WasHimself === false) {

-                ChatResponses.append(MessageObject.Username + " <span data-lang='joined the group'></span><br>");

+                ChatMessages.append("<div class='ServerChatMessage'>" + MessageObject.Username + " <span class='ServerChatMessage' data-lang='joined the group'></span>.</div><br>");

             } else if (MessageObject.WasHimself === true) {

-                ChatResponses.empty();

-                ChatResponses.append("<span data-lang='You joined the group'> " + MessageObject.GroupName + "</span>.<br>");

+                ChatMessages.empty();

+                ChatMessages.append("<div class='ServerChatMessage'><span data-lang='You joined the group'> " + MessageObject.GroupName + "</span>.</div><br>");

             }

         } else if (MessageObject.ServerMessageType === "UserDisconnect") {

-            ChatResponses.append(MessageObject.Username + " <span data-lang='has disconnected from the server'></span><br>");

+            ChatMessages.append("<div class='ServerChatMessage'>" + MessageObject.Username + " <span data-lang='has disconnected from the server'></span>.</div><br>");

         }

     }

     initiateLanguage(); // need further work (performance)

diff --git a/index.php b/index.php
index a4422d0..8da157a 100644
--- a/index.php
+++ b/index.php
@@ -9,8 +9,11 @@
     <meta name="msapplication-navbutton-color" content="#0B1D33">

     <meta name="apple-mobile-web-app-status-bar-style" content="#0B1D33">

 

+    <link rel="stylesheet" href="assets/css/slick.css">

+    <link rel="stylesheet" href="assets/css/main.css">

+

     <style>

-        <?php include "assets/php/stylesheet.php"; ?>

+        <?php //include "assets/php/stylesheet.php"; ?>

     </style>

 

     <title>Social Network</title>

@@ -53,7 +56,9 @@
             </div>

             <div class="MainInTab">

                 <div class="ChatWindow">

-                    <div id="ChatResponses" class="ChatResponses"></div>

+                    <div id="ChatMessages" class="ChatMessages">

+

+                    </div>

                     <input title="ChatTextInput" id="ChatTextInput" class="ChatInput" type="text"/>

                     <input title="SubscribeTextInput" id="SubscribeTextInput" class="ChatInput" type="text"/>

                 </div>

@@ -104,7 +109,7 @@
 </div>

 

 <script>

-    <?php include "assets/php/scripts.php"; ?>

+    <?php //include "assets/php/scripts.php"; ?>

 </script>

 

 <script>

@@ -116,5 +121,14 @@
     }

 </script>

 

+<script src="assets/js/jquery.js"></script>

+<script src="assets/js/fontawesome.js"></script>

+<script src="assets/js/modernizr.js"></script>

+<script src="assets/js/language.js"></script>

+<script src="assets/js/encryption.js"></script>

+<script src="assets/js/chat.js"></script>

+<script src="assets/js/slick.js"></script>

+<script src="assets/js/main.js"></script>

+

 </body>

 </html>
\ No newline at end of file