Add read-only web UI

Serves Pete's classified-story archive over HTTP alongside the Matrix bot. Three sections (gaming/tech/politics), Animal-Crossing-vibe Tailwind templates, day/night palette driven by the visitor's browser clock. Web port configurable via web.listen_addr and ${PETE_WEB_PORT} in docker-compose. Tailwind built in a node stage in the Dockerfile so deployments don't need node at runtime.
2026-05-24 21:51:49 -07:00
parent 87906719fa
commit fbd4b84eaf
20 changed files with 1695 additions and 1 deletions
--- a/internal/web/static/css/input.css
+++ b/internal/web/static/css/input.css
@@ -0,0 +1,80 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ----------------------------------------------------------------------------
+   Day/night palette. JS sets data-phase={dawn|day|dusk|night} on <html>.
+   Each phase drives a small set of CSS vars; the page transitions smoothly
+   thanks to the `transition-colors duration-1000` on <body>.
+---------------------------------------------------------------------------- */
+
+:root,
+html[data-phase="day"] {
+  --bg:        #fff7e4;         /* warm cream */
+  --bg-grad:   #ffeec2;         /* soft sun wash */
+  --card:      #ffffff;
+  --ink:       #3a2e1f;
+  --accent:    #f2a541;         /* sunshine yellow */
+}
+
+html[data-phase="dawn"] {
+  --bg:        #ffe7d6;
+  --bg-grad:   #ffc9c9;
+  --card:      #fff4ea;
+  --ink:       #4a2e2a;
+  --accent:    #ff8a65;
+}
+
+html[data-phase="dusk"] {
+  --bg:        #ffd6a8;
+  --bg-grad:   #f7a07e;
+  --card:      #fff1de;
+  --ink:       #3d2417;
+  --accent:    #e6553a;
+}
+
+html[data-phase="night"] {
+  --bg:        #1a1f3a;
+  --bg-grad:   #2a3358;
+  --card:      #2d365a;
+  --ink:       #f1ecd8;        /* moonlight */
+  --accent:    #f9d976;        /* lantern */
+}
+
+@layer base {
+  body { font-family: "Nunito", system-ui, sans-serif; }
+  html { scroll-behavior: smooth; }
+}
+
+@layer utilities {
+  .font-display { font-family: "Fredoka", "Nunito", system-ui, sans-serif; letter-spacing: -0.01em; }
+
+  /* Soft signage shadow — Animal Crossing wooden plank vibe. */
+  .shadow-pete    { box-shadow: 0 4px 0 rgba(60,40,20,0.10), 0 8px 24px rgba(60,40,20,0.08); }
+  .shadow-pete-lg { box-shadow: 0 6px 0 rgba(60,40,20,0.12), 0 16px 32px rgba(60,40,20,0.12); }
+
+  /* Per-channel theme colors. Kept as plain utilities so Tailwind doesn't
+     need to know to safelist them. */
+  .bg-theme-gaming    { background-color: #4caf7d; }
+  .bg-theme-tech      { background-color: #5aa9e6; }
+  .bg-theme-politics  { background-color: #e07a5f; }
+
+  .text-theme-gaming    { color: #2d8a5a; }
+  .text-theme-tech      { color: #2f7fb8; }
+  .text-theme-politics  { color: #b8523a; }
+
+  .decoration-theme-gaming    { text-decoration-color: #4caf7d; }
+  .decoration-theme-tech      { text-decoration-color: #5aa9e6; }
+  .decoration-theme-politics  { text-decoration-color: #e07a5f; }
+
+  .border-theme-gaming    { border-color: #4caf7d; }
+  .border-theme-tech      { border-color: #5aa9e6; }
+  .border-theme-politics  { border-color: #e07a5f; }
+
+  .line-clamp-3 {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}