5 files changed, 99 insertions, 71 deletions
diff --git a/pkg/webui/html/base.html b/pkg/webui/html/base.html
index 7821d28..06328e4 100644
--- a/pkg/webui/html/base.html
+++ b/pkg/webui/html/base.html
@@ -1,28 +1,50 @@
+{{ define "nav" }}
+<header>
+  <nav>
+    <a href="/">
+      <h6>TFSTATED</h6>
+    </a>
+  </nav>
+</header>
+{{ if eq .Page.Section "login" }}
+<a href="/login" class="active">
+  <i>login</i>
+  <span>Login</span>
+</a>
+{{ else }}
+<a href="/states"{{ if eq .Page.Section "states" }} class="active"{{ end}}>
+  <i>home_storage</i>
+  <span>States</span>
+</a>
+<hr>
+<a href="/logout">
+  <i>logout</i>
+  <span>Logout</span>
+</a>
+{{ end }}
+{{ end }}
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" href="/static/favicon.svg">
-    <link rel="stylesheet" href="/static/main.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
-    <title>tfstated</title>
+    <link href="/static/main.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/beercss@3.8.0/dist/cdn/beer.min.css" rel="stylesheet">
+    <title>TFSTATED - {{ .Page.Title }}</title>
   </head>
-  <body>
-    <header class="container">
+  <body class="dark">
+    <nav class="left drawer l">{{ template "nav" . }}</nav>
+    <nav class="left m">{{ template "nav" . }}</nav>
+    <nav class="bottom s">{{ template "nav" . }}</nav>
+    <header>
       <nav>
-        <ul>
-          <li><a href="/"><strong>TFSTATED</strong></a></li>
-        </ul>
-        <ul>
-          <li><a href="/states">States</a></li>
-        </ul>
+        <h5 class="max center-align">{{ .Page.Title }}</h5>
       </nav>
     </header>
-    <main class="container">
-      {{ template "main" . }}
-    </main>
-    <footer class="container">
+    {{ template "main" . }}
+    <footer>
     </footer>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.8.0/dist/cdn/beer.min.js"></script>
   </body>
 </html>
diff --git a/pkg/webui/html/error.html b/pkg/webui/html/error.html
index d2ea7e1..cda21f6 100644
--- a/pkg/webui/html/error.html
+++ b/pkg/webui/html/error.html
@@ -1,6 +1,6 @@
 {{ define "main" }}
-<article>
-  <h1>{{ .Status }} - {{ .StatusText }}</h1>
-  <p>{{ .Err }}</p>
-</article>
+<main class="responsive">
+<h5>{{ .Status }} - {{ .StatusText }}</h5>
+<p>{{ .Err }}</p>
+</main>
 {{ end }}
diff --git a/pkg/webui/html/login.html b/pkg/webui/html/login.html
index 0c2a167..4ff0265 100644
--- a/pkg/webui/html/login.html
+++ b/pkg/webui/html/login.html
@@ -1,29 +1,26 @@
 {{ define "main" }}
-{{ if .Forbidden }}
-<article>
-  <p class="error-message">Invalid username or password</p>
-</article>
-{{ end }}
-<form action="/login" method="post">
-  <fieldset>
-	<label>
-      Username
-	  <input type="text"
-             placeholder="Username"
-             name="username"
-             value="{{ .Username }}"
-             {{ if .Forbidden }}aria-invalid="true"{{ end }}
-             required>
-    </label>
-	<label>
-      Password
-      <input type="password"
-             placeholder="Password"
-             name="password"
-             {{ if .Forbidden }}aria-invalid="true"{{ end }}
-             required>
-    </label>
-  </fieldset>
-  <button type="submit" value="login">Login</button>
-</form>
+<main class="responsive">
+  <form action="/login" method="post">
+    <fieldset>
+      <div class="field border label{{ if .Forbidden }} invalid{{ end}}">
+        <input id="username"
+               name="username"
+               type="text"
+               value="{{ .Username }}"
+               required>
+        <label for="username">Username</label>
+        {{ if .Forbidden }}<span class="error">Invalid username or password</span>{{ end }}
+      </div>
+      <div class="field border label{{ if .Forbidden }} invalid{{ end}}">
+        <input id="password"
+               name="password"
+               type="password"
+               required>
+        <label for="password">Password</label>
+        {{ if .Forbidden }}<span class="error">Invalid username or password</span>{{ end }}
+      </div>
+      <button class="small-round" type="submit" value="login">Login</button>
+    </fieldset>
+  </form>
+</main>
 {{ end }}
diff --git a/pkg/webui/html/logout.html b/pkg/webui/html/logout.html
index 58191c0..e9203d4 100644
--- a/pkg/webui/html/logout.html
+++ b/pkg/webui/html/logout.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-<article>
-  <p>Logout successful</p>
-</article>
+<main class="responsive">
+  <h5>Logout successful</h5>
+</main>
 {{ end }}
diff --git a/pkg/webui/html/states.html b/pkg/webui/html/states.html
index 8d3d803..f61b87c 100644
--- a/pkg/webui/html/states.html
+++ b/pkg/webui/html/states.html
@@ -1,23 +1,32 @@
 {{ define "main" }}
-<h1>States</h1>
-<table class="striped">
-  <thead>
-    <tr>
-      <th scope="col">Path</th>
-      <th scope="col">Created</th>
-      <th scope="col">Updated</th>
-      <th scope="col">Locked</th>
-    </tr>
-  </thead>
-  <tbody>
-    {{ range .States }}
-    <tr>
-      <th scope="row">{{ .Path }}</th>
-      <td>{{ .Created }}</td>
-      <td>{{ .Updated }}</td>
-      <td>{{ .Lock }}</td>
-    </tr>
-    {{ end }}
-  </tbody>
-</table>
+<main class="responsive" id="main">
+  <table class="clickable-rows no-space stripes">
+    <thead>
+      <tr>
+        <th>Path</th>
+        <th>Updated</th>
+        <th>Locked</th>
+      </tr>
+    </thead>
+    <tbody>
+      {{ range .States }}
+      <tr>
+        <td><a href="/state/{{ .Id }}">{{ .Path }}</a></td>
+        <td><a href="/state/{{ .Id }}">{{ .Updated }}</a></td>
+        <td>
+          <a href="/state/{{ .Id }}">
+            {{ if eq .Lock nil }}no{{ else }}
+            <span>yes</span>
+            <div class="tooltip left max">
+              <b>Lock</b>
+              <p>{{ .Lock }}</p>
+            </div>
+            {{ end }}
+          </a>
+        </td>
+      </tr>
+      {{ end }}
+    </tbody>
+  </table>
+</main>
 {{ end }}