Misc changes and fixes.

.gitignore

@@ -1,6 +1,3 @@
 streamchat.code-workspace
-index.html
-stream.css
 assets/
-todo.txt
+todo.txt
-logout.js

chat.css

@@ -5,39 +5,53 @@ html {
 }
 
 form {
-    width: 100%
+    width: 100%;
+    overflow:hidden;
 }
 
 input {
-    padding: 3%;
+    padding: 2%;
+    width: 100%;
+    background-color: #55CDFC;
+    border-style: none;
+    border-bottom-style: solid;
+    border-bottom-color: black;
+    border-bottom-width: 1px;
+    font-family: "Lucida Console", "Courier New", monospace;
 }
 
 label {
-    visibility: hidden;
+    display: block;
+    
+}
+
+#loggeduser {
+    font-size: 30px;
 }
 
 #chatbox {
     background-color: white;
     padding: 1rem;
     box-shadow: 10px 10px 10px black;
-    width: 40rem;
+    width: 30rem;
     height: 40rem;
     display: inline-flex;
     flex-direction: column;
 }
 
 #innerchatbox {
-    background-color: rgba(60, 60, 60, .75);
+    background-color: rgba(60, 60, 60, .85);
     width: 100%;
     height: 90%;
     overflow-y: scroll;
     text-align: left;
+    color: white;
 }
 
 #loggeduser {
-    padding-top: 1%
+    padding-top: 1.5%
 }
 
-#error {
+#errormessage {
     padding-top: 2.5%;
 }

chat.html

@@ -22,15 +22,30 @@
             </div>
             
             <form autocomplete="off">
-            <label for="message">Input Message Here:</label>
             <input type="text" id="message" name="message" required>
+            <label for="message">Input Message Above</label>
             </form>
 
         </div>
 
         <div id="loggeduser"></div>
 
+        <script type="text/javascript">
+            window.onload = function() {
+              let a = document.getElementById("logoutlink");
+              a.onclick = function() {
+                logout()
+                return false;
+              }
+            }
+        </script>
+
+        <a id="logoutlink" href="stream.html">(logout)</a> 
+
+        <div id="errormessage"></div>
+
         <script src="chat.js"></script>
+        <script src="logout.js"></script>
 
     </body>
 

chat.js

@@ -11,7 +11,7 @@ form.addEventListener("submit", async function (event) {
     event.preventDefault();
     const formData = new FormData(form);
 
-    formMessage = formData.get('message');
+    formMessage = formData.get('message').toString();
 
     sendMessage()
 
@@ -42,7 +42,7 @@ async function fetchMessages() {
     document.getElementById("innerchatbox").innerHTML = ""
 
     for (const message of recievedMessages) {
-      printText(message.user.bold() + ": " + message.body);
+      printText(message.user.bold().toString() + ": " + message.body.toString());
     }
 
         

index.css

@@ -0,0 +1,66 @@
+html {
+    background: #F7A8B8;
+    text-align: center;
+    font-family: "Lucida Console", "Courier New", monospace;
+}
+
+a {
+    color: black;
+    font-weight: bold;
+    text-decoration: none;
+}
+
+#streamchat {
+    display: flex;
+    height: 100%;
+    max-width: 960px;
+    margin: 0 auto;
+
+}
+
+#stream {
+    background-color: white;
+    padding: 5%;
+    box-shadow: 10px 10px 10px black;
+    border-radius: 5px;
+    width: 854px;
+    height: 480px;
+    margin-right: 0.3em;
+    margin-left: -40%;
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+#chatbox {
+    flex: 1;
+    height: 50rem;
+    margin-left: 0.3em;
+    margin-right: -50%;
+    border: none;
+}
+
+.navigation-list {
+    display: flex;
+    list-style-type: none;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: center;
+    padding: 0;
+}
+
+.buttons {
+        width: 150px;
+        background-color: #55CDFC;
+        margin: auto;
+        margin-bottom: 2%;
+        display: inline-flex;
+        justify-content: center;
+        opacity: 0.8;
+        font-size: larger;
+        color: black;
+        padding: 15px;
+        border-bottom: solid;
+        border-left: solid;
+        border-color: white;
+        border-width: 1px;
+}