feat: add page structure and DLR colour schemes

Single-page layout with a centred message, a colour-scheme toggle, and a "Check again" button. styles.css defines two palettes selected via the data-theme attribute: modern DLR turquoise/teal and the original 1987 red-and-blue livery. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-11 15:59:39 +01:00
parent fec0327005
commit 59b8d969df
2 changed files with 172 additions and 0 deletions
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Why is the DLR shut today?</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body data-theme="modern">
+  <header class="controls">
+    <fieldset class="theme-toggle">
+      <legend class="sr-only">Colour scheme</legend>
+      <button type="button" class="theme-button" data-set-theme="modern" aria-pressed="true">
+        Modern colours
+      </button>
+      <button type="button" class="theme-button" data-set-theme="original" aria-pressed="false">
+        Original colours
+      </button>
+    </fieldset>
+  </header>
+
+  <main class="stage">
+    <h1 class="title">Why is the DLR shut today?</h1>
+    <p class="message" id="message" role="status" aria-live="polite"></p>
+    <button type="button" class="refresh-button" id="refresh">Check again</button>
+  </main>
+
+  <script src="messages.js"></script>
+  <script src="script.js"></script>
+</body>
+</html>