Tolles neues Server-Listing

Mit tollem neuen Styling

5 files changed, 151 insertions, 38 deletions

diff --git a/WebInterface/NodeJSServer/dist/index.css b/WebInterface/NodeJSServer/dist/index.css
index f2f052e..9d6ad73 100644
--- a/WebInterface/NodeJSServer/dist/index.css
+++ b/WebInterface/NodeJSServer/dist/index.css
@@ -1 +1 @@
-html,body{height:100vh;margin:0;padding:0;font-family:'Roboto', sans-serif;font-display:swap;overflow:hidden;background-color:#212121;color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background-color:#546e7a;position:relative}.backdrop{background-color:#546e7a;color:#fff;font-size:1rem}.backdrop .header-bar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.backdrop .header-bar .menu-icon{background-image:url("/ressources/menu.png");background-position:center;background-repeat:no-repeat;width:36px;height:36px;padding:4px;margin:1rem;display:inline-block;border:none;border-radius:32px;-webkit-transition:background-color 100ms ease;transition:background-color 100ms ease}.backdrop .header-bar .menu-icon:hover{background-color:#29434e}.backdrop .header-bar .menu-icon.open{background-image:url("/ressources/menu_close.png")}.backdrop .header-bar .header{margin:0;padding:16px;text-align:center;z-index:2;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}@media (min-width: 450px){.backdrop .header-bar .header{margin-right:56px}}.backdrop .menu-actions{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:max-height 200ms ease, color 200ms ease, background-color 100ms ease;transition:max-height 200ms ease, color 200ms ease, background-color 100ms ease;position:relative;max-height:16rem;margin:0 1rem}.backdrop .menu-actions .menu-option{color:#fff;text-decoration:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;font-size:1.5rem;width:100%;text-align:center;padding:1rem;border:none;border-radius:8px;cursor:pointer}.backdrop .menu-actions .menu-option:hover{background-color:#3e5864}.backdrop .menu-actions .menu-option.active{background-color:#29434e}.backdrop .menu-actions.hidden{max-height:0;color:rgba(0,0,0,0)}.backdrop .menu-actions.hidden .menu-option{color:rgba(0,0,0,0);background-color:rgba(0,0,0,0) !important}.container{position:relative;border:none;border-radius:16px 16px 0 0;min-height:0;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:white;margin-top:8px;-webkit-animation-name:start;animation-name:start;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease;animation-timing-function:ease;color:black;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@-webkit-keyframes start{from{top:100vh}to{top:0}}@keyframes start{from{top:100vh}to{top:0}}.container .banner{z-index:1;background-color:white;border:none;border-radius:16px 16px 0 0;display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;margin-bottom:1rem;padding-top:1rem;max-height:10rem;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-transform-origin:top;transform-origin:top;-webkit-transition:max-height 200ms ease, visibility 200ms step-start, -webkit-transform 200ms ease;transition:max-height 200ms ease, visibility 200ms step-start, -webkit-transform 200ms ease;transition:max-height 200ms ease, transform 200ms ease, visibility 200ms step-start;transition:max-height 200ms ease, transform 200ms ease, visibility 200ms step-start, -webkit-transform 200ms ease;min-height:3.5rem}.container .banner.hidden{-webkit-transform:scaleY(0);transform:scaleY(0);visibility:hidden;max-height:0;-webkit-transition:max-height 200ms ease, visibility 200ms step-end, -webkit-transform 200ms ease;transition:max-height 200ms ease, visibility 200ms step-end, -webkit-transform 200ms ease;transition:max-height 200ms ease, transform 200ms ease, visibility 200ms step-end;transition:max-height 200ms ease, transform 200ms ease, visibility 200ms step-end, -webkit-transform 200ms ease;min-height:0}.container .banner .banner-text{-ms-flex-item-align:left;-ms-grid-row-align:left;align-self:left;margin:1rem;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.container .banner .btn-container{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;text-align:right}.container .banner .btn-container .banner-button{display:inline-block;background:none;color:#29434e;border:none;-webkit-box-shadow:none;box-shadow:none;font-size:1rem;-ms-flex-item-align:right;-ms-grid-row-align:right;align-self:right;text-transform:uppercase;padding:16px;margin:0;margin-right:1rem;font-family:'Roboto Condensed', sans-serif;cursor:pointer;font-weight:bold;letter-spacing:0.125rem}.container .banner hr{width:100%}.container .server-listing{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#212121;color:#fff;min-height:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-style:none;border-radius:8px;margin:1rem;margin-bottom:2rem;padding:0.5rem;padding-top:0.25rem;-webkit-box-shadow:0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2);box-shadow:0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2)}.container .server-listing h1{text-align:center}.container .server-listing hr{width:100%}.container .server-listing .server-entries{overflow-y:auto;min-height:0}.container .copyright-container{-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;width:100%;margin:4px;bottom:0;text-align:center}
+html,body{height:100vh;margin:0;padding:0;font-family:'Roboto', sans-serif;font-display:swap;overflow:hidden;background-color:#212121;color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background-color:#546e7a;position:relative}.btn{border:none;border-radius:4px;padding:8px;margin:0;font-size:1rem;font-family:'Roboto Condensed', sans-serif;font-weight:bold;display:inline-block;background-color:#546e7a;color:#fff;text-transform:uppercase;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);cursor:pointer;background-position:center;-webkit-transition:background 800ms ease, color 200ms ease, -webkit-box-shadow 100ms ease;transition:background 800ms ease, color 200ms ease, -webkit-box-shadow 100ms ease;transition:background 800ms ease, box-shadow 100ms ease, color 200ms ease;transition:background 800ms ease, box-shadow 100ms ease, color 200ms ease, -webkit-box-shadow 100ms ease}.btn:hover{background:#29434e radial-gradient(circle, transparent 1%, #29434e 1%) center/15000%;-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}.btn:active{background-color:#819ca9;background-size:100%;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12);box-shadow:0 1px 3px rgba(0,0,0,0.12);-webkit-transition:background 0s, -webkit-box-shadow 0s;transition:background 0s, -webkit-box-shadow 0s;transition:background 0s, box-shadow 0s;transition:background 0s, box-shadow 0s, -webkit-box-shadow 0s}.btn:disabled{color:#ffffff61;background:#546e7a61;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease;transition:background 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease;transition:background 200ms ease, box-shadow 200ms ease, color 200ms ease;transition:background 200ms ease, box-shadow 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease}.text-btn{padding:8px;margin:0;font-size:1rem;font-family:'Roboto Condensed', sans-serif;font-weight:bold;display:inline-block;color:#fff;background-color:rgba(0,0,0,0);text-transform:uppercase;-webkit-box-shadow:none;box-shadow:none;background-position:center;-webkit-transition:background 800ms ease, color 200ms ease, -webkit-box-shadow 100ms ease;transition:background 800ms ease, color 200ms ease, -webkit-box-shadow 100ms ease;transition:background 800ms ease, box-shadow 100ms ease, color 200ms ease;transition:background 800ms ease, box-shadow 100ms ease, color 200ms ease, -webkit-box-shadow 100ms ease}.text-btn:hover{background:#29434e61 radial-gradient(circle, transparent 1%, #29434e61 1%) center/15000%;-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}.text-btn:active{background-color:#819ca9;background-size:100%;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background 0s, -webkit-box-shadow 0s;transition:background 0s, -webkit-box-shadow 0s;transition:background 0s, box-shadow 0s;transition:background 0s, box-shadow 0s, -webkit-box-shadow 0s}.text-btn:disabled{background:rgba(0,0,0,0);color:#ffffff61;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease;transition:background 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease;transition:background 200ms ease, box-shadow 200ms ease, color 200ms ease;transition:background 200ms ease, box-shadow 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease}.backdrop{background-color:#546e7a;color:#fff;font-size:1rem}.backdrop .header-bar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.backdrop .header-bar .menu-icon{background-image:url("./ressources/menu.png");background-position:center;background-repeat:no-repeat;width:36px;height:36px;padding:4px;margin:1rem;display:inline-block;border:none;border-radius:32px;-webkit-transition:background-color 100ms ease;transition:background-color 100ms ease}.backdrop .header-bar .menu-icon:hover{background-color:#29434e}.backdrop .header-bar .menu-icon.open{background-image:url("./ressources/menu_close.png")}.backdrop .header-bar .header{margin:0;padding:16px;text-align:center;z-index:2;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}@media (min-width: 450px){.backdrop .header-bar .header{margin-right:56px}}.backdrop .menu-actions{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:max-height 200ms ease, color 200ms ease, background-color 100ms ease;transition:max-height 200ms ease, color 200ms ease, background-color 100ms ease;position:relative;max-height:16rem;margin:0 1rem}.backdrop .menu-actions .menu-option{color:#fff;text-decoration:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;font-size:1.5rem;width:100%;text-align:center;padding:1rem;border:none;border-radius:8px;cursor:pointer}.backdrop .menu-actions .menu-option:hover{background-color:#3e5864}.backdrop .menu-actions .menu-option.active{background-color:#29434e}.backdrop .menu-actions.hidden{max-height:0;color:rgba(0,0,0,0)}.backdrop .menu-actions.hidden .menu-option{color:rgba(0,0,0,0);background-color:rgba(0,0,0,0) !important}.container{position:relative;border:none;border-radius:16px 16px 0 0;min-height:0;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:white;margin-top:8px;-webkit-animation-name:start;animation-name:start;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease;animation-timing-function:ease;color:black;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@-webkit-keyframes start{from{top:100vh}to{top:0}}@keyframes start{from{top:100vh}to{top:0}}.container .banner{z-index:1;background-color:white;border:none;border-radius:16px 16px 0 0;display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;margin-bottom:1rem;padding-top:1rem;max-height:10rem;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-transform-origin:top;transform-origin:top;-webkit-transition:max-height 200ms ease, visibility 200ms step-start, -webkit-transform 200ms ease;transition:max-height 200ms ease, visibility 200ms step-start, -webkit-transform 200ms ease;transition:max-height 200ms ease, transform 200ms ease, visibility 200ms step-start;transition:max-height 200ms ease, transform 200ms ease, visibility 200ms step-start, -webkit-transform 200ms ease;min-height:3.5rem}.container .banner.hidden{-webkit-transform:scaleY(0);transform:scaleY(0);visibility:hidden;max-height:0;-webkit-transition:max-height 200ms ease, visibility 200ms step-end, -webkit-transform 200ms ease;transition:max-height 200ms ease, visibility 200ms step-end, -webkit-transform 200ms ease;transition:max-height 200ms ease, transform 200ms ease, visibility 200ms step-end;transition:max-height 200ms ease, transform 200ms ease, visibility 200ms step-end, -webkit-transform 200ms ease;min-height:0}.container .banner .banner-text{-ms-flex-item-align:left;-ms-grid-row-align:left;align-self:left;margin:1rem;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.container .banner .btn-container{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;text-align:right}.container .banner .btn-container .banner-button{display:inline-block;background:none;color:#29434e;border:none;-webkit-box-shadow:none;box-shadow:none;font-size:1rem;-ms-flex-item-align:right;-ms-grid-row-align:right;align-self:right;text-transform:uppercase;padding:16px;margin:0;margin-right:1rem;font-family:'Roboto Condensed', sans-serif;cursor:pointer;font-weight:bold;letter-spacing:0.125rem}.container .banner hr{width:100%}.container .server-listing{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#212121;color:#fff;min-height:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-style:none;border-radius:8px;margin:1rem;margin-bottom:2rem;padding:0.5rem;padding-top:0.25rem;-webkit-box-shadow:0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2);box-shadow:0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2)}.container .server-listing h1{text-align:center}.container .server-listing hr{width:100%}.container .server-listing .server-entries{overflow-y:auto;min-height:0}.container .server-listing .server-entries .server{font-size:1.25rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#484848;padding:0.5rem;margin-bottom:0.25rem;border-style:none;border-radius:8px}.container .server-listing .server-entries .server .server-name{font-weight:bold;-webkit-box-flex:100;-ms-flex-positive:100;flex-grow:100}.container .server-listing .server-entries .server .player-count-static{margin-left:0.25rem}.container .server-listing .server-entries .server .join-btn{margin-left:0.5rem;-ms-flex-negative:1;flex-shrink:1;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:15%;flex-basis:15%}.container .server-listing .button-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;margin-top:1rem;margin-right:0.25rem;min-height:2.5rem}.container .copyright-container{-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;width:100%;margin:4px;bottom:0;text-align:center}
diff --git a/WebInterface/NodeJSServer/dist/index.html b/WebInterface/NodeJSServer/dist/index.html
index 4264b39..9e44551 100644
--- a/WebInterface/NodeJSServer/dist/index.html
+++ b/WebInterface/NodeJSServer/dist/index.html
@@ -20,7 +20,7 @@
         <h1 class="header">Helden Online</h1>
       </div>
       <div class="menu-actions hidden" id="menu">
-        <a class="menu-option active" id="listing-tab" href="./">Server Liste</a>
+        <a class="menu-option active" id="listing-tab" href="./">Spiele-Liste</a>
         <a class="menu-option" id="github-tab" href="https://github.com/TrueDoctor/DiscoBot" target="_blank">Projekt auf GitHub</a>
         <a class="menu-option" id="about-tab" href="about.html" target="_blank">About</a>
       </div>
@@ -34,44 +34,39 @@
         <hr>
       </div>
       <div class="server-listing">
-        <h1>Server Listing</h1>
+        <h1>Aktive Spiele</h1>
         <hr>
         <div class="server-entries">
-          <ul id="message-list">
-
-          </ul>
-          <input type="text" id="user-input">
-          <input type="text" id="message-input">
-          <button id="send-button">
-            Senden
+          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 2</span><span class="player-count">1</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+        </div>
+        <div class="button-container">
+          <button id="new-game-button" class="btn">
+            Spiel beginnen
+          </button>
+          <button id="refresh-button" class="btn text-btn refresh-btn">
+            Aktualisieren
           </button>
         </div>
-        <!-- <div class="server-entries">
-          <p>Server 1</p>
-          <p>Server 2</p>
-          <p>Server 3</p>
-          <p>Server 3</p>
-          <p>Server 3</p>
-          <p>Server 3</p>
-          <p>Server 3</p>
-          <p>Server 3</p>
-          <p>Server 3</p>
-          <p>Server 3</p>
-          <p>Server 3</p>
-          <p>Server 3</p>
-          <p>Server 3</p>
-          <p>Server 3</p>
-          <p>Server 3</p>
-          <p>Server 3</p>
-          <p>Server 3</p>
-          <p>Server 3</p>
-          <p>Server 3</p>
-          <p>Server 3</p>
-          <p>Server 3</p>
-          <p>Server 3</p>
-          <p>Server 3</p>
-          <p>Server 3</p>
-        </div> -->
+
       </div>
 
       <div class="copyright-container">
diff --git a/WebInterface/NodeJSServer/src/index.js b/WebInterface/NodeJSServer/src/index.js
index 8430851..979ef7d 100644
--- a/WebInterface/NodeJSServer/src/index.js
+++ b/WebInterface/NodeJSServer/src/index.js
@@ -9,6 +9,8 @@ const connection = new signalR.HubConnectionBuilder()
     .configureLogging(signalR.LogLevel.Information)
     .build();
 
+connection.on('')
+
 connection.on('ReceiveMessage', (user, message) => {
   let msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
   let encodedMsg = user + " says " + msg;
diff --git a/WebInterface/NodeJSServer/src/style/index.scss b/WebInterface/NodeJSServer/src/style/index.scss
index 67dc68e..7a83cea 100644
--- a/WebInterface/NodeJSServer/src/style/index.scss
+++ b/WebInterface/NodeJSServer/src/style/index.scss
@@ -19,6 +19,79 @@ body {
   position: relative;
 }
 
+.btn {
+  border: none;
+  border-radius: 4px;
+  padding: 8px;
+  margin: 0;
+  font-size: 1rem;
+  font-family: 'Roboto Condensed', sans-serif;
+  font-weight: bold;
+  display: inline-block;
+  background-color: $secondary;
+  color: $secondary-text;
+  text-transform: uppercase;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  cursor: pointer;
+
+  background-position: center;
+  transition: background 800ms ease, box-shadow 100ms ease, color 200ms ease;
+
+  &:hover {
+    background: $secondary-dark radial-gradient(circle, transparent 1%, $secondary-dark 1%) center/15000%;
+    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+  }
+
+  &:active {
+    background-color: $secondary-light;
+    background-size: 100%;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
+    transition: background 0s, box-shadow 0s;
+  }
+
+  &:disabled {
+    color: $secondary-text-disabled;
+    background: $secondary-disabled;
+    box-shadow: none;
+    transition: background 200ms ease, box-shadow 200ms ease, color 200ms ease;
+  }
+}
+
+.text-btn {
+  padding: 8px;
+  margin: 0;
+  font-size: 1rem;
+  font-family: 'Roboto Condensed', sans-serif;
+  font-weight: bold;
+  display: inline-block;
+  color: $secondary-text;
+  background-color: rgba(0, 0, 0, 0);
+  text-transform: uppercase;
+  box-shadow: none;
+
+  background-position: center;
+  transition: background 800ms ease, box-shadow 100ms ease, color 200ms ease;
+
+  &:hover {
+    background: $secondary-dark-transparent radial-gradient(circle, transparent 1%, $secondary-dark-transparent 1%) center/15000%;
+    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+  }
+
+  &:active {
+    background-color: $secondary-light;
+    background-size: 100%;
+    box-shadow: none;
+    transition: background 0s, box-shadow 0s;
+  }
+
+  &:disabled {
+    background: rgba(0,0,0,0);
+    color: $secondary-text-disabled;
+    box-shadow: none;
+    transition: background 200ms ease, box-shadow 200ms ease, color 200ms ease;
+  }
+}
+
 .backdrop {
   background-color: $secondary;
   color: $secondary-text;
@@ -29,7 +102,7 @@ body {
     align-items: center;
 
     .menu-icon {
-      background-image: url("/ressources/menu.png");
+      background-image: url("./ressources/menu.png");
       background-position: center;
       background-repeat: no-repeat;
       width: 36px;
@@ -46,7 +119,7 @@ body {
       }
 
       &.open {
-        background-image: url("/ressources/menu_close.png");
+        background-image: url("./ressources/menu_close.png");
       }
     }
 
@@ -208,6 +281,47 @@ body {
     .server-entries {
       overflow-y: auto;
       min-height: 0;
+
+      .server {
+        font-size: 1.25rem;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: center;
+        background-color: $primary-light;
+        padding: 0.5rem;
+        margin-bottom: 0.25rem;
+        border-style: none;
+        border-radius: 8px;
+
+        .server-name {
+          font-weight: bold;
+          flex-grow: 100;
+        }
+
+        .player-count {
+
+        }
+
+        .player-count-static {
+          margin-left: 0.25rem;
+        }
+
+        .join-btn {
+          margin-left: 0.5rem;
+          flex-shrink: 1;
+          flex-grow: 1;
+          flex-basis: 15%;
+        }
+      }
+    }
+
+    .button-container {
+      display: flex;
+      flex-direction: row-reverse;
+      margin-top: 1rem;
+      margin-right: 0.25rem;
+      min-height: 2.5rem;
     }
   }
 
diff --git a/WebInterface/NodeJSServer/src/style/partials/_colors.scss b/WebInterface/NodeJSServer/src/style/partials/_colors.scss
index a19a2ab..91bc2d3 100644
--- a/WebInterface/NodeJSServer/src/style/partials/_colors.scss
+++ b/WebInterface/NodeJSServer/src/style/partials/_colors.scss
@@ -8,6 +8,8 @@ $secondary: #546e7a;
 $secondary-disabled: #546e7a61;
 $secondary-half-dark: #3e5864;
 $secondary-dark: #29434e;
+$secondary-dark-transparent: #29434e61;
 $secondary-light: #819ca9;
+$secondary-light-transparent: #819ca961;
 $secondary-text: #ffffff;
 $secondary-text-disabled: #ffffff61;