yay

ui/html/base.layout.tmpl

@@ -1,8 +1,9 @@
+{{define "base"}}
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Ping Demo</title>
+    <title>{{template "title" .}}</title>
     <script>
         const ws = new WebSocket("wss://localhost:8443/ws");
 
@@ -22,9 +23,16 @@
             }
         }, 1000)
     </script>
+    <style>
+    @import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');
+    </style>
+    <link rel="stylesheet" href="/static/style.css"/>
 </head>
 <body>
+    {{template "body" .}}
+
     <h1>Hello, {{.Name}}!</h1>
-    <p>This page sends a ping to the server every second.</p>
+    <h1>This is THE PARTY.</h1>
 </body>
 </html>
+{{end}}

ui/html/home.page.tmpl

@@ -0,0 +1,7 @@
+{{template "base" .}}
+
+{{define "title"}}Home{{end}}
+
+{{define "body"}}
+<h1>The Party?</h1>
+{{end}}

ui/static/style.css

@@ -0,0 +1,14 @@
+* {
+  font-family: "Alfa Slab One", serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}