v3.1.1

2026-06-24 09:19:08 -04:00
commit 5f7c62f8a7
151 changed files with 18705 additions and 0 deletions
@@ -0,0 +1,34 @@
+<?php
+/**
+ * status/config.php
+ * ─────────────────────────────────────────────────────────────────────────────
+ * Configuration for the /status/ update log pages.
+ * Edit this file only — index.php and post.php read from here.
+ */
+
+// ── Data source ───────────────────────────────────────────────────────────────
+// Absolute path to updates.json.
+// Default points one level up from /status/ to the shared index_config folder.
+define('STATUS_JSON_PATH',  dirname(__DIR__) . '/index_config/updates.json');
+
+// ── Site identity ─────────────────────────────────────────────────────────────
+define('STATUS_SITE_NAME',  'Ty Clifford');
+define('STATUS_SITE_URL',   'https://tyclifford.com');
+define('STATUS_BASE_URL',   STATUS_SITE_URL . '/status');  // no trailing slash
+
+// ── Page copy ─────────────────────────────────────────────────────────────────
+define('STATUS_PAGE_TITLE',    'Status & Updates');
+define('STATUS_PAGE_SUBTITLE', 'Latest news, stream notices, and site changes.');
+
+// ── Pagination ────────────────────────────────────────────────────────────────
+// Posts shown per page on the list view. Recommended: 10–15.
+define('STATUS_PER_PAGE', 10);
+
+// ── Navigation ────────────────────────────────────────────────────────────────
+// Link shown in the top-left breadcrumb / back arrow.
+define('STATUS_HOME_URL',   STATUS_SITE_URL . '/');
+define('STATUS_HOME_LABEL', '← ' . STATUS_SITE_NAME);
+
+// ── Favicon ───────────────────────────────────────────────────────────────────
+define('STATUS_FAVICON_ICO', STATUS_SITE_URL . '/images/ico/fa-bl.ico');
+define('STATUS_FAVICON_JPG', STATUS_SITE_URL . '/images/ico/fa-bl.jpg');
@@ -0,0 +1,232 @@
+<?php
+/**
+ * status/index.php — Updates log: paginated list view
+ *
+ * URLs:
+ *   /status/           → page 1
+ *   /status/?page=2    → page 2
+ *   /status/?id=<uid>  → redirects to /status/post.php?id=<uid>
+ */
+require_once __DIR__ . '/config.php';
+
+// ── Redirect bare ?id= to the single-post page ───────────────────────────────
+if (isset($_GET['id']) && trim($_GET['id']) !== '') {
+    $safe_id = rawurlencode(trim($_GET['id']));
+    header('Location: ' . STATUS_BASE_URL . '/post.php?id=' . $safe_id, true, 301);
+    exit;
+}
+
+// ── Load data ─────────────────────────────────────────────────────────────────
+function status_load_posts(): array {
+    if (!file_exists(STATUS_JSON_PATH)) return [];
+    $raw = json_decode(file_get_contents(STATUS_JSON_PATH), true);
+    return is_array($raw) ? $raw : [];
+}
+
+function status_relative_time(string $iso): string {
+    try {
+        $dt   = new DateTime($iso, new DateTimeZone('UTC'));
+        $now  = new DateTime('now', new DateTimeZone('UTC'));
+        $diff = $now->getTimestamp() - $dt->getTimestamp();
+        if ($diff < 60)     return 'just now';
+        if ($diff < 3600)   return floor($diff / 60) . 'm ago';
+        if ($diff < 86400)  return floor($diff / 3600) . 'h ago';
+        if ($diff < 604800) return floor($diff / 86400) . 'd ago';
+        if ($diff < 2592000) return floor($diff / 604800) . 'w ago';
+        return $dt->format('M j, Y');
+    } catch (Exception $e) { return ''; }
+}
+
+function status_abs_date(string $iso): string {
+    try {
+        $dt = new DateTime($iso, new DateTimeZone('UTC'));
+        return $dt->format('F j, Y · g:i A') . ' UTC';
+    } catch (Exception $e) { return $iso; }
+}
+
+function status_iso(string $iso): string {
+    try {
+        $dt = new DateTime($iso, new DateTimeZone('UTC'));
+        return $dt->format(DateTime::ATOM);
+    } catch (Exception $e) { return $iso; }
+}
+
+$all_posts   = status_load_posts();
+$total       = count($all_posts);
+$per_page    = max(1, (int) STATUS_PER_PAGE);
+$total_pages = max(1, (int) ceil($total / $per_page));
+$page        = max(1, min($total_pages, (int) ($_GET['page'] ?? 1)));
+$offset      = ($page - 1) * $per_page;
+$posts       = array_slice($all_posts, $offset, $per_page);
+
+$page_title  = STATUS_PAGE_TITLE . ($page > 1 ? ' — Page ' . $page : '');
+$canonical   = STATUS_BASE_URL . '/' . ($page > 1 ? '?page=' . $page : '');
+?>
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title><?= htmlspecialchars($page_title) ?> — <?= htmlspecialchars(STATUS_SITE_NAME) ?></title>
+  <meta name="description" content="<?= htmlspecialchars(STATUS_PAGE_SUBTITLE) ?>">
+  <link rel="canonical" href="<?= htmlspecialchars($canonical) ?>">
+
+  <meta property="og:title"     content="<?= htmlspecialchars(STATUS_PAGE_TITLE) ?>">
+  <meta property="og:type"      content="website">
+  <meta property="og:url"       content="<?= htmlspecialchars($canonical) ?>">
+  <meta property="og:site_name" content="<?= htmlspecialchars(STATUS_SITE_NAME) ?>">
+  <meta property="og:description" content="<?= htmlspecialchars(STATUS_PAGE_SUBTITLE) ?>">
+
+  <link rel="shortcut icon"    href="<?= STATUS_FAVICON_ICO ?>">
+  <link rel="apple-touch-icon" href="<?= STATUS_FAVICON_JPG ?>">
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
+
+  <?php require __DIR__ . '/shared_styles.php'; ?>
+</head>
+<body>
+
+<div class="page" role="main">
+
+  <!-- ── Top bar ─────────────────────────────────────────────────────────── -->
+  <header class="topbar">
+    <a class="back-link" href="<?= htmlspecialchars(STATUS_HOME_URL) ?>">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
+           stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <line x1="19" y1="12" x2="5" y2="12"/>
+        <polyline points="12 19 5 12 12 5"/>
+      </svg>
+      <?= htmlspecialchars(STATUS_HOME_LABEL) ?>
+    </a>
+    <span class="topbar-badge">
+      <?= $total ?> update<?= $total !== 1 ? 's' : '' ?>
+    </span>
+  </header>
+
+  <!-- ── Page heading ────────────────────────────────────────────────────── -->
+  <div class="page-heading">
+    <p class="eyebrow">Status &amp; Updates</p>
+    <h1><?= htmlspecialchars(STATUS_PAGE_TITLE) ?></h1>
+    <p class="page-subtitle"><?= htmlspecialchars(STATUS_PAGE_SUBTITLE) ?></p>
+  </div>
+
+  <!-- ── Post list ───────────────────────────────────────────────────────── -->
+  <div class="card">
+    <?php if (empty($posts)): ?>
+    <p class="empty-state">No updates yet.</p>
+    <?php else: ?>
+
+    <?php foreach ($posts as $i => $post):
+      $post_id   = htmlspecialchars($post['id']   ?? '');
+      $post_text = htmlspecialchars($post['text']  ?? '');
+      $post_date = $post['date'] ?? '';
+      $post_link = $post['link'] ?? '';
+      $post_link_label = htmlspecialchars($post['link_label'] ?? $post_link);
+      $post_tags = (array)($post['tags'] ?? []);
+      $post_url  = htmlspecialchars(STATUS_BASE_URL . '/post.php?id=' . rawurlencode($post['id'] ?? ''));
+      $is_last   = ($i === count($posts) - 1);
+    ?>
+    <article class="post-item<?= $is_last ? ' post-item-last' : '' ?>"
+             id="post-<?= $post_id ?>">
+
+      <div class="post-meta">
+        <a class="post-uid" href="<?= $post_url ?>"
+           title="Permalink to this update">#<?= $post_id ?></a>
+        <?php if ($post_date): ?>
+        <time class="post-time" datetime="<?= htmlspecialchars(status_iso($post_date)) ?>"
+              title="<?= htmlspecialchars(status_abs_date($post_date)) ?>">
+          <?= htmlspecialchars(status_relative_time($post_date)) ?>
+        </time>
+        <span class="post-abs-date"><?= htmlspecialchars(status_abs_date($post_date)) ?></span>
+        <?php endif; ?>
+        <?php foreach ($post_tags as $tag): ?>
+        <a class="post-tag"
+           href="<?= htmlspecialchars(STATUS_BASE_URL . '/?tag=' . rawurlencode($tag)) ?>"
+           title="Filter by <?= htmlspecialchars($tag) ?>"><?= htmlspecialchars($tag) ?></a>
+        <?php endforeach; ?>
+      </div>
+
+      <p class="post-text"><?= $post_text ?></p>
+
+      <?php if ($post_link): ?>
+      <a class="post-link"
+         href="<?= htmlspecialchars($post_link) ?>"
+         <?= str_starts_with($post_link, 'http') ? 'target="_blank" rel="noopener noreferrer"' : '' ?>>
+        <?= $post_link_label ?>
+      </a>
+      <?php endif; ?>
+
+      <div class="post-footer">
+        <a class="post-permalink" href="<?= $post_url ?>">
+          <svg width="11" height="11" viewBox="0 0 24 24" fill="none"
+               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
+            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
+          </svg>
+          Permalink
+        </a>
+      </div>
+
+    </article>
+    <?php endforeach; ?>
+    <?php endif; ?>
+  </div><!-- /card -->
+
+  <!-- ── Pagination ──────────────────────────────────────────────────────── -->
+  <?php if ($total_pages > 1): ?>
+  <nav class="pagination" aria-label="Page navigation">
+    <div class="pagination-info">
+      <?php
+        $from = $offset + 1;
+        $to   = min($offset + $per_page, $total);
+        echo "Showing $from–$to of $total";
+      ?>
+    </div>
+    <div class="pagination-btns">
+
+      <!-- Prev -->
+      <?php if ($page > 1): ?>
+      <a class="page-btn" href="?page=<?= $page - 1 ?>" rel="prev" aria-label="Previous page">‹</a>
+      <?php else: ?>
+      <span class="page-btn" aria-disabled="true">‹</span>
+      <?php endif; ?>
+
+      <!-- Page numbers with sliding window -->
+      <?php
+        $lo = max(1, $page - 2);
+        $hi = min($total_pages, $page + 2);
+        if ($lo > 1): ?><a class="page-btn" href="?page=1">1</a><?php
+          if ($lo > 2): ?><span class="page-btn page-ellipsis" aria-hidden="true">…</span><?php endif;
+        endif;
+        for ($p = $lo; $p <= $hi; $p++):
+          if ($p === $page): ?><span class="page-btn active" aria-current="page"><?= $p ?></span><?php
+          else: ?><a class="page-btn" href="?page=<?= $p ?>"><?= $p ?></a><?php
+          endif;
+        endfor;
+        if ($hi < $total_pages):
+          if ($hi < $total_pages - 1): ?><span class="page-btn page-ellipsis" aria-hidden="true">…</span><?php endif;
+          ?><a class="page-btn" href="?page=<?= $total_pages ?>"><?= $total_pages ?></a><?php
+        endif;
+      ?>
+
+      <!-- Next -->
+      <?php if ($page < $total_pages): ?>
+      <a class="page-btn" href="?page=<?= $page + 1 ?>" rel="next" aria-label="Next page">›</a>
+      <?php else: ?>
+      <span class="page-btn" aria-disabled="true">›</span>
+      <?php endif; ?>
+
+    </div>
+  </nav>
+  <?php endif; ?>
+
+  <footer class="page-foot">
+    <span class="foot-note"><?= htmlspecialchars(STATUS_SITE_NAME) ?> · status log</span>
+    <a class="foot-link" href="<?= htmlspecialchars(STATUS_HOME_URL) ?>">← Back to home</a>
+  </footer>
+
+</div><!-- /page -->
+</body>
+</html>
@@ -0,0 +1,266 @@
+<?php
+/**
+ * status/post.php — Single update view
+ *
+ * URL:  /status/post.php?id=<uid>
+ * Returns 404 with styled error card if the ID is not found.
+ */
+require_once __DIR__ . '/config.php';
+
+// ── Load helpers (reuse from index) ──────────────────────────────────────────
+function status_load_posts(): array {
+    if (!file_exists(STATUS_JSON_PATH)) return [];
+    $raw = json_decode(file_get_contents(STATUS_JSON_PATH), true);
+    return is_array($raw) ? $raw : [];
+}
+
+function status_relative_time(string $iso): string {
+    try {
+        $dt   = new DateTime($iso, new DateTimeZone('UTC'));
+        $now  = new DateTime('now', new DateTimeZone('UTC'));
+        $diff = $now->getTimestamp() - $dt->getTimestamp();
+        if ($diff < 60)     return 'just now';
+        if ($diff < 3600)   return floor($diff / 60) . 'm ago';
+        if ($diff < 86400)  return floor($diff / 3600) . 'h ago';
+        if ($diff < 604800) return floor($diff / 86400) . 'd ago';
+        if ($diff < 2592000) return floor($diff / 604800) . 'w ago';
+        return $dt->format('M j, Y');
+    } catch (Exception $e) { return ''; }
+}
+
+function status_abs_date(string $iso): string {
+    try {
+        $dt = new DateTime($iso, new DateTimeZone('UTC'));
+        return $dt->format('F j, Y · g:i A') . ' UTC';
+    } catch (Exception $e) { return $iso; }
+}
+
+function status_iso(string $iso): string {
+    try {
+        $dt = new DateTime($iso, new DateTimeZone('UTC'));
+        return $dt->format(DateTime::ATOM);
+    } catch (Exception $e) { return $iso; }
+}
+
+// ── Find post ────────────────────────────────────────────────────────────────
+$req_id    = trim($_GET['id'] ?? '');
+$all_posts = status_load_posts();
+$post      = null;
+$post_idx  = null;
+
+foreach ($all_posts as $i => $p) {
+    if (($p['id'] ?? '') === $req_id) {
+        $post      = $p;
+        $post_idx  = $i;
+        break;
+    }
+}
+
+$found = ($post !== null);
+if (!$found) http_response_code(404);
+
+// ── Prev / next navigation ───────────────────────────────────────────────────
+$prev_post = ($found && $post_idx > 0)                        ? $all_posts[$post_idx - 1] : null;
+$next_post = ($found && $post_idx < count($all_posts) - 1)   ? $all_posts[$post_idx + 1] : null;
+
+// ── Meta ──────────────────────────────────────────────────────────────────────
+$page_title = $found
+    ? 'Update #' . htmlspecialchars($post['id']) . ' — ' . htmlspecialchars(STATUS_SITE_NAME)
+    : '404 Not Found — ' . htmlspecialchars(STATUS_SITE_NAME);
+
+$canonical   = STATUS_BASE_URL . '/post.php?id=' . rawurlencode($req_id);
+$og_desc     = $found ? mb_substr(strip_tags($post['text'] ?? ''), 0, 200) : 'Update not found.';
+?>
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title><?= $page_title ?></title>
+  <meta name="description" content="<?= htmlspecialchars($og_desc) ?>">
+  <?php if (!$found): ?><meta name="robots" content="noindex"><?php endif; ?>
+  <link rel="canonical" href="<?= htmlspecialchars($canonical) ?>">
+
+  <meta property="og:title"       content="<?= $found ? 'Update #' . htmlspecialchars($post['id']) : '404' ?>">
+  <meta property="og:type"        content="article">
+  <meta property="og:url"         content="<?= htmlspecialchars($canonical) ?>">
+  <meta property="og:site_name"   content="<?= htmlspecialchars(STATUS_SITE_NAME) ?>">
+  <meta property="og:description" content="<?= htmlspecialchars($og_desc) ?>">
+  <?php if ($found && !empty($post['date'])): ?>
+  <meta property="article:published_time" content="<?= htmlspecialchars(status_iso($post['date'])) ?>">
+  <?php endif; ?>
+
+  <link rel="shortcut icon"    href="<?= STATUS_FAVICON_ICO ?>">
+  <link rel="apple-touch-icon" href="<?= STATUS_FAVICON_JPG ?>">
+
+  <?php if ($prev_post): ?>
+  <link rel="prev" href="<?= htmlspecialchars(STATUS_BASE_URL . '/post.php?id=' . rawurlencode($prev_post['id'])) ?>">
+  <?php endif; ?>
+  <?php if ($next_post): ?>
+  <link rel="next" href="<?= htmlspecialchars(STATUS_BASE_URL . '/post.php?id=' . rawurlencode($next_post['id'])) ?>">
+  <?php endif; ?>
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
+
+  <?php require __DIR__ . '/shared_styles.php'; ?>
+</head>
+<body>
+
+<div class="page" role="main">
+
+  <!-- ── Top bar ─────────────────────────────────────────────────────────── -->
+  <header class="topbar">
+    <a class="back-link" href="<?= htmlspecialchars(STATUS_BASE_URL) ?>/">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
+           stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <line x1="19" y1="12" x2="5" y2="12"/>
+        <polyline points="12 19 5 12 12 5"/>
+      </svg>
+      All updates
+    </a>
+    <?php if ($found): ?>
+    <span class="topbar-badge">#<?= htmlspecialchars($post['id']) ?></span>
+    <?php endif; ?>
+  </header>
+
+  <?php if (!$found): ?>
+  <!-- ── 404 ──────────────────────────────────────────────────────────────── -->
+  <div class="card card-error">
+    <div class="error-icon" aria-hidden="true">
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+           stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="10"/>
+        <line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>
+      </svg>
+    </div>
+    <h1 class="error-title">Update not found</h1>
+    <p class="error-body">
+      No update with ID <code><?= htmlspecialchars($req_id) ?></code> exists.
+      It may have been deleted or the link may be incorrect.
+    </p>
+    <a class="btn-back" href="<?= htmlspecialchars(STATUS_BASE_URL) ?>/">
+      ← Back to all updates
+    </a>
+  </div>
+
+  <?php else: ?>
+  <!-- ── Single post ──────────────────────────────────────────────────────── -->
+
+  <div class="page-heading">
+    <p class="eyebrow"></p>
+    <h1 class="post-single-title">
+      #<?= htmlspecialchars($post['id']) ?>
+    </h1>
+  </div>
+
+  <div class="card card-single">
+    <article>
+
+      <!-- Meta row -->
+      <div class="post-meta">
+        <?php if (!empty($post['date'])): ?>
+        <time class="post-time" datetime="<?= htmlspecialchars(status_iso($post['date'])) ?>"
+              title="<?= htmlspecialchars(status_abs_date($post['date'])) ?>">
+          <?= htmlspecialchars(status_relative_time($post['date'])) ?>
+        </time>
+        <span class="post-abs-date"><?= htmlspecialchars(status_abs_date($post['date'])) ?></span>
+        <?php endif; ?>
+        <?php foreach ((array)($post['tags'] ?? []) as $tag): ?>
+        <a class="post-tag"
+           href="<?= htmlspecialchars(STATUS_BASE_URL . '/?tag=' . rawurlencode($tag)) ?>"
+           title="All updates tagged <?= htmlspecialchars($tag) ?>"><?= htmlspecialchars($tag) ?></a>
+        <?php endforeach; ?>
+      </div>
+
+      <!-- Body -->
+      <p class="post-body"><?= htmlspecialchars($post['text'] ?? '') ?></p>
+
+      <!-- Optional link -->
+      <?php if (!empty($post['link'])): ?>
+      <a class="post-link-large"
+         href="<?= htmlspecialchars($post['link']) ?>"
+         <?= str_starts_with($post['link'], 'http') ? 'target="_blank" rel="noopener noreferrer"' : '' ?>>
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
+             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
+          <polyline points="15 3 21 3 21 9"/>
+          <line x1="10" y1="14" x2="21" y2="3"/>
+        </svg>
+        <?= htmlspecialchars($post['link_label'] ?? $post['link']) ?>
+      </a>
+      <?php endif; ?>
+
+      <!-- Permalink row -->
+      <div class="single-meta-row">
+        <div class="single-uid-block">
+          <span class="single-uid-label">UID</span>
+          <code class="single-uid"><?= htmlspecialchars($post['id']) ?></code>
+        </div>
+        <?php if (!empty($post['date'])): ?>
+        <div class="single-uid-block">
+          <span class="single-uid-label">Published</span>
+          <code class="single-uid"><?= htmlspecialchars(status_iso($post['date'])) ?></code>
+        </div>
+        <?php endif; ?>
+      </div>
+
+    </article>
+  </div>
+
+  <!-- ── Prev / next navigation ───────────────────────────────────────────── -->
+  <?php if ($prev_post || $next_post): ?>
+  <nav class="post-nav" aria-label="Adjacent posts">
+    <div class="post-nav-inner">
+
+      <?php if ($prev_post): ?>
+      <a class="post-nav-btn post-nav-prev"
+         href="<?= htmlspecialchars(STATUS_BASE_URL . '/post.php?id=' . rawurlencode($prev_post['id'])) ?>">
+        <span class="post-nav-dir">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
+               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <line x1="19" y1="12" x2="5" y2="12"/>
+            <polyline points="12 19 5 12 12 5"/>
+          </svg>
+          Newer
+        </span>
+        <span class="post-nav-uid">#<?= htmlspecialchars($prev_post['id']) ?></span>
+        <span class="post-nav-snippet"><?= htmlspecialchars(mb_substr($prev_post['text'] ?? '', 0, 60)) ?>…</span>
+      </a>
+      <?php else: ?>
+      <div class="post-nav-btn post-nav-empty" aria-hidden="true"></div>
+      <?php endif; ?>
+
+      <?php if ($next_post): ?>
+      <a class="post-nav-btn post-nav-next"
+         href="<?= htmlspecialchars(STATUS_BASE_URL . '/post.php?id=' . rawurlencode($next_post['id'])) ?>">
+        <span class="post-nav-dir">
+          Older
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
+               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <line x1="5" y1="12" x2="19" y2="12"/>
+            <polyline points="12 5 19 12 12 19"/>
+          </svg>
+        </span>
+        <span class="post-nav-uid">#<?= htmlspecialchars($next_post['id']) ?></span>
+        <span class="post-nav-snippet"><?= htmlspecialchars(mb_substr($next_post['text'] ?? '', 0, 60)) ?>…</span>
+      </a>
+      <?php else: ?>
+      <div class="post-nav-btn post-nav-empty" aria-hidden="true"></div>
+      <?php endif; ?>
+
+    </div>
+  </nav>
+  <?php endif; ?>
+
+  <?php endif; // end $found ?>
+
+  <footer class="page-foot">
+    <span class="foot-note"><?= htmlspecialchars(STATUS_SITE_NAME) ?> · status log</span>
+    <a class="foot-link" href="<?= htmlspecialchars(STATUS_HOME_URL) ?>">← Back to home</a>
+  </footer>
+
+</div><!-- /page -->
+</body>
+</html>
@@ -0,0 +1,627 @@
+<style>
+/* ════════════════════════════════════════════════════════════════════════════
+   STATUS PAGES — design tokens, layout and components
+   Exact match to gate.php / index.php design system.
+   Included by:  status/index.php  and  status/post.php
+════════════════════════════════════════════════════════════════════════════ */
+
+/* ── Reset & tokens ─────────────────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --bg:         #09090f;
+  --surface:    #0f0f1a;
+  --surface-2:  #141425;
+  --border:     #1e1e38;
+  --border-2:   #2a2a48;
+  --text:       #e8e8f8;
+  --text-2:     #9898c0;
+  --text-3:     #58587a;
+
+  --green:      #00e87a;
+  --blue:       #00c8ff;
+  --purple:     #b060ff;
+  --red:        #ff3355;
+  --orange:     #ff8800;
+  --pink:       #ff50a0;
+
+  --pat:        #ff424d;
+  --pat-glow:   rgba(255,66,77,.18);
+
+  --r:          6px;
+  --pp:         1.25rem;
+  --max-w:      680px;
+}
+@media (min-width: 600px)  { :root { --pp: 1.75rem; } }
+@media (min-width: 900px)  { :root { --pp: 2.5rem;  } }
+
+html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
+
+body {
+  min-height: 100dvh;
+  background: var(--bg);
+  background-image:
+    radial-gradient(ellipse 70% 50% at 15% 10%,  rgba(176,96,255,.06) 0%, transparent 60%),
+    radial-gradient(ellipse 60% 40% at 85% 80%,  rgba(0,200,255,.05)  0%, transparent 60%),
+    radial-gradient(ellipse 50% 60% at 50% 50%,  rgba(255,66,77,.03)  0%, transparent 70%);
+  font-family: 'Inter', system-ui, sans-serif;
+  color: var(--text);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--pp) var(--pp) 3rem;
+}
+
+/* scanline overlay */
+body::after {
+  content: '';
+  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
+  background: repeating-linear-gradient(
+    0deg, transparent 0px, transparent 3px,
+    rgba(0,0,0,.06) 3px, rgba(0,0,0,.06) 4px
+  );
+}
+
+/* ── Animations ─────────────────────────────────────────────────────────────── */
+@keyframes rise {
+  from { opacity: 0; transform: translateY(14px) scale(.98); }
+  to   { opacity: 1; transform: translateY(0)    scale(1);   }
+}
+@keyframes shimmer {
+  from { background-position:   0% 50%; }
+  to   { background-position: 200% 50%; }
+}
+
+/* ── Page wrapper ───────────────────────────────────────────────────────────── */
+.page {
+  width: 100%;
+  max-width: var(--max-w);
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  animation: rise .45s cubic-bezier(.22,.68,0,1.2) both;
+  position: relative; z-index: 1;
+}
+
+/* ── Top bar ────────────────────────────────────────────────────────────────── */
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: .75rem;
+  padding: .75rem 0 .25rem;
+}
+
+.back-link {
+  display: inline-flex; align-items: center; gap: .4rem;
+  font-family: 'Share Tech Mono', monospace;
+  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
+  color: var(--text-3); text-decoration: none;
+  transition: color .15s;
+}
+.back-link:hover { color: var(--green); }
+.back-link svg { flex-shrink: 0; }
+
+.topbar-badge {
+  font-family: 'Share Tech Mono', monospace;
+  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
+  color: var(--text-3);
+  background: rgba(255,255,255,.04);
+  border: 1px solid var(--border-2);
+  border-radius: 99px;
+  padding: .2rem .65rem;
+}
+
+/* ── Page heading ───────────────────────────────────────────────────────────── */
+.page-heading { display: flex; flex-direction: column; gap: .35rem; }
+
+.eyebrow {
+  font-family: 'Share Tech Mono', monospace;
+  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
+  color: var(--green); text-shadow: 0 0 10px rgba(0,232,122,.45);
+}
+.eyebrow::before { content: '> '; opacity: .5; }
+
+.page-heading h1 {
+  font-size: clamp(1.5rem, 4vw, 2rem);
+  font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
+  background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 60%, var(--pink) 100%);
+  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+}
+.page-subtitle {
+  font-size: .88rem; color: var(--text-2); line-height: 1.6;
+}
+
+/* ── Card shell ─────────────────────────────────────────────────────────────── */
+.card {
+  background: rgba(15,15,26,.88);
+  border: 1px solid var(--border);
+  border-radius: calc(var(--r) + 4px);
+  overflow: hidden;
+  position: relative;
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  box-shadow:
+    0 0 0 1px rgba(255,255,255,.03),
+    0 6px 40px rgba(0,0,0,.55);
+}
+/* shimmer top rule */
+.card::before {
+  content: '';
+  position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
+  background: linear-gradient(90deg,
+    var(--pat), var(--purple), var(--blue), var(--green),
+    var(--blue), var(--purple), var(--pat));
+  background-size: 300% 100%;
+  animation: shimmer 5s linear infinite;
+}
+/* purple corner accent */
+.card::after {
+  content: '';
+  position: absolute; bottom: -1px; right: -1px;
+  width: 14px; height: 14px;
+  border-bottom: 2px solid var(--purple);
+  border-right:  2px solid var(--purple);
+  border-radius: 0 0 calc(var(--r) + 4px) 0;
+  opacity: .5;
+}
+
+/* ── Post item (list view) ──────────────────────────────────────────────────── */
+.post-item {
+  padding: 1.2rem 1.4rem;
+  border-bottom: 1px solid var(--border);
+  transition: background .15s;
+}
+.post-item:first-child { padding-top: 1.4rem; }
+.post-item-last { border-bottom: none; }
+.post-item:hover { background: rgba(255,255,255,.015); }
+
+.post-meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: .45rem;
+  margin-bottom: .5rem;
+}
+
+.post-uid {
+  font-family: 'Share Tech Mono', monospace;
+  font-size: .62rem; letter-spacing: .08em;
+  color: var(--green); text-decoration: none;
+  background: rgba(0,232,122,.07);
+  border: 1px solid rgba(0,232,122,.2);
+  border-radius: 3px;
+  padding: .1em .5em;
+  transition: background .15s, border-color .15s;
+}
+.post-uid:hover { background: rgba(0,232,122,.14); border-color: rgba(0,232,122,.4); }
+
+.post-time {
+  font-family: 'Share Tech Mono', monospace;
+  font-size: .62rem; letter-spacing: .05em; color: var(--text-3);
+  cursor: help;
+}
+
+.post-abs-date {
+  font-family: 'Share Tech Mono', monospace;
+  font-size: .58rem; letter-spacing: .04em; color: var(--text-3);
+  opacity: .7;
+}
+
+/* hide abs-date on mobile — visible at wider widths */
+@media (max-width: 520px) { .post-abs-date { display: none; } }
+
+.post-tag {
+  font-family: 'Share Tech Mono', monospace;
+  font-size: .57rem; letter-spacing: .1em; text-transform: uppercase;
+  padding: .1em .45em;
+  border: 1px solid var(--border-2);
+  border-radius: 3px;
+  color: var(--blue);
+  text-decoration: none;
+  transition: border-color .15s, color .15s;
+}
+.post-tag:hover { border-color: var(--blue); color: var(--blue); }
+
+.post-text {
+  font-size: .92rem; color: var(--text); line-height: 1.7;
+  margin-bottom: .6rem;
+}
+
+.post-link {
+  display: inline-flex; align-items: center; gap: .3rem;
+  font-family: 'Share Tech Mono', monospace;
+  font-size: .65rem; letter-spacing: .05em;
+  color: var(--blue); text-decoration: none; opacity: .85;
+  transition: opacity .15s;
+  margin-bottom: .5rem;
+}
+.post-link:hover { opacity: 1; }
+.post-link::after { content: ' →'; }
+
+.post-footer {
+  display: flex;
+  align-items: center;
+  gap: .75rem;
+  padding-top: .5rem;
+  border-top: 1px solid var(--border);
+  margin-top: .3rem;
+}
+
+.post-permalink {
+  display: inline-flex; align-items: center; gap: .35rem;
+  font-family: 'Share Tech Mono', monospace;
+  font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
+  color: var(--text-3); text-decoration: none;
+  transition: color .15s;
+}
+.post-permalink:hover { color: var(--green); }
+
+/* ── Single post extras ─────────────────────────────────────────────────────── */
+.post-single-title {
+  font-size: clamp(1.4rem, 4vw, 1.9rem);
+  font-weight: 700; letter-spacing: -.02em;
+  background: linear-gradient(135deg, var(--green) 0%, var(--blue) 100%);
+  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+}
+
+.card-single { padding: 1.75rem; }
+.card-single article { display: flex; flex-direction: column; gap: .9rem; }
+
+.post-body {
+  font-size: 1rem; color: var(--text); line-height: 1.75;
+}
+
+.post-link-large {
+  display: inline-flex; align-items: center; gap: .5rem;
+  padding: .65rem 1.1rem;
+  border: 1px solid rgba(0,200,255,.25);
+  border-radius: var(--r);
+  background: rgba(0,200,255,.05);
+  font-size: .88rem; font-weight: 600;
+  color: var(--blue); text-decoration: none;
+  transition: background .2s, border-color .2s, transform .15s;
+  align-self: flex-start;
+}
+.post-link-large:hover {
+  background: rgba(0,200,255,.1);
+  border-color: rgba(0,200,255,.5);
+  transform: translateY(-1px);
+}
+.post-link-large svg { flex-shrink: 0; }
+
+.single-meta-row {
+  display: flex; flex-wrap: wrap; gap: .75rem;
+  padding-top: .85rem;
+  border-top: 1px solid var(--border);
+}
+.single-uid-block { display: flex; flex-direction: column; gap: .2rem; }
+.single-uid-label {
+  font-family: 'Share Tech Mono', monospace;
+  font-size: .55rem; letter-spacing: .16em; text-transform: uppercase;
+  color: var(--text-3);
+}
+.single-uid {
+  font-family: 'Share Tech Mono', monospace;
+  font-size: .75rem; letter-spacing: .04em; color: var(--text-2);
+  background: rgba(255,255,255,.04);
+  border: 1px solid var(--border-2);
+  border-radius: 3px;
+  padding: .15em .5em;
+  user-select: all;
+}
+
+/* ── Prev / next post navigation ────────────────────────────────────────────── */
+.post-nav { width: 100%; }
+.post-nav-inner {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: .75rem;
+}
+@media (max-width: 420px) {
+  .post-nav-inner { grid-template-columns: 1fr; }
+  .post-nav-empty { display: none; }
+}
+
+.post-nav-btn {
+  display: flex; flex-direction: column; gap: .3rem;
+  padding: .9rem 1.1rem;
+  background: rgba(15,15,26,.8);
+  border: 1px solid var(--border);
+  border-radius: calc(var(--r) + 2px);
+  text-decoration: none;
+  transition: background .2s, border-color .2s, transform .15s;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  position: relative; overflow: hidden;
+}
+.post-nav-btn::before {
+  content: '';
+  position: absolute; top: 0; left: 0; right: 0; height: 1px;
+  background: linear-gradient(90deg,
+    var(--pat), var(--purple), var(--blue), var(--green),
+    var(--blue), var(--purple), var(--pat));
+  background-size: 300% 100%;
+  animation: shimmer 5s linear infinite;
+  opacity: .5;
+}
+.post-nav-btn:hover {
+  background: rgba(255,255,255,.05);
+  border-color: var(--border-2);
+  transform: translateY(-1px);
+}
+.post-nav-next { text-align: right; align-items: flex-end; }
+
+.post-nav-dir {
+  display: inline-flex; align-items: center; gap: .3rem;
+  font-family: 'Share Tech Mono', monospace;
+  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
+  color: var(--green); text-shadow: 0 0 8px rgba(0,232,122,.4);
+}
+.post-nav-uid {
+  font-family: 'Share Tech Mono', monospace;
+  font-size: .72rem; letter-spacing: .05em; color: var(--text-2);
+}
+.post-nav-snippet {
+  font-size: .78rem; color: var(--text-3); line-height: 1.5;
+}
+
+/* ── Pagination (list view) ─────────────────────────────────────────────────── */
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: .5rem;
+}
+.pagination-info {
+  font-family: 'Share Tech Mono', monospace;
+  font-size: .62rem; letter-spacing: .06em; color: var(--text-3);
+}
+.pagination-btns {
+  display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
+}
+
+.page-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 30px; height: 30px; padding: 0 .5rem;
+  border: 1px solid var(--border-2);
+  border-radius: 4px;
+  background: rgba(255,255,255,.03);
+  font-family: 'Share Tech Mono', monospace;
+  font-size: .68rem; letter-spacing: .04em;
+  color: var(--text-3); text-decoration: none;
+  transition: border-color .15s, color .15s, background .15s;
+  cursor: pointer;
+}
+a.page-btn:hover       { border-color: var(--green); color: var(--green); background: rgba(0,232,122,.05); }
+.page-btn.active       { border-color: var(--green); color: var(--green); background: rgba(0,232,122,.08); }
+.page-btn[aria-disabled] { opacity: .3; cursor: not-allowed; pointer-events: none; }
+.page-ellipsis         { border-color: transparent; background: transparent; cursor: default; }
+
+/* ── Empty state ────────────────────────────────────────────────────────────── */
+.empty-state {
+  padding: 2.5rem 1.5rem;
+  font-family: 'Share Tech Mono', monospace;
+  font-size: .75rem; color: var(--text-3); text-align: center; letter-spacing: .06em;
+}
+.empty-state::before { content: '// '; opacity: .4; }
+
+/* ── 404 / error card ───────────────────────────────────────────────────────── */
+.card-error {
+  padding: 2.5rem 2rem;
+  display: flex; flex-direction: column; gap: 1rem;
+  align-items: flex-start;
+}
+.error-icon {
+  width: 48px; height: 48px; border-radius: 50%;
+  background: rgba(255,51,85,.1);
+  border: 1px solid rgba(255,51,85,.3);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--red);
+  box-shadow: 0 0 20px rgba(255,51,85,.15);
+}
+.error-title {
+  font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em;
+  background: linear-gradient(120deg, var(--red), var(--pink));
+  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+}
+.error-body {
+  font-size: .9rem; color: var(--text-2); line-height: 1.65;
+}
+.error-body code {
+  font-family: 'Share Tech Mono', monospace;
+  background: rgba(255,255,255,.06);
+  border: 1px solid var(--border-2);
+  border-radius: 3px; padding: .1em .4em;
+  color: var(--orange);
+}
+.btn-back {
+  display: inline-flex; align-items: center; gap: .4rem;
+  padding: .6rem 1.1rem;
+  border: 1px solid var(--border-2);
+  border-radius: var(--r);
+  background: rgba(255,255,255,.04);
+  font-size: .85rem; font-weight: 600;
+  color: var(--text-2); text-decoration: none;
+  transition: background .2s, border-color .2s, color .2s;
+}
+.btn-back:hover { background: rgba(255,255,255,.08); color: var(--text); border-color: var(--green); }
+
+/* ── Page footer ────────────────────────────────────────────────────────────── */
+.page-foot {
+  display: flex; align-items: center; justify-content: space-between;
+  flex-wrap: wrap; gap: .5rem;
+  padding-top: .5rem;
+  border-top: 1px solid var(--border);
+}
+.foot-note {
+  font-family: 'Share Tech Mono', monospace;
+  font-size: .6rem; letter-spacing: .08em; color: var(--text-3);
+}
+.foot-note::before { content: '// '; opacity: .4; }
+.foot-link {
+  font-family: 'Share Tech Mono', monospace;
+  font-size: .6rem; letter-spacing: .08em;
+  color: var(--text-3); text-decoration: none;
+  transition: color .15s;
+}
+.foot-link:hover { color: var(--green); }
+
+/* ════════════════════════════════════════════════════════════════════════════
+   MEDIA — full-width display on status/post.php
+════════════════════════════════════════════════════════════════════════════ */
+
+/* ── Media block wrapper ─────────────────────────────────────────────────── */
+.post-media {
+  display: flex;
+  flex-direction: column;
+  gap: .75rem;
+  margin-top: .25rem;
+}
+
+/* ── Image ───────────────────────────────────────────────────────────────── */
+.post-media-img {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--r);
+  border: 1px solid var(--border);
+  background: var(--surface-2);
+  object-fit: contain;
+}
+.post-media-img-wrap {
+  position: relative;
+  border-radius: var(--r);
+  overflow: hidden;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  line-height: 0; /* kill inline gap */
+}
+.post-media-img-wrap a {
+  display: block; line-height: 0;
+}
+
+/* ── Video.js player ─────────────────────────────────────────────────────── */
+
+/* Container — keeps 16:9 aspect */
+.post-media-video-wrap {
+  position: relative;
+  width: 100%;
+  padding-top: 56.25%;
+  background: #000;
+  border-radius: var(--r);
+  overflow: hidden;
+  border: 1px solid var(--border);
+}
+.post-media-video-wrap .video-js {
+  position: absolute;
+  inset: 0;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+/* ──  Video.js skin override — gate.php tokens ───────────────────────────── */
+
+/* Base container */
+.video-js {
+  font-family: 'Share Tech Mono', monospace;
+  color: var(--text);
+  background: #000;
+}
+
+/* Big play button — centred, green glow */
+.video-js .vjs-big-play-button {
+  width: 64px; height: 64px;
+  border-radius: 50%;
+  line-height: 64px;
+  top: 50%; left: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0;
+  background: rgba(0,232,122,.15);
+  border: 2px solid var(--green);
+  color: var(--green);
+  transition: background .2s, box-shadow .2s;
+}
+.video-js:hover .vjs-big-play-button,
+.video-js .vjs-big-play-button:focus {
+  background: rgba(0,232,122,.28);
+  box-shadow: 0 0 24px rgba(0,232,122,.45);
+}
+.video-js .vjs-big-play-button .vjs-icon-placeholder::before {
+  font-size: 28px;
+  line-height: 60px;
+  color: var(--green);
+}
+
+/* Control bar */
+.video-js .vjs-control-bar {
+  background: rgba(9,9,15,.88);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border-top: 1px solid var(--border);
+  height: 36px;
+  padding: 0 4px;
+}
+
+/* All control icons */
+.video-js .vjs-button > .vjs-icon-placeholder::before,
+.video-js .vjs-time-control { color: var(--text-2); font-size: .72rem; }
+.video-js .vjs-button:hover > .vjs-icon-placeholder::before { color: var(--green); }
+
+/* Progress / seek bar */
+.video-js .vjs-progress-control { height: 100%; align-items: center; }
+.video-js .vjs-progress-holder  { height: 3px; background: var(--border-2); }
+.video-js .vjs-play-progress,
+.video-js .vjs-play-progress::before { background: var(--green); color: var(--green); }
+.video-js .vjs-load-progress    { background: rgba(0,232,122,.22); }
+.video-js .vjs-seek-handle .vjs-slider-handle::before { background: var(--green); }
+
+/* Slider thumb */
+.video-js .vjs-progress-holder .vjs-play-progress::before {
+  color: var(--green);
+  top: -0.3em;
+}
+
+/* Volume */
+.video-js .vjs-volume-bar  { background: var(--border-2); }
+.video-js .vjs-volume-level{ background: var(--green); }
+
+/* Current time / duration */
+.video-js .vjs-current-time-display,
+.video-js .vjs-duration-display,
+.video-js .vjs-time-divider { color: var(--text-2); }
+
+/* Fullscreen / pip buttons */
+.video-js .vjs-fullscreen-control .vjs-icon-placeholder::before { color: var(--text-2); }
+.video-js .vjs-fullscreen-control:hover .vjs-icon-placeholder::before { color: var(--green); }
+
+/* Poster */
+.video-js .vjs-poster { background-size: cover; }
+
+/* Captions menu */
+.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+  background: rgba(9,9,15,.95);
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+}
+.video-js .vjs-menu li { color: var(--text-2); }
+.video-js .vjs-menu li.vjs-selected { color: var(--green); }
+
+/* Loading spinner — replace default with our animation */
+.video-js .vjs-loading-spinner {
+  border-color: var(--border-2);
+  border-top-color: var(--green);
+  border-width: 3px;
+}
+.video-js .vjs-loading-spinner::before,
+.video-js .vjs-loading-spinner::after { display: none; }
+
+/* ── Media caption / filename ────────────────────────────────────────────── */
+.post-media-caption {
+  font-family: 'Share Tech Mono', monospace;
+  font-size: .6rem; letter-spacing: .05em; color: var(--text-3);
+  padding: .2rem 0 0 .1rem;
+}
+</style>