Added more unit tests

.woodpecker.yml

@@ -0,0 +1,17 @@
+steps:
+  test:
+    image: node:24
+    commands:
+      - npm install
+      - npm run test
+
+  gitea_release:
+    image: plugins/gitea-release
+    settings:
+      api_key:
+        from_secret: gitea_api_key
+      base_url: https://git.metaunix.net
+      title: "${CI_COMMIT_TAG}"
+    when:
+      event:
+        - tag

Dockerfile

@@ -1,12 +1,12 @@
-FROM node:20
+FROM node:24
 
-WORKDIR /app
+WORKDIR /usr/src/leviathan
 
 COPY package*.json ./
 
 RUN npm install
 
-VOLUME /app/node_modules
+VOLUME /usr/src/leviathan/node_modules
 
 COPY . ./
 

Dockerfile.grunt

@@ -0,0 +1,13 @@
+# Node.js runtime
+FROM node:24
+
+WORKDIR /usr/src/leviathan/
+
+COPY package.* /usr/src/leviathan/
+
+RUN npm install
+
+VOLUME /usr/src/leviathan/node_modules/
+
+# Run the app
+CMD [ "npm", "run", "grunt" ]

Gruntfile.js

@@ -1,65 +1,85 @@
 module.exports = function (grunt) {
-
   // Project configuration.
   grunt.initConfig({
-    pkg: grunt.file.readJSON('package.json'),
+    pkg: grunt.file.readJSON("package.json"),
 
     sass: {
       dist: {
         options: {
-          style: 'compressed'
+          style: "compressed",
         },
-        files: [{
+        files: [
+          {
             expand: true,
-          cwd: 'assets/styles',
-          src: ['**/*.sass'],
-          dest: 'public/css',
-          ext: '.css'
-        }]
-      }
+            cwd: "assets/styles",
+            src: ["**/*.scss"],
+            dest: "public/css",
+            ext: ".css",
+          },
+        ],
+      },
     },
 
-    coffee: {
+    uglify: {
       options: {
         sourceMap: true,
-        style: 'compressed'
+        compress: true,
       },
       files: {
         expand: true,
         flatten: true,
-        cwd: 'assets/scripts',
-        src: ['*.coffee'],
-        dest: 'public/js',
-        ext: '.js'
+        cwd: "assets/scripts",
+        src: ["*.js"],
+        dest: "public/js",
+        ext: ".js",
+      },
+    },
+
+    copy: {
+      images: {
+        files: [{
+          expand: true,
+          cwd: 'assets/img/',
+          src: '**/*',
+          dest: 'public/img/'
+        }]
       }
     },
 
     watch: {
       css: {
-        files: ['assets/styles/**/*.sass'],
-        tasks: ['sass'],
+        files: ["assets/styles/**/*.scss"],
+        tasks: ["sass"],
         options: {
           atBegin: true,
-          spawn: false
-        }
+          spawn: false,
+        },
       },
       js: {
-        files: ['assets/scripts/**/*.coffee'],
-        tasks: ['coffee'],
+        files: ["assets/scripts/**/*.js"],
+        tasks: ["uglify"],
         options: {
           atBegin: true,
-          spawn: false
-        }
-      }
+          spawn: false,
+        },
+      },
+      img: {
+        files: ["assets/img/**/*"],
+        tasks: ["copy:images"],
+        options: {
+          atBegin: true,
+          spawn: false,
         }
+      },
+    },
   });
 
   // Load plugins.
-  grunt.loadNpmTasks('grunt-contrib-watch');
-  grunt.loadNpmTasks('grunt-contrib-sass');
-  grunt.loadNpmTasks('grunt-contrib-coffee');
+  grunt.loadNpmTasks("grunt-contrib-watch");
+  grunt.loadNpmTasks("grunt-contrib-sass");
+  grunt.loadNpmTasks("grunt-contrib-uglify");
+  grunt.loadNpmTasks("grunt-contrib-copy");
 
   // CLI tasks.
