From 3b5c304002506ac31aee0574595e33ddcc4fe77d Mon Sep 17 00:00:00 2001
From: Emma Thorpe <emma.thorpe@citrix.com>
Date: Thu, 11 Jun 2026 15:59:39 +0100
Subject: [PATCH] feat: add random message selection and theme toggle

script.js picks a random entry from MESSAGES on load and on each "Check
again" click, and persists the chosen colour scheme in localStorage.
messages.js holds the MESSAGES array as a placeholder template to be
filled in with content.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 messages.js | 18 ++++++++++++++++
 script.js   | 59 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 77 insertions(+)
 create mode 100644 messages.js
 create mode 100644 script.js

diff --git a/messages.js b/messages.js
new file mode 100644
index 0000000..d3dcf15
--- /dev/null
+++ b/messages.js
@@ -0,0 +1,18 @@
+/* Messages for "Why is the DLR shut today?"
+ *
+ * Fill this array with your own reasons. One string per entry.
+ * On every page load (and every "Check again" click) one entry is
+ * picked at random and shown in the centre of the screen.
+ *
+ * Keep them short — roughly a sentence — so they fit the large display
+ * text. HTML is NOT rendered; entries are inserted as plain text.
+ *
+ * Replace the placeholders below with your own content.
+ */
+
+const MESSAGES = [
+  "PLACEHOLDER: write your first reason here",
+  "PLACEHOLDER: write another reason here",
+  // Add as many entries as you like, one per line:
+  // "Your reason here",
+];
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..55e67fe
--- /dev/null
+++ b/script.js
@@ -0,0 +1,59 @@
+/* Why is the DLR shut today?
+ * Picks a random message on load and on demand, and handles the
+ * colour-scheme toggle. Messages live in messages.js (MESSAGES). */
+
+(function () {
+  "use strict";
+
+  const FALLBACK = "Add some reasons in messages.js";
+  const messageEl = document.getElementById("message");
+  const refreshButton = document.getElementById("refresh");
+  const themeButtons = document.querySelectorAll("[data-set-theme]");
+  const THEME_KEY = "dlr-theme";
+
+  function pickMessage() {
+    if (!Array.isArray(MESSAGES) || MESSAGES.length === 0) {
+      return FALLBACK;
+    }
+    const index = Math.floor(Math.random() * MESSAGES.length);
+    return MESSAGES[index];
+  }
+
+  function showMessage() {
+    messageEl.textContent = pickMessage();
+  }
+
+  function applyTheme(theme) {
+    document.body.setAttribute("data-theme", theme);
+    themeButtons.forEach(function (button) {
+      const isActive = button.dataset.setTheme === theme;
+      button.setAttribute("aria-pressed", String(isActive));
+    });
+    try {
+      localStorage.setItem(THEME_KEY, theme);
+    } catch (err) {
+      /* localStorage unavailable; theme simply won't persist. */
+    }
+  }
+
+  function initTheme() {
+    let saved = null;
+    try {
+      saved = localStorage.getItem(THEME_KEY);
+    } catch (err) {
+      /* ignore */
+    }
+    applyTheme(saved === "original" ? "original" : "modern");
+  }
+
+  themeButtons.forEach(function (button) {
+    button.addEventListener("click", function () {
+      applyTheme(button.dataset.setTheme);
+    });
+  });
+
+  refreshButton.addEventListener("click", showMessage);
+
+  initTheme();
+  showMessage();
+})();