Technigo · casalm26 · Mar 26, 2025 · Mar 27, 2025 · Mar 27, 2025 · Mar 27, 2025
diff --git a/.gitignore b/.gitignore
@@ -1 +1,3 @@
-node_modules
+node_modules
+ToDo.txt
+requirements.txt
diff --git a/about.html b/about.html
@@ -1,10 +1,39 @@
+<!-- about.html -->
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>About</title>
-    <link rel="stylesheet" href="css/styles.css" />
-  </head>
-  <body></body>
-</html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About - Web Accessibility Quiz</title>
+    <link rel="stylesheet" href="css/styles.css">
+</head>
+<body>
+    <a href="#main" class="skip-link">Skip to main content</a>
+    <header>
+        <h1>About This Quiz</h1>
+        <nav>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="about.html">About</a></li>
+            </ul>
+        </nav>
+    </header>
+    <main id="main">
+        <h2>Meet the Developer</h2>
+        <p>Hi! I'm Caspian, the sole developer behind this Lord of the Rings themed accessibility quiz. I created this project to help make learning about web accessibility fun and engaging.</p>
+
+        <h2>My Commitment to Accessibility</h2>
+        <p>As the developer, I've tried to make this quiz as accessible as possible, committing to the following principles:</p>
+        <ul>
+            <li>Full keyboard navigation support for all interactive elements</li>
+            <li>Screen reader compatibility with ARIA labels and live regions</li>
+            <li>WCAG AA compliant color contrast ratios</li>
+            <li>Clear error messaging and feedback</li>
+            <li>Semantic HTML structure</li>
+        </ul>
+    </main>
+    <footer role="contentinfo">
+        <p>All rights reserved to Sauron, just trying to piss Middle Earth off.</p>
+    </footer>
+</body>
+</html>
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,254 @@
+:root {
+  --color-primary: #2c5282;
+  --color-primary-light: #4299e1;
+  --color-background: #ffffff;
+  --color-text: #1a202c;
+  --color-border: #cbd5e0;
+  --color-error: #c53030;
+  --color-success: #2f855a;
+}
+
+/* Base styles */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  line-height: 1.5;
+  color: var(--color-text);
+  background-color: var(--color-background);
+  margin: 0;
+  padding: 0;
+  font-size: 16px;
+}
+
+/* Header styles */
+header {
+  background-color: var(--color-primary);
+  color: var(--color-background);
+  padding: 1rem;
+}
+
+.header-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+nav ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 2rem;
+}
+
+nav a {
+  color: var(--color-background);
+  text-decoration: none;
+  padding: 0.5rem;
+}
+
+nav a:hover, nav a:focus {
+  text-decoration: underline;
+  background-color: var(--color-primary-light);
+  border-radius: 4px;
+}
+
+/* Main content */
+main {
+  max-width: 1200px;
+  margin: 2rem auto;
+  padding: 0 1rem;
+}
+
+/* Form styles */
+fieldset {
+  border: 2px solid var(--color-border);
+  border-radius: 8px;
+  margin: 1rem 0;
+  padding: 1.5rem;
+}
+
+legend {
+  font-weight: bold;
+  padding: 0 0.5rem;
+}
+
+legend::after {
+  content: " *";
+  color: var(--color-error);
+}
+
+/* Radio button groups */
+div[role="radiogroup"] {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+div[role="radiogroup"] > div {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+input[type="radio"] {
+  margin: 0;
+  cursor: pointer;
+}
+
+div[role="radiogroup"] label {
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 4px;
+}
+
+div[role="radiogroup"] div:hover label,
+div[role="radiogroup"] div:focus-within label {
+  background-color: var(--color-border);
+}
+
+input[type="radio"]:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* Submit button */
+button[type="submit"] {
+  background-color: var(--color-primary);
+  color: var(--color-background);
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 4px;
+  font-size: 1rem;
+  cursor: pointer;
+  margin-top: 1.5rem;
+}
+
+button[type="submit"]:hover,
+button[type="submit"]:focus {
+  background-color: var(--color-primary-light);
+}
+
+/* Images */
+.image-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+}
+
+img {
+  max-width: 45%;
+  height: auto;
+  margin: 1rem 0;
+  border-radius: 8px;
+}
+
+/* Footer */
+footer {
+  background-color: var(--color-primary);
+  color: var(--color-background);
+  padding: 1rem;
+  text-align: center;
+  margin-top: 2rem;
+}
+
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background-color: #fff;
+  color: #000;
+  padding: 8px;
+  z-index: 100;
+  transition: top 0.3s ease-in-out;
+}
+
+.skip-link:focus {
+  top: 0;
+  outline: 1px solid #000;
+  outline-offset: 2px;
+}
+
+p {
+  font-size: 16px;
+  line-height: 1.5;
+  margin-bottom: 16px;
+}
+
+h2 {
+  font-size: 24px;
+  line-height: 1.5;
+  margin-bottom: 16px;
+}
+
+h1 {
+  font-size: 32px;
+  line-height: 1.5;
+  margin-bottom: 16px;
+}
+
+#mountains {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+#manga-mountains {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Error message styles */
+.error-message {
+  display: none;
+  margin-top: 0.5rem;
+  padding: 0.5rem;
+  border-radius: 4px;
+  font-weight: bold;
+}
+
+.error-message.correct {
+  color: var(--color-success);
+  background-color: rgba(47, 133, 90, 0.1);
+}
+
+.error-message.incorrect {
+  color: var(--color-error);
+  background-color: rgba(197, 48, 48, 0.1);
+}
+
+/* Focus styles */
+:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* Radio button focus styles */
+input[type="radio"]:focus-visible + label {
+  background-color: var(--color-border);
+  border-radius: 4px;
+}
+
+/* Skip link focus styles */
+.skip-link:focus {
+  top: 0;
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+  z-index: 1000;
+}
+
+/* Ensure all interactive elements are focusable */
+a:focus,
+button:focus,
+input:focus {
+  outline: none;
+}
+
+a:focus-visible,
+button:focus-visible,
+input:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
diff --git a/images/manga-mountains.jpg b/images/manga-mountains.jpg
diff --git a/images/mountains.jpg b/images/mountains.jpg