UI revamp.

Signed-off-by: verxkkj <verxkkj@no-reply@disroot.org>

assets/client.css

@@ -0,0 +1,88 @@
+* {
+  --accent: maroon;
+  --accent-opaque: rgba(128, 0, 0, 0.5);
+  --accent-contrast: black;
+}
+
+html, body {
+    margin: 0;
+    padding: 0;
+  }
+  
+  body {
+    display: grid;
+    grid-template-rows: 100px 1fr 50px;
+    height: 100vh;
+    background-color: black;
+  }
+
+  header {
+    display: flex;
+    align-items: center;
+    padding: 0 20px;
+    background-color: var(--accent);
+    color: white;
+  }
+
+  main {
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+  }
+
+  main .message {
+    align-self: flex-start;
+    margin: 10px;
+    padding: 10px;
+    background-color: #f1f1f1;
+    max-width: 50%;
+    background-color: var(--accent-opaque);
+    color: white;
+    border-radius: 0px 5px 5px 5px;
+    border: 2px solid var(--accent);
+  }
+
+  main .message .time {
+    margin: .5rem 0 0 0;
+    padding: .5rem 0 0 0;
+    font-style: italic;
+    border-top: 1px solid rgba(255, 255, 255, .5);
+  }
+  
+  main .message.owner {
+    align-self: flex-end;
+    background-color: var(--accent);
+    border: 2px solid brown;
+    color: white;
+    border-radius: 5px 5px 0px 5px;
+  }
+  
+  footer  {
+    display: grid;
+    grid-template-columns: 1fr auto;
+  }
+
+  .incomingNickname {
+    font-style: italic;
+  }
+
+  .incomingNickname:hover {
+    color: lightslategray;
+  }
+
+  #composeBox {
+    border: 6px solid var(--accent-opaque);
+    border-right: none;
+    background-color: black;
+    color: white;
+  }
+
+  #composeBox:focus {
+    outline: none;
+  }
+
+  #sendButton {
+    border: 6px solid var(--accent-opaque);
+    background-color: black;
+    color: white;
+  }

assets/client.js

@@ -10,6 +10,13 @@ const nickbox = document.querySelector('#username')
 let incomingNicknames = document.querySelectorAll('.incomingNickname')
 const composeBox = document.querySelector('#composeBox')
 
