- remove old admin interface

- introduce 404 page
- fix chrome display bug
- fixed about not showing version
- removed unused dependecies
- removed dead code from interface.js
- moved layout to dedicated page

README.MD

@@ -1,5 +1,8 @@
 # openCountdown
 
 # ToDo
-- [ ] Improve duration picker in table view
 - [P] Endpoint docs
+- [ ] Better WS frames
+- [ ] Diffrent time picker for countdown selection
+- [X] Deprecate old UI
+- [X] Proper 404 page

index.js

@@ -87,12 +87,6 @@ app.get("/", function (req, res) {
   res.send(data);
 });
 
-app.get("/old", function (req, res) {
-  const data = fs.readFileSync("templates/adminPanel.html", "utf8");
-  res.send(data);
-});
-
-
 app.get("/timer", function (req, res) {
   const data = fs.readFileSync("templates/timerPage.html", "utf8");
   res.send(data);
@@ -104,6 +98,8 @@ app.get("/api/v1/data", function (req, res) {
 });
 
 app.get("/api/v1/system", function (req, res) {
+  const tempPkgFile = fs.readFileSync("package.json", "utf8");
+  const tempPkgObj = JSON.parse(tempPkgFile);
   const systemData = {
     uptime: process.uptime(),
     memoryUsage: process.memoryUsage(),
@@ -118,6 +114,7 @@ app.get("/api/v1/system", function (req, res) {
     nodeEnv: process.env,
     nodeConfig: process.config,
     nodeTitle: process.title,
+    systemVersion: tempPkgObj.version
   }
   res.json(systemData);
 });
@@ -298,6 +295,28 @@ app.get("/api/v1/storage/delete", function (req, res) {
   updatedData()
 });
 
+app.use(function(req, res, next) {
+  res.status(404);
+
+  // respond with html page
+  if (req.accepts('html')) {
+    const data = fs.readFileSync("templates/errorPages/404.html", "utf8");
+    res.status(404)
+    res.send(data);
+    return;
+  }
+
+  // respond with json
+  if (req.accepts('json')) {
+    res.json({ error: 'Not found' });
+    return;
+  }
+
+  // default to plain-text. send()
+  res.type('txt').send('Not found');
+});
+
+
 
 console.log("Starting server...");
 const port = 3006

package-lock.json

@@ -1,25 +1,24 @@
 {
   "name": "opencountdown",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "opencountdown",
-      "version": "1.0.0",
+      "version": "1.0.1",
       "license": "LGPL-3.0",
       "dependencies": {
         "body-parser": "^1.19.2",
         "bootstrap": "^5.1.3",
         "bootstrap-duration-picker": "^2.1.3",
         "bootstrap-icons": "^1.8.1",
-        "countdown": "^2.6.0",
         "darkreader": "^4.9.44",
         "express": "^4.17.3",
         "jquery": "^3.6.0",
         "js-cookie": "^3.0.1",
+        "less": "^3.13",
         "mdbootstrap": "^4.20.0",
-        "moment": "^2.29.1",
         "ws": "^8.5.0"
       }
     },
@@ -135,10 +134,16 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
     },
-    "node_modules/countdown": {
+    "node_modules/copy-anything": {
-      "version": "2.6.0",
+      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/countdown/-/countdown-2.6.0.tgz",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
-      "integrity": "sha1-Z3+446nUzE52QVkBuiU7UYrzQXc="
+      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "dependencies": {
+        "is-what": "^3.14.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
     },
     "node_modules/darkreader": {
       "version": "4.9.44",
@@ -183,6 +188,18 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "optional": true,
+      "dependencies": {
+        "prr": "~1.0.1"
+      },
+      "bin": {
+        "errno": "cli.js"
+      }
+    },
     "node_modules/escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -269,6 +286,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.9",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz",
+      "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==",
+      "optional": true
+    },
     "node_modules/http-errors": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
@@ -295,6 +318,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
+      "optional": true,
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
@@ -308,6 +343,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/is-what": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA=="
+    },
     "node_modules/jquery": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
@@ -321,6 +361,43 @@
         "node": ">=12"
       }
     },
+    "node_modules/less": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/less/-/less-3.13.1.tgz",
+      "integrity": "sha512-SwA1aQXGUvp+P5XdZslUOhhLnClSLIjWvJhmd+Vgib5BFIr9lMNlQwmwUNOjXThF/A0x+MCYYPeWEfeWiLRnTw==",
+      "dependencies": {
+        "copy-anything": "^2.0.1",
+        "tslib": "^1.10.0"
+      },
+      "bin": {
+        "lessc": "bin/lessc"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "optionalDependencies": {
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "native-request": "^1.0.5",
+        "source-map": "~0.6.0"
+      }
+    },
+    "node_modules/make-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "optional": true,
+      "dependencies": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/mdbootstrap": {
       "version": "4.20.0",
       "resolved": "https://registry.npmjs.org/mdbootstrap/-/mdbootstrap-4.20.0.tgz",
@@ -377,19 +454,17 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/moment": {
-      "version": "2.29.1",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
-      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
+    "node_modules/native-request": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/native-request/-/native-request-1.1.0.tgz",
+      "integrity": "sha512-uZ5rQaeRn15XmpgE0xoPL8YWqcX90VtCFglYwAgkvKM5e8fog+vePLAhHxuuv/gRkrQxIeh5U3q9sMNUrENqWw==",
+      "optional": true
+    },
     "node_modules/negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -422,6 +497,15 @@
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
       "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
     },
