From cb6fc278a3b181ccf0e3d77f20de105799ce5a8e Mon Sep 17 00:00:00 2001
From: James Arcus <jimbo@ucc.asn.au>
Date: Mon, 30 Sep 2024 20:29:31 +0800
Subject: [PATCH] Add 'darkmode' >:)
---
main.js | 8 ++++++++
pages/ucc_door_closed.html | 3 +++
pages/ucc_door_open.html | 3 +++
pages/ucc_door_unavail.html | 3 +++
pages/unisfa_door_closed.html | 3 +++
pages/unisfa_door_open.html | 3 +++
pages/unisfa_door_unavail.html | 3 +++
static/darkmode.js | 17 +++++++++++++++++
static/style.css | 3 +++
9 files changed, 46 insertions(+)
create mode 100644 static/darkmode.js
create mode 100644 static/style.css
diff --git a/main.js b/main.js
index 9d1f29c..82aea64 100644
--- a/main.js
+++ b/main.js
@@ -186,6 +186,14 @@ const server = http.createServer((req, res) => {
return send_file(res, 200, './static/door_unisfa_closed.jpg', 'image/jpeg');
}
+ if (req.url === '/static/style.css') {
+ return send_file(res, 200, './static/style.css', 'text/css');
+ }
+
+ if (req.url === '/static/darkmode.js') {
+ return send_file(res, 200, './static/darkmode.js', 'text/javascript');
+ }
+
return send_error(res, 404);
});
diff --git a/pages/ucc_door_closed.html b/pages/ucc_door_closed.html
index 1ad1f17..f97bb8c 100644
--- a/pages/ucc_door_closed.html
+++ b/pages/ucc_door_closed.html
@@ -3,8 +3,10 @@
<head>
<meta charset="utf-8">
<title>UCC Door Status</title>
+ <link rel="stylesheet" href="/static/style.css">
</head>
<body>
+ <p><a href="#light">lightmode</a> <a href="#dark">darkmode</a></p>
<h1>UCC Door Status</h1>
<p>The door is currently closed.</p>
<img
@@ -14,6 +16,7 @@
alt="A plain image of the UCC door. Surely nothing sinister lies within..."
title="A plain image of the UCC door. Surely nothing sinister lies within..."
>
+ <script src="/static/darkmode.js"></script>
</body>
</html>
diff --git a/pages/ucc_door_open.html b/pages/ucc_door_open.html
index 761b502..b8dc468 100644
--- a/pages/ucc_door_open.html
+++ b/pages/ucc_door_open.html
@@ -3,8 +3,10 @@
<head>
<meta charset="utf-8">
<title>UCC Door Status</title>
+ <link rel="stylesheet" href="/static/style.css">
</head>
<body>
+ <p><a href="#light">lightmode</a> <a href="#dark">darkmode</a></p>
<h1>UCC Door Status</h1>
<p>The door is currently open!</p>
<p>Opened by: <span id="opener"></span></p>
@@ -24,6 +26,7 @@
});
});
</script>
+ <script src="/static/darkmode.js"></script>
</body>
</html>
diff --git a/pages/ucc_door_unavail.html b/pages/ucc_door_unavail.html
index 5ea836b..8ea943d 100644
--- a/pages/ucc_door_unavail.html
+++ b/pages/ucc_door_unavail.html
@@ -3,10 +3,13 @@
<head>
<meta charset="utf-8">
<title>UCC Door Status</title>
+ <link rel="stylesheet" href="/static/style.css">
</head>
<body>
+ <p><a href="#light">lightmode</a> <a href="#dark">darkmode</a></p>
<h1>UCC Door Status</h1>
<p>The door sensor is currently unavailable. Sorry :-(</p>
+ <script src="/static/darkmode.js"></script>
</body>
</html>
diff --git a/pages/unisfa_door_closed.html b/pages/unisfa_door_closed.html
index 02c27a0..28b29de 100644
--- a/pages/unisfa_door_closed.html
+++ b/pages/unisfa_door_closed.html
@@ -3,8 +3,10 @@
<head>
<meta charset="utf-8">
<title>Unisfa Door Status</title>
+ <link rel="stylesheet" href="/static/style.css">
</head>
<body>
+ <p><a href="#light">lightmode</a> <a href="#dark">darkmode</a></p>
<h1>Unisfa Door Status</h1>
<p>The door is currently closed.</p>
<img
@@ -14,6 +16,7 @@
alt="A plain image of the Unisfa door. There are some posters stuck upon it."
title="A plain image of the Unisfa door. There are some posters stuck upon it."
>
+ <script src="/static/darkmode.js"></script>
</body>
</html>
diff --git a/pages/unisfa_door_open.html b/pages/unisfa_door_open.html
index e4e4024..0bb2161 100644
--- a/pages/unisfa_door_open.html
+++ b/pages/unisfa_door_open.html
@@ -3,8 +3,10 @@
<head>
<meta charset="utf-8">
<title>Unisfa Door Status</title>
+ <link rel="stylesheet" href="/static/style.css">
</head>
<body>
+ <p><a href="#light">lightmode</a> <a href="#dark">darkmode</a></p>
<h1>Unisfa Door Status</h1>
<p>The door is currently open!</p>
<img
@@ -14,6 +16,7 @@
alt="The door is open, however the Guardian of the Books blocks your path. Tread carefully..."
title="The door is open, however the Guardian of the Books blocks your path. Tread carefully..."
>
+ <script src="/static/darkmode.js"></script>
</body>
</html>
diff --git a/pages/unisfa_door_unavail.html b/pages/unisfa_door_unavail.html
index 1b8293c..a445da5 100644
--- a/pages/unisfa_door_unavail.html
+++ b/pages/unisfa_door_unavail.html
@@ -3,10 +3,13 @@
<head>
<meta charset="utf-8">
<title>Unisfa Door Status</title>
+ <link rel="stylesheet" href="/static/style.css">
</head>
<body>
+ <p><a href="#light">lightmode</a> <a href="#dark">darkmode</a></p>
<h1>Unisfa Door Status</h1>
<p>The door sensor is currently unavailable. Sorry :-(</p>
+ <script src="/static/darkmode.js"></script>
</body>
</html>
diff --git a/static/darkmode.js b/static/darkmode.js
new file mode 100644
index 0000000..619726d
--- /dev/null
+++ b/static/darkmode.js
@@ -0,0 +1,17 @@
+const darkmode = () => {
+ const DARK_FRAG = "#dark";
+ const DARK_CLASS = "dark";
+ const rootClasses = document.documentElement.classList;
+ const hash = window.location.hash;
+
+ if (hash === DARK_FRAG) {
+ rootClasses.add(DARK_CLASS);
+ }
+ else {
+ rootClasses.remove(DARK_CLASS);
+ }
+};
+
+window.onhashchange = darkmode;
+
+darkmode();
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..2482bcf
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,3 @@
+.dark {
+ filter: invert(100%);
+}
--
GitLab