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>
@@ -0,0 +1,141 @@
+/* Why is the DLR shut today?
+   Two colour schemes selected via the [data-theme] attribute on <body>:
+   - modern:   current DLR turquoise/teal branding
+   - original: 1987 DLR red-and-blue livery */
+
+:root {
+  --font-stack: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+/* Modern DLR — turquoise/teal */
+[data-theme="modern"] {
+  --bg: #00afaa;
+  --bg-accent: #007e7a;
+  --surface: #ffffff;
+  --text: #ffffff;
+  --message: #ffffff;
+  --button-bg: #ffffff;
+  --button-text: #007e7a;
+  --button-active-bg: #00302e;
+  --button-active-text: #ffffff;
+}
+
+/* Original DLR — 1987 red and blue */
+[data-theme="original"] {
+  --bg: #002b5c;
+  --bg-accent: #c8102e;
+  --surface: #f5f0e1;
+  --text: #f5f0e1;
+  --message: #f5f0e1;
+  --button-bg: #c8102e;
+  --button-text: #f5f0e1;
+  --button-active-bg: #f5f0e1;
+  --button-active-text: #002b5c;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  font-family: var(--font-stack);
+  color: var(--text);
+  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-accent) 100%);
+  transition: background 0.4s ease, color 0.4s ease;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.controls {
+  display: flex;
+  justify-content: flex-end;
+  padding: 1.5rem;
+}
+
+.theme-toggle {
+  display: flex;
+  gap: 0.5rem;
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+.theme-button {
+  font-family: inherit;
+  font-size: 0.9rem;
+  font-weight: 600;
+  padding: 0.5rem 1rem;
+  border: 2px solid var(--button-bg);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--text);
+  cursor: pointer;
+  transition: background 0.2s ease, color 0.2s ease;
+}
+
+.theme-button[aria-pressed="true"] {
+  background: var(--button-active-bg);
+  color: var(--button-active-text);
+  border-color: var(--button-active-bg);
+}
+
+.stage {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 2rem;
+  gap: 2rem;
+}
+
+.title {
+  font-size: clamp(1.5rem, 4vw, 2.5rem);
+  font-weight: 700;
+  margin: 0;
+  letter-spacing: 0.02em;
+}
+
+.message {
+  font-size: clamp(1.75rem, 6vw, 4rem);
+  font-weight: 800;
+  line-height: 1.2;
+  margin: 0;
+  max-width: 22ch;
+  color: var(--message);
+}
+
+.refresh-button {
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 600;
+  padding: 0.75rem 1.75rem;
+  border: 2px solid var(--button-bg);
+  border-radius: 999px;
+  background: var(--button-bg);
+  color: var(--button-text);
+  cursor: pointer;
+  transition: transform 0.1s ease, opacity 0.2s ease;
+}
+
+.refresh-button:hover {
+  opacity: 0.9;
+}
+
+.refresh-button:active {
+  transform: scale(0.97);
+}