+    "node_modules/pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -434,6 +518,12 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
+      "optional": true
+    },
     "node_modules/qs": {
       "version": "6.9.7",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz",
@@ -491,6 +581,15 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "node_modules/semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
     "node_modules/send": {
       "version": "0.17.2",
       "resolved": "https://registry.npmjs.org/send/-/send-0.17.2.tgz",
@@ -538,6 +637,15 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/statuses": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
@@ -554,6 +662,11 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
     "node_modules/type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -693,10 +806,13 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
     },
-    "countdown": {
+    "copy-anything": {
-      "version": "2.6.0",
+      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/countdown/-/countdown-2.6.0.tgz",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
-      "integrity": "sha1-Z3+446nUzE52QVkBuiU7UYrzQXc="
+      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "requires": {
+        "is-what": "^3.14.1"
+      }
     },
     "darkreader": {
       "version": "4.9.44",
@@ -731,6 +847,15 @@
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
     },
+    "errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "optional": true,
+      "requires": {
+        "prr": "~1.0.1"
+      }
+    },
     "escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -802,6 +927,12 @@
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
       "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
     },
+    "graceful-fs": {
+      "version": "4.2.9",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz",
+      "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==",
+      "optional": true
+    },
     "http-errors": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
@@ -822,6 +953,12 @@
         "safer-buffer": ">= 2.1.2 < 3"
       }
     },
+    "image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
+      "optional": true
+    },
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
@@ -832,6 +969,11 @@
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
       "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
     },
+    "is-what": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA=="
+    },
     "jquery": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
@@ -842,6 +984,32 @@
       "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.1.tgz",
       "integrity": "sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw=="
     },
+    "less": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/less/-/less-3.13.1.tgz",
+      "integrity": "sha512-SwA1aQXGUvp+P5XdZslUOhhLnClSLIjWvJhmd+Vgib5BFIr9lMNlQwmwUNOjXThF/A0x+MCYYPeWEfeWiLRnTw==",
+      "requires": {
+        "copy-anything": "^2.0.1",
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "native-request": "^1.0.5",
+        "source-map": "~0.6.0",
+        "tslib": "^1.10.0"
+      }
+    },
+    "make-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "optional": true,
+      "requires": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      }
+    },
     "mdbootstrap": {
       "version": "4.20.0",
       "resolved": "https://registry.npmjs.org/mdbootstrap/-/mdbootstrap-4.20.0.tgz",
@@ -880,16 +1048,17 @@
         "mime-db": "1.51.0"
       }
     },
-    "moment": {
-      "version": "2.29.1",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
-      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
-    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
+    "native-request": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/native-request/-/native-request-1.1.0.tgz",
+      "integrity": "sha512-uZ5rQaeRn15XmpgE0xoPL8YWqcX90VtCFglYwAgkvKM5e8fog+vePLAhHxuuv/gRkrQxIeh5U3q9sMNUrENqWw==",
+      "optional": true
+    },
     "negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -913,6 +1082,12 @@
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
       "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
     },