-  grunt.registerTask('default', ['sass', 'coffee']);
-
+  grunt.registerTask("default", ["sass", "uglify", "copy:images"]);
 };

assets/scripts/scar.coffee

@@ -1,2 +0,0 @@
-$ ->
-  console.log('Ready.')

assets/scripts/scar.js

@@ -0,0 +1,3 @@
+$(document).ready(function () {
+  console.log("Ready.");
+});

assets/scripts/test.coffee

@@ -1,62 +0,0 @@
-testId = $('#results-table').data('test-id')
-
-$ ->
-	$('#test-result-form').on 'submit', (e) ->
-		e.preventDefault()
-
-		form = $(this)
-		formData = $(this).serialize()
-		benchmarkId = $(this).find('[name="result_benchmark"]').val()
-
-		$.post '/api/v1/result/add', formData, (response) ->
-			if response == 'success'
-				fetchTestBenchmarkResults(testId, benchmarkId)
-				form[0].reset()
-
-fetchTestBenchmarkResults = (testId, benchmarkId) ->
-	try
-		benchmarkSearchParams = new URLSearchParams
-			benchmark_id: benchmarkId
-		benchmarkRes = await fetch("/api/v1/benchmark/details?#{benchmarkSearchParams}")
-		benchmarkData = await benchmarkRes.json()
-
-		resultSearchParams = new URLSearchParams
-			test_id: testId
-			benchmark_id: benchmarkId
-		resultRes = await fetch("/api/v1/result/list?#{resultSearchParams}")
-		resultData = await resultRes.json()
-
-		avg_total = 0
-		min_total = 0
-		max_total = 0
-
-		for result in resultData
-			avg_total += result.avgScore
-			min_total += result.minScore if result.minScore
-			max_total += result.maxScore if result.maxScore
-
-		tableRow = $("#results-table tr[data-benchmark-id=#{benchmarkId}]")
-		tableRow.empty()
-
-		tableRow.append('<td><a href="/benchmark/' + benchmarkData.id + '">' + benchmarkData.name + '</a></td>')
-		tableRow.append('<td>' + benchmarkData.scoring + '</td>')
-		tableRow.append('<td>' + resultData.length + '</td>')
-
-		if resultData.length != 0
-			tableRow.append('<td>' + (avg_total / resultData.length) + '</td>')
-		else
-			tableRow.append('<td>N/a</td>')
-
-		if min_total != 0
-			tableRow.append('<td>' + (min_total / resultData.length) + '</td>')
-			tableRow.append('<td>' + (max_total / resultData.length) + '</td>')
-		else
-			tableRow.append('<td>N/a</td>')
-			tableRow.append('<td>N/a</td>')
-	catch error
-		console.error 'An error occurred while fetching benchmark results.', error
-
-$('#results-table tbody tr').each (index, tr) ->
-	benchmarkId = $(tr).data('benchmark-id')
-	console.log("Fetching results for benchmark id: " + benchmarkId)
-	fetchTestBenchmarkResults(testId, benchmarkId)

assets/scripts/test.js

