UI revamp.

Prevent client from sending messages if compose box is empty.
2024-11-18 20:54:53 -03:00 · 2024-11-18 18:44:16 +01:00 · 2024-11-18 18:41:01 +01:00 · 2024-11-18 17:55:12 +01:00 · 2024-11-18 17:50:56 +01:00 · 2024-11-18 17:47:03 +01:00
8 changed files with 168 additions and 74 deletions
--- a/assets/client.css
+++ b/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;
+  }
--- a/assets/client.js
+++ b/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')) {
-        nick = composeBox.value.split(' ')[1]
-        nickbox.textContent = `${nick} @ ${wsAddr}`;
+    sendMessage()
+})
+
+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 = '';
    }
-    ws.send(composeBox.value)
-    console.log(composeBox.value)
-})
+}
--- a/assets/login.js
+++ b/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")
    }
--- a/assets/logo.svg
+++ b/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>
--- a/assets/main.css
+++ b/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 {
--- a/chat.css
+++ b/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;
-  }
--- a/client.html
+++ b/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">
-  <script src="chat.js" defer></script>
+  <link rel="stylesheet" href="assets/client.css">
+  <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">
-    <button id="sendButton">Enviar</button>
+    <input type="text" id="composeBox" placeholder="Chatto client version 1.1.0">
+    <button id="sendButton">Send</button>
  </footer>
 </body>
 </html>
--- a/index.html
+++ b/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">
-    <script src="index.js" defer></script>
+    <link rel="stylesheet" href="assets/main.css">
+    <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>
Author	SHA1	Message	Date
Adrian Victor	4f5d1cc3c8	UI revamp.	2024-11-18 20:54:53 -03:00
verxkkj	368778aa04	Prevent client from sending messages if compose box is empty.	2024-11-18 18:44:16 +01:00
verxkkj	8a3a065894	Prevent client from sending messages if compose box is empty. Signed-off-by: verxkkj <verxkkj@no-reply@disroot.org>	2024-11-18 18:41:01 +01:00
Adrian Victor	78305dd31a	Minor fixes and refactoring	2024-11-18 17:55:12 +01:00
verxkkj	1366c57907	Better title placeholder, fixed send button text in Portuguese.	2024-11-18 17:50:56 +01:00
verxkkj	e3744c6220	Enter sends message, sending clears compose box, removed debugging leftovers. - Message sending code is now a function for reusability. - Sending a message is now possible pressing enter and it now clears the compose box. - Removed debugging leftover on send function. Signed-off-by: verxkkj <verxkkj@no-reply@disroot.org>	2024-11-18 17:47:03 +01:00
Adrian Victor	0350d3aaf9	Better file hierarchy and file names changed to work with InfinityFree (they block the word chat in the URL)	2024-11-13 11:07:26 -03:00