Emma Thorpe
59b8d969df
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>
32 lines
1013 B
HTML
32 lines
1013 B
HTML
<!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>
|