@@ -0,0 +1,82 @@
+const testId = $("#results-table").data("test-id");
+
+$("#test-result-form").on("submit", function (e) {
+  e.preventDefault();
+
+  const form = $(this);
+  const formData = form.serialize();
+  const benchmarkId = form.find('[name="result_benchmark"]').val();
+
+  $.post("/api/v1/result/add", formData, function (response) {
+    if (response === "success") {
+      fetchTestBenchmarkResults(testId, benchmarkId);
+      form[0].reset();
+    }
+  });
+});
+
+async function fetchTestBenchmarkResults(testId, benchmarkId) {
+  try {
+    const benchmarkSearchParams = new URLSearchParams({
+      benchmark_id: benchmarkId,
+    });
+    const benchmarkRes = await fetch(
+      `/api/v1/benchmark/details?${benchmarkSearchParams}`,
+    );
+    const benchmarkData = await benchmarkRes.json();
+
+    const resultSearchParams = new URLSearchParams({
+      test_id: testId,
+      benchmark_id: benchmarkId,
+    });
+    const resultRes = await fetch(`/api/v1/result/list?${resultSearchParams}`);
+    const resultData = await resultRes.json();
+
+    let avg_total = 0;
+    let min_total = 0;
+    let max_total = 0;
+
+    for (const result of resultData) {
+      avg_total += result.avgScore;
+      if (result.minScore !== undefined) min_total += result.minScore;
+      if (result.maxScore !== undefined) max_total += result.maxScore;
+    }
+
+    const tableRow = $(`#results-table tr[data-benchmark-id=${benchmarkId}]`);
+    tableRow.empty();
+
+    tableRow.append(
+      '<td><a href="/benchmark/' +
+        benchmarkData.id +
+        '">' +
+        benchmarkData.name +
+        "</a></td>",
+    );
+    tableRow.append("<td>" + benchmarkData.scoring + "</td>");
+    tableRow.append("<td>" + resultData.length + "</td>");
+
+    if (resultData.length !== 0) {
+      tableRow.append("<td>" + avg_total / resultData.length + "</td>");
+    } else {
+      tableRow.append("<td>N/a</td>");
+    }
+
+    if (min_total !== 0) {
+      tableRow.append("<td>" + min_total / resultData.length + "</td>");
+      tableRow.append("<td>" + max_total / resultData.length + "</td>");
+    } else {
+      tableRow.append("<td>N/a</td>");
+      tableRow.append("<td>N/a</td>");
+    }
+  } catch (error) {
+    console.error("An error occurred while fetching benchmark results.", error);
+  }
+}
+
+$(document).ready(function() {
+  $("#results-table tbody tr").each(function (index, tr) {
+    const benchmarkId = $(tr).data("benchmark-id");
+    console.log("Fetching results for benchmark id: " + benchmarkId);
+    fetchTestBenchmarkResults(testId, benchmarkId);
+  });
+});

assets/styles/eye.sass

@@ -1,71 +0,0 @@
-html,
-body 
-  width: 100% 
-  height: 100% 
-  margin: 0 
-  padding: 0 
-body 
-  height: auto 
-  min-height: 100% 
-  box-sizing: border-box 
-  padding-top: 80px 
-  padding-bottom: 80px 
-  background: #eee 
-a 
-  color: teal 
-  transition: all 200ms ease-in-out 
-  &:hover 
-    color: #007070 
-textarea 
-  max-width: 100% 
-  min-width: 100% 
-  height: 100px 
-.container 
-  max-width: 1024px 
-select[multiple] 
-  min-height: 125px 
-#main-nav 
-  position: fixed 
-  top: 0 
-  left: 0 
-  width: 100% 
-  height: 64px 
-  background: teal 
-  color: white 
-  z-index: 20 
-  ul 
-    list-style: none 
-    display: inline-block 
-    li 
-      display: inline-block 
-      margin-left: 15px 
-  h4 
-    display: inline-block 
-    margin-left: 25px 
-    line-height: 64px 
-  a 
-    color: white 
-    font-size: 2.25rem 
-    line-height: 64px 
-    transition: all 200ms ease-in-out 
-    &:hover 
-      color: #eee 
-      font-size: 2.5rem 
-#main-content 
-  padding: 14px 20px 
-  background: white 
-  border-radius: 8px 
-  z-index: 10 
-#main-footer 
-  position: fixed 
-  bottom: 0 
-  left: 0 
-  width: 100% 
-  height: 64px 
-  p 
-    margin-bottom: 5px 
-    text-align: center 
-#result_form 
-  margin-bottom: 0 
-  * 
-    margin-bottom: 0 

assets/styles/eye.scss

