changed background

inc/backgrounds.php

@@ -0,0 +1,31 @@
+<?php
+/**
+ * Backgrounds are just PNGs in img/bg/, generated by tools/background.py.
+ * Drop a new one in and it joins the cycle automatically -- this list drives
+ * both the CSS custom properties and the footer cycler.
+ */
+
+function bg_styles(): array
+{
+    static $names = null;
+    if ($names !== null) {
+        return $names;
+    }
+    $files = glob(__DIR__ . '/../img/bg/*.png') ?: [];
+    $names = array_map(static fn($f) => pathinfo($f, PATHINFO_FILENAME), $files);
+    sort($names);
+    return $names;
+}
+
+function bg_default(): string
+{
+    $all = bg_styles();
+    return in_array('flow', $all, true) ? 'flow' : ($all[0] ?? '');
+}
+
+/** A different style on every page load. */
+function bg_pick(): string
+{
+    $all = bg_styles();
+    return $all ? $all[random_int(0, count($all) - 1)] : '';
+}

inc/footer.php

@@ -10,5 +10,21 @@ $build = preg_match('/[0-9a-f]{7,40}/i', $build, $m) ? $m[0] : ($build ?: 'dev')
   </div>
   <small>&copy; <?= date('Y') ?> · build: <a href="<?= htmlspecialchars(REPO_URL) ?>"><?= htmlspecialchars($build) ?></a></small>
 </footer>
+<?php require_once __DIR__ . '/backgrounds.php'; $bgs = bg_styles(); ?>
+<?php if (count($bgs) > 1): ?>
+<script>
+  /* Unlabelled: press b to flick through the backgrounds without reloading.
+     Not persisted -- the server picks a fresh one on every load anyway. */
+  (function () {
+    var all = <?= json_encode($bgs) ?>, root = document.documentElement;
+    document.addEventListener('keydown', function (e) {
+      if (e.key !== 'b' || e.metaKey || e.ctrlKey || e.altKey) return;
+      var t = e.target;
+      if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable)) return;
+      root.dataset.bg = all[(all.indexOf(root.dataset.bg) + 1) % all.length];
+    });
+  })();
+</script>
+<?php endif; ?>
 </body>
 </html>

inc/header.php

@@ -1,12 +1,30 @@
-<?php require_once __DIR__ . '/../config.php'; ?>
+<?php
+require_once __DIR__ . '/../config.php';
+require_once __DIR__ . '/backgrounds.php';
+$bgs = bg_styles();
+$bgPick = bg_pick();
+// the page picks a style per request, so don't let a cached copy pin one
+header('Cache-Control: no-store');
+?>
 <!doctype html>
-<html lang="en">
+<html lang="en"<?= $bgPick !== '' ? ' data-bg="' . htmlspecialchars($bgPick) . '"' : '' ?>>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title><?= htmlspecialchars($page_title ?? SITE_TITLE) ?></title>
   <link rel="icon" href="/img/favicon.ico" sizes="any">
   <link rel="stylesheet" href="/css/style.css">
+<?php if ($bgs): ?>
+  <style>
+    /* One custom property per style; data-bg on <html> selects which.
+       Only the matching rule's url() is ever fetched, so the styles that
+       are not showing cost nothing but a line of CSS. */
+    :root { --bg-img: url("/img/bg/<?= rawurlencode(bg_default()) ?>.png"); }
+<?php foreach ($bgs as $b): ?>
+    html[data-bg="<?= htmlspecialchars($b) ?>"] { --bg-img: url("/img/bg/<?= rawurlencode($b) ?>.png"); }
+<?php endforeach; ?>
+  </style>
+<?php endif; ?>
   <script src="/js/htmx.min.js" defer></script>
   <script src="/js/idiomorph-ext.min.js" defer></script>
 </head>