+    "pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "optional": true
+    },
     "proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -922,6 +1097,12 @@
         "ipaddr.js": "1.9.1"
       }
     },
+    "prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
+      "optional": true
+    },
     "qs": {
       "version": "6.9.7",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz",
@@ -953,6 +1134,12 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "optional": true
+    },
     "send": {
       "version": "0.17.2",
       "resolved": "https://registry.npmjs.org/send/-/send-0.17.2.tgz",
@@ -996,6 +1183,12 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "optional": true
+    },
     "statuses": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
@@ -1006,6 +1199,11 @@
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
       "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="
     },
+    "tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
     "type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencountdown",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "An opensource countdown",
   "main": "index.js",
   "scripts": {
@@ -13,13 +13,12 @@
     "bootstrap": "^5.1.3",
     "bootstrap-duration-picker": "^2.1.3",
     "bootstrap-icons": "^1.8.1",
-    "countdown": "^2.6.0",
     "darkreader": "^4.9.44",
     "express": "^4.17.3",
     "jquery": "^3.6.0",
     "js-cookie": "^3.0.1",
+    "less": "^3.13",
     "mdbootstrap": "^4.20.0",
-    "moment": "^2.29.1",
     "ws": "^8.5.0"
   }
 }

static/css/errorPage/style.css