@@ -0,0 +1,28 @@
+$primary-color: teal;
+
+html{
+  width: 100%;
+  height: 100%;
+}
+
+body{
+    background: #666;
+}
+
+table{
+  border: 1px solid #666;
+}
+
+#main-nav{
+  img{
+    max-height: 40px;
+    margin-right: 15px;
+  }
+}
+
+#main-content{
+  padding: 1.5rem 2rem;
+  background: white;
+  border: 1px solid #bbb;
+  border-radius: 12px;
+}

bin/docker-build.bat

@@ -1 +1,2 @@
 docker build -t leviathan .
+docker build -t leviathan-grunt -f Dockerfile.grunt .

bin/docker-build.sh

@@ -1,3 +1,4 @@
 #!/bin/sh
 
 docker build -t leviathan .
+docker build -t leviathan-grunt -f Dockerfile.grunt .

bin/docker-run.bat

@@ -1 +1,2 @@
-docker run --rm -d -v "%cd%:/app" -p 3000:3000 --name leviathan leviathan
+docker run --rm -d -w "/usr/src/leviathan" -v "$(pwd):/usr/src/leviathan" -p 3000:3000 --name leviathan leviathan
+docker run --rm -d -w "/usr/src/leviathan" -v "$(pwd):/usr/src/leviathan" --name leviathan-grunt leviathan-grunt npm run grunt watch

bin/docker-run.sh

@@ -1,3 +1,4 @@
 #!/bin/sh
 
-docker run --rm -d -v "$(pwd):/app" -p 3000:3000 --name leviathan leviathan
+docker run --rm -d -w "/usr/src/leviathan" -v "$(pwd):/usr/src/leviathan" -p 3000:3000 --name leviathan leviathan
+docker run --rm -d -w "/usr/src/leviathan" -v "$(pwd):/usr/src/leviathan" --name leviathan-grunt leviathan-grunt npm run grunt watch

index.js

@@ -1,44 +1,6 @@
-const express = require('express');
-const app = express();
-const port = 3000;
+const app = require('./src/app');
 
-// grab app and node.js process data
-const pjson = require('./package.json');
-const { versions } = require('node:process');
-
-// register app and node.js versions with views;
-app.locals.app_version = pjson.version;
-app.locals.node_version = versions.node;
-
-// initialize database
-const sequelize = require('./src/models');
-sequelize.sync({}).then(function(){
-  console.log('database has been synced');
-}).catch(function(){
-  console.log('unable to sync database');
-});
-
-// enable sessions
-const session = require("express-session");
-app.use(session({ resave: true, secret: "123456", saveUninitialized: true }));
-
-// enable body-parser to read form data
-const bodyParser = require('body-parser');
-app.use(bodyParser.urlencoded({ extended: true }));
-
-// enable the Twig template engine
-app.set('view engine', 'twig');
-app.set('twig options', {
-    allowAsync: true,
-    strict_variables: false
-});
-
-// enable serving static files
-app.use(express.static('public'));
-
-// load routes to express
-require('./src/routes')(app);
-
-app.listen(port, () => {
-  console.log(`Leviathan listening on port ${port}`);
+const PORT = process.env.PORT || 3000;
+app.listen(PORT, () => {
+  console.log(`Listening on port ${PORT}`);
 });

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "start": "node index.js",
     "dev": "nodemon ./index.js",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "mocha \"test/**/*.test.js\"",
     "grunt": "grunt"
   },
   "repository": {
@@ -28,12 +28,16 @@
     "twig": "^1.17.1"
   },
   "devDependencies": {
+    "chai": "^5.3.1",
     "grunt": "^1.6.1",
     "grunt-cli": "^1.5.0",
-    "grunt-contrib-coffee": "^2.1.0",
+    "grunt-contrib-copy": "^1.0.0",
     "grunt-contrib-sass": "^2.0.0",
+    "grunt-contrib-uglify": "^5.2.2",
     "grunt-contrib-watch": "^1.1.0",
+    "mocha": "^11.7.1",
     "nodemon": "^3.1.10",
-    "sass": "^1.89.2"
+    "sass": "^1.89.2",
+    "supertest": "^7.1.4"
   }
 }

