From 1b88b8df9dd946cf8e806c494640f58cd370f8c4 Mon Sep 17 00:00:00 2001
From: Alexa Amundson <118287761+blackboxprogramming@users.noreply.github.com>
Date: Tue, 2 Dec 2025 21:07:16 -0600
Subject: [PATCH] Add dashboard page for site components

---
 README.md      |  1 +
 dashboard.html | 80 ++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html     |  6 ++++
 status.html    |  5 ++++
 style.css      | 48 ++++++++++++++++++++++++++++++
 5 files changed, 140 insertions(+)
 create mode 100644 dashboard.html
diff --git a/README.md b/README.md
index 0e25423..aefd723 100644
--- a/README.md
+++ b/README.md
@@ -9,6 +9,7 @@ This directory contains the static site served at **blackroad.io** via GitHub Pa
 - `login.html` – Development login form accepting any non-empty credentials.
 - `chat.html` – Placeholder for the Lucidia public-facing AI chat and terminal.
 - `composer.html` – Placeholder for the Composer Playground.
+- `dashboard.html` – Manual overview of site components and links.
 - `status.html` – Manual system status page.
 - `style.css` – Shared styling for all pages.
 - `script.js` – Client-side login handler.
diff --git a/dashboard.html b/dashboard.html
new file mode 100644
index 0000000..8cd1b68
--- /dev/null
+++ b/dashboard.html
@@ -0,0 +1,80 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dashboard · BlackRoad</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <header>
+      <h1>Operations Dashboard</h1>
+      <nav>
+        <a href="index.html">Home</a>
+        <a href="status.html">Status</a>
+        <a href="login.html">Login</a>
+      </nav>
+    </header>
+    <main>
+      <section class="intro">
+        <p>
+          Quick view of BlackRoad properties and whether they are reachable. Update this
+          page manually until automated checks are wired in.
+        </p>
+      </section>
+      <section class="grid">
+        <article class="status-card">
+          <header>
+            <h2>Lucidia</h2>
+            <span class="badge badge-ok">Online</span>
+          </header>
+          <p>Public AI chat and terminal experience.</p>
+          <a href="https://blackroad.io/lucidia/">Open Lucidia</a>
+        </article>
+        <article class="status-card">
+          <header>
+            <h2>Guardian</h2>
+            <span class="badge badge-ok">Online</span>
+          </header>
+          <p>Security gateway and shielding layer.</p>
+          <a href="https://blackroad.io/guardian/">Open Guardian</a>
+        </article>
+        <article class="status-card">
+          <header>
+            <h2>Codex</h2>
+            <span class="badge badge-ok">Online</span>
+          </header>
+          <p>Documentation, memory, and reference stack.</p>
+          <a href="https://blackroad.io/codex/">Open Codex</a>
+        </article>
+        <article class="status-card">
+          <header>
+            <h2>Login</h2>
+            <span class="badge badge-ok">Online</span>
+          </header>
+          <p>Development login surface for authenticated flows.</p>
+          <a href="https://blackroad.io/login/">Open Login</a>
+        </article>
+        <article class="status-card">
+          <header>
+            <h2>Main Site</h2>
+            <span class="badge badge-ok">Online</span>
+          </header>
+          <p>BlackRoad.io landing and navigation.</p>
+          <a href="https://blackroad.io/">Open Main Site</a>
+        </article>
+        <article class="status-card">
+          <header>
+            <h2>Dashboard</h2>
+            <span class="badge badge-down">Manual</span>
+          </header>
+          <p>Currently updated by hand. Automation coming soon.</p>
+          <a href="https://blackroad.io/dashboard.html">Refresh Dashboard</a>
+        </article>
+      </section>
+    </main>
+    <footer>
+      <p>&copy; 2024 BlackRoad Inc.</p>
+    </footer>
+  </body>
+</html>
diff --git a/index.html b/index.html
index 52987e3..e6ee885 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,7 @@
       <nav>
         <a href="login.html">Login</a>
         <a href="status.html">Status</a>
+        <a href="dashboard.html">Dashboard</a>
       </nav>
     </header>
     <main>
@@ -28,6 +29,11 @@
           <p>Create and experiment with musical ideas in the browser.</p>
           <a href="composer.html">Launch Composer</a>
         </section>
+        <section class="card">
+          <h2>Operations Dashboard</h2>
+          <p>Check the status of BlackRoad properties at a glance.</p>
+          <a href="dashboard.html">View Dashboard</a>
+        </section>
       </div>
     </main>
     <footer>
diff --git a/status.html b/status.html
index cb81496..332f887 100644
--- a/status.html
+++ b/status.html
@@ -9,6 +9,11 @@
   <body>
     <header>
       <h1>System Status</h1>
+      <nav>
+        <a href="index.html">Home</a>
+        <a href="dashboard.html">Dashboard</a>
+        <a href="login.html">Login</a>
+      </nav>
     </header>
     <main>
       <ul class="status-list">
diff --git a/style.css b/style.css
index 26547c9..f8bc1dd 100644
--- a/style.css
+++ b/style.css
@@ -125,6 +125,54 @@ form button:hover {
   color: var(--down-color);
 }
 
+.intro {
+  margin: 1rem 0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 1rem;
+  margin: 1rem 0;
+}
+
+.status-card {
+  background: #ffffff;
+  padding: 1rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.status-card header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.badge {
+  padding: 0.35rem 0.65rem;
+  border-radius: 999px;
+  font-size: 0.85rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.badge-ok {
+  background: rgba(46, 204, 113, 0.1);
+  color: var(--ok-color);
+  border: 1px solid var(--ok-color);
+}
+
+.badge-down {
+  background: rgba(231, 76, 60, 0.1);
+  color: var(--down-color);
+  border: 1px solid var(--down-color);
+}
+
 footer {
   text-align: center;
 }