@@ -0,0 +1,86 @@
+html, body {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.container {
+    height: 100%;
+    width: 100%;
+    background-color: #0B161E;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-family: 'Segoe UI';
+    text-align: center;
+}
+
+.color-foreground {
+    color: #474849 !important;
+}
+
+.text-shadow {
+    text-shadow: 1px 1px 2px;
+}
+
+.rainbow {
+    -webkit-animation:rainbow 16s infinite;
+    -ms-animation:rainbow 16s infinite;
+    -o-animation:rainbow 16s infinite;
+    animation:rainbow 16s infinite;
+}
+
+@-webkit-keyframes rainbow {
+0% {color: #ff0000;}
+10% {color: #ff8000;}
+20% {color: #ffff00;}
+30% {color: #80ff00;}
+40% {color: #00ff00;}
+50% {color: #00ff80;}
+60% {color: #00ffff;}
+70% {color: #0080ff;}
+80% {color: #0000ff;}
+90% {color: #8000ff;}
+100% {color: #ff0080;}
+}
+@-ms-keyframes rainbow {
+0% {color: #ff0000;}
+10% {color: #ff8000;}
+20% {color: #ffff00;}
+30% {color: #80ff00;}
+40% {color: #00ff00;}
+50% {color: #00ff80;}
+60% {color: #00ffff;}
+70% {color: #0080ff;}
+80% {color: #0000ff;}
+90% {color: #8000ff;}
+100% {color: #ff0080;}
+}
+@-o-keyframes rainbow {
+0% {color: #ff0000;}
+10% {color: #ff8000;}
+20% {color: #ffff00;}
+30% {color: #80ff00;}
+40% {color: #00ff00;}
+50% {color: #00ff80;}
+60% {color: #00ffff;}
+70% {color: #0080ff;}
+80% {color: #0000ff;}
+90% {color: #8000ff;}
+100% {color: #ff0080;}
+}
+@keyframes rainbow {
+0% {color: #ff0000;}
+10% {color: #ff8000;}
+20% {color: #ffff00;}
+30% {color: #80ff00;}
+40% {color: #00ff00;}
+50% {color: #00ff80;}
+60% {color: #00ffff;}
+70% {color: #0080ff;}
+80% {color: #0000ff;}
+90% {color: #8000ff;}
+100% {color: #ff0080;}
+}

static/css/errorPage/styles.less

@@ -0,0 +1,62 @@
+.glitch-wrapper {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.glitch {
+  @offset1: 2px;
+  @offset2: -2px;
+  @highlight1: #49FC00;
+  @highlight2: spin(@highlight1, 180);
+  
+  color: white;
+  font-size: 150px;
+  text-transform: upercase;
+  position: relative;
+  display: inline-block;
+  
+  &::before,
+  &::after  {
+    content: attr(data-text);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #0B161E;
+  }
+  
+  &::before {
+    left: @offset1;
+    text-shadow: -2px 0 @highlight1;
+    clip: rect(24px, 550px, 90px, 0);
+    animation: glitch-anim-2 3s infinite linear alternate-reverse;
+  }
+  
+  &::after {
+    left: @offset2;
+    text-shadow: -2px 0 @highlight2;
+    clip: rect(85px, 550px, 140px, 0);
+    animation: glitch-anim 2.5s infinite linear alternate-reverse;
+  }
+}
+
+.glitch-frames (@n: 20, @index: 0) when (@index <= @n) {
+  @keyframeSel: percentage(@index/@n);
+  @rand1: unit(round(`Math.random()*150`),px);
+  @rand2: unit(round(`Math.random()*150`), px);
+  @{keyframeSel} {
+    clip: rect(@rand1, 9999px, @rand2, 0);
+  }
+  .glitch-frames(@n, (@index + 1));
+}
+
+@keyframes glitch-anim {
+  .glitch-frames(24);
+}
+
+@keyframes glitch-anim-2 {
+  .glitch-frames(30,2);
+}

static/css/mainStyle.css

@@ -10,7 +10,7 @@ body {
   main {
     display: flex;
     flex-wrap: nowrap;
-    height: 100vh;
+    height: 100vh !important;
     height: -webkit-fill-available;
     max-height: 100vh;
     overflow-x: auto;

static/js/countdown.js

@@ -1 +0,0 @@
-../../node_modules/countdown/countdown.js

static/js/interface.js

@@ -40,9 +40,10 @@ $(function () {
         }
     }
 
-    saveOption("/api/v1/system", function systemInfo(event) {
+    saveOption("/api/v1/system", function systemInfoLoader(event) {
-        const dataSystem = JSON.parse(event.originalTarget.response)
+        const dataSystem = JSON.parse(event.target.response)
         document.getElementById("nodejsVers").innerHTML = dataSystem.nodeVersion
+        document.getElementById("nodeSwVers").innerHTML = dataSystem.systemVersion
 
         const tree2 = jsonview.create(dataSystem);
         jsonview.render(tree2, document.getElementById("systemInfo"));
@@ -95,8 +96,6 @@ $(function () {
             onChanged: function (newVal, test, val2) {
                 //   $('#duration-label2').text(newVal);
                 val2.days[0].parentElement.parentElement.parentElement.parentElement.children[1].value = newVal
-                //console.log(val2.days[0].parentElement.parentElement.parentElement.parentElement.children[1].value)
-                //console.log(val2.days[0].parentElement.parentElement.parentElement.parentElement.children[1])
             }
         });
     });
@@ -105,25 +104,11 @@ $(function () {
 
     // Restore settings
     saveOption("/api/v1/data", function (event, xmlHttp) {
-
-        const tableEntry = ' <tr><td class="pt-3-half numVal" contenteditable="true">#VALUE#</td>\
-            <td class="pt-3-half full" contenteditable="false"> \
-            <div class="clr-field" style="color: #bg-COLOR#;"> \
-                        <button aria-labelledby="clr-open-label"></button> \
-                        <input id="demo-input1" type="text" class="coloris" value="#COLOR#"></div> \
-                  </div> \
-            <td>\
-                <span class="table-remove"><button type="button"\
-                        class="btn btn-danger btn-rounded btn-sm my-0 deleteRow1">\
-                        Remove\
-                    </button></span>\
-            </td></tr>'
-
         const jsonResult = JSON.parse(xmlHttp.response)
-        //.innerHTML = JSON.stringify(jsonResult, null, 4)
         const tree = jsonview.create(jsonResult);
         jsonview.render(tree, document.getElementById("responeSnippet"));
         jsonview.expand(tree);
+
         // Restore mode radio
         const currentModeInt = modes.indexOf(jsonResult.mode);
         $("#btnradio" + (currentModeInt + 1))[0].checked = true
@@ -164,7 +149,6 @@ $(function () {
         }
 
 
-
         // Text colors
         currIndex = 0
         for (item in jsonResult.textColors) {
@@ -201,10 +185,7 @@ $(function () {
             showSeconds: true,
             showDays: false,
             onChanged: function (newVal, test, val2) {
-                //   $('#duration-label2').text(newVal);
                 val2.days[0].parentElement.parentElement.parentElement.parentElement.children[1].value = newVal
-                //console.log(val2.days[0].parentElement.parentElement.parentElement.parentElement.children[1].value)
-                //console.log(val2.days[0].parentElement.parentElement.parentElement.parentElement.children[1])
             }
         });
 
@@ -358,7 +339,7 @@ $(function () {
     })
 
     $("#timerHourDec").click(function (event) {
-        if (currentTime > 3600000) {
+        if (currentTime >= 3600000) {
             currentTime -= 3600000
             const times = msToTime(currentTime)
             $("#timerHoursV")[0].innerHTML = times[3];
@@ -375,7 +356,7 @@ $(function () {
         $("#timerSecondsV")[0].innerHTML = times[1];
     })
     $("#timerMinuteDec").click(function (event) {
-        if (currentTime > 60000) {
+        if (currentTime >= 60000) {
             currentTime -= 60000
             const times = msToTime(currentTime)
             $("#timerHoursV")[0].innerHTML = times[3];
@@ -391,7 +372,7 @@ $(function () {
         $("#timerSecondsV")[0].innerHTML = times[1];
     })
     $("#timerSecondsDec").click(function (event) {
-        if (currentTime > 1000) {
+        if (currentTime >= 1000) {
             currentTime -= 1000
             const times = msToTime(currentTime)
             $("#timerHoursV")[0].innerHTML = times[3];

static/js/less.min.js

@@ -0,0 +1 @@
+../../node_modules/less/dist/less.min.js

static/js/moment.js

@@ -1 +0,0 @@
-../../node_modules/moment/dist/moment.js

templates/adminPanel.html

@@ -1,94 +0,0 @@
-<!doctype html>
-
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-
-  <title>openCountdown - Admin</title>
-  <meta name="description" content="openCountdown">
-  <meta name="author" content="TheGreydiamond">
-
-  <link rel="stylesheet" href="css/styles.css?v=1.1">
-</head>
-
-<body>
-
-
-  <form action="/api/v1/set/mode" target="hiddenFrame">
-    <select id="mode" name="mode">
-      <option value="timer">Timer</option>
-      <option value="clock">Clock</option>
-      <option value="black">Black</option>
-      <option value="test">Test</option>
-    </select>
-    <button type="submit">Submit</button>
-  </form>
-
-  <br>
-  <form action="/api/v1/set/layout/showMillis" target="hiddenFrame">
-    <select id="show" name="show">
-      <option value="true">Enable Milliseconds</option>
-      <option value="false">Disable Milliseconds</option>
-    </select>
-    <button type="submit">Submit</button>
-  </form>
-
-  <form action="/api/v1/set/layout/showTime" target="hiddenFrame">
-    <select id="show" name="show">
-      <option value="true">Show Clock on Countdown page</option>
-      <option value="false">Do not show Clock on Countdown page</option>
-    </select>
-    <button type="submit">Submit</button>
-  </form>
-
-  <form action="/api/v1/set/addMillisToTimer" target="hiddenFrame">
-    <input type="time" step="0.001" name="time2" id="time2" onchange="updateHiddenForm()"></input>
-    <input type="hidden" step="0.001" name="time" id="time"></input>
-    <button type="submit">Submit</button>
-  </form>
-
-  <form action="/api/v1/set/addMillisToTimer" target="hiddenFrame">
-    <select id="time" name="time" onchange="">
-      <option value="20000">debug 1 (20 secs)</option>
-      <option value="300000">00:05:00</option>
-      <option value="600000">00:10:00</option>
-      <option value="900000">00:15:00</option>
-      <option value="1200000">00:20:00</option>
-      <option value="1500000">00:25:00</option>
-      <option value="1800000">00:30:00</option>
-      <option value="2100000">00:35:00</option>
-      <option value="2400000">00:40:00</option>
-      <option value="2700000">00:45:00</option>
-    </select>
-    <button type="submit">Submit</button>
-  </form>
-
-  Play controls:
-  <form action="/api/v1/ctrl/timer/play" target="hiddenFrame">
-    <button type="submit">Play</button>
-  </form>
-  <form action="/api/v1/ctrl/timer/pause" target="hiddenFrame">
-    <button type="submit">Pause</button>
-  </form>
-  <form action="/api/v1/ctrl/timer/restart" target="hiddenFrame">
-    <button type="submit">Restart</button>
-  </form>
-
-  Message: 
-  <form action="/api/v1/ctrl/message/show" target="hiddenFrame">
-    <input type="text" name="msg">
-    <button type="submit">Submit</button>
-  </form>
-  <form action="/api/v1/ctrl/message/hide" target="hiddenFrame">
-    <button type="submit">Hide</button>
-  </form>
-  <iframe name="hiddenFrame" style="display: none"></iframe>
-
-
-  <iframe src="/timer?smaller=true" height="80%" width="80%"> </iframe>
-</body>
-<script src="js/interface.js"></script>
-
-</html>

templates/errorPages/404.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>openCountdown - Not found</title>
+    <meta name="description" content="openCountdown">
+    <meta name="author" content="TheGreydiamond">
+
+    <script type="text/javascript" src="/js/cookie.js"></script>
+
+    <link rel="stylesheet/less" type="text/css" href="/css/errorPage/styles.less" />
+
+
+    <script>
+        less = {
+            javascriptEnabled: true
+        };
+    </script>
+    <script src="/js/less.min.js"></script>
+
+    <link rel="stylesheet" href="/css/errorPage/style.css">
+
+    <link rel="stylesheet" href="/css/bootstrap-icons.css">
+</head>
+
+<body>
+    <div class="container">
+        <h1 class="rainbow">
+            <div class="glitch" data-text="404">
+                404
+            </div>
+        </h1>
+        <h2 class="color-foreground">
+            We're sorry, the page you were looking for isn't found here.<br>
+            The link you followed may either be broken or no longer exists. Please
+            check your spelling.<br>
+
+            <a href="/"><i class="bi bi-house-door"></i> Back home</a>
+        </h2>
+
+    </div>
+</body>
+
+</html>

templates/newAdminPanel.html

@@ -47,6 +47,12 @@
                         Home
                     </a>
                 </li>
+                <li>
+                    <a href="#settings" class="nav-link text-white" id="PageSettings">
+                        <i class="bi bi-gear"></i>
+                        Settings
+                    </a>
+                </li>
                 <li>
                     <a href="#debug" class="nav-link text-white" id="PageDebug">
                         <i class="bi bi-bug"></i>
@@ -218,12 +224,10 @@
                             </button>
                         </div>
                     </div>
-
                 </div>
-                <hr>
+            </page>
-                <h3>Layout</h3>
+            <page id="settings" class="pageC hidden flex-fill overflow-auto">
-
+                <h1>Settings</h1>
-
                 <label for="showTime">Show clock on Timer:</label>
                 <input type="checkbox" name="showTime" id="showTime"><br>
 
@@ -232,7 +236,6 @@
 
                 <label for="progBarShow">Show progressbar:</label>
                 <input type="checkbox" name="progBarShow" id="progBarShow"><br>
-
                 <details>
                     <summary>Progressbar Colors</summary>
                     <p>
@@ -288,7 +291,6 @@
                 <button type="button" class="btn btn-outline-success" id="saveLayout"><i class="bi bi-save"></i> Save as
                     startup settings (Layout
                     only)</button>
-
             </page>
 
             <page id="debug" class="pageC hidden flex-fill overflow-auto">
@@ -305,15 +307,19 @@
 
                 <button type="button" class="btn btn-outline-success" id="applyDebug">Apply settings</button>
                 <br>
-                <div class="full">
+                <hr>
-                    <p>Full size thumbnail</p>
+                <br>
-                    <div class="clr-field" style="color: rgb(255, 204, 0);">
+                <h3>Host information</h3>
-                        <button aria-labelledby="clr-open-label"></button>
+                <code id="systemInfo" class="overflow-auto">
-                        <input type="text" class="coloris" value="#ffcc00">
+
-                    </div>
+                </code>
-                </div>
+                <h3>Raw server reponse</h3>
-                <br><br>
+                <code id="responeSnippet" style="width: 40%; display: inline-block;" class="overflow-auto">
-                <i class="bi-alarm"></i>
+
+                </code>
+                <br>
+                <hr>
+                <br>
                 <templateObj>
                     <table class="table table-bordered table-responsive-md table-striped text-center" id="colors1">
                         <thead>
@@ -325,42 +331,44 @@
                         </thead>
                         <tr id="tableCopySource">
                             <td contenteditable="false" class="time">
-                                        <input type="text" class="form-control " id="timeValue-ID" value="#VALUE#">
+                                <input type="text" class="form-control " id="timeValue-ID" value="#VALUE#">
-                                    <value></value>
+                                <value></value>
                             </td>
                             <td class="pt-3-half full" contenteditable="false">
                                 <div class="clr-field" style="color: #bg-COLOR#;">
-                                            <button aria-labelledby="clr-open-label"></button> 
+                                    <button aria-labelledby="clr-open-label"></button>
-                                            <input  type="text" class="coloris" value="#COLOR#"></div> 
+                                    <input type="text" class="coloris" value="#COLOR#">
-                                      </div> 
+                                </div>
-                                      </td>
+                                </div>
-                                      <td>
+                            </td>
-                                        <span class="table-remove"><button type="button"
+                            <td>
-                                                class="btn btn-danger btn-rounded btn-sm my-0 deleteRow1">
+                                <span class="table-remove"><button type="button"
-                                                Remove
+                                        class="btn btn-danger btn-rounded btn-sm my-0 deleteRow1">
-                                            </button></span>
+                                        Remove
-                                    </td>
+                                    </button></span>
+                            </td>
                         </tr>
                         </tbody>
                     </table>
 
 
 
-                
+                    <tr>
-                <tr><td class="pt-3-half numVal" contenteditable="true">#VALUE#</td>
+                        <td class="pt-3-half numVal" contenteditable="true">#VALUE#</td>
-                    <td class="pt-3-half full" contenteditable="false"> 
+                        <td class="pt-3-half full" contenteditable="false">
-                    <div class="clr-field" style="color: #bg-COLOR#;"> 
+                            <div class="clr-field" style="color: #bg-COLOR#;">
                                 <button aria-labelledby="clr-open-label"></button>
-                                <input id="demo-input1" type="text" class="coloris" value="#COLOR#"></div> 
+                                <input id="demo-input1" type="text" class="coloris" value="#COLOR#">
-                          </div> 
+                            </div>
-                          </td>
+                            </div>
-                    <td>
+                        </td>
-                        <span class="table-remove"><button type="button"
+                        <td>
-                                class="btn btn-danger btn-rounded btn-sm my-0 deleteRow1">
+                            <span class="table-remove"><button type="button"
-                                Remove
+                                    class="btn btn-danger btn-rounded btn-sm my-0 deleteRow1">
-                            </button></span>
+                                    Remove
-                    </td>
+                                </button></span>
-                </tr>
+                        </td>
+                    </tr>
                 </templateObj>
                 <script>
                     $('#duration2').durationPicker({
@@ -375,24 +383,12 @@
                 </script>
 
                 <br><br>
-                <h3>Raw server reponse</h3>
-                <code id="responeSnippet" style="width: 40%; display: inline-block;" class="overflow-auto">
-
-                </code>
-
-                <div class="demo">
-                    test
-                    <input id="demo-input" class="colorPicky" type="button" value="rgb(255, 128, 0)" />
-                </div>
-
             </page>
             <page id="about" class="pageC hidden flex-fill overflow-auto">
                 <h1>About</h1>
-                Version: 1.0.0<br>
+                Version: <b id="nodeSwVers"></b><br>
-                NodeJS Version: <i id="nodejsVers"></i><br>
+                NodeJS Version: <b id="nodejsVers"></b><br>
-                <code id="systemInfo" class="overflow-auto">
                 
-                </code>
             </page>
         </pages>
     </main>
@@ -404,9 +400,9 @@
             el: '.coloris',
             alpha: false,
         });
-            $(function () {
+        $(function () {
-                $('[data-toggle="tooltip"]').tooltip({container: "body"})
+            $('[data-toggle="tooltip"]').tooltip({ container: "body" })
-              })                        
+        })                        
     </script>
 
 </body>

templates/timerPage.html

@@ -46,8 +46,7 @@
             
         </div>
     </div>
-    <script src="js/reconnecting-websocket.min.js" async defer></script>
+    <script src="js/reconnecting-websocket.min.js"></script>
-    <script src="js/countdown.js"></script>
     <script src="js/script.js"></script>
 </body>