src/app.js

@@ -0,0 +1,41 @@
+const express = require('express');
+const app = express();
+
+// grab app and node.js process data
+const pjson = require('../package.json');
+const { versions } = require('node:process');
+
+// register app and node.js versions with views;
+app.locals.app_version = pjson.version;
+app.locals.node_version = versions.node;
+
+// initialize database
+const sequelize = require('./models');
+sequelize.sync({}).then(function(){
+  console.log('database has been synced');
+}).catch(function(){
+  console.log('unable to sync database');
+});
+
+// enable sessions
+const session = require("express-session");
+app.use(session({ resave: true, secret: "123456", saveUninitialized: true }));
+
+// enable body-parser to read form data
+const bodyParser = require('body-parser');
+app.use(bodyParser.urlencoded({ extended: true }));
+
+// enable the Twig template engine
+app.set('view engine', 'twig');
+app.set('twig options', {
+    allowAsync: true,
+    strict_variables: false
+});
+
+// enable serving static files
+app.use(express.static('public'));
+
+// load routes to express
+require('./routes')(app);
+
+module.exports = app;

test/app.test.js

@@ -0,0 +1,18 @@
+const request = require('supertest');
+const { expect } = require('chai');
+const app = require('../src/app');
+
+describe('GET /', () => {
+  beforeEach(async () => {
+    const res = await request(app).get('/');
+    this.res = res;
+  });
+
+  it('should run the app server', async () => {
+    expect(this.res.status).to.equal(200);
+  });
+
+  it('should return an HTML response', async () => {
+    expect(this.res.headers['content-type']).match(/text\/html/);
+  });
+});

test/routes/benchmark.test.js

@@ -0,0 +1,60 @@
+const request = require('supertest');
+const { expect } = require('chai');
+const app = require('../../src/app');
+
+describe('GET /benchmark', () => {
+  beforeEach(async () => {
+    const res = await request(app).get('/benchmark');
+    this.res = res;
+  });
+
+  it('Benchmark base route should return a redirect', async () => {
+    expect(this.res.status).to.equal(302);
+  });
+
+  it('Benchmark base route should return an HTML response', async () => {
+    expect(this.res.headers['content-type']).contains('text/plain');
+  });
+
+  it('Benchmark base route should redirect to /benchmark/list', async () => {
+    expect(this.res.headers['location']).contains('/benchmark/list');
+  });
+});
+
+describe('GET /benchmark/list', () => {
+  beforeEach(async () => {
+    const res = await request(app).get('/benchmark/list');
+    this.res = res;
+  });
+
+  it('Benchmark list route should return a 200 status', async () => {
+    expect(this.res.status).to.equal(200);
+  });
+
+  it('Benchmark list route should return an HTML response', async () => {
+    expect(this.res.headers['content-type']).contains('text/html');
+  });
+
+  it('Benchmark list route should contain "List of Benchmarks" in body', async() => {
+    expect(this.res.text).contains('List of Benchmarks');
+  });
+});
+
+describe('GET /benchmark/add', () => {
+  beforeEach(async () => {
+    const res = await request(app).get('/benchmark/add');
+    this.res = res;
+  });
+
+  it('Benchmark add route should return a 200 status', async () => {
+    expect(this.res.status).to.equal(200);
+  });
+
+  it('Benchmark add route should return an HTML response', async () => {
+    expect(this.res.headers['content-type']).contains('text/html');
+  });
+
+  it('Benchmark add route should contain "Add a Benchmark" in body', async() => {
+    expect(this.res.text).contains('Add a Benchmark');
+  });
+});

test/routes/hardware.test.js

