Merging index

clay-to-n · Jan 6, 2015 · 083ad20 · 083ad20
2 parents 741ad0b + f712f99
commit 083ad20
Show file tree

Hide file tree

Showing 9 changed files with 2,677 additions and 0 deletions.
diff --git a/public/fonts/glyphicons-halflings-regular.eot b/public/fonts/glyphicons-halflings-regular.eot
diff --git a/public/fonts/glyphicons-halflings-regular.svg b/public/fonts/glyphicons-halflings-regular.svg
diff --git a/public/fonts/glyphicons-halflings-regular.ttf b/public/fonts/glyphicons-halflings-regular.ttf
diff --git a/public/fonts/glyphicons-halflings-regular.woff b/public/fonts/glyphicons-halflings-regular.woff
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html ng-app="meanchat">
+  <head>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular.min.js"></script>
+    <script src="/socket.io/socket.io.js"></script>
+    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
+    <link rel="stylesheet" href="/styles/index.css">
+
+
+    <title>Meanchat</title>
+    <style>
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      body { font: 13px Helvetica, Arial; }
+      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
+      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
+      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
+      #messages { list-style-type: none; margin: 0; padding: 0; width:93%; float:left;}
+      #messages li { padding: 5px 10px;}
+      #messages li:nth-child(odd) { background: #eee; }
+      #timestamps {list-style-type: none; margin: 0; padding: 0; width:7%; float:left;}
+      #timestamps li { padding: 5px 10px;text-align: right;}
+      #timestamps li:nth-child(odd) { background: #eee; }
+    </style>
+  </head>
+
+  <body>
+    <div>
+      <label>User:</label>
+      <input id="name" type="text" value="Anonymous">
+      <hr>
+    </div>
+    <ul id="messages"></ul>
+    <ul id="timestamps"></ul>
+    <form action="">
+      <input id="msgText" autocomplete="off" /><button>Send</button>
+    </form>
+
+    <script>
+      var socket = io();
+      var scrollHeight = 0; //keeps track of how tall total messages are to know where to scroll to
+
+      //adding margin so messages don't go behind bottom bar (5px is how tall bottom padding is)
+      $('#messages').css("margin-bottom",($('#bottom-bar').height()+5));
+
+      $('form').submit(function(){
+        var message = {
+          'sender': $('#name').val(),
+          'text': $('#msgText').val()
+        };
+        socket.emit('chat message', message);
+        $('#msgText').val('');
+        return false;
+      });
+      socket.on('chat message', function(message){
+        //adding new message
+        var sender = message['sender'].concat(': ');
+        var msgString = message['text'];
+        $('#messages').append($('<li style="font-weight:bold">').text(sender));
+        $('#messages > li:last-child').append($('<span style="font-weight:normal">').text(msgString));
+        $('#timestamps').append($('<li>').text(message['time']));
+        //make timestamp height match message (10px is padding on message)
+        $('#timestamps > li:last-child').css("height", ($('#messages > li:last-child').height()+10));
+        //moving body to scrollHeight
+        scrollHeight+=($('#messages > li:last-child').height());
+        $('body').scrollTop(scrollHeight); 
+      });
+    </script>
+
+  </body>
+</html>