Copied over some styles from the PHP project

index.js

@@ -11,6 +11,9 @@ var homeRoutes = require('./routes/home');
 // define routes
 app.get('/', homeRoutes.getIndex);
 
+// set Express to serve static files (ideally this is only used in development)
+app.use(express.static('./static/'));
+
 // start Express.js app
 app.listen(port, () => {
   console.log(`Example app listening on port ${port}`);

routes/home.js

@@ -1,3 +1,5 @@
 exports.getIndex = function(req, res) {
-  res.render('index');
+  res.render('index', {
+    servers: [],
+  });
 };

static/css/wyrm.css

@@ -0,0 +1,46 @@
+body{
+  background-color: #e6e6e6;
+}
+
+/* set the max-width for centered content */
+.container{
+  max-width: 1100px;
+}
+
+#main-content{
+  margin-top: 25px;
+  padding: 12px 25px;
+  background: white;
+}
+
+/* global navigation bar styles */
+.navbar{
+  padding: 10px 18px;
+  background-color: #212121;
+  color: white;
+  font-size: 2.5rem;
+  font-weight: bold;
+}
+
+.navbar ul{
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.navbar li{
+  display: inline-block;
+  margin-bottom: 0;
+}
+.navbar li:not(:first-child){
+  margin-left: 10px;
+}
+
+.navbar li>a{
+  color: #eee;
+  text-decoration: none;
+  transition: color 220ms ease-in-out;
+}
+.navbar li>a:hover{
+  color: white;
+}

static/js/drake.js

@@ -0,0 +1,3 @@
+$(document).ready(function () {
+  // This will be used when needed
+});

views/index.pug

@@ -1,4 +1,30 @@
 extends layout.pug
 
 block content
-  p This is a test.
+  header.row
+    div.columns.twelve
+      h1 Welcome to MCST!
+      p Using MCST you can easily manage your Minecraft: Java Edition servers.
+
+  section.row
+    div.columns.twelve
+      h3 List of servers:
+      if servers.length < 1
+        p There are currently no servers registered.
+      else
+        table.u-full-width
+          thead
+            tr
+              th Server name
+              th Minecraft version
+              th State
+              th Actions
+          tbody
+            each m in servers
+              tr.serverItem
+                td.serverName m.name
+                td.serverVersion m.version
+                td.serverState m.state
+                td
+                  a(href="/server/#{server.name}/start") Start
+                  a(href="/server/#{server.name}/stop") Stop

views/layout.pug

@@ -2,5 +2,20 @@ doctype html
 html(lang="en")
   head
     title= pageTitle
+    link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css')
+    link(rel='stylesheet', href='/css/wyrm.css')
+    script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js')
+    script(src='/js/drake.js')
   body
+    // global navigation
+    nav.navbar
+      div.navbar-left
+        ul
+          li.menu-text MCST
+          li: a(href='/') Home
+          li: a(href='/create') Create
+          li: a(href='/status') Status
+
+    // main content
+    div#main-content.container
       block content