@@ -0,0 +1,60 @@
+const request = require('supertest');
+const { expect } = require('chai');
+const app = require('../../src/app');
+
+describe('GET /hardware', () => {
+  beforeEach(async () => {
+    const res = await request(app).get('/hardware');
+    this.res = res;
+  });
+
+  it('Hardware base route should return a redirect', async () => {
+    expect(this.res.status).to.equal(302);
+  });
+
+  it('Hardware base route should return an HTML response', async () => {
+    expect(this.res.headers['content-type']).contains('text/plain');
+  });
+
+  it('Hardware base route should redirect to /hardware/list', async () => {
+    expect(this.res.headers['location']).contains('/hardware/list');
+  });
+});
+
+describe('GET /hardware/list', () => {
+  beforeEach(async () => {
+    const res = await request(app).get('/hardware/list');
+    this.res = res;
+  });
+
+  it('Hardware list route should return a 200 status', async () => {
+    expect(this.res.status).to.equal(200);
+  });
+
+  it('Hardware list route should return an HTML response', async () => {
+    expect(this.res.headers['content-type']).contains('text/html');
+  });
+
+  it('Hardware list route should contain "List of Hardware" in body', async() => {
+    expect(this.res.text).contains('List of Hardware');
+  });
+});
+
+describe('GET /hardware/add', () => {
+  beforeEach(async () => {
+    const res = await request(app).get('/hardware/add');
+    this.res = res;
+  });
+
+  it('Hardware add route should return a 200 status', async () => {
+    expect(this.res.status).to.equal(200);
+  });
+
+  it('Hardware add route should return an HTML response', async () => {
+    expect(this.res.headers['content-type']).contains('text/html');
+  });
+
+  it('Hardware add route should contain "Add Hardware" in body', async() => {
+    expect(this.res.text).contains('Add Hardware');
+  });
+});

test/routes/test.test.js

@@ -0,0 +1,60 @@
+const request = require('supertest');
+const { expect } = require('chai');
+const app = require('../../src/app');
+
+describe('GET /test', () => {
+  beforeEach(async () => {
+    const res = await request(app).get('/test');
+    this.res = res;
+  });
+
+  it('Test base route should return a redirect', async () => {
+    expect(this.res.status).to.equal(302);
+  });
+
+  it('Test base route should return an HTML response', async () => {
+    expect(this.res.headers['content-type']).contains('text/plain');
+  });
+
+  it('Test base route should redirect to /test/list', async () => {
+    expect(this.res.headers['location']).contains('/test/list');
+  });
+});
+
+describe('GET /test/list', () => {
+  beforeEach(async () => {
+    const res = await request(app).get('/test/list');
+    this.res = res;
+  });
+
+  it('Test list route should return a 200 status', async () => {
+    expect(this.res.status).to.equal(200);
+  });
+
+  it('Test list route should return an HTML response', async () => {
+    expect(this.res.headers['content-type']).contains('text/html');
+  });
+
+  it('Test list route should contain "List of Tests" in body', async() => {
+    expect(this.res.text).contains('List of Tests');
+  });
+});
+
+describe('GET /test/add', () => {
+  beforeEach(async () => {
+    const res = await request(app).get('/test/add');
+    this.res = res;
+  });
+
+  it('Test add route should return a 200 status', async () => {
+    expect(this.res.status).to.equal(200);
+  });
+
+  it('Test add route should return an HTML response', async () => {
+    expect(this.res.headers['content-type']).contains('text/html');
+  });
+
+  it('Test add route should contain "Add a Test" in body', async() => {
+    expect(this.res.text).contains('Add a Test');
+  });
+});

test/routes/toplevel.test.js

@@ -0,0 +1,22 @@
+const request = require('supertest');
+const { expect } = require('chai');
+const app = require('../../src/app');
+
+describe('GET /', () => {
+  beforeEach(async () => {
+    const res = await request(app).get('/');
+    this.res = res;
+  });
+
+  it('Dashboard should return a 200 status', async () => {
+    expect(this.res.status).to.equal(200);
+  });
+
+  it('Dashboard should return an HTML response', async () => {
+    expect(this.res.headers['content-type']).match(/text\/html/);
+  });
+
+  it('Dashboard should contain "Leviathan" in body', async() => {
+    expect(this.res.text).contains('Leviathan');
+  });
+});

