added cool css and changed html

root · root · commit 06ef96c2d7e1 · 2022-06-24T17:43:21.000Z
diff --git a/index.html b/index.html
@@ -1,17 +1,35 @@
-<h5>Type something</h5>
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="style.css">
+  </head>
 
-<h1>Username</h1>
-<input type="text" id="username" name="username"><br><br>
+  <body>
+    <div class="content">
+      <h5>Username</h5>
+      <input type="text" id="username" name="username">
+      <br><br>
+      <h2>Type something</h2>
+      <div class="chatBox">
+	<ul style="list-style-type:none;" id="msgList">
+	</ul>
+	<div>
+	  <input type="text" id="message" name="message">
+	  <input type="submit" value="Send" onclick="submit()">
+	</div>
+      </div>
 
-<h1>Message</h1>
-<input type="text" id="message" name="message"><br><br>
 
-<input type="submit" value="Send" onclick="submit()">
 
-<ul style="list-style-type:none;" id="msgList">
-  
-</ul>
 
-<script src="./script.js">
+      <!-- <h1>Message</h1> -->
+      <!-- <input type="text" id="message" name="message"><br><br> -->
 
-</script>
+
+
+      <script src="./script.js">
+
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/server.rb b/server.rb
@@ -6,14 +6,11 @@
 server = TCPServer.new(4141)
 puts "Listening on port 4141"
 
- messages = FifoCache.new(10)
-# messages = Queue.new
+messages = FifoCache.new(10)
 
 loop {
-  #get our inital connection
-  #client = server.accept
+  #get our inital connection puts it on a thread
   Thread.start(server.accept) do |client|
-    #client = server.accept
     puts Thread.current
     #grab verbage and path requested
     method, path = client.gets.split
@@ -38,6 +35,19 @@
         client.puts(headersjs)
         client.puts(respjs)
 
+      elsif (path == '/style.css')
+        #load file
+        respcss = File.read('./style.css')
+        #grab header
+        headerscss = ["HTTP/1.1 201 OK",
+                      "Server: Ruby",
+                      "Content-Type: text/css; charset=utf-8",
+                      "Sending: css",
+                      "Content-Length: #{respcss.length}\r\n\r\n"].join("\r\n")
+        #serve content
+        client.puts(headerscss)
+        client.puts(respcss)
+        
       #return message data structure as json
       elsif (path == '/messages')
         resp = []
@@ -90,9 +100,6 @@
 
       data = client.read(reqHeaders["Content-Length"].to_i)
 
-      #puts data
-      #puts client.gets
-
       respHeaders = ["HTTP/1.1 200 OK"]
 
       #print the headers
diff --git a/style.css b/style.css
@@ -0,0 +1,52 @@
+body {
+    background: black;
+    display: grid;
+    justify-items: center;
+}
+
+h5 {    
+    margin-bottom: 10px;
+}
+
+.chatBox {
+    color: white;
+    background-color: #8c8c8c52;
+    padding: 10px;
+    margin-left: 25%;
+    margin-right: 25%;
+}
+
+.content {
+    color: white;
+    font: 1.3rem Inconsolata, monospace;
+    background-color: black;
+    background-image: radial-gradient(
+	rgba(0, 150, 0, 0.75), black 120%
+    );
+    text-shadow: 0 0 5px #C8C8C8;
+    height: 82vh;
+    width: 61vw;
+    display: grid;
+    align-items: center;
+    justify-items: center;
+    align-content: center;
+    border-radius: 40px;
+    box-shadow: 0 0 50px 50px #221717;
+    &::after {
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	background: repeating-linear-gradient(
+	    0deg,
+	    rgba(black, 0.15),
+	    rgba(black, 0.15) 1px,
+	    transparent 1px,
+	    transparent 2px
+	);
+    }
+}
+
+
