From c4286373e3a36d0d729f0d6b6c7831d244d3e1bd Mon Sep 17 00:00:00 2001
From: Gregory Ballantine <gballantine@metaunix.net>
Date: Sun, 25 Sep 2022 00:59:05 -0400
Subject: [PATCH] Copied over some styles from the PHP project

---
 index.js            |  3 +++
 routes/home.js      |  4 +++-
 static/css/wyrm.css | 46 +++++++++++++++++++++++++++++++++++++++++++++
 static/js/drake.js  |  3 +++
 views/index.pug     | 28 ++++++++++++++++++++++++++-
 views/layout.pug    | 17 ++++++++++++++++-
 6 files changed, 98 insertions(+), 3 deletions(-)
 create mode 100644 static/css/wyrm.css
 create mode 100644 static/js/drake.js

diff --git a/index.js b/index.js
index 9296b03..331d809 100644
--- a/index.js
+++ b/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}`);
diff --git a/routes/home.js b/routes/home.js
index a6ab75d..bcb270a 100644
--- a/routes/home.js
+++ b/routes/home.js
@@ -1,3 +1,5 @@
 exports.getIndex = function(req, res) {
-  res.render('index');
+  res.render('index', {
+    servers: [],
+  });
 };
diff --git a/static/css/wyrm.css b/static/css/wyrm.css
new file mode 100644
index 0000000..5cd8300
--- /dev/null
+++ b/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;
+}
diff --git a/static/js/drake.js b/static/js/drake.js
new file mode 100644
index 0000000..d05129f
--- /dev/null
+++ b/static/js/drake.js
@@ -0,0 +1,3 @@
+$(document).ready(function () {
+  // This will be used when needed
+});
diff --git a/views/index.pug b/views/index.pug
index fcb9fd3..dce4631 100644
--- a/views/index.pug
+++ b/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
diff --git a/views/layout.pug b/views/layout.pug
index 0bcdb24..4fa9649 100644
--- a/views/layout.pug
+++ b/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
-    block content
+    // 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