views/benchmark/list.twig

@@ -7,7 +7,8 @@
   <h2>Benchmarks</h2>
   <a href="/benchmark/add">Add a benchmark</a>
 
-  <table class="twelve columns">
+  <div class="col-12">
+    <table class="table table-responsive table-hover">
       <thead>
         <tr>
           <td>Benchmark name</td>
@@ -28,4 +29,5 @@
       </tbody>
     </table>
   </div>
+</div>
 {% endblock %}

views/hardware/list.twig

@@ -7,7 +7,8 @@
   <h2>Hardware</h2>
   <a href="/hardware/add">Add new hardware</a>
 
-  <table class="twelve columns">
+  <div class="col-12">
+    <table class="table table-responsive table-hover">
       <thead>
         <tr>
           <td>Name</td>
@@ -28,4 +29,5 @@
       </tbody>
     </table>
   </div>
+</div>
 {% endblock %}

views/index/dashboard.twig

@@ -5,7 +5,9 @@
 {% block content %}
 <div class="row">
   <h2>Recently updated tests:</h2>
-  <table class="twelve columns">
+
+  <div class="col-12">
+    <table class="table table-responsive table-hover">
       <thead>
         <tr>
           <td>Title</td>
@@ -24,4 +26,5 @@
       </tbody>
     </table>
   </div>
+</div>
 {% endblock %}

views/layouts/default.twig

@@ -4,17 +4,23 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="shortcut icon" href="/img/leviathan-favicon-nobg.png">
   <title>{% block title %}{% endblock %} | Leviathan</title>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.7/css/bootstrap.min.css">
   <link rel="stylesheet" href="/css/eye.css">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" charset="utf-8"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.7/js/bootstrap.min.js" charset="utf-8"></script>
+  <script src="/js/scar.js"></script>
+  {% block scripts %}{% endblock %}
 </head>
-<body>
+<body class="d-flex flex-column min-vh-100">
   {% include 'partials/navbar.twig' %}
 
-  <div id="main-content" class="container">
+  <main class="flex-grow-1 py-4">
+    <div id="main-content" class="container mb-4">
       {% block content %}{% endblock %}
     </div>
+  </main>
 
   {% include 'partials/footer.twig' %}
 </body>

views/partials/footer.twig

@@ -1,4 +1,10 @@
-<nav id="main-footer">
+<footer id="main-footer" class="bg-light border-top py-3 text-center">
+  <div class="container">
+    <div class="row">
+      <div class="col-12">
         <p>Leviathan version v{{ app_version }}</p>
-  <p>Running node.js version v{{ node_version }}</p>
-</nav>
+        <p class="mb-0">Running Node.js version v{{ node_version }}</p>
+      </div>
+    </div>
+  </div>
+</footer>

views/partials/navbar.twig

@@ -1,11 +1,31 @@
-<nav id="main-nav">
-  <div class="nav-left">
-    <h4>Leviathan</h4>
-    <ul>
-      <li><a href="/">Dashboard</a></li>
-      <li><a href="/test">Tests</a></li>
-      <li><a href="/hardware">Hardware</a></li>
-      <li><a href="/benchmark">Benchmarks</a></li>
+<nav id="main-nav" class="navbar navbar-expand-md" style="background-color: #e3f2fd;" data-bs-theme="light">
+  <div class="container-fluid">
+    <a href="#" class="img-fluid">
+      <img src="/img/leviathan-logo-nobg.png" alt="Leviathan">
+    </a>
+
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <ul class="navbar-nav me-auto mb-2 mb-md-0">
+        <li class="nav-item">
+          <a class="nav-link" href="/">Dashboard</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/benchmark">Benchmarks</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/hardware">Hardware</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/test">Test</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/report">Reports</a>
+        </li>
       </ul>
     </div>
