Cardshifter · Phrancis · Aug 9, 2015 · Aug 7, 2015 · Aug 7, 2015 · Aug 8, 2015
diff --git a/README.md b/README.md
@@ -1,2 +1,12 @@
 # HTML-Client
 HTML/CSS/JS-based client for Cardshifter
+
+####Primary authors:
+- @SirPython: JavaScript, AngularJS
+- @Phrancis: HTML, CSS
+
+For more information about the Cardshifter project, see:
+
+- [Official website](http://stats.zomis.net/io-web)
+
+- [Primary repository on GitHub](https://github.com/Cardshifter/Cardshifter)
diff --git a/cardshifter.css b/cardshifter.css
@@ -39,7 +39,7 @@ a.csh-dropdown-link:visited {
 a.csh-dropdown-link:hover,
 a.csh-dropdown-link:active  {
     color: #DDDDDD;
-    text-decoration: underline;
+    /*text-decoration: underline;*/
     font-family: Georgia, Times, "Times New Roman", serif;
 }
 
@@ -73,45 +73,16 @@ a.csh-dropdown-link:active  {
 }
 
 
-/* FORMATTING FOR LEFT SIDE NAV MENU */
-
-.csh-left-menu-main {
-    font-size: 1.4em;
-    font-weight: bold;
-    padding-top: 3px;
-    color: #000000;
-    margin: 0px;
-}
+/* FORMATTING FOR SERVER CONSOLE */
 
-.csh-left-menu-sub {
-    font-size: 1.2em;
+div#server-console {
+    font-family: Monaco, Consolas, "Courier New", monospace;
+    font-size: 1.0em;
     font-weight: normal;
-    padding-left: 15px;
-    padding-top: 3px;
-    color: #000000;
-    margin: 0px;
-}
-
-
-.csh-nav-link {
-    color: #000000;
-}
-
-.csh-nav-link:hover
-.csh-nav-link:active  {
-    color: #000000;
-    text-decoration: underline;
-}
-
-.csh-side-nav {
-  margin-top: 25px;
-  background-color: #EEEEEE;
-  padding-bottom: 5px;
-}
-
-
-.csh-margin-top {
-  margin-top: 50px;
+    color: #AAAAAA;
+    background-color: #222222;
+    height: 250px;
+    overflow: scroll;
 }
 
 /* FORMATTING FOR PAGE BODY */
@@ -162,13 +133,13 @@ p, span, table, ul, ol {
 }
 
 pre {
-    font-family: Consolas, Monaco, "Courier New", monospace;
+    font-family: Monaco, Consolas, "Courier New", monospace;
     font-size: 1.1em;
     font-weight: normal;
 }
 
 code {
-    font-family: Consolas, Monaco, "Courier New", monospace;
+    font-family: Monaco, Consolas, "Courier New", monospace;
     font-size: 1.1em;
     color: #336699;
     background-color: #EEEEEE;
@@ -187,7 +158,7 @@ div.contributor {
 /* MOD-SPECIFIC FORMATTING */
 
 .cyborg-font {
-    font-family: Consolas, Monaco, "Courier New", monospace;
+    font-family: Monaco, Consolas, "Courier New", monospace;
 }
 
 .mythos-font {

diff --git a/cardshifter.html b/cardshifter.html
@@ -1,41 +1,37 @@
 <!DOCTYPE html>
 <html ng-app="CardshifterApp">
-    <head>
-        <title>Cardshifter</title>
+<head>
+    <title>Cardshifter</title>
 
-        <!-- Boostrap -->
-        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
+    <!-- Boostrap -->
+    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
 
-        <!-- The main CSS file -->
-        <link href="cardshifter.css" rel="stylesheet"/>
+    <!-- The main CSS file -->
+    <link href="cardshifter.css" rel="stylesheet"/>
+    <link href="lobby/lobby.css" rel="stylesheet"/>
 
-        <!-- AngularJS libraries -->
-        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
-        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
-
-        <!-- The API for communicating with the server -->
-        <script src="server_interface/server_interface.js"></script>
-
-        <!-- Controllers -->
-        <script src="cardshifter.js"></script>
-        <script src="login/login_controller.js"></script>
-        <script src="lobby/lobby_controller.js"></script>
-    </head>
-    <body>
-
-
-
-        <!-- Top Navbar will be injected here -->
+    <!-- AngularJS libraries -->
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
+    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
 
+    <!-- The API for communicating with the server -->
+    <script src="server_interface/server_interface.js"></script>
 
+    <!-- Controllers -->
+    <script src="cardshifter.js"></script>
+    <script src="login/login_controller.js"></script>
+    <script src="lobby/lobby_controller.js"></script>
+</head>
+<body>
 
+<!-- TOP NAV BAR -->
 <nav class="navbar navbar-inverse">
   <div class="container-fluid">
-    
-  <!-- BRAND -->
+
+    <!-- BRAND -->
     <div class="navbar-header">
       <div class="navbar-brand csh-top-link">Cardshifter | {{username}} </div>
-    </div> 
+    </div>
 
     <form class="navbar-form">
 
@@ -49,13 +45,14 @@
         <span class="caret"></span></a>
           <ul class="dropdown-menu">
             <!-- CYBORG CHRONICLES -->
-            <li class="cyborg-font"><a href=#>Cyborg Chronicles</a></li>
-            <li role="separator" class="divider"></li>
+            <li class="cyborg-font">Cyborg Chronicles</li>
             <li class="cyborg-font"><a href=#>Game rules</a></li>
             <li class="cyborg-font"><a href=#>Cards</a></li>
-            <!-- MYTHOS -->
-            <li class="mythos-font"><a href=#>Mythos</a></li>
+
             <li role="separator" class="divider"></li>
+
+            <!-- MYTHOS -->
+            <li class="mythos-font">Mythos</li>
             <li class="mythos-font"><a href=#>Game rules</a></li>
             <li class="mythos-font"><a href=#>Cards</a></li>
           </ul>
@@ -78,24 +75,33 @@
       </li>
     </ul>
 
-
-  <!-- BUTTONS -->
-      <div class="form-group navbar-form navbar-left">
+    <!-- BUTTONS -->
+    <div class="form-group navbar-form navbar-left">
+        <!-- TODO: Implement log-out functionality to disconnect from server and return to `login.html` page -->
         <input name="disconnect_websocket" id="disconnect_websocket" type="button" value="Log Out" class="btn btn-navbar csh-button" />
-      </div>
+    </div>
+    <div class="form-group navbar-form navbar-left">
+        <!-- TODO: Implement functionality to inject or remove `console.html` from below main page section in this file -->
+        <input name="display_console" id="display_console" type="button" value="Console" class="btn btn-navbar csh-button" />
+    </div>
 
     </form>  <!-- /.navbar-form -->
 
   </div>  <!-- /.container-fluid -->
 </nav>
+<!-- / TOP NAV BAR -->
 
+<div class="col-sm-9 col-md-10 main csh-body">
 
+    <!-- Application pages will be injected here -->
+    <div ng-view></div>
 
 
-        <!-- Application pages will be injected here -->
-        <div ng-view></div>
-
-
+    <!--
+      -- Server console page will be injected here when the "Console" button is clicked in `top_navbar`
+      -- It should also be removed when the "Console" button is clicked again
+      -->
 
-    </body>
+</div>
+</body>
 </html>
diff --git a/cardshifter.js b/cardshifter.js
@@ -9,6 +9,5 @@ CardshifterApp.config(function($routeProvider) {
         .when("/lobby", {
             controller: "LobbyController",
             templateUrl: "lobby/lobby.html",
-            css: "lobby/lobby.css"
         })
 });
diff --git a/console/console.html b/console/console.html
@@ -0,0 +1,41 @@
+<!-- SERVER CONSOLE
+  -- To be injected optionally into `cardshifter.html` if the "Console" button is pressed in `top_navbar`.
+  -- Should also be removed if the "Console" button is pressed again.
+  -- Marker has been added into `cardshifter.html` below the ng-view for the main page sections.
+  -->
+
+<div class="panel panel-default">
+
+  <div class="panel-heading">
+    <h1 class="panel-title">Server Console</h1>
+  </div>
+
+  <!-- SERVER MESSAGES WILL BE APPENDED INSIDE THIS DIV -->
+  <div class="panel-body" id="server-console">
+    <!-- "Hello, world!" messages added only for testing purposes, remove once appending actual messages is implemented. -->
+    1 Hello, world!<br>
+    2 Hello, world!<br>
+    3 Hello, world!<br>
+    4 Hello, world!<br>
+    5 Hello, world!<br>
+    6 Hello, world!<br>
+    7 Hello, world!<br>
+    8 Hello, world!<br>
+    9 Hello, world!<br>
+    10 Hello, world!<br>
+    11 Hello, world!<br>
+    12 Hello, world!<br>
+    13 Hello, world!<br>
+    14 Hello, world!<br>
+    15 Hello, world!<br>
+    16 Hello, world!<br>
+    17 Hello, world!<br>
+    18 Hello, world!<br>
+    19 Hello, world!<br>
+    20 Hello, world!<br>
+    21 Hello, world!<br>
+    22 Hello, world!<br>
+    23 Hello, world!<br>
+  </div>
+
+</div>
diff --git a/lobby/lobby.css b/lobby/lobby.css
@@ -0,0 +1,106 @@
+/* WHOLE LOBBY */
+
+#lobby {
+    width: 100%;
+}
+
+/* TABLE HEADERS */
+
+#lobby-headers {
+    font-family: Georgia, Times, "Times New Roman", serif;
+    text-align: center;
+    color: #DDDDDD;
+    background-color: #000000;
+
+}
+
+#lobby-title {
+    font-size: 1.5em;
+    font-weight: bold;
+}
+
+#lobby-deck-builder {}
+
+/* SECTION HEADERS */
+
+#lobby-list-headers {
+    font-family: Georgia, Times, "Times New Roman", serif;
+    font-size: 1.2em;
+}
+
+#lobby-message-list-header {
+    text-align: center;
+}
+
+#lobby-users-list-header {
+    text-align: center;
+}
+
+/* MAIN MESSAGE & USERS SECTIONS */
+
+#lobby-lists {
+    vertical-align: text-top;
+}
+
+#lobby-message-list {
+    font-size: 0.8em; !important
+}
+    /* List of all messages */
+    #lobby-chat-messages {
+        list-style-type: none;
+        padding-left: 0;
+    }
+        /* Each individual message line */
+        #lobby-chat-message {
+        }
+
+#lobby-users-list {
+    font-size: 0.9em;
+    font-family: Georgia, Times, "Times New Roman", serif;
+}
+    /* List of all users */
+    #lobby-users {
+        list-style-type: none;
+        padding-left: 0;
+    }
+        /* Each individual user line */
+        #lobby-user {
+        }
+
+/* FOOTER SECTIONS */
+
+#lobby-message {
+    background-color: #000000;
+    vertical-align: bottom;
+}
+    /* TEXT AREA FOR TYPING CHAT MESSAGES*/
+    #lobby-chat-text-area {
+        outline: none;
+        overflow: auto;
+        vertical-align: middle;
+    }
+
+#lobby-invite {
+    background-color: #000000;
+    text-align: center;
+}
+
+#lobby-mods {}
+
+#lobby-mod-selection {}
+
+    /* DIV CONTAINING RADIO BUTTON AND MOD NAME */
+    #lobby-mod-selector {
+        border: 1;
+    }
+
+/* Game invite accept dialog */
+#lobby-invite-request {
+    font-family: Georgia, Times, "Times New Roman", serif;
+    font-size: 1.6em;
+    text-align: center;
+    background-color: #0033CC;
+    color: #EEEEEE;
+    border-top-color: #FFFFFF;
+    vertical-align: middle;
+}