+composeBox.addEventListener('keypress', function(event) {
+    if (event.key === "Enter") {
+        event.preventDefault();
+        sendMessage();
+    }
+})
+
 function showMessage(owner, message, nickname, timestamp) { 
     const isOwner = nick == nickname
     let html = `<div class="message ${isOwner ? "owner" : ""}">
@@ -56,10 +63,16 @@ ws.addEventListener('message', (event) => {
 })
 
 sendButton.addEventListener('click', () => {
-    if(composeBox.value.startsWith('/nick')) {
+    sendMessage()
-        nick = composeBox.value.split(' ')[1]
-        nickbox.textContent = `${nick} @ ${wsAddr}`;
-    }
-    ws.send(composeBox.value)
-    console.log(composeBox.value)
 })
+
+function sendMessage() {
+    if(composeBox.value !== '') {
+        if(composeBox.value.startsWith('/nick')) {
+            nick = composeBox.value.split(' ')[1]
+            nickbox.textContent = `${nick} @ ${wsAddr}`;
+        }
+        ws.send(composeBox.value)
+        composeBox.value = '';
+    }
+}

assets/login.js

@@ -10,7 +10,8 @@ function connect(address, nick) {
     if(address) {
         const href = window.location.href;
         const dir = href.substring(0, href.lastIndexOf('/')) + "/";
-        window.location.href = `${dir}chat.html?server=${encodeURI(address)}${nick ? `&nick=${nick}` : ""}`
+        // console.log(`redirecting to ${dir}chat.html?server=${encodeURI(address)}${nick ? `&nick=${nick}` : ""}`)
+        window.location.href = `${dir}client.html?server=${encodeURI(address)}${nick ? `&nick=${nick}` : ""}`
     } else {
         alert("No server address provided")
     }

assets/logo.svg

@@ -0,0 +1,10 @@
+<svg width="200" height="400" xmlns="http://www.w3.org/2000/svg">
+
+ <g>
+  <title>Layer 1</title>
+  <g id="svg_24">
+   <path fill="#deb887" id="svg_21" d="m180.14371,223.12513c-9.39951,-15.46988 -20.89914,-27.99437 -32.43408,-36.75574c-13.45947,8.98045 -29.85238,14.44888 -47.72383,14.44888c-17.90654,0 -34.32303,-5.47908 -47.75877,-14.44888c-11.53492,8.76136 -23.0463,21.28585 -32.46888,36.75574c-21.8731,35.91664 -24.2786,72.75794 -5.38638,82.3104c8.46074,4.30308 17.33169,1.09581 26.4964,-6.9493c-1.60761,8.15724 -2.54643,16.99862 -2.54643,26.24646c0,41.0858 17.51959,74.36701 39.11059,74.36701c13.01362,0 19.45575,-12.11844 22.55347,-30.67268c3.0863,18.55425 9.52837,30.67268 22.49483,30.67268c21.62647,0 39.14623,-33.28121 39.14623,-74.36701c0,-9.24785 -0.93913,-18.08923 -2.58168,-26.24646c9.18796,8.04511 18.04725,11.25238 26.53148,6.9493c18.8806,-9.55246 16.43957,-46.39378 -5.43292,-82.3104l-0.00001,0zm-80.18101,-36.32279c36.32939,0 65.79442,-26.84513 65.79442,-59.96061s-29.46503,-59.96069 -65.79442,-59.96069c-36.34175,0 -65.83005,26.85047 -65.83005,59.96069s29.4883,59.96061 65.83005,59.96061z" stroke="#000"/>
+   <path fill="#deb887" stroke-width="4" stroke-dasharray="5,2,2,2,2,2" id="svg_22" d="m75.56822,188.46373c-29.41162,-10.01161 -50.49289,-41.8233 -45.70196,-68.96443c3.02101,-17.11454 66.7568,-121.01176 72.32295,-117.89543c1.81672,1.01712 17.98324,25.23993 35.9256,53.82846c28.74178,45.79581 32.62246,54.33531 32.62246,71.78627c0,35.37238 -31.25,64.34636 -68.7721,63.76329c-10.94948,-0.17017 -22.82811,-1.30334 -26.39695,-2.51815l0,-0.00001zm29.46712,-17.791c0.97354,-4.57947 -1.3006,-6.81285 -6.93722,-6.81285c-12.84645,0 -30.66656,-14.7392 -34.64785,-28.65758c-4.24695,-14.84713 -15.5075,-16.61289 -17.17075,-2.69253c-3.20447,26.81956 53.35724,63.55738 58.75581,38.16297l0.00001,0z" stroke="#FFF"/>
+  </g>
+ </g>
+</svg>

assets/main.css

@@ -10,12 +10,49 @@ body {
 }
 
 a {
-    color: aquamarine;
+    color: burlywood;
     text-decoration: none;
 }
 
 a:hover {
-    color: aqua;
+    color: brown;
+}
+
+#logo {
+    display: block;
+    margin: 0 auto;
+    max-height: 40vh;
+    color: burlywood;
+}
+
+#logo:hover {
+    color: burlywood;
+}
+
+#header {
+    border-bottom: 4px solid white;
+}
+
+input {
+    border: 2px solid white;
+    text-align: center;
+    width: 100%;
+    font-size: large;
+}
+
+input:focus {
+    background-color: rgb(121, 100, 73);
+    color: white;
+
+}
+
+button {
+    border: 2px solid white;
+    background-color: burlywood;
+}
+
+#inputServer, #inputNick{
+    margin-bottom: 10px;
 }
 
 #everythingHelper::before {

chat.css

@@ -1,56 +0,0 @@
-html, body {
-    margin: 0;
-    padding: 0;
-  }
-  
-  body {
-    display: grid;
-    grid-template-rows: 100px 1fr 50px;
-    height: 100vh;
-    background-color: black;
-  }
-
-  header {
-    display: flex;
-    align-items: center;
-    padding: 0 20px;
-    background-color: #333;
-    color: white;
-  }
-
-  main .message {
-    display: grid;
-    grid-template-rows: 1fr auto;
-    margin: 10px;
-    padding: 10px;
-    background-color: #f1f1f1;
-    max-width: 50%;
-    background-color: #333;
-    color: white;
-  }
-
-  main .message .time {
-    margin: .5rem 0 0 0;
-    padding: .5rem 0 0 0;
-    font-style: italic;
-    border-top: 1px solid rgba(255, 255, 255, .5);
-  }
-  
-  main .message.owner {
-    justify-self: end;
-    background-color: gray;
-    color: white;
-  }
-  
-  footer  {
-    display: grid;
-    grid-template-columns: 1fr auto;
-  }
-
-  .incomingNickname {
-    font-style: italic;
-  }
-
-  .incomingNickname:hover {
-    color: lightslategray;
-  }

client.html

@@ -5,21 +5,21 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Chat</title>
-  <link rel="stylesheet" href="chat.css">
+  <link rel="stylesheet" href="assets/client.css">
-  <script src="chat.js" defer></script>
+  <script src="assets/client.js" defer></script>
 </head>
 
 <body>
   <header>
     <img class="thumb">
-    <h1 id="username">unknown</h1>
+    <h1 id="username">unknown @ unknown</h1>
   </header>
   <main>
 
   </main>
   <footer>
-    <input type="text" id="composeBox" placeholder="Chatto client version 1.0.1">
+    <input type="text" id="composeBox" placeholder="Chatto client version 1.1.0">
-    <button id="sendButton">Enviar</button>
+    <button id="sendButton">Send</button>
   </footer>
 </body>
 </html>

index.html

@@ -3,14 +3,15 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="compact.css">
+    <link rel="stylesheet" href="assets/main.css">
-    <script src="index.js" defer></script>
+    <script src="assets/login.js" defer></script>
     <title>Chatto</title>
 </head>
 <body>
     <div id="everythingHelper">
         <header>
-            <h1 id="title">Chatto Client configuration</h1>
+            <img src="/assets/logo.svg" id="logo">
+            <h1 id="title">Let's get you chatting!</h1>
         </header>
         <main>
             <input id="inputServer" type="text" placeholder="server address">
@@ -18,7 +19,7 @@
             <button id="connectButton">Connect</button>
         </main>
         <footer>
-            <p><a href="https://git.disroot.org/adrianvictor/chatto-client/">Github</a></p>
+            <p>these chats are powered by Chatto: <a href="https://git.disroot.org/adrianvictor/chatto-client/">it's open-source</a></p>
         </footer>
     </div>
 </body>