+  </div>
 </nav>

views/test/list.twig

@@ -7,7 +7,8 @@
   <h2>Tests</h2>
   <a href="/test/add">Add a test</a>
 
-  <table class="twelve columns">
+  <div class="col-12">
+    <table class="table table-responsive table-hover">
       <thead>
         <tr>
           <td>Title</td>
@@ -26,4 +27,5 @@
       </tbody>
     </table>
   </div>
+</div>
 {% endblock %}

views/test/view.twig

@@ -2,53 +2,53 @@
 
 {% block title %}Test: {{ test.title }}{% endblock %}
 
+{% block scripts %}
+  <script src="/js/test.js" type="text/javascript"></script>
+{% endblock %}
+
 {% block content %}
 <div class="row">
+  <div class="col-12">
     <h2>Test: {{ test.title }}</h2>
 
     <h4>Hardware tested: <a href="/hardware/{{ test.getHardware().id }}">{{ test.getHardware().name }}</a></h4>
   </div>
+</div>
 
 <hr>
 
 <div class="row">
-  <form id="test-result-form" class="twelve columns" action="/api/v1/result/add" method="post">
+  <form id="test-result-form" class="col-12" action="/api/v1/result/add" method="post">
     <input type="hidden" name="result_test" value="{{ test.id }}">
 
     <div class="row">
-      <div class="four columns">
-        <label for="result_benchmark">
-          Benchmark:
-          <select class="u-full-width" id="result_benchmark" name="result_benchmark">
+      <div class="col-4">
+        <label class="form-label" for="result_benchmark">Benchmark:</label>
+        <select id="result_benchmark" class="form-select" name="result_benchmark">
           {% for b in test.getBenchmarks() %}
             <option value="{{ b.id }}">{{ b.name }}</option>
           {% endfor %}
         </select>
-        </label>
       </div>
 
-      <div class="two columns">
-        <label for="result_avg">
-          Average:
-          <input type="number" id="result_avg" class="u-full-width" name="result_avg" step="0.01" required>
-        </label>
+      <div class="col-2">
+        <label class="form-label" for="result_avg">Average:</label>
+        <input id="result_avg" class="form-control" type="number" name="result_avg" step="0.01" required>
       </div>
 
-      <div class="two columns">
-        <label for="result_min">
-          Minimum:
-          <input type="number" id="result_min" class="u-full-width" name="result_min" step="0.01">
-        </label>
+      <div class="col-2">
+        <label class="form-label" for="result_min">Minimum:</label>
+        <input id="result_min" class="form-control" type="number" name="result_min" step="0.01">
       </div>
 
-      <div class="two columns">
-        <label for="result_max">
-          Maximum:
-          <input type="number" id="result_max" class="u-full-width" name="result_max" step="0.01">
-        </label>
+      <div class="col-2">
+        <label class="form-label" for="result_max">Maximum:</label>
+        <input id="result_max" class="form-control" type="number" name="result_max" step="0.01">
       </div>
 
-      <input type="submit" class="two columns" value="Submit">
+      <div class="col-2">
+        <input type="submit" class="btn btn-primary" value="Add Result">
+      </div>
     </div>
   </form>
 </div>
@@ -56,10 +56,10 @@
 <hr>
 
 <div class="row">
-  <div class="twelve columns">
-    <h3>Benchmarks</h3>
-    <table id="results-table" data-test-id="{{ test.id }}" class="u-full-width">
-      <thead>
+  <div class="col-12">
+    <h3 class="mb-3">Benchmarks</h3>
+    <table id="results-table" class="table table-hover table-responsive" data-test-id="{{ test.id }}">
+      <thead class="table-light">
         <tr>
           <td>Benchmark</td>
           <td>Scoring type</td>
@@ -81,6 +81,4 @@
 
   <p><a href="/test">Back</a></p>
 </div>
-
-<script src="/js/test.js" type="text/javascript"></script>
 {% endblock %}